Creating an ActionScript 3 game: it’s all fun and games until it actually has to work.

Over the last 3 weeks, I’ve been trying to recreate Ticket to Ride, one of my favorite board games, in Flash. It’s been a voyage of triumphs and, ultimately, defeat. In this article, I’d like to share the code and my experiences with ActionScript 3.

If one is talking about creating a casual online game, there isn’t much discussion. ActionScript is the language. The most obvious reason is that it compiles to Flash, which runs on any desktop PC in the world and on many mobile devices. iPhone/iPad being the sole major exception, although even that is changing.

I wanted to figure out whether there were other reasons to use ActionScript. And I did find some. But first, let me give you the code. It’s far from perfect, but you’re free to extend on it.

What I really liked about ActionScript was the impressive speed with which you can build graphical interfaces. It’s very clear that this language is focused on building graphical applications. It was designed for it and you feel that in every possible way. Although the interface of my game isn’t very advanced, it also didn’t take any time to program. It just grew out of the way I structured the code.

What I didn’t like too much was the absence of more advanced data structures and ways to process them. It felt pretty awkward to have static typing for everything but the collection types. The contents of those is all dynamically typed. Compare it to Java before generics. Furthermore, I really missed a lot of the more advanced collection operation that a language like Python has.

Overall, I worked about 10 to 12 hours on this game in FlashDevelop. It was a great and motivating experience on the GUI side, but frustrating for the back-end code. In the end, I just couldn’t convince myself to push on and finish the scoring system for the game. Which is the only thing that’s really missing. That and much error handling.

I might come back to it later, until then, here’s the code. Have fun with it!

It’s been a while since I mentioned the all important discipline of tracing in ActionScript to get an inside look at what your application is doing. Getting feedback from your program at important points can mean the difference between hours of debugging and a quick analysis of the issue at hand. Previously there was the FDTracer plugin, but this is no longer needed. There are actually three much better ways that suite different situations.

Outputting information to a debug log can help you tremendously when struggling with annoying problems. Depending on the situation, there are a few options you can try out.

You might want to follow along in this FlashDevelop project.

Plain old trace()

ActionScript  already has a trace statement. It’s probably not so well known because you need to have the right Flash player for this to work. You either need to use the standalone player or the debug player. If you’ve installed FlashDevelop correctly, you should be fine. Keep in mind that an automatic Flash upgrade might have replaced your manually installed debug vesion.

FlashDevelop’s FlashConnect

If you’re developing with FlashDevelop, you can also use the build-in org.flashdevelop.utils.FlashConnect. The FlashConnect.trace directive connects to your running FlashDevelop instance and sends trace information directly to the console. If you have a Flash debug player installed this looks exactly like the previous statement.

It is useful if you don’t have a debug player, because it will work with any Flash player.

Firebug tracing

Both of the above options won’t be very handy when you are developing for the web. You can try to find your Flash log file, but wouldn’t is be much easier to see trace information directly in our favorite web debugging tool, Firebug?

It’s actually possible and fairly easy to get trace output to Firebug:

1

ExternalInterface.call("console.log", "tracing in firebug");

That’s all there is to it. Keep in mind that, due to security restrictions, this will only work when you deploy the Flash file to a remote server and use swfobject.js to start the program. FlashDevelop creates this configuration by default for you.

FlashDevelop example project

It’s been a while since I indulged in my Flash and 3D hobby. I’ve been a longtime Sandy 3D fan, but it was about time I tried the competition. This post gives a short overview of how to set up FlashDevelop to run your first Papervision3D application.

Before you get started, you’ll need a few essential tools:

• I’ll use TortoiseSVN (or any other SVN client) to get the latest version of Papervision3D. You can download a zip file of the current version, but setting this up once will make it a lot easier to follow all the latest development.
• I like FlashDevelop because it’s free and it has everything an IDE needs. I’m going to assume you’ve gone through the setup process and have configured FlashDevelop to use ActionScript 3 with the Flex SDK. This is also entirely free of charge and isn’t as much work as you might think.

