Simple 2D Molehill Example

Here is a minimalistic FlashDevelop AS3 project that demonstrates how to use the Molehill API to draw a single 2D sprite on the screen. You can get the project here: fdproject-mole2d.zip.
Assuming you have followed the instructions below the result should look like this:

Flash: Simple 2D Molehill Example

To compile the example you need the Incubator version of the Flash Player, a new FlexSDK (“Hero”) and an updated playerglobal.swc which includes the Molehill API.
All files can be downloaded from Adobe Labs.
After downloading and unzipping the SDK to the folder {flexSDK} create a directory named “10.1” in {flexSDK}frameworkslibsplayer and copy the new playerglobal.swc into it. Next fire up FlashDevelop and in Settings->AS3Context update the Flex SDK Location so it points to the new SDK. Finally just unzip & extract the FD project and hit F5 to compile.

Here are the basic steps to draw a textured quad:

  • Create a vertex buffer with 4 points to define a quad.
  • Create an index buffer that keys into this vertex buffer to define two triangles.
  • Create and upload a texture.
  • Compile the vertex and fragment programs (I’m using the AGAL mini-compiler from Adobe).

Then on every frame:

  • Assign the vertex and fragment program.
  • Transform the sprite and create a model-view-projection matrix for the vertex program. Since this is a 2D example we have to set up an orthographic projection.
  • Draw the triangles.

The mvp transformation could be done by the vertex shader but to keep it stupid simple I’m creating the matrix in AS3. Also note that we need to flip the y-axis and shift the origin to the upper-left corner.