As3 - simulation de grille d'édition

Soyez le premier à donner votre avis sur cette source.

Vue 5 664 fois - Téléchargée 359 fois

Description

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 / Exemple :


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 ...

Codes Sources

A voir également

Ajouter un commentaire

Commentaires

aerolyte
Messages postés
468
Date d'inscription
mardi 17 avril 2007
Statut
Membre
Dernière intervention
4 mai 2013
1 -
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
pegase31
Messages postés
6161
Date d'inscription
dimanche 21 décembre 2003
Statut
Modérateur
Dernière intervention
4 septembre 2013
6 -
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'
aerolyte
Messages postés
468
Date d'inscription
mardi 17 avril 2007
Statut
Membre
Dernière intervention
4 mai 2013
1 -
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!!!!
pegase31
Messages postés
6161
Date d'inscription
dimanche 21 décembre 2003
Statut
Modérateur
Dernière intervention
4 septembre 2013
6 -
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'
aerolyte
Messages postés
468
Date d'inscription
mardi 17 avril 2007
Statut
Membre
Dernière intervention
4 mai 2013
1 -
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

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.