Improve layer preview

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$"
 }
 }

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$"
 }
 }

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$"
 }
 }

res_raw/atlas.tps

@@ -258,6 +258,7 @@
             <key type="filename">sprites/belt/built/right_8.png</key>
             <key type="filename">sprites/belt/built/right_9.png</key>
             <key type="filename">sprites/blueprints/constant_signal.png</key>
+            <key type="filename">sprites/blueprints/display.png</key>
             <key type="filename">sprites/blueprints/lever.png</key>
             <key type="filename">sprites/blueprints/logic_gate-not.png</key>
             <key type="filename">sprites/blueprints/logic_gate-or.png</key>
@@ -278,6 +279,7 @@
             <key type="filename">sprites/blueprints/underground_belt_exit.png</key>
             <key type="filename">sprites/blueprints/wire_tunnel.png</key>
             <key type="filename">sprites/buildings/constant_signal.png</key>
+            <key type="filename">sprites/buildings/display.png</key>
             <key type="filename">sprites/buildings/lever.png</key>
             <key type="filename">sprites/buildings/logic_gate-not.png</key>
             <key type="filename">sprites/buildings/logic_gate-or.png</key>
@@ -531,6 +533,7 @@
             </struct>
             <key type="filename">sprites/wires/boolean_false.png</key>
             <key type="filename">sprites/wires/boolean_true.png</key>
+            <key type="filename">sprites/wires/wires_preview.png</key>
             <struct type="IndividualSpriteSettings">
                 <key>pivotPoint</key>
                 <point_f>0.5,0.5</point_f>
@@ -545,6 +548,27 @@
                 <key>scale9FromFile</key>
                 <false/>
             </struct>
+            <key type="filename">sprites/wires/display/blue.png</key>
+            <key type="filename">sprites/wires/display/cyan.png</key>
+            <key type="filename">sprites/wires/display/green.png</key>
+            <key type="filename">sprites/wires/display/purple.png</key>
+            <key type="filename">sprites/wires/display/red.png</key>
+            <key type="filename">sprites/wires/display/white.png</key>
+            <key type="filename">sprites/wires/display/yellow.png</key>
+            <struct type="IndividualSpriteSettings">
+                <key>pivotPoint</key>
+                <point_f>0.5,0.5</point_f>
+                <key>spriteScale</key>
+                <double>1</double>
+                <key>scale9Enabled</key>
+                <false/>
+                <key>scale9Borders</key>
+                <rect>11,11,22,22</rect>
+                <key>scale9Paddings</key>
+                <rect>11,11,22,22</rect>
+                <key>scale9FromFile</key>
+                <false/>
+            </struct>
         </map>
         <key>fileList</key>
         <array>

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

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

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

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);
+        }
     }
 
     /**

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.clearRect(0, 0, this.previewSize, this.previewSize);
-        context.fillStyle = "red";
-        context.fillRect(0, 0, PREVIEW_SIZE, PREVIEW_SIZE);
-
         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.clearRect(0, 0, this.previewSize, this.previewSize);
-        this.context.fillStyle = "rgba(0, 0, 0, 0.5)";
+        this.context.fillStyle = THEME.map.wires.previewColor;
-        this.context.fillRect(0, 0, PREVIEW_SIZE, PREVIEW_SIZE);
+        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;
+                    MapChunkView.drawSingleWiresOverviewTile(
-                    const data = getBuildingDataFromCode(staticComp.code);
+                        this.context,
-                    const metaBuilding = data.metaInstance;
+                        dx * globalConfig.tileSize,
-                    const overlayMatrix = metaBuilding.getSpecialOverlayRenderMatrix(
+                        dy * globalConfig.tileSize,
-                        staticComp.rotation,
+                        content,
-                        data.rotationVariant,
+                        globalConfig.tileSize
-                        data.variant,
-                        content
                     );
-
-                    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.context.globalCompositeOperation = "destination-in";
-        this.previewOverlay.draw(this.context, 0, 0, PREVIEW_SIZE, PREVIEW_SIZE);
+        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.x - (scale * this.previewSize) / 2,
-            worldPos.y - (scale * PREVIEW_SIZE) / 2,
+            worldPos.y - (scale * this.previewSize) / 2,
-            scale * PREVIEW_SIZE,
+            scale * this.previewSize,
-            scale * PREVIEW_SIZE
+            scale * this.previewSize
         );
+        parameters.context.globalAlpha = 1;
     }
 }

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;
+                    MapChunkView.drawSingleWiresOverviewTile(
-                    const data = getBuildingDataFromCode(staticComp.code);
+                        context,
-                    const metaBuilding = data.metaInstance;
+                        x * CHUNK_OVERLAY_RES,
-
+                        y * CHUNK_OVERLAY_RES,
-                    const overlayMatrix = metaBuilding.getSpecialOverlayRenderMatrix(
+                        content,
-                        staticComp.rotation,
+                        CHUNK_OVERLAY_RES
-                        data.rotationVariant,
-                        data.variant,
-                        content
                     );
+                }
+            }
+        }
+    }
 
-                    context.fillStyle = metaBuilding.getSilhouetteColor();
+    /**
-                    if (overlayMatrix) {
+     * @param {CanvasRenderingContext2D} context
-                        for (let dx = 0; dx < 3; ++dx) {
+     * @param {number} x
-                            for (let dy = 0; dy < 3; ++dy) {
+     * @param {number} y
-                                const isFilled = overlayMatrix[dx + dy * 3];
+     * @param {Entity} entity
-                                if (isFilled) {
+     * @param {number} tileSizePixels
-                                    context.fillRect(
+     */
-                                        x * CHUNK_OVERLAY_RES + dx,
+    static drawSingleWiresOverviewTile(context, x, y, entity, tileSizePixels) {
-                                        y * CHUNK_OVERLAY_RES + dy,
+        const staticComp = entity.components.StaticMapEntity;
-                                        1,
+        const data = getBuildingDataFromCode(staticComp.code);
-                                        1
+        const metaBuilding = data.metaInstance;
-                                    );
+        const overlayMatrix = metaBuilding.getSpecialOverlayRenderMatrix(
-                                }
+            staticComp.rotation,
-                            }
+            data.rotationVariant,
-                        }
+            data.variant,
-
+            entity
-                        continue;
+        );
-                    } else {
+        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,
+                            x + (dx * tileSizePixels) / CHUNK_OVERLAY_RES,
-                            y * CHUNK_OVERLAY_RES,
+                            y + (dy * tileSizePixels) / CHUNK_OVERLAY_RES,
-                            CHUNK_OVERLAY_RES,
+                            tileSizePixels / CHUNK_OVERLAY_RES,
-                            CHUNK_OVERLAY_RES
+                            tileSizePixels / CHUNK_OVERLAY_RES
                         );
-
-                        continue;
                     }
                 }
             }
+        } else {
+            context.fillRect(x, y, tileSizePixels, tileSizePixels);
         }
     }
 

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

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)"
         }
     },
 

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)"
         }
     },