diff --git a/res_built/atlas/atlas0_hq.json b/res_built/atlas/atlas0_hq.json index 70e309a5..2736a1d9 100644 --- a/res_built/atlas/atlas0_hq.json +++ b/res_built/atlas/atlas0_hq.json @@ -1271,6 +1271,6 @@ "format": "RGBA8888", "size": {"w":2048,"h":2048}, "scale": "0.75", - "smartupdate": "$TexturePacker:SmartUpdate:0f75d5c35a9ce06aeafcf694da4c6b33:e394b26e99f171754ba759e11e26c31c:908b89f5ca8ff73e331a35a3b14d0604$" + "smartupdate": "$TexturePacker:SmartUpdate:cd3efb179b186695586b2a19b2f23e1a:1f2545bea0c9df078662c1e6b25aa6f5:908b89f5ca8ff73e331a35a3b14d0604$" } } diff --git a/res_built/atlas/atlas0_hq.png b/res_built/atlas/atlas0_hq.png index a5bf2804..19509931 100644 Binary files a/res_built/atlas/atlas0_hq.png and b/res_built/atlas/atlas0_hq.png differ diff --git a/res_built/atlas/atlas0_lq.json b/res_built/atlas/atlas0_lq.json index 8266d073..9a71e571 100644 --- a/res_built/atlas/atlas0_lq.json +++ b/res_built/atlas/atlas0_lq.json @@ -1271,6 +1271,6 @@ "format": "RGBA8888", "size": {"w":512,"h":1024}, "scale": "0.25", - "smartupdate": "$TexturePacker:SmartUpdate:0f75d5c35a9ce06aeafcf694da4c6b33:e394b26e99f171754ba759e11e26c31c:908b89f5ca8ff73e331a35a3b14d0604$" + "smartupdate": "$TexturePacker:SmartUpdate:cd3efb179b186695586b2a19b2f23e1a:1f2545bea0c9df078662c1e6b25aa6f5:908b89f5ca8ff73e331a35a3b14d0604$" } } diff --git a/res_built/atlas/atlas0_lq.png b/res_built/atlas/atlas0_lq.png index 7353c79f..8f5b6dac 100644 Binary files a/res_built/atlas/atlas0_lq.png and b/res_built/atlas/atlas0_lq.png differ diff --git a/res_built/atlas/atlas0_mq.json b/res_built/atlas/atlas0_mq.json index 5db66c45..a11cedf6 100644 --- a/res_built/atlas/atlas0_mq.json +++ b/res_built/atlas/atlas0_mq.json @@ -1271,6 +1271,6 @@ "format": "RGBA8888", "size": {"w":1024,"h":2048}, "scale": "0.5", - "smartupdate": "$TexturePacker:SmartUpdate:0f75d5c35a9ce06aeafcf694da4c6b33:e394b26e99f171754ba759e11e26c31c:908b89f5ca8ff73e331a35a3b14d0604$" + "smartupdate": "$TexturePacker:SmartUpdate:cd3efb179b186695586b2a19b2f23e1a:1f2545bea0c9df078662c1e6b25aa6f5:908b89f5ca8ff73e331a35a3b14d0604$" } } diff --git a/res_built/atlas/atlas0_mq.png b/res_built/atlas/atlas0_mq.png index 6f37168f..3cc258e1 100644 Binary files a/res_built/atlas/atlas0_mq.png and b/res_built/atlas/atlas0_mq.png differ diff --git a/res_raw/atlas.tps b/res_raw/atlas.tps index f1206df5..28809d93 100644 --- a/res_raw/atlas.tps +++ b/res_raw/atlas.tps @@ -258,6 +258,7 @@ sprites/belt/built/right_8.png sprites/belt/built/right_9.png sprites/blueprints/constant_signal.png + sprites/blueprints/display.png sprites/blueprints/lever.png sprites/blueprints/logic_gate-not.png sprites/blueprints/logic_gate-or.png @@ -278,6 +279,7 @@ sprites/blueprints/underground_belt_exit.png sprites/blueprints/wire_tunnel.png sprites/buildings/constant_signal.png + sprites/buildings/display.png sprites/buildings/lever.png sprites/buildings/logic_gate-not.png sprites/buildings/logic_gate-or.png @@ -531,6 +533,7 @@ sprites/wires/boolean_false.png sprites/wires/boolean_true.png + sprites/wires/wires_preview.png pivotPoint 0.5,0.5 @@ -545,6 +548,27 @@ scale9FromFile + sprites/wires/display/blue.png + sprites/wires/display/cyan.png + sprites/wires/display/green.png + sprites/wires/display/purple.png + sprites/wires/display/red.png + sprites/wires/display/white.png + sprites/wires/display/yellow.png + + pivotPoint + 0.5,0.5 + spriteScale + 1 + scale9Enabled + + scale9Borders + 11,11,22,22 + scale9Paddings + 11,11,22,22 + scale9FromFile + + fileList diff --git a/res_raw/sprites/wires/wires_preview.png b/res_raw/sprites/wires/wires_preview.png index f7a6568a..03c9d0ef 100644 Binary files a/res_raw/sprites/wires/wires_preview.png and b/res_raw/sprites/wires/wires_preview.png differ diff --git a/src/js/game/buildings/display.js b/src/js/game/buildings/display.js index 9a7cb62a..9c072af9 100644 --- a/src/js/game/buildings/display.js +++ b/src/js/game/buildings/display.js @@ -26,6 +26,10 @@ export class MetaDisplayBuilding extends MetaBuilding { return new Vector(1, 1); } + getShowWiresLayerPreview() { + return true; + } + /** * Creates the entity at the given location * @param {Entity} entity diff --git a/src/js/game/buildings/filter.js b/src/js/game/buildings/filter.js index 084d30e0..5637a21a 100644 --- a/src/js/game/buildings/filter.js +++ b/src/js/game/buildings/filter.js @@ -29,6 +29,10 @@ export class MetaFilterBuilding extends MetaBuilding { return new Vector(2, 1); } + getShowWiresLayerPreview() { + return true; + } + /** * Creates the entity at the given location * @param {Entity} entity diff --git a/src/js/game/buildings/lever.js b/src/js/game/buildings/lever.js index 596c4e0d..e7e35888 100644 --- a/src/js/game/buildings/lever.js +++ b/src/js/game/buildings/lever.js @@ -35,6 +35,10 @@ export class MetaLeverBuilding extends MetaBuilding { return null; } + getShowWiresLayerPreview() { + return true; + } + /** * Creates the entity at the given location * @param {Entity} entity diff --git a/src/js/game/hud/parts/building_placer.js b/src/js/game/hud/parts/building_placer.js index 0111fb70..a3d87dc6 100644 --- a/src/js/game/hud/parts/building_placer.js +++ b/src/js/game/hud/parts/building_placer.js @@ -248,7 +248,9 @@ export class HUDBuildingPlacer extends HUDBuildingPlacerLogic { this.drawRegularPlacement(parameters); } - this.drawLayerPeek(parameters); + if (metaBuilding.getShowWiresLayerPreview()) { + this.drawLayerPeek(parameters); + } } /** diff --git a/src/js/game/hud/parts/layer_preview.js b/src/js/game/hud/parts/layer_preview.js index f52db8a6..a6692332 100644 --- a/src/js/game/hud/parts/layer_preview.js +++ b/src/js/game/hud/parts/layer_preview.js @@ -2,33 +2,46 @@ import { freeCanvas, makeOffscreenBuffer } from "../../../core/buffer_utils"; import { globalConfig } from "../../../core/config"; import { Loader } from "../../../core/loader"; import { Vector } from "../../../core/vector"; -import { getBuildingDataFromCode } from "../../building_codes"; +import { MapChunkView } from "../../map_chunk_view"; import { enumLayer } from "../../root"; +import { THEME } from "../../theme"; import { BaseHUDPart } from "../base_hud_part"; -const PREVIEW_SIZE = 512; - /** * Helper class which allows peaking through to the wires layer */ export class HUDLayerPreview extends BaseHUDPart { initialize() { - const [canvas, context] = makeOffscreenBuffer(PREVIEW_SIZE, PREVIEW_SIZE, { + this.initializeCanvas(); + this.root.signals.aboutToDestruct.add(() => freeCanvas(this.canvas)); + this.root.signals.resized.add(this.initializeCanvas, this); + this.previewOverlay = Loader.getSprite("sprites/wires/wires_preview.png"); + } + + /** + * (re) initializes the canvas + */ + initializeCanvas() { + if (this.canvas) { + freeCanvas(this.canvas); + delete this.canvas; + delete this.context; + } + + // Compute how big the preview should be + this.previewSize = Math.round( + Math.min(1024, Math.min(this.root.gameWidth, this.root.gameHeight) * 0.8) + ); + + const [canvas, context] = makeOffscreenBuffer(this.previewSize, this.previewSize, { smooth: true, label: "layerPeeker", reusable: true, }); - context.clearRect(0, 0, PREVIEW_SIZE, PREVIEW_SIZE); - context.fillStyle = "red"; - context.fillRect(0, 0, PREVIEW_SIZE, PREVIEW_SIZE); - + context.clearRect(0, 0, this.previewSize, this.previewSize); this.canvas = canvas; this.context = context; - - this.root.signals.aboutToDestruct.add(() => freeCanvas(this.canvas)); - - this.previewOverlay = Loader.getSprite("sprites/wires/wires_preview.png"); } /** @@ -38,11 +51,11 @@ export class HUDLayerPreview extends BaseHUDPart { * @param {number} scale 1 / zoomLevel */ prepareCanvasForPreview(worldPos, scale) { - this.context.clearRect(0, 0, PREVIEW_SIZE, PREVIEW_SIZE); - this.context.fillStyle = "rgba(0, 0, 0, 0.5)"; - this.context.fillRect(0, 0, PREVIEW_SIZE, PREVIEW_SIZE); + this.context.clearRect(0, 0, this.previewSize, this.previewSize); + this.context.fillStyle = THEME.map.wires.previewColor; + this.context.fillRect(0, 0, this.previewSize, this.previewSize); - const dimensions = scale * PREVIEW_SIZE; + const dimensions = scale * this.previewSize; const startWorldX = worldPos.x - dimensions / 2; const startWorldY = worldPos.y - dimensions / 2; @@ -50,7 +63,6 @@ export class HUDLayerPreview extends BaseHUDPart { const startTileX = Math.floor(startWorldX / globalConfig.tileSize); const startTileY = Math.floor(startWorldY / globalConfig.tileSize); const tileDimensions = Math.ceil(dimensions / globalConfig.tileSize); - console.log(startTileX, startTileY); this.context.save(); this.context.scale(1 / scale, 1 / scale); @@ -66,46 +78,20 @@ export class HUDLayerPreview extends BaseHUDPart { const content = this.root.map.getLayerContentXY(tileX, tileY, enumLayer.wires); if (content) { - const staticComp = content.components.StaticMapEntity; - const data = getBuildingDataFromCode(staticComp.code); - const metaBuilding = data.metaInstance; - const overlayMatrix = metaBuilding.getSpecialOverlayRenderMatrix( - staticComp.rotation, - data.rotationVariant, - data.variant, - content + MapChunkView.drawSingleWiresOverviewTile( + this.context, + dx * globalConfig.tileSize, + dy * globalConfig.tileSize, + content, + globalConfig.tileSize ); - - this.context.fillStyle = metaBuilding.getSilhouetteColor(); - if (overlayMatrix) { - for (let subX = 0; subX < 3; ++subX) { - for (let subY = 0; subY < 3; ++subY) { - const isFilled = overlayMatrix[subX + subY * 3]; - if (isFilled) { - this.context.fillRect( - dx * globalConfig.tileSize + (subX * globalConfig.tileSize) / 3, - dy * globalConfig.tileSize + (subY * globalConfig.tileSize) / 3, - globalConfig.tileSize / 3, - globalConfig.tileSize / 3 - ); - } - } - } - } else { - this.context.fillRect( - dx * globalConfig.tileSize, - dy * globalConfig.tileSize, - globalConfig.tileSize, - globalConfig.tileSize - ); - } } } } this.context.restore(); - this.context.globalCompositeOperation = "source-in"; - this.previewOverlay.draw(this.context, 0, 0, PREVIEW_SIZE, PREVIEW_SIZE); + this.context.globalCompositeOperation = "destination-in"; + this.previewOverlay.draw(this.context, 0, 0, this.previewSize, this.previewSize); this.context.globalCompositeOperation = "source-over"; return this.canvas; @@ -125,12 +111,14 @@ export class HUDLayerPreview extends BaseHUDPart { const canvas = this.prepareCanvasForPreview(worldPos, scale); + parameters.context.globalAlpha = 0.3; parameters.context.drawImage( canvas, - worldPos.x - (scale * PREVIEW_SIZE) / 2, - worldPos.y - (scale * PREVIEW_SIZE) / 2, - scale * PREVIEW_SIZE, - scale * PREVIEW_SIZE + worldPos.x - (scale * this.previewSize) / 2, + worldPos.y - (scale * this.previewSize) / 2, + scale * this.previewSize, + scale * this.previewSize ); + parameters.context.globalAlpha = 1; } } diff --git a/src/js/game/map_chunk_view.js b/src/js/game/map_chunk_view.js index 850e1ca6..a932726c 100644 --- a/src/js/game/map_chunk_view.js +++ b/src/js/game/map_chunk_view.js @@ -1,12 +1,12 @@ -import { MapChunk } from "./map_chunk"; -import { GameRoot, enumLayer } from "./root"; -import { DrawParameters } from "../core/draw_parameters"; -import { smoothenDpi } from "../core/dpi_manager"; import { globalConfig } from "../core/config"; -import { THEME } from "./theme"; +import { DrawParameters } from "../core/draw_parameters"; import { getBuildingDataFromCode } from "./building_codes"; +import { Entity } from "./entity"; +import { MapChunk } from "./map_chunk"; +import { enumLayer, GameRoot } from "./root"; +import { THEME } from "./theme"; -const CHUNK_OVERLAY_RES = 3; +export const CHUNK_OVERLAY_RES = 3; export class MapChunkView extends MapChunk { /** @@ -192,46 +192,52 @@ export class MapChunkView extends MapChunk { if (!content) { continue; } - const staticComp = content.components.StaticMapEntity; - const data = getBuildingDataFromCode(staticComp.code); - const metaBuilding = data.metaInstance; - - const overlayMatrix = metaBuilding.getSpecialOverlayRenderMatrix( - staticComp.rotation, - data.rotationVariant, - data.variant, - content + MapChunkView.drawSingleWiresOverviewTile( + context, + x * CHUNK_OVERLAY_RES, + y * CHUNK_OVERLAY_RES, + content, + CHUNK_OVERLAY_RES ); + } + } + } + } - context.fillStyle = metaBuilding.getSilhouetteColor(); - if (overlayMatrix) { - for (let dx = 0; dx < 3; ++dx) { - for (let dy = 0; dy < 3; ++dy) { - const isFilled = overlayMatrix[dx + dy * 3]; - if (isFilled) { - context.fillRect( - x * CHUNK_OVERLAY_RES + dx, - y * CHUNK_OVERLAY_RES + dy, - 1, - 1 - ); - } - } - } - - continue; - } else { + /** + * @param {CanvasRenderingContext2D} context + * @param {number} x + * @param {number} y + * @param {Entity} entity + * @param {number} tileSizePixels + */ + static drawSingleWiresOverviewTile(context, x, y, entity, tileSizePixels) { + const staticComp = entity.components.StaticMapEntity; + const data = getBuildingDataFromCode(staticComp.code); + const metaBuilding = data.metaInstance; + const overlayMatrix = metaBuilding.getSpecialOverlayRenderMatrix( + staticComp.rotation, + data.rotationVariant, + data.variant, + entity + ); + context.fillStyle = metaBuilding.getSilhouetteColor(); + if (overlayMatrix) { + for (let dx = 0; dx < 3; ++dx) { + for (let dy = 0; dy < 3; ++dy) { + const isFilled = overlayMatrix[dx + dy * 3]; + if (isFilled) { context.fillRect( - x * CHUNK_OVERLAY_RES, - y * CHUNK_OVERLAY_RES, - CHUNK_OVERLAY_RES, - CHUNK_OVERLAY_RES + x + (dx * tileSizePixels) / CHUNK_OVERLAY_RES, + y + (dy * tileSizePixels) / CHUNK_OVERLAY_RES, + tileSizePixels / CHUNK_OVERLAY_RES, + tileSizePixels / CHUNK_OVERLAY_RES ); - - continue; } } } + } else { + context.fillRect(x, y, tileSizePixels, tileSizePixels); } } diff --git a/src/js/game/meta_building.js b/src/js/game/meta_building.js index f1b8b05a..21189d22 100644 --- a/src/js/game/meta_building.js +++ b/src/js/game/meta_building.js @@ -91,6 +91,13 @@ export class MetaBuilding { return false; } + /** + * Whether to show a preview of the wires layer when placing the building + */ + getShowWiresLayerPreview() { + return false; + } + /** * Whether to rotate automatically in the dragging direction while placing * @param {string} variant diff --git a/src/js/game/themes/dark.json b/src/js/game/themes/dark.json index 85b29617..6be36442 100644 --- a/src/js/game/themes/dark.json +++ b/src/js/game/themes/dark.json @@ -34,7 +34,8 @@ }, "wires": { - "overlayColor": "rgba(97, 161, 152, 0.75)" + "overlayColor": "rgba(97, 161, 152, 0.75)", + "previewColor": "rgb(97, 161, 152, 0.5)" } }, diff --git a/src/js/game/themes/light.json b/src/js/game/themes/light.json index 2bc7050a..29745004 100644 --- a/src/js/game/themes/light.json +++ b/src/js/game/themes/light.json @@ -35,7 +35,8 @@ }, "wires": { - "overlayColor": "rgba(97, 161, 152, 0.75)" + "overlayColor": "rgba(97, 161, 152, 0.75)", + "previewColor": "rgb(97, 161, 152, 0.4)" } },