EaselJS – Tuto 2 : sprite(no bull)sheets

Main menu

Dans le premier tutoriel consacré à EaselJS nous avons abordé les bases de cette bibliothèque qui permet de simplifier l’affichage et la manipulation de composants graphiques dans un canvas HTML.

Dans ce second tutoriel nous allons étudier comment :

• manipuler les Sprites et les Spritesheets,
• adapter les animations d’un Sprite aux événements claviers.

L’objectif est d’obtenir un personnage animé répondant à des interactions utilisateur de base :

Résultat final

Le résultat final peut être observé ici.
Pour le code source, suivez ce lien.

Box2d Web & EaselJS – Tuto 1 : bouncing pigs

Main Menu

Depuis l’ouverture de ce blog nous nous intéressons à deux librairies distinctes pour la création d’un jeu :

• Box2d Web : le moteur physique du jeu qui permet de créer un environnement physique, de gérer les forces, collisions et déplacements d’objets dans un monde 2D. C’est-à-dire de faire en sorte que ça bouge de manière réaliste à l’écran,
• EaselJS : le moteur graphique du jeu qui permet de gérer le rendu graphique, d’afficher des images et de dessiner des formes dans un canvas HTML. C’est-à-dire d’afficher de jolies choses à l’écran.

Dans les précédents tutoriels nous avons étudié ces bibliothèques (surtout la première) de manière totalement indépendante. Dans ce tuto je vous propose enfin de répondre à la grande question qui nous intéresse tous : « Mais comment donc que l’on fait cohabiter Box2 Web et EaselJS ? ».

L’objectif est d’allier la simplicité d’Easel JS et la puissance de Box2d Web pour réaliser une première démo à la fois dynamique et visuellement présentable :

Résultat final

Le résultat final peut être observé ici.
Et, comme d’habitude, les sources sont à disposition et c’est par là.

EaselJS – Tuto 1 : dessine-moi un menu

Main menu

Suite à une première série de tutoriels consacrée au moteur physique Box2d Web, il est temps maintenant de s’intéresser à l’autre aspect primordial du jeu : le moteur graphique. Mon choix s’est porté sur la bibliothèque EaselJS que nous allons découvrir à travers ce premier tutoriel. Plusieurs fonctionnalités seront abordées ici :

• fonctionnement de la bibliothèque EaselJS,
• dessiner des formes géométriques dans le canvas,
• afficher du texte et gérer les événements de clic et de survol,
• afficher et déplacer des bitmaps dans le canvas.

L’objectif est d’étudier l’ensemble de ces fonctionnalités pour réaliser un écran de menu de jeu :

Résultat final

Vous pouvez jeter un oeil au résultat final par ici.
Et vous pouvez récupérer le code source correspondant par là.

Box2d Web – Tuto 5 : liaisons dangereuses – Part 2

Main menu

Cet article constitue la deuxième partie du tutoriel sur les liaisons. Dans la première partie nous nous sommes penchés sur un type de liaison particulier, MouseJoint, permettant de manipuler des objets avec la souris. Cette première approche nous a permis d’apprendre comment créer une liaison et la configurer.

L’objectif de cette seconde partie est de :

• compléter notre classe utilitaire box2dUtils avec des méthodes facilitant la construction des autres types de liaisons,
• réaliser un ensemble d’exemples d’utilisation de ces liaisons pour comprendre à quoi elles servent et comment les utiliser.

Résultat final

Je vous invite à suivre ce lien pour voir les exemples d’illustration proposés dans ce tutoriel.
Et bien entendu, le code source est disponible, et c’est ici.

Box2d Web – Tuto 5 : liaisons dangereuses – Part 1

Main menu

Dans le précédent tutoriel nous avons mis en application tout ce que nous avions appris jusqu’à présent pour réaliser un premier petit jeu de type plate-forme / puzzle. A la fin de l’article je vous avais promis de voir comment manipuler des objets plus complexes et les lier entre eux. Chose promise, chose due. Ce cinquième tuto a pour objectif de comprendre comment créer et manipuler les Liaisons (Joints en anglais).
Le tutoriel est découpé en deux parties :

• Une première, celle que vous êtes en train de lire, qui va nous permettre de comprendre comment manipuler les objets avec la souris,
• Une seconde, qui nous permettra de voir comment lier des objets entre eux, leur appliquer des contraintes physiques et créer des mécanismes.

Le but de cette première partie est donc

• D’appréhender les liaisons : savoir comment elles fonctionnent, comprendre comment les créer et les utiliser,
• Utiliser la liaison spéciale MouseJoint pour manipuler les objets mobiles d’un environnement 2D à la souris.

Résultat final

Pour avoir une idée du résultat final, je vous invite à suivre ce lien.
Et, comme d’habitude, les sources sont à disposition ici.

Mon Paris Web 2013

En route pour Paris Web

Nous sommes le 2 octobre 2013, il est 12h58 lorsque je reçois un mail sur mon adresse pro :

