Après la petite introduction du pourquoi de ma traductionCette fois c’est parti : je traduirai au mieux, quitte à adapter en  écrivant avec mes mots et en utilisant parfois NdT pour Note du  Traducteur. Il est probable que j’utilise certains termes techniques anglais, ça n’a  pas toujours de sens de tout traduire.

Faire un jeu avec Phaser

d’après le tutoriel en anglais écrit par Alvin Ourad et Richard Davey.
Original disponible en suivant ce lien

Bienvenue dans ce premier tutoriel sur Faire un Jeu avec Phaser (NdT :  c’est moche comme ça non ? ;). Nous allons apprendre comment créer un  petit jeu mettant en scène un joueur courant et sautant sur des  plateformes en collectant des étoiles. Au cours de notre petit périple,  nous expliquerons quelques unes des fonctions au coeur de ce framework.

Qu’est ce que Phaser ?

Phaser est un framework de jeu HTML5  qui vise à aider les développeurs à produire de jeux puissants,  fonctionnants sur les navigateurs HTML5, de manière vraiment rapide et,  au contraire d’autres, il a été conçu avec les navigateurs mobiles pour  cible. Le seul prérequis pour le navigateur est le support du tag  canvas. Il emprunte beaucoup de choses à Flixel.

Prérequis

  • Téléchargez les fichiers de code et les ressources qui vont avec ce tutoriel.
  • Vous avez besoin de connaissances très très basiques de JavaScript.  (NdT : mais chez TontonCodeur, on fera tout pour vous aider là dessus)
  • Prenez également le temps de parcourir le Getting Started Guide,  vous y apprendrez comment télécharger le framework, mettre en place un  environnement de développement, et vous donner un aperçu de la structure  d’un projet Phaser et ses fonctionnalités principales.

ATTENTION, ajout de la traduction: Je réfléchis à une solution vous  permettant simplement de lancer le tutoriel et de manipuler ses  fichiers. Entre temps, n’hésitez surtout pas à me poser toutes les  questions qui vous viendrons pendant ces installations.

Si vous avez suivi le Getting Started Guide, vous avez téléchargé  Phaser et tout installé aux petits oignons : vous êtes prêts à coder. Téléchargez les fichiers de ce tutoriel et décompressez les dans votre répertoire web.

Ouvrez le fichier part1.html dans l’éditeur de texte de votre choix  et allons regarder de plus près le code. Après un peu de blabla HTML qui  inclus Phaser, la structure du code ressemble à ceci : 

var game = new Phaser.Game(800, 600, Phaser.AUTO, '', { preload: preload, create: create, update: update });

function preload() {
}

function create() {
}

function update() {
}

La ligne 1 est celle qui donne vie à Phaser en créant une instance de  l’objet Phaser.Game et en l’assignant à une variable locale appelée  ‘game’. L’appeler ‘game’ est une pratique usuelle, mais pas une  obligation, et c’est ce que vous retrouverez dans les exemples de  Phaser.

Les 2 premiers paramètres sont la largeur et la hauteur de l’élément  Canvas que Phaser va créer. Dans le cas présent, 800 x 600 pixels. Le  monde de votre jeu avoir la taille que vous souhaitez, mais il s’agit de  la résolution dans laquelle le jeu sera affiché.
Le troisème paramètre peut valoir Phaser.CANVAS, Phaser.WEBGL ou  Phaser.AUTO. Cela définit le contexte de rendu que vous voulez utiliser.  Le paramètre recommandé est Phaser.AUTO puisqu’il permet de commencer  par essayer Phaser.WEBGL, mais si le navigateur ou la machine ne le  supporte pas, cela basculera automatiquement sur Phaser.CANVAS.

Le quatrième paramètre est une chaine vide, c’est l’ID de l’élément  DOM dans lequel vous allez insérer l’élément canvas que Phaser crée. Comme nous l’avons laissé vide, il va simplement s’ajouter au corps de  la page. Le dernier paramètre est un objet comportant quatre références à  des fonctions principales de Phaser. Leur utilisation va vous être  détaillée ci-après. Notez que cet objet ‘game’ n’est pas absolument  nécessaire : Phaser supporte un système en full state permettant de  répartir le code dans des objets séparés bien plus clairs. Mais pour un simple Guide de Démarrage comme celui ci, nous utiliserons  cette approche qui nous permet de prototyper plus rapidement.

Chargement des ressources

Chargeons maintenant les ressources nécessaires à notre jeu. Vous faites ça en utilisant des appels à game.load au sein de la fonction appellée preload. Phaser cherchera automatiquement cette fonction à son lancement et chargera tout ce qui sera défini en son sein.

Pour le moment, la fonction preload est vide. Modifions la: 

function preload() {

    game.load.image('sky', 'assets/sky.png');
    game.load.image('ground', 'assets/platform.png');
    game.load.image('star', 'assets/star.png');
    game.load.spritesheet('dude', 'assets/dude.png', 32, 48);

}

Cela chargera 4 ressources (NdT: ou asset en anglais) : 3 images et  une page de sprite. Cela peut paraître évident à certains d’entre vous,  mais je voudrais souligner le premier paramètre, appelé aussi clé de  ressource (NdT: asset key). Cette chaine de caractères est un lien vers  la ressource chargée et c’est ce que vous allez utiliser dans votre code  au moment de créer les sprites. Vous êtes libres d’utiliser n’importe  quelle chaine de caractères valide en Javascript comme clé.

Création d’un Sprite

Pour ajouter un Sprite à notre jeu, ajoutez le code suivant dans la fonction create : 

game.add.sprite(0, 0, 'star');

Si vous ouvrez la page page3.html dans un navigateur, vous devriez voir un écran de jeu noir avec un seul sprite d’étoile dans le coin en haut à gauche:

part3

L’ordre dans lequel les éléments sont générés dans l’affichage  correspond à l’ordre dans lequel vous les créez. Donc, si vous souhaitez  mettre un fond derrière le sprite étoile, vous devez vous assurer qu’il  a été ajouté comme sprite, avant l’étoile.

A bientôt

Voilà, je vous laisse avec la traduction qui correspond aux part1 à 3 et je vous promet de continuer au plus vite bien sûr.

Entre temps, ne soyez pas timides : laissez des commentaires ou écrivez moi.