(English) Poker Geeks Left Out in the Cold by Apple (but Loving Android)

Posted on mercredi 9 mars 2011 at 13:57 by admin · Permalink · One Comment

In: Nouveautés · Tagged with: Android, iPhone, mac, poker

ActionScript : Tutorial Comment créer une gravité comme un jeu de plateforme à la Mario

Dans ce petit tutoriel 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
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

// 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");
}
}

Télécharger les sources : www.benoitfreslon.com_Create_gravity_like_a_mario_plateformer

Posted on mercredi 2 février 2011 at 14:21 by admin · Permalink · 7 Comments

In: ActionScript3 as3, Game Design, Astuce, Tutoriel · Tagged with: acceleration, as3, rebond, gravité, jump, mario, physique, plateforme, sonic

Global Game Jam 2011 Paris : GameXtinction (jeu réalisé in 48h)

Global Game Jam 2011 à Isart Digital, Paris, FRANCE.

Le compte Tweeter officiel de la Global Game Jam à Paris

La page officielle du global Game Jam à Paris

Voilà c’était ma première participation au Global Game Jam

En résumé : des gens sympathiques, une bonne organisation, de bons jeux et en somme une bonne expérience pour tous.

Nous avons travaillé en équipe pour réaliser un prototype de jeu avec le thème imposé : Extinction, voici le jeu : GameXtinction

Nous avons atteint un achievement : Break the 4th wall, Casser le 4ème mur.

Description :

GameXtinction est un jeu original et expérimental.

Le personnage principal est un BUG informatique qui mange des éléments du jeu.

Chaque élément mangé crée un nouveau bug !

Cette créature peut voyager de jeux en jeux avec sa soucoupe volante.

Crédits :

Cesar Espejo Pham: Artiste 2D
Betrand Pujol: Sound designer
Tahir Vico: Artiste 2D
Audry Vasseaux: Artiste 2D
Benoit Freslon: Game Designer, Codeur

La page de GameXtinction page sur Global Game Jam.org

Vous pouvez jouer à GameXtinction ici.

Un grand merci à Isart Digital et à Olivier Lejade.

Posted on mardi 1 février 2011 at 13:57 by admin · Permalink · Leave a comment

In: Concours, Flash, Jeux · Tagged with: 2011, achievement, break the 4th wall, flash, gamextinction, ggj, global game jam, isart digital, Paris

ActionScript : Déplacer un objet avec le clavier avec des contrôles absolus

Dans ce tutoriel je vais vous montrer comment déplacer un objet avec le clavier en contrôle absolu en Flash.

Voir également comment déplacer un objet avec le clavier avec des contrôles relatifs à la caméra.

Contrôle absolu ? Kézako ?

La direction de votre objet va être calculée en fonction de l’orientation de votre objet. (Resident Evil, Micro Machines, Gears of War, etc.). Ce script est très utile pour les jeux de voitures.

Comment faire un contrôle absolu en Flash?

Récupérer les informations des touches du clavier (touche enfoncée, touche relâchée)
Déplacer ou tourner l’objet entre chaque frame avec la nouvelle vitesse (Touche gauche et droite : tourner l’objet, Haut : faire avancer l’objet, Bas ; faire reculer l’objet)

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

// 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;
}
}
// Ajouter un écouteur d'événement clavier pour une touche relâchée sur la scène
stage.addEventListener(KeyboardEvent.KEY_UP, releaseKey);
function releaseKey(pEvent) {
// Si une touche est relâchée, changer la valeur du boolean (false) assignée pour la touche correspondante
if (pEvent.keyCode == 38) {
keyUp = false;
} else if (pEvent.keyCode == 40) {
keyDown = false;
} else if (pEvent.keyCode == 37) {
keyLeft = false;
} else if (pEvent.keyCode == 39) {
keyRight = false;
}
}

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

// Et la vitesse de rotation en °
var rotationSpeed = 5;

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

