[Flash] Création décor pour jeux 2/5

Bonjour,

Voici la deuxième partie de notre tuto, nous avons vu que grâce à un tableau on peut ajouter autant d'éléments dans le décor que l'on veut.
Dans cette partie nous allons faire déplacer le décor.

1) Reprendre notre dernier fichier : ICI.
2) Ouvrir flash.
3) Nous affichions 15 et 19 avant dans notre boucle, maintenant nous allons passer ces valeurs à 17 Lignes et 21 colonnes, nous affichons plus que ce qui est nécessaire.
le code mofidier donne :
function dessine_carte () {
_root.createEmptyMovieClip("decor", 0);
// initialise le niveau de profondeur
n=1;
// pour les 17 lignes du décor ((480/32)=15...)
for (L=0; L<17; L++) {
// pour les 21 colonnes du décor ((608/32)=19...)
for (C=0; C<21; C++) {
// crée la brique
decor.attachMovie("fond","fond_"+L+"_"+C,n);
// initialise la coordonnée x
decor["fond_"+L+"_"+C]._x=32*C;
// initialise la coordonnée y
decor["fond_"+L+"_"+C]._y=32*L;
// initialise l'image de la brique
image=carte[L][C];
decor["fond_"+L+"_"+C].gotoAndstop(image);
// passe au niveau de profondeur supérieur
n=n+1;
}
}
}
Et nous devons agrandir notre carte :
carte=[[2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2],
[2,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,2],
[2,4,3,3,3,4,4,4,4,4,4,4,4,4,4,4,4,4,2],
[2,4,3,3,3,4,4,4,4,4,4,4,4,4,4,4,4,4,2],
[2,4,4,3,3,4,4,4,4,4,4,4,4,4,4,4,4,4,2],
[2,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,2],
[2,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,2],
[2,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,2],
[2,4,4,4,4,4,4,4,4,4,3,3,3,4,4,4,4,4,2],
[2,4,4,4,4,4,4,4,4,4,4,4,3,3,3,4,4,4,2],
[2,4,4,4,4,4,4,4,4,4,4,4,4,4,3,3,4,4,2],
[2,4,4,4,4,4,4,4,4,4,4,4,4,4,4,3,4,4,2],
[2,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,2],
[2,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,4,2],
[2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2]];
4) Que devons nous faire en algorithmique:
<code>
Si une touche est pressée
Déplacer l'ensemble du décor dans la bonne direction
Si le décor a été déplacé de plus de 31 pixels
Déplacer une rangée de clips pour en simuler une nouvelle
</code>
ce qui nous donne en AS:
<code>
if (premiere_colonne==0){derniere_colonne=20;}
else {derniere_colonne=premiere_colonne-1;}</code>
if (premiere_ligne==0){derniere_ligne=16;}
else {derniere_ligne=premiere_ligne-1;}
Ce qui nous donne des nouvelles variables :
<strong>decalage_decor_x</strong> et <strong>decalage_decor_y</strong>.
<strong>carte_ligne=0;</strong> et <strong>carte_colonne=0;</strong>.
<strong>premiere_colonne=0;</strong> et <strong>premiere_ligne=0;</strong>.
Cela sera expliqué plus loin.
5) Nous devons de nouveau adapter notre fonction pour la carte
// trace le décor au démarrage
function dessine_carte () {
_root.createEmptyMovieClip("decor", 0);
// initialise le numéro de la brique
n=1;
// pour les 17 lignes du décor
for (L=0; L<17; L++) {
// pour les 21 colonnes du décor
for (C=0; C<21; C++) {
// crée la brique
id="fond_"+L+"_"+C;
decor.attachMovie("fond",id,n);
//trace(id);
// initialise la coordonnée x
decor[id]._x=(32*C)-32;
// initialise la coordonnée y
decor[id]._y=(32*L)-32;
// initialise l'image de la brique
image=carte[L][C];
decor[id].gotoAndstop(image);
// passe au numéro suivant
n=n+1;
}
}
}
Car si nous bougeons de + de 31 pixels une nouvelle image doit apparaitre.
Maintenant nous allons créer les fonctions de déplacement :
<strong>Pour la droite :</strong>
// déplace le décor
function deplace_decor_droite () {
if (premiere_colonne==0){derniere_colonne=20;}
else {derniere_colonne=premiere_colonne-1;}
if (premiere_ligne==0){derniere_ligne=16;}
else {derniere_ligne=premiere_ligne-1;}
ligne=premiere_ligne;
for (n=0; n<17; n++) {
if (ligne==17){ligne=0;}
brique="fond_"+ligne+"_"+derniere_colonne;
premier="fond_"+ligne+"_"+premiere_colonne;
_root.decor[brique]._x=_root.decor[premier]._x-32;
image=carte[(carte_ligne+n)][(carte_colonne-1)];
decor[brique].gotoAndStop(image);
ligne+=1;
}
if(premiere_colonne==0){premiere_colonne=20;}
else {premiere_colonne=premiere_colonne-1;}
carte_colonne-=1;
}
<strong>Pour la gauche:</strong>
function deplace_decor_gauche () {
if (premiere_colonne==0){derniere_colonne=20;}
else {derniere_colonne=premiere_colonne-1;}
if (premiere_ligne==0){derniere_ligne=16;}
else {derniere_ligne=premiere_ligne-1;}
ligne=premiere_ligne;
for (n=0; n<17; n++) {
if (ligne==17){ligne=0;}
brique="fond_"+ligne+"_"+premiere_colonne;
dernier="fond_"+premiere_ligne+"_"+derniere_colonne;
decor[brique]._x=_root.decor[dernier]._x+32;
image=(carte[(carte_ligne+n)][(carte_colonne+21)]);
decor[brique].gotoAndStop(image);
ligne+=1;
}
if(premiere_colonne==20){premiere_colonne=0;}
else {premiere_colonne=premiere_colonne+1;}
carte_colonne+=1;
}
<strong>Pour le bas:</strong>
function deplace_decor_bas () {
if (premiere_colonne==0){derniere_colonne=20;}
else {derniere_colonne=premiere_colonne-1;}
if (premiere_ligne==0){derniere_ligne=16;}
else {derniere_ligne=premiere_ligne-1;}
colonne=premiere_colonne;
for (n=0; n<21; n++) {
if (colonne==21){colonne=0;}
brique="fond_"+derniere_ligne+"_"+colonne;
premier="fond_"+premiere_ligne+"_"+premiere_colonne;
_root.decor[brique]._y=_root.decor[premier]._y-32;
image=(carte[(carte_ligne-1)][(carte_colonne+n)]);
decor[brique].gotoAndStop(image);
colonne+=1;
}
if(premiere_ligne==0){premiere_ligne=16;}
else {premiere_ligne=premiere_ligne-1;}
carte_ligne-=1;
}
<strong>Pour le haut :</strong>
function deplace_decor_haut () {
if (premiere_colonne==0){derniere_colonne=20;}
else {derniere_colonne=premiere_colonne-1;}
if (premiere_ligne==0){derniere_ligne=16;}
else {derniere_ligne=premiere_ligne-1;}
colonne=premiere_colonne;
for (n=0; n<21; n++) {
if (colonne==21){colonne=0;}
brique="fond_"+premiere_ligne+"_"+colonne;
dernier="fond_"+derniere_ligne+"_"+premiere_colonne;
_root.decor[brique]._y=_root.decor[dernier]._y+32;
image=(carte[(carte_ligne+17)][(carte_colonne+n)]);
decor[brique].gotoAndStop(image);
colonne+=1;
}
if(premiere_ligne==16){premiere_ligne=0;}
else {premiere_ligne=premiere_ligne+1;}
carte_ligne+=1;
}
Ouf, voilà beaucoup de code à comprendre, prenez le temps de l'analyser.
Tout ce code est sur la première frame.
Maintenant il faut modifier le code de notre personnage en frame 4 par celui-ci :
action_heros=0;
if (Key.isDown(Key.UP)) {
decor._y+=vitesse_heros;
decalage_decor_y+=vitesse_heros;
direction_heros=1;
action_heros=1;
if(decalage_decor_y>31){deplace_decor_bas();decalage_decor_y=0;}
}else{
if (Key.isDown(Key.DOWN)) {
decor._y-=vitesse_heros;
decalage_decor_y-=vitesse_heros;
direction_heros=3;
action_heros=1;
if(decalage_decor_y<-31){deplace_decor_haut();decalage_decor_y=0;}
}else{
if (Key.isDown(Key.RIGHT)) {
decor._x-=vitesse_heros;
decalage_decor_x-=vitesse_heros;
direction_heros=2;
action_heros=1;
if(decalage_decor_x<-31){ deplace_decor_gauche();decalage_decor_x=0;}
}else{
if (Key.isDown(Key.LEFT)) {
decor._x+=vitesse_heros;
decalage_decor_x+=vitesse_heros;
direction_heros=4;
action_heros=1;
if(decalage_decor_x>31){ deplace_decor_droite();decalage_decor_x=0;}
}
}
}
}
if (Key.isDown(Key.SPACE)){action_heros=2;}
heros.gotoandstop(direction_heros+action_heros*4);

Nous allons stopper ici pour aujourd'hui.
Bàv,
Burnside.