About actionscriptandotherthings

ActionScript enthusiast, tech writer, musician. Live and work in San Francisco.

Age of Defenders: Interview with the head of game development

Age of Defenders is a tower defense game built with Flash (for web versions) and AIR (for tablet and mobile versions). The game is available in both the App Store and the Android Market, as well as in browsers, and will soon be available on the Blackberry Playbook.

Adobe gaming evangelist Tom Krcha interviews head of development Tomáš Botek about the development process and technology challenges. Highlights:

Me: How long have you been working on the original browser game and how big is the team?

Tomáš: We have started with a web version, which took us approximately 1 year. We are a team of 4 programmers and 3 designers. We have spent a lot of time thinking about the concept of the game.

Me: How long did it take to port it from iOS to Android with AIR?

Tomáš: When we had the first tablet version ready (iOS version), all we had to do for the other platforms was to work with the resolutions. The transition from the iOS to Android was very quick, took almost no time.

See the full interview on Tom Krcha’s blog (http://www.flashrealtime.com/).

AS gaming tutorial round-up

If, like me, you’re a total novice at gaming, getting started in game development is no small task. A good game idea gives you a huge head start, but the challenges of graphic design, sound design, 2D versus 3D, and how to support a variety of platforms and devices can distract and overwhelm. And then there’s the actual coding.

To help you with the coding as well as other gaming aspects, many online tutorials are available. Here are some that I found:

http://www.good-tutorials.com/tutorials/flash/game-development
Good collection of tutorials on various levels. This site shows the publish date of each tutorial.

http://active.tutsplus.com/category/tutorials/games/
Contains lots of up-to-date samples. This site shows the publish date of each tutorial and lets you sort by Most Recent, Most Commented, or Alphabetical.

http://active.tutsplus.com/category/tutorials/actionscript/
This is not the gaming area of ActiveTuts, but it has some great ActionScript utilities and apps. This site shows the publish date of each tutorial and lets you sort by Most Recent, Most Commented, or Alphabetical.

http://pelfusion.com/tutorials/35-flash-game-development-tutorials-fla-files/
Some of these tutorials are quite old. The site doesn’t display the publish dates and doesn’t allow sorting.

http://pelfusion.com/tutorials/the-most-useful-flash-tutorial-resources/
A useful list of Flash tutorial resources.

http://www.gotoandplay.it/_articles/index.php
Unfortunately, the most recent post is from 2007. This page offers lots of filtering widgets.

http://www.devmaster.net/articles/building-mmorpg/
This page is not ActionScript-specific. It lists the steps and requirements for implementing a Massive Multiplayer Online Role-Playing Game (MMORPG). It is rather old (dated 2004), but the advice is still thought-provoking if not always relevant to mobile platforms.

http://www.bytearray.org/?p=3371
This page introduces the Starling 2D framework. Near the bottom of the page, find a link titled “Click to download (Introducing Starling – rev. 1.2.5)”. This PDF download contains a lengthy Starling tutorial written by Adobe evangelist Thibault Imbert.

And for the most challenging and cutting edge information on game development with ActionScript, you can’t do better than the four Adobe gaming evangelists’ blogs:

Tom Krcha’s blog
Mike Jones’ blog
Enrique Duvos’ blog
Lee Brimelow’s blog

Starling game and insights from Devon Wolfgang

It’s a little late now for Halloween, but if you want to see what Starling can do in a simple game, check out Devon Wolfgang’s Halloween game. It’s a zombie shoot-’em-up that is like a carnival shooting gallery. Devon also gives his frank opinions on the current state of the Starling API. In the Halloween game, he creates blood effects using his own Starling particle editor. You can run the particle editor in a browser using the link in Devon’s posting (not supported on Macs.)

Hello, Starling!

Featured

I recently spent a few hours exploring the new open source Starling API for generating 2D graphics with hardware acceleration. It’s a pretty cool new feature in Flash Player 11 and AIR 3. You can download it from http://www.starling-framework.org/.

To get going I used Thibault Imbert’s article Introducing the Starling 2D framework. Since I’m also very new to Flash Builder 4.5, I ran into a few rough patches in getting Thibault’s example to run. Here are the problems I encountered and how I solved them. (To more experienced users, these issues may seem trivial, but for me, they caused some  real head-scratching.)

1. I kept getting an inexplicable runtime error saying that flash.display3D.textures::Texture was not defined. Even when I removed all active code from the project, I still got this error. Clearly, the problem had to do with libraries or project settings, but I thought I had followed Thibault’s instructions to a T. As it turns out, I had gone beyond the T and made a change that seemed logical but was not listed in Thibault’s article. In Project Properties, under ActionScript Compiler–>Adobe Flash Player options, the radio buttons force you to choose either “Use the minimum version required by the Flex SDK” or “Use a specific version” (and specify that version.) I decided to choose “Use a specific version” and specify 11.0.0. This setting caused the runtime error. Switching to “Use minimum version required by the Flex SDK” solved it.

2. Though the project now built and ran, the browser showed only a warning message when I ran the app in the debugger. The message said, “The application is not correctly embedded (wrong wmode value).” Thibault’s article explains why this warning is posted but doesn’t tell you exactly how to address it. The question for me was where to set wmode for debugging in Flash Builder 4.5. At first I tried adding it to the attribute line above the main class definition:

[SWF(width="1280", height="752", frameRate="60", backgroundColor="#002143", wmode="direct")]

This change had no effect. Then I realized that the setting must occur in the <projectName>.html file that was created along with the project. This HTML file resides in the bin-debug directory under the project folder. In my case, I needed to change the script call in the header of this file that calls swfobject.embedSWF(). The original script block looked like this:

<script type="text/javascript">
// For version detection, set to min. required Flash Player version,
// or 0 (or 0.0.0), for no version detection.
var swfVersionStr = "10.2.0";
// To use express install, set to playerProductInstall.swf,
// otherwise the empty string.
var xiSwfUrlStr = "playerProductInstall.swf";
var flashvars = {};
var params = {};
params.quality = "high";
params.bgcolor = "#002143";
params.allowscriptaccess = "sameDomain";
params.allowfullscreen = "true";
var attributes = {};
attributes.id = "StarlingExperiment3";
attributes.name = "StarlingExperiment3";
attributes.align = "middle";
swfobject.embedSWF(
"StarlingExperiment3.swf", "flashContent",
"1280", "752",
swfVersionStr, xiSwfUrlStr,
flashvars, params, attributes);
// JavaScript enabled so display the flashContent div in case it is not
// replaced with a SWF object.
swfobject.createCSS("#flashContent", "display:block;text-align:left;");
</script>

Because I’m using a browser that has Javascript enabled, I had to make the change here. In the attributes argument that I passed to swfobject.embedSWF(), I simply added the following new attribute:

attributes.wmode = "direct";

The resulting script block looks like this:

<script type="text/javascript">
// For version detection, set to min. required Flash Player version,
// or 0 (or 0.0.0), for no version detection.
var swfVersionStr = "10.2.0";
// To use express install, set to playerProductInstall.swf,
// otherwise the empty string.
var xiSwfUrlStr = "playerProductInstall.swf";
var flashvars = {};
var params = {};
params.quality = "high";
params.bgcolor = "#002143";
params.allowscriptaccess = "sameDomain";
params.allowfullscreen = "true";
var attributes = {};
attributes.id = "StarlingExperiment3";
attributes.name = "StarlingExperiment3";
attributes.align = "middle";
attributes.wmode = "direct";
swfobject.embedSWF(
"StarlingExperiment3.swf", "flashContent",
"1280", "752",
swfVersionStr, xiSwfUrlStr,
flashvars, params, attributes);
// JavaScript enabled so display the flashContent div in case it is not
// replaced with a SWF object.
swfobject.createCSS("#flashContent", "display:block;text-align:left;");
</script>

To handle the same situation in browsers that don’t support Javascript, you’ll need to use the <noscript> block to apply the wmode setting. In this case, you can simply add wmode as a param on the SWF object: The following <object> block applies to non-IE browsers:

<object type="application/x-shockwave-flash" data="StarlingExperiment3.swf" width="1280" height="752">
<param name="quality" value="high" />
<param name="bgcolor" value="#002143" />
<param name="allowScriptAccess" value="sameDomain" />
<param name="allowFullScreen" value="true" />
<param name="wmode" value="direct" />
...
</object>