bassguitarbill/top-down-action-adventure
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Compare commits

base: bassguitarbill:361f0536d94403801b3c121fac4098a63acedb3a
Branches Tags
bassguitarbill:master
..
compare: bassguitarbill:94b2c6b140f82a47e803a5ecbc406558ff935c91
Branches Tags
bassguitarbill:master

No commits in common. "361f0536d94403801b3c121fac4098a63acedb3a" and "94b2c6b140f82a47e803a5ecbc406558ff935c91" have entirely different histories.
361f0536d9 ... 94b2c6b140

11 changed files with 11 additions and 214 deletions
Show Stats Expand all files Collapse all files

BIN
assets/roguelikeIndoor_transparent.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 35 KiB

BIN
assets/roguelikeSheet_transparent.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 134 KiB

29
rooms/sample.tmj
View File

@ -147,33 +147,6 @@
"width":30.3798879567435,
"x":656.930237743527,
"y":411.661417542295
},
{
"height":23.3879051119279,
"id":8,
"name":"",
"properties":[
{
"name":"event",
"type":"string",
"value":"transport"
},
{
"name":"transport_to_coords",
"type":"string",
"value":"[300, 410]"
},
{
"name":"transport_to_room",
"type":"string",
"value":"sampleInside"
}],
"rotation":0,
"type":"",
"visible":true,
"width":48.4463748747077,
"x":518.988751531351,
"y":358.61454504956
}],
"opacity":1,
"type":"objectgroup",
@ -213,7 +186,7 @@
"y":0
}],
"nextlayerid":4,
"nextobjectid":9,
"nextobjectid":8,
"orientation":"orthogonal",
"renderorder":"right-down",
"tiledversion":"1.11.2",

100
rooms/sample_inside.tmj
View File

