van an nguyen

Adding sprites to the game framework

Adding sprites to the game framework

We will use the animated woman example and take the sprite utility functions and some predefined values, such as the sprite sheet URL, the size of the sprites, the number of postures, etc., and add it all to one of the examples that used the game framework (the last one from the time based animation lesson (to keep things simple, we did not use the ones with gamepad, etc)).

First, try this example at JsBin

The woman sprite in the game framework, jsbin screenshot

how to add sprites to the game framework…

    1. We declare a woman object, similar to the monster object, with x, y, speed, width properties. We add a direction property that corresponds to a posture’s index (so direction = 2 corresponds to the sprite animation for the woman moving to the left, whereas direction = 6 corresponds to the posture of the woman moving to the right…)
    2. We add the Sprite and SpriteImage objects to the game framework,
    3. We write a loadAssets(callback) function which: a) loads the sprite sheet, b) extracts all the woman sprites and builds the womanSprites array, and c) calls the callback function passed as a parameter once finished,
    4. We call the loadAssets function from the game framework start function, and we start the animation loop only when the loadAssetsfunction has completed loading and extracting the sprites. In a real game the loadAssets function would also load the sounds, and perhaps other sprite sheets or resources etc. In this function you could use the BufferLoader utility for loading multiple resources asynchronously, as  discussed during week 1.

Source code extract:

  1. // Inits
  2. window.onload = function init() {
  3. var game = new GF();
  4. game.start();
  5. };
  7. // GAME FRAMEWORK STARTS HERE
  8. var GF = function(){
  9.    …
  10.    // Woman object and sprites
  11.    // sprite index corresponding to posture
  12.    var WOMAN_DIR_RIGHT = 6;
  13.    var WOMAN_DIR_LEFT = 2;
  14.    var woman = {
  15.       x:100,
  16.       y:200,
  17.       width:48,
  18.       speed:100, // pixels/s this time!
  19.       direction: WOMAN_DIR_RIGHT
  20.    };
  22.    var womanSprites = [];
  24.    var mainLoop = function(time){
  25.      …
  26.      // Draw a woman moving left and right
  27.     womanSprites[woman.direction].draw(ctx, woman.x, woman.y);
  28.     updateWomanPosition(delta);
  29.     …
  30.   };
  32.   function updateWomanPosition(delta) {
  33.     // check collision on left or right
  34.     if(((woman.x+woman.width) > canvas.width) || (woman.x < 0)) {
  35.       // inverse speed
  36.       woman.speed = –woman.speed;
  37.     }
  39.     // change sprite direction
  40.     if(woman.speed >= 0) {
  41.       woman.direction = WOMAN_DIR_RIGHT;
  42.     } else {
  43.       woman.direction = WOMAN_DIR_LEFT;
  44.     }
  45.     woman.x += calcDistanceToMove(delta, woman.speed);
  46.   }
  48.   /*—————————————*/
  49.   /* SPRITE UTILITY FUNCTIONS              */
  50.   /*—————————————*/
  51.   function SpriteImage(img, x, y, width, height) {
  52.     …
  53.     this.draw = function(ctx, xPos, yPos, scale) {…};
  54.   }
  56.   function Sprite() {
  57.     …
  58.     this.extractSprites = function(…) {…};
  59.     this.drawStopped = function(ctx, x, y) {…};
  60.     this.draw = function(ctx, x, y) {…};
  61.     this.setNbImagesPerSecond = function(nb) {…};
  62.   }
  63.   /*—————————————*/
  64.   /* EN OF SPRITE UTILITY FUNCTIONS        */
  65.   /*—————————————*/
  67. var loadAssets = function(callback) {
  68.     var SPRITESHEET_URL = “http://i.imgur.com/3VesWqx.png&#8221;;
  69.     var SPRITE_WIDTH = 48;
  70.     var SPRITE_HEIGHT = 92;
  71.     var NB_POSTURES=8;
  72.     var NB_FRAMES_PER_POSTURE = 13;
  74.     // load the spritesheet
  75.     var spritesheet = new Image();
  76.     spritesheet.src = SPRITESHEET_URL;
  78.     // Called when the spritesheet has been loaded
  79.     spritesheet.onload = function() {
  80.       // Create woman sprites
  81.       for(var i = 0; i < NB_POSTURES; i++) {
  82.         var sprite = new Sprite();
  84.         sprite.extractSprites(spritesheet, NB_POSTURES, (i+1),
  85.                               NB_FRAMES_PER_POSTURE,
  86.                               SPRITE_WIDTH, SPRITE_HEIGHT);
  87.         sprite.setNbImagesPerSecond(20);
  88.         womanSprites[i] = sprite;
  89.       }
  90.       // call the callback function passed as a parameter,
  91.       // we’re done with loading assets and building the sprites
  92.       callback();
  93.     };
  94.   };
  96.   var start = function(){
  97.     …
  98.     // Load sounds and images, then when this is done, start the mainLoop
  99.     loadAssets(function() {
  100.        // We enter here only when all assets have been loaded
  101.        requestAnimationFrame(mainLoop);
  102.     });
  103.   };
  104.   …
  105.  };

Leave a comment