improved map drawing, draw mobs

[flarejs] / engine.js

diff --git a/engine.js b/engine.js
index c1b7a9d454b19e610bc9edf172480ff01a3efbc8..4a9eb2ef3a35f63b9fcc4995c9940e32b5dad49a 100644 (file)
--- a/engine.js
+++ b/engine.js
@@ -52,6 +52,12 @@ function Textfile(txtfile) {
     case /^duration=[0-9]+s$/.test(line):
       ref["duration"] = line.split(/=|s$/)[1] * 1000;
       break;
+    case /^[^#].*=[0-9]+$/.test(line):
+      key = line.split(/[=]/)[0];  value = line.split(/=/).slice(1) * 1;
+      if                     (!ref[key]) ref[key] = value;
+      else if (!Array.isArray(ref[key])) ref[key] = [ref[key],value];
+      else if ( Array.isArray(ref[key])) ref[key].push(value);
+      break;
     case /^[^#].*=.+$/.test(line):
       key = line.split(/[=]/)[0];  value = line.split(/=/).slice(1).join("=");
       if                     (!ref[key]) ref[key] = value;
@@ -61,23 +67,65 @@ function Textfile(txtfile) {
   }
 }
 
-function Map() {
-  this.tileset = new Textfile("/tilesetdefs/tileset_grassland.txt");
+function Map(textdef) {
   this.frametime = performance.now();
+  if  (gamedata[textdef])  this.info = gamedata[textdef];
+  else gamedata[textdef] = this.info = new Textfile(textdef);
+  if  (gamedata[this.info.header.tileset])  this.tileset = gamedata[this.info.header.tileset];
+  else gamedata[this.info.header.tileset] = this.tileset = new Textfile(this.info.header.tileset);
   if (! gfx[this.tileset.img]) {
     gfx[this.tileset.img] = document.createElement("img");
     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 + 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.center = function(x, y) {
+    posx = canvas.canvas.width  / 2 - x;
+    posy = canvas.canvas.height / 2 - y;
+    return this;
+  }
+
+  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);
+
+    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]
+    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]);
     }
@@ -106,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;
 
@@ -134,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]);
   }
 
@@ -187,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;
   }
 
@@ -202,9 +250,31 @@ function Hero(gender = "female", hair = "short"){
   this.swing  = function() { this.animate("swing" ); return this; };
 }
 
-canvas = document.getElementById("view").getContext("2d");
-player = new Hero().place(240, 160).direct(5);
-map = new Map();
+document.querySelector("body").setAttribute("style", "margin: 0; padding: 0;");
+canvas = document.createElement("canvas").getContext("2d");
+canvas.canvas.setAttribute("style", "display: block; border: 0; margin: 0; padding: 0;");
+document.querySelector("body").appendChild(canvas.canvas);
+
+canvas.canvas.width  = window.innerWidth;
+canvas.canvas.height = window.innerHeight;
+window.addEventListener("resize", function(){
+  canvas.canvas.width  = window.innerWidth;
+  canvas.canvas.height = window.innerHeight;
+});
+
+player = new Hero().place(20 * 64 , 20 * 32).direct(5);
+map = new Map("/maps/arrival.txt");
 
-setInterval( function() { canvas.clearRect(0,0, 480, 320); map.draw_tile(265, 240, 160); player.draw(); }, 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)];
+// });