📝 Blog

August 13, 2014
3 min read

Découvrons Sqlite - 1

Coucou à tous !

Même en vacances, Tonton Codeur pense à vous. Remarquez qu’il est difficile de vous oublier grâce à vos gentils emails.

Il semblerait que parmi vous se cache un futur Zuckerberg. Pour révolutionner le monde des réseaux sociaux, il se pose quelques questions sur l’utilisation d’une base de donnée.

Nous allons donc tous ensemble jeter un oeil à l’utilisation de la base de donnée Sqlite avec Python.

Je n’aborderai pas l’installation de Sqlite et Python pour 2 raisons : notre révolutionnaire l’a déjà fait et si vous étiez sur un OS libre, vous les auriez déjà ;)
Bon, OK, si vous bloquez, vous pouvez me faire un email et je vous aiderai.

Pour nos petits exercices, nous allons créer une simple petite base avec Sqlite.
Ce qu’il faut savoir, c’est que Sqlite est une base de donnée toute simple qui se contente de tout stocker dans un fichier.

Pour commencer, créez un répertoire pour nos petits exercices.
Lancez votre ligne de commande et mettez vous dans ce répertoire.
Il vous suffira alors de lancer la commande :

sqlite3

Vous obtenez donc les informations suivantes à l’écran.

~/projects/tontoncodeur$ sqlite3 
SQLite version 3.8.2 2013-12-06 14:53:30
Enter ".help" for instructions
Enter SQL statements terminated with a ";"
sqlite>

Une fois ainsi, toutes les commandes seront des commandes de Sqlite. Une fois terminé vos opérations, vous pouvez quitter Sqlite par la commande :

.sqlite

Pour pouvoir utiliser Sqlite depuis un script Python, nous allons créer une table et quelques données, ce sera plus pratique. Pour créer une table nous utiliserons la commande Sqlite CREATE TABLE

sqlite3 tonton.db
SQLite version 3.8.2 2013-12-06 14:53:30
Enter ".help" for instructions
Enter SQL statements terminated with a ";"
sqlite> CREATE TABLE PERSONNES
   ...> (ID INT PRIMARY KEY NOT NULL,
   ...> NOM TEXT,
   ...> AGE INT);

La commande sqlite3 tonton.db permet de dire qu’on va travailler avec la base tonton.db.
Si elle existe, on se connecte, si elle n’existait pas, elle la crée.
Vous aurez alors un fichier tonton.db dans votre répertoire.

La première instruction qui suit est compréhensible :
on crée une table qui se nommera PERSONNES.
Tout ce qui suit entre les parenthèses définira les différentes colonnes de la table.

La première colonne sera un entier appelé ID qui servira de clé primaire.
Cette clé est utilisé par Sqlite pour accélérer ses recherches et vous servira à identifier vos enregistrements.
La seconde colonne sera le nom stocké dans un texte.
La dernière sera l’âge.

Pas mal non ?
Nous avons donc maintenant une table.
Il nous reste à insérer des données et les voir ensuite..

Pour ajouter des données, Sqlite utilise une commande appelée INSERT.
Par exemple, ajoutons une personne qui aura pour NOM Bob et agée de 32 ans :

sqlite> INSERT INTO PERSONNES(ID, NOM, AGE)
   ...> VALUES(1, "Bob", "32");

La première partie de la commande INSERT indique les colonnes qui vont être utilisées.
La seconde indique les valeurs que nous allons insérer.

Pour vérifier que les données sont là, il suffit alors d’utiliser la commande SELECT qui permet de voir le contenu d’une table.

sqlite> SELECT * FROM PERSONNES;
1|Bob|32

La commande SELECT permet de choisir les colonnes affichées, ou toutes si on utilise le caractère *.
Le mot FROM est utilisé pour indiquer la table qui sera consultée.

C’est tout simple non ?

Très vite, l’article suivant parlera de l’interaction possible entre Ptyhon et Sqlite.

Bonne vacances à tous.

June 5, 2014
8 min read

A La Découverte De Phaser - 5

Voici la suite de la traduction du tutoriel écrit par Alvin Ourad et Richard Davey.
Elle commence dans ce premier article
Puis se poursuit avec ce second article
Alors que le troisième article est làLogiquement, il y a eu ce quatrième article

Nous en étions resté au moment ou le joueur tombait en ignorant le sol que nous avions créé.

