changeset 8:749a58f3117c

simplify hero animation
author Radomir Dopieralski <sheep-devel@sheep.art.pl>
date Tue, 30 Oct 2012 20:32:26 +0100
parents 4f17fcc3b4ba
children 8864a2065794
files mhrok.js
diffstat 1 files changed, 38 insertions(+), 100 deletions(-) [+]
line wrap: on
line diff
--- a/mhrok.js	Tue Oct 30 19:37:36 2012 +0100
+++ b/mhrok.js	Tue Oct 30 20:32:26 2012 +0100
@@ -5,6 +5,8 @@
         this.y = 0;
         this.x = 0;
         this.frame = 0;
+        this.frameX = 0;
+        this.frameY = 0;
     };
     Mob.prototype = {};
     Mob.prototype.classes = 'mhrok-mob';
@@ -23,15 +25,16 @@
     Mob.prototype.animate = function (frame) {
         var animation = this.animations[this.animation];
         var motion = animation.motion[frame];
+        var tile = animation.frames[this.frame];
         this.frame = frame;
+        this.frameX = tile[0];
+        this.frameY = tile[1];
         this.x += motion[0];
         this.y += motion[1];
         this.z = this.y;
     };
     Mob.prototype.update = function (game) {};
     Mob.prototype.html = function () {
-        var animation = this.animations[this.animation];
-        var tile = animation.frames[this.frame];
         return (
             '<i class="' + this.classes + '" style="' +
                 'left:' + this.x + 'px;' +
@@ -41,8 +44,8 @@
                 '<b class="mhrok-shadow"></b>' +
                 '<b class="mhrok-sprite" style="' +
                     'background-position:' +
-                        (-tile[0] * 48) + 'px ' +
-                        (-tile[1] * 48) + 'px' +
+                        (-this.frameX * 48) + 'px ' +
+                        (-this.frameY * 48) + 'px' +
                 '"></b>' +
             '</i>'
         );
@@ -53,118 +56,53 @@
         Mob.apply(this, arguments);
         this.animation = 'stand_north';
         this.direction = 'north';
+        this.waiting = true;
     };
     Hero.prototype = Object.create(Mob.prototype);
     Hero.prototype.classes += ' mhrok-hero';
     Hero.prototype.directions = {
-        'west':  [-1, 0],
-        'north': [0, -1],
-        'east':  [1, 0],
-        'south': [0, 1],
+        'west':  [-1, 0, 1],
+        'north': [0, -1, 2],
+        'east':  [1, 0, 3],
+        'south': [0, 1, 0],
     };