function circleEnterFrame(pEvent) {
// Assigner la vélocité initiale de l'objet à 0
var velocity = 0;
if (keyUp) {
// Si la touche Haut est enfoncée on assigne la vitesse de l'objet à la vélocité courante
velocity = speed;
}
if (keyDown) {
// Si la touche Haut est enfoncée on assigne la vitesse de l'objet à la vélocité courante divisée par 2
velocity = - speed / 2;
}
if (keyLeft) {
// Faire tourner l'objet sur lui même
pEvent.currentTarget.rotation -= rotationSpeed;
}
if (keyRight) {
//Faire tourner l'objet sur lui même
pEvent.currentTarget.rotation += rotationSpeed;
}

// On convertie l'angle formé par l'objet en radian
var angleRadian = pEvent.currentTarget.rotation / 180 * Math.PI;

// On déplace l'objet avec l'angle, soit son orientation et sa vitesse courante donc sa vélocité
pEvent.currentTarget.x += Math.cos(angleRadian) * velocity;
pEvent.currentTarget.y += Math.sin(angleRadian) * velocity;
}

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

Posted on mardi 4 janvier 2011 at 16:22 by admin · Permalink · Leave a comment

In: ActionScript3 as3, Game Design, Astuce, Tutoriel · Tagged with: ActionScript3 as3, arrows, camera, key, clavier, move, relative

ActionScript: Déplacer un objet avec effet de ralentissement

Il existe une formule très simple pour déplacer un objet vers des coordonnées données avec un effet de ralentissement.

Cette formule fait diminuer la vitesse petit à petit suivant le temps.

vitesse = distance_entre_les_objets / coefficiant_de_ralentissement

La distance va décroître car la distance va décroître également.

Si je donne des valeurs :

object.x = 50

targetX = 100

speedX = (targetX – object.x) / 5

Sur la première image : speed = 10

object.x += (100 – 50) /5 > 50/5 > 10

> object.x = 50+10 = 60

Sur la seconde image : speed = 8

object.x += (100 – 60) /5 > 40/5 = 8

> object.x = 60 + 8 = 68

Sur la troisième image: speed = 6,4

object.x += (100 – 68) / 5 > 32/5 = 6,4

> object.x = 68 + 6,4 = 74,4

etc.

Sur la 100ème image : speed = 0

object.x += (100 – 100) / 5 > 0 /5 = 0

> object.x = 100 + 0 = 100

Code source :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

// Ajouter un écouteur d'événément au clic de souris sur la scène
stage.addEventListener(MouseEvent.CLICK, click);

function click(pEvent) {
// Lorsqu'on clic on donne de les nouvelles coordonnées de la souris à l'objet myBall
myBall.targetX = stage.mouseX;
myBall.targetY = stage.mouseY;
}

// Mettre les coordonnées par défaut
myBall.targetX = 200;
myBall.targetY = 200;

// Ajouter un écouteur d'énévement entre chaque frame
myBall.addEventListener(Event.ENTER_FRAME, ballEnterFrame);

function ballEnterFrame(pEvent) {
// Entre chaque frame on déplace l'objet vers ses coordonnées cibles
var b = pEvent.currentTarget;
b.x += (b.targetX - b.x) / 8;
b.y += (b.targetY - b.y) / 8;
}

Exemple:

Télécharger la source : www.benoitfreslon.com Move an object to coordinates with smoothing.zip

Posted on lundi 3 janvier 2011 at 15:53 by admin · Permalink · Leave a comment

In: Game Design, Astuce, Tutoriel · Tagged with: 3, ActionScript3 as3, move, object, smooth

ActionScript : Lancer une fonction après un délais avec setTimeout

Il a y différentes façons de lancer une fonction après un délais :

Avec un évènement enter frame
Avec une instance de la classe Timer
Avec une animation Motion Tween
Avec un évènement enter frame et la fonction getTimer
Et avec la fonction setTimeout (Voir setTimeout sur le livedocs d’Adobe)

