from wikipedia about tile sets (tile sheets)

A tile set (sometimes called a sprite sheet) is collection of smaller images called tiles (typically of uniform size) which have been combined into a single larger image. Tile sets are often used in 2D video games to create complex maps from reusable tiles within the set. When a tile set based map is displayed, the tiles that are stored within it are used to reassemble the map for display. This technique is seen in games designed to run on portable systems such as Nintendo’s Game Boy Advance system or a cellular phone. Using tile sets reduces the amount of system memory required to display maps since it allows for the same tiles to be reused multiple times in a map. It also reduces amount of artwork needed for individual maps since many different ones can be created from the same tileset. In order for maps made from tile sets to appear more distinctive, games typically display them with a different tile set for each unique environment.

This method is implemented in many 2D games as well as applications meant for game creation such as Game Maker and Tiled.

Because the first game type we are gonna create at makeyourflashgame.com is a platformer game (PBE-PSK) , we have implemented tile sheet management. This is the first step in creating multi layered tile maps that will be used in the platformer game levels. (tiled tmx support)

!IMPORTANT Workspace is still in BETA, so be sure to join the beta program.

Configure your tile sheet

After you upload a tile sheet to your workspace in the tile sheet section, the first thing you have to do, is to specify the size of the tiles in your tile sheet. The system only supports square sized tiles at the moment. After you confirm your configuration, a tile matrix is placed upon the tile sheet’s image and you will be able to:

1. Extract tile sheet draw elements from the tile sheet.
2. Configure collision type information.

Extract tile sheet draw elements

When you select a range of tiles on the tilesheet and release the mouse button, those selected tiles form a draw element that you can configure for tile map drawing.

By extracting tile sheet drawing elements from the tile sheet, we create a list of elements that can be used to draw platformer game tile maps. You can specify how an element has to be drawn. An element can be a block or line or single, can be auto filled horizontal/vertical by center/left/right/upper/bottom/random tiles etc.

You only have to extract multi tiled elements from the tile sheet. When drawing on a tile map all single tiles of a tile sheet will always be available in addition to the drawing elements.

You can test the drawing of an element by pressing the ‘test drawing’ button.

Configure collision type information

In the platformer implementation you will have 4 collision types ( none, solid, deadly and one-way). You can draw this type information onto the tile sheet by activating the corresponding type-button to the left of the tilesheet and draw the info.

You can import or export (copy to clipboard) this collision type info (String support) by pressing the import/export button.

The string that is displayed (or that you paste and import) corresponds with the <tileMapCollision> tag from a PSK Platformer level file (Platformer Starter Kit).

!IMPORTANT Workspace is still in BETA, so be sure to join the beta program.

A scene is usally combined with animating (player and enemy) entities and game logic to form a game level.

And for the PBE Push Button Engine Developers among us .. the PBE actionscript 3 source code for your scene can be generated using your workspace.

!IMPORTANT Workspace is still in BETA, so be sure to join the beta program.

Creating your Scene

You can create a new scene by pressing the ‘Create new scene’ button in the scene’s section of your workspace. When you create a new scene, you can first configure the basic scene’s settings like : name, visibility, world size and view size.

Your world size is the size of your game world ( rectangle 0,0,width,height ).

Your view size is the (on screen) size of your scene viewer. (min 100×100, max 800×600)

After you setup your scene dimensions and press the ‘create’ button. Your scene is created and a first layer is added. You will always have at least one layer, so if you delete the only layer, a new one is re-added immediately.

You can edit settings, add a new layer, delete the current layer , save layers (and automaticly create a content icon of the current scene’s view) and toggle (F12) the layer property window.

On the right you will find the Layer Settings that you can toggle by clicking the ‘Toggle’ button of pressing the F12 key (when flash has focus). The properties let you specify things like : layer type (fill/paralax), alpha (transparency), layer index ( layer drawing order , 0 is bottom , >0 is more on top ), scroll factor (speed) and more…

A filled layer is filled with an image you select.

A paralax layer scrolls the selected image in the world in relation to the view size. So an image that would be the exact size of the viewer will not scroll (static background or HUD overlay). An image that has the exact world size dimensions will scroll with a factor of x=1, y=1.

When you have selected an image (one from your workspace or one shared by the community), you can scale it of change the image canvas size. You can also specify if the repeating/filling of the image is only one vertical or horizontal row and how that row should be aligned to the game world.

When selecting an image you can search for it in your workspace or in the shared community content repository.

You can view the image with it’s real size (if it fits on screen) using the ‘view’ link, left from the image icon display on the layer properties panel.

Generating PBE source code

When you edit the scene’s settings in your workspace you will find a ‘generate source code’ button. You can specify your application name, your asset path and if you want to embed or load the content.

If you choose to generate the generated source code will look something like this:

  // ------------------------------------------------------------------
// http://www.makeyourglashgame.com
// Generated by user [mas] on September 20, 2010, 2:00 pm
// Scene 'PSK scene - Ice'
//
// Generated with XML templates
//
// !IMPORTANT
// - to compile this source you will need the free myfg as library
//   download @ http://content.makeyourflashgame.com/pbe/com.myfg.rar
// - you will need to provide the image resources yourself.
// ------------------------------------------------------------------
package
{

    import com.myfg.pbe.debug.StatusTextComponent;
    import com.myfg.pbe.rendering.SceneLayerRenderer;
    import com.myfg.pbe.rendering.SceneWorldComponent;
    import com.myfg.pbe.spatial.MouseSpatialComponent;
    import com.pblabs.engine.PBE;
    import com.pblabs.engine.core.TemplateManager;
    import com.pblabs.engine.entity.IEntity;
    import com.pblabs.engine.entity.PropertyReference;
    import com.pblabs.rendering2D.SpriteRenderer;
    import com.pblabs.rendering2D.ui.SceneView;
    import flash.display.Bitmap;
    import flash.display.BitmapData;
    import flash.display.Sprite;
    import flash.events.Event;
    import flash.geom.Point;
    import flash.geom.Rectangle;

    [SWF(width="500", height="300", framerate="60")]
    public class Application extends Sprite
    {
        // ------------------------------------------------------------------
        // public methods
        // ------------------------------------------------------------------
        public function Application()
        {
            super();
            // initialize the application
            initApplication();
        }
        // ------------------------------------------------------------------
        // private methods
        // ------------------------------------------------------------------
        private function initApplication():void
        {
            // create background bitmap
            var bmd:BitmapData = new BitmapData(500,300,false,0);
            this.addChild(new Bitmap(bmd));

            // initialize game engine
            initEngine();
            // create/download resources
            new Resources(createEntities);
        }
        private function initEngine():void
        {
            // Start up Push Button Engine
            if (!PBE.started)
                PBE.startup(this);
            // Set up a simple PBE scene
            PBE.initializeScene(new SceneView(),"scene");
        }
        private function createEntities():void
        {
            // register PBE types
            PBE.registerType(SpriteRenderer);
            PBE.registerType(IEntity);

            // register MYFG types
            PBE.registerType(MouseSpatialComponent);
            PBE.registerType(StatusTextComponent);
            PBE.registerType(SceneWorldComponent);
            PBE.registerType(SceneLayerRenderer);

            PBE.templateManager.loadFile("entityXML");
            PBE.templateManager.addEventListener(TemplateManager.LOADED_EVENT, templateLoaded);             

        }
        private function templateLoaded(event:Event):void
        {
            // instantiate loaded entities
            PBE.templateManager.instantiateEntity("mouse cursor");
            mouse = PBE.lookupComponentByType("mouse cursor",MouseSpatialComponent) as MouseSpatialComponent;

            PBE.templateManager.instantiateEntity("status");
            status = PBE.lookupComponentByType("status",StatusTextComponent) as StatusTextComponent;
            status.status = "world mouse coords |#mouse cursor.spatial.position|";

            PBE.templateManager.instantiateEntity("PSK scene - Ice");   

            // add application event handlers
            PBE.mainStage.addEventListener(Event.ENTER_FRAME,onFrame);
        }

        private function onFrame(e:Event):void
        {
            if (mouse!=null && mouse.buttonDown)
                PBE.scene.position = PBE.scene.position.subtract(new Point(mouse.delta.x/20,mouse.delta.y/20));
        }
        // ------------------------------------------------------------------
        // private and protected variables
        // ------------------------------------------------------------------
        private var status:StatusTextComponent
        private var mouse:MouseSpatialComponent
    }
}

