I wanted to test out a few game frameworks learn more about AS3, Unity, HTML5, and other platforms. Here is a complete list of many, many versions with full source code (See ‘Members Resources’ below).

UPDATE: A new contender in the HTML5/JavaScript gaming space is phaser.io. I may add a demo to this page soon. Leave a comment if you’d like to see it.

Articles

I wrote ‘Flyer Game’ for a series of articles I wrote for Adobe’s “Inspire” (formerly ‘EDGE’) online magazine. To appreciate the HTML5 versions of the game, its great to look back at the general game theory as well as the Flash theory shown in these articles.

• In “An introduction to developing games on the Adobe Flash Platform” I overview the complete AS3 source code in my article
• In “Developing Flash Platform games with the PushButtonEngine” I used a popular framework (PBE) to create the same game.

Downloads of FlyerGame

I provide full source-code to several versions of the FlyerGame. You can compare how each works, and learn more about gaming frameworks that way.

[nonmember]
FLASH VERSIONS

• 1. Flash Pro and AS3 (Very Simple) – [Download in ‘Members Resources’ below]
• 2. AS3 and PushButtonEngine (Component-Based) [PBEv1] – [Download in ‘Members Resources’ below]
• 3. AS3 and PushButtonEngine (Component-Based) [PBEv2] – [Download in ‘Members Resources’ below]
• 4. AS3 Stage3D [Starling Framework] (Very Simple) – [Download in ‘Members Resources’ below]
• 5. AS3 Stage3D [Starling Framework] (OOP Version) – [Download in ‘Members Resources’ below]
• 6. AS3 and Smash Framework – [Download in ‘Members Resources’ below]
• 7. AS3 and Flixel (Coming soon!)
• 8. AS3 and FlashPunk (Coming soon!)

OTHER VERSIONS

• Unity3D w/ C# – [Download in ‘Members Resources’ below]
• Loom w/ LoomScript – [Download in ‘Members Resources’ below]

HTML5 VERSIONS

• EaselJS Framework – [Download in ‘Members Resources’ below]
• ImpactJS Framework – [Download in ‘Members Resources’ below]
• CraftyJS Framework – [Download in ‘Members Resources’ below]
• MelonJS Framework – [Download in ‘Members Resources’ below]
• Spaceport.io Framework – [Download in ‘Members Resources’ below]
• LimeJS Framework – Github Source (Coming soon!)

[/nonmember]

Next Steps

• Wow, there is so much content here!
• Are you new to gaming? There is tons of gaming basics in this posts and code.
• Are you a veteran? Learn to compare/contrast each framework for yourself using the source code (See ‘Member Resources’ below).

Member Resources

[private_Free member]Enjoy this members-only content!
FLASH VERSIONS

• 1. Flash Pro and AS3 (Very Simple) – Great Article w/ Source Code
• 2. AS3 and PushButtonEngine (Component-Based) [PBEv1] – Great Article, Github for Flash Professional, Github for Flash Builder ActionScriptOnly
• 3. AS3 and PushButtonEngine (Component-Based) [PBEv2] – Github for Flash Builder ActionScriptOnly
• 4. AS3 Stage3D [Starling Framework] (Very Simple)- Github for Flash Builder ActionScriptOnly
• 5. AS3 Stage3D [Starling Framework] (OOP Version)- Github for Flash Builder ActionScriptOnly
• 6. AS3 and Smash Framework (Component-based)- Github for Flash Builder ActionScriptOnly
• 7. AS3 and Flixel (Coming soon!)
• 8. AS3 and FlashPunk (Coming soon!)

OTHER VERSIONS

