Mercurial > mhrok3
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;
