Créer un jeu HTML5 avec Quintus

À propos du tuto

Ce tutoriel s’adresse à tout le monde, débutants comme développeurs aguerris : j’ai donc fait en sorte d’être le plus explicite possible. Si vous n’y connaissez rien en développement de jeux vidéos, ne vous inquiétez pas, je n’en avais moi-même jamais développé avant de découvrir Quintus !

Prérequis

Si vous vous lancez dans le développement d’un jeu, je suppose que vous avez quelques connaissances de bases pour suivre le tuto, notamment dans les domaines suivants :

• JavaScript

Et c’est tout. Si vous êtes bons en graphisme, en game design ou autres, c’est encore mieux ! Mais pour le tuto en lui-même ce n’est pas ce qui compte le plus. Donc révisez juste votre JS, respirez un bon coup et tout ira bien…

Un petit mot sur Canvas

Si vous n’avez encore jamais utilisé la balise <canvas>, je vous invite à lire quelques tutos pour comprendre le principe, la majorité de la librairie utilisant cette balise, il est intéressant de comprendre comment le dessin fonctionne même si ce n’est pas fondamental.

Le MDN propose de très bons exemples pour s’imprégner de l’API propre à cette balise :

• Dessiner avec Canvas
• Tutoriel Canvas

Et le debug dans tout ça ⁈

Je pars aussi du principe que vous savez vous débrouiller pour déboguer un script. En gros vous êtes capable de vous servir des outils de développement du navigateur pour voir ce qui se passe dans la console et éventuellement au niveau du réseau.

Si vous rencontrez des soucis lors de votre développement, n’hésitez pas à demander de l’aide sur les forums ZdS, mais n’oubliez pas de fournir les informations nécessaires : erreurs dans la console, extrait du code concerné, requêtes effectuées par le navigateur si besoin, etc.

Démo

Comme l’objectif du tuto est de vous permettre de créer un jeu complet, autant vous permettre de tester les différentes étapes. Pour cela j’ai mis en ligne une démo pour que vous puissiez tester le code relatif à chaque partie et le comparer au votre. Vous pouvez aussi retrouver l’intégralité des sources de cette démo sur GitHub.

Découverte de la librairie

1. Se familiariser avec Quintus

   1. À propos de Quintus

   2. Différentes sources

2. Créer une page HTML basique

   1. Un peu de HTML

3. Lancer Quintus

   1. Initialiser la librairie et ses composants

   2. Paramétrer la librairie

Quelques manipulations de base

1. Vocabulaire de base

   1. Stage : les calques

   2. Sprite : les éléments graphiques

   3. UI : le composant d'interface

   4. Tile : un petit parallélépipède rectangle (ou pas)

   5. Asset : les éléments externes

2. Dessine-moi un mouton !

   1. Créer une scène

   2. Dessiner un fond coloré

   3. Ajouter un dégradé

   4. Un peu de texte

   5. Ajouter des boutons

   6. Et maintenant… le mouton !

   7. Bonus : un mouton qui bouge !

Mettre en place un niveau

1. Le décor d'abord

   1. Préparer la scène

   2. Un Repeater en fond

2. Un tileset pour se déplacer

   1. Qu'est-ce qu'un tileset ?

   2. Créons notre tileset

3. Un joueur dans un jeu HTML5

   1. Créer un joueur basique

   2. Suivre le joueur grâce au viewport

   3. Animer le joueur

4. La fin du niveau

   1. Créer la bergerie

   2. Gérer la collision

   3. L'écran de fin

5. Des ennemis, parce qu'il en faut

   1. Un Sprite custom

   2. Gérer les déplacements

   3. Les ajouter sur la grille

   4. Gérer les collisions

Et voilà ! Vous savez maintenant créer un jeu en HTML5 grâce à Quintus !

Si vous en voulez plus, n’hésitez pas à lire la doc officielle de quintus (en anglais) ou à parcourir la communauté Google+.

Et si vous voulez aller encore plus loin, jetez donc un œil au repo sur GitHub !

Au passage, vous pouvez aussi insulter remercier Arius pour sa relecture attentive et consciencieuse