Welcome, please login or register

PushButton Engine: Table of Contents » PushButton Engine Lesson #5: Using and Embedding Images

PushButton Engine Lesson #5: Using and Embedding Images

"A novel is never anything but a philosophy put into images" - Albert Camus

The goal of this lesson is to guide the user in displaying images on the screen, and including them as embedded assets for distribution.

These lessons are structured in a series of steps -- small milestones that will provide focused short-term goals for incrementally understanding PushButton Engine.

These lessons are targeted at someone who is new to PBEngine, but not necessarily new to programming.

Tutorial Resources:

To follow along with the tutorial, you can download the starter project and use it as your base to implement the tutorial:

The completed lesson files are available at the end of the tutorial.

As covered in Lesson 1, extract the example .zip into a personal project folder, and ensure that it builds in your build environment.

The built .swf of the base starter project should display a blue circle near the bottom of the screen, controllable via the keyboard.

Introduction to the Tutorial

Up until this point, all of the lessons have limited themselves to only display simple colors and shapes. In this lesson, we will begin learning how to display and embed images.

Technical Note: There are a few different ways that one can embed assets into a compiled Flash file. Because it is the most universal (accessible from Flash CS4 or Actionscript / Flex based tools), this tutorial will focus on embedding assets using Actionscript and the [Embed] metadata tag.

Showing Off

Nearly all functionality in PBE is given through components, and rendering sprites is no exception. Remember that in previous lessons, we used SimpleShapeRenderComponent to display our hero as a blue circle. To display our hero as a hovercraft sprite instead, we will replace that one render component with one we haven't looked at before -- a SpriteRenderComponent.

The SpriteRenderComponent has very similar parameters to the shape renderer -- the primary difference is that it now needs a filename. Because we also plan to add a background entity to the game in the next step, we will specify the layerIndex property of the render component, to ensure that the hero is drawn on top of the background.

In the method createHero(), update the code that sets up the render component to be like the following:

File: /Lesson5Base/src/Lesson5Base.as

       // Create a simple render component to display our object

       // Here we've removed the reference to our simple shape renderer, and added a sprite render component.
       var render:SpriteRenderer = new SpriteRenderer();

       // Tell the Render component to use one of the images embedded by our ResourceBundle
       render.fileName = "../assets/fanship.png";
       
       // Add the renderer to the scene.
       render.scene = PBE.scene;
       
       // Set our hero to render above the background.
       render.layerIndex = 10;
       
       // Point the render component to this entity's Spatial component for position information
       render.positionProperty = new PropertyReference("@Spatial.position");
       // Point the render component to this entity's Spatial component for size information
       render.sizeProperty = new PropertyReference("@Spatial.size");
      
       // Add our render component to the Hero entity with the name "Render"
       hero.addComponent( render, "Render" );
   

Goodbye cruel circle

At this point, you should be able to compile and run the game. If everything was done correctly, then you should now see a small hovercraft in place of your old blue circle.

Please note: At this point, the hovercraft image is not embedded. If you move or upload the SWF right now, it will not display any images. This is fine for rapid development purposes, but to make the images work even after uploading or e-mailing the SWF, you will need the final step in this lesson -- embedding the images into the compiled SWF.

Adding the Background

Next, we will add a new entity to display the background image. This entity won't move, but will just sit in the center of the screen, and only serve to display the large background sprite.

Everything in this section of code should be pretty familiar, as it's essentially a stripped down version of the Hero code.

File: /Lesson5Base/src/Lesson5Base.as

       private function createBackground():void
       {
          // Allocate an entity for our background sprite
          var bg:IEntity = PBE.allocateEntity();

          // Add our spatial component to the background entity ...
          createSpatial( bg, 
             // with location of 0,0...
             new Point(0, 0)
          );

          // Create a simple render component to display our object

          // Just like the hero, this also uses a SpriteRenderComponent
          var render:SpriteRenderer = new SpriteRenderer();

          // Tell the Render component to use one of the images embedded by our ResourceLinker
          render.fileName = "../assets/bg.jpg";

          // Set our background to render below the hero.
          render.layerIndex = 1;

          // Add the renderer to the scene.
          render.scene = PBE.scene;

          // Point the render component to this entity's Spatial component for position information
          render.positionProperty = new PropertyReference("@Spatial.position");

          // Add our render component to the BG entity with the name "Render"
          bg.addComponent( render, "Render" );

          // Register the entity with PBE under the name "BG"
          bg.initialize("BG");         
       }
   