// ------------------------------------------------------------------------
// Internal classes
// ------------------------------------------------------------------------

import com.pblabs.engine.PBE;
import com.pblabs.engine.resource.ImageResource;
import com.pblabs.engine.resource.Resource;
import com.pblabs.engine.resource.ResourceBundle;
import com.pblabs.engine.resource.XMLResource;
import com.pblabs.engine.resource.provider.IResourceProvider;
import flash.display.Bitmap;
import flash.display.BitmapData;
import flash.filters.DropShadowFilter;
import flash.geom.Point;

class Resources extends ResourceBundle implements IResourceProvider
{
    [Embed(source="assets/IcyBG01_far.png")]
    public var res1:Class;
    [Embed(source="assets/IcyBG01_mid.png")]
    public var res2:Class;
    [Embed(source="assets/IcyBG01_near.png")]
    public var res3:Class;
    // ------------------------------------------------------------------
    // public methods
    // ------------------------------------------------------------------
    public function Resources(callWhenReady:Function)
    {
        super();
        PBE.resourceManager.registerResourceProvider(this);
        createDynamicResources();
        callWhenReady();
    }
     public  function isResourceKnown(uri:String, type:Class):Boolean
    {
        if (uri == "mouseCursor" && type==ImageResource)
            return true;

            if (uri == "entityXML" && type==XMLResource)
            return true;
        return false;
    }

    public  function getResource(uri:String, type:Class, forceReload:Boolean = false):Resource
    {
        if (uri == "mouseCursor" && type==ImageResource)
            return mouseResource;

        if (uri == "entityXML" && type==XMLResource)
            return entityXMLResource;
        return null;
    }
    // ------------------------------------------------------------------
    // private and protected methods
    // ------------------------------------------------------------------
    private function createDynamicResources():void
    {
        mouseResource = new ImageResource();
        mouseResource.initialize(createMouseCursor());

        entityXMLResource = new XMLResource();
        entityXMLResource.initialize(entityXML);
    }

    private function createMouseCursor():Bitmap
    {
        // create mouse pointer bitmap
        var bitmapData:BitmapData = new BitmapData(17,19,true,0);
        var sy:int = 3;
        var ey:int = 15;
        for (var x:int = 3; x<15; x++)
        {
            for (var y:int = sy; y<ey; y++)
            {
                bitmapData.setPixel32(x,y,0xffffffff);
            }
            sy+=1; ey-=1;
        }
        bitmapData.applyFilter(bitmapData,bitmapData.rect,new Point(0,0),
            new DropShadowFilter(0,45,0,1,2,2,8));
        return new Bitmap(bitmapData);
    }
    // ------------------------------------------------------------------
    // private and protected attributes
    // ------------------------------------------------------------------
    private var mouseResource:ImageResource;
    private var entityXMLResource:XMLResource;
    private var entityXML:XML =
      <things>
        <entity name="mouse cursor">
            <component type="com.pblabs.rendering2D.SpriteRenderer" name="render">
              <fileName>mouseCursor</fileName>
              <alpha>0</alpha>
              <layerIndex>75</layerIndex>
              <positionProperty>@spatial.position</positionProperty>
              <rotationProperty>@spatial.rotation</rotationProperty>
            </component>
            <component type="com.myfg.pbe.spatial.MouseSpatialComponent" name="spatial">
                <manager entityName="scene" componentName="Spatial" />
                <rotateAround>true</rotateAround>
            </component>
        </entity>
        <entity name="status">
            <component type="com.myfg.pbe.debug.StatusTextComponent" name="text">
            </component>
        </entity>
        <entity name="PSK scene - Ice">
            <component type="com.myfg.pbe.rendering.SceneWorldComponent" name="world">
                <world><x>0</x><y>0</y><width>2400</width><height>300</height></world>
                <position>C</position>
            </component>
            <component type="com.myfg.pbe.rendering.SceneLayerRenderer" name="far">
                <alpha>1</alpha>
                <layerIndex>8</layerIndex>
                <scrollOffset><x>0</x><y>0</y></scrollOffset>
                <scrollFactor><x>0.10000000000000014</x><y>1</y></scrollFactor>
                <paralax>false</paralax>
                <fillSize><x>960</x><y>480</y></fillSize>
                <fillScale><x>1</x><y>1</y></fillScale>
                <horizontalDisplay>*</horizontalDisplay>
                <verticalDisplay>B</verticalDisplay>
                <fileName>assets/IcyBG01_far.png</fileName>
            </component>
            <component type="com.myfg.pbe.rendering.SceneLayerRenderer" name="med">
                <alpha>0.7000000000000001</alpha>
                <layerIndex>10</layerIndex>
                <scrollOffset><x>0</x><y>0</y></scrollOffset>
                <scrollFactor><x>0.40000000000000013</x><y>1</y></scrollFactor>
                <paralax>false</paralax>
                <fillSize><x>960</x><y>480</y></fillSize>
                <fillScale><x>1</x><y>1</y></fillScale>
                <horizontalDisplay>*</horizontalDisplay>
                <verticalDisplay>*</verticalDisplay>
                <fileName>assets/IcyBG01_mid.png</fileName>
            </component>
            <component type="com.myfg.pbe.rendering.SceneLayerRenderer" name="near">
                <alpha>1</alpha>
                <layerIndex>11</layerIndex>
                <scrollOffset><x>0</x><y>0</y></scrollOffset>
                <scrollFactor><x>1.8000000000000007</x><y>1</y></scrollFactor>
                <paralax>false</paralax>
                <fillSize><x>960</x><y>480</y></fillSize>
                <fillScale><x>1</x><y>1.3000000000000005</y></fillScale>
                <horizontalDisplay>*</horizontalDisplay>
                <verticalDisplay>B</verticalDisplay>
                <fileName>assets/IcyBG01_near.png</fileName>
            </component>
        </entity>
    </things>;
}

