diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..d65f875 --- /dev/null +++ b/.gitignore @@ -0,0 +1 @@ +*.tiled-session \ No newline at end of file diff --git a/rooms/sample.tmj b/rooms/sample.tmj new file mode 100644 index 0000000..b4ee9f6 --- /dev/null +++ b/rooms/sample.tmj @@ -0,0 +1,82 @@ +{ "compressionlevel":-1, + "height":20, + "infinite":false, + "layers":[ + { + "data":[195, 22, 22, 22, 44, 44, 44, 44, 44, 44, 44, 44, 44, 44, 44, 44, 44, 44, 44, 44, 44, 44, 44, 44, 44, 44, 44, 44, 44, 44, + 22, 22, 22, 22, 44, 44, 44, 44, 44, 44, 44, 44, 44, 44, 44, 44, 44, 44, 44, 44, 44, 44, 44, 44, 44, 44, 44, 44, 44, 44, + 22, 22, 22, 22, 44, 145, 146, 146, 146, 146, 147, 44, 44, 44, 44, 44, 44, 44, 44, 44, 44, 44, 44, 44, 44, 44, 44, 44, 44, 44, + 22, 22, 22, 22, 44, 165, 166, 166, 166, 166, 167, 44, 44, 44, 44, 44, 44, 44, 44, 44, 44, 44, 44, 44, 44, 44, 44, 44, 44, 44, + 22, 44, 44, 44, 44, 85, 86, 86, 86, 86, 87, 44, 44, 44, 44, 44, 44, 44, 44, 44, 44, 44, 44, 44, 44, 44, 44, 44, 44, 44, + 44, 44, 44, 44, 44, 62, 61, 61, 106, 61, 64, 44, 44, 44, 44, 44, 44, 44, 44, 44, 44, 44, 44, 44, 44, 44, 44, 44, 44, 44, + 44, 44, 44, 44, 44, 44, 44, 44, 44, 44, 44, 44, 45, 44, 44, 44, 44, 44, 44, 44, 44, 44, 44, 44, 44, 44, 44, 44, 44, 44, + 44, 44, 44, 44, 44, 44, 44, 44, 44, 44, 44, 44, 44, 44, 44, 44, 44, 44, 44, 44, 44, 44, 44, 44, 44, 44, 44, 44, 44, 44, + 44, 44, 44, 44, 44, 44, 44, 44, 44, 44, 44, 44, 44, 44, 44, 44, 44, 44, 44, 44, 44, 44, 44, 44, 44, 44, 44, 44, 44, 44, + 44, 44, 44, 44, 44, 44, 44, 44, 44, 44, 44, 44, 44, 44, 44, 44, 44, 44, 44, 44, 44, 44, 44, 44, 44, 44, 44, 44, 44, 44, + 44, 44, 44, 44, 44, 44, 44, 44, 45, 44, 44, 44, 44, 44, 44, 44, 44, 44, 44, 44, 44, 45, 44, 44, 44, 44, 44, 44, 44, 44, + 44, 44, 44, 44, 44, 45, 44, 44, 44, 44, 44, 44, 44, 44, 44, 44, 44, 44, 44, 44, 44, 44, 44, 44, 44, 44, 44, 44, 44, 44, + 44, 44, 44, 44, 44, 45, 44, 44, 44, 44, 44, 44, 44, 44, 45, 44, 44, 44, 44, 44, 44, 44, 44, 44, 44, 44, 44, 44, 44, 44, + 44, 44, 44, 44, 44, 45, 44, 44, 44, 44, 44, 44, 44, 44, 44, 44, 44, 44, 44, 44, 44, 44, 44, 44, 44, 44, 44, 44, 44, 44, + 44, 44, 44, 44, 44, 44, 44, 44, 44, 44, 44, 44, 44, 44, 44, 44, 44, 45, 44, 44, 44, 44, 44, 44, 44, 44, 44, 44, 44, 44, + 44, 44, 44, 44, 44, 44, 44, 44, 44, 44, 44, 44, 44, 44, 44, 44, 44, 44, 44, 44, 44, 44, 44, 44, 44, 44, 44, 44, 44, 44, + 44, 44, 44, 44, 44, 44, 44, 44, 44, 44, 44, 44, 45, 44, 44, 44, 44, 44, 44, 44, 44, 44, 44, 44, 44, 44, 44, 44, 44, 44, + 44, 44, 44, 44, 44, 44, 44, 44, 44, 44, 44, 44, 44, 44, 44, 44, 44, 44, 44, 44, 44, 44, 44, 44, 44, 44, 44, 44, 44, 44, + 44, 44, 44, 44, 44, 44, 44, 44, 44, 44, 44, 44, 44, 44, 44, 44, 44, 44, 44, 44, 44, 44, 44, 44, 44, 44, 44, 44, 44, 44, + 44, 44, 44, 44, 44, 44, 44, 44, 44, 44, 44, 44, 44, 44, 44, 44, 44, 44, 44, 44, 44, 44, 44, 44, 44, 44, 44, 44, 44, 44], + "height":20, + "id":1, + "name":"Tile Layer 1", + "opacity":1, + "type":"tilelayer", + "visible":true, + "width":30, + "x":0, + "y":0 + }, + { + "data":[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, + 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, + 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, + 0, 182, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 203, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, + 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 223, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, + 182, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, + 0, 0, 0, 0, 0, 189, 229, 0, 0, 0, 190, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, + 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, + 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, + 0, 0, 0, 201, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, + 0, 0, 0, 221, 0, 0, 0, 0, 201, 0, 0, 182, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, + 0, 0, 0, 0, 0, 0, 0, 0, 221, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, + 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, + 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, + 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, + 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, + 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, + 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, + 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, + 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], + "height":20, + "id":2, + "name":"Tile Layer 2", + "opacity":1, + "type":"tilelayer", + "visible":true, + "width":30, + "x":0, + "y":0 + }], + "nextlayerid":3, + "nextobjectid":1, + "orientation":"orthogonal", + "renderorder":"right-down", + "tiledversion":"1.11.2", + "tileheight":64, + "tilesets":[ + { + "firstgid":1, + "source":"..\/tilesets\/kenney_rpg.tsj" + }], + "tilewidth":64, + "type":"map", + "version":"1.10", + "width":30 +} \ No newline at end of file diff --git a/src/assets.js b/src/assets.js index 2adfb09..815b555 100644 --- a/src/assets.js +++ b/src/assets.js @@ -1,19 +1,50 @@ +import Room from "./room.js" +import Tileset from "./tileset.js" + +const IMAGE_ASSETS = { +} + +const TILESET_ASSETS = { +} + +const ROOM_ASSETS = { + sampleRoom: "./rooms/sample.tmj" +} + export default class Assets { constructor() { this.assetMap = {} } get(assetName) { + console.log("getting", assetName) + console.log("from", this.assetMap) return this.assetMap[assetName] } async load() { - return Promise.all([ - this.loadImage("tilesheet", "./assets/RPGpack_sheet.png") + await Promise.all([ + this.loadImages(IMAGE_ASSETS), + this.loadTilesets(TILESET_ASSETS), + this.loadRooms(ROOM_ASSETS) ]) + Object.keys(ROOM_ASSETS).forEach(roomName => this.get(roomName).populateTilesets(this)) + } + + loadImages(images) { + return Promise.all(Object.entries(images).map(entry => this.loadImage(...entry))) + } + + loadTilesets(tilesets) { + return Promise.all(Object.entries(tilesets).map(entry => this.loadTileset(...entry))) + } + + loadRooms(rooms) { + return Promise.all(Object.entries(rooms).map(entry => this.loadRoom(...entry))) } loadImage(name, path) { + console.log(name, path) return new Promise(resolve => { const img = new Image() this.assetMap[name] = img @@ -21,4 +52,16 @@ export default class Assets { img.addEventListener("load", () => resolve(img)) }) } + + loadTileset(name, path) { + return fetch(path).then(rsp => rsp.json()).then(json => { + return this.assetMap[name] = new Tileset(json, name) + }).then(tileset => this.loadImages(tileset.imagesToLoad)) + } + + loadRoom(name, path) { + return fetch(path).then(rsp => rsp.json()).then(json => { + return this.assetMap[name] = new Room(json, name) + }).then(room => this.loadTilesets(room.tilesetsToLoad)) + } } diff --git a/src/game.js b/src/game.js index 8dfa014..bce6645 100644 --- a/src/game.js +++ b/src/game.js @@ -10,9 +10,12 @@ export default class Game { this.actors.push(new Player(this, 200, 200)) this.input = new Input().initialize() + + this.currentRoom = null } start() { + this.currentRoom = this.assets.get("sampleRoom") requestAnimationFrame(this.loop.bind(this)) } @@ -31,7 +34,7 @@ export default class Game { draw() { const { canvas, ctx } = this - ctx.drawImage(this.assets.get("tilesheet"), 0, 0) + this.currentRoom.draw(ctx) this.actors.forEach(actor => actor.draw(ctx)) } } diff --git a/src/room.js b/src/room.js index 6b67bb4..af5209d 100644 --- a/src/room.js +++ b/src/room.js @@ -1,5 +1,48 @@ -import Actor from "./actor.js" +export default class Room { + constructor(json, name) { + this.json = json + this.name = name + console.log(json) + } -export default class Room extends Actor { - + get tilesetsToLoad() { + const ts = {} + this.json.tilesets.forEach((tileset, index) => { + ts[`${this.name}-${index}`] = tileset.source + }) + return ts + } + + populateTilesets(assets) { + console.log(this.json) + this.tilesets = this.json.tilesets.map((tileset, index) => { + const ts = assets.get(`${this.name}-${index}`) + ts.populateImage(assets) + return ts + }) + } + + draw(ctx) { + this.json.layers.forEach(layer => { + for (let y = 0; y < layer.height; y++) { + for (let x = 0; x < layer.width; x++) { + const index = x + (y * layer.width) + const tileIndex = layer.data[index] - 1 + const tileset = this.tilesets[0] + const [sx, sy] = tileset.tileOffset(tileIndex) + ctx.drawImage( + tileset.image, + sx, + sy, + tileset.tileWidth, + tileset.tileHeight, + x * this.json.tilewidth, + y * this.json.tileheight, + this.json.tilewidth, + this.json.tileheight + ) + } + } + }) + } } diff --git a/src/tileset.js b/src/tileset.js new file mode 100644 index 0000000..af21bc3 --- /dev/null +++ b/src/tileset.js @@ -0,0 +1,35 @@ +export default class Tileset { + constructor(json, name) { + this.json = json + this.name = name + } + + get imagesToLoad() { + const image = {} + image[`${this.name}-image`] = this.json.image + return image + } + + populateImage(assets) { + this.image = assets.get(`${this.name}-image`) + } + + get tileWidth() { + return this.json.tilewidth + } + + get tileHeight() { + return this.json.tileheight + } + + get columns() { + return this.json.columns + } + + tileOffset(index) { + return [ + ((index % this.columns) * this.tileWidth), + (Math.floor(index / this.columns) * this.tileHeight) + ] + } +} diff --git a/tilesets/kenney_rpg.tsj b/tilesets/kenney_rpg.tsj new file mode 100644 index 0000000..479418c --- /dev/null +++ b/tilesets/kenney_rpg.tsj @@ -0,0 +1,14 @@ +{ "columns":20, + "image":"..\/assets\/RPGpack_sheet.png", + "imageheight":832, + "imagewidth":1280, + "margin":0, + "name":"kenney_rpg", + "spacing":0, + "tilecount":260, + "tiledversion":"1.11.2", + "tileheight":64, + "tilewidth":64, + "type":"tileset", + "version":"1.10" +} \ No newline at end of file diff --git a/zelder.tiled-project b/zelder.tiled-project new file mode 100644 index 0000000..d0eb592 --- /dev/null +++ b/zelder.tiled-project @@ -0,0 +1,14 @@ +{ + "automappingRulesFile": "", + "commands": [ + ], + "compatibilityVersion": 1100, + "extensionsPath": "extensions", + "folders": [ + "." + ], + "properties": [ + ], + "propertyTypes": [ + ] +}