I was recently asked by LaboratoryGames (also, here’s their tumblr page) to develop a special shader to be applied on their Starling game called “Television“, to be played on the OUYA console. They are submitting it for the OUYA’s CREATE Game Jam event which is due very soon!

Given my experience in AGAL, I thought “Why not!” and what a better way to re-familiarize myself in Flash Stage3D shader programming!

Here’s an early demo of what it can do so far:

This area requires
Adobe FlashPlayer version 11.3 or above.
iOS Devices are not currently supported.

See the 2nd demo here, with more controls and features!

The Main Challenge

Writing shaders directly in plain-old AGAL is never fun. There is limitations (although that is greatly alleviated in version 2.0). Yes, there exists tons of helpful libraries nowadays to make this task a lot easier, like GLSL2AGAL, EasyAGAL, ASGL, or simply doing your own custom find-and-replacements to conform to the AGAL language. I think Flare3D, Minko and other 3D engines have their own “flavor” of shader programming as well. Essentially, it all boils down to the same awful cryptic  code!

Since I’m adventurous (or crazy?), I decided to write my own helper class  to parse a Shader File BEFORE it gets assembled by Adobe’s AGALMiniAssembler.

What my Helper Class solves

It basically keeps track of all the temporary variables and allocates them with special keywords that I’ve developed: #alloc and #release. I’ve also did something similar as the AGALMacroAssembler, where you can define your own aliases, with: #alias.

NOTE: These keywords are by no means used by the assembler, I’ve REALLY just made these up myself, so don’t start assuming these are supported keywords in AGAL! lol

At assembly-time, this allocation / release process allows my shader to automatically figure out which available Temporary Fragment Register is available and use it. The class also reports the maximum (highest register index) amount of temporary registers used. In the case of “Television” only 4 we’re used so far!

Other Challenges

AGAL write masks: I’ve been banging my head for quite a number of hours just to understand the wonders of AGAL write mask (Thank you so much Sergey Gonchar for that explanation!), but for some reason AGAL decided to be evil with me and actually cared whether I used “rgba” vs. “xyzw” in some cases. You can imagine how frustrated I was.

Extracting RGB colors individually: Pulling each color-channels separately from the original image was a pain in the butt. It took me a while to realize I actually need to do three (3) separate tex operations to sample the same texture – only at different locations each time. I’ve started by doing all three initially, but wasn’t getting the correct result (yeah write masks, I’m looking at YOU!). Once I figured out how to extract just the red channel by itself, the other channels were a breeze.

Finally, after all that struggle, I was able to mix the several textures together and apply different constants for each features. LaboratoryGames asked me to make most (if not all) of the parameters controllable, which I think is a fair request for any Shaders!

Afterall, you may not want an extreme “broken-TV ” look to be applied for the entirety of your game, right?

I think their game is going to look awesome! Keep an eye on their twitter feeds (@LaboratoryGames) to know when “Television” is released!

SOURCE-CODE: I apologize if no code was demonstrated in this post. I will discuss further with the client to see if we can agree on what I can disclose from my code. Thanks!