Different terrain colors on editor/export

Colors for export will remain the same for compatibility Now we can change the colors on the editor without much issue Ref #68
chicory-pizza · Apr 9, 2023 · 1ed2e18 · 1ed2e18
1 parent f981a73
commit 1ed2e18
Show file tree

Hide file tree

Showing 8 changed files with 71 additions and 32 deletions.
diff --git 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<number, string> = new Map();
+const EDITOR_UI_PIXEL_COLORS: Map<number, string> = new Map();
+const EXPORT_TERRAIN_PIXEL_COLORS: Map<number, string> = 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
@@ -16,6 +16,7 @@ import drawGeoToCanvas from '../util/drawGeoToCanvas';
 import styles from './GeoPreview.module.css';
 
 type Props = $ReadOnly<{
+	colors: Map<number, string>,
 	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
@@ -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') ? (
 				<div className={styles.geoCanvas}>
 					<GeoPreview
+						colors={EDITOR_UI_PIXEL_COLORS}
 						geoPaintBuffer={props.geoPaintBuffer}
 						level={props.level}
 						mapMouseMoveCoordinates={null}

diff --git a/src/levelEditor/sidebar/LevelSidebar.jsx b/src/levelEditor/sidebar/LevelSidebar.jsx
@@ -2,6 +2,7 @@
 
 import ErrorBoundary from '../../common/ErrorBoundary';
 import GeoPreview from '../common/GeoPreview';
+import {EDITOR_UI_PIXEL_COLORS} from '../GeoConstants';
 import type {GameEntityType} from '../types/GameEntityType';
 import type {LevelInspectorUiView} from '../types/LevelInspectorUiView';
 import type {LevelType} from '../types/LevelType';
@@ -55,6 +56,7 @@ export default function LevelSidebar(props: Props): React$Node {
 		<div className={styles.sidebar}>
 			<ErrorBoundary>
 				<GeoPreview
+					colors={EDITOR_UI_PIXEL_COLORS}
 					geoPaintBuffer={null}
 					level={props.level}
 					mapMouseMoveCoordinates={props.mapMouseMoveCoordinates}

diff --git a/src/levelEditor/terrainEditor/LevelTerrainEditorModal.jsx b/src/levelEditor/terrainEditor/LevelTerrainEditorModal.jsx
@@ -15,9 +15,9 @@ import getCanvasRenderingContext from '../../util/getCanvasRenderingContext';
 import GeoPreview from '../common/GeoPreview';
 import {useCurrentCoordinatesNonNullable} from '../CurrentCoordinatesContext';
 import {
+	EXPORT_TERRAIN_PIXEL_COLORS,
 	GEO_HEIGHT,
 	GEO_WIDTH,
-	PIXEL_COLORS,
 	PIXEL_COLORS_EXPLANATIONS,
 } from '../GeoConstants';
 import type {LevelType} from '../types/LevelType';
@@ -38,7 +38,7 @@ function prepareCanvas(): HTMLCanvasElement {
 function generateColorsToGameBytes() {
 	const bytes = [];
 
-	PIXEL_COLORS.forEach((color, byte) => {
+	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 {
 
 						<div className={styles.geoPreview}>
 							<GeoPreview
+								colors={EXPORT_TERRAIN_PIXEL_COLORS}
 								geoPaintBuffer={null}
 								level={props.level}
 								mapMouseMoveCoordinates={null}

diff --git a/src/levelEditor/toolbar/LevelToolbar.jsx b/src/levelEditor/toolbar/LevelToolbar.jsx
@@ -4,7 +4,7 @@ import {useHotkeys} from 'react-hotkeys-hook';
 
 import SelectableButton from '../../common/SelectableButton';
 import {
-	PIXEL_COLORS,
+	EDITOR_UI_PIXEL_COLORS,
 	PIXEL_COLORS_EXPLANATIONS,
 	TOOLBAR_COLOR_LOOKUP,
 } from '../GeoConstants';
@@ -74,7 +74,9 @@ export default function LevelToolbar(props: Props): React$Node {
 				<div className={styles.colorContainer}>
 					<span
 						className={styles.colorDisplay}
-						style={{background: PIXEL_COLORS.get(props.currentPaintColor)}}
+						style={{
+							background: EDITOR_UI_PIXEL_COLORS.get(props.currentPaintColor),
+						}}
 					/>
 					{colorDescription != null ? colorDescription.description : 'N/A'}
 				</div>
@@ -113,7 +115,7 @@ export default function LevelToolbar(props: Props): React$Node {
 							>
 								<span
 									className={styles.colorBox}
-									style={{background: PIXEL_COLORS.get(colorIndex)}}
+									style={{background: EDITOR_UI_PIXEL_COLORS.get(colorIndex)}}
 								/>
 								{description}
 							</SelectableButton>

diff --git 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<number, string>,
 	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
@@ -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,