Code ActionScript AS3 pour déplacer un sprite avec l'aide des touches claviers

Code ActionScript AS3 pour déplacer un sprite avec l'aide des touches claviers

Nous allons continuer dans le même PROJET FLASH AS3 « pile », projet utilisant le principe des, LISTE PRINCIPALE et des LISTE AFFICHAGES CONTENEURS. afin de déplacer l'occurrence de sprite « cont1 » grâce aux touches clavier.

Code AS3 associé aux touches clavier :

• flèche gauche = 37
• flèche haut = 38
• flèche droite = 39
• flèche bas = 40
  

Principe du code AS 3 :

1. On initialise des variables booléennes à « false » pour chaque touche clavier.
2. On définit 3 écouteurs d'événements pour « touche enfoncée (KEY_DOWN) », « touche relachée (KEY_UP) », et l'événement ENTER_FRAME (exécuté dès que le lecteur entre dans une nouvelle image, soit à la cadence de l'animation).
3. On positionne à true la variable des touches enfoncées.
4. On positionne à false la variable des touches relâchées.
5. On teste la valeur de la variable de chaque touche, si elle est égale à true on déplace le sprite.

Code complet ActionScript 3 pour une touche clavier (flèche gauche) :

// initialisation d'une variable variable de touche flèchée
var flecheGauche:Boolean = false;
//pour vérifier : trace(flecheGauche);
// création des écouteurs KEY_DOW, KEY_UP et ENTER_FRAME
stage.addEventListener(KeyboardEvent.KEY_DOWN, toucheEnfonce);
stage.addEventListener(KeyboardEvent.KEY_UP, toucheRelache);
stage.addEventListener(Event.ENTER_FRAME, deplaceSprite);
// positionnement à true de la variable de touche
function toucheEnfonce(evt:KeyboardEvent) {

if (evt.keyCode == 37) {

flecheGauche = true;
//pour vérifier : trace(flecheGauche);
}

}

// positionnement à false de la variable de touche
function toucheRelache(evt:KeyboardEvent) {

if (evt.keyCode == 37) {

flecheGauche = false;
//pour vérifier : trace(flecheGauche);
}

}

// déplacement du sprite
function deplaceSprite(evt:Event) {

// déclaration de la variable

var vitesse:int = 5;

if (flecheGauche) {
cont1.x -= vitesse;
}

}

Remarques : La variable « vitesse » stocke le pas de déplacement de l'occurrence. Cette variable est déclarée de type « int », nombre entier. Si vous voulez le midifier pour une valeur décimale il faudra changer le type de variable en « Number ». L'intérêt de passer par cette variable est de pouvoir changer très facilement le pas de déplacement de l'occurrence sans modifier une valeur dans chaque ligne de code.

Suite de l'exercice :
Compléter le code pour les 3 autres touches.
Il faut :

• créer et initialiser une variable par touche supplémentaire,
• ajouter une condition par touche dans les 3 fonctions déjà existantes (ne pas créer de nouvelle fonction).

Modification des conditions pour ajouter les valeurs de butées : exemple : flèche gauche.

Avec l'opérateur « && » = AND, on va ajouter une condition de valeur de la coordonnées x ou y de l'occurrence « cont1 », et cela pour chaque flèche de déplacement :

if ((flecheGauche)&&(cont1.x > 50) ) {

cont1.x -= vitesse;

}

if ((flecheDroite)&&(cont1.x <500)) {

cont1.x += vitesse;

}

if ((flecheHaut)&&(cont1.y > 50)) {

cont1.y -= vitesse;

}

if ((flecheBas)&&(cont1.y <350)) {

cont1.y += vitesse;

}

Code complet scripte AS3

package {

import flash.display.Sprite;
import flash.display.Shape;
import flash.events.*;
public class pile extends Sprite {

public function pile():void {

var cont1:Sprite = new Sprite();

// tracé carré bleu
var carre:Shape = new Shape ();
carre.graphics.beginFill(0x0000FF, .8);
carre.graphics.drawRect(-30,-30,60,60);
// tracé rond bleu clair
var rond:Shape = new Shape ();
rond.graphics.beginFill(0x81C0FE, .8);
rond.graphics.drawCircle(0,0,50);
// placement du rond à l'index 0 du conteneur
cont1.addChildAt(rond, 0);
//placement du carré à l'index 1 du conteneur
cont1.addChildAt(carre, 1);
//placement du conteneur sur la scène
cont1.x = 100;
cont1.y = 100;
addChild(cont1);
cont1.swapChildren(rond,carre);
// initialisation des variables de touches
var flecheGauche:Boolean = false;
var flecheDroite:Boolean = false;
var flecheHaut:Boolean = false;
var flecheBas:Boolean = false;
// ajouts des écouteurs de touches
stage.addEventListener(KeyboardEvent.KEY_DOWN, toucheEnfonce);
stage.addEventListener(KeyboardEvent.KEY_UP, toucheRelache);
// écouteur du rafraichissement de la scène
stage.addEventListener(Event.ENTER_FRAME, deplaceSprite);
// toucheEnfonce positionne à true la variable de la touche
function toucheEnfonce(evt:KeyboardEvent) {

if (evt.keyCode == 37) {

flecheGauche = true;

}

if (evt.keyCode == 39) {

flecheDroite = true;

}

if (evt.keyCode == 38) {

flecheHaut = true;

}

if (evt.keyCode == 40) {

flecheBas = true;

}

}

//toucheRelache positionne à false la variable de touche
function toucheRelache(evt:KeyboardEvent) {

if (evt.keyCode == 37) {

flecheGauche = false;

}

if (evt.keyCode == 39) {

flecheDroite = false;

}

if (evt.keyCode == 38) {

flecheHaut = false;

}

if (evt.keyCode == 40) {

}

}

// déplacement du sprite

function deplaceSprite(evt:Event) {

// déclaration de la variable

var vitesse:int = 5;
//pour vérifier : trace("cont1.x = "+cont1.x);
//pour vérifier : trace("cont1.y = "+cont1.y);

if ((flecheGauche)&&(cont1.x > 50) ) {

cont1.x -= vitesse;

}

if ((flecheDroite)&&(cont1.x <500)) {

cont1.x += vitesse;

}

if ((flecheHaut)&&(cont1.y > 50)) {

cont1.y -= vitesse;

}

if ((flecheBas)&&(cont1.y <350)) {

cont1.y += vitesse;

}

}

}

}

}