• Unity3D w/ C# – Github Source (Component-based, like #2 above)
• Loom w/ LoomScript – Great Article & Tutorial, Github Source (Component-based, like #2 above)

HTML5 VERSIONS

• EaselJS Framework – Github Source (Simple, like #1 above)
• ImpactJS Framework – Github Source (Simple, like #1 above)
• CraftyJS Framework – Github Source (Component-based like #2 above)
• MelonJS Framework – Github Source (Simple, like #1 above)
• Spaceport.io Framework – Github Source (Simple, like #1 above)
• LimeJS Framework – Github Source (Coming soon!)

[/private_Free member]

Polls

After years of experience with PushButtonEngine from the PBLabs company, I am now learning PushButtonEngine2.

SUMMARY

It is radically different syntax, but the same great component-based idea. Much more info to come soon…

Next Steps

• None

Member Resources

[private_Free member]Enjoy this members-only content!

• Download the game source and see how it compares to HTML5 in “FlyerGame for HTML5 (See PBEv2)“.

[/private_Free member]

I created a new demo. Download it, add your own (free) PBE swc file from Pushbuttonengine.com, and test the demo!

RADIAL GRAVITY

Box2D does many things well, including support for one worldwide gravity (*everything* falls down, up, at whatever angle you want, or you can have no worldwide gravity at all.

One thing that is *NOT* natively supported is for a Box2D body to have RadialGravity (like an ‘earth’ that attracts a ‘moon’ to it) on one or more objects. But its possible to create.

I have created a demo with Box2D and Pushbutton to support this radial Gravity. My calculations are based on distance (further = less gravity) and mass (light objects are affected more by heavy objects). But, none of my calculations reflect real physics calculations. Depending on the game I may create, I will adjust it manually to ‘look good’.

USES FOR RADIAL GRAVITY

* #1 You can have 1 or more objects that ‘repel’ 1 or more objects. Or ‘attract’.
* #2 This is cool for wind/water affects on objects.
* #3 You can have planets with planetary gravity. I’ve seen some games that do this (likely hand-made math, not Box2D).

Next Steps

• Follow comments and add your own comments on the PushButtonEngine Forums.
• Question – In my RadialGravityComponent I have a method of _getRadialGravityComponentForB2Body (aB2Body : b2Body) : RadialGravityComponent. It works fine, but is there another way to do this more efficently?
• Question – Is there an existing way to do this within PBE, generally speaking, to get the IEntity ‘owner’ for a b2Body?

Member Resources

[private_Free member]Enjoy this members-only content!

• Download the PBEBox2DRadialGravity.zip Flash Builder 4.5 as3-only Project.

[/private_Free member]

I created a new demo. Download it, add your own (free) PBE swc file from Pushbuttonengine.com, and test the demo!

PHYSICS AND COLLISION

Box2D does many things well. While we typically want the system to manage physics, we can also use it ONLY for collision detection, then manage the consequences of the collisions ourselves. This collision detection is fast and full of good information about the collision (compared to Flash’s MovieClip.hitTest() ).

In general, when Box2D is setup and 2 (or more) objects have collisionType and collidesWithTypes properly, they react with physics – bouncing off each other, or something similar. You can also listen to the events;

owner.eventDispatcher.addEventListener(CollisionEvent.COLLISION_EVENT, _onCollision);

If you DON’T set those properly there will be no physics (good for my needs) but you also do not get collision events (bad for my needs).

COLLISION WITHOUT PHYSICS

To get the benefits of collision detection without physics we need to use the isSensor property in Box2D. That treats the objects as sensors (detect but do not react). Then you can create a custom reaction (using 100% of Box2D’s functionality – torques/forces/etc…). PBE does not expose (at least not in a way I could fine) the isSensor property so I created a few custom classes to help.

USES OF COLLISION WITHOUT PHYSICS

* #1 You could handle your own hit detection in a game this way.
* #2 The small idea expressed in the demo, could also be used to steer computer AI around a complex race-track. Perhaps the tiles shown in the demo would be invisible to the user in a real game, and only ‘seen’ by the cars as they detect the desired angle to move around a track. This could also be used for ‘water flowing’ or ‘wind blowing’ on objects too.

ALSO FEATURED IN THE DEMO

* a) You will also see in the attached demo a Box2d setup done with XML. Nice! An even simple demo of just this part can be seen here too. viewtopic.php?f=15&t=2172
* b) You will also see Box2D objects skinned with symbols from an embedded swf. Nice! (Also shown in ‘a’ above)
* c) You will also see a component to have a Box2D object ‘face’ (in the direction of) the way its moving

Next Steps

• Follow comments and add your own comments on the PushButtonEngine Forums.
• Question – Anyone who wants to make many more tiles in my demo to show a more complete demo of #2 above, go for it! I’d love to see that.

Member Resources

[private_Free member]Enjoy this members-only content!

• Download the PBEBox2DCarAndTrack.zip Flash Builder 4.5 as3-only Project.

[/private_Free member]

I created a new demo. Download it, add your own (free) PBE swc file from Pushbuttonengine.com, and test the demo!

Here is a simple but complete Box2D physics example. A FLA file contains the skins for the 2 objects. XML loads the entities and puts the on the screen. Click with the mouse to create a new Box2D object. Cool!

As an FYI, I built it from the PBE source code (as files) on GIT as of a week before this post. Not sure that matters. Add your own source or swc for PBE to my file (attached).

FLEXIBILITY

* You can change the xml and the main document class easily to adjust the position and number of objects. Go for it!
* You can also comment out the debugger code in the xml (see a comment in that file) to remove the debug-outlines (boxes shown around the box2d objects). The debugger is helpful for learning, but not desirable in your final game.

Next Steps

• Follow comments and add your own comments on the PushButtonEngine Forums.
• Question – Click the mouse button. The star shows for 1 frame VERY large, then changes to the desired size. How can I eliminate the odd sizing on that first frame (ideally) or hide (acceptable workaround) the object for that one first frame?
• Question – The center of the screen is 0,0. How in XML can I make the 0,0 be the upper-left of the stage (like Flash/Flex generally has it). Please test your suggestion in the attached zip and then post your answer here. Thanks so much!

Member Resources

[private_Free member]Enjoy this members-only content!

• Download the PBEBox2DXML.zip Flash Builder 4.5 as3-only Project.

[/private_Free member]