Sunday, November 8, 2009

PushButton Game Engine Example: Arrow Walker

View SWF
View Source

This example is my first attempt to try out PushButton Engine, an AS3 component-based game engine. I must say that the guys working on this project really have done a fantastic work. This engine is highly flexible, highly extensible; moreover, it supports XML serialization and advanced asset management (such as run-time loading).

In a component-based game engine, everything is regarded as an entity, be it as concrete as characters, obstacles, or as abstract as scene, renderer. If, you might ask, everything is regarded as equal, how may their behaviors differ? The answer is component. Each entity can possess different set of components, which can store properties like position, and carry out behaviors such as moving. This component-based structure would solve the problems present in inheritance-based designs. If you are interested what problems can be caused by inheritance-based designs, you can check out this video by Ben Garney, the lead developer for PushButton Engine.

Alright, that's enough for the introduction. Now let's get down to the example. This example , called Arrow Walker, is basically just an arrow that can move around, controlled by the arrow keys.

NOTE: This example is built with the latest PushButton Engine, revision 615 so far. And the code shown in this post is partially stripped out and modified from the original source for clarity. You can check out the complete source code here.

First off, use the PBE.startup() method to start up the engine. This method essentially tells the engine which Stage instance is the main stage. Then for a most minimalistic example, at least a scene and an object are needed. In this example, I split the codes for these two entities apart for clarity (the setupScene() and setupArrow() method).

The allocateEntity() method is the method that must be used whenever you want to create a new entity.

Now lets look at the setupScene() method. All that we need for a scene is a DisplayObjectScene component. This component renders entities with a spatial component, which stores spatial information including position and rotation, and a DisplayObjectRenderer component. A SceneView object is a sprite the renderer can render onto.

Next, let's look at the setupArrow() method. The DisplayObjectRenderer component points to a movie clip named arrow_mc, which would be constantly rendered by the scene entity after the DisplayObjectRenderer component is added to the DisplayObjectScene component of the scene entity. The PropertyReference objects tell the renderer to query a specified spatial component for position and rotation information. For instance a property reference with a string "@spatial.position" assigned to it tells the renderer to look for a component named "spatial" and check the component's "position" property, in order to obtain the entity's position information. The same logic applies to a property reference with a string "@spatial.rotation" assigned to it.

Finally, let's look at the SimpleController component, which controls the arrow's moving behavior and handles border conditions, confining the arrow within a 640x480 rectangle region. This component extends the TickedComponent class, whose onTick() method is called every "frame". The _keyMap property is a dictionary object for storing key data (whether a key is pressed). You can check out the source code for this class to see it's complete implementation.

Note that the "frame" here doesn't mean the frame in Flash Player, but the PushButton Engine's own internal frame system handled by the ProcessManager class. It's designed this way so that the game's numeric data can update independently of the Flash Player's current framerate.

Alright, we're done. You can view the result here and check out the source code here.
For those advanced PushButton Engine users, this example seems to be way too easy.
But for those who are interested in this engine and are about to try it out, I hope this example helps understand the basic usage of PushButton Enigne.


Icarus said...

Its great to hear your into PBE. Any plans to component your excellent Stardust?

CJ Cat said...

Of course, but I need some more time to get familiar with PBE enough to be able to do that :p

milkmidi said...


JD Conley said...

Nice example CJ, but you might want to cache your PropertyReferences (lines 24/34 in your onTick excerpt). They're pretty expensive to create each time and perform much better if you keep them around for a while since they do some caching under the hood. said...

Thanks - this is the first example I have seen that ties a MovieClip on the stage to the engine. I am looking for more advanced Tut's that work against 1.0 release. This one did except for ProcessManager.instance.testAdvance(0);