!IMPORTANT You will have to put the image files that are embedded, or need to be loaded, into the assets folder yourself.

To compile the source code you will need the ‘free’ makeyourflashgame.com PBE library that you can download here.

!IMPORTANT Workspace is still in BETA, so be sure to join the beta program.

At this time only source code for the workspace Animation preview can be generated, but we will expand this when more content can be created.

To generate the content of an animation, go to the animation section in your makeyourflashgame.com workspace.

!IMPORTANT Workspace is still in BETA, so be sure to join the beta program.

When you edit your animation you will find an button [Generate source code] in your animation’s settings.

When you choose to generate the Push Button Engine source code you can first specify some generation settings

• Application
  Application class name for the generated PBE source code.
• Resources (embed or load)
  Source is generated that will embed the resources (using ResourceBundle) or will load the resources dynamicly (using BulkLoaderResourceProvider ) .
• Resource location
  You can specify what is the path/uri to the resources.
• Mouse control
  When set to true the source is generated that lets your animation rotate (normal sprite sheet animation) or change direction (directional sprite sheet animation).
  The mouse SpriteRenderer is a dynamicly (in-memory) generated image and provided using its own – IResourceProvider – class
• Status
  When set to true , source for a status label is generated

Just press [Generate] and you have your code!

When the source display box is scrolled in top position you will find some controls that let you copy the source to clipboard. It will than be easy to create a new application file in you favorite actionscript IDE ( Flashbuilder would be my choice ).

Needless to say that you should have some knowledge from PBE and have the PBE source installed in your development environment. The resources should be put there by yourself (if embedded) or on a downloadable position in case of synamic loading, as well.

The generated source code from the animation example from this post looks like this :

// ------------------------------------------------------------------
// http://www.makeyourglashgame.com
// Generated by user [mas] on August 23, 2010, 3:31 pm
// Animation 'walking blue man'
// ------------------------------------------------------------------
package
{

	import com.pblabs.engine.PBE;
	import com.pblabs.rendering2D.ui.SceneView;
	import flash.display.Bitmap;
	import flash.display.BitmapData;
	import flash.display.Sprite;
	import flash.events.MouseEvent;
	import flash.filters.DropShadowFilter;
	import flash.text.TextField;
	import flash.ui.Mouse;

	[SWF(width="136", height="148", framerate="60")]
	public class Application extends Sprite
	{
		// ------------------------------------------------------------------
		// public methods
		// ------------------------------------------------------------------
		public function Application()
		{
			super();
			// initialize the application
			initApplication();
			// create resources
			new Resources(createEntities);
		}
		// ------------------------------------------------------------------
		// private methods
		// ------------------------------------------------------------------
		private function initApplication():void
		{
			// create background bitmap
			var bmd:BitmapData = new BitmapData(136,148,false,0);
			this.addChild(new Bitmap(bmd));

			// initialize game engine
			initEngine();

			// add status text field
			tfStatus = new TextField();
			tfStatus.x = 2; tfStatus.y = 2; tfStatus.width = width-4;
			tfStatus.height = 20;
			tfStatus.text="";
			tfStatus.textColor = 0xffffff;
			tfStatus.filters = [ new DropShadowFilter(0,45,0,1,2,2,8) ];
			this.addChild(tfStatus);

			Mouse.hide();
		}
		private function initEngine():void
		{
			// Start up Push Button Engine
			if (!PBE.started)
				PBE.startup(this);
			// Set up a simple PBE scene
			PBE.initializeScene(new SceneView());
		}
		private function createEntities():void
		{
			// create spritesheet (SpriteSheetComponent) for this animation
			new SpriteSheet("walking blue man",
				{
					cols : 15,
					rows : 8,
					frameCount : 120,
					directionsPerFrame : 8,
					filename : "assets/_myfg_spritesheet_245.png"
				});
			// create the animating sprite (SpriteRenderer) for this animation
			animation = new AnimatingSprite("walking blue man",
				{
					duration : 1,
					animationType : "L",
					frameCount : 120,
					loop : true,
					directionsPerFrame : 8,
					startDirection : "D",
					directionRotation : "CL",
					spriteSheet : "walking blue man"
				});
 			// create mouse cursor
			new RotatingMouseCursor(mouseHandler);
		}
		private function mouseHandler(event:MouseEvent):void
		{
			animation.mouseHandler(event);
			tfStatus.text = "Direction  = "+animation.direction;
		}
		// ------------------------------------------------------------------
		// private and protected variables
		// ------------------------------------------------------------------
		private var animation:AnimatingSprite;
		private var tfStatus:TextField;
	}
}

// ------------------------------------------------------------------------
// Internal classes
// ------------------------------------------------------------------------

import com.pblabs.animation.Tween;
import com.pblabs.engine.PBE;
import com.pblabs.engine.entity.EntityComponent;
import com.pblabs.engine.entity.IEntity;
import com.pblabs.engine.entity.PropertyReference;
import com.pblabs.engine.resource.ImageResource;
import com.pblabs.engine.resource.Resource;
import com.pblabs.engine.resource.ResourceBundle;
import com.pblabs.engine.resource.provider.IResourceProvider;
import com.pblabs.rendering2D.DisplayObjectRenderer;
import com.pblabs.rendering2D.SpriteRenderer;
import com.pblabs.rendering2D.SpriteSheetRenderer;
import com.pblabs.rendering2D.spritesheet.CellCountDivider;
import com.pblabs.rendering2D.spritesheet.SpriteSheetComponent;
import flash.display.Bitmap;
import flash.display.BitmapData;
import flash.events.Event;
import flash.events.MouseEvent;
import flash.filters.DropShadowFilter;
import flash.geom.Point;

