diff --git a/index.html b/index.html
index f8d7df9..03dd1e2 100644
--- a/index.html
+++ b/index.html
@@ -36,6 +36,9 @@
+
+
+
diff --git a/main.js b/main.js
index 1b0a821..e7e8fab 100644
--- a/main.js
+++ b/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]];
- 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]];
+ const sprite = spriteLookup[layer[i][j]];
if (sprite) {
gfx.drawSprite(sprite, dx, dy);
}