La raison est simple : nous ne testons pas encore la collision entre le sol et le joueur.
Nous avons déjà indiqué à Phaser que notre sol et nos plateformes étaient inamovibles. Si nous ne l’avions pas fait, le joueur les aurait rencontré, aurait marqué un temps d’arrêt, puis tous les élements se seraient dispersés.
A moins d’indiquer le contraire, le Sprite du sol est un objet physique qui peut se déplacer (appellé aussi corps dynamique) et quand le joueur le percute, les forces résultantes sont appliquées au sol, et les deux objects modifient leur vélocités et le sol se met à tomber lui aussi.

Donc, pour permettre au joueur d’entrer en collision et d’utiliser les propriétés physiques, nous devons ajouter un test de collision dans la fonction update :

function update() {

    game.physics.arcade.collide(player, platforms);

}

La fonction update est appelée par la boucle de jeu toutes les frames. La fonction Physics.collide est celle qui fait toute la magie. Elle utilise deux objets pour tester la collision et les sépare. Dans notre cas, nous lui passons notre Sprite de joueur et le Group de plateformes. Cette fonction est suffisament maline pour vérifier la collision avec chaque membre du Group. Cet appel va donc vérifier les collisions avec le sol et les plateformes.

Le résultat est une plateforme solide:

part6

Contrôler le jouer avec le clavier

Gérer les collisions, c’est bien beau, mais nous avons besoin de faire bouger le joueur. Peut être êtes vous tentés de plonger dans la documentation et chercher comment ajouter des event et les écouter, mais ce n’est pas utile ici.
Phaser inclus un gestionnaire de clavier et un des avantages de l’utiliser est cette petite fonction bien pratique :

cursors = game.input.keyboard.createCursorKeys();

Cela va peupler l’objet cursors avec quatre propriétés : up , down , left , right (NdT : haut, bas, gauche, droite) qui sont des instances des objets Phaser.key. Tout ce qu’il nous reste à faire est d’aller vérifier ces instances à chaque boucle :

    //  Reset the players velocity (movement)
    player.body.velocity.x = 0;

    if (cursors.left.isDown)
    {
        //  Move to the left
        player.body.velocity.x = -150;

        player.animations.play('left');
    }
    else if (cursors.right.isDown)
    {
        //  Move to the right
        player.body.velocity.x = 150;

        player.animations.play('right');
    }
    else
    {
        //  Stand still
        player.animations.stop();

        player.frame = 4;
    }

    //  Allow the player to jump if they are touching the ground.
    if (cursors.up.isDown && player.body.touching.down)
    {
        player.body.velocity.y = -350;
    }

Même si nous venons d’ajouter pas mal de code, cela devrait rester assez lisible.
La première chose que nous faisons est de réinitialiser la vélocité horizontale du Sprite.
Nous vérifions ensuite si la flèche vers le bas est appuyée. Si c’est le cas, nous appliquons une vélocité horizontale négative et nous déclenchons l’animation de course à gauche.
Si à la place nous avons la touche flèche vers la droite appuyée, nous faisons exactement l’inverse.
En remettant à zéro la vélocité et en la modifiant de cette façon à chaque frame , cela crée un mouvement de type “stoppe-repart”.

Le Sprite du joueur ne bougera que lorsqu’une touche est appuyée et s’arrête immédiatement quand ce n’est plus le cas.
Phaser vous permet de créer des mouvements plus complexes, avec de l’inertie et de l’accélération, mais nous nous satisferons de notre mouvement pour ce jeu.
La dernière portion de code remet le sprite du joueur avec la frame 4 si aucune touche n’est appuyée. La frame 4 dans la feuille de Sprite est celle où le joueur vous regarde, immobile.

Sautons

La dernière portion de code ajoute la possibilité de sauter. La touche flêche vers le haut sera la touche de saut et nous testons si elle est appuyée.
Malgré tout, nous testerons également si le joueur touche le sol, sinon il pourait sauter alors qu’il serait déjà dans les airs.
Si ces deux conditions sont respectées, nous appliquons une vélocité verticale de 350 pixel/sec.
Le joueur retombera vers le sol automatiquement grâce à la valeur de gravité que nous lui appliquons.
Essayez de jouer avec des valeurs plus ou moins grandes que 350 pour voir l’effet produit.

part7

Pluie d’étoiles

