begin process at 2012 05 26 03:33:54
  Trouver un code source :
 
dans
 
Accueil > 

Code

 > 

Astuces

 > AS3 - SIMULATION DE GRILLE D'ÉDITION

AS3 - SIMULATION DE GRILLE D'ÉDITION


 Information sur la source

Note :
Aucune note
Catégorie :Astuces Classé sous :AS3, Astuce, Grille, Editeur, Jeu Niveau :Débutant Date de création :30/07/2011 Date de mise à jour :31/07/2011 18:43:50 Vu / téléchargé :3 145 / 107

Auteur : pegase31

Ecrire un message privé
Site perso
Commentaire sur cette source (11)
Ajouter un commentaire et/ou une note

 Description

Cliquez pour voir la capture en taille normale
Ce bout de code permet de simuler une grille sur l'écran pour tout mode d'édition.

Dans le cas où nous aurions besoin de créer une grille de 256x128 avec interaction, beaucoup utiliseraient autant d'éléments carrés pour saisir l'interaction au clic. ce qui nous ferait nu total de 32768 éléments à l'écran. Je doute que flash apprécie.

La méthode proposée est une astuce pour simuler visuellement et logiquement ces éléments sur une zone définie.

Peg'

ps: La source est au format CS3, mais pour une obscure raison il a été impossible à CS5 d'enregistrer la source autrement qu'en CS4. Le code est cependant utilisable par un copier/coller dans une nouvelle animation.

Source

  • import flash.display.*;
  • import flash.events.*;
  • import flash.geom.*;
  • /*-------------------------------------------------------------------------------*/
  • /*-- Code permettant de simuler une grille d'édition avec gestion de la souris --*/
  • /*-- Sans avoir besoin de créer une grille d'éléments réactifs à la souris --*/
  • /*-------------------------------------------------------------------------------*/
  • /*-- Variables de base --*/
  • //zone définis la zone active de la grille sur l'écran (en pixels)
  • var zone:Rectangle = new Rectangle (19, 24, 512, 320);
  • //bloc définis la taille de chaque case (en pixels)
  • var bloc:Object = {width:16, height:16};
  • //cursor est un graph de la taille d'un bloc, servant à indiquer la grille visée par la souris
  • var cursor:Shape = new Shape();
  • //draw est la couleur de dessin lors du clic
  • var draw:int = 0x0000FF;
  • /*-- Dessin et mise en place des différents éléments --*/
  • //dessin du curseur
  • cursor.graphics.lineStyle(0, 0xFF0000);
  • cursor.graphics.drawRect(0, 0, bloc.width, bloc.height);
  • cursor.visible = false;
  • this.addChild(cursor);
  • //dessin de la zone active
  • this.graphics.beginFill(0, .1);
  • this.graphics.drawRect(zone.x, zone.y, zone.width, zone.height);
  • this.graphics.endFill();
  • /*-- gestion de l'interaction et des évènnements de souris --*/
  • stage.addEventListener(MouseEvent.MOUSE_MOVE, mouseHandler);
  • function mouseHandler(evt:MouseEvent):void {
  • //récupération du point sous le curseur de la souris
  • var pt:Point = new Point (evt.currentTarget.mouseX, evt.currentTarget.mouseY);
  • //Gestion celon l'évènnement
  • switch(evt.type) {
  • //gestion du mouvement de la souris
  • case "mouseMove" :
  • if (zone.contains(pt.x, pt.y)) {
  • //si la souris est dans la zone active
  • stage.addEventListener(MouseEvent.MOUSE_DOWN, mouseHandler);
  • moveCursor(pt); //on déplace le curseur
  • } else {
  • //si la souris est hors de la zone active
  • stage.removeEventListener(MouseEvent.MOUSE_DOWN, mouseHandler);
  • stage.removeEventListener(MouseEvent.MOUSE_UP, mouseHandler);
  • initCursor(); //on réinitialise le curseur
  • }
  • evt.updateAfterEvent(); //permet la fluidité du mouvement, même en bas FPS
  • break;
  • //gestion de l'appuie sur la souris
  • case "mouseDown" :
  • stage.addEventListener(MouseEvent.MOUSE_UP, mouseHandler);
  • //masque le curseur
  • cursor.visible = false;
  • //dessine un carré à l'endroit degigné
  • this.graphics.beginFill(draw, 1);
  • this.graphics.drawRect(cursor.x, cursor.y, bloc.width, bloc.height);
  • this.graphics.endFill();
  • break;
  • //gestion du relaché de souris
  • case "mouseUp" :
  • stage.removeEventListener(MouseEvent.MOUSE_UP, mouseHandler);
  • //réaffiche le curseur
  • cursor.visible = true;
  • break;
  • }
  • }
  • /*-- fonctions de gestion du curseur --*/
  • //fonction déplaçant le curseur d'édition si nécessaire
  • function moveCursor(pt:Point):void {
  • //si le curseur n'est pas déjà au même endroit
  • if(cursor.x!=pt.x || cursor.y!=pt.y) {
  • //calcul des coordonnées sur la grille
  • var gridX = Math.floor((pt.x-zone.x)/bloc.width);
  • var gridY = Math.floor((pt.y-zone.y)/bloc.height);
  • //place le curseur à l'endroit désigné
  • cursor.x = (gridX*bloc.width)+zone.x;
  • cursor.y = (gridY*bloc.height)+zone.y;
  • }
  • cursor.visible = true;
  • }
  • //fonction réinitialisant le curseur
  • function initCursor():void {
  • if (cursor.visible) {
  • cursor.visible = false;
  • cursor.x = cursor.y = 0;
  • }
  • }