class Resources extends ResourceBundle
{
	[Embed(source="assets/_myfg_spritesheet_245.png")]
	public var res1:Class;

	public function Resources(callWhenReady:Function)
	{
		super();
		callWhenReady();
	}
}
class SpriteSheet extends SpriteSheetComponent
{
	// ------------------------------------------------------------------
	// public methods
	// ------------------------------------------------------------------
	public function SpriteSheet(name:String , props:Object)
	{
		super();

		this.props = props;

		// By assigning the imageFilename attribute, the image will be automaticly loaded
		imageFilename = props.filename;		

		// Create a CellCountDivider to specify the number of columns and rows of our spritesheet
		var spriteSheetDivider:CellCountDivider = new CellCountDivider();
		spriteSheetDivider.xCount = props.cols;
		spriteSheetDivider.yCount = props.rows;

		// Hook up the SpriteSheetDivider
		divider = spriteSheetDivider;
		frameCount = props.frameCount;

		// if this spritesheet has multiple direction information the number of directions has to be set
		if (props.directionsPerFrame!=null)
		  directionsPerFrame = props.directionsPerFrame;		

		// add this spritesheet to the spritesheet repository
		SpriteSheet.add(this, name);
	}
	public static function lookup(name:String):SpriteSheet
	{
		entity = PBE.lookupEntity("spritesheets");
		if (entity != null)
			return (entity.lookupComponentByName(name) as SpriteSheet);
		else
			return null;
	}
	// ------------------------------------------------------------------
	// private methods
	// ------------------------------------------------------------------
	private static function add(spritesheet:SpriteSheet, name:String):void
	{
		entity = PBE.lookupEntity("spritesheets");
		if (entity == null)
		{
			entity = PBE.allocateEntity();
			entity.initialize("spritesheets");
		}
		entity.addComponent( spritesheet, name );
	}

	// ------------------------------------------------------------------
	// private and protected attributes
	// ------------------------------------------------------------------
	private static var entity:IEntity;
	private var props:Object;
}
class DirectionComponent extends EntityComponent
{
	public function get direction():Number
	{
		return _direction;
	}

	public function set direction(value:Number):void
	{
		_direction = value;
	}

	public function screenToDirection(screenPoint:Point):void
	{
		// transform screen mouse coordinates to world coordinates
		var worldPoint:Point = PBE.scene.transformScreenToWorld(screenPoint);
		// calculate the angle between the mouse world coordinates and the horizontal axes
		var rotationAngle:Number = Math.round((Math.atan2( worldPoint.y - render.y, worldPoint.x - render.x) * 180 ) / Math.PI);
		// display status label
		switch(orientation)
		{
			case "U":
				rotationAngle+=90;
				break;
			case "D":
				rotationAngle-=90;
				break
			case "L":
				rotationAngle+=180;
				break
		}
		if (rotation == "CC")
			rotationAngle*=-1;
		while (rotationAngle < 0) rotationAngle+=360;
		direction = rotationAngle;
	}

	public function DirectionComponent(render:DisplayObjectRenderer, orientation:String, rotation:String)
	{
		this.orientation = orientation;
		this.rotation = rotation;
		this.render = render;
		super();
	}

	private var _direction:Number = 0;
	private var orientation:String;
	private var rotation:String;
	private var render:DisplayObjectRenderer;
}
class AnimatingSprite extends Object
{
	// ------------------------------------------------------------------
	// public methods
	// ------------------------------------------------------------------
	public function AnimatingSprite(name:String , props:Object)
	{
		this.props = props;

		entity = PBE.allocateEntity();
		entity.initialize(name);

		// Create a sprite render component to display our animation
		render = new SpriteSheetRenderer();

		// assign the scene so this animatied sprite will we drawn.
		render.scene = PBE.scene;

		// Assign the spritesheet to the sprite
		if (props.spriteSheet is String)
			render.spriteSheet = SpriteSheet.lookup(props.spriteSheet);
		else
			render.spriteSheet = props.spriteSheet;

		render.alpha = 0;
		render.rotation = 0;

		render.directionReference = new PropertyReference("@direction.direction");
		entity.addComponent( directionComponent = new DirectionComponent(render, props.startDirection, props.directionRotation), "direction" );
		var target:Number = (props.frameCount/props.directionsPerFrame)-0.001;

		// Add our render component to the Animated Sprite Entity
		entity.addComponent( render, "render" );

		// create tween for the spriteIndex animation
		new Tween(entity,"@render.spriteIndex",props.duration,0,target,null,null,0,
			(props.animationType == "P")?true:false,(props.loop)?-1:1);						

		// tween render alpha from 0 to 1 so we can avoid strange positioning effects when PBE is initializing.
		new Tween(entity,render,0.1,
			{ alpha : 0 }, { alpha : 1 },null,null,0.05);
	}

	public function get rotation():Number
	{
		return render.rotation;
	}

	public function set rotation(value:Number):void
	{
		render.rotation = value;
	}

	public function get direction():Number
	{
		if (directionComponent!=null)
			return directionComponent.direction;
		return 0;
	}

	public function set direction(value:Number):void
	{
		if (directionComponent!=null)
			directionComponent.direction = value;
	}		

	public function mouseHandler(event:MouseEvent):void
	{
		if (event.buttonDown)
		{

			directionComponent.screenToDirection(new  Point(event.stageX,event.stageY));
		}
	}	

	// ------------------------------------------------------------------
	// private and protected attributes
	// ------------------------------------------------------------------
	private var entity:IEntity;
	private var render:SpriteSheetRenderer;
	private var props:Object;
	private var directionComponent:DirectionComponent;
}
class RotatingMouseCursor extends Object implements IResourceProvider
{
	// ------------------------------------------------------------------
	// public methods
	// ------------------------------------------------------------------
	public function RotatingMouseCursor(customMouseHandler:Function = null)
	{
		// register this class as an resource provider
		PBE.resourceManager.registerResourceProvider(this);
		this.customMouseHandler = customMouseHandler;

		// create mouse cursor entity
		entity = PBE.allocateEntity();
		entity.initialize("mouseCursor");

		// create the PBE resource
		mouseResource = new ImageResource();
		mouseResource.initialize(createBitmap());

		// create spriteRenderer component for the mousecursor
		createRenderer();

		PBE.mainStage.addEventListener(Event.MOUSE_LEAVE, mouseLeave);
		PBE.mainStage.addEventListener(MouseEvent.MOUSE_MOVE, mouseHandler);
	}

