Mascali
/
shapez.io
Archived
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Improve layer preview

This commit is contained in:
tobspr 2020-08-15 15:24:42 +02:00
parent c25428357e
commit 6a3a9c49cf
17 changed files with 141 additions and 100 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
res_built/atlas/atlas0_hq.json
View File

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

BIN
res_built/atlas/atlas0_hq.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.1 MiB

After

Width:  |  Height:  |  Size: 1.1 MiB

2
res_built/atlas/atlas0_lq.json
View File

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

BIN
res_built/atlas/atlas0_lq.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 237 KiB

After

Width:  |  Height:  |  Size: 236 KiB

2
res_built/atlas/atlas0_mq.json
View File

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

BIN
res_built/atlas/atlas0_mq.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 569 KiB

After

Width:  |  Height:  |  Size: 568 KiB

24
res_raw/atlas.tps
View File

@ -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>

BIN
res_raw/sprites/wires/wires_preview.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 4.0 KiB

After

Width:  |  Height:  |  Size: 4.5 KiB

4
src/js/game/buildings/display.js
View File

@ -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

4
src/js/game/buildings/filter.js
View File

@ -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

4
src/js/game/buildings/lever.js
View File

@ -35,6 +35,10 @@ export class MetaLeverBuilding extends MetaBuilding {
return null;
}
getShowWiresLayerPreview() {
return true;
}
/**
* Creates the entity at the given location
* @param {Entity} entity

4
src/js/game/hud/parts/building_placer.js
View File

@ -248,7 +248,9 @@ export class HUDBuildingPlacer extends HUDBuildingPlacerLogic {
this.drawRegularPlacement(parameters);
}
this.drawLayerPeek(parameters);
if (metaBuilding.getShowWiresLayerPreview()) {
this.drawLayerPeek(parameters);
}
}
/**

98
src/js/game/hud/parts/layer_preview.js
View File

@ -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;
}
}

84
src/js/game/map_chunk_view.js
View File

@ -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);
}
}

7
src/js/game/meta_building.js
View File

@ -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

3
src/js/game/themes/dark.json
View File

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

3
src/js/game/themes/light.json
View File

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