import flash.display.*;
import flash.events.*;
import flash.geom.*;

/*-------------------------------------------------------------------------------*/
/*-- Code permettant de simuler une grille d'édition avec gestion de la souris --*/
/*--   Sans avoir besoin de créer une grille d'éléments réactifs à la souris   --*/
/*-------------------------------------------------------------------------------*/

/*-- Variables de base --*/

//zone définis la zone active de la grille sur l'écran (en pixels)
var zone:Rectangle = new Rectangle (19, 24, 512, 320);

//bloc définis la taille de chaque case (en pixels)
var bloc:Object = {width:16, height:16};

//cursor est un graph de la taille d'un bloc, servant à indiquer la grille visée par la souris
var cursor:Shape = new Shape();

//draw est la couleur de dessin lors du clic
var draw:int = 0x0000FF;


/*-- Dessin et mise en place des différents éléments --*/

//dessin du curseur
cursor.graphics.lineStyle(0, 0xFF0000);
cursor.graphics.drawRect(0, 0, bloc.width, bloc.height);
cursor.visible = false;
this.addChild(cursor);

//dessin de la zone active
this.graphics.beginFill(0, .1);
this.graphics.drawRect(zone.x, zone.y, zone.width, zone.height);
this.graphics.endFill();


/*-- gestion de l'interaction et des évènnements de souris --*/

stage.addEventListener(MouseEvent.MOUSE_MOVE, mouseHandler);

function mouseHandler(evt:MouseEvent):void {
	//récupération du point sous le curseur de la souris
	var pt:Point = new Point (evt.currentTarget.mouseX, evt.currentTarget.mouseY);
	//Gestion celon l'évènnement
	switch(evt.type) {
		//gestion du mouvement de la souris
		case "mouseMove" :
			if (zone.contains(pt.x, pt.y)) {
				//si la souris est dans la zone active
				stage.addEventListener(MouseEvent.MOUSE_DOWN, mouseHandler);
				moveCursor(pt); //on déplace le curseur
			} else {
				//si la souris est hors de la zone active
				stage.removeEventListener(MouseEvent.MOUSE_DOWN, mouseHandler);
				stage.removeEventListener(MouseEvent.MOUSE_UP, mouseHandler);
				initCursor(); //on réinitialise le curseur
			}
			evt.updateAfterEvent(); //permet la fluidité du mouvement, même en bas FPS
			break;
		//gestion de l'appuie sur la souris
		case "mouseDown" :
			stage.addEventListener(MouseEvent.MOUSE_UP, mouseHandler);
			//masque le curseur
			cursor.visible = false;
			//dessine un carré à l'endroit degigné
			this.graphics.beginFill(draw, 1);
			this.graphics.drawRect(cursor.x, cursor.y, bloc.width, bloc.height);
			this.graphics.endFill();
			break;
		//gestion du relaché de souris
		case "mouseUp" :
			stage.removeEventListener(MouseEvent.MOUSE_UP, mouseHandler);
			//réaffiche le curseur
			cursor.visible = true;
			break;
	}
}