	public function isResourceKnown(uri:String, type:Class):Boolean
	{
		if (uri == "mouseCursor" && type==ImageResource)
			return true;
		return false;
	}

	/**
	 * This method is called when the ResourceManager requests a known
	 * resource from a ResourceProvider
	 */
	public function getResource(uri:String, type:Class, forceReload:Boolean = false):Resource
	{
		if (uri == "mouseCursor" && type==ImageResource)
			return mouseResource;
		return null;
	}

	// ------------------------------------------------------------------
	// private methods
	// ------------------------------------------------------------------
	private function createBitmap():Bitmap
	{
		// create mouse pointer bitmap
		var bitmapData:BitmapData = new BitmapData(17,19,true,0);
		var sy:int = 3;
		var ey:int = 15;
		for (var x:int = 3; x<15; x++)
		{
			for (var y:int = sy; y<ey; y++)
			{
				bitmapData.setPixel32(x,y,0xffffffff);
			}
			sy+=1; ey-=1;
		}
		bitmapData.applyFilter(bitmapData,bitmapData.rect,new Point(0,0),
			new DropShadowFilter(0,45,0,1,2,2,8));
		return new Bitmap(bitmapData);
	}

	private function createRenderer():void
	{
		render = new SpriteRenderer();
		render.scene = PBE.scene;
		render.fileName = "mouseCursor";
		render.alpha = 0;
		entity.addComponent(render,"render");
	}

	private function mouseLeave(event:Event):void
	{
		render.alpha = 0;
	}

	private function mouseHandler(event:MouseEvent):void
	{
		if (render.alpha==0) render.alpha = 1;
		// transform screen mouse coordinates to world coordinates
		var worldPoint:Point = PBE.scene.transformScreenToWorld(new  Point(event.stageX,event.stageY));
		// calculate the angle between the mouse world coordinates and the horizontal axes
		var rotationAngle:Number;
		if (centerObject==null)
			rotationAngle = Math.round((Math.atan2( worldPoint.y, worldPoint.x) * 180 ) / Math.PI);
		else
		  	rotationAngle = Math.round((Math.atan2( worldPoint.y - centerObject.y, worldPoint.x - centerObject.x) * 180 ) / Math.PI);

		render.rotation = rotationAngle;
		render.position = worldPoint; 

		if (customMouseHandler!=null) customMouseHandler(event);
	}

	// ------------------------------------------------------------------
	// private and protected attributes
	// ------------------------------------------------------------------
	private var mouseResource:ImageResource;
	private var entity:IEntity;
	private var render:SpriteRenderer;
	private var centerObject:DisplayObjectRenderer = null;
	private var customMouseHandler:Function = null;
}

!IMPORTANT Workspace is still in BETA, so be sure to join the beta program.

Did you know that using the makeyourflashgame.com website you can easily create an animation's spritesheet from a number of frames? Read it in this post

The only usefull (windows) tool I could find on the net is SpriteStrip Composer, a .NET application (download it here) developed by a member for the XNA framework. I does some good work but, when you want to specify the column count you want to set for your sprite sheet, you will be dissapointed.

So .. seeking an online tool ? Well … seek no further …

Makeyourflashgame.com just finished a tool that can merge a range of single frames into a single spritesheet. That spritesheet can be used in your games and with engines like for example the open source Push Button Flash game engine.

!IMPORTANT Workspace is still in BETA, so be sure to join the beta program.

You will find this tool in your makeyourflashgame.com workspace under ‘sprite sheets’ and it is called [create new sprite sheet].

After clicking the [create new sprite sheet] button, you can select multiple frame images for upload. In the example , I am creating a ‘multi-directional’ sprite sheet out of 120 frames. The frames were rendered using the open source 3D program Blender 2.5

After all files are uploaded to the makeyourflashgame.com website, you can input some sprite sheet data, like name, visibility and , very important, the number of columns your spritesheet should have. In my case 15, because I have a 15 frame animation with 8 directions ( 15 x 8 cells ).

Pressing the [Create] button will start the merging process.

After the merging is finished you have your sprite sheet all made up in your makeyourflashgame.com workspace.

Just set the animation type, click the [Edit animation] button and your directional animation is ready to take off. You can control the direction by using your mouse while the left mouse button is pressed.

And if you would be a PBE actionscript developer, you could even save some time and generate the PBE source code for this animation. You can see how that works in this post.

!IMPORTANT Workspace is still in BETA, so be sure to join the beta program.

Modifiers for effects like Bloom, Glow , Blur, Colorize, Reflection are provided with the engine, but one can easily create your own. Even modifiers that perform animating modification, like a pulsating glow for example, are possible.

See working sample

Download tutorial code here

Code uses minimal components, so import the swc into your project.

You also need to put the PBE logo image and the animating star spritesheet into the same folder as your compiled swf, for the sample to work.

Why would we need modifiers

Answer is simple … Graphics that are modified by the engine don’t need to be created and loaded as a resource. If you would have a game with animating enemies that look the same, but having a different color, you could load one enemy animation resource and create multiple colorized modified SpriteContainer or SpriteSheet objects. You would be decreasing your loading time and only need to create one resource when designing the graphics of your game.

Image that you have to create/render a reflection resource for each frame in all your animations and sprites. TORTURE!! NO NEED … there is a ReflectionModifier that turns an image in its reflection.

In addition, some effects can be real time so you can switch on-off specific modifiers at your convienience. To set a BlurModifier when an object is moving fast, could render a nice effect. Or maybe you would want to set your entire scene to grayScale when someone completes a level and you show the level score, just assign a GrayscaleModifier to the (PBE.scene as BitmapDataScene) and your done.

How do modifiers work

When you create a game using the open source PushButton flash game engine, all images and animations you use consist of BitmapData objects. These objects are loaded and maintained by the Engine and contain raw bitmap data. BitmapData is pixel color and transparency (ARGB) information about an image.

A modifier is a class that will modify the bitmap data of an image.
There are two types of modification :

- REAL-TIME
This modification is applied on each render pass. This type of modification is active when you are applying modifiers to a SpriteSheetRenderer or BitmapDataScene object.

- PRE-RENDERED
This modification is applied when the modifiers are assigned. The image data is stored in modified state. This type of modification is active when you are applying modifiers to a SpriteRenderer object or SpriteContainer subclass, like SpriteSheetComponent or SWFSpriteSheetComponent.

The classes mentioned above all have a modifiers:Array attribute. By assigning an array of one or multiple modifers to this attribute , you will activate the provided modifiers.

example : turn your scene into grayscale (only with BitmapDataScene)

(PBE.scene as BitmapDataScene).modifiers = [ new GrayscaleModifier() ];

