import assets from "./assets.js"; | import assets from "./assets.js"; | ||||
import Rect from "./Rect.js"; | import Rect from "./Rect.js"; | ||||
import Vec2 from "./Vec2.js"; | import Vec2 from "./Vec2.js"; | ||||
import Texture from "./Texture.js"; | |||||
function findBounds(arr, bounds) { | function findBounds(arr, bounds) { | ||||
arr.forEach(e => { | arr.forEach(e => { | ||||
let right = (e.x + 1) * assets.tiles.tileWidth; | let right = (e.x + 1) * assets.tiles.tileWidth; | ||||
let bottom = (e.y + 1) * assets.tiles.tileHeight; | let bottom = (e.y + 1) * assets.tiles.tileHeight; | ||||
if (bounds.size.x < right) | |||||
if (right > bounds.size.x) | |||||
bounds.size.x = right; | bounds.size.x = right; | ||||
if (bounds.size.y < bottom) | |||||
if (bottom > bounds.size.y) | |||||
bounds.size.y = bottom; | bounds.size.y = bottom; | ||||
}); | }); | ||||
} | } | ||||
} | } | ||||
} | } | ||||
function drawToCanvas(ctx, arr) { | |||||
arr.forEach(e => { | |||||
assets.tiles.drawTile(ctx, e.tile, e.x, e.y); | |||||
}); | |||||
} | |||||
function flattened(arr, newArr = []) { | function flattened(arr, newArr = []) { | ||||
arr.forEach(e => { | arr.forEach(e => { | ||||
if (e instanceof Array) | if (e instanceof Array) | ||||
export default class Structure { | export default class Structure { | ||||
constructor(attrs, nestedArr) { | constructor(attrs, nestedArr) { | ||||
this.texture = new Texture(nestedArr); | |||||
this.attrs = { | this.attrs = { | ||||
collides: false, | collides: false, | ||||
} | } | ||||
this.nestedArr = nestedArr; | this.nestedArr = nestedArr; | ||||
this.bounds = new Rect(); | this.bounds = new Rect(); | ||||
this.geometry = []; | this.geometry = []; | ||||
this.can = document.createElement("canvas"); | |||||
} | } | ||||
init() { | init() { | ||||
var arr = flattened(this.nestedArr); | var arr = flattened(this.nestedArr); | ||||
findBounds(arr, this.bounds); | findBounds(arr, this.bounds); | ||||
this.can.width = this.bounds.size.x; | |||||
this.can.height = this.bounds.size.y; | |||||
if (this.attrs.collides) { | if (this.attrs.collides) { | ||||
findGeometry(this.bounds, arr, this.geometry); | findGeometry(this.bounds, arr, this.geometry); | ||||
} | } | ||||
let ctx = this.can.getContext("2d"); | |||||
assets.tiles.whenReady(() => drawToCanvas(ctx, arr)); | |||||
} | } | ||||
draw(ctx) { | draw(ctx) { | ||||
ctx.drawImage( | |||||
this.can, this.bounds.pos.pixelX, this.bounds.pos.pixelY, | |||||
this.bounds.size.x, this.bounds.size.y); | |||||
this.texture.draw(ctx, this.bounds.pos.pixelX, this.bounds.pos.pixelY); | |||||
} | } | ||||
setAttr(attr) { | setAttr(attr) { |
import Rect from "./Rect.js"; | |||||
import assets from "./assets.js"; | |||||
export default class Texture { | |||||
constructor(nestedArr) { | |||||
this.nestedArr = nestedArr; | |||||
this.can = document.createElement("canvas"); | |||||
this.ctx = this.can.getContext("2d"); | |||||
this.width = 0; | |||||
this.height = 0; | |||||
assets.tiles.whenReady(() => this.init()); | |||||
} | |||||
findWidthHeight(arr) { | |||||
arr.forEach(e => { | |||||
if (e instanceof Array) { | |||||
this.findWidthHeight(e); | |||||
} else { | |||||
let right = (e.x + 1) * assets.tiles.tileWidth; | |||||
let bottom = (e.y + 1) * assets.tiles.tileHeight; | |||||
if (right > this.width) | |||||
this.width = right; | |||||
if (bottom > this.height) | |||||
this.height = bottom; | |||||
} | |||||
}); | |||||
} | |||||
fillCanvas(arr) { | |||||
arr.forEach(e => { | |||||
if (e instanceof Array) { | |||||
this.fillCanvas(e); | |||||
} else { | |||||
assets.tiles.drawTile(this.ctx, e.tile, e.x, e.y); | |||||
} | |||||
}); | |||||
} | |||||
init() { | |||||
this.findWidthHeight(this.nestedArr); | |||||
this.can.width = this.width; | |||||
this.can.height = this.height; | |||||
this.fillCanvas(this.nestedArr); | |||||
} | |||||
draw(ctx, x, y) { | |||||
ctx.drawImage(this.can, x, y, this.width, this.height); | |||||
} | |||||
} | |||||
Texture.fromLine = function(l, m, r, lr) { | |||||
} |
import SpriteSheet from "./SpriteSheet.js"; | import SpriteSheet from "./SpriteSheet.js"; | ||||
export default { | export default { | ||||
tiles: new SpriteSheet("assets/tiles.png", 32, 32, 2) | |||||
tiles: new SpriteSheet("assets/tiles.png", 32, 32, 1) | |||||
.defineTile("ground", 0, 0) | .defineTile("ground", 0, 0) | ||||
.defineTile("grass", 1, 0) | .defineTile("grass", 1, 0) | ||||
.defineTile("grass-l", 2, 0) | .defineTile("grass-l", 2, 0) |
level.spawnEntity(new Player(level), 10, 1); | level.spawnEntity(new Player(level), 10, 1); | ||||
level.spawnEntity(new Platform(level), 16, 4); | level.spawnEntity(new Platform(level), 16, 4); | ||||
level.spawnStructure(structures.floor(4), 4, 4); | |||||
level.spawnStructure(structures.floor(8), 4, 4); | |||||
level.start(); | level.start(); | ||||
import Structure from "./Structure.js"; | import Structure from "./Structure.js"; | ||||
import tiles from "./tiles.js"; | |||||
export default { | export default { | ||||
floor: (width) => { | |||||
let attrs = [ "collides" ]; | |||||
if (width <= 1) { | |||||
return new Structure(attrs, [ { x: 0, y: 0, tile: "grass-lr" }]); | |||||
} else { | |||||
return new Structure(attrs, [ | |||||
{ x: 0, y: 0, tile: "grass-l", }, | |||||
Array.from({ length: width - 2 }, (_, i) => | |||||
({ x: i + 1, y: 0, tile: "grass" })), | |||||
{ x: width - 1, y: 0, tile: "grass-r" }, | |||||
]); | |||||
} | |||||
}, | |||||
} | |||||
floor: width => new Structure( | |||||
[ "collides" ], | |||||
tiles.fromLine(width, "grass")), | |||||
}; |
export default { | |||||
fromLine: function(width, tile) { | |||||
if (width <= 1) { | |||||
return [ { x: 0, y: 0, tile: tile+"-lr" }]; | |||||
} else { | |||||
return [ | |||||
{ x: 0, y: 0, tile: tile+"-l", }, | |||||
Array.from({ length: width - 2 }, (_, i) => | |||||
({ x: i + 1, y: 0, tile: tile })), | |||||
{ x: width - 1, y: 0, tile: tile+"-r" }, | |||||
]; | |||||
} | |||||
}, | |||||
} |
} | } | ||||
} | } | ||||
this.relVelocity.y += this.gravity * dt; | |||||
if (!this.onGround) | |||||
this.relVelocity.y += this.gravity * dt; | |||||
// If we just started riding something, adjust relative velocity | // If we just started riding something, adjust relative velocity | ||||
if (!this.prevRelativeTo && this.relativeTo) { | if (!this.prevRelativeTo && this.relativeTo) { |