Le Blog de Benoît Freslon - Game designer et blogger

Par benoitfreslon Blog créé le 14/04/11 Mis à jour le 28/11/18 à 12h25

Game Designer freelance et développeur de jeux indépendants depuis 2006.
Ce blog a pour but de faire découvrir mes créations vidéo ludiques.
Blog sur la Création de jeux vidéo de A à Z http://videogamecreation.fr

Ajouter aux favoris

Catégorie : Tutorial

Signaler
Tutorial

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.
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
////// Variables du jeu
// La vitesse de boost du jetman
var speedBoost = -4;
// Gravité
var gravity = .8;
// Vitesse max
var speedMax = 5;

////// Variables globales, ne pas toucher :)
// Jetman utilise le boost ?
var boost = false;
// La vitesse actuelle du jetman
var speed = 0;

// 25 fois par seconde cette fonction sera lancée
function jetmanEnterFrame(pEvt) {
    // Si boost == true
    if (boost) {
        // La vitesse du Jetman change
        speed = speedBoost;
    } else {
        // Si la gravité change la vitesse du Jetman et le pousse vers le bas 
        speed +=  gravity;
    }
    // Si la vitesse et trop rapide à cause de la gravité
    if (speed > speedMax) {
        // On limite la vitesse
        speed = speedMax;

        // Si la vitesse est trop faible on la limité aussi
    } else if (speed < -speedMax) {
        // On limite la vitesse
        speed =  -  speedMax;
    }
    // Toutes les frames le jetman va se déplacer verticalement
    jetman.y +=  speed;

    // Si le jetman est hors de l'écran
    if (jetman.y > 450) {
        jetman.y = 100;
    }
}
// Ajouter un écouteur d'évènement qui se lancera entre chaque images 25 fois par sondes.
jetman.addEventListener(Event.ENTER_FRAME, jetmanEnterFrame);

// SI la souris est enfoncée
function mouseDown(pEvt) {
    // Mettre la variable de booste à true
    boost = true;
}
// Si la souris est relevée
function mouseUp(pEvt) {
    // Mettre la variable de boost à false
    boost = false;
}
// Détecter les évènements souris sur la scène
stage.addEventListener(MouseEvent.MOUSE_DOWN, mouseDown);
stage.addEventListener(MouseEvent.MOUSE_UP, mouseUp);
  • 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é

Ajouter à mes favoris Commenter (0)

Signaler
Tutorial

Dans ce tutoriel je vais vous montrer comment déplacer un objet avec le clavier suivant la position de la caméra.

Contrôles relatifs à la caméra ?

La direction de votre objet est calculée en fonction de la position de la caméra.(Mario 64, Uncharted, GTA 3, etc.).

Exemple : Si j'appuis sur le bouton droit le personnage va aller vers la droite de mon écran.

Comment faire un contrôle relatif ?

  • Récupérer les informations du clavier
  • Créer un vecteur de direction
  • Déplacer l'objet en fonction du vecteur entre chaque frame
  •  
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
104
105
106
107
// Assigner 4 booléens pour chaque touche
var keyUp = false;
var keyDown = false;
var keyLeft = false;
var keyRight = false;
// Ajouter une écouteur d'événement clavier pour une touche pressée sur la scène
stage.addEventListener(KeyboardEvent.KEY_DOWN, pressKey);
function pressKey(pEvent)
{
// If an arrow key is down, switch the value to true to the assigned variable
// Si une touche est enfoncée, changer la valeur du boolean (true) assignée pour la touche correspondante
if (pEvent.keyCode == 38)
{
keyUp = true;
}
else if (pEvent.keyCode == 40)
{
keyDown = true;
}
else if (pEvent.keyCode == 37)
{
keyLeft = true;
}
else if (pEvent.keyCode == 39)
{
keyRight = true;
}
}
// Assigner 4 booléens pour chaque touche

var keyUp = false;

var keyDown = false;

var keyLeft = false;

var keyRight = false;

// Ajouter une écouteur d'événement clavier pour une touche pressée sur la scène

stage.addEventListener(KeyboardEvent.KEY_DOWN, pressKey);

function pressKey(pEvent)

{
// Si une touche est enfoncée, changer la valeur du boolean (true) assignée pour la touche correspondante

if (pEvent.keyCode == 38)
{
keyUp = true;
}
else if (pEvent.keyCode == 40)
{
keyDown = true;
}
else if (pEvent.keyCode == 37)
{
keyLeft = true;
}
else if (pEvent.keyCode == 39)
{
keyRight = true;
}
}

// Assigner la vitesse de l'objet
var speed = 6;

// Ajouter un écouteur d'événement entre chaque frame sur l'objet
myCircle.addEventListener(Event.ENTER_FRAME, circleEnterFrame);

function circleEnterFrame(pEvent)
{

// Créer et initialiser un vecteur 2D
var vector = new Point(0,0);
if (keyUp)
{
//Si la touche Haut est enfoncée assigner une nouvelle valeur au vecteur sur y
vector.y +-1;
}

if (keyDown)
{
// Si la touche Bas est enfoncée assigner une nouvelle valeur au vecteur sur y
vector.y +1;
}
if (keyLeft)
{
// Si la touche Gauche est enfoncée assigner une nouvelle valeur au vecteur sur x
vector.x +-1;
}
if (keyRight)
{
// Si la touche Right est enfoncée assigner une nouvelle valeur au vecteur sur x
vector.x +1;
}
// Calculer l'angle en radian formé par le vecteur de vitesse
var angle = Math.atan2(vector.y,vector.x);
// Si la taille du vecteur n'est pas nul
if (vector.length &gt; 0)
{
// Déplacer l'objet en fonction de l'angle formé et de la vitesse
pEvent.currentTarget.x +Math.cos(angle) * speed;
pEvent.currentTarget.y +Math.sin(angle) * speed;
}
}


Télécharger la source : www.benoitfreslon.com-Move-an-objet-with-keyboard-with-camera-relative-control.zip

Ajouter à mes favoris Commenter (0)

Signaler
Tutorial

Voici comment orienter un objet graphique de type MovieClip en Flash vers le curseur de la souris.
Copier/Coller le script dans Flash et remplacer le nom d'instance myTank par le vôtre.

 12

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
// This object will always look at the mouse cursor
myTank.addEventListener(Event.ENTER_FRAME, tankEnterFrame);
// This function will be launched every frame (25 times by seconds)
function tankEnterFrame(pEvt) {
// pEvt.currentTarget : myTank
var mc=pEvt.currentTarget;
// Get the radian angle between the tank and the cursor
// You can also replace mouseX and mouseY by another coordinates
var angleRadian=Math.atan2(mouseY-mc.y,mouseX-mc.x);
// Convert the radian angle in dedree
var angleDegree=angleRadian*180/Math.PI;
// Set the orientation
mc.rotation=angleDegree;
// Display angle of rotation in degree
txtAngle.text=Math.round(angleDegree)+"°";
}

Télécharger les sources: [www.thisisgameplay.com]_Orient_object_to_mouse_cursor.fla

Ajouter à mes favoris Commenter (0)


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)

Édito

Game designer freelance et développeur de jeux indépendants depuis 2006.

Blog sur la Création de jeux vidéo de A à Z http://videogamecreation.fr

avec sa chaîne YouTube : https://www.youtube.com/c/channel/UC2yd7uzDAlGmmEYzeLfk

 

Archives