Comment utiliser le setTimeout ?

Tout d’abord il faut créer une variable assignée à l’identifiant du setTimout

1	var intervalIndentifier

La fonction setTimeout retourne un identifiant unique (uint) à chaque fois que vous appelez cette fonction. Sauvegarder cet identifiant dans la variable dédiée.

1
2
3
4
5

// La fonction hellor va se lancer dans 2000 ms
intervalIdentifier = setTimeout(hello, 2000)
function hello() {
trace("function launched")
}

Cet ideitifiant doit être supprimé avec la fonction cleatTimeout pour stopper le processus si la fonction du setTimeout n’a pas été appelée.

1	clearTimeout(intervalIdentifier)

NB :

Si vous souhaitez lancer un setInterval déjà lancé n’oubliez pas de supprimer l’ancien identifiant. Dans ce cas le précédent setTimeout ne sera pas arrêté.
Il faut savoir que le setTimeout ne peut pas être en pause ou relancé après son arrêt.
Toujours assigner une variable pour chaque setTimout
Le délais du setTimout est basé sur le temps et non pas sur la durée des frames.
Quand vous supprimez un setTimeout la fonction qui devait être appelée n’est pas lancée.
Vous n’avez pas besoin de supprimer un setTimeout when the setTimeout est déjà terminé mais cela ne coûte rien de le faire quand même.

Ajouter des paramètres dans le setTimeout :

La fonction lancée par le setTimout peut recevoir plusieurs arguments.

Pour ajouter des arguments ajoutez simplement des arguments après le second paramètre du setTimeout:

Bien entendu la fonction qui doit être lancée doit avoir exactement le bon nombre d’arguments.

1
2
3
4

intervalIdentifier = setTimeout(hello, 2000, "world", "www.benoitfreslon.com")
function hello(arg1, arg2) {
trace(arg1, arg2)
}

Exemple:

Télécharger la source : www.benoitfreslon.com Launch a function after a delay with setTimeout.zip

Posted on at 14:35 by admin · Permalink · Leave a comment

In: ActionScript3 as3, Astuce · Tagged with: ActionScript3 as3, clearTimeout, clock, delay, pause, setTimeout, timer

ActionScript: Lancer des projectiles en direction de la souris

Après avoir calculé l’angle entre 2 objets vous pouvez maintenant utiliser cet angle pour par exemple lancer des projectiles en direction d’un objet avec un peu de trigonométrie.

Comment ?

Calculer l’angle (en radian) entre les 2 objets graphiques avec la méthode Math.atan2.
Au clic afficher un nouveau projectile à la position du tank et ajouter un évènement enter frame sur ce projectile.
Sauvegarder l’angle entre le tank et le curseur dans le projectile.
Utiliser l’angle pendant l’évènement enter frame pour calculer la vitesse en x et en y avec le cosinus et le sinus.

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