Getting the Papervision3D code

Start of by creating a directory where you want to put the Papervision3D distribution. This won’t be your project directory because the distribution also contains the API documents and some examples.

In this directory right click and choose “SVN Checkout …” (adapt this to your system and SVN client) and enter the Papervision3D repository URL, which is http://papervision3d.googlecode.com/svn/trunk/as3/trunk/. Choose “Fully recursive” if it isn’t already selected and click ok.

After a while you’ll have the distribution on your PC. It’ll contain a few directories, most importantly “src” containing the actual Papervision3D library.

Setting up a Papervision3D project in FlashDevelop

No we’re ready to start a FD project. Open FlashDevelop and create a new AS3 Project. Put it in a different location than where you previously check out the Papervision3D distribution in order to avoid conflicts.

FlashDevelop will set up the project and create a “src” directory. It will also create an initial Main.as Flash application, but we’ll be replacing that in the next steps.

Copy the Papervision3D code into the src directory. Go into the src directory of the Papervision3D distribution and copy both directories (“nochump” and “org”) into the src directory of the FlashDevelop project.

Your workspace is ready.

Running the MeshCutting example

Papervision3D comes with a few examples, most of them require you to set up external resources, but not the MeshCutting example.

You’ll find it in the “examples/FlexSDK/MeshCutting” directory of the Papervision3D distribution.

Copy the files in the “examples/FlexSDK/MeshCutting/src” to your project’s “src” directory. Make sure you replace the Main.as.

That should do it. Run the FlashDevelop project and you’ll be looking at this (animated):

And now the real work starts.

ActionScript is probably one of the easiest languages to program visual effects. It has a wealth of APIs to manipulate images in all kinds of different ways. However, getting images into your program isn’t all that well documented. Especially if you are not working with Adobe’s commercial Flash products. For instance, the wonderful and free FlashDevelop. This article shows how to use the “embed” tag to embed images inside your Flash applet, which is one of the cleanest ways you can add those bitmaps to your application.

This article is based on FlashDevelop 3.2.2 RTM but will probably work with almost any FlashDevelop version. It is an updated, rewritten and more focused version of this article, published back in May 2008. In this tutorial I’ll show you how to get started with FlashDevelop, embed a bitmap and show it on screen.

Setup your system

Before you get started with this tutorial, you should make sure that you have configured FlashDevelop as explained in the FlashDevelop getting started guide. When the debug players are installed (I went with version 10.1), choose the ActionScript 3 option at the bottom of the page and install the free Flex SDK (I picked the free Adobe Flex 4 SDK).

Creating a project

With FlashDevelop installed and configured, the next step is creating a new project:

• Project > New Project
• We’re going to write an ActionScript 3 application, so pick AS3 Project
• At the bottom of the dialog, enter a name and a location. It doesn’t really matter what you enter here, just choose something that suits you.
• I left the package blank, which creates files in the default package.
• OK

You should see your project structure on the right. Now open the “src” folder and double-click Main.as. This should open the file. If you test the movie (the blue arrow triangle in the top bar, just to the left of the “debug” dropdown), you’ll probably see an error in the output pane (bottom): “No application is associated with the specified file for this operation”.

Embedding an image

private var layer0Class : Class;

private var layer0:Bitmap = new layer0Class();

import flash.display.Bitmap;

addChild(layer0);

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

package 
{
	import flash.display.Bitmap;
	import flash.display.Sprite;
	import flash.events.Event;
 
	public class Main extends Sprite 
	{
		[Embed(source = '../lib/Parallax-scroll-example-layer-0.gif')]
		private var layer0Class:Class;
		private var layer0:Bitmap = new layer0Class();
 
		public function Main():void 
		{
			if (stage) init();
			else addEventListener(Event.ADDED_TO_STAGE, init);
		}
 
		private function init(e:Event = null):void 
		{
			removeEventListener(Event.ADDED_TO_STAGE, init);
 
			addChild(layer0);			
		}
	}	
}

If you test the movie again, the image should show up. You’ve just embedded and instantiated your first bitmap in ActionScript.

