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