example : apply a red colorization on a sprite

var render:SpriteRenderer = new SpriteRenderer();
render.modifiers = [ new ColorizeModifier([0.5,0.5,0.5,0,0],[0.5,0,0,0,0],[0.5,0,0,0,0],[0,0,0,1,0])];

example : apply a pulsating glow colorization on an animating sprite

var render:SpriteSheetRenderer = new SpriteSheetRenderer();
render.modifiers = [ new SizeModifier(150,150),
   new PulsatingGlowModifier( new GlowModifier(0xcc0000,.65,5,5,3,3),
   new GlowModifier(0xff2200,.9,8,8,6,10))];

Changing the assigned modifiers array has no effect, only when assigning a new Array it will show changes, a bit the same as the filters array you use with the Sprite Class.

// wrong
render.modifiers.push(GrayscaleModifier());

// wrong
render.modifiers[render.modifiers.length] = GrayscaleModifier();

// right
render.modifiers = render.modifiers.concat(GrayscaleModifier());

You can have multiple modifiers that will be applied in the modifiers Array’s order.

So, for example …. you have a nice cut-out sprite animation that you would want to apply a glow to. Because you have made such a solid sprite, having no overhead spacing pixels in your loaded image, only applying a GlowModifier would render a clipped glow. This because glow radiates outwards and therefor out off your Sprite’s boundaries.

Solution … RESIZE. To achieve a nice glow on a sprite or animation one should first size-up the image by using the SizeModifier (creating more render area for the glow) and after that apply the GlowModifier.

Set size to 100×100 pixels and apply red glow.

render.modifiers = [ SizeModifier(100,100) , GlowModifier(0xff0000) ];

One could even finish with applying another SizeModifier to downscale the glowing Sprite.

Create your own modifier

We are gonna make a ColorBlockModifier that replaces the image with a block (rectangle) of a specific color.

To create a new modifier we subclass from the Modifier Class
[com.pbe.rendering2D.modifier].

public class ColorBlockModifier extends Modifier
{
  ...
}

In the modifier constructor you can provide parameters that you can use when you are modifying. In this case the color of the block we are creating.

public var color:uint = 0xff000000;

public function ColorBlockModifier(color:uint=0xff000000)
{
	this.color = color;
	super();
}

Now we only need to override the modify function that will handle the modification:

public override function modify(data:BitmapData, index:int=0, count:int=1):BitmapData
{
..
}

data:BitmapData
image BitmapData object

index:int=0
frame index when using modifier in combination with SpriteContainer subclass or SpriteSheetRenderer

count:int=1
frame count using modifier in combination with SpriteContainer subclass or SpriteSheetRenderer

You can use index and count attributes when you want to create an animating modification. A pulsating Glow for example. In the modify function we alter en return the image data:BitmapData object.

The entire modifier code should look something like this:

	public class ColorBlockModifier extends Modifier
	{
		public var color:uint = 0xff000000;

		public function ColorBlockModifier(color:uint=0xff000000)
		{
			this.color = color;
			super();
		}

		public override function modify(data:BitmapData, index:int=0, count:int=1):BitmapData
		{
			data.lock();

			for (var y:int = 0; y<data.height;  y++)
			{
					for (var x:int=0; x<data.width; x++)
						data.setPixel32(x,y,color);
			}

			data.unlock();
			return data;
		}

	}

See working sample

Download tutorial code here

Code uses minimal components, so import the swc into your project.

You also need to put the PBE logo image and the animating star spritesheet into the same folder as your compiled swf, for the sample to work.

As you have seen, modifiers are easy to use and easy to create. So use them well …

See example of this tutorial in action

Download the AS3 code from this article (rar)

With this PBE render component (that extends the PBE BitmapRenderer component) you will be able to render an image of a specific with and height that will be filled with a bitmap you provide.

This render component exposes 2 attributes for scrolling purposes:

scroll:Point
With this point you can specify the scrolling offset for the scrolling bitmap, where scroll.x will be the horizontal scrolling value and the scroll.y will be the verical scrolling value.

scrollSpeed:Point
With this point you can specify the scrolling speed ( pixels/second ) for the scrolling bitmap, where scrollSpeed.x will be the horizontal scrolling speed and scrollSpeed.y will be the vertical scrolling speed.
The scrolling speed will automaticly adjust the scrolling offset.

By using multiple ScrollingBitmapRenderer components in different scene render layers with different scrolling speeds, you will even be able to create a nice paralax scrolling effect. This will be demonstrated in the provided sample.

The ScrollingBitmapRenderer Component Class

First we create a component class that extends the PBE BitmapRender class. By extending the BitmapRenderer things like drawing and positioning are already handled by the PushButton Engine. We get a bitmapData attribute that we can assign or draw onto that gives us control of what is displayed.

	public class ScrollingBitmapRenderer extends BitmapRenderer
	{
	}

In this component’s constructor we will create and prepare mutilple bitmapData objects. The bitmapData for the scrolling bitmap, the bitmapData for clearing and the bitmapData that will contain all display data and will be used to copy pixels from, onto the scrolling bitmap.

		public function ScrollingBitmapRenderer(bitmap:Bitmap, width:int, height:int)
		{
			// call inherited constructor
			super();
			// store bitmap that will be used to fill the scrolling bitmap
			this.srcBitmap = bitmap;
			// create a bitmapdata object for the scrolling bitmap
			this.bitmapData =  new BitmapData(width,height);
			// determine how many times the bitmap has to be drawn horizontal and vertical
			// to fill the scrolling bitmap.
			// We add an aditional so that we have enough display to scroll in any direction
			var cx:int = Math.ceil(width/srcBitmap.width)+1;
			var cy:int = Math.ceil(height/srcBitmap.height)+1;
			// the scrollrect variable will be used to draw a specific area to the scrolling bitmap
			scrollRect = new Rectangle(0,0,width,height);
			// create a bitmapData object for clearing purposes
			emptyBitmapData = new BitmapData(width,height, true, 0);
			// create a bitmapData object that will contain all display info that will
			// be used when copying pixels to the scrolling bitmap
			scrollBitmapData = new BitmapData(cx*srcBitmap.width, cy*srcBitmap.height, true, 0x000000);
			for (var ix:int = 0; ix<cx; ix++)
				for (var iy:int = 0; iy<cy; iy++)
				{
					scrollBitmapData.copyPixels(srcBitmap.bitmapData,srcBitmap.bitmapData.rect, new Point(ix*srcBitmap.width,iy*srcBitmap.height));
				}
		}