You can find the full source and project files on GitHub.

(Image credit)

There are many resources to get you started with game programming in ActionScript. Many articles and tutorials will discuss the basics, but if you really want a quick start, a game engine is a great help. This post lists a number of interesting options.

Game engines come in many flavors, some offer you just a framework for showing 3D images, others almost don’t require any programming at all. Here are some of my favorite ones.

Yogurt3D

If you want to create a 3D Flash game, you could start with one of the 3 major 3D engines (Sandy, Papervision, Away) But if you want even more help, there’s Yogurt3D. While the others are more general 3D engines, Yogurt3D is directly aimed at 3D game development. It has higher level constructs, like animation, to support game development. My main gripe is the lack of documentation. There is a pretty extensive tutorial, but that’s about it. There’s no forum, so you’re going to have to Google a bit (but there seems to be quite a few articles around).

FFilmation

An isometric engine. If you like the style, you’re going to love this engine. Again, the documentation is lacking, but there’s a great demo that might convince you to give this engine a try.

Flixel

This is the way to go if you want to create a 2D game. There are detailled tutorials to get you started with almost any ActionScript editor immaginable (including FlashDevelop). The engine is still under very active development and there’s a lively community that will surely help you out if the wiki is insufficient.

PushButton Engine

Probably the most known, best documented and most active game engine for ActionScript. The PushButton Engine is build around the concept of “components”, which, to me, feels very natural, especially for a game. Watch this short introduction to get the gist of it (via BIT-101)

(image credit)

Recently, Keith Peters has been putting overtime into his Minimal Comps library. It’s an ActionScript 3 library that offers a large number of typical user interface components. Easily and quickly you can construct basic user interfaces in ActionScript. When Flex is a little too heavy, this is a really neat solution.

This is basically the most minimal minimal component application you’re going to see:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

package 
{
	import com.bit101.components.PushButton;
	import flash.display.Sprite;
	import flash.events.Event;
	import org.flashdevelop.utils.FlashConnect
 
	public class Main extends Sprite
	{
		public function Main():void
		{
			if (stage) init();
			else addEventListener(Event.ADDED_TO_STAGE, init);
		}
 
		private function init(e:Event = null):void
		{
			removeEventListener(Event.ADDED_TO_STAGE, init);
 
			new PushButton(this, 100, 100, "Click me", onBtnClick);
		}
 
		private function onBtnClick(e:Event):void
		{
			FlashConnect.trace("clicked");
		}
	}
}

Inspired by this minimal tutorial and written for FlashDevelop (remove the FlashConnect statements if you’re working in another editor).

BTW I wanted to give a demonstration where I integrated the YouTube data API, but it appears that none of the libraries are really up-to-date and/or well enough documented to get started in under 15 minutes. This one comes closest, but if you have a good suggestion, please let me know.

(image credit)

Flex and ActionScript combined give you a very powerful environment for programming graphics intensive application. The technology makes it easy to design and create animation rich interfaces. And now Degrafa adds yet another compelling choice if you want to easily create complex graphical interfaces.

In Flex, many graphics operations require knowledge of ActionScript. Degrafa allows you to decoratively specify those programs in the Flex MXML files that define graphic interfaces. Designers can thus more easily create and comprehend programs, while developers don’t need to switch back to ActionScript for many operations (or even complete programs).

Degrafa is open source and thus freely available.

Integration is incredibly easy, you can read the documentation in about 10 minutes and that’s really all you need to know. No hidden options or special URLs necessary.

I did create a small wrapper class, to make addressing the player a little more typesafe (and this also gives you autocompletion). Check out my Assembla SVN repository for the full code of what you can see on The Couch TV (there’s code for full screen in there that doesn’t work right now).

You can find the wrapper right here. The YouTubePlayer class extends Loader, which means you can add it anywhere you like. The class first needs to load the actual YouTube player on YouTube.com. This means you need to wait until everything is loaded before you can use the player. In ActionScript code it looks like this:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

