If you’ve followed this post, you now know how to use SwishMax to create animated art for your next HTML5 web project. Soon you will come to the conclusion that you can also import a sequence of raster images of an animated character for your next A+ game title.
Take a look at this example:
Pretty cool, huh? Indeed! So what’s the point you might ask. Well, as you add additional animated characters to your game and ultimately upload the game to a webserver for a test you realize it’s taking ages to upload. Now you decided to take a closer look and you’ll find out that OpenFL puts all your raster images into a folder called lib/nameOfYourSwf. That means even for the simple two phases animation above you already have 21 images in there! No problem you say! Nowadays internet connections are pretty fast! Of course! The problem is those servers don’t like multiple simultaneous requests. Just imagine your game is ready and now the player has to wait for those 300+ individual images to load.
There’s remedy though! At the time of this writing, OpenFL offers an experimental feature to compress those assets into a single file. Unfortunately this isn’t available for older versions of OpenFL. The problem with OpenFL is that though there are of course improvements with every new version there’s also new bugs and sometimes slower performance – that’s the reason I stick with OpenFL 7.1.2 or maybe OpenFL 8.0. To bundle my assets as a single file too I wrote my own library I’ll introduce in this post.
Prerequisites:
- Windows 7 or above
- FlashDevelop 4.6+
- OpenFL version 7.1.2
- Lime version 6.2.0
- Haxe 3.2.1
- WinRar
First we need to create the actual bundle! This is done by using OpenFLs process command and utilizing Winrar to pack all those files in a single .zip file.
First grab this file. It’s an asset swf file containing the animations of the example above. Store it somewhere on your harddrive.
Fire up NotePad, paste the following lines
|
1 2 3 4 5 6 7 8 |
@echo on set WINRAR_PATH=C:\Program Files\WinRAR openfl process assetsCONVERTED.swf "%WINRAR_PATH%\winrar.exe" a -afzip assets.dat assetsConverted.bundle del assetsCONVERTED.bundle\symbols /q /s rd assetsCONVERTED.bundle\symbols del assetsCONVERTED.bundle /q /s rd assetsCONVERTED.bundle |
and save it as pack.bat in the same folder as the swf file. WINRAR_PATH should point to the WinRar installation on your harddrive. After you’ve opened a command promp at the folders location and invoked pack.bat you should see a file called assets.dat there now.
Create a new OpenFL project using FlashDevelop and navigate to the assets subfolder of your project. Create a new folder called data and move assets.dat in there. Additionally move assetsConverted.swf into the assets folder.
Yeah we need both files! Reason is simple: If we target flash, we can’t use the zipped asset file because OpenFL already bundles assetsConverted.swf with the compiled swf. I usually use the flash target for debugging since it’s a lot faster than html5.
Time for some additions to the project.xml file. We need to make OpenFL aware of those two libraries.
Add the following lines:
|
1 2 |
<library path="assets/assetsCONVERTED.swf" preload="true" if="flash"/> <assets path="assets/data" rename="data" if="html5" /> |
Inside your projects src folder create a new subfolder called utils and extract the contents of this zip file there. These are the haxe source files responsible for handling the zipped assets.
The last step is writing the code to actually put the animated characters to the screen!
Open Main.hx and overwrite it with the following lines:
|
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 29 30 31 32 33 |
package; import openfl.display.Sprite; import openfl.display.MovieClip; import openfl.Lib; import utils.SwfAsset; class Main extends Sprite { public function new() { super(); if (stage != null) { SwfAsset.unzipAssets(start); } } private function start():Void { var mc:MovieClip = SwfAsset.getSWFAsset("assetsCONVERTED:Main_running"); mc.x = Std.int(Lib.application.window.width / 4); mc.y = Std.int(Lib.application.window.height * 0.5); addChild(mc); mc = SwfAsset.getSWFAsset("assetsCONVERTED:Main_firing"); mc.x = Std.int(Lib.application.window.width / 4 * 3); mc.y = Std.int(Lib.application.window.height * 0.5); addChild(mc); } } |
Nothing too magical happens here. Inside the constructor we’re initializing the SwfAsset behind the scenes and as soon as it finishes unzipping the assets (or finished doing nothing at all if you didn’t target html5) it will call the start() function which ultimately creates two MovieClips containing the animated characters.
If you followed this post closely and deploy your project to HTML5 you should see something similar as the example at the top! 🙂