Accueil Connexion Inscription Membres Rechercher Accéder au jeu


   Index / Vos idées pour le développement / Map flash par Tchang

   


 Page n° 1 / 5 > >>

--Squall
Administrateur

Messages : 1198
Remonter

Map flash

Posté par sff, le 26/04/2006 à 21:35:15

Tutorial par Tchang !

Dessiner une carte
L'idée de base est de mettre des tuiles ( des carrés dessinés) les unes à la suite des autres dans une grille afin de
créer une carte.
La première chose que nous pouvons faire, c'est de créer deux tuiles, faisons-en une noire et une blanche pour rester simple.

-Créez un MovieClip (ctrl+F, nommez-le "tuile".

-Sur la première image, faites un carré blanc avec un cerné noir, 16x16 ( largeur x hauteur), mettez ses coordonnées à x=0 et y=0.

-Sur la seconde image, faites une copie du premier et remplissez-la de noir.
Nous voici maintenant avec deux simples tuiles. Mais continuons...
Maintenant, il nous faut créer une carte. Le mieux, c'est d'utiliser une tableau multidimensionnel
ne vous en faites pas, c'est plus facile que ça en a l'air. Ca peut ressembler à quelque chose comme ça:


ActionScript:

Code :

   

maCarte = [ [1,1,1,1,1,1,1,1],

[1,0,0,0,0,0,0,1],

[1,0,1,0,0,0,0,1],

[1,0,0,0,0,1,0,1],

[1,0,0,0,0,0,0,1],

[1,1,1,1,1,1,1,1] ];










Voyons un peu ce que ça veut dire: la variable "maCarte" est un tableau qui contient 6 éléments qui sont eux aussi des tableaux.
Nous obtenons un tableau à deux dimensions.

Et qu'est-ce que ça apporte? Eh bien, la voilà notre carte, enfin, disons que ça sera notre carte au final.
- Les 1 seront les tuiles noires et les 0 les blanches. Mais il faut faire une fonction pour dessiner notre petite carte.
D'abord retournons dans le MovieClip "tuile" que nous venons de faire:
ouvrez la bibliothèque (ctrl+L),

-Faites un clic droit sur le symbole "tuile", choisissez "liaison" , cochez le choix "exportez pour ActionScript" et
écrivez "tuile" comme identifiant.

- Maintenant ouvrez le panneau d'action de la première image de la scène principale.
Mettez le tableau "maCarte" dessus.
Voici le moment de créer la fonction qui va dessiner la carte:
(On regarde le truc dans son ensemble d'abord et ensuite on l'étudiera point par point):


ActionScript:

Code :



// -------On empêche l'animation de se redimensionner...----------

fscommand ( "allowscale", false );

//------- on définit les constantes de largeur et hauteur de tuile-----------

tuileL = 16;

tuileH = 16;

//----------- notre carte-tableau----------------------

maCarte = [ [1,1,1,1,1,1,1,1],

[1,0,0,0,0,0,0,1],

[1,0,1,0,0,0,0,1],

[1,0,0,0,0,1,0,1],

[1,0,0,0,0,0,0,1],

[1,1,1,1,1,1,1,1] ];

//---------- la fonction dessin-de-carte-------------------

function constructionCarte (carte) {

        var largeurCarte = carte[0].length;

        var hauteurCarte= carte.length;

        for (var i = 0; i < hauteurCarte; ++i) {

                for (var j = 0; j< largeurCarte ; ++j) {

                        this.attachMovie("tuile", "t_"+i+"_"+j, ++d);

                        this["t_"+i+"_"+j]._x = (j*tuileL);

                        this["t_"+i+"_"+j]._y = (i*tuileH);

                        this["t_"+i+"_"+j].gotoAndStop(carte[i][j]+1);

                }

        }

}

//------on appelle la fonction dessin-de-carte avec maCarte comme paramètre --------

constructionCarte (maCarte);











Essayez et voyez si ça marche, si ça ne marche pas, relisez soigneusement ce qui précède
et assurez-vous que vous avez bien tout suivi ou si vous êtes feignant téléchargez le fla

Voilà à quoi ressemble le mien:


Bon, maintenant entrons dans le code:
Nous avons commencé par déclarer des constantes:
ActionScript:

Code :



tuileL = 16;

tuileH = 16;





 





Celles-ci sont simplement la largeur et la hauteur de nos tuiles, nous les utiliserons plus tard
dans la fonction dessin-de-carte pour donner à chaque tuile les positions correctes en x et en y.
Puis, nous avons la fonction:
ActionScript:

function constructionCarte (carte) {





Nous transmettons un paramètre, qui est la carte que nous voulons dessiner, dans ce cas
ce sera le paramètre "maCarte".
Ensuite nous déclarons 2 variables:
ActionScript:

Code :

 

var largeurCarte = carte[0].length;

var hauteurCarte= carte.length










Ici, nous mesurons la largeur et la hauteur de la carte en tuiles:

-La première variable, carte[0].length, vérifie la longueur du premier élément du tableau-carte,
ou la longueur du premier tableau du grand tableau, si vous préférez.


ActionScript:

Code :



maCarte = [ ->;[1,1,1,1,1,1,1,1],<-Celui -ci

[1,0,0,0,0,0,0,1],

[1,0,1,0,0,0,0,1],

[1,0,0,0,0,1,0,1],

[1,0,0,0,0,0,0,1],

[1,1,1,1,1,1,1,1] ];





 






la valeur renvoyée sera 8.

-La deuxième variable, carte.length, vérifie la longueur du grand tableau:


ActionScript:

Code :



maCarte = de là->[ [1,1,1,1,1,1,1,1],

[1,0,0,0,0,0,0,1],

[1,0,1,0,0,0,0,1],

[1,0,0,0,0,1,0,1],

[1,0,0,0,0,0,0,1],

[1,1,1,1,1,1,1,1] ]<-à là;





 






Ca renvoie 6.

Donc maintenant on sait qu'on a affaire à une carte de 8 x 6.
Après ça, nous avons deux boucles:
la première est la boucle de la hauteur et la seconde celle de la largeur.


ActionScript:

Code :



for (var i = 0; i < hauteurCarte; ++i) {

        for (var j = 0; j< largeurCarte ; ++j) {

                this.attachMovie("tuile", "t_"+i+"_"+j, ++d);

                this["t_"+i+"_"+j]._x = (j*tuileL);

                this["t_"+i+"_"+j]._y = (i*tuileH);

                this["t_"+i+"_"+j].gotoAndStop(carte[i][j]+1);

        }

}





 






Voilà ce qui se passe: à la première boucle-hauteur, i est égale à 0 (ce qui suit concerne donc la première ligne de
maCarte, rappelons que le premier élément d'un tableau est 0), ensuite vient la boucle-largeur où j bouclera de
0 à 1 de moins que largeurCarte (qui compte 8 éléments), c'est à dire 7.

A chaque boucle-largeur, nous "attacherons" un clip "tuile":


ActionScript:

Code :



this.attachMovie("tuile", "t_"+i+"_"+j, ++d);





 







Nous lui donnons un nom unique et une profondeur unique.
Ensuite nous positionnons cette tuile selon l'endroit des boucles-hauteur et largeur où nous sommes,
nous nous servons aussi des constantes tuileL et tuileH pour le calculer :


ActionScript:

Code :



this["t_"+i+"_"+j]._x = (j*tuileL);

this["t_"+i+"_"+j]._y = (i*tuileH);





 



Puis nous nous assurons que la tuile est correctement dessinée, rappelez-vous, 1 doit être la noire et 0 la blanche.
En vérifiant la "carte[i][j]", nous savons où nous en sommes dans la carte-tableau.
Par exemple si i est égal à 2 et j est égal à 5, nous serons ici :


ActionScript:

Code :



maCarte = [ [1,1,1,1,1,1,1,1],

[1,0,0,0,0,0,0,1],

[1,0,1,0,0,->0<-,0,1],

[1,0,0,0,0,1,0,1],

[1,0,0,0,0,0,0,1],

[1,1,1,1,1,1,1,1] ];










Rappelez-vous que dans un tableau, 0 est toujours le premier élément, 1 est le second et ainsi de suite.
Donc:


ActionScript:

Code :



this["t_"+i+"_"+j].gotoAndStop(carte[i][j]+1);










fait aller la tuile à la première image (blanche) si c'est un 0 dans la carte-tableau et à la seconde image si c'est un 1.



édité par sff le 27/04/2006 à 11:28:16
-------------------------------------------------------
Version actuelle : 1.2b
Site officiel : http://www.rpgillusion.net

pheonix
Membre

Messages : 332
Remonter

RE:Map flash par Tchang

Posté par pheonix, le 26/04/2006 à 22:24:30

sa serait bien avoir une idée du logiciel a utiliser


-------------------------------------------------------


ggdj3000
Membre

Messages : 436
Remonter

RE:Map flash par Tchang

Posté par ggdj3000, le 27/04/2006 à 06:30:37

regarde le titre abruti XD

Code :

 Map flash par Tchang





-------------------------------------------------------

Tchang
Membre

Messages : 260
Remonter

RE:Map flash par Tchang

Posté par Tchang, le 27/04/2006 à 17:24:45

Je précise que ce n'est pas de moi c'est un tutorial que j'ai trouvé sur le net ^^

Je vais mettre le reste de ceux que j'ai trouvé si ca vous interesse et un screen de ce que j'ai réussi a faire avec ^^

(Ca ne marche toujours pas mais ca avance ^^')


-------------------------------------------------------
La vie est un jeu, alors vous prenez pas la tête et jouez lol

Tchang
Membre

Messages : 260
Remonter

RE:Map flash par Tchang

Posté par Tchang, le 27/04/2006 à 18:05:09

Voila ce que j'ai pu faire grace à ce tutorial (je répète que je n'arrive pas encore à le faire fonctionner avec RPGIll car je n'arrive pas à récupérer les variables lol

http://img181.imageshack.us/img181/6180/screen15vo.jpg

édité par Tchang le 27/04/2006 à 18:08:33
-------------------------------------------------------
La vie est un jeu, alors vous prenez pas la tête et jouez lol

--Squall
Administrateur

Messages : 1198
Remonter

RE:Map flash par Tchang

Posté par sff, le 27/04/2006 à 19:20:54

Ca à l'air pas mal. Au moin ce sera fluide au niveau des déplacements si tu intègre les boutons de directions sur la map.


-------------------------------------------------------
Version actuelle : 1.2b
Site officiel : http://www.rpgillusion.net

--Squall
Administrateur

Messages : 1198
Remonter

RE:Map flash par Tchang

Posté par sff, le 27/04/2006 à 19:21:30

Ca à l'air pas mal. Au moin ce sera fluide au niveau des déplacements si tu intègre les boutons de directions sur la map.


-------------------------------------------------------
Version actuelle : 1.2b
Site officiel : http://www.rpgillusion.net

Caly
Membre

Messages : 136
Remonter

RE:Map flash par Tchang

Posté par Caly, le 27/04/2006 à 21:29:12

Waw je suis épaté c'est réelement bien fait ! enfin bon si tu réussit ce serai cool de placer le fichier .fla sur le forum mdrrr je plaisante ! Ces temps ci j'ai beaucoup d'examen mais j'essaierai ce tuto ce week end.


-------------------------------------------------------
http://shonenland.prog.fr

Tchang
Membre

Messages : 260
Remonter

RE:Map flash par Tchang

Posté par Tchang, le 28/04/2006 à 15:14:18

Sff t'as pas une idée sur comment je peux récupérer les variables de la BDD pour les réutiliser?

J'essai avec un LoadVars ou LoadVariables (comme dans ton exemple dans ton tuto) mais je ne les récupère pas lol




-------------------------------------------------------
La vie est un jeu, alors vous prenez pas la tête et jouez lol

--Squall
Administrateur

Messages : 1198
Remonter

RE:Map flash par Tchang

Posté par sff, le 28/04/2006 à 18:54:42

Je suis loin d'être un pro en flash, mais pour récupérer les variables je n'ai trouvé que la solution de mon tuto.


-------------------------------------------------------
Version actuelle : 1.2b
Site officiel : http://www.rpgillusion.net


 Page n° 1 / 5 > >>


   



Messages Anciens messages Nouveaux messages Nouveaux messages


® RPGillusion.net - Tous droits réservés - 2005-2008. Reproduction interdite par les droits d\'auteurs.