package thecouch 
{
	import flash.display.Sprite;
	import flash.events.Event;
	/**
	 * @author Peter Backx - thecouchtv.com
	 */
	public class SimpleExample extends Sprite 
	{
		private var player:YouTubePlayer;
 
		public function SimpleExample() 
		{
	        addChild(player = new YouTubePlayer());
			player.addEventListener(YouTubePlayer.PLAYER_READY, playerReady);
		}
 
		private function playerReady(event:Event):void 
		{
			player.loadVideoById("2gGopKNPqVk");
		}
	}
 
}

I’ve also added wrappers for the loadVideoByUrl methods and a listener for the “ended” even. That means, you can use those directly on the YouTubePlayer object. You’ll have nice code completion in your editor. And unlike the example in the documentation this means you also have compile time type safety. The joy of typesafe object oriented programming.

The Main class shows you how to use them. If you want other methods or events, feel free to add them, or you can always ask me. I’d be delighted to expand this wrapper a little more.

The previous posts in this series (not all of them are still applicable, but will be updated shortly):

• Getting a list of videos (and some project setup)
• A bit about how the Flash stage works and fullscreen
• Install a php script to get the video parameters
• Getting the parameters for a video
• playing the video using Flash’s FLV player classes

Next up, I’m going to remove the proprietary YouTube Data API calls with this project.

What’s even more interesting than the great funny little Flash toy, is the fact that Grant gives all details of how it was implemented in ActionScript. There’s no source, but by the time you’ve read the entire blogpost, you have enough information to create the thing on your own.

Lots of links to very useful resources if you want to play MP3 files in Flash and lots of little details on how to obtain different visual effects.

Example FlashDevelop project.

There’s a reason this post is titled “experiments”. It is actually an unfinished work, but I wanted to give you a look at what I’ve already been able to create. This is how far I got for now:

1. First, I got an A-Wing from the blendermodels archive. Before I got the first render result shown in the picture above, I had to fix the normals of most of the meshes in there (in Blender: go into edit mode, select vertices and ctrl-n)
2. Next, get the export script from Dennis’s page and install it. Take care to get the correct directory, it’s not that easy to find. If you have one of the latest versions of Blender, you should look in your user folder. For Windows that’s “C:Documents and Settings<username>Application DataBlender FoundationBlender.blenderscripts”.
3. If you haven’t already done so, you also need to have Python installed. Python is necessary to execute the script.
4. Once you got this out of the way, you will need to restart Blender. Check the file > export menu and verify that the ActionScript option is available. If it’s not, you probably placed the AS3Export.py file in the wrong directory.
5. Select the object you want to export and click the export to ActionScript menu item. It’s probably a good idea to enter a package name, as this will keep your code cleaner.

Now you should have one or more .as files: one for every mesh and texture in your model. This model doesn’t come with textures, so there are none.

Next we are going to use those files in a FlashDevelop project. The first step is to create a new project in FlashDevelop and put the Sandy 3D library inside the src folder. Like described in previous blog posts.

Now inside the src directory, you should create a directory with the same name as the package you specified in step 5 above. If you forgot the package name or are not sure, you can open one of the files that was created and check the first line.

That’s pretty much it: add the meshes as Shape3D objects to your scene, just like you would add a cube or other shape:

1

scene.root.addChild( new Mesh() );

(you might want to add an appearance too)

You’ll notice I’m skipping a few steps here, but they are all very basic. If you download the example project and read through my previous blog posts, everything should be clear (feel free to comment if it isn’t).

You’ll notice a few issues/problems (correct me if I’m wrong):

• The 3D object I choose, consists of several meshes. Each with their own texture (material in Sandy3D terminology). The export plugin doesn’t really help you on this point. You need to create every mesh and add them individually to the scene.
• There seems to be an issue with the normal calculations. I did correct them in Blender as you can see in the small rendering at the top of my post, but still there seem to be missing triangles in the Sandy 3D version.
• It looks like there is an issue with a bounding box or face culling. I still need to investigate this thoroughly.

To be continued…

Example FlashDevelop project.