forked from ppfun/pixelplanet
switch from overlay to small-pixel when zoom in
fix historical view scale clamping to 1.0
This commit is contained in:
parent
b7ed1a4ca0
commit
304dc6acaa
|
@ -65,13 +65,12 @@ const TemplateSettings = () => {
|
||||||
{t`Show templates as overlays ingame.`}
|
{t`Show templates as overlays ingame.`}
|
||||||
</SettingsItem>
|
</SettingsItem>
|
||||||
<SettingsItem
|
<SettingsItem
|
||||||
title={t`Small Pixels Overlay`}
|
title={t`Small Pixels Zoom`}
|
||||||
value={oSmallPxls}
|
value={oSmallPxls}
|
||||||
onToggle={() => dispatch(toggleSmallPxls())}
|
onToggle={() => dispatch(toggleSmallPxls())}
|
||||||
>
|
>
|
||||||
{
|
{
|
||||||
// eslint-disable-next-line max-len
|
t`Show overlay as small individual pixels on high zoomlevels.`
|
||||||
t`Show overlay as small individual pixels (will only show in high zoomlevels).`
|
|
||||||
}
|
}
|
||||||
</SettingsItem>
|
</SettingsItem>
|
||||||
|
|
||||||
|
|
|
@ -61,3 +61,6 @@ export const HOLD_PAINT = {
|
||||||
HISTORY: 2,
|
HISTORY: 2,
|
||||||
OVERLAY: 3,
|
OVERLAY: 3,
|
||||||
};
|
};
|
||||||
|
|
||||||
|
// threshold at which zoomlevel overlay switches to small-pixel mode
|
||||||
|
export const OVERLAY_SP_TH = 8;
|
||||||
|
|
|
@ -130,7 +130,7 @@ export default (store) => (next) => (action) => {
|
||||||
case 's/TGL_HISTORICAL_VIEW': {
|
case 's/TGL_HISTORICAL_VIEW': {
|
||||||
const renderer = getRenderer();
|
const renderer = getRenderer();
|
||||||
// update view to clamp scale
|
// update view to clamp scale
|
||||||
renderer.updateView(renderer.view);
|
renderer.updateView(renderer.view, renderer.view);
|
||||||
renderer.forceNextRender = true;
|
renderer.forceNextRender = true;
|
||||||
break;
|
break;
|
||||||
}
|
}
|
||||||
|
|
|
@ -7,8 +7,8 @@ const initialState = {
|
||||||
// prefix o: overlay, m: minimap
|
// prefix o: overlay, m: minimap
|
||||||
ovEnabled: false,
|
ovEnabled: false,
|
||||||
mEnabled: false,
|
mEnabled: false,
|
||||||
oOpacity: 70,
|
oOpacity: 40,
|
||||||
oSmallPxls: false,
|
oSmallPxls: true,
|
||||||
/*
|
/*
|
||||||
* [{
|
* [{
|
||||||
* enabled,
|
* enabled,
|
||||||
|
|
|
@ -9,6 +9,7 @@ import {
|
||||||
TILE_ZOOM_LEVEL,
|
TILE_ZOOM_LEVEL,
|
||||||
TILE_SIZE,
|
TILE_SIZE,
|
||||||
MAX_SCALE,
|
MAX_SCALE,
|
||||||
|
OVERLAY_SP_TH,
|
||||||
} from '../core/constants';
|
} from '../core/constants';
|
||||||
|
|
||||||
import {
|
import {
|
||||||
|
@ -133,6 +134,7 @@ class Renderer2D extends Renderer {
|
||||||
canvases[canvasId].historicalSizes,
|
canvases[canvasId].historicalSizes,
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
this._view[2] = 0;
|
||||||
this.updateView(state.canvas.view);
|
this.updateView(state.canvas.view);
|
||||||
this.forceNextRender = true;
|
this.forceNextRender = true;
|
||||||
}
|
}
|
||||||
|
@ -226,7 +228,11 @@ class Renderer2D extends Renderer {
|
||||||
this.tiledScale = tiledScale;
|
this.tiledScale = tiledScale;
|
||||||
this.tiledZoom = tiledZoom;
|
this.tiledZoom = tiledZoom;
|
||||||
this.relScale = relScale;
|
this.relScale = relScale;
|
||||||
if (viewscale < this.scaleThreshold || prevScale < this.scaleThreshold) {
|
if (viewscale < this.scaleThreshold || prevScale < this.scaleThreshold
|
||||||
|
|| (state.templates.ovEnabled && (
|
||||||
|
(prevScale <= OVERLAY_SP_TH && scale > OVERLAY_SP_TH)
|
||||||
|
|| (prevScale > OVERLAY_SP_TH && scale <= OVERLAY_SP_TH)
|
||||||
|
))) {
|
||||||
this.forceNextRender = true;
|
this.forceNextRender = true;
|
||||||
} else {
|
} else {
|
||||||
this.forceNextSubrender = true;
|
this.forceNextSubrender = true;
|
||||||
|
@ -423,7 +429,9 @@ class Renderer2D extends Renderer {
|
||||||
}
|
}
|
||||||
context.restore();
|
context.restore();
|
||||||
|
|
||||||
if (state.templates.ovEnabled && !state.templates.oSmallPxls) {
|
if (state.templates.ovEnabled
|
||||||
|
&& (scale < OVERLAY_SP_TH || !state.templates.oSmallPxls)
|
||||||
|
) {
|
||||||
renderOverlay(
|
renderOverlay(
|
||||||
state, this.canvas, chunkPosition, scale,
|
state, this.canvas, chunkPosition, scale,
|
||||||
this.tiledScale, this.scaleThreshold,
|
this.tiledScale, this.scaleThreshold,
|
||||||
|
@ -554,8 +562,8 @@ class Renderer2D extends Renderer {
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
if (viewscale >= 5 && state.templates.ovEnabled
|
if (state.templates.ovEnabled
|
||||||
&& state.templates.oSmallPxls
|
&& state.templates.oSmallPxls && viewscale >= OVERLAY_SP_TH
|
||||||
) {
|
) {
|
||||||
renderSmallPOverlay(state, viewport, _view, viewscale);
|
renderSmallPOverlay(state, viewport, _view, viewscale);
|
||||||
}
|
}
|
||||||
|
|
|
@ -119,9 +119,14 @@ export function renderOverlay(
|
||||||
const [x, y] = centerChunk
|
const [x, y] = centerChunk
|
||||||
.map((z) => z * TILE_SIZE / tiledScale
|
.map((z) => z * TILE_SIZE / tiledScale
|
||||||
+ TILE_SIZE / 2 / tiledScale - canvasSize / 2);
|
+ TILE_SIZE / 2 / tiledScale - canvasSize / 2);
|
||||||
|
|
||||||
|
// if scale > scaleThreshold, then scaling happens in renderer
|
||||||
|
// instead of offscreen canvas
|
||||||
|
const offscreenScale = (scale > scaleThreshold) ? 1.0 : scale;
|
||||||
|
|
||||||
const { width, height } = $canvas;
|
const { width, height } = $canvas;
|
||||||
const horizontalRadius = width / 2 / scale;
|
const horizontalRadius = width / 2 / offscreenScale;
|
||||||
const verticalRadius = height / 2 / scale;
|
const verticalRadius = height / 2 / offscreenScale;
|
||||||
const templates = templateLoader.getTemplatesInView(
|
const templates = templateLoader.getTemplatesInView(
|
||||||
canvasId, x, y, horizontalRadius, verticalRadius,
|
canvasId, x, y, horizontalRadius, verticalRadius,
|
||||||
);
|
);
|
||||||
|
@ -130,10 +135,6 @@ export function renderOverlay(
|
||||||
const context = $canvas.getContext('2d');
|
const context = $canvas.getContext('2d');
|
||||||
if (!context) return;
|
if (!context) return;
|
||||||
|
|
||||||
// if scale > scaleThreshold, then scaling happens in renderer
|
|
||||||
// instead of offscreen canvas
|
|
||||||
const offscreenScale = (scale > scaleThreshold) ? 1.0 : scale;
|
|
||||||
|
|
||||||
context.save();
|
context.save();
|
||||||
context.scale(offscreenScale, offscreenScale);
|
context.scale(offscreenScale, offscreenScale);
|
||||||
context.globalAlpha = state.templates.oOpacity / 100;
|
context.globalAlpha = state.templates.oOpacity / 100;
|
||||||
|
|
Loading…
Reference in New Issue
Block a user