PBE provides some very simple, basic tuts on their docs page that will get you up and running quickly. After completing them I knew I needed to learn more about managing levels, spritesheets, projections, efficient ways to manage components, collisions, layer depths, and so forth.

If you tried them and found them frustratingly unable to compile, try them again: they were updated recently to match the examples that are included in the distribution download.

I was able to compile and build all of the tuts from a single project directory into Flex Flash and FlashDevelop. The Flex project is really an ActionScript project, but putting it in an MXML is trivial.

Mathew Casperson Tutorials

The next tutorial series I tried was very useful, because it starts a series demonstrating the use of a factory class to build game sprites. Unfortunately it was written before a refactor that changed a lot of things in the code.

An initial compile attempt in Flex yields:

1046: Type was not found or was not a compile-time constant: Scene2DComponent.
1046: Type was not found or was not a compile-time constant: SimpleShapeRenderComponent.
1119: Access of possibly undefined property instance through a reference with static type Class.
1120: Access of undefined property Global.
1180: Call to a possibly undefined method Scene2DComponent.
1180: Call to a possibly undefined method SimpleShapeRenderComponent.

To fix the MXML:

replace script contents with this:

import com.pblabs.rendering2D.ui.FlexSceneView;
import com.pblabs.engine.*;
 
 protected function appComplete():void
 {
   PBE.startup(this);
 
   var sceneView:FlexSceneView = EntityFactory.createScene("scene");
   addChild(sceneView);
   EntityFactory.createPlayer("player", "scene");
 }

To fix the EntityFactory class:

import PBE and FlexSceneView

Replace entire createScene method with this:

static public function createScene(name:String):FlexSceneView
 {
 var sceneView:FlexSceneView = new FlexSceneView();                        // Make the SceneView
 sceneView.width = 800;
 sceneView.height = 600;
 
 PBE.initializeScene(sceneView);
 return sceneView;
 }

Replace entire createPlayer with this:

static public function createPlayer(name:String):IEntity
 {
 var entity:IEntity = allocateEntity();                                 
 
 var spatial:SimpleSpatialComponent = new SimpleSpatialComponent();   
 
 spatial.position = new Point(0,0);                                   // Set our hero's spatial position as 0,0
 spatial.size = new Point(50,50);                                     // Set our hero's size as 50,50
 spatial.spatialManager = PBE.spatialManager;                                
 
 entity.addComponent( spatial, "spatial" );                             
 
 var render:SimpleShapeRenderer = new SimpleShapeRenderer(); 
 
 render.isCircle = true;
 render.radius = 25;
 render.positionProperty = new PropertyReference("@spatial.position");
 render.scene = PBE.scene;
 entity.addComponent( render, "render" );
 
 entity.initialize(name);
 
 return entity;
 }

The next tutorial introduces keyboard control, which is handled almost identically to the one in the PBE tutorials. To make it work add the component definition to EntityFactory verbatim.

Replace the contents of  keyboardController.as with:

package
{
	import com.pblabs.engine.PBE;
	import com.pblabs.engine.components.*;
	import com.pblabs.engine.core.*;
	import com.pblabs.engine.entity.*;
 
	import flash.geom.Point;
 
	public class KeyboardController extends TickedComponent
	{
		public var positionReference:PropertyReference = null;
		public var speed:Number;
		protected var xMovement:Number = 0;
		protected var yMovement:Number = 0;
 
		public override function onTick(tickRate:Number):void
		{
			var position:Point = owner.getProperty(positionReference);
 
		 	if (PBE.isKeyDown(InputKey.RIGHT))
		 	{
                position.x += 1*speed;                // Move our hero to the right
    		}
            if (PBE.isKeyDown(InputKey.LEFT))
            {
                position.x -= 1*speed;                // Move our hero to the left
            }
            if (PBE.isKeyDown(InputKey.UP))
            {
            	position.y -= 1*speed;
            }
            if (PBE.isKeyDown(InputKey.DOWN))
            {
            	position.y += 1*speed;
            }
 
            if (position.x > 374)
            {
                position.x = 374;                // Set our position at the wall edge
            }
            else if (position.x < -374)             {                 position.x = -374;               // Set our position at the wall edge             }             else if (position.y> 274)
            {
            	position.y = 274;
            }
            else if (position.y < -274)
            {
            	position.y = -274;
            }
            // Send our manipulated spatial variables back to the spatial manager
            owner.setProperty(positionReference, position);
		}
	}
}

The next tutorial shows how to embed a bitmap and animate it in place of the simple circle shape. Replace these lines:

var Render:SpriteRenderComponent = new SpriteRenderComponent();
Render.loadFromImage = "../media/idleright.png"; 

with these:

 var render:SpriteRenderer = new SpriteRenderer();
 render.fileName = "../media/idleright.png";

I tried several tutorials on spritesheets and none of them would both compile and work. The closest I got was an example that would compile and display the first frame in the sheet. Not giving up though – it will be my next post for sure!

Post to Twitter