Creating a Sprite3D

Sprites also exist in gl.enchant.js as Sprite3D objects and contain many similar properties and functions. In our game, we create multiple Droid characters, and each one will be an instance of Sprite3D. To save us from manually creating a new instance of Sprite3D each time we need another Droid, let’s create a Droid class containing all the necessary variables and then call it whenever we need a Droid. Do the following to make this happen:

1. In the window.onload function, under game.fps=60;, add a line to preload droid.dae by typing in the code in Listing 7-7. This file was included in the download package earlier and is a 3-D model of the Droid image.

   Listing 7-7.  Preloading droid.dae

   game.preload('images/droid.dae'),

   Files that end in .dae are in a format known as Collada. Collada is a file format for saving 3-D data and is supported by most major 3-D modeling software. Collada files can even be opened by Adobe Photoshop.

2. Above the window.onload function, create the Droid class as an extension of the Sprite3D class by typing in the code in Listing 7-8. The initialize function should include arguments for x, y, and z, which represent the position of the Droid on the x, y, and z axes respectively.

   Listing 7-8.  Creating the Droid Class

   var Droid = Class.create(Sprite3D, {
       initialize: function(x, y, z) {
       }
   });

3. Inside the initialize function, make Droid an instance of the Sprite3D class and set it to use the Collada file as its model by typing in the code in Listing 7-9. Notice how when working with Sprite3D, the image is not set through the image property, but rather through the set function.

   Listing 7-9.  Calling Sprite3D and Setting the Collada File

   Sprite3D.call(this);
   this.set(game.assets["images/droid.dae"]);

4. In its current form, the droid.dae file is too large, so scale it to 30 percent by typing in the code in Listing 7-10 on the next line.

   Listing 7-10.  Scaling Droids

   this.scaleX = 0.3;
   this.scaleY = 0.3;
   this.scaleZ = 0.3;

5. Assign the arguments x, y, and z to their Sprite3D counterparts by typing in the code in Listing 7-11.

   Listing 7-11.  Assigning x, y, and z

   this.x = x;
   this.y = y;
   this.z = z;

6. Inside the game.onload function, under the line scene.setCamera(camera);, add a new Droid to the Scene3D by typing in the code in Listing 7-12.

   Listing 7-12.  Adding a New Droid to Scene3D

   scene.addChild(new Droid(0, 0, -8));

