Sujets sur : bitmapdata

Cours ActionScript 3 ‘bitmapdata’

Appliquer le modèle évènementiel d’ActionScript 3 dans vos applications en 3 étapes

Commentaires fermés sur Appliquer le modèle évènementiel d’ActionScript 3 dans vos applications en 3 étapes

Ecrit le 8 février par Matthieu
Publié dans le(s) sujet(s) ActionScript 3

La série des cours ActionScript Facile continue suite à vos nombreuses questions !

L’ActionScript 3 est un langage de POO : Programmation Orientée Objet. De plus, il intègre un système évènementiel avancé permettant de déclencher différentes actions.

Ce nouveau tutoriel ActionScript vous apprend à tirer parti du Modèle de Conception Observateur. Et surtout à l’implémenter, dès maintenant dans vos applications flash.

Voici ce que vous allez mettre en pratique suite à cette formation Flash :

Comment fonctionne le système évènementiel d’ActionScript 3.
Comment un exemple de la vie de tous les jours illustre la mise en oeuvre du Modèle de Conception Observateur.
L’astuce pour utiliser les images de la bibliothèque d’Adobe Flash directement à partir du code ActionScript (via BitmapData).
La technique pour utiliser la notion d’évènement dans une application Adobe Flash.
Un exemple pratique sur l‘implémentation des évènements dans vos applications flash.

Avec ce tutoriel flash, vous utilisez la puissance des évènements pour lancer des actions dans vos applications flash.

Le Modèle de Conception Observateur

Version démonstration

Voici la version de l’application « Contrôle Animation ».

https://e6msyji6epr.exactdn.com/wp-content/uploads/2013/02/events.swf

1	http://e6msyji6epr.exactdn.com/wp-content/uploads/2013/02/events.swf

Télécharger le code source Observateur

Vous trouvez ci-dessous le code source complet pour utiliser les évènements dans vos applications flash.

Ce code source est accompagné du fichier fla avec l’ensemble des composants du Framework AS3 Facile.

Télécharger “Modèle de Conception Events” pattern-events.zip – Téléchargé 745 fois – 501,50 Ko

Comment implémentez vous le modèle de conception Observateur dans vos applications ?

Est ce que vous utilisez un Framework (AS3 Signals, Vegas, Pixlib, PureMVC), votre propre Framework ?

Partagez votre code, vos retours d’expériences dans les commentaires ci-dessous.

HitTest BitmapData : Détection précise des collisions

Commentaires fermés sur HitTest BitmapData : Détection précise des collisions

Ecrit le 19 avril par Matthieu
Publié dans le(s) sujet(s) ActionScript 3

Le cours AS3 de cette semaine vous propose d’améliorer la détection des collisions par défaut de Flash.

A savoir : le fameux HitTest !

2 Experts ActionScript proposent des classes de détections des collisions beaucoup plus précises et performantes.

La détection des collisions utilise des objets BitmapData.

Voici ce que vous allez apprendre dans ce Cours ActionScript :

Une méthode simple de détection des collisions.
Une méthode encore plus précise de détections des collisions.
Les inconvénients et les avantages des 2 méthodes.
Le chargement dynamiques de 2 images pour effectuer des tests de collisions.

Cette formation AS3 vous permettra d’utiliser une méthode de détection des collisions beaucoup plus précises et efficace dans vos jeux flash.

Détection des collisions

Version démonstration

Détection des collisions simple

Déplacez le robot pour tester la méthode de détection des collisions simple.

https://e6msyji6epr.exactdn.com/wp-content/uploads/2012/04/collisionsSimple.swf

1	http://e6msyji6epr.exactdn.com/wp-content/uploads/2012/04/collisionsSimple.swf

[codesyntax lang= »actionscript3″ title= »HitTestSimple www.mikechambers.com » bookmarkname= »HitTestSimple www.mikechambers.com »]

/**
 * 1ère méthode pour tester une collision.
 * http://www.mikechambers.com/blog/2009/06/24/using-bitmapdata-hittest-for-collision-detection/
 *
 */