Il est grand temps de donner un but à notre petit jeu. Faisons pleuvoir des étoiles sur la scène et permettons au joueur de les ramasser.
Pour y parvenir, nous allons créer un Group appelé ‘stars’ et nous le peuplerons. Dans notre fonction create , nous ajoutons le code suivant (qui peut être vu dans le fichier part8.html)

    stars = game.add.group();

    stars.enableBody = true;

    //  Here we'll create 12 of them evenly spaced apart
    for (var i = 0; i < 12; i++)
    {
        //  Create a star inside of the 'stars' group
        var star = stars.create(i * 70, 0, 'star');

        //  Let gravity do its thing
        star.body.gravity.y = 6;

        //  This just gives each star a slightly random bounce value
        star.body.bounce.y = 0.7 + Math.random() * 0.2;
    }

Le procédé utilisé est similaire à celui que nous avons utilisé pour le Group de plateformes. En utilisant l’instruction de boucle for de Javascript, nous indiquons que nous créons 12 étoiles dans notre jeu.
Elles ont une coordonnée x de i * 70 , ce qui signifie que nous les répartissons équitablement dans la scène tous les 70 pixels.
Comme pour le joueur, nous leur donnons une gravité pour qu’elles tombent, et une valeur de bounce (NdT : rebond) pour qu’elle rebondissent un peu quand elles touchent les plateformes.
Le rebond bounce a une valeur entre 0 (pas de rebond du tout) et 1 (rebond total). Les notres rebondiront avec une valeur entre 0,7 et 0,9. Si nous executions le code tel que, les étoiles tomberaient et passeraient à travers le bas du jeu. Pour arrêter ce phénomène, nous devons vérifier les collisions entre les étoiles et les plaformes au sein de notre boucle for :

game.physics.arcade.collide(stars, platforms);

Nous en profiterons pour tester si le joueur et les étoiles ne partagent pas la même zone de jeu.

game.physics.arcade.overlap(player, stars, collectStar, null, this);

Cela indique à Phaser qu’il doit vérifier les recoupements entre le joueur et chacune des étoiles du Group. S’il trouve un recoupement, il passe ces éléments à la fonction ‘collecStar’

function collectStar (player, star) {

    // Removes the star from the screen
    star.kill();

}

L’étoile est alors simplement éliminée par l’instruction kill , ce qui a pour effet de la retirer de l’affichage. Le jeu a donc maintenant un joueur qui peut librement se ballader, sauter, bondir des plateformes et ramasser les étoiles qui tombent du ciel.
Pas mal pour quelques lignes de code que l’on peut qualifier d’assez lisibles :)

part8

Touche finale

La dernière petite modification que nous allons faire va consister à ajouter un score.
Pour cela, nous allons utiliser un objet Phaser.Text.
Nous créerons deux nouvelles variables, une qui contiendra le score actuel et l’autre l’objet texte lui même :

var score = 0;
var scoreText;

Le scoreText est paramétré dans la fonction create :

scoreText = game.add.text(16, 16, 'score: 0', { fontSize: '32px', fill: '#000' });

Les deux premiers paramètres 16,16 représentent les coordonnées d’affichage du texte. ‘score: 0’ est la chaîne par défaut qui sera affichée et l’objet qui suit contient la taille de la fonte et sa couleur de remplissage. En ne précisant pas la fonte, nous allons en fait utiliser celle que le navigateur choisira par défaut, ce qui correspond à Arial sous Windows par exemple.

Nous allons devoir ensuite modifier la fonction collectStar pour que lorsque le joueur attrape une étoile son score augmente et le texte est mis à jour pour refléter ce changement :

function collectStar (player, star) {

    // Removes the star from the screen
    star.kill();

    //  Add and update the score
    score += 10;
    scoreText.text = 'Score: ' + score;

}

Donc 10 points seront ajoutés pour chaque étoile et le texte du score scoreText est mis à jour avec le nouveau total.
Si vous ouvrez le fichier part9.html vous verrez le jeu au final.

part9

Conclusion

Vous avez appris comment créer un Sprite avec des propriétés physiques, à contrôler son déplacement et le faire interagir avec d’autres objets dans un petit jeu.
Il y a beaucoup d’autres choses que vous pouvez réaliser pour l’améliorer, par exemple ajouter une fin ou un but. Pourquoi ne pas ajouter des pieux qu’il faudrait éviter ? Vous pourriez créer un nouveau Group ‘spikes’ (NdT: pieux) et vérifier les collisions avec le joueur, puis vous feriez disparaitre le joueur au lieu du pieu. Ou pour un style de jeu non violent, faire du jeu une course contre la montre et simplement défier les joueurs de ramasser les étoiles le plus vite possible.
Nous avons inclus d’autres ressources graphiques dans le fichier zip de ce tutoriel pour vous inspirer.

