Il n'y a pas de restriction, vous pouvez utiliser n'importe quel programme qui puisse écrire du code. Cependant, certains sont payants. En cours d'ICN, vous serez amené à utiliser Notepad++ qui est un logiciel d'édition de code simple et gratuit.

Création de la maquette du jeu

Pour commencer, il est important de créer ce qu'on appelle une " maquette ". Il s'agit en d'autres termes, d'un croquis du jeu. Sans croquis, vous ne saurez pas complètement comment vous imaginez votre jeu et sans cesse, vous effacerez votre travail pour en commencer un autre si le précédent ne vous satisfait pas. Ce pourquoi il est fortement conseillé de mettre sur papier ou sur le numérique, une maquette de votre jeu. Imaginez le scénario, le décor puis comment le joueur peut perdre et gagner la partie.

Création du personnage

Rare sont les sites gratuits qui proposent la fonctionnalité de créer un personnage. En effet, pour créer un personnage en 3D il est nécessaire de passer beaucoup d'heures à le modéliser, il est plus facile de le dire que le fabriquer. En ICN, vous serez amené à créer tout simplement, un petit personnage en 2D. Il vous est conseillé d'utiliser le site Maplestory Design.

Ci-dessous, une présentation de mon personnage avec deux poses supplémentaires

Après avoir pris le temps de créer le personnage, vous pourrez le télécharger en appuyant sur le bouton bleu " Download spritesheet ". La position par défaut de votre personnage se trouve dans le dossier ' default ' et le dossier ' 0 ' le nom du fichier s'appellera : Stand1_0.png

Création du spritesheet du personnage

Un spritesheet est autrement dit, une image qui contiendra les différentes positions de votre personnage lors de son animation. Dans un jeu quelconque, le personnage s'anime grâce à un spritesheet qui lui est défini. En ICN, vous apprendrez à faire le vôtre.

Dans le spritesheet, nous verrons qu'il existe plusieurs " frames " autrement dit des vignettes. Vous pouvez comptez jusqu'à 7 vignettes. Mais l'ordinateur, lui compte jusqu'à 6 vignettes. En effet, le chiffre 0 est aussi un chiffre à ne pas oublier.

Création du background

Le " background " autrement dis, le fond ou bien l'arrière-plan, est essential quant à l'esthétisme de votre jeu. Une fois avoir choisi celui qui convient le mieux à votre maquette, il vous faudra utiliser des tiles (élements de décorations) pour les placer sur le background. Un logiciel d'édition d'images gratuite conseillé pour cet exercice : Photofiltre cependant vous être libre d'utiliser un autre.

Dans ce background, j'ai inclus plusieurs plateformes avec quelques élements de décorations que vous trouverez facilement sur internet en cherchant le mot " tile " ou bien " tilesets " pour chercher un ensemble de tiles.

Création de la physique

Dans un jeu de plateformes, la physique est un élement primordiale. En parlant de physique, nous parlons en réalité de collisions avec le joueur. L'objectif étant d'empêcher le joueur de passer à travers une plateforme.

Pour se faire, nous allons écrire ceci dans la fonction de 'preload' :

• game.load.image('ground','medias/platform.png'); Le jeu va charger l'image de la plateforme et la nommera " ground ".

Puis nous aller écrire juste en dessous mais avant la fonction 'create' :

• var platforms; Cette ligne signifie que nous voulons la création de la variable platforms.

Puis dans la fonction 'create' :

• game.physics.startSystem(Phaser.Physics.ARCADE); Activation du "Arcade Physics system" pour activer la physique dans le jeu.
• game.physics.arcade.enable(leHeros); Activation de la physique du joueur.
• platforms = game.add.group(); Création du groupe d'élements qui composera les plateformes.
• platforms.enableBody = true; Ce code fera comprendre que nous voulons que ce groupe possède une physique.
• var ledge = platforms.create(X, Y, 'ground'); "ledge" signifiant le rebord, nous le placerons à la position X et Y et nous spécifions qu'il faut utiliser l'image qui se nomme 'ground'.
• ledge.scale.setTo(1.14,1); Cette ligne de code permettra de redimensionner la plateforme. Sa largeur se multipliera de 1,14 et sa grandeur se multipliera de 1.
• ledge.body.immovable = true; Nous spécifions que la plateforme doit être immovible, autrement dis qu'elle ne bougera pas.