private function HitTestSimple() : void
{
	var androidRect:Rectangle = oLoaderAndroid.getBounds(this);
	var androidOffset:Matrix = oLoaderAndroid.transform.matrix;
	androidOffset.tx = oLoaderAndroid.x - androidRect.x;
	androidOffset.ty = oLoaderAndroid.y - androidRect.y;	

	var oLoaderAndroidBmpData:BitmapData = new BitmapData(androidRect.width, androidRect.height, true, 0);
	oLoaderAndroidBmpData.draw(oLoaderAndroid, androidOffset);		

	var robotRect:Rectangle = oLoaderRobot.getBounds(this);
	var oLoaderRobotBmpData:BitmapData = new BitmapData(robotRect.width, robotRect.height, true, 0);

	var robotOffset:Matrix = oLoaderRobot.transform.matrix;
	robotOffset.tx = oLoaderRobot.x - robotRect.x;
	robotOffset.ty = oLoaderRobot.y - robotRect.y;	

	oLoaderRobotBmpData.draw(oLoaderRobot, robotOffset);	

	var rLoc:Point = new Point(robotRect.x, robotRect.y);
	var bLoc:Point = new Point(androidRect.x, androidRect.y);

	// il y a collision entre les 2 Display Object
	if (oLoaderRobotBmpData.hitTest(rLoc, 255, oLoaderAndroidBmpData, bLoc, 255))
		oLoaderAndroid.filters = [new GlowFilter()];
	else
		oLoaderAndroid.filters = [];

	// libère les ressources mémoires
	oLoaderAndroidBmpData.dispose();
	oLoaderRobotBmpData.dispose();
}

