A Simple Component

Games need to be fun, and the way you build fun is by refining and tweaking your game. Code that is hard to work with makes it harder to build a fun game. Components are a better way to build games, because they keep your code easy to modify and reuse.

Using components may seem a little more complicated than just hacking some code out. That's true - it can be a little indirect. The benefit isn't when you're starting - it's once you've finished the first draft of your game and you need to start changing things. It's the difference between building a house out of some plywood you found in the woods as opposed to 2x4s and up-to-code materials. The plywood house might get done a little faster, but over the next twenty years the house is standing, going with the good materials will pay off big time.

Components are small, reusable classes that implement a focused piece of game functionality. Creating a component is simple. Here's an example of a simple component that keeps track of points that the player earns every second they are alive.

   class ScoreCounterComponent extends TickedComponent
   {
      public var score:Number = 0;
      public var pointsPerSecond:Number = 1;
      
      public function onTick(dt:Number):void
      {
         score += pointsPerSecond * dt;
         Logger.Log(this, "Updating score, score is now " + score);
      }
   }
   

OK - that's all you have to do to create a component! The next section shows how you would use it in your game.

Building a Game Object

Game objects are called entities and they contain one or more components. The XML level files in PushButton Engine let you define entities and the components in them, as well as set the values of fields on those components. Here's what a player entity using the ScoreCounterComponent would look like in the PushButton Engine XML format:

   <!-- An example player that gets points for being alive. It is named "Player" and we can get it from code with that name. -->
   <entity name="Player">
      <!-- Here's where we include the scorecounter we defined above. Notice that we give it a name - this is required so we can refer to the component. -->
      <component type="ScoreCounterComponent" name="Score">
         <!-- This is all it takes to set a field on the component - just the name and a value. In this case we're setting the rate at which players will accrue points. -->
         <pointsPerSecond>10</pointsPerSecond>
      </component>
      
      <!-- These components would normally have properties set, configuring things like the size, shape, appearance, and movement of the player, but we're skipping that to keep things focused. -->
      <component type="RenderComponent" name="Render">
      </component>
      <component type="SpatialComponent" name="Spatial">
      </component>
      <component type="PlayerControllerComponent" name="Controller">
      </component>
   </entity>
   

Conclusion

What did we just accomplish? We added a new piece of functionality to our game without touching a single existing line of code. Our new score counter component can be reused with a few lines of XML. We can extend it without having to worry about messing with a bunch of other code.

That's not all - there are a ton of components to get you going on your game, including components that integrate Box2D, a networking library, and a powerful rendering framework. The serializer and resource manager make it easy to load game data, including level files, images, and sound. There are debugging and performance tuning tools, as well as unit tests. What more could you ask for?

Well, we'd like to know! Come by our forums to post your questions, feedback, and opinions. We want to make PushButton Engine the best possible tool for building Flash games, and the only way we will get there is with lots of feedback from people like you.