Improve layer preview
|
@ -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$"
|
||||
}
|
||||
}
|
||||
|
|
Before Width: | Height: | Size: 1.1 MiB After Width: | Height: | Size: 1.1 MiB |
|
@ -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$"
|
||||
}
|
||||
}
|
||||
|
|
Before Width: | Height: | Size: 237 KiB After Width: | Height: | Size: 236 KiB |
|
@ -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$"
|
||||
}
|
||||
}
|
||||
|
|
Before Width: | Height: | Size: 569 KiB After Width: | Height: | Size: 568 KiB |
|
@ -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>
|
||||
|
|
Before Width: | Height: | Size: 4.0 KiB After Width: | Height: | Size: 4.5 KiB |
|
@ -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
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -35,6 +35,10 @@ export class MetaLeverBuilding extends MetaBuilding {
|
|||
return null;
|
||||
}
|
||||
|
||||
getShowWiresLayerPreview() {
|
||||
return true;
|
||||
}
|
||||
|
||||
/**
|
||||
* Creates the entity at the given location
|
||||
* @param {Entity} entity
|
||||
|
|
|
@ -248,7 +248,9 @@ export class HUDBuildingPlacer extends HUDBuildingPlacerLogic {
|
|||
this.drawRegularPlacement(parameters);
|
||||
}
|
||||
|
||||
this.drawLayerPeek(parameters);
|
||||
if (metaBuilding.getShowWiresLayerPreview()) {
|
||||
this.drawLayerPeek(parameters);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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)"
|
||||
}
|
||||
},
|
||||
|
||||
|
|
|
@ -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)"
|
||||
}
|
||||
},
|
||||
|
||||
|
|