Porting an HTML5 Canvas WebGL game to Flash ActionScript 3.0

Question

I had created an HTML5 Canvas WebGL game in January for theMozilla Game On 2010 competition (pretty late, I know - I never released it until yesterday). Now I want to port it to Flash ActionScript 3.0 for a college assignment.

I'm well versed with both static languages like C/C++ and Java; and dynamic languages like Python and JavaScript. However I don't know ActionScript, but since it's a subset of ECMAScript it should be pretty easy to understand.

I want to learn programming in ActionScript 3.0 so that I may be able to port my game in Flash. To be more specific, I want to know more about:

• How is ActionScript different from Browser and Server-Side JavaScript, and basics.
• OpenGL programming in ActionScript (including loading textures, shaders, etc).
• How to create a HUD in Flash using a 2D HTML5 Canvas like API (in my game I have 2 canvases, one for the 3D game and another overlaying it for the heads-up display).
• Support for vector and matrix calculations in ActionScript.
• How to load assets like audio and sprites in Flash.

I would appreciate it if you would provide me a link to a page from where I can learn more about these topics. A more direct hands-on approach would be preferable.

It would be even more helpful if you would check my source code in JavaScript and suggest the best possible way for me to tackle this problem.

The code for the main game engine and the game itself may be found in my Github repository .

Answer 1

ActionScript and JavaScript are very similar at their core. In some ways you can think of ActionScript as more like a robust library layered on top of ECMAScript. There are a few differences (namely ActionScript likes to think of itself as a class-based oop, where as JavaScript is prototype-based), but if you are comfortable with one, then you should be pretty at ease with the other.

ActionScript has a class based inheritance system and supports interfaces (but you can still do some prototypical magic if you want, but its not recommended). It also supports strongly-typed objects.

var object:MovieClip = new MovieClip();

This will strongly type the object variable as a instance of the MovieClip class.

If your game is very 3D intensive, then you'll want to look into the new Flash 11 Stage3D and Context3D classes. These expose a low level GPU accelerated API that before Flash 11 wasn't possible. You can do interesting 3D stuff with Flash 10, but you are usually using drawTriangles() , which was not hardware accelerated. Flash 11 is currently in beta, but it should be out very soon. There are beta versions of the Flex SDK that should let you compile targeting the Flash 11 player.

There are also quite a few 3D libraries that are built on-top of these low-level api. If you goggle around for them, they are easy to find. But I would recommend getting a solid understanding of how ActionScript works before diving into the 3D libraries.

The HUD stuff in flash is simple whether you go with Flash 11 or Flash 10. For "classic" flash, you'll want to get familiar with the display tree concept they use in flash. Just make sure the display order is correct, and your HUD DisplayObject will always be "on-top" of your rendering DisplayObject

For Flash 11, StageVideo and Stage3D objects sit directly above the stage, but behind all normal flash DisplayObjects that are attached to the stage. So in that case, I would let the Stage3D api take care of all of your heavy rendering lifting, and use the traditional display stack for your HUD elements.

You'll probably also want to grab yourself Flash Builder over Flash CS5.5. If you are a programmer (which I am assuming you are since you are posting here), it wont make your eyes bleed trying to code. FB is based off eclipse, and its pretty decent but not perfect. But if you grab yourself the free Flex SDK, and don't mind using the command line, you can get started compiling swfs pretty quick and cheap (aka free).

Also, look into FlashDevelop . I haven't used it in a while, since switching to FB for its built in profiler, but it might be of use to you.

Importing images and audio is pretty straight-forward with the Flex SDK.

[Embed(source="logo.gif")]
public var LogoBitmapData:Class;

and then later instantiate the class:

 var bitmapData:BitmapData = (new LogoBitmapData()) as BitmapData;

And then use it where ever you want to.

Just a note about the Flex. Flex is a set of UI libraries built on top of the normal Flash API, the Flex SDK includes the libraries and tools to compile MXML and ActionScript code files. So, despite it sounding like you should use the Flex SDK to compile Flex apps, you can use it to compile straight ActionScript code as well.

There are built in classes for Vector3D and Matrix3D .

As far as tutorials or references, I don't have any to offer really. I've found that most of the information on the internet about ActionScript programming is pretty hit or miss (when you can find something thats not written by a graphic designer). I'd dig around in here and see if you can find anything that makes sense to you.

There is obviously a lot more I could go into about this stuff, but hopefully this will give you a push in the right direction.

Answer 2

Welcome to AS3 :)

@32bitkit beat me to the IDE info, but I'd absolutely recommend Flash Builder. It's a real tool and worth the money if you're going to be doing any real AS3 work.

As far as actual tutorials, Senocular is known for writing some of the best content out there. He has a number of great tutorials here , but the following two are especially excellent introductory tutorials for AS3:

• AS3 Introduction in Flash CS3 This tutorial is good because it explains the differences between AS2 (very JavaScript-like) and AS3. Ignore the fact that it's based on using the Flash "IDE."
• AS3 Introduction Without Learning Flex This one is useful because it give more of an introduction to the language itself, without all of the trappings of the IDE or the Flex framework. It will help you understand the language itself.

As shown in that second tutorial, an AS3-based project will inherit from the flash.display.Sprite class. You can view the docs for that here . Perhaps it sounds silly, but you'll honestly learn quite a lot about AS3 by just browsing the AS3 Reference docs . Adobe has done a good job with those.

Another thing to be aware of in AS3 is how events are handled. This tutorial explains how the EventDispatcher class functions as the base of the event management. You can use the built-in events or dispatch your own.

HTH!