Because the extended BitmapRenderer is in fact a DisplayObjectRenderer that extends the PBE AnimatedComponent we have a onFrame event that we can override and use to adjust the scrolling offset using the scrollSpeed. We can also copyPixel the right display data onto the scrolling bitmap so it will be displayed in the PushButton Game Engine.

		public override function onFrame(deltaTime:Number):void
		{
			// call onFrame of the extended BitmapRenderer
			super.onFrame(deltaTime);
			// adjust scroll offset using the scrollSpeed
			scroll.x += scrollSpeed.x * deltaTime;
			scroll.y += scrollSpeed.y * deltaTime;
			// determine the right drawing rectangle area of the bitmapData object with all display info
			// for the copyPixel command
			// determine x offset of rectangle draw area
			var dx:int = scroll.x - (Math.floor(scroll.x/srcBitmap.width)*srcBitmap.width);
			scrollRect.x = dx;
			// determine y offset of rectangle draw area
			var dy:int = (scroll.y) - (Math.floor((scroll.y)/srcBitmap.height)*srcBitmap.height);
			scrollRect.y = dy;
			// lock the bitmapData object so no changes will be displayed until it is unlocked
			bitmapData.lock();
			// clear the bitmapData using a emptyBitmapData copy
			bitmapData.copyPixels(emptyBitmapData, emptyBitmapData.rect, new Point(0,0), null, null, false);
			// draw the right area of the bitmapData object with all display info onto the scrolling bitmap
			bitmapData.copyPixels(scrollBitmapData, scrollRect, new Point(0,0), null, null, true);
			// unlock the bitmapData object so it can be displayed
			bitmapData.unlock();
		}

Using the ScrollingBitmapRenderer Component in a sample

To create a scrolling bitmap we just allocate a PBE Entity and add a ScrollingBitmaspRenderer component to it.

			// Allocate an entity for a scrolling bitmap
			var bm:IEntity = PBE.allocateEntity();
			// Register the entity with PBE
			bm.initialize("bm_front");
			// Create a bitmap render component to display our animation
			var bmRender:ScrollingBitmapRenderer = new ScrollingBitmapRenderer(logo.image,PBE.scene.sceneView.width,PBE.scene.sceneView.height);
			// assign the scene so this animatied sprite will we drawn.
			bmRender.scene = PBE.scene;
			// position this bitmap so that it will fill the entire PBE scene
			bmRender.x = -1*(PBE.scene.sceneView.width/2);
			bmRender.y = -1*(PBE.scene.sceneView.height/2);
			// set the layer of this renderer so it will render on top
			bmRender.layerIndex = 10;
			// set the scroll speed of this renderer
			bmRender.scrollSpeed.x = 100;

See example of this tutorial in action

Download the AS3 code from this article (rar)

Because the makeyourflashgame website consists of 5 subdomains www, blog, community, base, content, and the community part is a PHPBB3 forum that has its own logon system, I had a real headbreaker in getting this to work.

however….

To learn how easy it is to create PHP sessions and cookies that span multiple sub domains sent me into a state of euforia. It launched me straight into the right direction.

I use the PHPBB forum as leading for userid/passwords. I added some additional scripts to PHPBB and integrated my own code in some PHPBB base script files .

If someone authenticates using the header fields in any sub-domain, a little flash app is used to do a secure call (URLRequest) to a user validation script within the PHPBB domain. PHPBB will log in and cookies/sessions are set. I integrated my code into PHPBB so if someone loggs in the normal PHPBB way the right cookies and session data is set as well and the person is logged into the sub-domains as well.

I tested it on IE8, Firefox, Chrome and Safari (for windows)

now for some code ….
I am not gonna reveal to much of my own code but if someone wants to know how to create a cookie that spans multiple domains… with .makeyourflashgame.com as an example…

public function setCookie($cookie, $value)
{
   $expire = $this->si->addTime(52,"w");
   setcookie($cookie,$value,$expire,"/",".makeyourflashgame.com");
}

public function clearCookie($cookie)
{
   $expire = $this->si->addTime(-1,"w");
   setcookie($cookie,null,$expire,"/",".makeyourflashgame.com");
}

and to create cross subdomain session state (on the same machine) you need to set the session.cookie_domain before starting the session

// set session cookie domain to main domain so the session will be available in all subdomains
$pos = strpos($_SERVER['SERVER_NAME'],".");
$server_name = $_SERVER['SERVER_NAME'];
ini_set('session.cookie_domain',substr($server_name,$pos,strlen($server_name)-$pos));
// start domain wide session
session_start();

If this website should become a success and the subdomains have to be split up into different servers, I will have to use create some other way to manage session data across multiple servers. Will probably be putting this data into a MySQL Database and use a cross domain session id cookie to access this data.

Next is …. user workspace management system.

Download the AS3 code from this article (rar)

See example of this tutorial in action

The Flint particle engine is THE actionscript 3.0 open source particle engine available on the net. It lets you create all kinds of particle effects like smoke, fire, explosions , trails and more.

Because it would be very nice to have this available in the PushButton Engine I gave it a go….

The Flint system uses particle emitters that can be configured and that produce particles with specific behaviour that render to a specific render class. Flint has several render classes like BitmapRenderer, BitmapLineRenderer, DisplayObjectRenderer, PixelRenderer and VectorLineRenderer.

Because I am no Flint specialist I can not really tell the difference between all these renderers but the process of integration will probably be the same for all.

In this article I used the Flint example examples\examples2D\FireAndSmoke\PureAS3. In this example a Flint BitmapRenderer class is created with 2 emitters (fire/smoke).

The Flint BitmapRenderer is a subclassed Sprite class that holds a Bitmap and on this Bitmap particles are being rendered using this Bitmap’s BitmapData object. Because the PBE DisplayObjectRenderer is be able to render sprites , it shouldn’t be very problematic to wrap this in a PBE renderer class, .

! Important note. Both Flint and PBE have a BitmapRenderer and DisplayObjectRenderer class, so to combine these in your source files, be sure to use the full namespace when you refer to a specific class.

Step 1 – Creating a FlintBitmapRenderer Class for PBE

The first thing we will do is to create a base FlintBitmapRenderer class that we can subclass in the future to create specific particle render classes.

Because I want to do this the easy way, and the Flint BitmapRenderer class is essentially a Sprite, I will subclass the DisplayObjectRenderer class to get to a FlintBitmapRenderer class.

public class FlintBitmapRenderer extends DisplayObjectRenderer
{
	     ...
}

I need to store the Flint BitmapRenderer class and the Flint emitters.

  private   var _renderer:BitmapRenderer;
  protected var emitters:Array = new Array();

It would be nice to have an attribute to access the Flint sprite so we can set filters etc.