Avec l’aide de ce que vous avez appris dans ce tutoriel et les plus de 250 exemples à votre disposition, vous devrier alors aboir de solides fondations pour un projet futur.
Mais comme toujours, si vous avez des questions, si vous avez besoin d’un conseil ou si vous souhaitez partager vos travaux, n’hésitez pas à demander de l’aide dans le forum Phaser.

Conclusion de la traduction

J’ajouterai que comme toujours, je répond avec plaisir aux commentaires et emails.
Merci de votre patience et si je vois qu’il y a des motivés pour continuer l’aventure, je prendrai un peu de temps pour rédiger une suite à ce tutoriel.
Qui sait, Alvin ou Richard feront alors une traduction anglaise ;)

Amusez vous, codez comme des fous, à bientôt.

May 26, 2014
4 min read

A La Découverte De Phaser - 4

Voici la suite de la traduction du tutoriel écrit par Alvin Ourad et Richard Davey.
Elle commence dans ce premier article
Puis se poursuit avec ce second article
Alors que le troisième article est là

Les Groupes

Les Groupes sont vraiment puissants. Comme leur nom l’indique, ils vous permettent de grouper ensemble des objets similaires et de les controler comme une seule entité. Il est aussi possible de calculer les collisions entre Groupes, et pour ce jeu, nous allons utiliser deux groupes différents, l’un deux sera créé par le code suivant pour les plateformes :

platforms = game.add.group();

Comme pour les Sprites , game.add crée un objet Group. Nous l’assignons à une nouvelle variable locale appellée platforms. Une fois créé, nous pouvons lui ajouter des objets.
Tout d’abord, le sol. Il est positionné tout en bas de la zone de jeu et utilise l’image ‘ground’ chargé auparavant. Le sol est ensuite mis à l’échelle pour remplir la largeur de l’écran de jeu.
Pour terminer, nous postionnons la valeur de la propriété ‘immovable’ à true (NdT: vrai). Si nous le faisions pas, le sol bougerait quand le joueur rentrerai en collision avec lui (plus de détails à ce sujet dans la rubrique Physique).

Une fois le sol en place, nous crééons 2 éléments plus petits pour sauter dessus en utilisant la même technique que pour le sol.

Joueur Un Prêt

Crééons une nouvelle variable locale appellée ‘player’ (NdT: nous traduirons le code plus tard si besoin) et ajoutons le code suivant à la fonction create.
Vous pouvez lire ce code dans le fichier part5.html :

    // The player and its settings
    player = game.add.sprite(32, game.world.height - 150, 'dude');

    //  We need to enable physics on the player
    game.physics.arcade.enable(player);

    //  Player physics properties. Give the little guy a slight bounce.
    player.body.bounce.y = 0.2;
    player.body.gravity.y = 300;
    player.body.collideWorldBounds = true;

    //  Our two animations, walking left and right.
    player.animations.add('left', [0, 1, 2, 3], 10, true);
    player.animations.add('right', [5, 6, 7, 8], 10, true);

Cela va créer un nouveau Sprite appellé ‘player’ , positionné aux coordonnées 32 pixels du bord gauche du jeu et 150 pixels à partir du bas du jeu.
Nous indiquons d’utiliser la ressource ‘dude’ chargé auparavant. Si vous allez voir la fonction preload , vous verrez que ‘dude’ a été chargé en temps que feuille de Sprite , pas comme une image. Cela est du au fait qu’il contient les différentes images de l’animation.
Voici à quoi ressemble la feuille de Sprite dans son intégralité :

dude

Vous pouvez voir 9 frames au total (NdT : les frames sont comme de petites diapositives de chaque étape de l’animation), 4 représentant la course à gauche, 1 qui fait face à la caméra et 4 pour la course à droite. Notez que Phaser est capable de gérer des Sprites par symétrie pour gagner de la place dans les frames, mais pour la simplicité de ce tutoriel, nous conserverons l’approche à l’ancienne.
Nous définissons 2 animations appellées ‘left’ et ‘right’ (NdT : gauche et droite). L’animation ‘left’ utilisera les frames 0, 1, 2 et 3 à la vitesse de 10 frames par seconde. Le paramètre true indique que l’animation se fera en boucle. Ce sera notre cycle standard de course et nous utiliserons une animation similaire pour la direction opposée.
Une fois les animations créées, occupons nous de quelques propriétés de physique.

