<<Previous Page     —     Next Page >>

Advanced Tutorial - The HostComponent Component (pg. 2)

Creating a Game Object

Objects within the game typically will extend from HostObject. A HostObject "hosts" components which perform discrete tasks for the object. This way, an object does not have to implement rendering, movement, collision detection, and input each time a new object is created. For our example, we'll use an object which is designed for 2D games and extends from HostObject: Object2D.

By componentizing the functionality into discrete sub-objects, a HostObject will automatically perform those functions just by containing the component. For our game, we want to display the text "Hello World" in the center of the rendering context, and make is spin around its center-point. To accomplish this, we'll use the VectorText renderer component and the Transform2DComponent for movement, rotation, and scaling.

// Load the components and engine objects
Engine.include("/components/component.transform2d.js");
Engine.include("/textrender/text.vector.js");
Engine.include("/engine/engine.object2d.js");

Engine.initObject("MyObject", "Object2D", function() {

   var MyObject = Object2D.extend({

      constructor: function() {
         this.base("MyObject");

         // Add components to move and draw the player
         this.add(VectorText.create("text"));
         this.add(Transform2DComponent.create("move"));

         // Get the field center point
         var fCenter = MyFirstGame.getFieldBox().getCenter();

         // Position the object
         this.setPosition(fCenter);

         // Set the text of the component
         var t_comp = this.getComponent("text");
         t_comp.setText("Hello World!");
         t_comp.setColor("red");

         // Scale the text up a bit
         this.getComponent("move").setScale(2);
      },

      /**
       * Update the object within the rendering context.  This calls each of
       * the components to perform their function, drawing and positioning the
       * text on the context.
       *
       * @param renderContext {RenderContext} The rendering context
       * @param time {Number} The engine time in milliseconds
       */
      update: function(renderContext, time) {
         renderContext.pushTransform();
         this.base(renderContext, time);
         renderContext.popTransform();
      },

      /**
       * Get the position of the object from the transform component.
       * @return {Point2D}
       */
      getPosition: function() {
         return this.getComponent("move").getPosition();
      },

      /**
       * Set the position of the object through transform component
       * @param point {Point2D} The position to draw the text in the playfield
       */
      setPosition: function(point) {
         this.base(point);
         this.getComponent("move").setPosition(point);
      },

      /**
       * Set the rotation angle
       * @param deg {Number} The rotation angle
       */
      setRotation: function(deg) {
         this.getComponent("move").setRotation(deg);
      }

   }, { // Static

      /**
       * Get the class name of this object
       * @return {String} The string MyObject
       */
      getClassName: function() {
         return "MyObject";
      }
   });

return MyObject;

});

Save this to the file: myObject.js

Getting Our New Object to Load

Now that we've gotten our game object created, we have to go back and tell the game to load it. Plus, we'll want to create an instance of the object in the game.

Open up game.js and look for the following at the top:

// Load all required engine components
Engine.include("/rendercontexts/context.canvascontext.js");
Engine.include("/engine/engine.timers.js");

Engine.initObject("MyFirstGame", "Game", function(){

You need to tell the game to load the new object. It should be done after the load of the engine files, but before you initialize the engine. It should end up looking like this:

// Load all required engine components
Engine.include("/rendercontexts/context.canvascontext.js");
Engine.include("/engine/engine.timers.js");

// Load the game objects
Game.load("/myFirstObject.js");

Engine.initObject("MyFirstGame", "Game", function(){

This will make sure that the object loads before the game tries to initialize. If we put it inside MyFirstGame, it would never load.

Adding the Object to the Game

Now we'll want to create an instance of the game object in the game. At the end of the MyFirstGame.setup() method, add the bold text after the rendering context is added to the default context:

// Add the new rendering context to the default engine context
Engine.getDefaultContext().add(this.renderContext);

// Add an instance of our game object to the render context
this.renderContext.add(MyObject.create());

Go ahead and run the game now. What you should see is the text "HELLO WORLD" rendered to the playfield. The text is drawn from the position specified, to the right. As you can see, it isn't centered (plus it's not moving, which is a little boring). Up next, we'll add a little animation to the text, and properly center the text around a point of rotation.

<<Previous Page     —     Next Page >>