add water and trees

index.html

@@ -36,6 +36,9 @@
     <button id="7x">7x</button>
     <button id="8x">8x</button>
     <img src="bundle/terrain.png" id="terrain" style="display: none">
+    <img src="bundle/inside.png" id="inside" style="display: none">
+    <img src="bundle/outside.png" id="outside" style="display: none">
+    <img src="bundle/water.png" id="water" style="display: none">
     <img src="bundle/witchtiles_1.png" id="witch" style="display: none">
     <img src="bundle/spritesheet.png" id="spritesheet" style="display: none">
     <script src="bundle/spritesheet.js"></script>

main.js

@@ -261,6 +261,37 @@ class World {
     this.lastInput_ = new SnesInput();
     this.player_ = new Player();
 
+    this.layer1_ = [
+        "~~888888888888~~",
+        "~8..,_.--.,.*.8~",
+        "~._.*._.,.--,._~",
+        "~_``_.,_..._..`~",
+        "~,.`.....'...._~",
+        "~.`_'*...._.._.~",
+        "~,'.'_-'...__.`~",
+        "~....,'...*,'..~",
+        "~_..'_......_..~",
+        "~*..``.,.,..,.,~",
+        "~..'._'*'..___.~",
+        "~._'.-....,.`..~",
+        "~2_.*_,'-...`-2~",
+        "~~222222222222~~"];
+     this.layer2_ = [
+        "        T       ",
+        "                ",
+        "                ",
+        "                ",
+        "                ",
+        "                ",
+        "       o        ",
+        "  c          c  ",
+        "                ",
+        "     c    c     ",
+        "                ",
+        "                ",
+        "                ",
+        "                "];
+
     // TODO: move rendering stuff to a separate object.
     this.resources_ = new Resources();
     this.tileRenderer_ = new TileRenderer();
@@ -295,8 +326,10 @@ class World {
 
   draw(gfx) {
     gfx.fill('black');
-    this.tileRenderer_.draw(gfx, this.resources_.sprites);
+    this.tileRenderer_.draw(gfx, this.resources_.sprites, this.layer1_);
     this.playerRenderer_.draw(gfx, this.resources_.sprites, this.player_);
+    this.tileRenderer_.draw(gfx, this.resources_.sprites, this.layer2_);
+
     // this.gamepadRenderer_.draw(gfx, this.input_);
     this.fpsCounter_.draw(gfx);
   }
@@ -338,6 +371,9 @@ class CharacterSprite {
 class Resources {
   constructor() {
     const terrain = document.getElementById('terrain');
+    const inside = document.getElementById('inside');
+    const outside = document.getElementById('outside');
+    const water = document.getElementById('water');
     const witch = document.getElementById('witch');
     const spritesheet = document.getElementById('spritesheet');
     const ts = 16;
@@ -349,8 +385,20 @@ class Resources {
       'ground4':        new Sprite(terrain, 6 * ts, 1 * ts, 16, 16),
       'ground5':        new Sprite(terrain, 2 * ts, 2 * ts, 16, 16),
       'ground6':        new Sprite(terrain, 6 * ts, 2 * ts, 16, 16),
+      'water_ul':       new Sprite(water, 1 * ts, 9 * ts, 16, 16),
+      'water_uc':       new Sprite(water, 2 * ts, 9 * ts, 16, 16),
+      'water_ur':       new Sprite(water, 3 * ts, 9 * ts, 16, 16),
+      'water_ml':       new Sprite(water, 1 * ts, 10 * ts, 16, 16),
+      'water_mc':       new Sprite(water, 2 * ts, 10 * ts, 16, 16),
+      'water_mr':       new Sprite(water, 3 * ts, 10 * ts, 16, 16),
+      'water_ll':       new Sprite(water, 1 * ts, 11 * ts, 16, 16),
+      'water_lc':       new Sprite(water, 2 * ts, 11 * ts, 16, 16),
+      'water_lr':       new Sprite(water, 3 * ts, 11 * ts, 16, 16),
       'cauldron_blue':  new Sprite(witch, 0, 0, 32, 32),
       'cauldron_green': new Sprite(witch, 32, 0, 32, 32),
+      'cup':            new Sprite(inside, 41 * ts, 27 * ts, 16, 16),
+      'teapot':         new Sprite(inside, 36 * ts, 25 * ts, 16, 16),
+      'bigtree':        new Sprite(outside, 528, 16, 96, 96),
     }
 
     for (const key in spritesheet_json) {
@@ -435,41 +483,11 @@ class PlayerRenderer {
 }
 
 class TileRenderer {
-  draw(gfx, sprites) {
+  draw(gfx, sprites, layer) {
     const tileSize = 16;
     // The screen is 14 x 16 tiles by default.
     const rows = gfx.height / tileSize;
     const columns = gfx.width / tileSize;
-    const layer1 = [
-        ".'...__,._..*..`",
-        "*'..,_.--.,.*..`",
-        "_._.*._.,.--,._.",
-        "._``_.,_..._..``",
-        "_,.`.....'...._`",
-        "..`_'*...._.._..",
-        ".,'.'_-'...__.`.",
-        ".....,'...*,'..`",
-        "__..'_......_...",
-        "'*..``.,.,..,.,.",
-        "...'._'*'..___..",
-        "'._'.-....,.`.._",
-        "_*_.*_,'-...`-..",
-        ".-...*._`,`'`.,."];
-   const layer2 = [
-        "                ",
-        "                ",
-        "                ",
-        "                ",
-        "                ",
-        "                ",
-        "       O        ",
-        "                ",
-        "                ",
-        "                ",
-        "                ",
-        "                ",
-        "                ",
-        "                "];
     const spriteLookup = {
       '.': sprites.ground0,
       ',': sprites.ground1,
@@ -478,24 +496,20 @@ class TileRenderer {
       '-': sprites.ground4,
       '*': sprites.ground5,
       "'": sprites.ground6,
+      '~': sprites.water_mc,
+      '2': sprites.water_uc,
+      '8': sprites.water_lc,
       'O': sprites.cauldron_blue,
       'o': sprites.cauldron_green,
+      'c': sprites.cup,
+      't': sprites.teapot,
+      'T': sprites.bigtree,
     };
     for (let j = 0; j < columns; j++) {
       for (let i = 0; i < rows; i++) {
         const dx = tileSize * j;
         const dy = tileSize * i;
-        const sprite = spriteLookup[layer1[i][j]];
+        const sprite = spriteLookup[layer[i][j]];
-        if (sprite) {
-          gfx.drawSprite(sprite, dx, dy);
-        }
-      }
-    }
-    for (let j = 0; j < columns; j++) {
-      for (let i = 0; i < rows; i++) {
-        const dx = tileSize * j;
-        const dy = tileSize * i;
-        const sprite = spriteLookup[layer2[i][j]];
         if (sprite) {
           gfx.drawSprite(sprite, dx, dy);
         }