News from the northern front, at last! Also: using SWC files with Flixel in Flex Builder 3

Ohai there.

Apologies to anyone reading for the lapse in posting over the last couple of weeks. THINGS have been HAPPENING.

The main thing being that within the space of the last week, I put together a resume and folio, went to an interview and got offered a job as a Flash programmer and game designer at 3 Blokes Studio. I'm to start next Thursday, so everything is a bit of a scramble at the moment.

ANYWAY.

I have been looking into better ways of importing assets in Flixel. It is kind frustrating and there aren't many good ways to do it, because Flixel really is designed to use embedded graphics. Which in the case of Horse will mean a zillion frigging lines of embedding all the sprites. This is not code which I want to have to write. And anything that involves reading files from a folder makes it a pain in the butt to put on the interwubs.

I just spent several hours looking into using an SWC exported from the Flash IDE as mentioned here. The linked post discusses how to do in a regular AS3 Project in Flex Builder, where you can happily access Flash's MovieClip or BitmapData classes with no problems.

Unfortunately it's not quite as simple for the Flixel library. In order to be useful, a graphic must be loaded into a FlxSprite instance so that all of Flixel's clever collision magic can happen. As far as I understand it (and I might be wrong), to do this, you need pass in a class that inherits from Bitmap - which is exactly what gets created when you embed an image directly in an AS3 file, thus:

[Embed(source = "data/bg2.png")] protected var ImgBG2:Class;

The Flash IDE, however, exports JPEGs and PNGs as extensions of the BitmapData Class, which Flixel's FlxSprite can't use as input.

I spent some time grovelling over these threads trying to figure out what to do - it seemed like the only way to use these BitmapData classes was to directly modify the .pixels property of the sprite, which sort of defeats the purpose of handing Flixel a spritesheet and telling it to go do its stuff.

But then I found THIS, which solves everything magically with a few lines. So thanks to Flixel forum user L_O_J for that fix.

Ok, so there is still some faffing around that needs to be done with loading the sprites. But I am content with the amount of embedding and related horrors that this will save me.

SO. Here is how to do it.

1. Open up Flash and import all your graphics into a new .fla file. (I'm going to assume you're clever enough to not need screenshots for this bit).

The next part unfortunately could be a bit of a grind, depending on how many assets there are.

2. Export the graphics for ActionScript. EDIT: Export in frame 1 MUST be ticked, or Flash won't export the files to an .SWC when you publish.

2a. Make sure the ActionScript class names DO NOT include a filename extension, such as .jpg or .png, because that makes ActionScript explode when you try to access the class. There doesn't seem to be a way to get flash to import files without including the extension, so yeah, this bit is not so great if you're doing it in bulk.

I would recommend taking the file extension off the end of the library item name and then selecting all the items and exporting them all in one go, rather than exporting one by one.

There's always this extension for Flash which you could use, but it's only useful if you don't need specific naming conventions.

3. Go to Publish Settings and make sure it is set to export an SWC file when it publishes

4. Publish the file

5. In Flex Builder, go to the properties for whatever project you want to use the assets in. Under ActionScript Build Path, click on Library Path and Add SWC, and point it to the SWC you just created.

6. This bit is crucial for use with Flixel! Add the following code to the FlxG.as file of the Flixel library, as shown here:

This at the top of the file:

// needed for processing bitmapdata

import flash.utils.getQualifiedSuperclassName;

And this in the addBitmap() function:

if(!checkBitmapCache(key))

{

//--------CHANGED CODE FOR PROCESSING BITMAPDATA FILES CONTAINED IN AN SWC

/*replaces/adds to the following line:

_cache[key] = (new Graphic).bitmapData;

code found at http://flixel.org/forums/index.php?topic=628.msg4563#msg4563

thanks to flixel forum user L_O_J*/

var classType:String = getQualifiedSuperclassName(Graphic);

if (classType.indexOf("BitmapData") == -1)

{

_cache[key] = (new Graphic).bitmapData;

}

else

{

_cache[key] = new Graphic(0, 0);

}

//---------------------------------------

if(Reverse) needReverse = true;

}

And there! You should now quite happily be able to access the files by class name as if they were embedded in the .as files, without the hassle of copying filepaths and assigning new class names.