And then at the top of the file, don't forget to add a call to createBackground().

File: /Lesson5Base/src/Lesson5Base.as

         // Create an avatar entity
         createHero();
         
         // Create a simple background entity
         createBackground();
   

Now you can compile and run your game! Enjoy zooming your hovercraft over the rocky landscape.

I can see clearly now

Embedding the Assets

Previous to this step, the finished SWFs that you compiled need to have access to assets directory if they want to display images. However, if you would like to distrubute your game (or just move it to a new section of your hard drive, away from the source), you will first need to embed the image resource into your SWF.

To help make embedding resources easier, PBE includes a ResourceBundle class. This class interfaces with the ResourceManager to simplify the embedding process.

The way to use the ResourceBundle is by creating and instantiating a class that inherits from it.

To do this, create a new file in Lesson5Base/src/ called MyResources.as -- this will be our project's ResourceBundle. Inside of the file, place the following code:

File: /Lesson5Base/src/MyResources.as

package
{
   import com.pblabs.engine.resource.*;
   
   public class MyResources extends ResourceBundle
   {
   }
}
   

Inside of the assets/ directory there are two image files -- bg.jpg and fanship.png. To make the ResourceBundle aware of these files, you define a property of your descendant class that references the file with an [Embed] tag, like so:

File: /Lesson5Base/src/MyResources.as

   public class MyResources extends ResourceBundle
   {
      [Embed(source="../assets/bg.jpg")]
      public var resBg:Class;
      
      [Embed(source="../assets/fanship.png")]
      public var resShip:Class;
   }
   

In order for our custom ResourceBundle to be used, we need to instantiate it from our main class. Inside of the Lesson5Base constructor, just after we make our call to Global.startup(), create a new instance of MyResources.

File: /Lesson5Base/src/Lesson5Base.as

      public function Lesson5Final()
      {
         // Start up PBE
         PBE.startup(this);
         
         // Load up our embedded resources
         new MyResources( );
   

And that should do it! That will embed those graphics and make them accessible to PBE. Once a ResourceBundle is instantiated, it automatically looks at the resources that you embedded inside of it, and properly registers them with the PBE ResourceManager.

That should be the end of it!

Seeing Visions

After it's all compiled, you should have an .swf like the following (click to load):

Here or there, we can fly (and copy) our hovercraft anywhere!

In Review

SpriteRenderComponent can be used to render a sprite for an entity. Set the image of a SpriteRenderComponent through the fileName property.

If you do not embed the assets into your compiled SWF, you will not be able to distribute your file to another location. The easiest (and most universal) way to embed resources in PBE is by using the ResourceBundle, although if you are using the CS4 Library, most components allow you to specify items from there directly (for instance DisplayObjectRenderer allows you to set its displayObject member with a direct reference to a new ItemFromLibrary()).

To use ResourceBundle, use the following syntax:

     public class MyResources extends ResourceBundle
     {
        [Embed(source="../assets/imageFilename.png")]
        public var someName:Class;
     }
     

Where "../assets/imageFilename.png" is the path to your resource, and someName is a unique property name inside of ResourceBundle. This name is not as important as the filename, because all resources in PBE are referenced through the filename. It's not enough to just define your ResourceBundle class -- to actually make the assets accessible to PBE, the final step in making the assets embed is to instantiate your custom ResourceBundle class and register it with PBE:

      PBE.addResources(new MyResources());
      

Conclusion

Congratulations! You have finished lesson #5, and loaded your first external assets into the game.

This introduced more concepts than the previous lessons, but if you can master this, you will be much further along on your way to making games in PBE.

You can download the completed project source files for this project.