Skip to content

Commit

Permalink
nicer grass tile + sprite-handling to support it
Browse files Browse the repository at this point in the history
  • Loading branch information
@bobbykjack
bobbykjack committed Oct 30, 2019
1 parent 76f1294 commit c4b9377
Show file tree
Hide file tree
Showing 2 changed files with 141 additions and 20 deletions.
77 changes: 65 additions & 12 deletions bunner.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
// Lots of refactoring to make everything a lot cleaner. Data (levels and
// sprites) now stored in json file and loaded via ajax.

const version = 0.4,
const version = 0.5,
tileSize = 32,
canvas = document.getElementById("canvas"),
ctx = canvas.getContext("2d");
Expand All @@ -32,7 +32,11 @@ var w = 800,
drawGrid: 1
},
// Object sprites are now stored in a json file
objectSprites = {};
objectSprites = {},
// This map is a cache of Canvas objects; instead of repeatedly drawing an
// individual sprite, it gets drawn onto a canvas once, then that canvas gets
// drawn onto the main one, as required.
canvases = {};

loadData();

Expand All @@ -58,7 +62,7 @@ function getPixelRatio(context) {
*/
function loadData() {
var request = new XMLHttpRequest();
request.open("get", "data.json");
request.open("get", "data.json?nocache=" + (new Date()).getTime());

request.addEventListener("load", function() {
var data = JSON.parse(this.responseText);
Expand Down Expand Up @@ -331,19 +335,67 @@ function drawTerrain() {
tileX = Math.floor((tilesH / 2) - (width / 2)),
tileY = Math.floor((tilesV / 2) - (height / 2)),
baseX = Math.floor((w - (tilesH * (tileSize + gutter)) - gutter ) / 2),
baseY = Math.floor((h - (tilesV * (tileSize + gutter)) - gutter ) / 2);
baseY = Math.floor((h - (tilesV * (tileSize + gutter)) - gutter ) / 2),
tx,
ty;

for (y = 0; y < height; y++) {
for (x = 0; x < width; x++) {
if (setColor(ctx, colors, levels[level].terrain)) {
drawTerrainTile(
baseX + ((tileX + x) * (tileSize + gutter)) + gutter,
baseY + ((tileY + y) * (tileSize + gutter)) + gutter,
levels[level].terrain
);
tx = baseX + ((tileX + x) * (tileSize + gutter)) + gutter;
ty = baseY + ((tileY + y) * (tileSize + gutter)) + gutter;

if (levels[level].terrain == "g") {
ctx.drawImage(grass(32), tx, ty);
} else if (setColor(ctx, colors, levels[level].terrain)) {
drawTerrainTile(tx, ty, levels[level].terrain);
}
}
}
}

/**
* Create and return a Canvas object with a drawing of the grass tile on it
*/
function grass(size) {
if (canvases.hasOwnProperty("grass")) {
return canvases["grass"];
}

var grass = document.createElement("canvas"),
grass_ctx = grass.getContext("2d"),
minSize = 2,
tmpSize,
layers = objectSprites["g"].layers,
palette = objectSprites["g"].palette,
layer,
tsize,
idx,
x,
y;

grass.width = size;
grass.height = size;

for (idx in layers) {
layer = layers[idx];
tsize = size / layer.length;

if (tsize < minSize) {
continue;
}

for (y = 0; y < layer.length; y++) {
for (x = 0; x < layer.length; x++) {
if (palette.hasOwnProperty(layer[y][x])) {
grass_ctx.fillStyle = palette[layer[y][x]];
grass_ctx.fillRect(x * tsize, y * tsize, tsize, tsize);
}
}
}
}

canvases["grass"] = grass;
return grass;
}

/**
Expand Down Expand Up @@ -424,12 +476,13 @@ function drawObjects() {
function drawObject(x, y, id) {
var x2,
y2,
sprite = objectSprites[id];
sprite = objectSprites[id],
size = tileSize / sprite.tiles.length;

for (y2 = 0; y2 < sprite.tiles.length; y2++) {
for (x2 = 0; x2 < sprite.tiles[y2].length; x2++) {
if (setColor(ctx, sprite.palette, sprite.tiles[y2][x2], 0.9)) {
ctx.fillRect(x + (x2 * 4), y + (y2 * 4), 4, 4);
ctx.fillRect(x + (x2 * size), y + (y2 * size), size, size);
}
}
}
Expand Down
84 changes: 76 additions & 8 deletions data.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -45,20 +45,47 @@
"win": {
"standing": "f"
}
},{
"height": 18,
"objects": [{
"type": "f",
"x": 22,
"y": 16
},{
"type": "b",
"x": 1,
"y": 2
}],
"terrain": "g",
"width": 24,
"win": {
"standing": "f"
}
}],
"sprites": {
"b": {
"tiles": [
[ 0 , 0 , 0 , "b", "b", 0 , 0 , 0 ],
[ 0 , 0 , "b", "d", "b", "b", 0 , 0 ],
[ 0 , "b", "d", "l", "b", "e", 0 , 0 ],
[ 0 , "b", "d", "l", "b", "b", 0 , 0 ],
[ "b", "b", "d", "l", "b", "b", "b", 0 ],
[ "b", "b", "b", "d", "b", "b", 0 , 0 ],
[ 0 , "b", "b", "b", "b", "b", 0 , 0 ],
[ "b", 0 , "b", "b", "b", "b", "b", 0 ]
[ " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " " ],
[ " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " " ],
[ " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " " ],
[ " ", " ", " ", " ", " ", " ", " ", " ", " ", "w", " ", "w", " ", " ", " ", " " ],
[ " ", " ", " ", " ", " ", " ", " ", " ", " ", "w", " ", "w", " ", " ", " ", " " ],
[ " ", " ", " ", " ", " ", " ", " ", " ", " ", "w", " ", "w", " ", " ", " ", " " ],
[ " ", " ", " ", " ", " ", " ", " ", "w", "w", "w", "w", "w", " ", " ", " ", " " ],
[ " ", " ", " ", " ", "w", " ", "w", "w", "w", "w", "x", "w", "w", " ", " ", " " ],
[ " ", " ", " ", " ", " ", "w", "w", "w", "w", "w", "w", "w", "w", " ", " ", " " ],
[ " ", " ", " ", " ", " ", "w", "w", "w", "w", "w", "w", "w", " ", " ", " ", " " ],
[ " ", " ", " ", " ", " ", " ", "w", " ", " ", " ", "w", " ", " ", " ", " ", " " ],
[ " ", " ", " ", " ", " ", " ", "w", "w", "w", " ", "w", "w", " ", " ", " ", " " ],
[ " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " " ],
[ " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " " ],
[ " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " " ],
[ " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " " ]
],
"palette": {
"w": [ 238, 238, 239 ]
},
"oldpalette": {
"b": [ 57, 36, 36 ],
"d": [ 23, 0, 0 ],
"l": [ 220, 207, 174 ],
Expand All @@ -82,6 +109,47 @@
"g": [ 255, 0, 0 ],
"d": [ 0, 0, 0 ]
}
},

"g": {
"layers": [
[
[ "b" ]
],[
[ "x", "x", "x", "x", "x", "x", "x", " " ],
[ "x", " ", " ", " ", " ", " ", " ", "y" ],
[ "x", " ", " ", " ", " ", " ", " ", "y" ],
[ "x", " ", " ", " ", " ", " ", " ", "y" ],
[ "x", " ", " ", " ", " ", " ", " ", "y" ],
[ "x", " ", " ", " ", " ", " ", " ", "y" ],
[ "x", " ", " ", " ", " ", " ", " ", "y" ],
[ " ", "y", "y", "y", "y", "y", "y", "y" ]
],[
[ " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " " ],
[ " ", " ", " ", " ", " ", " ", " ", " ", " ", "y", " ", "y", " ", " ", " ", " " ],
[ " ", " ", " ", " ", " ", "y", " ", " ", " ", "y", "y", "y", "y", " ", " ", " " ],
[ " ", " ", " ", " ", "y", "y", " ", " ", " ", "y", "y", "y", "y", " ", " ", " " ],
[ " ", " ", " ", " ", "y", "y", " ", "y", " ", " ", " ", " ", "y", " ", " ", " " ],
[ " ", " ", " ", " ", "y", "y", " ", "y", " ", " ", " ", " ", " ", " ", " ", " " ],
[ " ", " ", " ", " ", " ", " ", " ", " ", " ", "y", " ", "y", " ", " ", " ", " " ],
[ " ", " ", " ", "y", " ", "y", " ", " ", " ", "y", " ", "y", " ", " ", " ", " " ],
[ " ", "y", " ", "y", " ", "y", " ", " ", " ", "y", " ", "y", " ", " ", " ", " " ],
[ " ", "y", "y", "y", "y", "y", "y", " ", "y", "y", " ", "y", " ", " ", " ", " " ],
[ " ", "y", "y", "y", "y", "y", "y", " ", "y", "y", "y", "y", " ", " ", " ", " " ],
[ " ", " ", " ", " ", " ", " ", " ", " ", "y", "y", "y", "y", " ", " ", " ", " " ],
[ " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " " ],
[ " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " " ],
[ " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " " ],
[ " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " " ]
]
],

"palette": {
"b": "#73d216",
"x": "#4e9a06",
"y": "#8ae234"
}
}

}
}

0 comments on commit c4b9377

Please sign in to comment.