Licence CC BY-NC-SA

Créer un jeu HTML5 avec Quintus

Bien que toujours en développement, Quintus propose des options intéressantes pour développer des jeux en HTML5

Dernière mise à jour :

À 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 :

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 ;)

7 commentaires

Staff

Ouhla, j'ai même pas répondu à ce commentaire qui commence sérieusement à dater, désolé mon p'tit loup ! :o

Bien sûr qu'il y a d'autres chapitres de prévus ! Il y a déjà toute une partie sur l'UI qui est en attente et qui devrait arriver d'ici peu de temps (dès que j'en aurai, en gros). Ensuite il y aura sans doute une annexe sur la préparation des fichiers (gérer les tilesets, générer les JSON ou les TMX). Sans oublier un chapitre sur le son bien sûr !

Je découvre le site, et surtout ton tuto, mais ne l'ai pas encore lu… Avant de le suivre, je souhaite te poser une question.

J'ai un projet de jeu qui n'avance plus. Je voulais illustrer un tuto de RPG en HTML5 (non encore publié) qui s'arrête au moment d'aborder l'ajax pour changer de map. Son rédacteur manque de temps pour le finir, comme toi peut-être.

Je suis sur le chapitre Ajax d'un cours de javascript mais ça n'est pas facile de l'adapter à mon jeu.

Est-ce que ça vaut le coup que je recode tout le début de mon jeu avec Quintus en suivant ton tuto ou c'est galère ? Connais-tu d'autres tutos (sans Quintus) qui pourraient m'aider au stade où j'en suis?

Je compte éventuellement revenir à ton tuto plus tard pour améliorer un autre jeu de plateforme dont le code provient d'un autre programmeur qui n'est plus sur le projet.

Édité

+0 -0
Staff

Si tu bloques seulement sur le chargement en Ajax, il n'y a aucun intérêt à refaire tout le code. Ajax ça reste simple à gérer : en une petite dizaine de ligne tu peux charger un fichier.

Par contre Quintus contient pas mal d'options toutes faites pour gérer un jeu 2D : collisions, viewport, animations, etc. À toi de voir si ton code actuel sera assez complet avec une touche d'Ajax en plus ou s'il vaut mieux repartir sur un framework pour y adapter ton jeu de zéro.

Bonjour, tout d'abord merci pour ce tuto qui a l'air fort intéressant ! J'aurai une question (surement bête même) est-ce que la dernière version sur le github permet de réaliser ce tuto ? Car je ne trouve pas le fichier quintus-all.js dans le zip que j'ai télécharger, mais seulement le fichier quintus.js ( est-ce la même chose ??) j'en suis au niveau du premier sprint avant le super mouton, et mon fichier ne trouve pas la fonction stage().

Merci enfaite je vais piocher dans ton github pour comparer directement ^^ super tuto en tout cas !

Édité

+0 -0
Staff

En fait dans le repo officiel de Quintus il y a plusieurs fichiers : ça permet de choisir ceux dont on a besoin pour rester léger.

Le fichier qui est dans mes exemples est un combiné d'une bonne partie des fichiers (de mémoire, hein, ça se trouve je les ai tous mis, je sais plus trop) avec quelques éventuelles modifications maison.

Édité

Vous devez être connecté pour pouvoir poster un message.
Connexion

Pas encore inscrit ?

Créez un compte en une minute pour profiter pleinement de toutes les fonctionnalités de Zeste de Savoir. Ici, tout est gratuit et sans publicité.
Créer un compte