/*-- fonctions de gestion du curseur --*/

//fonction déplaçant le curseur d'édition si nécessaire
function moveCursor(pt:Point):void {
	//si le curseur n'est pas déjà au même endroit
	if(cursor.x!=pt.x || cursor.y!=pt.y) {
		//calcul des coordonnées sur la grille
		var gridX = Math.floor((pt.x-zone.x)/bloc.width);
		var gridY = Math.floor((pt.y-zone.y)/bloc.height);
		//place le curseur à l'endroit désigné
		cursor.x = (gridX*bloc.width)+zone.x;
		cursor.y = (gridY*bloc.height)+zone.y;
	}
	cursor.visible = true;
}

//fonction réinitialisant le curseur
function initCursor():void {
	if (cursor.visible) {
		cursor.visible = false;
		cursor.x = cursor.y = 0;
	}
}


 Conclusion

Le code étant commenté, il ne devrait pas y avoir de soucis, mais je reste ouvert à toutes questions.

Mais je tiens à préciser que ce code à été créé spécialement pour FlashKod et donc qu'il est simplifié et accessible aux initiés/débutants-confirmés dans un but pédagogique et d'apprentissage.

Il ne retrace que la méthode et n'est donc pas utilisable "tel quel" pour un véritable éditeur.

Vous êtes au courant ...

 Fichier Zip

Les Membres Club peuvent télécharger directement un fichier contenu dans le zip sans télécharger le zip en entier !

Télécharger le zip


 Historique

30 juillet 2011 13:46:02 :
corrections de texte ...

 Sources du même auteur

Source avec Zip Source avec une capture AS3 - PRINCIPE ET APPLICATION DE FONCTION RÉCURSIVE
Source avec Zip Source avec une capture AS3 - JEU DU TAQUIN
Source avec Zip DECODEUR/ENCODEUR DE PLAYLIST AU FORMAT PLS/M3U
Source avec Zip Source avec une capture BOUTON DE VOLUME
Source avec Zip Source avec une capture SNOW FLAKES AS3 (CS4)

 Sources de la même categorie

TRANSFERT DE DONNÉES FLASH <-> PHP - PETITE SUBTILITÉ AVEC J... par Loubiou
Source avec Zip LECTURE DE TEXTE "VOICE" par yasdar
Source avec Zip Source avec une capture AS3 - PRINCIPE ET APPLICATION DE FONCTION RÉCURSIVE par pegase31
Source avec Zip Source avec une capture UN PACKAGE "HISTORIC" POUR GÉRER VOS COMMANDES par top30
Source avec Zip CONSTANTE D'OBJET INMODIAFIABLE ET DÉBLOQUABLE par top30

 Sources en rapport avec celle ci

Source avec Zip Source avec une capture AS3 - PRINCIPE ET APPLICATION DE FONCTION RÉCURSIVE par pegase31
Source avec Zip Source avec une capture AS3 - JEU DU TAQUIN par pegase31
Source avec Zip Source avec une capture ERYSOKOBAN V1.02 CS4 AS3 par VBtoTRASH
Source avec Zip Source avec une capture JEU AVEC UN LABYRINTHE ALÉATOIRE par plaf_falp
Source avec Zip MAPEDITOR POUR BLACKWIZZARD'S LEMMINGS par BlackWizzard

Commentaires et avis

Commentaire de aerolyte le 30/07/2011 23:21:44

Bonjour pégase, je n'ai pas encore poussé très loin le décortiquage de ton code, toutefois, je suis dubitatif quand à ton astuce.

En effet le faite de grossir un bloc à 16 pixels de coté, me semble un poil léger,
car tu n'as pas du tout 32768 éléments à afficher mais uniquement 640 (32*20).
Du coup je ne saisie plus la finalité, Peut-etre que je me trompe?

