diff --git a/js/renderer-canvas.js b/js/renderer-canvas.js index ddf9e0f..e9ec7c8 100644 --- a/js/renderer-canvas.js +++ b/js/renderer-canvas.js @@ -50,11 +50,15 @@ export class CanvasRenderer { this.viewport_size_x = 9; this.viewport_size_y = 9; } - this.canvas = mk('canvas', {width: tileset.size_x * this.viewport_size_x, height: tileset.size_y * this.viewport_size_y}); - this.canvas.style.setProperty('--viewport-width', this.viewport_size_x); - this.canvas.style.setProperty('--viewport-height', this.viewport_size_y); - this.canvas.style.setProperty('--tile-width', `${tileset.size_x}px`); - this.canvas.style.setProperty('--tile-height', `${tileset.size_y}px`); + this.canvas = this.constructor.make_canvas( + tileset.size_x * this.viewport_size_x, + tileset.size_y * this.viewport_size_y); + if (this.canvas.style) { + this.canvas.style.setProperty('--viewport-width', this.viewport_size_x); + this.canvas.style.setProperty('--viewport-height', this.viewport_size_y); + this.canvas.style.setProperty('--tile-width', `${tileset.size_x}px`); + this.canvas.style.setProperty('--tile-height', `${tileset.size_y}px`); + } this.ctx = this.canvas.getContext('2d'); this.viewport_x = 0; this.viewport_y = 0; @@ -70,6 +74,11 @@ export class CanvasRenderer { this.active_player = null; } + // This is here so command-line Node stuff can swap it out for the canvas package + static make_canvas(w, h) { + return mk('canvas', {width: w, height: h}); + } + set_level(level) { this.level = level; // TODO update viewport size... or maybe Game should do that since you might be cheating @@ -154,12 +163,14 @@ export class CanvasRenderer { return; this.viewport_dirty = false; - this.canvas.setAttribute('width', this.tileset.size_x * this.viewport_size_x); - this.canvas.setAttribute('height', this.tileset.size_y * this.viewport_size_y); - this.canvas.style.setProperty('--viewport-width', this.viewport_size_x); - this.canvas.style.setProperty('--viewport-height', this.viewport_size_y); - this.canvas.style.setProperty('--tile-width', `${this.tileset.size_x}px`); - this.canvas.style.setProperty('--tile-height', `${this.tileset.size_y}px`); + this.canvas.width = this.tileset.size_x * this.viewport_size_x; + this.canvas.height = this.tileset.size_y * this.viewport_size_y; + if (this.canvas.style) { + this.canvas.style.setProperty('--viewport-width', this.viewport_size_x); + this.canvas.style.setProperty('--viewport-height', this.viewport_size_y); + this.canvas.style.setProperty('--tile-width', `${this.tileset.size_x}px`); + this.canvas.style.setProperty('--tile-height', `${this.tileset.size_y}px`); + } } draw(update_progress = 0) { @@ -277,7 +288,6 @@ export class CanvasRenderer { // If they killed the player, indicate as such. The indicator has an arrow at the // bottom; align that about 3/4 up the killer if (actor.is_killer && '#killer-indicator' in this.tileset.layout) { - packet.y -= Math.floor(th * 3/4) / th; this.tileset.draw_type('#killer-indicator', null, packet); } } @@ -426,7 +436,7 @@ export class CanvasRenderer { // or something, or maybe make this a tileset method draw_single_tile_type(name, tile = null, canvas = null, x = 0, y = 0) { if (! canvas) { - canvas = mk('canvas', {width: this.tileset.size_x, height: this.tileset.size_y}); + canvas = this.constructor.make_canvas(this.tileset.size_x, this.tileset.size_y); } let ctx = canvas.getContext('2d'); diff --git a/js/tileset.js b/js/tileset.js index 0c7bf0f..2530d89 100644 --- a/js/tileset.js +++ b/js/tileset.js @@ -512,6 +512,8 @@ export const CC2_TILESET_LAYOUT = { __special__: 'animated', duration: 20, cc2_duration: 16, + // Nice little touch: green teleporters aren't animated in sync + positionally_hashed: true, all: [[4, 19], [5, 19], [6, 19], [7, 19]], }, teleport_yellow: { @@ -1016,10 +1018,10 @@ export const LL_TILESET_LAYOUT = { '#supported-versions': new Set(['cc1', 'cc2', 'll']), '#wire-width': 1/16, '#editor-arrows': { - north: [6, 1], - east: [6.5, 1], - south: [6, 1.5], - west: [6.5, 1.5], + north: [25, 31], + east: [25.5, 31], + south: [25, 31.5], + west: [25.5, 31.5], }, // ------------------------------------------------------------------------------------------------ @@ -1113,24 +1115,29 @@ export const LL_TILESET_LAYOUT = { }, no_player1_sign: [10, 2], no_player2_sign: [10, 3], - '#active-player-background': [11, 2], - // TODO dopps can push but i don't think they have any other visuals - doppelganger1: { - __special__: 'overlay', - base: [11, 3], - overlay: 'player', - }, - doppelganger2: { - __special__: 'overlay', - base: [11, 3], - overlay: 'player2', - }, + socket: [11, 2], exit: { __special__: 'animated', duration: 16, all: [[12, 2], [13, 2], [14, 2], [15, 2]], }, - socket: [12, 3], + '#active-player-background': { + __special__: 'animated', + duration: 120, + all: [[12, 3], [13, 3]], + }, + // TODO dopps can push but i don't think they have any other visuals + doppelganger1: { + __special__: 'overlay', + base: [14, 3], + overlay: 'player', + }, + doppelganger2: { + __special__: 'overlay', + base: [14, 3], + overlay: 'player2', + }, + '#killer-indicator': [15, 3], floor_custom_green: [0, 4], floor_custom_pink: [1, 4], @@ -1148,7 +1155,7 @@ export const LL_TILESET_LAYOUT = { open: [1, 7], }, cracked_floor: [2, 6], - + thin_walls: { __special__: 'thin_walls', thin_walls_ns: [8, 4], @@ -1415,6 +1422,8 @@ export const LL_TILESET_LAYOUT = { __special__: 'animated', duration: 20, cc2_duration: 16, + // Nice little touch: green teleporters aren't animated in sync + positionally_hashed: true, all: [[4, 23], [5, 23], [6, 23], [7, 23]], }, teleport_blue_exit: { diff --git a/tileset-lexy.png b/tileset-lexy.png index ea0db60..4efda2b 100644 Binary files a/tileset-lexy.png and b/tileset-lexy.png differ diff --git a/tileset-src/tileset-lexy.aseprite b/tileset-src/tileset-lexy.aseprite index 7158e9e..071e825 100644 Binary files a/tileset-src/tileset-lexy.aseprite and b/tileset-src/tileset-lexy.aseprite differ