« Bonjour Maxime,
Bravo, à en croire le tirage au sort de http://delicious-insights.com/automne-2013/… tu es le gagnant d’une place aux conférences Paris-Web 2013, la semaine prochaine, jeudi 10 et vendredi 11 !
Fais-nous savoir TRÈS, TRÈS VITE si tu es sûr de pouvoir venir, sans quoi la place (nominative) sera remise en jeu pour un autre gagnant.
On espère ta réponse dans la journée.
Bien à toi,
—
Christophe Porteneuve »

Hop là ! Qu’est-ce qui se passe ? J’ai gagné un truc là ? Je n’étais même pas au courant d’avoir joué !

Après vérification, effectivement, mon inscription en formation Javascript me permettait de participer à un tirage au sort pour tenter de remporter des places aux conférences Paris Web de cette année. C’est cool ça. Et meilleure nouvelle encore : apparemment j’ai gagné (merci delicious-insights :)) !

C’est ainsi, que je débarque le 10 octobre à Paris, avec ma carte d’identité (pour retirer mon pass) et un plan du métro. Direction le palais Brongniart pour deux jours de conférences sur le web et les métiers de l’internet.

Au final j’ai pu assister à presque une vingtaine de conférences que j’ai classées en quelques grandes catégories et que je me propose de vous présenter ici.

Info utile et pratique, voici deux petits liens, que je vous invite vivement à consulter :

• Le lien vers la (quasi) totalité des slides Paris Web,
• Le lien vers les vidéos des conférences (pour le moment uniquement celles du grand amphi, mais les autres devraient arriver très prochainement).

Box2d Web – Tuto 4 : jumping puzzle

Main menu

Les précédents tutoriels nous ont permis d’apprendre comment initialiser un projet box2d, créer un environnement physique, créer des éléments 2D et leur attribuer des propriétés propres, déplacer un personnage à l’écran, gérer les collisions… bref, tout un tas de trucs chouettes qui vont nous permettre de réaliser un premier petit jeu.

Le présent article propose un format un peu particulier : ce n’est pas à proprement parler un tutoriel dans le sens où je me contenterai ici d’exploiter tout ce que nous avons pu voir à travers les premiers tutos, mais ce n’est pas non plus une simple démo puisque je vous propose tout de même quelques explications et astuces. Un format un peu bâtard donc, beaucoup moins fourni en explications techniques mais qui, je l’espère, donnera une idée plus concrète de ce que l’on peut réaliser grâce à la bibliothèque box2d.

L’objectif est de réaliser un premier petit jeu exploitant l’ensemble des notions liées à la bibliothèque box2d que nous avons abordées jusqu’ici.

Résultat final

Vous pouvez voir le résultat final ici.
Et si vous souhaitez récupérer les sources, c’est ici.

Box2d Web – Tuto 3 : jump !

Main menu

Dans le précédent tutoriel nous nous sommes penchés sur les contrôles utilisateur, la gestion des événements et le déplacement d’un élément à l’écran. Les tests effectués se sont avérés concluants malgré quelques soucis dans la gestion des sauts.
Ce troisième tuto a donc pour objectif de remédier à ce problème en essayant de rendre les sauts plus réalistes. A travers ce tutoriel, nous verrons comment :

• Appliquer une force / impulsion à un objet,
• Gérer les collisions entre les objets de l’environnement,
• Appliquer plusieurs Fixtures à un Body,
• Simuler des sauts réalistes.

L’objectif est d’améliorer le contrôle du personnage et son interaction avec l’environnement 2D :

Résultat final

Vous pouvez voir le résultat final ici.
Et pour récupérer les sources correspondantes, c’est ici.

Box2d Web – Tuto 2 : move your body !

Main menu

Dans le premier tutoriel dédié à la bibliothèque Box2dWeb nous avons vu comment initialiser un environnement physique 2D au sein d’un canvas HTML.
Ce second tuto va nous permettre d’appréhender le déplacement des objets 2D et de mettre en place la gestion des contrôles utilisateur. Nous allons ici voir comment :

• Ajouter la gestion des contrôles utilisateur,
• Simuler les déplacements et sauts d’un personnage à l’écran.

L’objectif est de parvenir à diriger un personnage dans un environnement 2D :

Résultat final

Vous pouvez voir le résultat final ici.
Et pour récupérer les sources correspondantes, c’est ici.

Box2d Web – Tuto 1 : un gros cube, un p’tit cube, …

Main menu

Dans ce premier tuto nous allons nous intéresser à la librairie Box2dWeb.
Cette librairie sera utilisée pour réaliser le moteur physique du jeu. Ici, nous allons nous pencher sur les fonctionnalités de base de la bibliothèque :

• Créer un « monde » ou environnement physique 2D dans un canvas HTML 5,
• Y ajouter des objets statiques et dynamiques,
• Configurer le mode debug de box2d.

Bref, une petite mise en bouche qui devrait, si tout va bien, nous mener à ce résultat :

Résultat final

Vous pouvez voir le résultat final ici.
Et pour récupérer les sources correspondantes, c’est ici.