Flash Game Development Tutorial 2: Loading assets

The first problem I ran across when trying to publish the Fisher Girl game onto portals was that I had used more than one file when building the game. I was dynamically loading in external assets like xml, png, and mp3. Most game portal sites only want one file, so all of those assets need to be embedded in one .swf file. Once you have a single swf your game can go viral because now when a portal sees your game and they can download it and host it easily.

In this tutorial I am going to be embedding assets from the Lost Garden Fishing Girl game, so you will need to download the .swf file from Fishing Girl:Game Prototyping Challenge. Of course you could use any swf that has linkage ids set.

Opening a Shared Library in FlashDevelop

Start a new AS3 project in FlashDevelop. Create a new folder inside the src folder called assets and copy the FishingGirl.swf into that folder. In FlashDevelop you should now see your assets folder and the swf file. Expand the swf file by clicking on it. You should see a small grayed out folder called Symbols, expand the Symbols folder. The items inside the Symbols folder that have a small image next to them are the symbols in the Flash file that have a linkage id set.

Embedding Assets

Open your Main.as file and put your editing cursor at the top of the class and then double click on the fishSmall1 symbol. This will auto fill in the Embed code for you. Directly under the Embed code type in a class name, so that your code should end up looking something like this:

...
public class Main extends Sprite
{
        [Embed(source = 'assets/FishingGirl.swf', symbol = 'fishSmall1')]
        private var FishSmall1:Class;
        public function Main():void
...

To learn more about the Embed syntax: http://www.bit-101.com/blog/?p=853

Now when you compile your .swf the asset FarGround1 is actually embedded in your swf and can by referenced by the class name "FarGround1." To get a DisplayObject you can now call 
var fish:DisplayObject = new FishSmall1();

However, It's too much work to always be referencing these assets as Classes, I'd rather be able to say something like SpriteManger.getSprite("fishSmall1") and get back a DisplayObject that I can put right onto the stage no matter how the fishSmall1 was embedded. My SpriteManager does just that. It is a singleton so it can be accessed anywhere and you can add a Class and give that class an id String. Then whenever you want a copy of that image you can just call getSprite with that String. Example:
//add the class to the SpriteManager
SpriteManager.getInstance().addClass("fishSmall1", FishSmall1);

//create a display object that can be shown on the stage
var fish:DisplayObject = SpriteManager.getSprite("fishSmall1");

//add to the stage
stage.addChild(fish);

So now you can embed an asset from a shared library swf and display it on the stage. Feel free to use the SpriteManager class in your project and if you find a better way to manage sprite assets in a code only Flash project let me know.

2 comments Labels: | edit post

Flash Game Development Tutorial 1: Setting up FlashDevelop

I developed the Fisher Girl game as part of a prototyping challenge. The Lost Garden blog regularly holds game prototyping challenges and gives away a game design and graphics. So starting with the Fishing Girl design and graphics I created the Fisher Girl game (play it: http://www.nonoba.com/darkzak/fisher-girl).

I don't have a recent version of the Flash editor, so this game was developed entirely using FlashDevelop (http://flashdevelop.org) and the open source Flex (http://www.adobe.com/products/flex/) framework. Since this game was build completely using open source/royalty free tools, graphics, and music I am going to give back to the community by posting tutorials on how I built the game.

To follow these tutorials you will need:
Setup

Install FlashDevelop and unzip the flex sdk to somewhere simple you will remember (I installed to C:\tools\flex). Then open up FlashDevelop and in the main menu click Tools > Program Settings. In the left hand list choose AS3Context, then in the right hand list find the Flex SDK Location and enter the location you unzipped the Flex sdk to (On mine I entered C:\tools\flex).

Test Setup

You should be all setup to compile in AS3! Let's test it out.

In the main menu click Project > New Project..., choose AS3 Project, set the Name to be HelloWorld, select a location for the project, and select the Create a directory for project checkbox. After you click OK, you should see a new project created in the right hand box under Projects. Open up the src folder in the Projects area and open the Main.as file. FlashDevelop does a lot of the initialization code for you. Find the "//entry point" comment, this is where you first have access to the flash stage. Directly under the entry point comment paste the following code:
var output:TextField = new TextField();
output.text = "Hello World";
this.addChild(output);
You will need to add the following import statement: "import flash.text.TextField;"

To test your code hit CTRL+Enter or Project > Test Movie. You should see "Hello World" printed at the top of the movie!

In the next tutorial I'll show how to embed game assets from a swf or from png files into your game.

2 comments Labels: , | edit post