PushButton Tutorial Series – Loading Resources

Google+ Pinterest LinkedIn Tumblr +




When accessing resources, like images, MP3s or XML files, you typically have two options. The first is to load these resources as external files. This keeps your SWF file size down, and if you were creating a massive game where resources from level 10 are not used in level 1 it makes sense that you don’t want to download those resources at the beginning of the game.

The downside to this approach is that your game has to be distributed as multiple files, requests to the server will have to be made for each resource, and it is possible that the resources can not be accessed forcing you to deal with the errors that a situation like that will inevitably lead to.

For the majority of Flash games the second option, embedding resources into the SWF directly, makes a lot more sense. Your game will be contained in a single SWF file, you can safely assume that the resources will be accessible, and the compiler will compress the resources resulting in smaller downloads.

PushButton allows you to work with both external and embedded resources transparently. First we will modify the player entity to display an image loaded from a PNG file instead of displaying a circle. To do this we replace the SimpleShapeRenderComponent with a SpriteRenderComponent. After setting the loadFromImage property to point to a local PNG file the entity will use that image when rendering itself on the screen.

Note that the location of the PNG file should be relative to the location of the SWF file, not the source code files.


static public function createPlayer(name:String, scene:String):IEntity { // … var Render:SpriteRenderComponent = new SpriteRenderComponent(); Render.loadFromImage = “../media/idleright.png”; Render.positionReference = new PropertyReference(“@Spatial.position”); entity.addComponent( Render, “Render” ); // … }

When you run the application the circle is now replaced by the image in the PNG file. This is an example of loading external resources. In order to embed the PNG file into the SWF, we need to create a new class that extends the ResourceBundle class.


package { import com.pblabs.engine.resource.ResourceBundle; public class Resources extends ResourceBundle { [Embed(source=”../media/idleright.png”, mimeType=”application/octet-stream”)] public var ImgIdleRight:Class; } }

The Embed keyword should be familiar to anyone who has done Flex development before, but if this code is unfamiliar all it does is instruct the compiler to take the PNG file and include it in the final SWF file. What is cool about this is that PushButton knows what files have been embedded, so there is no need to change how the image is referenced when creating the entities. All we need to do is create a new instance of the Resources class and PushButton takes care of everything else.


protected function appComplete():void { Global.startup(this); new Resources(); EntityFactory.createScene(“scene”); EntityFactory.createPlayer(“player”, “scene”); }

I did run into some trouble where the SWF file would not access the resources when I ran the SWF directly from disk. The same SWF file worked fine when uploaded to a web server, or even when accessing the file from a web server on my local PC. This may has been fixed in later versions of PushButton (I am using the latest stable release r470), but if you are having trouble with embedded resources not showing up try grabbing a lightweight web server like Abyss and accessing the SWF through the server.


About Author

Leave A Reply