]> git.plutz.net Git - flarejs/blob - engine.js
obey stacking order when drawing hero layers
[flarejs] / engine.js
1 function Mob(textdef) {
2   this.direction = 0;
3   this.position = [0, 0];
4   this.info = gamedata[textdef];
5   this.animation = "stance";
6   this.previous_animation = "";
7   this.frametime = performance.now();
8   this.image = document.querySelector("img[src='"+ this.info.image +"']");
9
10   this.place = function(x, y) { this.position = [x, y]; return this; }
11   this.direct = function(d) { this.direction = d % 8; return this; }
12   this.animate = function(a) {
13     this.previous_animation = this.animation;
14     this.animation = a;
15     this.frametime = performance.now();
16     return this;
17   }
18
19   this.draw = function(){
20     var f, a = this.info[this.animation];
21     var frame = ( performance.now() - this.frametime ) * a.frames.length / a.duration | 0;
22
23     switch(a.type){
24       case "looped":
25         frame = frame % a.frames.length;
26         break;
27       case "play_once":
28         if ( frame >= a.frames.length ){
29           this.animation = this.previous_animation;
30           this.previous_animation = "";
31           this.frametime = performance.now();
32           a = this.info[this.animation];
33           frame = 0;
34         }
35         break;
36       case "back_forth":
37         frame = frame % (a.frames.length * 2 - 2);
38         if ( frame >= a.frames.length ){
39          frame = a.frames.length - frame % a.frames.length - 1;
40         }
41         break;
42       default: break;
43     }
44     f = a.frames[frame][this.direction];
45
46     canvas.drawImage(this.image, f[0], f[1], f[2], f[3],
47                      this.position[0] - f[4], this.position[1] - f[5],
48                      f[2], f[3]);
49
50   // var fetch = new XMLHttpRequest();
51   // fetch.open("GET", textdef, false); fetch.send();
52   // this.description = fetch.responseText.split('\n');
53   }
54 }
55
56 function Player(gender = "female", hair = "short"){
57   this.x=0; this.y=0; this.direction=0;
58   this.limbs = {
59     head : (gender == "female")?new Mob("/animations/avatar/female/head_long.txt"):new Mob("/animations/avatar/male/head_"+hair+".txt"),
60     chest: new Mob("/animations/avatar/"+gender+"/default_chest.txt"),
61     hands: new Mob("/animations/avatar/"+gender+"/default_hands.txt"),
62     legs : new Mob("/animations/avatar/"+gender+"/default_legs.txt"),
63     feet : new Mob("/animations/avatar/"+gender+"/default_feet.txt"),
64     main : new Mob("/animations/avatar/"+gender+"/club.txt"),
65     off  : new Mob("/animations/avatar/"+gender+"/shield.txt")
66   }
67
68   this.place   = function(x,y) {
69     this.x = x; this.y = y;
70     for (var limb in this.limbs) this.limbs[limb].place(x,y);
71     return this;
72   }
73   this.direct  = function(d)   {
74     this.direction = d;
75     for (var limb in this.limbs) this.limbs[limb].direct(d);
76     return this;
77   }
78   this.animate = function(anim){
79     for (var limb in this.limbs) this.limbs[limb].animate(anim);
80     return this;
81   }
82   this.draw    = function(){
83     gamedata["/engine/hero_layers.txt"].layers[this.direction].forEach(limb => this.limbs[limb].draw());
84     return this;
85   }
86 }
87
88 canvas = document.getElementById("view").getContext("2d");
89 // player = new Mob("/animations/avatar/male/clothes.txt");
90 player = new Player().place(240, 160).direct(5);
91
92 setInterval( function() { canvas.clearRect(0,0, 480, 320); player.draw(); }, 50);