improved map drawing, draw mobs

diff --git a/engine.js b/engine.js
index 9f8c25be7feda403ea5e3212a05b57728b464e4e..4a9eb2ef3a35f63b9fcc4995c9940e32b5dad49a 100644 (file)
--- a/engine.js
+++ b/engine.js
@@ -78,50 +78,54 @@ function Map(textdef) {
     gfx[this.tileset.img].setAttribute("src", this.tileset.img);
   }
 
+  var  h = this.info.header.height,      w = this.info.header.width;
+  var th = this.info.header.tileheight, tw = this.info.header.tilewidth;
+  var posx = canvas.canvas.width / 2, posy = canvas.canvas.height / 2 - h * th/2;
+
+  canvas.fillStyle = "rgba("+this.info.header.background_color+")";
+
   this.tileAt = function(x, y) {
-    nx = y / this.info.header.tileheight + x / this.info.header.tilewidth |0;
-    ny = y / this.info.header.tileheight - x / this.info.header.tilewidth |0;
-    return ny * this.info.header.width + nx;
+    nx = (y + th / 2) / th + (x - w * tw / 2) / tw |0;
+    ny = (y + th / 2) / th - (x - w * tw / 2) / tw |0;
+    return ny * w + nx;
   }
 
-  this.draw = function(posx, posy, mobs) {
-    var x, y, i, layer;
-    var  h = this.info.header.height;
-    var  w = this.info.header.width;
-    var th = this.info.header.tileheight;
-    var tw = this.info.header.tilewidth;
-
-    posx = canvas.canvas.width  / 2 - posx + w * tw / 2;
-    posy = canvas.canvas.height / 2 - posy;
+  this.center = function(x, y) {
+    posx = canvas.canvas.width  / 2 - x;
+    posy = canvas.canvas.height / 2 - y;
+    return this;
+  }
 
-    canvas.fillStyle = "rgba("+this.info.header.background_color+")";
+  this.draw = function(mobs) {
+    var x, y, dx, dy, i;
+    var bg = this.info.layer.find(l => l.type == "background").data;
+    var ob = this.info.layer.find(l => l.type == "object").data;
+    var mm = [];
+    mobs.forEach(m => {
+      i = this.tileAt(m.position[0], m.position[1]);
+      mm[i] = mobs.filter(m => i == this.tileAt(m.position[0], m.position[1]));
+    });
     canvas.fillRect(0,0, canvas.canvas.width, canvas.canvas.height);
 
-    [ this.info.layer[0].data, this.info.layer[1].data ].forEach(layer => {
-    for (y = 0; y < 2 * h - 1; y++ )
-      if ( y < h ) for ( x = 0; x <= y; x++ ){
-        i = (y - x) * w + x;
-        if (layer[i]) this.draw_tile( layer[i],
-                                          posx - (y / 2 - x) * tw,
-                                          posy + y / 2 * th);
-      }       else for ( x = 0; x < 2 * h - y - 1; x++ ){
-        i = (w - x - 2) * h + x + y + 1;
-        if (layer[i]) this.draw_tile( layer[i],
-                                          posx - (h - 1 - x - y / 2) * tw,
-                                          posy + y / 2 * th);
-      }
-    })
+    for ( y = 0; y < h; y++ ) for ( x = 0; x < w; x++ ) {
+      i = y * h + x;
+      dx = posx + (w + x - y) * tw /2;
+      dy = posy + (x + y) * th / 2;
+      this.draw_tile(bg[i], dx, dy);
+      this.draw_tile(ob[i], dx, dy);
+      if (mm[i]) mm[i].forEach(m => m.draw(dx, dy));
+    }
   }
 
   this.draw_tile = function(tile, x, y) {
-    t = this.tileset.tile[tile], x = x|0, y = y|0;
+    var t = this.tileset.tile[tile];
+    var f = this.tileset.animation[tile];
 
-    if (this.tileset.animation[tile]) {
-      f = this.tileset.animation[tile];
+    if (t && f) {
       frame = ((performance.now() - this.frametime) / f[0][2] |0) % f.length;
       canvas.drawImage(gfx[this.tileset.img], f[frame][0], f[frame][1], t[2], t[3],
                                                     x - t[4], y - t[5], t[2], t[3]);
-    } else {
+    } else if (t) {
       canvas.drawImage(gfx[this.tileset.img], t[0], t[1], t[2], t[3],
                                       x - t[4], y - t[5], t[2], t[3]);
     }
@@ -150,7 +154,7 @@ function Mob(textdef) {
     return this;
   }
 
-  this.draw = function(){
+  this.draw = function(x, y){
     var f, a = this.info[this.animation];
     var frame = ( performance.now() - this.frametime ) * a.frames / a.duration | 0;
 
@@ -178,7 +182,7 @@ function Mob(textdef) {
     f = a.frame[frame][this.direction];
 
     canvas.drawImage(gfx[this.info.image], f[0], f[1], f[2], f[3],
-                     this.position[0] - f[4], this.position[1] - f[5],
+                     x - f[4], y - f[5],
                      f[2], f[3]);
   }
 
@@ -231,8 +235,8 @@ function Hero(gender = "female", hair = "short"){
     for (var limb in this.limbs) this.limbs[limb].animate(anim);
     return this;
   }
-  this.draw    = function(){
-    gamedata["/engine/hero_layers.txt"].layer[this.direction].forEach(limb => this.limbs[limb].draw());
+  this.draw    = function(x, y){
+    gamedata["/engine/hero_layers.txt"].layer[this.direction].forEach(limb => this.limbs[limb].draw(x, y));
     return this;
   }
 
@@ -261,5 +265,16 @@ window.addEventListener("resize", function(){
 player = new Hero().place(20 * 64 , 20 * 32).direct(5);
 map = new Map("/maps/arrival.txt");
 
-setInterval (function() { map.draw(player.position[0], player.position[1], [player]) }, 33.33 );
+setInterval (function() { map.center(player.position[0], player.position[1]).draw([player]);}, 33.33 );
 
+// window.addEventListener("click", function(e){
+//   tile = map.tileAt(e.pageX + map.posx, e.pageY - map.posy );
+//   console.log( "X: " + (e.pageX + map.posx) + ", Y:" + (e.pageY - map.posy) +
+//                ", Tile: " + tile + " ( " + (tile % map.info.header.width) + ", " + (tile / map.info.header.width |0) + " )" );
+// });
+// 
+// mark = [17,17];
+// window.addEventListener("mousemove", function(e){
+//   tile = map.tileAt(e.pageX + map.posx, e.pageY - map.posy);
+//   mark = [(tile % map.info.header.width), (tile / map.info.header.width |0)];
+// });