@ -1,100 +0,0 @@
{ "compressionlevel":-1,
"height":8,
"infinite":false,
"layers":[
{
"data":[722, 720, 720, 720, 720, 720, 720, 720, 720, 723,
778, 894, 895, 895, 895, 895, 895, 895, 896, 778,
778, 891, 890, 890, 890, 890, 890, 890, 893, 778,
778, 1063, 1005, 1005, 1005, 1005, 1005, 1005, 1006, 778,
778, 28373, 28374, 28374, 28374, 28374, 28375, 1005, 28373, 778,
778, 1004, 1005, 1005, 1005, 1005, 1005, 1005, 1006, 778,
778, 1004, 1005, 1005, 1005, 1005, 1005, 1005, 1006, 778,
779, 720, 720, 721, 1004, 1006, 719, 720, 720, 780],
"height":8,
"id":1,
"name":"Tile Layer 1",
"opacity":1,
"type":"tilelayer",
"visible":true,
"width":10,
"x":0,
"y":0
},
{
"draworder":"topdown",
"id":3,
"name":"Object Layer 1",
"objects":[
{
"height":51.8134715025906,
"id":1,
"name":"",
"properties":[
{
"name":"event",
"type":"string",
"value":"transport"
},
{
"name":"transport_to_coords",
"type":"string",
"value":"[528, 386]"
},
{
"name":"transport_to_room",
"type":"string",
"value":"sampleRoom"
}],
"rotation":0,
"type":"",
"visible":true,
"width":112.262521588946,
"x":264.001973846533,
"y":453.984702689366
}],
"opacity":1,
"type":"objectgroup",
"visible":true,
"x":0,
"y":0
},
{
"data":[0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
0, 0, 28302, 28303, 28304, 0, 0, 28204, 0, 0,
0, 27995, 0, 0, 0, 0, 0, 0, 0, 0,
0, 0, 0, 0, 0, 0, 0, 0, 28057, 0,
0, 0, 0, 0, 0, 0, 0, 1358, 0, 0,
0, 0, 0, 0, 0, 0, 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":8,
"id":2,
"name":"Tile Layer 2",
"opacity":1,
"type":"tilelayer",
"visible":true,
"width":10,
"x":0,
"y":0
}],
"nextlayerid":4,
"nextobjectid":3,
"orientation":"orthogonal",
"renderorder":"right-down",
"tiledversion":"1.11.2",
"tileheight":64,
"tilesets":[
{
"firstgid":1,
"source":"..\/tilesets\/kenney_roguelike_base.tsj"
},
{
"firstgid":27922,
"source":"..\/tilesets\/kenney_roguelike_indoor.tsj"
}],
"tilewidth":64,
"type":"map",
"version":"1.10",
"width":10
}

5
src/assets.js
View File

@ -8,8 +8,7 @@ const TILESET_ASSETS = {
}
const ROOM_ASSETS = {
sampleRoom: "./rooms/sample.tmj",
sampleInside: "./rooms/sample_inside.tmj"
sampleRoom: "./rooms/sample.tmj"
}
export default class Assets {
@ -54,7 +53,7 @@ export default class Assets {
loadTileset(name, path) {
return fetch(path).then(rsp => rsp.json()).then(json => {
return this.assetMap[name] = new Tileset(this.game, json, name, path)
return this.assetMap[name] = new Tileset(this.game, json, name)
}).then(tileset => this.loadImages(tileset.imagesToLoad))
}

33
src/game.js
View File

@ -10,7 +10,7 @@ export default class Game {
this.canvas = canvas
this.ctx = canvas.getContext("2d")
this.timestamp = 0
this.player = new Player(this, 500, 450)
this.player = new Player(this, 200, 200)
this.actors = [this.player]
this.input = new Input().initialize()
@ -19,8 +19,7 @@ export default class Game {
this.events = {
"log_test": new Event("log_test", () => console.log("Log events work!")),
"change_color": new Event("change_color", object => object.setProperty("color", "blue")),
"show_message": new Event("show_message", this.openMessage.bind(this)),
"transport": new Event("transport", this.initiateTransport.bind(this))
"show_message": new Event("show_message", object => this.message = new Message(this, object.getProperty("messageText")))
}
this.message = null
@ -44,22 +43,10 @@ export default class Game {
this.currentRoom.objects.forEach(roomObject => this.actors.push(roomObject))
}
openMessage(object) {
this.message = new Message(this, object.getProperty("messageText"))
}
closeMessage(message) {
this.message = null
}
initiateTransport(object) {
const coords = JSON.parse(object.getProperty("transport_to_coords"))
this.actors = [this.player]
this.loadRoom(this.assets.get(object.getProperty("transport_to_room")))
this.player.x = coords[0]
this.player.y = coords[1]
}
loop(timestamp) {
this.dt = timestamp - this.timestamp
const fps = 1000 / this.dt
@ -84,13 +71,10 @@ export default class Game {
draw() {
const { canvas, ctx } = this
ctx.fillStyle = "black"
ctx.fillRect(0, 0, canvas.width, canvas.height)
this.currentRoom.draw(ctx)
this.actors.forEach(actor => actor.draw(ctx))
this.message?.draw(ctx)
this.drawFps(ctx)
this.drawPlayerPosition(ctx)
}
drawFps(ctx) {
@ -103,17 +87,4 @@ export default class Game {
ctx.fillText(Math.round(average(this.fpsBuffer)), ctx.canvas.width, 0)
ctx.strokeText(Math.round(average(this.fpsBuffer)), ctx.canvas.width, 0)
}
drawPlayerPosition(ctx) {
if (!this.player) return
ctx.fillStyle = "white"
ctx.fillRect(ctx.canvas.width, 20, -80, 20)
ctx.strokeStyle = "black"
ctx.textBaseline = "top"
ctx.textAlign = "right"
ctx.font = "bold 20px serif"
ctx.fillText(`${this.player.x}, ${this.player.y}`, ctx.canvas.width, 20)
ctx.strokeText(`${this.player.x}, ${this.player.y}`, ctx.canvas.width, 20)
}
}

11
src/room.js
View File

@ -70,15 +70,8 @@ export default class Room {
for (let y = 0; y < layer.height; y++) {
for (let x = 0; x < layer.width; x++) {
const index = x + (y * layer.width)
let tileIndex = layer.data[index] + 1
if (tileIndex == 1) continue
let tileset = this.json.tilesets
.sort((a, b) => b.firstgid - a.firstgid)
.find(ts => ts.firstgid <= tileIndex)
const { firstgid } = tileset
tileset = this.tilesets.find(ts => ts.source == tileset.source)
tileIndex -= firstgid + 1
const tileIndex = layer.data[index] - 1
const tileset = this.tilesets[0]
const [sx, sy] = tileset.tileOffset(tileIndex)
ctx.drawImage(
tileset.image,

9
src/tileset.js
View File

@ -1,10 +1,9 @@
export default class Tileset {
constructor(game, json, name, source) {
constructor(game, json, name) {
this.game = game
this.json = json
this.name = name
this.source = source
this.tiles = json.tiles || []
this.tiles = json.tiles
}
get imagesToLoad() {
@ -31,8 +30,8 @@ export default class Tileset {
tileOffset(index) {
return [
((index % this.columns) * (this.tileWidth + this.json.spacing)),
(Math.floor(index / this.columns) * (this.tileHeight + this.json.spacing))
((index % this.columns) * this.tileWidth),
(Math.floor(index / this.columns) * this.tileHeight)
]
}

4
style.css
View File

@ -1,7 +1,3 @@
body {
background-color: #666;
}
canvas {
image-rendering: pixelated;
}

20
tilesets/kenney_roguelike_base.tsj
View File

@ -1,20 +0,0 @@
{ "columns":57,
"grid":
{
"height":16,
"orientation":"orthogonal",
"width":16
},
"image":"..\/assets\/roguelikeSheet_transparent.png",
"imageheight":2104,
"imagewidth":3872,
"margin":0,
"name":"kenney_roguelike_base",
"spacing":4,
"tilecount":27921,
"tiledversion":"1.11.2",
"tileheight":64,
"tilewidth":64,
"type":"tileset",
"version":"1.10"
}

14
tilesets/kenney_roguelike_indoor.tsj
View File

@ -1,14 +0,0 @@
{ "columns":26,
"image":"..\/assets\/roguelikeIndoor_transparent.png",
"imageheight":1220,
"imagewidth":1828,
"margin":0,
"name":"kenney_roguelike_indoor",
"spacing":4,
"tilecount":7597,
"tiledversion":"1.11.2",
"tileheight":64,
"tilewidth":64,
"type":"tileset",
"version":"1.10"
}