Archive for the ‘PushButton Engine’ category

PBE Series: creating spatial objects via ActionScript

December 19th, 2009

Prerequisites:

Today I want to cover how to create spatial positioned objects with PushButton Engine via ActionScript.
With the current build, you got two possibilities:

  1. create a SimpleSpatialComponent or
  2. create a Box2DSpatialComponent.

Remark: if you want to display graphics only (meaning without a spatial component), it’s also possible to position them directly. See PBE Series: quickly displaying sprites via ActionScript for more information about that!

So what’s the difference between those two? In short, Simple-SpatialComponent is not driven by a physics engine. Box2D-SpatialComponent is, as the name might let one guess, bound to Box2D. If your SpatialManager is a Box2D-ManagerComponent (again, see PBE Series: initializing your scene via ActionScript how to setup your scene), you can easily work with both types of objects in your scene, but remember that a Simple-SpatialComponent cannot collide with a Box2D-SpatialComponent. So for everything which needs physical interaction, you want to use Box2D-SpatialComponent.

Anyway, not every game needs physics, so let’s start with the SimpleSpatialComponent:

//Create a new entity:
var myEntity:IEntity = PBE.allocateEntity();
myEntity.initialize("MyEntity");
 
//Create our spatial component
var spatialComp:SimpleSpatialComponent = new SimpleSpatialComponent();
spatialComp.spatialManager = PBE.getSpatialManager();
spatialComp.objectMask = new ObjectType("Renderable");
spatialComp.position = new Point(0, 0);
spatialComp.size = new Point(256,64);         
 
//Add the component to the entity:
myEntity.addComponent( spatialComp, "Spatial" ); 			
 
//Since we want to visualize the entity, we need a simple sprite renderer:
var renderComp:SpriteRenderer = new SpriteRenderer(); 
 
renderComp.scene = PBE.getScene();
renderComp.fileName = "../assets/Images/platform.png";
 
//Bind render component position and rotation to spatial component:
renderComp.positionProperty  = new PropertyReference("@Spatial.position");
renderComp.rotationProperty = new PropertyReference("@Spatial.rotation");
 
//Add the component to the entity:
myEntity.addComponent( renderComp, "Render" );

The most important thing to note, is that the render component’s position and rotation properties are bound to the spatial component.

Now to the Box2DSpatialComponent:

//Create a new entity:
var myEntity:IEntity = PBE.allocateEntity();
myEntity.initialize("MyEntity");
 
//Create our spatial component / body:
var spatialComp:Box2DSpatialComponent = new Box2DSpatialComponent();
spatialComp.manager = (PBE.getSpatialManager() as Box2DManagerComponent);
spatialComp.position = new Point(0, 0);
spatialComp.size = new Point(50, 50);
spatialComp.collisionType = new ObjectType("Something");
spatialComp.collidesWithTypes = new ObjectType("Something", "SomethingDifferent");
 
//We also need a collision shape, which collides with the world (meaning other shapes):
var shape:CircleCollisionShape = new CircleCollisionShape();
shape.radius = 1.0;
shape.density = 20;
 
//Now we add the shape to the spatial component / body:
spatialComp.collisionShapes = new Array();
spatialComp.collisionShapes.push(shape);
spatialComp.buildCollisionShapes(); //don't forget to build the collision shapes!
 
//Add the component to the entity:
myEntity.addComponent( spatialComp, "Spatial" ); 			
 
//Since we want to visualize the entity, we need a simple sprite renderer:
var renderComp:SpriteRenderer = new SpriteRenderer(); 
 
renderComp.scene = PBE.getScene();
renderComp.fileName = "../assets/Images/platform.png";
renderComp.positionProperty  = new PropertyReference("@Spatial.position");
renderComp.rotationProperty = new PropertyReference("@Spatial.rotation");
 
//Add the component to the entity:
myEntity.addComponent( renderComp, "Render" );

I think the code is pretty self-explanatory. The basic work flow is to first create a body (spatial component), then some collision shapes, add those shapes to your body and then build the collision shapes. This is just a start, feel free to play around with all the properties and see how they affect the body’s behaviour!

PBE Series: quickly displaying sprites via ActionScript

December 16th, 2009

