BeachBall_featured

Although I used some of my own library Classes in the code below, I would like to show you a demonstration of using a TextureAtlas file made with TexturePacker (by Andreas Loew @ code-and-web.de)

The first thing I did, I created a Beach Ball in Adobe Flash CS5 and tweened it to rotate 360 degrees (although the ND2D library can do rotation of Sprite2D on-the-fly, I just wanted to animate something simple ). After that, I exported the animation into a PNG sequence of 29 frames (0001 to 0029).

Then I was ready to import the folder of PNG images into TexturePacker. The program is so straight-forward that I don’t remember clicking anything else other than “publish”. In my case, since I’m only using the demo-version of TexturePacker, the final output contains some banners to remind you to purchase the software. Eventually I will!

It looks like this:

BeachBall 360 degrees (minus two tinted / demoed ones)

Now, the code to run it took me a while to figure out. But after spending much time looking at the Cocos2d TextureAtlas format, all the file-references and frame keys that it contains, I’ve created a few Helper Classes to help me out with:

  1. Loading the TextureAtlas *.plist file and the PNG as a BitmapData object.
  2. Generating an Array of frame-name sequence based on the PNG’s filename, in the format of “filename####.png”.
  3. Automatically (assuming) add all frames as the default animation in the TextureAtlas, and play it.

And last but not least, I’ve tried to add a Fullscreen button to maximize this demo to your entire screen, BUT… apparently that’s not so easy or at least as intuitive as you think. You can see my efforts in the code anyways.

EDIT: I’ve figured out how to correctly toggle in Fullscreen mode with Stage3D support. That, however, deserve a whole topic in itself! Click HERE to see how it is achieved.
package  
{
	import com.bigp.display.AbstractMain;
	import com.bigp.display.Fullscreen;
	import com.bigp.managers.LayoutManager;
	import com.bigp.nd2d_extensions.TextureAtlasHelper;
	import com.bigp.nd2d_extensions.WorldDynamic2D;
	import de.nulldesign.nd2d.display.Scene2D;
	import de.nulldesign.nd2d.display.Sprite2D;
	import de.nulldesign.nd2d.materials.texture.Texture2D;
	import de.nulldesign.nd2d.materials.texture.TextureAtlas;
	import flash.display.BitmapData;
	import flash.display.Graphics;
	import flash.display.Sprite;
	import flash.events.Event;
	import flash.events.MouseEvent;
	import flash.geom.Point;
	
	/**
	 * @author Pierre Chamberlain
	 */
	[SWF(frameRate="60",width="640",height="480",backgroundColor="0x000000")]
	public class TestTexture extends AbstractMain 
	{
		private var _ballTexture:Texture2D;
		private var _ballAtlas:TextureAtlas;
		private var _ball:Sprite2D;
		
		private var _world:WorldDynamic2D;
		private var _scene:Scene2D;
		
		/////////////////////////////////////////////// MAIN ENTRY:
		
		public override function main():void {
			setupWorld();
			setupFullScreenButton();
		}
		
		/////////////////////////////////////////////// PRIVATE:
		
		private function setupWorld():void {
			_world =	new WorldDynamic2D(60, 0);
			_world.addEventListener(Event.INIT, onWorldInit);
			
			addChild(_world);
			
			_world.start();
		}
		
		private function setupScene():void {
			_scene =	new Scene2D();
			
			_scene.backGroundColor =	0x222244;
			_scene.addChild( setupBeachBall() );
			
			_world.setActiveScene( _scene );
			
			stage.addEventListener(MouseEvent.MOUSE_MOVE, onUpdate);
			stage.addEventListener(MouseEvent.MOUSE_DOWN, onMouseHandler);
			stage.addEventListener(MouseEvent.MOUSE_UP, onMouseHandler);
		}
		
		private function setupBeachBall():Sprite2D {
			_ball =	new Sprite2D(_ballTexture);
			_ball.setSpriteSheet( _ballAtlas );
			
			return _ball;
		}
		
		private function setupFullScreenButton():void 
		{
			var button:Sprite =	new Sprite();
			var g:Graphics =	button.graphics;
			
			var clrBlack:uint =	0x000000;
			var clrWhite:uint =	0xffffff;
			
			var coordinates:Array =	[
				[clrBlack, 0, 0, 30, 30],
				[clrWhite, 5, 5, 20, 20],
				[clrBlack, 7, 7, 16, 16],
				[clrBlack, 0, 10, 30, 10],
				[clrBlack, 10, 0, 10, 30]
			];
			
			for (var c:int; c < coordinates.length; c++) {
				var command:Array = coordinates1;
				g.beginFill(command[0]);
				g.drawRoundRect(command[1], command[2], command[3], command[4], 6, 6);
				g.endFill();
			}
			
			button.useHandCursor =	true;
			button.buttonMode =		true;
			button.x =				stage.stageWidth - button.width - 10;
			button.y =				stage.stageHeight - button.height - 10;
			button.addEventListener(MouseEvent.CLICK, Fullscreen.callbackToggleFullscreen);
			
			addChild( button );
			
			//Sets the button to always be aligned to the bottom-right corner
			LayoutManager.alwaysAlignTo( button, LayoutManager.ALIGN_BOTTOM_RIGHT );
		}
		
		/////////////////////////////////////////////// EVENT-LISTENERS:
		
		private function onWorldInit(e:Event):void {
			TextureAtlasHelper.load("textures/BeachBall.plist", onDataLoaded, 60);
		}
		
		private function onDataLoaded( pBitmapData:BitmapData, pAtlas:TextureAtlas ):void {
			_ballTexture =	Texture2D.textureFromBitmapData(pBitmapData);
			_ballAtlas =	pAtlas;
			
			setupScene();
		}
		
		private function onUpdate(e:MouseEvent):void {
			var stage3DLocation:Point =	Fullscreen.getMouseLocation();
			_ball.x =	stage3DLocation.x;
			_ball.y =	stage3DLocation.y;
			
			e.updateAfterEvent();
		}
		
		private function onMouseHandler(e:MouseEvent):void {
			_ball.scaleX =	// follow on next line...
			_ball.scaleY =	e.type == MouseEvent.MOUSE_DOWN ? 2.0 : 1.0;
		}
	}
}

And here’s the demo:

This area requires
Adobe FlashPlayer version 11 or above.
iOS Devices are not currently supported.

Thanks for checking-out this demo :)