mcmillen/snej
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

add water and trees

Browse Source
This commit is contained in:
Colin McMillen 2019-10-30 10:28:04 -04:00
parent adbf13f06a
commit 3bd1caa915
2 changed files with 60 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
index.html
View File

@ -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>

100
main.js
View File

@ -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);
}