/**

* 1ère méthode pour tester une collision.

* http://www.mikechambers.com/blog/2009/06/24/using-bitmapdata-hittest-for-collision-detection/

private function HitTestSimple() : void

{

var androidRect:Rectangle = oLoaderAndroid.getBounds(this);

var androidOffset:Matrix = oLoaderAndroid.transform.matrix;

androidOffset.tx = oLoaderAndroid.x - androidRect.x;

androidOffset.ty = oLoaderAndroid.y - androidRect.y;

var oLoaderAndroidBmpData:BitmapData = new BitmapData(androidRect.width, androidRect.height, true, 0);

oLoaderAndroidBmpData.draw(oLoaderAndroid, androidOffset);

var robotRect:Rectangle = oLoaderRobot.getBounds(this);

var oLoaderRobotBmpData:BitmapData = new BitmapData(robotRect.width, robotRect.height, true, 0);

var robotOffset:Matrix = oLoaderRobot.transform.matrix;

robotOffset.tx = oLoaderRobot.x - robotRect.x;

robotOffset.ty = oLoaderRobot.y - robotRect.y;

oLoaderRobotBmpData.draw(oLoaderRobot, robotOffset);

var rLoc:Point = new Point(robotRect.x, robotRect.y);

var bLoc:Point = new Point(androidRect.x, androidRect.y);

// il y a collision entre les 2 Display Object

if (oLoaderRobotBmpData.hitTest(rLoc, 255, oLoaderAndroidBmpData, bLoc, 255))

oLoaderAndroid.filters = [new GlowFilter()];

else

oLoaderAndroid.filters = [];

// libère les ressources mémoires

oLoaderAndroidBmpData.dispose();

oLoaderRobotBmpData.dispose();

}

[/codesyntax]

Détection des collisions précise

Déplacez le robot pour tester la méthode de détection des collisions beaucoup plus précise.

https://e6msyji6epr.exactdn.com/wp-content/uploads/2012/04/collisionsBest.swf

1	http://e6msyji6epr.exactdn.com/wp-content/uploads/2012/04/collisionsBest.swf

[codesyntax lang= »actionscript3″ title= »Collision www.tink.ws » bookmarkname= »Collision www.tink.ws »]

package com.utils
{
	import flash.display.BlendMode;
	import flash.geom.ColorTransform;
	import flash.geom.Matrix;
	import flash.geom.Point;
	import flash.display.BitmapData;
	import flash.geom.Rectangle;
	import flash.display.DisplayObject;

	/**
	 * @author
	 * @url : http://www.tink.ws/blog/as-30-hittest/
	 *
	 *
	 */
	public class Collision
	{
		public static function complexHitTestObject( target1:DisplayObject, target2:DisplayObject,  accurracy:Number = 1 ):Boolean
		{
			return complexIntersectionRectangle( target1, target2, accurracy ).width != 0;
		}

		public static function intersectionRectangle( target1:DisplayObject, target2:DisplayObject ):Rectangle
		{
			// If either of the items don't have a reference to stage, then they are not in a display list
			// or if a simple hitTestObject is false, they cannot be intersecting.
			if( !target1.root || !target2.root || !target1.hitTestObject( target2 ) ) return new Rectangle();

			// Get the bounds of each DisplayObject.
			var bounds1:Rectangle = target1.getBounds( target1.root );
			var bounds2:Rectangle = target2.getBounds( target2.root );

			// Determine test area boundaries.
			var intersection:Rectangle = new Rectangle();
			intersection.x 		= Math.max( bounds1.x, bounds2.x );
			intersection.y		= Math.max( bounds1.y, bounds2.y );
			intersection.width 	= Math.min( ( bounds1.x + bounds1.width ) - intersection.x, ( bounds2.x + bounds2.width ) - intersection.x );
			intersection.height = Math.min( ( bounds1.y + bounds1.height ) - intersection.y, ( bounds2.y + bounds2.height ) - intersection.y );

			return intersection;
		}

		public static function complexIntersectionRectangle( target1:DisplayObject, target2:DisplayObject, accurracy:Number = 1 ):Rectangle
		{
			if( accurracy &lt;= 0 ) throw new Error( "ArgumentError: Error #5001: Invalid value for accurracy", 5001 );

			// If a simple hitTestObject is false, they cannot be intersecting.
			if( !target1.hitTestObject( target2 ) ) return new Rectangle();

			var hitRectangle:Rectangle = intersectionRectangle( target1, target2 );
			// If their boundaries are no interesecting, they cannot be intersecting.
			if( hitRectangle.width * accurracy &lt; 1 || hitRectangle.height * accurracy &lt; 1 ) return new Rectangle();

			var bitmapData:BitmapData = new BitmapData( hitRectangle.width * accurracy, hitRectangle.height * accurracy, false, 0x000000 );	

			// Draw the first target.
			bitmapData.draw( target1, Collision.getDrawMatrix( target1, hitRectangle, accurracy ), new ColorTransform( 1, 1, 1, 1, 255, -255, -255, 255 ) );
			// Overlay the second target.
			bitmapData.draw( target2, Collision.getDrawMatrix( target2, hitRectangle, accurracy ), new ColorTransform( 1, 1, 1, 1, 255, 255, 255, 255 ), BlendMode.DIFFERENCE );

			// Find the intersection.
			var intersection:Rectangle = bitmapData.getColorBoundsRect( 0xFFFFFFFF,0xFF00FFFF );

			bitmapData.dispose();

			// Alter width and positions to compensate for accurracy
			if( accurracy != 1 )
			{
				intersection.x /= accurracy;
				intersection.y /= accurracy;
				intersection.width /= accurracy;
				intersection.height /= accurracy;
			}

			intersection.x += hitRectangle.x;
			intersection.y += hitRectangle.y;

			return intersection;
		}

		protected static function getDrawMatrix( target:DisplayObject, hitRectangle:Rectangle, accurracy:Number ):Matrix
		{
			var localToGlobal:Point;
			var matrix:Matrix;

			var rootConcatenatedMatrix:Matrix = target.root.transform.concatenatedMatrix;

			localToGlobal = target.localToGlobal( new Point( ) );
			matrix = target.transform.concatenatedMatrix;
			matrix.tx = localToGlobal.x - hitRectangle.x;
			matrix.ty = localToGlobal.y - hitRectangle.y;

			matrix.a = matrix.a / rootConcatenatedMatrix.a;
			matrix.d = matrix.d / rootConcatenatedMatrix.d;
			if( accurracy != 1 ) matrix.scale( accurracy, accurracy );

			return matrix;
		}
	}
}

100

101

package com.utils

