SCANIX

It's been a week since I decided to try Luxe. When I started game programming, it was still the time of Flash, I decided to use FlashPunk as game engine. And it’s natural that when I ' heard about Haxe I decided to use HaxePunk. HaxePunk was powerful enough to achieve what I wanted.

HaxePunk is a really great engine, it contains all the necessary tools to make 2D games, with the help of HaxePunk I learned most of the basic concepts of game programming. Unfortunately I also reached it limits which are the same as FlashPunk after trying to find a way to add the features that I needed, to review how HaxePunk does certain thing, the camera to find how to perform rotations, trying to find a way to know the axis of a collision, etc. I gradually discouraged.

I heard more and more about a new engine through Twitter and Haxe.io that one day I told myself that I had to try it by myself  and so I started testing Luxe. Most of the problems that I had with HaxePunk was solved easily, the only annoying thing was that some functionality of HaxePunk have become more complicated to implement than with this one, but I decided to devote myself entirely to Luxe yet.

I would not say that one is worse than the other, but I think that HaxePunk starts getting old, This time I have the impression to be one of the last to use it, the forum is no more active, I can not see really article about it on the internet and nobody takes care of its maintenance, through the Luxe community and its creator, I find this common motivation and who was beginning to lose with HaxePunk. Luxe is also a much more permissive engine, which allows to make "3D", the way the engine renders the image makes the shaders more powerfull, etc.

Bonjour,

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.

LES INDISPENSABLES

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

DE LA MOTIVATION !

MISE EN PLACE

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/data/

scanixplatformer/lib/ -> Copiez ici les fichiers JS de Quintus

scanixplatformer/images/

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.

LA MAP

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.

MISE EN PLACE DE QUINTUS

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".

LE NIVEAU

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.

LE JOUEUR

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.

JOUER

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.

Une fois de plus je me retrouve dans ce train. Et comme chaque jour, lors de cette attente de l'arrivée, je m'interroge... Est-ce que j'aime réellement la vie que je mène ou me suis-je convaincu de ceci ? Certes, j'ai un salaire respectable et nul problème dans la vie mais voilà , le bonheur n'est-il pas ailleurs ?

J'ai plaisir à me rappeler de cette époque où je ne rêvais que de devenir l'un des plus grands historiens et d'en apprendre plus sur le passé de ce monde, trop méconnu, qu'est le notre. Malheureusement il règne une sorte de malaise autour du passé. Comme si il renfermait un secret que nul ne devait connaître. De plus, la plupart des gens qui s'étaient aventuré à découvrir notre vie d’antan n'en sont jamais revenus. Tant et si bien, que notre président actuel fît interdire l'exploration de nos contrés trop lointaine et à renforcer la sécurité au frontière de nos villes. Toutes ces raison m'ont donc poussé à abandonner mes rêves et trouver un autre travail...

Il reste cependant, aux tréfonds de mon âme, cet espoir qu'un jour ce rêve puisse ce réaliser...

"Once again I am in this train. And as each day during this waiting for the arrival, I wonder... Do I really like the life I lead or I convinced myself of this ? Admittedly, I have a respectable salary and no problem in life but now, happiness is not it elsewhere ?

I am pleased to remind me the time when I dreamed of becoming one of the greatest historians and learn more about the past of this little-known world. Unfortunately there reigns a sort of unease about the past. As if it contained a secret that no one should know. In addition, most people who had ventured to discover our past lives are never returned home. So much so, that our current president forbade exploring our countered too far and strengthen border security in our cities. All these reason therefore prompted me to abandon my dreams and find another job...

However, it remains, in the depths of my soul, the hope that one day this dream will come true."