Wednesday, November 18, 2009

Pyronova 1.0 Beta & Butterfly Example

Pyronova project homepage

View documentation

I lied. I cannot wait until my midterm ends to finish Pyronova :p
Now it's in 1.0 Beta, and supports XML serialization.
Also, it's currently half-documented. I'll complete the documentation ASAP.

I've created this example combining Pyronova and Stardust. I think the outcome looks pretty nice :)

View SWF

The logics behind this effect is rather simple: the butterflies are created using Stardust (well, that's another story); the HueNode shifts the hue of the butterflies, and the BlurNode blurs the butterflies to create the glowy effect.

Tuesday, November 17, 2009

Pyronova Logo

Pyronova project homepage

View logo in full size

Whew, I'm kind of all-thumbs with Illustartor. It took me quite a while to get this lousy logo done :p

How do you think?

Friday, November 13, 2009

New Project for Post-Processing FX

View SWF

I'm starting a new project called Pyronova, which is a post-processing FX framework. It features a network-based design, which allows you to connect "Pyro nodes" as you like to create your own post-processing effects. The project is still under development, so the source you find in the repository is just its prototype.

Here's the network diagram for this example.

A BitmapDataNode represents a BitmapData object. A PerlinNoiseNode generates Perlin noise bitmaps. A DisplacementNode takes two inputs: one regular input and one as a displacement map. A BlurNode, as its name suggests, blurs a bitmap up. A RedrawNode redraws a bitmap with additional settings such as transformation matrices and color transforms. "Pyro layers" are final destinations for post-processing networks, each layer having one single root node as its "final appearance".

In this example, a BitmapDataNode is used to hold reference to the Bunny-In-Black (BIB) bitmap data. The BlurNode blurs the BIB bitmap (previously processed by the DisplacementNode with Perlin noise distortion) and then pass it to the RedrawNode. The RedrawNode is assigned a ColorTransform object with RGB multipliers of values 1.3, essentially lightening things up. Finally, Layer 2 presents this final "blurred and lightened-up" bitmap and is assigned an ADD blend mode, serving as a "glow overlay" to the original bitmap, which is displayed through Layer 1.

Here's some sample code that sets up the network:

I'll push this project into Beta as soon as possible.

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.

Wednesday, November 4, 2009

Stardust Video Tutorial on Actual Coding

04 - Basic Workflow part 1

05 - Basic Workflow part 2
View Complete Playlist

Stardust project homepage

At last, the video tutorials have begun covering actual coding. If you've watched the video of my speech for the 2009 PTT Flash Workshop, you might have noticed that I used a tablet to hand-write in OpenCanvas, using it as a digital whiteboard. The second half of the 4th episode of the video tutorials is actually a remake of the whiteboard hand-writing, in a form of an *cough* elaborate *cough* PowerPoint animation.

Enjoy :)

Sunday, November 1, 2009

Stardust Video Tutorials!

01 - Introduction
02 - Class Responsibilities
03 - Getting Started

Stardust project homepage

Finally! I've started recording video tutorials for Stardust.

This is my first time trying to use PowerPoint in video tutorials. I think using premade slides does make the videos look better, and, more importantly, helps me remember what I should say :p

I haven't gone to the parts where actual coding takes place, but still, these videos are worth watching, since they give you a full understanding of Stardust features and class responsibilities.