Implemented frame-based CSS sprite animation for Marvin

dylanbeattie · Jun 5, 2011 · 803a537 · 803a537
1 parent e2d393c
commit 803a537
Show file tree

Hide file tree

Showing 4 changed files with 72 additions and 35 deletions.
diff --git a/public/css/bomber.css b/public/css/bomber.css
@@ -55,25 +55,25 @@ body {
 }
 .player {
     position: absolute;
-    width: 36px;
-    height: 72px;
+    width: 48px;
+    height: 64px;
     z-index: 40;
 }
 
 #player_1 {
-    background: url(../images/player-1.png);
+    background: url(../images/player-1-sprite.png);
 }
 
 #player_2 {
-    background: url(../images/player-2.png);
+    background: url(../images/player-1-sprite.png);
 }
 
 #player_3 {
-    background: url(../images/player-3.png);
+    background: url(../images/player-1-sprite.png);
 }
 
 #player_4 {
-    background: url(../images/player-4.png);
+    background: url(../images/player-1-sprite.png);
 }
 
 .boundingBox {

diff --git a/public/js/game/kaboom.game.js b/public/js/game/kaboom.game.js
@@ -135,6 +135,17 @@ TileType = {
     Blank: 2
 };
 
+Direction = {
+    North: 0,
+    NorthEast: 1,
+    East: 2,
+    SouthEast: 3,
+    South: 4,
+    SouthWest: 5,
+    West: 6,
+    NorthWest: 7
+}
+
 function KaboomLevel(initialTileMap) {
 
     /*this.rows = 13;

diff --git a/public/js/game/kaboom.player.js b/public/js/game/kaboom.player.js
@@ -12,6 +12,7 @@ var KaboomPlayer = function(id, name, position, velocity) {
     this.name = name;
     this.position = position || new Position(0, 0);
     this.velocity = velocity || new Velocity(0, 0);
+    this.direction = "";
 };
 
 Position = function(x, y) {
@@ -26,8 +27,8 @@ function Velocity(dx, dy) {
 
 KaboomPlayer.prototype = {
 
-    go: function(direction) {
-        switch (direction) {
+    go: function(whichWay) {
+        switch (whichWay) {
             case 'left':
                 return(this.goLeft());
             case 'right':
@@ -38,22 +39,41 @@ KaboomPlayer.prototype = {
                 return(this.goDown());
         }
     },
-    stop: function(direction) {
-        switch (direction) {
+    stop: function(whichWay) {
+        switch (whichWay) {
             case 'up':
             case 'down':
                 this.verticalStop();
+                this.updateDirection();
                 break;
             case 'left':
             case 'right':
                 this.horizontalStop();
+                this.updateDirection();
                 break;
         }
     },
 
+    updateDirection: function() {
+        var nsComponent, ewComponent;
+        nsComponent = (this.velocity.dy < 0 ? "North" : (this.velocity.dy > 0 ? "South" : ""));
+        ewComponent = (this.velocity.dx < 0 ? "West" : (this.velocity.dx > 0 ? "East" : ""));
+        var direction = nsComponent + ewComponent;
+        if (direction) this.direction = direction;
+    },
+
+    getDirection : function() {
+        return(Direction[this.direction] || 0);
+    },
+
+    isMoving : function() {
+        return(! (this.velocity.dx == 0 && this.velocity.dy == 0));
+    },
+
     goLeft: function() {
         if (this.velocity.dx != -1) {
             this.velocity.dx = -1;
+            this.updateDirection();
             return true;
         }
         return false;
@@ -62,6 +82,7 @@ KaboomPlayer.prototype = {
     goRight: function() {
         if (this.velocity.dx != 1) {
             this.velocity.dx = 1;
+            this.updateDirection();
             return true;
         }
         return false;
@@ -70,6 +91,7 @@ KaboomPlayer.prototype = {
     goUp: function() {
         if (this.velocity.dy != -1) {
             this.velocity.dy = -1;
+            this.updateDirection();
             return true;
         }
         return false;
@@ -78,6 +100,7 @@ KaboomPlayer.prototype = {
     goDown: function() {
         if (this.velocity.dy != 1) {
             this.velocity.dy = 1;
+            this.updateDirection();
             return true;
         }
         return false;

diff --git a/public/js/game/kaboom.renderer.js b/public/js/game/kaboom.renderer.js
@@ -41,6 +41,8 @@ function KaboomRenderer(opts) {
     this.tileClasses = ["solid", "destroyable", "blank"];
     this.initialise();
     var game = opts.game;
+    this.SPRITE_FRAMES = 4; /* How many rows are in the player-X-sprite.png sprite maps? */
+    this.frameIndex = 0;
 }
 
 KaboomRenderer.prototype = {
@@ -79,44 +81,44 @@ KaboomRenderer.prototype = {
 
             if (this.opts.showBoundingBoxes) player.showBoundingBox(this.opts.playerLayer, game);
 
-            var playerDiv = $('#player_' + (i + 1));
+            /* We have a convention of using $foo to indicate the jQuery UI element associated with foo */
+            var $playerDiv = $('#player_' + (i + 1));
 
-            if (!playerDiv.data('isInPlay')) {
-                this.opts.playerLayer.append(playerDiv);
-                playerDiv.data('isInPlay', true);
+            if (!$playerDiv.data('isInPlay')) {
+                this.opts.playerLayer.append($playerDiv);
+                $playerDiv.data('isInPlay', true);
             }
 
-            if (playerDiv.data('y') != player.position.y && playerDiv.data('x') != player.position.x) {
+            if ($playerDiv.data('y') != player.position.y && $playerDiv.data('x') != player.position.x) {
                 var y = player.position.y - 32;
                 var x = player.position.x + 8;
-                playerDiv.css({
+                $playerDiv.css({
                     position: 'absolute',
                     top: y + 'px',
                     left: x + 'px'
                 });
-                playerDiv.data('x', x);
-                playerDiv.data('y', y);
-
-                if (player.velocity != null) {
-                    if (player.velocity.dx != 0 || player.velocity.dy != 0) {
-                        if (player.velocity.dy > 0) {
-                            playerDiv.css({background: 'url(images/walk-down-sprite.png)'});
-                        } else if (player.velocity.dy < 0) {
-                            playerDiv.css({background: 'url(images/walk-up-sprite.png)'});
-                        } else if (player.velocity.dx < 0) {
-                            playerDiv.css({background: 'url(images/walk-left-sprite.png)'});
-                        } else if (player.velocity.dx > 0) {
-                            playerDiv.css({background: 'url(images/walk-right-sprite.png)'});
-                        }
-                        playerDiv.sprite({fps: 2, no_of_frames: 2});
-                    } else {
-                        playerDiv.destroy();
-                    }
-                }
+                $playerDiv.data('x', x);
+                $playerDiv.data('y', y);
+                this.updateSprite(player, $playerDiv);
             }
         }
     },
 
+    updateSprite : function(player, $player) {
+        /* Sprites are in a 8x4 tile grid, where each tile is 1.5 TILE_SIZE high by 1 TILE_SIZE wide. */
+        /* Sprite COLUMNS representing players facing N, NE, E, SE, S, SW, W, NW from 0 to 7 */
+        var frameIndexX = player.getDirection();
+        var spriteLeftPosition = -1 * (game.TILE_SIZE * frameIndexX);
+        var spriteTopPosition;
+        if(player.isMoving()) {
+            spriteTopPosition = -1.3333 * (game.TILE_SIZE * this.frameIndex);
+        } else {
+            spriteTopPosition = 0;
+        }
+        var cssPosition = spriteLeftPosition + "px " + spriteTopPosition + "px";
+        $player.css({backgroundPosition: cssPosition});
+    },
+
     updateItems : function() {
         for (var rowIndex = 0; rowIndex < game.level.rows.length; rowIndex++) {
             for (var tileIndex = 0; tileIndex < game.level.rows[rowIndex].length; tileIndex++) {
@@ -143,6 +145,7 @@ KaboomRenderer.prototype = {
     },
 
     update : function() {
+       this.frameIndex = (this.frameIndex + 1) % this.SPRITE_FRAMES;
         this.updatePlayerLocations();
         this.updateItems();
     }