Pour ma part j'aurais aimé voir un bout de code avec un réel plus, par exemple une optimisation du dessin par exemple si tu clic sur une cellule vide a coté d'une autre, au lieu de rajouter un shape, tu aggrandis celle a coté.

D'autre part, il semblerait (je n'ai pas encore testé), que tu ne controle pas si ta zone cliqué contient deja une shape.
C'est pas dramatique, mais ca limite quelque peu les possibilités


Cordialement

Commentaire de pegase31 le 30/07/2011 23:33:20 administrateur CS

Le but de cette source est de montrer qu'il n'est pas nécessaire de créer une grille de boutons pour obtenir une interaction "en grille".
Le nombre de cases donnés est très facilement modifiable en changeant la taille du bloc de base (actuellement 16x16).
L'interaction au clic n'est ici qu'arbitraire, juste pour prouver que l'on a bien l'interaction. Peu importe ce qu'elle fait, ce n'est pas le but premier ...

Mais actuellement, il n'y a pas les 640 éléments d'affiché, juste un Shape de curseur et un écouteur sur la scène. Rien de plus ... Ce qui est le but.

Je montre simplement comment "découper" un espace donné en grille de taille définis, tout en gardant l'interaction et définir les coordonnées réelles de la grille.

Peg'

Commentaire de aerolyte le 30/07/2011 23:51:32

Re,
mouai, mouai, ton code n'est pas  "à proprement parlé" une alternative à une grille de boutons car, tu n'as aucune interaction réelle ou virtuelle avec tes shapes; pb soulevé dans le 1er post,ou tu (re)trace sans vérification sur ta zone.

C'est uniquement le stage qui interagie meme si tu virtualise un tramage sur ce dernier, cela reste un stage avec un Math.floor sur les coordonnées souris.

Je veux pas te sembler rabat-joie, mais c'est pas du grand peg' tout ca!!!!

Commentaire de pegase31 le 31/07/2011 00:02:17 administrateur CS

Non, c'est pas le but non plus, c'est "pédagogique".

Peu importe l'interaction au clic encore une fois, c'est à toi d'adapter selon ton besoin.
C'est un truc pour éviter d'engorger inutilement la mémoire. Beaucoup de gens ne connaissent pas ce truc, j'en vois des tonnes.

Mais je m'en sert comme base pour créer un éditeur de niveau avec un bitmap à reconstituer par bouts de tiles piochés dans un tileSet, tout en stockant les données dans un tableau, enregistré ensuite en données brutes dans un fichier.

La finalité n'est pas de faire un truc "qui tue", mais de donner une petite astuce compréhensible par tous.
Et partager un peu de mon savoir sans couler les moins à l'aise de nous. (Il suffit de voir les sources de Top30 pour s'en convaincre)

Peg'

Commentaire de aerolyte le 31/07/2011 00:23:25

C'est effectivement la finalité que j'avais présumée.
Ceci dit un dernier point, le stage.addeventlistener sur ton mouse move,c'est pas terrible.
Tu vas les accumuler et risquer quelques complictions  pour une insertions dans un script plus vaste ou il faut etre méticuleux sur les ajouts et suppressions d'écouteurs.

Je serais plutot parti sur  un drag drop perso avec accrochage de la forme sur la grille virtuelle pendant le mousemove et lors du click
De cette facon tu as un potentiel ergomique et évolutif, autrement plus conséquent

Cordialement

Commentaire de top30 le 17/08/2011 13:25:12

Je m'absente 5 minutes et j'en prend plein la gueule !!!
Qu'est-ce que j'ai à voir moi, ici ????

Commentaire de pegase31 le 17/08/2011 13:30:25 administrateur CS

Rien, au contraire, c'était un compliment ;)
Je disais simplement que tes sources était d'un niveau tels qu'eles n'étaient pas accessible au commun des mortels.

Peg'

Commentaire de top30 le 17/08/2011 13:34:50

J'ai ai faite des trés con aussi !
Pas loin de celle-ci !AH AH AH Lol...

