Le Blog de Benoît Freslon - Développeur de jeux vidéo Freelance - Flash, mobile, iOS Android, Unity

Par benoitfreslon Blog créé le 14/04/11 Mis à jour le 29/01/15 à 12h58

Game Designer freelance et développeur de jeux indépendants (Flash, mobile, iOS, Android, Unity)
Ce blog a pour but de faire découvrir mes créations vidéo ludiques.
Je posterai également des tutoriels concernant le développement de jeux.
http://www.benoitfreslon.com
http://benoit.freslon.free.fr

Ajouter aux favoris
Signaler
Tutorial

Dans ce petit tutoriel Flash je vais vous montrer comment créer une une gravité sur un personnage comme dans la pluspart des jeux de plateformes.

Commençons !

Télécharger les fichiers

  • Sauvegarder sur votre ordinateur ces 2 images (Click droit > Enregistrer sous)

  • Ourvir Flash (CS3, CS4 ou CS5) et créer un nouveau document ActionScript 3.0
  • Régler les propriétés du document à 24 ips, et 550×400 px (propriétés par défaut)

Création d'un MovieClip pour le héros

  • Créer un nouveau symbole : Insertion > Nouveau Symbole > MovieClip
  • Nom du symbole: Hero (en Anglais, oui c'est la convention :))
  • Cocher : Exporter pour ActionScript
  • Enfin Cliquer OK

  • Maintenant vous vous trouvez dans le symbole du Hero. Super !
  • Importer le premier sprite de mario : mario_stand.png sur la première image clé.
  • Fichier > Importer > Importer sur la scène > mario_stand.png
  • Placer le sprite juste au dessus du repère local du symbole (la petite croix noire)
  • Maintenant créer une nouvelle image clé vide sur le scénario un peu plus loin :
  • Scénario>  autre image sur le scénario > Click droit > Ajouter une image clé vide
  • Importer la seconde image : mario_jump.jpg sur l'autre image clé
  • Insertion > Sénario> Nouveau calque
  • Ensuite créer un nouveau calque et ajouter 2 noms d'étiquette
  • Sur le scénario cliquer sur la première image clé où se trouve le mario_stand.png et aller dans la panneau Propriétés : Etiquette > Nom > stand
  • On the timeline click on the second key frame with the mario_jump.png sprite and go to the Properties pannel > Label > Name > jump
  • Sur le scénari cliquer sur la seconde image clé où se trouve le mario_jump.png et aller dans le panneau Propriétés : Etiquette > Nom > jump

Ajouter le code du saut

  • Revenir sur la scène principale : Cliquer sur Scène 1
  • Ajouter un nouveau calque nommé « Actions » : Insertion > Scénario > Nouveau calque
  • Puis ouvrir le panneau Action : Scénario > Calque Actions > Clic que une image clé > Clic Droit > Actions
  • Enfin copier/coller ce bout de code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
// La gravité

var gravity = 0.8;

// La position du sol (y)

var floor = 300;

// Ajouter le MovieClip du héros

var hero = new Hero();

// Position en x du héros

hero.x = 550/2;

// Position en y du héros

hero.y = floor;

// Mettre l'état du héros à l'état "stand"

hero.gotoAndStop("stand");

// Ajouter le héros sur la liste d'affichage

addChild(hero);

// Création de la propriété speedY sur le héros et l'initialiser à 0

hero.speedY = 0

// Création de la propriété impulsion sur le héros et l'initialiser à 10

hero.impulsion = 10;

// Ajout d'un écouteur d'événement entre chaque frame sur le héros

hero.addEventListener(Event.ENTER_FRAME, heroEnterFrame)

function heroEnterFrame (pEvent)

{

// Entre chaques frames

// Appliquer la gravité sur la vitesse

hero.speedY += gravity;

// Bouger le héros en fonction de sa vitesse

hero.y += hero.speedY;

// Si le y du héros dépasse la limite du sol

if (hero.y > floor)

{

// Le héros est replacé au niveau du sol

hero.y = floor

// Anuler la vitesse actuelle en cas de contact avec le sol

hero.speedY = 0;

// changer l'état du héros pour l'état "stand"

hero.gotoAndStop("stand");

}

}

// Ajouter un écouteur d'événement sur la scène au clic enfoncé

stage.addEventListener(MouseEvent.MOUSE_DOWN, mouseDown)

function mouseDown (pEvent)

{

// Quand l'utilisateur clic

// Si le héros et à l'état de "stand"

if (hero.currentLabel == "stand")

{

// Lui donner une impulsion vers le haut

hero.speedY = -hero.impulsion;

// passer son état à l'état "jump"

hero.gotoAndStop("jump");

}

}

Ajouter à mes favoris Commenter (4)

Commentaires

coco_adpist
Signaler
coco_adpist
Petite remarque : lorsque tu met a jour ta vitesse et la position ( en fct respectivement de la gravité et de la vitesse ), tu pourrais tenir compte du "dt", le temps de calcul de la frame précédente, si tu y a accès. Lorsque le programme tourne à fps réguliers comme c'est le cas, ce n'est pas trop problématique de faire comme tu le propose. Mais si le temps de calcul varie d'une frame à l'autre ( ce qui peut arriver d'une config à une autre ) , le résultat sera faussé.

La façon la plus simple se rapprochant des équations de la mécanique est la suivante :

//Mise à jour de la vitesse
Vitesse = Vitesse + Accélération*Temps

//Mise à jour de la position
Position = Position + Vitesse*Temps

où l'accélération est dans le cas que tu présentes réduite à la gravité uniquement.

bonne continuation =)
Morphine
Signaler
Morphine
Ah ok, tout simplement :D

Bonne continuation en tout cas, bravo pour le tuto qui intéressera sans doute pas mal de monde (tout comme d'éventuels autres dans le futur !).
benoitfreslon
Signaler
benoitfreslon
@Morphine
Sinon ça sert à quoi de faire plus de deux frames ?? (vu qu'on utilise que ça) ?

Tu veux dire sur le screenshot ?
J'ai ajouté des images pour que l'on puisse lire les noms des étiquettes tout simplement.
Cela ne change rien d'autre.
++
Morphine
Signaler
Morphine
C'est un peu dommage de donner le code sans plus d'explications (même si c'est commenté). D'ailleurs tu as une ligne (pas dans le code cette fois) qui est en anglais.
Sinon ça sert à quoi de faire plus de deux frames ?? (vu qu'on utilise que ça)

Édito

Suivez, commentez, jouez, testez, partagez mes nouvelles créations.

Apprenez à développer des jeux simples grâces aux tutoriels.

Archives