From: Paul Hänsch Date: Thu, 6 Feb 2020 17:11:25 +0000 (+0100) Subject: loading of player sprites from multiple assets X-Git-Url: https://git.plutz.net/?a=commitdiff_plain;h=e2e8d7182f624156a03867d4623bdfe9754207ea;p=flarejs loading of player sprites from multiple assets --- diff --git a/engine.js b/engine.js index c83911c..30c06f6 100644 --- a/engine.js +++ b/engine.js @@ -7,12 +7,13 @@ function Mob(textdef) { this.frametime = performance.now(); this.image = document.querySelector("img[src='"+ this.info.image +"']"); - this.place = function(x, y) { this.position = [x, y]; } - this.direct = function(d) { this.direction = d % 8; } + this.place = function(x, y) { this.position = [x, y]; return this; } + this.direct = function(d) { this.direction = d % 8; return this; } this.animate = function(a) { this.previous_animation = this.animation; this.animation = a; this.frametime = performance.now(); + return this; } this.draw = function(){ @@ -42,7 +43,6 @@ function Mob(textdef) { } f = a.frames[frame][this.direction]; - canvas.clearRect(0,0, 640, 480); canvas.drawImage(this.image, f[0], f[1], f[2], f[3], this.position[0] - f[4], this.position[1] - f[5], f[2], f[3]); @@ -53,8 +53,28 @@ function Mob(textdef) { } } +function Player(gender = "female", hair = "short"){ + // this.head = new Mob("/animations/avatar/"+gender+"/head_short.txt") + // this.chest = new Mob("/animations/avatar/"+gender+"/default_chest.txt") + // this.hands = new Mob("/animations/avatar/"+gender+"/default_hands.txt") + // this.legs = new Mob("/animations/avatar/"+gender+"/default_legs.txt") + // this.feet = new Mob("/animations/avatar/"+gender+"/default_feet.txt") + this.limbs = [ + (gender == "female")?new Mob("/animations/avatar/female/head_long.txt"):new Mob("/animations/avatar/male/head_"+hair+".txt"), + new Mob("/animations/avatar/"+gender+"/default_chest.txt"), + new Mob("/animations/avatar/"+gender+"/default_hands.txt"), + new Mob("/animations/avatar/"+gender+"/default_legs.txt"), + new Mob("/animations/avatar/"+gender+"/default_feet.txt") + ] + + this.place = function(x,y){ this.limbs.forEach(limb => limb.place(x,y)); return this; } + this.direct = function(x,y){ this.limbs.forEach(limb => limb.direct(x,y)); return this; } + this.animate = function(x,y){ this.limbs.forEach(limb => limb.animate(x,y)); return this; } + this.draw = function(x,y){ this.limbs.forEach(limb => limb.draw(x,y)); return this; } +} + canvas = document.getElementById("view").getContext("2d"); -player = new Mob("/animations/avatar/male/clothes.txt"); -player.place(320, 240); +// player = new Mob("/animations/avatar/male/clothes.txt"); +player = new Player().place(240, 160).direct(5); -setInterval( function() { player.draw(); }, 33); +setInterval( function() { canvas.clearRect(0,0, 480, 320); player.draw(); }, 50);