Il n’y a pas si longtemps créer un jeu utilisable dans un navigateur imposait l’utilisation de plugins comme Flash, Java ou Silverlight. Même si ces technologies permettent un certain niveau de communication avec le reste elles demeurent très isolées et ne sont pas vraiment capables de partager leurs ressources.
En revanche le fait d’utiliser HTML, CSS et JavaScript est beaucoup plus naturel et permet une parfaite intégration dans le navigateur. Mais il a fallu attendre la version 5 du HTML et 3 du CSS pour vraiment pouvoir réaliser des applications interactives et en particulier des jeux. Aujourd’hui HTML, CSS et JavaScript, ne servent pas seulement à créer des sites mais également de véritables applications.
Je vais dans cette série vous montrer comment réaliser un jeu avec ces nouvelles technologies. Pour éviter de réinventer la roue je vais me fonder sur la librairie pixi.js. C’est un moteur de rendu simple, puissant, très rapide et facile à utiliser comme vous allez rapidement le découvrir. J’utiliserai quelques autres librairies par exemple pour la gestion des sons ou des collisions.
Le jeu en question est visible ici. Les sources sont sur Github. Le dossier dev contient la version de développement (avec tous les fichiers JavaScript), le dossier www contient la version de distribution (avec un seul fichier JavaScript minifié).
Le jeu est tout simple et les graphismes sont basiques. Le seul objectif et de fournir un exemple fonctionnel sans prétention.
Pour suivre cette série il est nécessaire de connaître les bases du HTML et du CSS et d’avoir une maîtrise correcte du JavaScript. Si ce n’est pas votre cas commencez par combler cette lacune et revenez lire cette série.
Les articles seront divisés en deux grands chapitres :
Les bases
- Canvas, pixi et sprites
- Tileset, atlas et animation de sprite
- Animation et interactivité
- Graphismes, textes, effets, collisions et sons
- Dimension et plein écran