= )

Commentaire de top30 le 17/08/2011 13:47:15

Aerobite... Le plus ergonomique et évolutif est relatif, tout comme la beauté.
Mais c'eset vrai qu'une une mise en Classe aurait été plus "claire".

Class VirtualGrid( stage:Stage, area:Rectangle, columns:uint, rows:uint );
extends EventDispatcher

Class VirtualGridEvent( type:String, stageX:Number, stageY:Number, $column:uint, $row:uint, cellWidtth:Number, cellHeight:Number ) ;

Ou quelque choise comme ceci afin de capturer juste les click...

var myGrid :Virtualgrid= new VirtualGrid( this.stage, new rectangle(10,10,200,300), 5, 10 );
myGrid,addEventListener( "click" onGridClick );

non ???

Commentaire de pegase31 le 17/08/2011 13:50:31 administrateur CS

je suis évidemment d'accord à 200%, mais vu le nombre de gens qui ne savent même pas faire de classes, j'ai carrément zappé cette partie ...

Peg'

Commentaire de aerolyte le 21/08/2011 02:37:48

top30 MERCI d'éviter la vulgarité

 Ajouter un commentaire


Discussions en rapport avec ce code source dans le forum

Grille de mots cachés, comment faire??? [ par fred_cor ] Salut,J'ai un petit probl&#232;me... Je&nbsp;r&#233;alise une s&#233;rie de jeu en flash pour une expo (en tant que stagiaire)&nbsp;et on m'a confi&#2 Jeu de lettres as3 [ par imtic ] Bonjour à tous, Voilà, je voudrais savoir comment on créer un jeu de lettres qui consiste à assembler des lettres reparties au hasard pour en créer un passage en as3 d'un jeu fash [ par milembar ] Bonjours, serait-il possible que quelqu'un me modifie ce jeu flash pour qu'il puisse fonctonner avec actionscript 3 je n'y arrive pas ;-( merci d'avan Aide jeu plateforme (AS3) [ par guibiz ] Bonjour tout le monde, Pour un projet demandé en cours [sur flash CS4, AS3], j'essaie de faire une jeu 2D avec le personnage Samus du jeu Metroid. Apr Passage d'AS2 à AS3, intéressant ou pas ? [ par Phogre ] Bonjour à tous ! Il y a un an, j'ai eu envie de créer un jeu en flash. Ne trouvant aucun tutoriel pour débutant, j'ai essayé de comprendre des bouts upload une image sur serveur en AS3 [ par fbsoft ] je suis un debutant dans le monde de flash+as3 , je veux uploader un fichier en as3 , tout marche a merveille en localhost mais des que je charge mon Bouton ajouter aux favoris AS3 [ par Hegy ] Salut, C'est quoi le code pour un bouton "ajouter aux favoris" en AS3 svp ? Je trouve en AS2 mais pas en AS3, Merci! @+++ Position d'un clip chargé en AS3 [ par stevefigueras ] Bonjour conaissant un peu le AS2 (mais juste un peu hahaha) je souhaite orienter mon apprentissage vers le AS3 pour certains besoins. J'ai adapté ce Flash As3 bouton qui appel un swf [ par Nemrik ] Bonjour à tous ! Je m'excuse par avance si la question que je vous pose a déja été évoquée mais je n'ai pas trop eu le temps de fouiller à fond dans


Nos sponsors


Sondage...

CalendriCode

Mai 2012
LMMJVSD
 123456
78910111213
14151617181920
21222324252627
28293031   

Consulter la suite du CalendriCode

A découvrir



 
Développement réalisé par Nicolas SOREL (Nix) avec l'aide de : Cyril DURAND et Emmanuel (EBArtSoft), Merci à Vincent pour ses précieux conseils.
CodeS-SourceS.com© Toute reproduction même partielle est interdite sauf accord écrit du Webmaster
CodeS-SourceS.com© est une marque déposée tous droits réservés

Google Coop CodeS-SourceS Google Coop CodeS-SourceS
Temps d'éxécution de la page : 0,718 sec (3)

Nous contacter | Annoncer sur CodeS-SourceS | Mentions légales