Puis dans la fonction 'update' :

• var hitPlatform = game.physics.arcade.collide(leHeros, platforms); Activation de la collision entre le joueur et la plateforme.

Mouvement du personnage

Car le personnage ne se déplacera pas selon le mouvement du curseur, nous allons devoir lui assigner les touches directionnelles du clavier pour le faire déplacer.

Pour commencer, il faudra écrire dans la fonction 'create' :

• cursors = game.input.keyboard.createCursorKeys(); Cette ligne de code va intégrer le système de touches directionnelles pour qu'il soit opérationnel.
• leHeros.animations.add('marche', [3, 4, 5, 6], 10, false); Création de l'animation " marche " qui va saisir les frames 3, 4, 5 et 6. '10' correspond au FPS (Frames per second).
  leHeros.animations.add('repos', [0, 1, 2], 3, false); Création de l'animation " repos " qui va saisir les frames 0, 1 et 2. '3' correspond au FPS (Frames per second).
  leHeros.play('repos'); L'animation par défaut du joueur lorsqu'il ne bougera pas, sera l'animation ' repos '.

Nous allons devoir écrire dans la fonction 'update' :

• if (cursors.left.isDown)
  {
  // Déplacement latérale à gauche
  leHeros.x = leHeros.x -5;
  // Faire jouer l'animation " marche "
  leHeros.animations.play('marche');
  // Créer une symétrie horizontale
  leHeros.scale.x = 1;
  }
  
• if (cursors.right.isDown)
  {
  // Déplacement latérale à droite
  leHeros.x = leHeros.x +5;
  // Faire jouer l'animation " marche "
  leHeros.animations.play('marche');
  // Créer une symétrie horizontale
  leHeros.scale.x = -1;
  }
  
• else
  {
  // Faire jouer l'animation " repos "
  leHeros.animations.play('repos');
  }
  
• // Si le joueur appuie sur sa touche directionnelle haut
  if (cursors.up.isDown && leHeros.body.touching.down && hitPlatform)
  {
  leHeros.body.velocity.y = -275;
  }
  

Nous allons par la suite créer dans la fonction 'create' le système de gravitation :

• leHeros.body.bounce.y = 0.2;
  leHeros.body.gravity.y = 400;
  leHeros.body.collideWorldBounds = true;

Collision mortelle

Après avoir créé une collision passive sur lequel le joueur peut sauter sur les plateformes sans risquer sa vie, nous pouvons désormais nous concentrer à créer une collision qui tuera le joueur au contact d'un élement.

Écrivons dans la fonction 'create'

• game.physics.arcade.enable(ELEMENT); Nous disons à l'ordinateur que nous voulons que "ELEMENT" soit ait une physique

Nous allons maintenant mettre dans la fonction 'update' :

• game.physics.arcade.collide(leHeros, ELEMENT, killcollision); Nous spécifions qu'il y a une collision entre le joueur et ELEMENT, et que dès lors, il faudra appliquer la fonction killcollision.

Nous allons devoir créer une fonction personnalisée car " killcollision " n'est pas une fonction officielle.

• function killcollision() {
  // Tue le joueur
  leHeros.kill();
  }

Conclusion

Les étapes démontrées ci-dessus sont essentielles au jeu vidéo. Mon objectif étant, non pas de faire un didacticiel mais de fournir aux intéressés une démonstration des pratiques exercées en ICN. Il est judicieux de souvent continuer le travail chez soi étant donné du peu de temps attribué dans l'emploi du temps scolaire.