To make the life of an actionscript developer , that works with the open source Push Button Flash Game Engine, just a little better, makeyourflashgame.com now offers PBE source code generation .
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