Objet Body et Velocity : un monde de Physiques

Phaser propose une grande variété de système de gestion de la physique. Il est fourni avec le système Arcade Physics , le système Ninja Physics et le système P2.JS Full-Body Physics. (NdT : ce sont les noms que vous retrouverez dans la documentation).
Pour les besoins de ce tutoriel, nous allons utiliser le système Arcade Physics , qui est à la fois simple et léger, un choix parfait pour les navigateurs mobiles.
Vous verrez dans le code que nous aurons à démarrer le système de physique, puis pour chaque Sprite ou Group que nous voudrons gérer par ce système, nous devrons l’activer un à un.

Une fois que cela est fait, chaque Sprite se retrouve avec une propriété body , qui est une instance de celui du système ArcadePhysics. Cela représente le Sprite comme un corps physique dans le moteur Arcade Physics de Phaser.
L’objet body en lui même possède un certain nombre de propriétés avec lesquelles nous pourrons jouer. Pour simuler les effets de la gravité sur un Sprite , c’est aussi simple que d’écrire ce qui suit :

player.body.gravity.y = 300;

C’est une valeur arbitraire, mais logiquement, plus la valeur est élevée, plus l’objet est lourd et plus vite il chute.
Si vous ajoutez ceci à votre code ou si vous lancer le fichier part5.html , vous verrez le joueur tomber sans s’arrêter, ce jusqu’au bas du monde du jeu, en ignorant le sol que nous avons créé auparavant :

part5

A bientôt

Voilà, la suite expliquera comment faire pour que le joueur s’arrête au sol et comment le déplacer avec le clavier.

Entre temps, ne soyez pas timides : laissez des commentaires ou écrivez moi et surtout amusez vous !

May 20, 2014
2 min read

A La Découverte De Phaser - 3

Dans les arcanes de game.add.sprite , un nouvel objet Phaser.Sprite est créé et le sprite est ajouté au “monde du jeu”. Ce monde est l’endroit où tous vos objets vont vivre, cela peut être comparé à un Stage de ActionScript3.

Note : Le monde de jeu n’a pas de taille fixe et s’étend à l’infini dans toutes les directions, avec le point 0,0 au centre. Par commodité, Phaser positionne le 0,0 en haut et à gauche de votre monde, mais vous pouvez le déplacer à l’aide de l’objet Camera intégré.

La classe représentant le monde est accessible par l’objet game.world et est fournie avec un tas de méthodes et propriétés pratiques pour vous aider à répartir vos objets au sein du monde.
Cela comprend quelques propriétés simples comme game.world.height , mais aussi certaines plus élaborées que nous utiliserons dans un autre tutoriel.

Pour le moment, construisons notre scène en ajoutant un fond et des plate-formes.
Voici une version plus à jour de la fonction create :

var platforms;

function create() {

    //  We're going to be using physics, so enable the Arcade Physics system
    game.physics.startSystem(Phaser.Physics.ARCADE);

    //  A simple background for our game
    game.add.sprite(0, 0, 'sky');

    //  The platforms group contains the ground and the 2 ledges we can jump on
    platforms = game.add.group();

    //  We will enable physics for any object that is created in this group
    platforms.enableBody = true;

    // Here we create the ground.
    var ground = platforms.create(0, game.world.height - 64, 'ground');

    //  Scale it to fit the width of the game (the original sprite is 400x32 in size)
    ground.scale.setTo(2, 2);

    //  This stops it from falling away when you jump on it
    ground.body.immovable = true;

    //  Now let's create two ledges
    var ledge = platforms.create(400, 400, 'ground');

    ledge.body.immovable = true;

    ledge = platforms.create(-150, 250, 'ground');

    ledge.body.immovable = true;

}

Si vous exécutez ce code, que vous trouverez dans le fichier part4.html du zip du tutoriel, vous devriez voir un écran qui ressemble un peu plus à une scène d’un jeu :

part4

La première partie est identique à ce que nous avions fait pour l’étoile, nous avons simplement changé la clé en ‘sky’ et cela a permis d’afficher notre ciel en fond d’écran à la place.
C’est une image au format PNG de dimensions 800x600 qui remplit notre écran.

A bientôt

Voilà, je vous laisse avec la traduction qui correspond à la partie 4 et, comme promis, je continue au plus vite.

Entre temps, ne soyez pas timides : laissez des commentaires ou écrivez moi et surtout amusez vous !

May 13, 2014
4 min read

A La Découverte De Phaser - 2

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.