import flash.display.MovieClip;
import flash.geom.Point;
import flash.events.MouseEvent;
// Code by Benoit Freslon.
// Tutorials, Flash games:
// http://www.benoitfreslon.com
// Cet objet regardera constamment la souris.
myTank.addEventListener(Event.ENTER_FRAME, tankEnterFrame);
// Cette fonction est lancée 25 fois par seconde.;
function tankEnterFrame(pEvt) {
// pEvt.currentTarget: myTank
var mc = pEvt.currentTarget;
// Calculer l'angle en radians entre la souris et l'objet
var angleRadian = Math.atan2(mouseY - mc.y,mouseX - mc.x);
// Convertir l'angle radians en degrés.
var angleDegree = angleRadian * 180 / Math.PI;
// Orienter l'objet.
mc.rotation = angleDegree;
// Afficher l'angle en degrés sur l'interface.
txtAngle.text = Math.round(angleDegree) + "°";
}
// Ajouter un évènement souris qui se déclenchera au clic.
stage.addEventListener(MouseEvent.MOUSE_DOWN, mouseDown);
function mouseDown(pEvent) {
// Ajouter un nouveau projectile
var b = new Bullet();
// Placer le projectile aux coordonnées du tank.
b.x = myTank.x;
b.y = myTank.y;
// Enregistrer l'angle dans le projectile.
// Cet angle orientera le projectile
b.angleRadian = Math.atan2(mouseY - myTank.y,mouseX -myTank.x);
// Ajouter un écouteur d’évènement ENTER_FRAME)
b.addEventListener(Event.ENTER_FRAME, bulletEnterFrame);
// Afficher le projectile sur la scène
addChild(b);
}
// Vitesse du projectile
var speed = 8;
function bulletEnterFrame(pEvent) {
// Enregistrer l'objet cible dans une variable
var b = pEvent.currentTarget;
// Bouger l'objet entre chaque frame
// Sur l'axe X utiliser le cosinus de l'angle
b.x += Math.cos(b.angleRadian) * speed;
// Sur l'axe Y utiliser le sinus de l'angle
b.y += Math.sin(b.angleRadian) * speed;
// Orienter l'objet en fonction de l'angle en degrés.
b.rotation = b.angleRadian * 180 / Math.PI;
// Mais il faut supprimer les projectiles lorsqu'ils se retrouvent dehors
// Si le projectile est hors de l'écran
if (b.x < 0 || b.x > 400 || b.y < 0 || b.y > 400) {
// Supprimer le projectile de l'affichage
removeChild(b);
// /!\ ET RETIRER SON ECOUTEUR ENTER_FRAME
b.removeEventListener(Event.ENTER_FRAME, bulletEnterFrame);
}
}

Télécharger les sources : www.benoitfreslon.com_Throw_bullets_to_mouse_direction.zip

Posted on lundi 27 décembre 2010 at 12:50 by admin · Permalink · 6 Comments

In: ActionScript3 as3, Game Design, Astuce, Tutoriel · Tagged with: angle, bullet, direction, souris, radian, shoot em up

ActionScript: Detect collision between 2 circles

Avec le fameux théorème de Pythagore on peut détecter facilement des collisions entre 2 cercles.

Il suffit d’utiliser les rayons des 2 cercles avec la propriétés width divisée par 2.

En fait la propriété width renvoie le diamètre de l’objet circulaire. Donc si on veut le rayon on fait comme cela :

rayon = diametre / 2

rayon = cercle.width / 2

Ensuite si on calcule la distance entre les 2 cercles on peut détecter la collision :

if distance < ( circle1.width/2+ circle2.width/2 ) est true => Collision

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

// Lancer l'événement enter frame
this.addEventListener(Event.ENTER_FRAME, enterFrame);
function enterFrame(pEvent:Event):void {
// Calculer la distance entre les 2 MovieClips
var dist:int = getDistance(myCircleBlu,myCircleRed);
// Tester la distance entre les 2 cercles
if (dist < myCircleRed.width/2 + myCircleBlu.width/2) {
// Si il y a une collision on change l'opacité des cercles
myCircleRed.alpha = 0.5;
myCircleBlu.alpha = 0.5;
} else {
myCircleRed.alpha = 1;
myCircleBlu.alpha = 1;
}
}
function getDistance(pObj1:MovieClip,pObj2:MovieClip):Number {
var distX:Number = pObj1.x - pObj2.x;
var distY:Number = pObj1.y - pObj2.y;
return Math.sqrt(distX * distX + distY * distY);
}

Posted on vendredi 3 décembre 2010 at 11:02 by admin · Permalink · One Comment

In: ActionScript3 as3, Game Design, Astuce, Tutoriel · Tagged with: 2 collision, as3, distance, pythagore, test

Indie Game developer, Flash games, learn Flash, ActionScript with tutorials

(English) Poker Geeks Left Out in the Cold by Apple (but Loving Android)