Tutoriel : Comment faire un jeu à la Jetman – étape 1 – Le Jetman

Posted on 17:06

Dans mon premier tutoriel pour débutant je vais vous apprendre à créer un jeu comme Jetman.

Il s’agit d’un jeu casual très connu sur Facebook et très addictif.

Jouer à Jetman

1. D’abord vous devez avoir téléchargé et installé Adobe Flash IDE : Adobe Flash Professional CS3 au minimum

Nous allons coder le jeu avec le langage ActionScript 3.0 (le langage de programmation de Flash) donc vous devez posséder Adobe Flash CS3 au minimum.
Vous pouvez télécharger la version d’essai gratuite ici pour Windows ou Mac OSX : https://www.adobe.com/cfusion/tdrc/index.cfm?loc=en&product=flash

2. Créer un nouveau document

  • Ouvrir Flash.
  • Créer un nouveau document Flash ActionScript 3.0
  • Sur le panneau propriétés du document Flash définir la cadence à 25ips.
  • Définir la couleur de fond en noir

3. Création du MovieClip du Jetman

Flash utilise des objets graphiques appelés des MovieClip. Donc nous allons créer le MovieClip du Jetman.

  • Cliquer sur l’outil rectangle dans la barre d’outils.

create_box

  • Ensuite dessiner un rectangle sur la scène avec ces propriétés largeur : 50px et hauteur : 15px (vous pouvez modifier sa taille plus tard).
  • Sélectionner toute la forme, y compris la bordure. En double cliquant sur le rectangle
  • Faire un clic droit en ayant sélectionné le rectangle puis Convertir en Symbole.
  • Ecrire le nom du symbole : Jetman (pas jetman ou JETMAN).
  • Puis OK.

Maintenant il y a un Symbole nommé Jetman dans la Bibliothèque. Si elle n’apparaît pas il suffit d’appuyer sur la touche F11.
Il y a une occurrence (instance) du symbole Jetman sur la scène. Super ! Voilà le premier MovieClip

Dans le but de scripter le comportement de ce MovieClip il faut lui donner un nom d’occurrence (instance name) sur la scène.

  • Sur la scène, cliquer sur le MovieClip du jetman

instance

  • Ensuite dans le panneau des propriétés il y a un champ : nom d’occurrence à remplir: jetman (pas Jetman ou JETMAN) c’est très important.

instance_name

C’est fait ! Maintenant on peut scripter ce MovieClip avec ActionScript.

4. Le code

Vous avez différents outils pour coder en ActionScript. La manière la plus simple étant de coder directement dans les calques dans l’IDE Flash.

  • Créer un nouveau caaque sur la timeline. Cliquer sur le petit bouton blanc en bas à gauche.
  • Ajouter le nouveau layer en haut: en glissant le calque vers le haut.
  • Renommer le calque rename clic droit > renommer > Actions
  • Ensuite sélectionner la première image du calque (ici en noir).

layer

  • Enfin aller dans le menu Fenêtres > Actions ou utiliser la touche F9.

Un nouveau panneau s’ouvre : La panneau Actions. Le code s’écrit ici.

  • Copier Coller ce code ActionScript 3. Un petit a apparaît dans l’image ensuite.

  • Enfin tester le jeu (raccourcis CTRL+ENTREE)

Cette animation s’affiche si tout s’est bien passé :

Télécharger le code source :

[www.thisisgameplay.com]_Jetman_step1.fla

Télécharger le fichier compilé swf :

[www.thisisgameplay.com]_Jetman_step1.swf

Ensuite nous passerons au Level design.

http://photos-g.ak.fbcdn.net/photos-ak-sf2p/v43/106/4243149646/app_1_4243149646_252.gif

Léxique :
image = frame
fps = ips = image par seconde
occurence = instance
MovieClip = Symbole
IDE = Integrated development environment = Environnement de développement intégré