7. Save the file you are working on (main.js), but do not close it. If you are using a virtual web server, open up a web browser other than Internet Explorer and go to the path where index.html is stored (most likely http://localhost/index.html). Your screen should appear as it does in Figure 7-5.

   If you encounter any problems with the code in this section, you can find a working code sample in the Step2 folder from the zip file mentioned earlier in this chapter.

   We now have a legitimate, visible 3-D sprite, but to make it closer to a true game, we need to add some sort of interactivity.

Droid Interactivity

We need some sort of interactivity to make this a real game. Do the following to take the game to the next step:

• 1.  Near the top of the code, under var game;, type in the code in Listing 7-13 to create a function to generate random numbers and some variables we’ll use to keep track of the total number of Droids.

  Listing 7-13.  Creating a Random Number Function and Variables

  function rand(n) {
      return Math.floor(Math.random() * n);
  }
    
  //Variables to keep track of droids
  var maxDroid = 100;
  var hitDroid = 0;
  var combo = 1;

• 2.  Below that, create a ScoreLabel by typing in the code in Listing 7-14. This ScoreLabel contains an add function to easily add and update the score.

  Listing 7-14.  Creating ScoreLabel

  //Define ScoreLabel
  var ScoreLabel = Class.create(Label, { //Extends Label class
      initialize: function(x, y) {
          enchant.Label.call(this, "SCORE:0"); //Call the Label class constructor
          this.x = x;
          this.y = y;
          this.score = 0;
          this.color = "#ffffff";
      },
      add: function(pts) { //Add the score
          this.score += pts;
          this.text = "SCORE:" + this.score; //Update display
      }
  });

• 3.  In the game.onload function, at the very end, create a new instance of ScoreLabel and add it to rootScene by typing in the code in Listing 7-15.

  Listing 7-15.  Creating and Adding ScoreLabel

  //Display score label
  scoreLabel = new ScoreLabel(5, 5);
  game.rootScene.addChild(scoreLabel);

• 4.  Edit the contents of the Droid class to match Listing 7-16. New code is in boldface. This will prepare the class for some interactivity upgrades in the next section, which will use the a and mode variables shown in the code sample. The tick function will be called every frame, and the hit function will be called whenever the player clicks on the Droid.

  Listing 7-16.  Restructured Droid Class

  //Define Droid class
  var Droid = Class.create(Sprite3D, { //Extend Sprite3D class
      initialize: function(x, y, z) {
          Sprite3D.call(this); //Call the Sprite3D constructor
          this.set(game.assets["images/droid.dae"]);
    
          this.scaleX = 0.3;
          this.scaleY = 0.3;
          this.scaleZ = 0.3;
          this.x = x;
          this.y = y;
          this.z = z;
          this.a = 0.01;
    
          this.addEventListener('enterframe', this.tick); //Define event listener
          this.addEventListener('touchstart', this.hit); //Define event listener for hit
          this.mode = 2; //Set initial Droid mode to wait, and then appear
          this.nextMode = 0;
          this.waitFor = game.rootScene.age + rand(100) + 75;
      },
      tick: function() { //Iterate Droid animation based on mode
      },
    
      hit: function() { //Hit Droid
      }
  });

Planes: The Signboards and More of gl.enchant.js

The enchant.js package includes the plug-in primitive.gl.enchant.js. This plug-in contains pre-defined objects of the most common 3-D shapes for use in your games. The object we’ll be using in this section is a plane, which is simply a flat surface on which an image or color can be loaded. Because all these objects are built upon Sprite3D, any Sprite3D method or property is also useable or accessible to a plane. Do the following to implement planes in this game:

• 1.  Change the game.preload('images/droid.dae'), line in the window.onload function to match what is shown in Listing 7-20. This is just loading in pictures to be used by the planes coming up.

  Listing 7-20.  Preloading Images

  game.preload('images/pit.png', 'images/sign.png', 'images/droid.dae'),

• 2.  Create a Plane to represent the pit (containing the holes the Droids come out of) by typing in the code in Listing 7-21 after the line scene.setCamera(camera); in the game.onload function.

  Listing 7-21.  Creating the Pit

  var pit = new PlaneXZ();
  pit.scaleX = 3.0;
  pit.scaleY = 3.0;
  pit.scaleZ = 3.0;
  var texture = new Texture(game.assets['images/pit.png'], { flipY: false });
  texture.ambient = [1.0, 1.0, 1.0, 1.0];
  pit.mesh.texture = texture;
  pit.y = -1;
  pit.z = -10;
  scene.addChild(pit);

First, we create the pit variable as a new PlaneXZ. This is one of the predefined 3-D objects from primitive.gl.enchant.js. Since a plane is a 2-D object, it will exist only on two of the three 3-D axes, which is why we create the pit as a PlaneXZ. This designation tells enchant.js that the plane should be created in the two-dimensional space created by the X and Z axes.

Next, we scale the pit by a factor of 3 with scaleX, scaleY, and scaleZ. Planes are created using coordinates equal to -0.5 or 0.5 for each of their corners, or vertices (e.g., (-0.5, 0, -0.5), (0.5, 0, -0.5), etc.). By scaling these by a factor of three on all three axes, the final coordinates for the plane end up being either -1.5 or 1.5 for each value (e.g., (-1.5, 0, -1.5), (1.5, 0, -1.5), etc.). When you are creating your own games, you’ll want to experiment with the scaling setting to see what looks best at your scene camera’s angle.

The next step is to create a texture, which can eventually be applied to the plane you just created. Here, we load in pit.png as the image, and pass a parameter (flipY: false). Why do we do this? When applying textures to planes, enchant.js will do its best to figure out how to apply the texture in a way to make it appear right side up. However, sometimes enchant.js will get it wrong.

In WebGL, any object that can store pixels contains the property UNPACK_FLIP_Y_WEBGL, which flips an image along the vertical axis, and is assigned to the property flipY in gl.enchant.js. The flipY property defaults to true, so setting it to false in this way reverses the image along the Y axis. Although technically there is no Y axis on an XZ plane, a texture is two-dimensional, so the flipY designation will work as expected, as a texture has no Z axis. (If you’re up for a challenge, you can find more information on how textures are handled in WebGL by searching for information on texture coordinates in OpenGL. WebGL is based on OpenGL.)

Moving on to the texture.ambient line, we set a value of [1.0, 1.0, 1.0, 1.0]. The first three values correspond to red, green, and blue, and the last value corresponds to the visibility or transparency of the light. A value of 1.0 is equal to 100 percent, so this translates to a white light with full visibility. The visibility value is used only in very specific instances, which will not be covered here.

Lastly, we apply the newly created texture to the pit’s mesh texture property and adjust the position of the pit to place it somewhere appropriate on the screen. The final step is to add it to the Scene3D, and the pit will appear onscreen.

• 3.  Directly under the line scene.addChild(pit);, type in the code in Listing 7-22 to create a red base for our pit. This adds a nice touch to the finished product.

  Listing 7-22.  Creating the Base

  var base = new PlaneXY();
  base.z = -8.6;
  base.y = -2.5;
  base.scaleX = 3.0;
  base.scaleY = 3.0;
  base.scaleZ = 3.0;
  base.mesh.setBaseColor('#ff0000'),
  scene.addChild(base);

This code is pretty straightforward. We simply create the base as a new PlaneXY, position it, scale it, and then set a base color. Notice how the base color method accepts a hexadecimal value for the color. Any value valid for a CSS color property will be accepted here, but we like to use a hexadecimal value to keep things simple.

A value of #ff0000 translates to red, as the first two numbers correspond to red, the second two green, and the last two blue. Since the values are in hexadecimal, this value is in base sixteen. A value of ff corresponds to 256. Because only the red placeholder has a value, and the value is 256, the color of the base PlaneXY will be red.

Lastly we add base to the Scene3D to make it appear onscreen.

• 4.  Beneath that, create a sign to make our game even snazzier by typing in the code in Listing 7-23.

  Listing 7-23.  Creating a Sign

  var sign = new PlaneXY();
  sign.scaleX = 2.0;
  sign.scaleY = 2.0;
  sign.scaleZ = 2.0;
  var signTexture = new Texture(game.assets['images/sign.png']);
  signTexture.ambient = [1.0, 1.0, 1.0, 1.0];
  sign.mesh.texture = signTexture;
  sign.y = 0.5;
  sign.z = -8.6;
  scene.addChild(sign);

There is nothing new here. Just like the pit, we create a new Plane, this time a PlaneXY, scale it, create a new texture (this time without the false flipY parameter as enchant.js positions the image correctly for our needs), set the ambient light for the texture, and assign it to the sign. After positioning the sign with the y and z properties, we add it to the scene.

• 5.  Save the code and run it through a web browser. It should appear as it does in Figure 7-6.

  

  Figure 7-6. Whack-A-Droid 3-D with planes

If you encounter problems, you can find a working code sample in the Step4 folder of the download package mentioned at the beginning of the chapter.

Replicating the Droid and Finishing the Game

We’re now getting pretty close to having a finished game, but we still have only one Droid on our screen. Let’s replicate that Droid to have a full collection, filling up our pit image.

• 1.  In your code, create a Droid in each one of the holes shown in the pit by replacing scene.addChild(new Droid(-1.1, -1.5, -9.2)); in the game.onload function with the code shown in Listing 7-24.

  Listing 7-24.  Creating Multiple Droids

  //Create all Droids
  for (var j = 0; j < 3; j++) {
      for (var i = 0; i < 4; i++) {
          scene.addChild(new Droid(i * 0.75 - 1.1, -1.5, -9.2 - j * 0.9));
      }
  }

  We created the Droid as a class that could be called and designated the behavior of all instances of that class, so replicating the Droid is as simple as using a for loop to iterate through all the ones we want to create.

  The for loop controlled by the j variable represents each row, and the for loop controlled by the i variable represents each column in a given row. Notice how we multiply the x position by 0.75 in the new Droid declaration to move the space a new Droid will be created in over to the right. Similarly, we multiply the value of j by 0.9 before subtracting it from -9.2 to move the position of a new Droid back a row or two. It’s a very efficient way to create multiple instances of anything in your enchant.js games.

• 2.  Directly underneath this, type in the code in Listing 7-25 to create an event listener that ends the game once the maximum number of Droids has reached zero or lower.

  Listing 7-25.  Ending the Game

  game.rootScene.addEventListener('enterframe', function() {
      if (maxDroid <= 0) {
          game.end(scoreLabel.score, "You whacked " + hitDroid + " Droids for a score of " + scoreLabel.score + " points!");
      }
  });

  Because whacking Droids or allowing them to retreat back into their holes causes the variable maxDroid to decrement by one each time, we also add an enterframe event listener to end the game once maxDroid has reached 0 or lower, showing the number of droids whacked with the player’s score.

   Note   Keep in mind that because the game.end function is fully supported only by the nineleap.enchant.js plug-in, the final message with a player’s score and the number of Droids hit will appear only if the game is uploaded on 9leap.net.

• 3.  Save the code and run it from a web browser. You should have a working game that appears as it does in Figure 7-7.

  

  Figure 7-7. After replicating the Droids

  If you encounter problems in this section, you can find a fully working code sample in the Step5 folder from the download package mentioned earlier in this chapter.

Panning Camera Effect

Although we have a working game now, let’s add one final finishing touch: a panning camera effect at the beginning of the game. When the game starts, the player will have a bird’s eye view of the pit, and then the camera will pan down to the view we’ve had up until now. This allows you to see the 3-D nature of the game you’ve just created.

Do the following to create the panning camera effect:

• 1.  Inside the game.onload function, replace the lines that read camera.y = 1.1; and camera.z = -1.65; with the code in Listing 7-26 to change the initial camera position.

  Listing 7-26.  Changing the Camera Position

  camera.y = 14;
  camera.z = -8.1;

  This camera position is further away from the pit, but still angled towards it. This makes the panning effect more drastic and noticeable.

• 2.  After the line that reads if (maxDroid <= 0) {game.end(scoreLabel.score, "You whacked " + hitDroid + " Droids for a score of " + scoreLabel.score + " points!");}, but still inside the event listener, type in the code in Listing 7-27 to make the camera pan down at the beginning of the game.

  Listing 7-27.  Making the Camera Pan at the Beginning

  //Pan camera down at beginning
  if (game.rootScene.age < 130) {
      camera.z += 0.05;
      camera.y -= 0.1;
  }

  The actual panning effect takes place here. For the first 130 frames of the game, the camera will get closer and closer to the pit, stopping at the perfect viewpoint. This is accomplished by modifying the z and y axis positions by a very small amount every frame to reach a specific point by the time 130 frames have passed. When developing something like this, it helps to calculate where you want the camera to start from, where you want it to end, and then figure out how much the camera needs to move each frame to achieve this.

• 3.  Save the code and run the game through a web browser. The game should start from the viewpoint shown in Figure 7-8 and quickly pan down to the view that is featured in preceding code samples.

  

  Figure 7-8. Whack-A-Droid 3-D with a new starting perspective

  If you encounter problems in this section, you can find a working code sample in the Step6 folder available from the zip file mentioned earlier in the chapter.