diff --git a/src/levelEditor/GeoConstants.js b/src/levelEditor/GeoConstants.js index 8f6431b..c6767cf 100644 --- a/src/levelEditor/GeoConstants.js +++ b/src/levelEditor/GeoConstants.js @@ -7,32 +7,56 @@ export const SCREEN_WIDTH = 1920; export const SCREEN_HEIGHT: number = 1080 + 10; // I don't know why the geo has 10px extra at the bottom... // Colors -const PIXEL_COLORS: Map = new Map(); +const EDITOR_UI_PIXEL_COLORS: Map = new Map(); +const EXPORT_TERRAIN_PIXEL_COLORS: Map = new Map(); // higher ground layers -PIXEL_COLORS.set(255, '#eeeeee'); -PIXEL_COLORS.set(254, '#e5e5e5'); -PIXEL_COLORS.set(253, '#dddddd'); -PIXEL_COLORS.set(252, '#d4d4d4'); -PIXEL_COLORS.set(251, '#cccccc'); -PIXEL_COLORS.set(250, '#c3c3c3'); -PIXEL_COLORS.set(249, '#bbbbbb'); -PIXEL_COLORS.set(248, '#b2b2b2'); -PIXEL_COLORS.set(247, '#aaaaaa'); // [0, 3, 2] -PIXEL_COLORS.set(246, '#a1a1a1'); // [0, -2, -14] -PIXEL_COLORS.set(244, '#999999'); // [0, 5, 1] -PIXEL_COLORS.set(243, '#909090'); // [0, 6, 1] -PIXEL_COLORS.set(242, '#888888'); // [0, 6, 1] +EDITOR_UI_PIXEL_COLORS.set(255, '#eeeeee'); +EDITOR_UI_PIXEL_COLORS.set(254, '#e5e5e5'); +EDITOR_UI_PIXEL_COLORS.set(253, '#dddddd'); +EDITOR_UI_PIXEL_COLORS.set(252, '#d4d4d4'); +EDITOR_UI_PIXEL_COLORS.set(251, '#cccccc'); +EDITOR_UI_PIXEL_COLORS.set(250, '#c3c3c3'); +EDITOR_UI_PIXEL_COLORS.set(249, '#bbbbbb'); +EDITOR_UI_PIXEL_COLORS.set(248, '#b2b2b2'); +EDITOR_UI_PIXEL_COLORS.set(247, '#aaaaaa'); // [0, 3, 2] +EDITOR_UI_PIXEL_COLORS.set(246, '#a1a1a1'); // [0, -2, -14] +EDITOR_UI_PIXEL_COLORS.set(244, '#999999'); // [0, 5, 1] +EDITOR_UI_PIXEL_COLORS.set(243, '#909090'); // [0, 6, 1] +EDITOR_UI_PIXEL_COLORS.set(242, '#888888'); // [0, 6, 1] -PIXEL_COLORS.set(6, 'blue'); // water -PIXEL_COLORS.set(5, 'brown'); // unwalkable collision -PIXEL_COLORS.set(4, 'lightblue'); // sky -PIXEL_COLORS.set(3, 'pink'); // swimable wall -PIXEL_COLORS.set(2, '#555'); // unswimable wall -PIXEL_COLORS.set(1, '#e2e2e2'); // ramp -PIXEL_COLORS.set(0, '#fff'); // walkable +EDITOR_UI_PIXEL_COLORS.set(6, 'blue'); // water +EDITOR_UI_PIXEL_COLORS.set(5, 'brown'); // unwalkable collision +EDITOR_UI_PIXEL_COLORS.set(4, 'lightblue'); // sky +EDITOR_UI_PIXEL_COLORS.set(3, 'pink'); // swimable wall +EDITOR_UI_PIXEL_COLORS.set(2, '#555'); // unswimable wall +EDITOR_UI_PIXEL_COLORS.set(1, '#e2e2e2'); // ramp +EDITOR_UI_PIXEL_COLORS.set(0, '#fff'); // walkable -export {PIXEL_COLORS}; +// higher ground layers +EXPORT_TERRAIN_PIXEL_COLORS.set(255, '#eeeeee'); +EXPORT_TERRAIN_PIXEL_COLORS.set(254, '#e5e5e5'); +EXPORT_TERRAIN_PIXEL_COLORS.set(253, '#dddddd'); +EXPORT_TERRAIN_PIXEL_COLORS.set(252, '#d4d4d4'); +EXPORT_TERRAIN_PIXEL_COLORS.set(251, '#cccccc'); +EXPORT_TERRAIN_PIXEL_COLORS.set(250, '#c3c3c3'); +EXPORT_TERRAIN_PIXEL_COLORS.set(249, '#bbbbbb'); +EXPORT_TERRAIN_PIXEL_COLORS.set(248, '#b2b2b2'); +EXPORT_TERRAIN_PIXEL_COLORS.set(247, '#aaaaaa'); // [0, 3, 2] +EXPORT_TERRAIN_PIXEL_COLORS.set(246, '#a1a1a1'); // [0, -2, -14] +EXPORT_TERRAIN_PIXEL_COLORS.set(244, '#999999'); // [0, 5, 1] +EXPORT_TERRAIN_PIXEL_COLORS.set(243, '#909090'); // [0, 6, 1] +EXPORT_TERRAIN_PIXEL_COLORS.set(242, '#888888'); // [0, 6, 1] + +EXPORT_TERRAIN_PIXEL_COLORS.set(6, 'blue'); // water +EXPORT_TERRAIN_PIXEL_COLORS.set(5, 'brown'); // unwalkable collision +EXPORT_TERRAIN_PIXEL_COLORS.set(4, 'lightblue'); // sky +EXPORT_TERRAIN_PIXEL_COLORS.set(3, 'pink'); // swimable wall +EXPORT_TERRAIN_PIXEL_COLORS.set(2, '#555'); // unswimable wall +EXPORT_TERRAIN_PIXEL_COLORS.set(1, '#e2e2e2'); // ramp +EXPORT_TERRAIN_PIXEL_COLORS.set(0, '#fff'); // walkable + +export {EDITOR_UI_PIXEL_COLORS, EXPORT_TERRAIN_PIXEL_COLORS}; // Explanations export const PIXEL_COLORS_EXPLANATIONS = [ diff --git a/src/levelEditor/common/GeoPreview.jsx b/src/levelEditor/common/GeoPreview.jsx index 502b75a..1e7b187 100644 --- a/src/levelEditor/common/GeoPreview.jsx +++ b/src/levelEditor/common/GeoPreview.jsx @@ -16,6 +16,7 @@ import drawGeoToCanvas from '../util/drawGeoToCanvas'; import styles from './GeoPreview.module.css'; type Props = $ReadOnly<{ + colors: Map, level: LevelType, mapMouseMoveCoordinates: ?[number, number], scale: number, @@ -50,6 +51,7 @@ export default function GeoPreview(props: Props): React$Node { drawGeoToCanvas({ canvas, + colors: props.colors, ctx, geo: decodedGeo, scale: props.scale * dpr, @@ -82,6 +84,7 @@ export default function GeoPreview(props: Props): React$Node { }, [ decodedGeo, dpr, + props.colors, props.mapMouseMoveCoordinates, props.scale, props.paintBufferUpdate, diff --git a/src/levelEditor/preview/LevelPreview.jsx b/src/levelEditor/preview/LevelPreview.jsx index 3b2eeef..3d7aea4 100644 --- a/src/levelEditor/preview/LevelPreview.jsx +++ b/src/levelEditor/preview/LevelPreview.jsx @@ -1,7 +1,7 @@ // @flow strict import GeoPreview from '../common/GeoPreview'; -import {GEO_WIDTH, SCREEN_WIDTH} from '../GeoConstants'; +import {EDITOR_UI_PIXEL_COLORS, GEO_WIDTH, SCREEN_WIDTH} from '../GeoConstants'; // $FlowFixMe[untyped-import] import spriteData from '../spriteData.json'; import type {EditorToolType} from '../types/EditorToolType'; @@ -164,6 +164,7 @@ export default function LevelPreview(props: Props): React$Node { {props.activeUiViews.includes('GEO') ? (
{ + EXPORT_TERRAIN_PIXEL_COLORS.forEach((color, byte) => { const colorObj = tinycolor(color); const rgb: {r: number, g: number, b: number} = colorObj.toRgb(); @@ -79,7 +79,9 @@ export default function LevelTerrainEditorModal(props: Props): React$Node { return { description: explanation.description, colors: explanation.colors.map((colorIndex) => { - const colorObj = tinycolor(PIXEL_COLORS.get(colorIndex)); + const colorObj = tinycolor( + EXPORT_TERRAIN_PIXEL_COLORS.get(colorIndex) + ); const rgb = colorObj.toRgb(); return [rgb.r, rgb.g, rgb.b]; @@ -184,6 +186,7 @@ export default function LevelTerrainEditorModal(props: Props): React$Node { const ctx = getCanvasRenderingContext(canvas, false); drawGeoToCanvas({ canvas, + colors: EXPORT_TERRAIN_PIXEL_COLORS, ctx, geo: decodedGeo, scale: 1, @@ -219,6 +222,7 @@ export default function LevelTerrainEditorModal(props: Props): React$Node {
{colorDescription != null ? colorDescription.description : 'N/A'}
@@ -113,7 +115,7 @@ export default function LevelToolbar(props: Props): React$Node { > {description} diff --git a/src/levelEditor/util/drawGeoToCanvas.js b/src/levelEditor/util/drawGeoToCanvas.js index 0e9564b..74ebadc 100644 --- a/src/levelEditor/util/drawGeoToCanvas.js +++ b/src/levelEditor/util/drawGeoToCanvas.js @@ -1,15 +1,17 @@ // @flow strict -import {GEO_WIDTH, PIXEL_COLORS} from '../GeoConstants'; +import {GEO_WIDTH} from '../GeoConstants'; export default function drawGeoToCanvas({ canvas, + colors, ctx, geo, scale, geoPaintBuffer, }: { canvas: HTMLCanvasElement, + colors: Map, ctx: CanvasRenderingContext2D, geo: Uint8Array, scale: number, @@ -27,7 +29,7 @@ export default function drawGeoToCanvas({ pixelToUse = geoPaintBuffer[index]; } - const fill = PIXEL_COLORS.get(pixelToUse); + const fill = colors.get(pixelToUse); if (fill == null) { console.warn('unknown pixel color ' + pixelToUse); return null; diff --git a/src/levelEditor/worldMap/getWorldMapGeoPreviewCache.js b/src/levelEditor/worldMap/getWorldMapGeoPreviewCache.js index 370034d..492d2a8 100644 --- a/src/levelEditor/worldMap/getWorldMapGeoPreviewCache.js +++ b/src/levelEditor/worldMap/getWorldMapGeoPreviewCache.js @@ -1,7 +1,7 @@ // @flow strict import getCanvasRenderingContext from '../../util/getCanvasRenderingContext'; -import {GEO_HEIGHT, GEO_WIDTH} from '../GeoConstants'; +import {EDITOR_UI_PIXEL_COLORS, GEO_HEIGHT, GEO_WIDTH} from '../GeoConstants'; import decodeGeoString from '../util/decodeGeoString'; import drawGeoToCanvas from '../util/drawGeoToCanvas'; @@ -23,6 +23,7 @@ export default function getWorldMapGeoPreviewCache(geo: string): string { const ctx = getCanvasRenderingContext(canvas, false); drawGeoToCanvas({ canvas, + colors: EDITOR_UI_PIXEL_COLORS, ctx, geo: decodedGeo, scale: dpr,