Tutorial 2 - Simple Object with Animation

If you'd like, you can download the source for this tutorial here. See Tutorial 1 for basic engine setup.

Creating the Index File

Create your index.html file in your game folder. This will be the startup file for your game and will need to load some library files and the engine runtime.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
             "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
   <head>
      <title>Tutorial 2</title>

      <!-- Load the supporting libraries -->
      <script type="text/javascript" src="../../libs/base.js"></script>
      <script type="text/javascript" src="../../libs/jquery.js"></script>
      <script type="text/javascript" src="../../libs/jquery.ext.engine.js"></script>
      <script type="text/javascript" src="../../libs/sylvester.js"></script>

      <!-- Load the main engine script -->
      <script type="text/javascript" src="../../engine/runtime/engine.js"></script>

   </head>
   <body>
      <script type="text/javascript">
         // Load the game script
         Engine.loadGame('game.js','Tutorial2', 'Tutorial 2');
      </script>
   </body>
</html>

Creating the Game Class

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

// Load the game object
Game.load("/gameObject.js");

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

   /**
    * @class Tutorial Two.  Generate a simple object and
    *        animate some movement around the playfield.
    */
   var Tutorial2 = Game.extend({

      constructor: null,

      // The rendering context
      renderContext: null,

      // Engine frames per second
      engineFPS: 30,

      // The play field
      fieldBox: null,
      fieldWidth: 480,
      fieldHeight: 480,

      /**
       * Called to set up the game, download any resources, and initialize
       * the game to its running state.
       */
      setup: function(){
         // Set the FPS of the game
         Engine.setFPS(this.engineFPS);

         $("#loading").remove();

         // Create the render context
         this.fieldBox = Rectangle2D.create(0, 0, this.fieldWidth, this.fieldHeight);
         this.renderContext = CanvasContext.create("Playfield",
                                                   this.fieldWidth, this.fieldHeight);
         this.renderContext.setBackgroundColor("black");

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

         // Create the game object and add it to the render context.
         // It'll start animating immediately.
         this.renderContext.add(GameObject.create());
      },

      /**
       * Called when a game is being shut down to allow it to clean up
       * any objects, remove event handlers, destroy the rendering context, etc.
       */
      teardown: function(){
         this.renderContext.destroy();
      },

      /**
       * Return a reference to the render context
       */
      getRenderContext: function(){
         return this.renderContext;
      },

      /**
       * Return a reference to the playfield box
       */
      getFieldBox: function() {
         return this.fieldBox;
      }

   });

   return Tutorial2;

});

Save the file in your new game folder as game.js.

Loading Game Objects

One thing that you'll notice, which is different, is that we're loading a separate file which contains our game object. There are two types of script loading methods you can call. There's a distinct difference between the two.

Engine.include("/rendercontexts/context.canvascontext.js");

The first includes engine-specific scripts from one of the folders, relative to the engine. You don't need to know the exact URI of the engine to specify where to load the file from. This is relative to the URI which would be the engine's root folder.

Game.load("/gameObject.js");

The second is relative to the game. These paths are rooted in the same path as where your game was started (where the index.html file was loaded from). Again, you don't have to worry about the specific URI to know where to load your files from.

In reality, the two loaders are written this way to prevent one game from accidentally access files from another game.

Next Page >>