{

import flash.display.BlendMode;

import flash.geom.ColorTransform;

import flash.geom.Matrix;

import flash.geom.Point;

import flash.display.BitmapData;

import flash.geom.Rectangle;

import flash.display.DisplayObject;

/**

* @author

* @url : http://www.tink.ws/blog/as-30-hittest/

public class Collision

{

public static function complexHitTestObject( target1:DisplayObject, target2:DisplayObject, accurracy:Number = 1 ):Boolean

{

return complexIntersectionRectangle( target1, target2, accurracy ).width != 0;

}

public static function intersectionRectangle( target1:DisplayObject, target2:DisplayObject ):Rectangle

{

// If either of the items don't have a reference to stage, then they are not in a display list

// or if a simple hitTestObject is false, they cannot be intersecting.

if( !target1.root || !target2.root || !target1.hitTestObject( target2 ) ) return new Rectangle();

// Get the bounds of each DisplayObject.

var bounds1:Rectangle = target1.getBounds( target1.root );

var bounds2:Rectangle = target2.getBounds( target2.root );

// Determine test area boundaries.

var intersection:Rectangle = new Rectangle();

intersection.x = Math.max( bounds1.x, bounds2.x );

intersection.y = Math.max( bounds1.y, bounds2.y );

intersection.width = Math.min( ( bounds1.x + bounds1.width ) - intersection.x, ( bounds2.x + bounds2.width ) - intersection.x );

intersection.height = Math.min( ( bounds1.y + bounds1.height ) - intersection.y, ( bounds2.y + bounds2.height ) - intersection.y );

return intersection;

}

public static function complexIntersectionRectangle( target1:DisplayObject, target2:DisplayObject, accurracy:Number = 1 ):Rectangle

{

if( accurracy <= 0 ) throw new Error( "ArgumentError: Error #5001: Invalid value for accurracy", 5001 );

// If a simple hitTestObject is false, they cannot be intersecting.

if( !target1.hitTestObject( target2 ) ) return new Rectangle();

var hitRectangle:Rectangle = intersectionRectangle( target1, target2 );

// If their boundaries are no interesecting, they cannot be intersecting.

if( hitRectangle.width * accurracy < 1 || hitRectangle.height * accurracy < 1 ) return new Rectangle();

var bitmapData:BitmapData = new BitmapData( hitRectangle.width * accurracy, hitRectangle.height * accurracy, false, 0x000000 );

// Draw the first target.

bitmapData.draw( target1, Collision.getDrawMatrix( target1, hitRectangle, accurracy ), new ColorTransform( 1, 1, 1, 1, 255, -255, -255, 255 ) );

// Overlay the second target.

bitmapData.draw( target2, Collision.getDrawMatrix( target2, hitRectangle, accurracy ), new ColorTransform( 1, 1, 1, 1, 255, 255, 255, 255 ), BlendMode.DIFFERENCE );

// Find the intersection.

var intersection:Rectangle = bitmapData.getColorBoundsRect( 0xFFFFFFFF,0xFF00FFFF );

bitmapData.dispose();

// Alter width and positions to compensate for accurracy

if( accurracy != 1 )

{

intersection.x /= accurracy;

intersection.y /= accurracy;

intersection.width /= accurracy;

intersection.height /= accurracy;

}

intersection.x += hitRectangle.x;

intersection.y += hitRectangle.y;

return intersection;

}

protected static function getDrawMatrix( target:DisplayObject, hitRectangle:Rectangle, accurracy:Number ):Matrix

{

var localToGlobal:Point;

var matrix:Matrix;

var rootConcatenatedMatrix:Matrix = target.root.transform.concatenatedMatrix;

localToGlobal = target.localToGlobal( new Point( ) );

matrix = target.transform.concatenatedMatrix;

matrix.tx = localToGlobal.x - hitRectangle.x;

matrix.ty = localToGlobal.y - hitRectangle.y;

matrix.a = matrix.a / rootConcatenatedMatrix.a;

matrix.d = matrix.d / rootConcatenatedMatrix.d;

if( accurracy != 1 ) matrix.scale( accurracy, accurracy );

return matrix;

}

[/codesyntax]

Télécharger le code source complet

Télécharger “Détection des collisions” ex-detection-collisions.zip – Téléchargé 668 fois – 136,90 Ko

Consultez la méthode de détection des collisions simple sur le site de Mike Chambers.

Consultez la méthode de détection des collisions plus précise sur le site Tink.

Et vous, utilisez-vous d’autres techniques pour détecter les collisions ?

Il existe d’autres techniques pour détecter les collisions. Notamment avec des tests sur la position, hauteur, largeur de 2 movieclip.

C’est la solution souvent utilisé dans les jeux flash avec un moteur de tile.

Partagez vos techniques dans les commentaires ci-dessous !

Votre Formation vidéo

Des exemples SWF

Votre Suivi personnalisé

Sujets sur : bitmapdata

Cours ActionScript 3 ‘bitmapdata’

Appliquer le modèle évènementiel d’ActionScript 3 dans vos applications en 3 étapes

Le Modèle de Conception Observateur

Version démonstration

Télécharger le code source Observateur

Comment implémentez vous le modèle de conception Observateur dans vos applications ?

HitTest BitmapData : Détection précise des collisions

Détection des collisions

Version démonstration

Détection des collisions simple

Détection des collisions précise

Télécharger le code source complet

Et vous, utilisez-vous d’autres techniques pour détecter les collisions ?

Cours Récents

Liens / Partenaires