« Créez votre propre jeu vidéo en Flash

Étape 1 : Préparation

le 6 septembre 2011 • Flash • par Dawlin

Étant donné que c'est un assez gros projet, nous avons besoin de nous organiser. Étant donné que ce n'est pas votre code à vous mais le mien, et qu'il est très compliqué de comprendre le code de quelqu'un d'autre, raison de plus pour bien se préparer

Création des fichiers

C'est un gros projet, qui totalise dans ma version plus de 600 lignes de code, qui devraient être placées plus ou moins toutes au même endroit. Ce qui veut dire qu'on ne s'y retrouverait pas

Donc nous allons séparer le code en plusieurs fichiers de script (d'extension .as) que nous chargerons depuis le fichier .fla du jeu.

Voilà l'arborescence de fichiers que vous devez créez :

Créez tous les fichiers .as, même si ils sont vides pour l'instant, comme ça on pourra s'en servir plus tard

Au final, on aura notre fichier "jeu.fla" dans lequel on mettra du code, mais également des "include", des commandes qui chargeront les scripts depuis le dossier "Scripts". C'est pour cela que les noms que je vous ai donnés sont très importants si on veut tous avoir le même code

Création des graphismes

Tout d'abord, créons un personnage. Alors moi dans mon optique, le personnage c'est plutôt une sorte de tank, qui tire des missiles, donc je l'ai dessiné comme ceci :

Mais bon après, non seulement c'est des graphismes faits à la va-vite parce que l'important c'est le code pour l'instant, mais surtout c'est pas obligé d'être un tank, ça peut être un dragon qui crache des boules de feu, le thème est libre

Ce personnage, on le place directement sur la scène, avec une occurrence "perso", à _x = 150 et _y = 150. On note également que l'origine du clip (à l'intérieur) est confondue avec le milieu du tank, et pas le coin supérieur gauche

Bon, pour les ennemis, on s'embête pas, on prend le même en rose :

Celui-ci, par contre, on le laisse dans la bibliothèque avec une occurrence bibliothèque ("Liaisons => Exporter") nommée "mechant" (parce que c'est un méchant )

Et voilà pour les personnages

Pour ce qui est des missiles, j'ai ceci :

Qui a l'avantage qu'on voit dans quel sens le missile est tourné. Notez bien que l'origine est au centre de la tête.

Ce missile reste dans la bibliothèque avec une occurrence bibliothèque "fleche"

Passons aux sols.

Pour l'instant, on ne programmera que 4 textures, mais c'est très facile d'en rajouter, il suffit de rajouter l'image et son numéro dans la bibliothèque. Voici la liste des textures actuelle :

: n°0 : C'est du pavé.
: n°1 : C'est de la pierre.
: n°2 : C'est du bois. on va s'arranger pour qu'on glisse dessus.
: n°3 : C'est une case bloquante.

Note : Ces textures viennent d'une feuille Chipset

Maintenant qu'on a toutes ces images, on va chacune les mettre dans un clip, portant comme nom d'occurrence un numéro : celui qu'il y a dans la liste. Ce qui nous donnera dans notre bibliothèque :

Et voilà, on a nos sols Donc vous voyez, si vous voulez en rajouter, vous pouvez continuer à 4, 5, 6 ... Mettre de l'herbe, de la glace, des petites montagnes, changer totalement de graphismes, etc...

Sur la scène

L'animation a pour dimensions 300px*300px

Sur la scène, on n'aura pas grand chose. Il vous faudra juste :

Un calque "ACTIONS", verrouillé et vide (je dois me répéter mais je mets toujours le code seul sur un calque qui porte un nom en majuscule, et c'est très pratique )
Un calque "txts", où on mettra un champ de texte dynamique d'occurrence "sortieT", et dedans on pourra afficher tout ce qu'on voudra pour tester, mais on y mettre surtout la vie du perso
Un calque "perso", avec notre perso placé à _x = 150 et _y = 150
Un calque "map" qui contient un clip vide

[/h] d'occurrence "map".

[b]Note : Tous ces calques sont donnés dans l'ordre où ils doivent être affichés, pour éviter que le personnage ne se retrouve sous la map :

On place également la cadence de l'animation à 25 fps.

Si vous voulez commencer le tutoriel avec exactement les mêmes conditions que moi, téléchargez la source

(il s'agit de jeu .fla à la fin de cette étape)

Et Hop ! On peut commencer à coder

Étape 2 : Les déplacements »