Prerequisites:

There’s not much to say. We’ll just create an entity with a sprite render component – and position it in our scene.

//Create a new entity:
var myEntity:IEntity = PBE.allocateEntity();
myEntity.initialize("MyEntity");
 
//Render component:
var renderComp:SpriteRenderer = new SpriteRenderer(); 
 
renderComp.scene = PBE.getScene();
renderComp.fileName = "../assets/Images/platform.png";
renderComp.position = new Point(0, 0);
renderComp.rotation = 0.0;
 
//Add the component to the entity:
myEntity.addComponent( renderComp, "Render" );

That’s the comfortable thing when working with PushButton Engine! You don’t necessary need a spatial component or such, just to display graphics. In case you wonder what a spatial component is: they’ll be covered in the next PBE Series tutorial!

PBE Series: initializing your scene via ActionScript

December 11th, 2009

Prerequisite: use a current version of PushButton Engine.

This will be a short tutorial. It will show you how to intialize your PushButton Engine scene properly via ActionScript.
Let’s get started! Somewhere in your main class, paste in this code:

// Startup the engine:
PBE.startup(this);
 
//Create your scene view:
var sceneView:com.pblabs.rendering2D.ui.SceneView = new com.pblabs.rendering2D.ui.SceneView();
 
//And now initialize the scene:
PBE.initializeScene( sceneView, "Scene", null, Box2DManagerComponent );
 
//Now you're ready to load a level file like so:
LevelManager.instance.load("../assets/levelDescriptions.xml", 1);
 
//Or create your entites directly in code:
var myEntity:IEntity = PBE.allocateEntity();
myEntity.initialize("MyEntity");
//...go on with adding components to your entity as you like :)

A quick remark on the initializeScene: if you don’t want or need the Box2DManagerComponent, you can use the BasicSpatialManager2D:

PBE.initializeScene( sceneView, "Scene", null, BasicSpatialManager2D );

That was it! Easy eh?

Great tutorial on using the PushButton Engine console

November 25th, 2009

Natebeck has posted a great tutorial on how to use the PushButton Engine console. I guess there’s no need to say how important consoles can be in the final stage of game development (read balancing). It covers the basics as well as how to add your own console commands – and a little spoiler: PBE does make this really easy, so check it out at his blog!

Developing games or apps with PushButton Engine using FlashDevelop

November 22nd, 2009

In case some readers don’t know, PushButton Engine is a component based game engine for Flash/ActionScript3.
I am using it for my rapid prototyping tool (current working title “LevelMaster2000″). With this post, I’d like to wrap up how I got my development environment setup.

Basically, there are three options when coding ActionScript (I am not counting FlashCS3/4 as an option!)

  1. use Adobe FlexBuilder3 / nowadays FlashBuilder4
  2. use FDT
  3. use FlashDevelop

Since FlashDevelop is free and open source and (seems) mature, I decided to go with it.

Installation was pretty straight forward, and there are good docs how to setup a project with PushButton Engine. I am also working with Flex SDK 3.4, haven’t yet tried version 4, but that might come later on.

As soon as you got your project running, you’ll probably miss the debugger (at least if you have some programming background ;) ). There’s also a solution to this: FlexDbg, a debug plugin for FlashDevelop. You can get it here (if that doesn’t work, try http://gforge.opensource-sw.net/gf/project/flexdbg). Just copy the files to your FlashDevelop/Plugins directory.

After restarting FlashDevelop, the debug-toolbar should be visible. You also get some windows (breakpoints, locals, stack) you might want to dock somewhere. If you navigate to Tools > Programm Settings > FlexDbg, you can set hotkeys for debugging, which is nice as always needing to press a button can be a bit annoying.

So, with this done, you’re setup for action!

A last remark: it seems that alternately using FlashDevelop’s “Test Movie” and FlexDbg’s “Start” confuses FlashDevelop so hard, that it won’t start the movie after all. Examining the TaskManager, a flash.exe starts up, but doesn’t show up. The solution is to kill the process, restart FlashDevelop and don’t use those two functions along. After all, you probably won’t need the standard “Test Movie” anymore anyway!

If somebody has a better solution to this problem, I’m happy to hear it and update my post.