How to Build Sprite Objects for Your HTML5 Game

To make very powerful HTML5 games, you'll want to be able to build your own sprites that do exactly what you want them to do. After you make an object, you can give it characteristics and behavior.

How to make a stock sprite object for your game

To get started, take a look at this simple object:

<!DOCTYPE HTML>
<html lang="en-US">
<head>
 <meta charset="UTF-8">
 <title>critter</title>
 <script type="text/javascript"
   src = "simpleGame.js">
 </script>
 <script type="text/javascript">
  var game;
  var critter;
  function init(){
   game = new Scene();
   critter = new Sprite(game, "critter.gif", 30,30);
   critter.setSpeed(0);
   game.start();
  }
 
  function update(){
   game.clear();
   critter.update();
  }
 </script>
</head>
<body onload = "init()">
</body>
</html>

This is an extremely simple program. It creates a scene and a single sprite called critter. Right now, the critter doesn't do much.

image0.jpg

How to build your own game sprite

Sprite objects are great, but wouldn't it be awesome if the critter itself were an object and even better if it were a new object based on the sprite? It could start with all the basic features of the sprite, but you could add new capabilities to differentiate critters from other sprites.

Take a look at CritterConstructor.html to see a way to do so:

<!DOCTYPE HTML>
<html lang="en-US">
<head>
 <meta charset="UTF-8">
 <title>critter</title>
 <script type="text/javascript"
   src = "simpleGame.js">
 </script>
 <script type="text/javascript">
  var game;
  var critter;
 
  function Critter(){
   tCritter = new Sprite(game, "critter.gif", 30, 30);
   tCritter.setSpeed(0);
   return tCritter;
  }
 
  function init(){
   game = new Scene();
   critter = new Critter();
   game.start();
  }
 
  function update(){
   game.clear();
   critter.update();
  }
 </script>
</head>
<body onload = "init()">
</body>
</html>

This program works exactly like the last one, but it's organized a bit differently.

  • There is a function called Critter(). It's important that the function is the name of an object and it's also capitalized. This is a very special function, because it's used to define a Critter() object.

  • The Critter() function creates a temporary sprite object. Inside the Critter() function, you see a temporary sprite object called tCritter(). This is a new sprite.

  • Modify the temporary sprite as much as you want. To make a new type of object in JavaScript, you essentially make a new object and then modify it to get exactly the behavior you want. In this case, the critter's default speed was set.

  • Return the temporary Critter object. The end of the special Critter() function returns the sprite, but now it's not just a sprite, but a critter.

The point of this mechanism is to have new kinds of objects available. The Critter is much like a Sprite, but it can have new behavior and characteristics. This is an incredibly powerful feature.

The technical term for making a sprite act like it's descended from another sprite is inheritance. JavaScript's inheritance model is usually done in a different way (using a mechanism called prototyping).

It is not the way formal JavaScript inheritance is done, but the mechanism shown here is easier to understand than the "right" way, and it's similar to how inheritance is done in many other languages. There is nothing at all wrong with this approach, but you'll sometimes see other approaches to inheritance in JavaScript.

  • Add a Comment
  • Print
  • Share
blog comments powered by Disqus
Advertisement

Inside Dummies.com

Dummies.com Sweepstakes

Win $500. Easy.