#1 Créer un jeu de plateforme en HTML5
Tout d'abord je tiens à remercier Pablo Farías Navarro qui m'a permis de me basé sur son tuto afin de l'adapter en français.
Ce tutoriel est là pour vous aidez à démarrer dans le développement de jeu utilisant les technologies démocratisé par l'arrivée du HTML5 sur nos navigateurs préférés. Nous allons recréer un jeu de plateforme en se basant sur le framework Quintus qui va vous simplifiez la démarche de prototypage avant d'autres tutos où nous iront nous intéresser plus en profondeur au fonctionnement d'un jeu.
Nous utiliserons Quintus qui est un framework Open Source créé par Pascal Retig qui est destiné à la création de jeux vidéo en Javascript pour mobile, ordinateur, etc.
Pour plus d'information sur Quintus il y a un guide officiel et une communauté Google+.
Connaître HTML, CSS, Javascript et les concepts de base de l'orienté object.
Télécharger Quintus sur sa page Github.
Avoir un serveur web local. Nous avons besoin de lancer le code sur un serveur web et non juste en double-cliquant sur les fichiers. L'IDE Aptana s'en occupe tout seul si vous n'êtes pas familiarisé avec les serveurs web.
Téléchargez et installez Tiled.
Votre IDE favoris (Netbeans, Eclipse, Sublime2, Notepad++, Aptana ou ce que vous voulez).
Les fichiers de bases que je vous ai préparé avec amour :)
Créer un nouveau dossier dans le dossier public de votre serveur web (le dossier "www" la plupart du temps), appelons-le "scanixplatformer". À l'intérieur de ce dossier créer les sous-dossiers et fichiers vides suivant:
scanixplatformer/index.html
scanixplatformer/lib/ -> Copiez ici les fichiers JS de Quintus
Après avoir téléchargé ces fichiers. Je vous recommande de ne pas regarder le code sauf si vous voulez ruiner l'utilité de ce tuto... Contentez-vous de copier les fichiers de /data et /images dans les dossier de même-nom de l'arborescence que vous venez de créer.
Tout les jeux, et donc les jeux de plateforme prennent place dans un monde virtuel. Dans notre cas nous allons créer un monde en 2D basé sur des "tiles". "Tiles" signifie "tuiles" en anglais. Cela signifique donc que notre map sera composé de différent block de même taille qui une fois assemblés donneront la map. Pensez aux vieux jeux où vous pouviez voir les différents pattern se répéter.
Pour ce faire nous allons donc utiliser le logiciel Tiled (que vous avez bien installez si vous lisez bien ce tuto !). Le framework Quintus supporte le format de fichiers TMX qui est l'un des formats disponible avec Tiled.
Je vous ai déjà préparez la map pour cette exemple est déjà prête et vous attends dans le dossier /data, mais j'aimerai quand-même vous expliquez tout le fonctionnement de la création d'une map basique.
1. Lancez Tiled et créez une nouvelle map. Dans la boîte de dialogue vous devez spécifier la taille de la map en nombre de "tiles". Vous devez aussi préciser la taille de chaque "tiles". Dans cet exemple la largeur est de 40 et la hauteur de 10 et les "tiles" mesure 64x64 pixels.
2. Maintenant on a une jolie base mais il va aussi nous falloir ce que l'on appelle une "spritesheet" ou "tileset". C'est ce qui contient les textures de nos différentes "tiles". Pour ce faire il faut préciser à Tiled comment il devra faire. Allez dans Carte -> Nouveau Tileset et grâce au joli bouton "Rechercher..." allez chercher le joli fichier tiles_map.png dans le dossier /images que je vous ai donné :) Faites attention à rentrer les bonnes dimensions des "tiles" (64x64).
Avec la version actuelle de Quintus, vous ne pouvez pas utiliser les marges et les espacements. Aussi, vous devez impérativement laisser transparente la première "tiles" comme je l'ai fait dans l'exemple.
3. Après tout ça nous pouvons enfin dessiner la map en utilisant les outils à dispositions. Dans cette exemple nous avons 2 calques, un pour les collisions et un pour le "background" qui sert à la décoration de notre level. Vous pouvez créer de nouveau calque en cliquant sur l'icône avec la page et l'étoile à droite de la fenêtre en-dessous de la zone des calques.
4. Pour que Quintus puisse lire notre level il nous faut l'enregistrer au format XML non-compressé. Pour ce faire allez dans Édition -> Préférences et dans l'onglet "Général" et dans le menu déroulant de "Enregistrer les données du calque en tant que :" séléctionnez "XML". Et maintenant vous pouvez sauver votre map dans un format qui pourra être utilisé pour votre jeu.
Copiez le code suivant dans votre fichier index.html:
<!DOCTYPE html> <html> <head> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <script src='lib/quintus.js'></script> <script src='lib/quintus_sprites.js'></script> <script src='lib/quintus_scenes.js'></script> <script src='lib/quintus_input.js'></script> <script src='lib/quintus_anim.js'></script> <script src='lib/quintus_2d.js'></script> <script src='lib/quintus_touch.js'></script> <script src='lib/quintus_ui.js'></script> </head> <body style="background-color: black;"> <script> var Q = Quintus() .include("Sprites, Scenes, Input, 2D, Touch, UI") .setup({ width: 960, height: 640 }).controls().touch(); </script> </body> </html>
Ce que nous faisons ici est essentiellement de mettre en place l'objet Quintus avec les modules que nous utiliserons. Pour un description de l'utilité de chaque module je vous renvois sur le guide officiel. Pour ce tutoriel je vais écrire le code du jeu directement dans le fichier html dans la balise script. Pour bien faire il faudrait créer un fichier javascript externe avec le code du jeu que l'on chargerait ensuite de par le fichier html. Si je procède comme ceci c'est pour faciliter l'écriture et la compréhension du tuto. Les codes que je vais vous donner maintenant sont à inscrire dans la balise script.
La prochaine partie est de charger les ressources de notre jeu ainsi que d'initialiser et afficher notre premier niveau. Un concept important de Quintus sont les "stages" qui sont des sortes de claques qui s'empile les uns sur les autres. et les "scenes" sont des instructions qui seront exécuté sur un "stage". Par exemple: J'ai 2 "stages", sur l'un d'entre je place une "scene" qui chargera et affichera le niveau et sur l'autre je mets une "scene" qui affichera le HUD du jeu (Qui vient se placer par-dessus le premier "stage"). Pour ce premier tuto nous auront uniquement un seul "stage" qui s'occupera du niveau.
//load assets Q.load("tiles_map.png, player.png, level1.tmx", function() { Q.sheet("tiles","tiles_map.png", { tilew: 64, tileh: 64}); Q.stageScene("level1"); });
Regardez comment il faut charger les images et ensuite il faut créer une "spritesheet" pour la map en n'oubliant pas de spécifier la taille des "tiles".
Nous ajoutons sur le "stage" une "scene" appelé "level1". Nous avons donc besoin d'initialiser cette "scene". C'est ici que nous allons charger le calques de collisions et le background du niveau à partir d'un fichier TMX (soit celui que je vous ai fourni ou alors celui que vous avez créez).
Q.scene("level1",function(stage) { var background = new Q.TileLayer({ dataAsset: 'level1.tmx', layerIndex: 0, sheet: 'tiles', tileW: 64, tileH: 64, type: Q.SPRITE_NONE }); stage.insert(background); stage.collisionLayer(new Q.TileLayer({ dataAsset: 'level1.tmx', layerIndex:1, sheet: 'tiles', tileW: 64, tileH: 64 })); });
Nous avons créé deux objets Q.TileLayer. Un est utilisé pour le background et l'autre pour les collisions. Regardez comment il faut charger le fichier TMX et choisir le bon calque (layerIndex). L'index dépend du niveau du calque, le calque le plus en dessous aura l'index '0' et plus vous remontez plus vous incrémentez le numéro de l'index. Une fois de plus il faut indiquer la taile des "tiles".
Pour le background nous utilisons le type: Q.SPRITE_NONE qui signifie qu'il sera ignorer par le joueur quand il y aura des détections de collisions.
Vous pouvez déjà tester cette partie du jeu sur votre navigateur.
La dernière chose que nous allons voir ce tutoriel va être d'ajouter un joueur et lui ajouter des contrôles d'un personnage d'un jeu de plateforme. Premièrement nous avons besoin de créer la classe du joueur. Ajoutez ce code juste après l'initialisation de Quintus:
Q.Sprite.extend("Player",{ init: function(p) { this._super(p, { asset: "player.png", x: 110, y: 50, jumpSpeed: -380}); this.add('2d, platformerControls'); }, step: function(dt) { if(Q.inputs['left'] && this.p.direction == 'right') { this.p.flip = 'x'; } if(Q.inputs['right'] && this.p.direction == 'left') { this.p.flip = false; } } });
Quintus a son propre système d'héritage de classe et ce que nous faisons ici est de créer une classe hérité de Q.Sprite appelé Q.Player. Le constructeur commence par lancer le constructeur parent avec des paramètres tel que: la texture du joueur, la position de base sur la map (x,y) et la force du saut (jumpSpeed).
Nous pouvons aussi ajouter des modules aux objets qui ajoute différent paramètres et méthodes. Ici nous ajoutons le module '2d' qui ajoute une base de physique (vitesse, accélération, gravité) et la détection de collisions. Nous ajoutons aussi 'platformerControls' qui permet de déplacer le joueur avec le clavier.
La deuxième méthode de Player, step(), est la méthode qui nous donne accès à la boucle du jeu. La boucle du jeu consiste en une suite de méthodes qui seront exécutées un certain nombre de fois par seconde. Ce qui permet de vérifier différent états du jeu et modifier certaine variables en fonction.
Tout les sprites dans Quintus peuvent avoir une méthode step(). Ici nous vérifions les inputs de l'utilisateur et s'en sert pour retourner la texture du joueur en fonction de son sens de déplacement.
Maintenant que nous avons créé l'object Player il nous faut l'ajouter au level. Nous avons donc besoin d'ajouter le code suivant dans l'initialisations de la scene "level1" (regardez le code fourni avec les fichiers si vous doutez de l'emplacement exacte):
var player = stage.insert(new Q.Player()); stage.add("viewport").follow(player,{x: true, y: true},{minX: 0, maxX: background.p.w, minY: 0, maxY: background.p.h});
Le "viewport" va ajouter une "camera" qui va suivre le joueur à travers le niveau (se serai dommage de ne pas voir où se trouve notre joueur...). Ici la camera va suivre le joueur sur les axes x et y tout en étant restreint par la taille du niveau ce qui évitera de voir l’extérieur vide du niveau.
Voilà ! Nous avons maintenant un joli jeu de plateforme jouable. Je vous l'accorde sans ennemis c'est un peu vide mais ne vous inquiétez pas on ajoutera tout ceci dans un prochain tuto :)
dailybridgerton
titsay
gummygunk
yousharknotpass
prguitarman
areudirty
snowghoul
romaincrisis
