Intro

L'année dernière, j'avais développé le moteur de jeu Ball.js, qui gérait les collisions et l'affichage (en DOM ou canvas) de balles, avec divers petits effets visuels possibles (couleurs, explosions, transparence …).

Cette année, j'ai fait un autre moteur de jeu plus évolué, basé sur Box2d / Box2dweb (le moteur physique de Angry Birds, un jeu que vous devez connaitre) : boxboxevents. Je ne suis pas parti de zéro comme les dernières fois, j'ai repris le framework boxbox, développé à l'origine par Greg Smith, qui permettait d'abstraire la gestion des entités et des collisions sans avoir à connaitre box2d.

J'ai rajouté à ce framework les fonctionnalités dont on a besoin lorsque l'on fait un jeu vidéo :

• la gestion des mouse/multitouch events sur les entités
• la gestion du viewport

Pourquoi avoir développé boxboxevents ?

Cela faisait quelques temps que je souhaitais faire un jeu vidéo avec des entités soumises à la gravité réelle et, avec mes dernières expériences j'avais envie d'y ajouter des interactions que rendent possible les devices telles que les tablettes ou les smartphones, comme l'accéléromètre ou le multitouch.

Pourquoi être parti de boxbox ?

boxbox fournissait cette première couche d'abstraction simplifiant l'utilisation de Box2d, et surtout est utilisable de façon assez familière pour un développeur JavaScript qui a l'habitude de frameworks comme jQuery ou autre. C'est naturellement que j'en ai fait un fork pour le faire évoluer et y ajouter des fonctionnalités.

Et maintenant, la suite ?…

J'ai appris pas mal de choses en développant boxboxevents, entre autre sur la gestion du multitouch (finalement, on prend souvent le touch comme une simple extension de la souris au doigt alors que cela donne beaucoup plus de possibilités d'interactions – et rajoute aussi de la complexité) et j'ai aussi appris à utiliser Box2dweb …

Maintenant que j'ai fini mon framework, il ne reste plus qu'à le mettre à l'épreuve – ce qu'il me faut, c'est une bonne idée de jeu, si vous en avez, n'hésitez pas à m'en faire part …

Tophe

Sources :

• boxboxevents website : http://topheman.github.io/boxbox/
• boxboxevents demo (desktop/tablet/smartphone)

lesjoiesdupatineur.tumblr.com

Si vous connaissez lesjoiesducode.tumblr.com , vous connaissez déjà le principe, sinon, c'est tout simple : un gif animé, une expression qui va avec, ceci sur un thème que nous avons tous en commun : le roller …

N'hésitez pas à envoyer vos idées via le formulaire disponible sur le site (vous serez cité, avec un lien vers votre blog/site si vous en avez un).

Quoiqu'il arrive, revenez pour des nouvelles mises à jour de " lesjoiesdupatineur " et n'hésitez pas à partager l'adresse …

Tophe

Ce samedi n'a pas manqué à la règle. Nous étions là sur la place, en ce jour de canicule et nous avons joué pas moins de trois heures et demi, entre 15h et 18h30 … avec un beau soleil … Je ne saurais dire combien de bouteilles d'1.5l d'eau j'ai avalées mais je peux vous assurer que nous avons eu bien chaud … Voici donc une petite bd pour se rappeler de cette session …

Tophe

En plus grand

En plus grand

Toutes les Bulles du Tophe

Ce midi, à ma pause déjeuner, j'ai fait ce petit dessin et je me suis dit que cela vaudrait le coup de le partager avec vous. J'inaugure donc une nouvelle " catégorie " en parallèle des bds : les drafts. Cela me permettra de partager plus naturellement avec vous ces ébauches (éventuellement de recycler quelques making-off de bds )

Tophe

PS : Pour celui-ci, je m'étais mis à dessiner un peu au fil du stylo avec comme thème en tête les jeux Olympiques et après 2 dessins sur les anneaux je me suis mis à faire celui-ci sur la flamme Olympique …

En plus grand

En plus grand

• une compétition de Roller Freestyle au plus haut niveau
• des espaces d'initiation et de démonstration ouverts au public
• des moments de spectacle et de détente conviviaux

Pour plus d'informations : www.medoc-games.com / facebook

En plus grand

En plus grand

La petite histoire :

