<h2>Votre Formation vidéo</h2><br/>
Votre formation est décomposée<br/>
en chapitres très clairs de 20 à 30 min. <h2>Des exemples SWF </h2><br/>
Chaque leçon est accompagnée<br/>
du code source avec le fla et les classes. <h2>Votre Suivi personnalisé</h2><br/>
Vous pouvez  me poser toutes<br/>
vos questions sous les cours vidéos.

Sujets sur : hittest

Cours ActionScript 3 ‘hittest’

Afterburner : jeux Flash avec Pixlib et Starling Framework partie 2

11 questions

Ecrit le 26 avril par Matthieu
Publié dans le(s) sujet(s) Jeux Flash |Pixlib

Et voici la suite du 1er tutoriel flash sur la création d’un jeu flash avec les Framework Pixlib et Starling !

Le thème de ce Cours ActionScript 3 aborde la création d’un jeu flash en utilisant l’API Starling combiner à la puissance du Framework Pixlib 😉

La 2ème partie de ce tutoriel flash est consacré à l’implémentation des différentes fonctionnalités de Starling Framework.

Voici ce que vous allez apprendre dans ce tutoriel flash :

  • Comment mettre en pratique les fonctionnalités principales de Pixlib 3.0.
  • Plusieurs techniques pour optimisation les performance d’un jeu flash avec stage3D via Starling Framework.
  • Une solution détaillée pour une détection précise des collisions avec Starling Framework.
  • Comment mettre en place les différentes vues Starling et utiliser la puissance de stage3D.
  • Les explications pratiques pour la création du défilement du décor, des nuages…
  • La gestion des données avec 3 Modèles différents : chargement des éléments, lecture des sons MP3, le moteur de détection des collisions.
  • La méthode pour utiliser des animations (les vaisseaux ennemis, les explosions, les tirs…) avec Starling.
  • L’utilisation des polices embed “bitmap font” au sein du jeu flash (à partir d’images png) !
  • La création des différentes classes Manager : les ennemis, les rockets / lazers, les explosions…
  • Des astuces pour conserver une fréquence de 60 FPS.

Cette formation vous permettra d’utiliser plusieurs fonctionnalités clés du Framework Pixlib et de le coupler avec Starling Framework !

Jeu Flash avec Pixlib et Starling Framework

Version démonstration

Ci-dessous un lien vers le jeu flash créé : Afterburner.

Essayez de battre le record !

Télécharger le code source du cours AS3

Et voici le code source de l’application créée avec Pixlib et Starling Framework.

Télécharger “Afterburner avec Pixbib et Starling” src-afterburner-pixlib-starling.zip – Téléchargé 748 fois – 4 MB

Note : les graphismes et l’idée proviennent de Waste Invaders. J’ai entièrement recréé le moteur du jeu (le code AS3).

Le fichier zip contient également le code source complet du Framework Pixlib avec les différentes extensions utilisées (PixQuick, PixService, PixLogger…)

L’extension PixLogger est modifiée pour prendre en charge la dernière version de Monster Debugger.

Présentation de Starling Framework par Thibault Imbert.

Télécharger la dernière version de Starling Framework directement depuis le site officiel.

Télécharger le code source de Pixlib 3.0 directement depuis le site officiel.

Consultez des tutoriels supplémentaires sur le Starling Framework.

Avez-vous déjà développé des jeux flash ou Adobe AIR avec Starling Framework ?

Partagez vos réalisations dans les commentaires ci-dessous.

Dites-nous les gains de performances que vous avez réussi à obtenir.

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://www.actionscript-facile.com/wp-content/uploads/2012/04/collisionsSimple.swf
/**
 * 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();
}

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://www.actionscript-facile.com/wp-content/uploads/2012/04/collisionsBest.swf
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;
		}
	}
}

Télécharger le code source complet

Télécharger “Détection des collisions” ex-detection-collisions.zip – Téléchargé 134 fois – 137 KB

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 !


sem, eleifend dictum quis amet, risus sed luctus velit, efficitur. commodo