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

Advertisements

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>