Compare commits
No commits in common. "b2624eb989572e62864fa3deb2c6699414356a84" and "df931ca5e7b74ba11067d324b017582201306fb0" have entirely different histories.
b2624eb989
...
df931ca5e7
1
.gitignore
vendored
1
.gitignore
vendored
@ -1 +0,0 @@
|
||||
*.tiled-session
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 65 KiB |
@ -1,82 +0,0 @@
|
||||
{ "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
|
||||
}
|
||||
@ -1,67 +0,0 @@
|
||||
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() {
|
||||
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
|
||||
img.src = path
|
||||
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))
|
||||
}
|
||||
}
|
||||
@ -10,12 +10,9 @@ 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))
|
||||
}
|
||||
|
||||
@ -34,7 +31,8 @@ export default class Game {
|
||||
|
||||
draw() {
|
||||
const { canvas, ctx } = this
|
||||
this.currentRoom.draw(ctx)
|
||||
ctx.fillStyle = "#222"
|
||||
ctx.fillRect(0, 0, canvas.width, canvas.height)
|
||||
this.actors.forEach(actor => actor.draw(ctx))
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,12 +1,8 @@
|
||||
import Game from "./game.js"
|
||||
import Assets from "./assets.js"
|
||||
|
||||
document.addEventListener("DOMContentLoaded", async e => {
|
||||
document.addEventListener("DOMContentLoaded", e => {
|
||||
const canvas = document.getElementById("game-canvas")
|
||||
const game = new Game(canvas)
|
||||
|
||||
game.assets = new Assets()
|
||||
await game.assets.load()
|
||||
|
||||
game.start()
|
||||
})
|
||||
|
||||
48
src/room.js
48
src/room.js
@ -1,48 +0,0 @@
|
||||
export default class Room {
|
||||
constructor(json, name) {
|
||||
this.json = json
|
||||
this.name = name
|
||||
console.log(json)
|
||||
}
|
||||
|
||||
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
|
||||
)
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
@ -1,35 +0,0 @@
|
||||
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)
|
||||
]
|
||||
}
|
||||
}
|
||||
@ -1,14 +0,0 @@
|
||||
{ "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"
|
||||
}
|
||||
@ -1,14 +0,0 @@
|
||||
{
|
||||
"automappingRulesFile": "",
|
||||
"commands": [
|
||||
],
|
||||
"compatibilityVersion": 1100,
|
||||
"extensionsPath": "extensions",
|
||||
"folders": [
|
||||
"."
|
||||
],
|
||||
"properties": [
|
||||
],
|
||||
"propertyTypes": [
|
||||
]
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user