Damien (l'organisateur de Medoc Games) connaissait " les Bulles du Tophe " depuis déjà quelques temps. En cherchant des idées de graphisme pour habiller le site de roller de son club pour Noël, a montré l'une de mes bds à une de ses amies et c'est alors que celle-ci lui a répondu tout simplement :

" C'est mon frère qui fait ces bds … "

Oui, le monde est petit …

Tophe

Toutes les Bulles du Tophe

Après Topheman Squares, j'ai décidé de continuer ma lancée sur les jeux en HTML5/Javascript. Je vous présente donc aujourd'hui ma dernière création : Topheman Bombs. Le jeu est simple :

• Vous dirigez la balle bleue à l'aide de l’accéléromètre de votre téléphone/tablette
• Vous devez exterminer les ennemis (points rouge) en lachant des bombes (toucher l'écran pour lacher une bombe)
• Attrapez les points verts pour réccupérer des bombes

Matériel requis

Le jeu marche sur iPhone/iPad dans votre navigateur (je n'ai pas fait d'appli parce que je n'ai pas de mac ni 100$ par an à mettre dans une license développeur Apple).
Pour les appareils Android, il vous suffit de télécharger l'application sur Google Play (Android Market).

Technos

Aussi bien pour iOs qu'Android, le code est le même (HTML5/Javascript), c'est la force des solutions telles que phonegap (cela vous permet de créer des applications mobiles natives pour de multiples plateformes en utilisant des technologies web).

La petite histoire

C'est en lisant un article sur html5rocks.com à propos de l'accès à l'accéléromètre depuis Javascript que l'idée m'ai venue de faire un jeu tirant partie de cette feature.

A l'inverse de Topheman Squares où je savais exactement quel gameplay je recherchais, sur Topheman Bombs, je me suis d'abord préoccupé des technos que je souhaitais utiliser (accéléromètre, canvas, jeu adaptable à tout écran) pour créer ensuite le gameplay au fur et à mesure (je remercie au passage mon collègue Nicolas qui m'a donné quelques idées à ce propos).

Ball.js

J'ai commencé Topheman Bombs pour tester l'accéléromètre sur Javascript mais je l'ai surtout fini pour présenter un projet qui utilisait Ball.js, la classe Javascript que j'ai développée pour gérer les effets visuels ainsi que les interractions entre les balles.
Vous pouvez maintenant trouver le code source de Ball.js sur github.com, j'ai fait attention à bien le documenter ainsi qu'à créer une liste des fonctions à utiliser et des démos.

Je ferai éventuellement un article un peu plus technique pour parler de :

• Ball.js
• Des méthodes de développement pour émuler l'accéléromètre (merci à remote-tilt.com )
• Des retours sur l'intégration de mon code HTML5/Javascript dans une application android.

J'espère que vous apprécierez Topheman Bombs (n'hésitez pas à essayer Topheman Squares si vous ne l'avez pas déjà fait),

Tophe

Peu de bds dernièrement sur le blog … Rassurez-vous, je n'ai pas abandonné, j'étais juste sur d'autres projets – principalement des développements en Javascript. Je vous présente aujourd'hui l'un d'entre eux qui est maintenant assez avancé pour l'ouvrir au public : un jeu d'arcade codé en HTML5/Javascript.

C'est une adaptation d'un jeu auquel je jouais il y a 20 ans sur le premier mac couleur de mon père ; ne le retrouvant pas sur le net, j'ai décidé de le recoder – jouable dans un navigateur. Tout ce dont vous avez donc besoin c'est d'un navigateur récent.

N'hésitez pas à me faire des retours dans les commentaires, par mail ou par twitter, afin que je puisse corriger d'éventuels bugs, adapter la difficulté ou des incohérences au niveau du score.

Tophe

Accèder au site de Topheman Squares

Quelques screenshots

Joyeux Noël à Tous !

Tophe

En plus grand (fr) – English version

En plus grand (fr) – English version

Toutes les Bulles du Tophe

A revoir : Noël 2010, Noël 2009

Ce sera bientôt à mon tour de partir en vacances (chacun son tour ).

A bientôt, et bonne rentrée à tous,

Tophe

PS : Ne prenez pas au mot ce que je raconte dans le premier paragraphe … cependant … n'hésitez pas à partager vos retours de vacances dans les commentaires … eh oui, toutes les bonnes choses ont une fin

En plus grand (fr)

En plus grand (fr)

Toutes les Bulles du Tophe

Pour certains les vacances commencent , pour d'autres elles sont finies . En attendant les miennes, ce week-end, j'ai fait 3 jours de randonnée dans les Pyrénées, à l'occasion desquels j'ai pris une photo pour une bulle dont j'avais eu l'idée quelques jours plus tôt en passant chez Decathlon …

Quand on voit le rayon " Chaussures de randonnée " qui fait 15m de long sur 2m de haut, on est pas étonné ensuite de croiser tout le monde chaussé en Quechua – il en va de même d'ailleurs pour les tentes, les sacs à dos, etc …

… petite question, en roller, vous portez quoi comme patins ?…

Tophe

En plus grand (fr)

En plus grand (fr)

Note pour les lecteurs non patineurs : SEBA est l'une des marques de roller les plus répandues dans le monde du slalom.

Toutes les Bulles du Tophe