public function get sprite():Sprite
{
    return _renderer as Sprite;
}

Because the Flint BitmapRenderer class takes width and height as constructor parameters we get these from our constructor.

In the constructor an function addEmitters is called. The function addEmitters() must be overridden by the derrived class and will add the emitters to the emitters:Array

When the emitters are added to the Flint BitmapRenderer, we set the renderer as the displayObject of our PBE DisplayObjectRenderer.

public function FlintBitmapRenderer(width:int, height:int)
{
  super();

  // create the bitmap renderer object
  _renderer = new BitmapRenderer( new Rectangle( 0, 0, width, height ) );

  // add emitters to the emitters:Array
  addEmitters();

  for (var e:int=0; e < emitters.length; e++)
    _renderer.addEmitter( emitters[e] );

  this.displayObject = _renderer;
}

Step 2 - Creating a subclass for the FireAndSmoke

To create a PBE FireSmokeRenderer class we can subclass the FlintBitmapRenderer class and add the emitters.

We create a canvas 250 pixels wide and 300 pixels high using the function super(250,300); in our constructor.

The emitters : Fire() and Smoke() are taken from the Flint example, sources are in the code download from this article. The emitters are added to the emitters:Array in the overridden function addEmitters().

	public class FireSmokeRenderer extends FlintBitmapRenderer
	{
		private var smoke:Emitter2D;
		private var fire:Emitter2D;

		public function FireSmokeRenderer()
		{
			// create a 250 x 300 particle canvas
			super(250,300);
		}

		protected override function addEmitters():void
		{
			emitters.push(smoke = new Smoke());
			smoke.x = 125;
			smoke.y = 290;
			smoke.start();

			emitters.push(fire = new Fire());
			fire.x = 125;
			fire.y = 290;
			fire.start();
		}
	}

Step 3 - Adding the FireSmokeRenderer to the scene

To add this to a PBE scene we have to create an PBE entity, add a SimpleSpatial component and the FireSmokeRenderer component.

We set the layerIndex of the render component to 1 so the rotating green star sprite will always be behind the smoke.

	    private function createFlintEntity():void
	    {
	       // Allocate an entity for our animated sprite
	       var flint:IEntity = allocateEntity();
	       // Register the entity with PBE
	       flint.initialize("flint");

	       var spatial:SimpleSpatialComponent = new SimpleSpatialComponent();
	       spatial.position.x = -125;
	       spatial.position.y = -150;

	       flint.addComponent(spatial,"spatial");

	       flintRender = new FireSmokeRenderer();
	       flintRender.scene = PBE.getScene();
	       flintRender.layerIndex = 1;
	       flintRender.positionProperty = new PropertyReference("@spatial.position");
	       flint.addComponent(flintRender,"render");

	    }

To add a nice color changing glow effect I created an onFrame event handler on the PBE.mainStage that will rotate glow colors for the FireSmokeRenderer.sprite glow filter.

	    private var glowColor:uint = 0x000000;
	    private var nextColor:uint = 0x000000;
	    private var lastTimer:int = 0;
	    private function onFrame(event:Event):void
	    {
	    	var elapsed:int = getTimer()-lastTimer;
	    	if (elapsed>2000)
	    	{
	    		// change color each second
	    		glowColor = nextColor;

	    		nextColor =
	    		   (Math.random()*0xff)*0x010000+
	    		   (Math.random()*0xff)*0x000100+
	    		   (Math.random()*0xff)*0x000001;

	    		lastTimer = getTimer();
	    		elapsed = 0;
	    	}
	    	flintRender.sprite.filters = [new GlowFilter(Color.interpolateColor(glowColor,nextColor,elapsed/2000))];
	    }

Download the AS3 code from this article (rar)

See example of this tutorial in action

To run the sample you need to put the green star sprite into the folder where the compiled swf is located.

The changes in a nutshell

• The Scene2DComponent class has been replaced by the DisplayObjectScene class.
• The Scene2DBitmapDataComponent class has been replaced by the
  BitmapDataScene class.
• The basic rendering is done using the DisplayObjectRenderer class that has a scene property
• The DisplayObjectRenderer has multiple properties that can be used to influence the drawing without linking it to a spatial
  • position can be used to set the X/Y scene (screen) coordinates of the object (! not world coordinates)
  • scale can be used to resize the object ( 1 = 100% )
  • rotation can be used to rotate the object ( in degrees )
  • alpha can be used to set the object’s transparancy
  • layerIndex can be used to set the object’s layer
  • zIndex can be used to set the object’s depth within the layer
  • registrationPoint indicates the pivot point of this object. With the SpriteRenderer for example the center of the image is used as the registrationPoint so the sprite is centered upon its position and will rotate around its center.

• Each of those DisplayObjectRenderer properties has a corresponding
  {property}Property of the PropertyReference type
  we have a positionProperty, scaleProperty, rotationProperty, alphaProperty, layerIndexProperty, zIndexProperty and a registrationPointProperty.
  For example , a SimpleSpatialComponent can be used to move or rotate the object using the positionProperty and rotationProperty.
• If the positionProperty is used and the scene attribute of the renderer is set, the referenced coordinates are treated as worldcoordinates and will be transformed to the scene.
• There is a SpriteSheetRenderer class that can be used to draw spritesheet animations
• There is a SpriteRenderer class that can be used to draw a sprite on screen
• The static Global class has been renamed to PBE ( com.pblabs.engine.PBE ).
• There is a PBE.initializeScene function to quickly setup your scene.
• Find the scene you created with PBE.initializeScene using PBE.getScene()
• Find the spatialManager you created with PBE.initializeScene using PBE.getSpatialManager()

I have recoded the examples from the earlier posts.

Recoding : Create an animated spritesheet

Original post : Create an animated spritesheet

Download the 538+ code for AnimatedSprite01

Download the 538+ code and download the resources for AnimatedSprite02

see working sample

Recoding : The PBEngine Scene2D BitmapData Component

Original post : The PBEngine Scene2D BitmapData Component

Download the 538+ code and download the resources for AnimatedSprite03

see working sample

When the asteroids get really small, they just vanish. When asteroids move out of the main (circle) view they vanish as well.

In the working sample, when you have destroyed all asteroids, the level is cleared and one proceeds to the next level. The higher the level, the more asteroids at the beginning of the level. Sometimes you even get a nice additional ‘bonus’ weapon.
( pssssttt .. the + key to add one still works )

You can see the work in progress here

I created 3 different asteroid animations (143 frames) using blender.

Asteroid 1

Asteroid 2

Asteroid 3

( everyone may use these sprite sheets )

You can find the blenderfiles for these asteroids here

You can see the work in progress here