-    Hero.prototype.animations = {
-        stand_west:  { frames: [ [5, 0] ], motion: [ [0, 0] ] },
-        stand_north: { frames: [ [6, 0] ], motion: [ [0, 0] ] },
-        stand_east:  { frames: [ [7, 0] ], motion: [ [0, 0] ] },
-        stand_south: { frames: [ [4, 0] ], motion: [ [0, 0] ] },
-        walk_west: {
-            frames: [
-                [5, 0], [5, 0], [5, 1], [5, 1],
-                [5, 2], [5, 2], [5, 3], [5, 3],
-            ],
-            motion: [
-                [-4, 0], [-4, 0], [-4, 0], [-4, 0],
-                [-4, 0], [-4, 0], [-4, 0], [-4, 0],
-            ]
-        },
-        walk_north: {
-            frames: [
-                [6, 0], [6, 0], [6, 1], [6, 1],
-                [6, 2], [6, 2], [6, 3], [6, 3],
-            ],
-            motion: [
-                [0, -3], [0, -3], [0, -3], [0, -3],
-                [0, -3], [0, -3], [0, -3], [0, -3],
-            ]
-        },
-        walk_east: {
-            frames: [
-                [7, 0], [7, 0], [7, 1], [7, 1],
-                [7, 2], [7, 2], [7, 3], [7, 3],
-            ],
-            motion: [
-                [4, 0], [4, 0], [4, 0], [4, 0],
-                [4, 0], [4, 0], [4, 0], [4, 0]
-            ]
-        },
-        walk_south: {
-            frames: [
-                [4, 0], [4, 0], [4, 1], [4, 1],
-                [4, 2], [4, 2], [4, 3], [4, 3],
-            ],
-            motion: [
-                [0, 3], [0, 3], [0, 3], [0, 3],
-                [0, 3], [0, 3], [0, 3], [0, 3],
-            ]
-        },
-        stab_west: {
-            frames: [
-                [9, 0], [9, 0], [9, 0], [9, 0],
-                [9, 1], [9, 1], [9, 1], [9, 1],
-            ],
-            motion: [
-                [1, 0], [-1, 0], [0, 0], [-2, 0],
-                [-3, 0], [0, 0], [3, 0], [2, 0],
-            ]
-        },
-        stab_north: {
-            frames: [
-                [10, 0], [10, 0], [10, 0], [10, 0],
-                [10, 1], [10, 1], [10, 1], [10, 1],
-            ],
-            motion: [
-                [0, 0], [0, 0], [0, 0], [0, 0],
-                [0, 0], [0, 0], [0, 0], [0, 0],
-            ]
-        },
-        stab_east: {
-            frames: [
-                [11, 0], [11, 0], [11, 0], [11, 0],
-                [11, 1], [11, 1], [11, 2], [11, 2],
-            ],
-            motion: [
-                [-1, 0], [1, 0], [0, 0], [2, 0],
-                [3, 0], [0, 0], [-3, 0], [-2, 0],
-            ]
-        },
-        stab_south: {
-            frames: [
-                [8, 0], [8, 0], [8, 0], [8, 0],
-                [8, 1], [8, 1], [8, 1], [8, 1],
-            ],
-            motion: [
-                [0, 0], [0, 0], [0, 0], [0, 0],
-                [0, 0], [0, 0], [0, 0], [0, 0],
-            ]
-        }
+    Hero.prototype.animate = function (frame) {
+        var dir = this.directions[this.direction];
+        if (this.animation == 'stand') {
+            this.frameX = dir[2] + 4;
+            this.frameY = 0;
+            this.waiting = true;
+        } else {
+            this.waiting = false;
+        };
+        if (this.animation == 'walk') {
+            this.frameX = dir[2] + 4;
+            this.frameY = Math.round(frame / 2);
+            this.x += dir[0] * 4;
+            this.y += dir[1] * 3;
+        };
+        if (this.animation == 'stab') {
+            this.frameX = dir[2] + 8;
+            this.frameY = Math.round(frame / 2);
+        };
     };
     Hero.prototype.update = function (game) {
         if (game.keys[37] || game.last_key === 37) { // Left arrow
-            this.animation = 'walk_west';
+            this.animation = 'walk';
             this.direction = 'west';
         } else if (game.keys[38] || game.last_key === 38) { // Up arrow
-            this.animation = 'walk_north';
+            this.animation = 'walk';
             this.direction = 'north';
         } else if (game.keys[39] || game.last_key === 39) { // Right arrow
-            this.animation = 'walk_east';
+            this.animation = 'walk';
             this.direction = 'east';
         } else if (game.keys[40] || game.last_key === 40) { // Down arrow
-            this.animation = 'walk_south';
+            this.animation = 'walk';
             this.direction = 'south';
         } else if (game.keys[32] || game.last_key === 32) { // Space
-            this.animation = 'stab_' + this.direction;
+            this.animation = 'stab';
         } else {
-            this.animation = 'stand_' + this.direction;
+            this.animation = 'stand';
         };
         game.last_key = null;
     };
@@ -305,7 +243,7 @@
         return false;
     };
     Game.prototype.frame = function () {
-        if (this.hero.animations[this.hero.animation].frames.length === 1) {
+        if (this.hero.waiting) {
             // Treat the player character specially
             // for instant reaction to key presses.
             this.frame_number = 0;