Experimental monochrome compatibility setting for "Color Only" games …

…allowing some sprites and backgrounds to still be used
chrismaltby · Apr 3, 2024 · 249178f · 249178f
1 parent c85275f
commit 249178f
Show file tree

Hide file tree

Showing 12 changed files with 166 additions and 13 deletions.
diff --git a/src/app/project/initProject.ts b/src/app/project/initProject.ts
@@ -18,7 +18,6 @@ import { initKeyBindings } from "renderer/lib/keybindings/keyBindings";
 import { TRACKER_REDO, TRACKER_UNDO } from "consts";
 import API from "renderer/lib/api";
 import { NavigationSection } from "store/features/navigation/navigationState";
-import { Background } from "shared/lib/entities/entitiesTypes";
 import { isZoomSection } from "store/features/editor/editorHelpers";
 
 const urlParams = new URLSearchParams(window.location.search);
@@ -166,9 +165,7 @@ API.events.watch.sprite.removed.subscribe((_, filename, plugin) => {
 // Watch Backgrounds
 
 API.events.watch.background.changed.subscribe((_, _filename, data) => {
-  store.dispatch(
-    entitiesActions.loadBackground({ data: data as unknown as Background })
-  );
+  store.dispatch(entitiesActions.loadBackground({ data }));
 });
 
 API.events.watch.background.removed.subscribe((_, filename, plugin) => {

diff --git a/src/components/backgrounds/BackgroundPreviewSettings.tsx b/src/components/backgrounds/BackgroundPreviewSettings.tsx
@@ -6,6 +6,7 @@ import {
 } from "store/features/entities/entitiesState";
 import editorActions from "store/features/editor/editorActions";
 import electronActions from "store/features/electron/electronActions";
+import entitiesActions from "store/features/entities/entitiesActions";
 import { SceneSelect } from "components/forms/SceneSelect";
 import { SelectMenu, selectMenuStyleProps } from "ui/form/Select";
 import { RelativePortal } from "ui/layout/RelativePortal";
@@ -14,6 +15,7 @@ import l10n from "shared/lib/lang/l10n";
 import { sceneName } from "shared/lib/entities/entitiesHelpers";
 import { useAppDispatch, useAppSelector } from "store/hooks";
 import { assetPath } from "shared/lib/helpers/assets";
+import { CheckboxField } from "ui/form/CheckboxField";
 
 interface BackgroundPreviewSettingsProps {
   backgroundId: string;
@@ -45,6 +47,11 @@ const Pill = styled.button`
   }
 `;
 
+const CheckboxWrapper = styled.div`
+  margin-left: 5px;
+  margin-top: -3px;
+`;
+
 const ButtonCover = styled.div`
   position: absolute;
   top: 0;
@@ -76,6 +83,9 @@ const BackgroundPreviewSettings = ({
   const colorsEnabled = useAppSelector(
     (state) => state.project.present.settings.colorMode !== "mono"
   );
+  const isCGBOnly = useAppSelector(
+    (state) => state.project.present.settings.colorMode === "color"
+  );
 
   useEffect(() => {
     if (buttonFocus) {
@@ -158,6 +168,17 @@ const BackgroundPreviewSettings = ({
     }
   }, [background, dispatch]);
 
+  const onChangeDMGCompatible = useCallback(() => {
+    dispatch(
+      entitiesActions.editBackgroundSettings({
+        backgroundId,
+        changes: {
+          dmgCompatible: !background?.settings?.dmgCompatible,
+        },
+      })
+    );
+  }, [dispatch, background?.settings?.dmgCompatible, backgroundId]);
+
   return (
     <Wrapper>
       {isOpen && <ButtonCover onMouseDown={delayedButtonFocus} />}
@@ -198,6 +219,17 @@ const BackgroundPreviewSettings = ({
       <Pill ref={buttonRef} onClick={onEdit}>
         {l10n("FIELD_EDIT_IMAGE")}
       </Pill>
+      {isCGBOnly && (
+        <CheckboxWrapper>
+          <CheckboxField
+            name="dmgCompatible"
+            label={l10n("FIELD_MONOCHROME_COMPATIBLE")}
+            title={l10n("FIELD_MONOCHROME_COMPATIBLE_INFO")}
+            checked={background?.settings?.dmgCompatible ?? false}
+            onChange={onChangeDMGCompatible}
+          />
+        </CheckboxWrapper>
+      )}
     </Wrapper>
   );
 };

diff --git a/src/components/sprites/MetaspriteEditorPreviewSettings.tsx b/src/components/sprites/MetaspriteEditorPreviewSettings.tsx
@@ -1,11 +1,12 @@
-import React, { useEffect, useRef, useState } from "react";
+import React, { useCallback, useEffect, useRef, useState } from "react";
 import styled from "styled-components";
 import {
   metaspriteSelectors,
   sceneSelectors,
   spriteSheetSelectors,
 } from "store/features/entities/entitiesState";
 import editorActions from "store/features/editor/editorActions";
+import entitiesActions from "store/features/entities/entitiesActions";
 import l10n from "shared/lib/lang/l10n";
 import { SceneSelect } from "components/forms/SceneSelect";
 import { SelectMenu, selectMenuStyleProps } from "ui/form/Select";
@@ -14,6 +15,7 @@ import { TooltipWrapper } from "ui/tooltips/Tooltip";
 import { FixedSpacer } from "ui/spacing/Spacing";
 import { sceneName } from "shared/lib/entities/entitiesHelpers";
 import { useAppDispatch, useAppSelector } from "store/hooks";
+import { CheckboxField } from "ui/form/CheckboxField";
 
 interface MetaspriteEditorPreviewSettingsProps {
   spriteSheetId: string;
@@ -46,6 +48,11 @@ const Pill = styled.button`
   }
 `;
 
+const CheckboxWrapper = styled.div`
+  margin-left: 5px;
+  margin-top: -3px;
+`;
+
 const Info = styled.div`
   color: ${(props) => props.theme.colors.secondaryText};
   padding: 0 5px;
@@ -91,6 +98,9 @@ const MetaspriteEditorPreviewSettings = ({
   const colorsEnabled = useAppSelector(
     (state) => state.project.present.settings.colorMode !== "mono"
   );
+  const isCGBOnly = useAppSelector(
+    (state) => state.project.present.settings.colorMode === "color"
+  );
 
   useEffect(() => {
     if (buttonFocus) {
@@ -162,6 +172,17 @@ const MetaspriteEditorPreviewSettings = ({
     dispatch(editorActions.setPreviewAsSceneId(newValue));
   };
 
+  const onChangeDMGCompatible = useCallback(() => {
+    dispatch(
+      entitiesActions.editSpriteSheetSettings({
+        spriteSheetId,
+        changes: {
+          dmgCompatible: !spriteSheet?.settings?.dmgCompatible,
+        },
+      })
+    );
+  }, [dispatch, spriteSheet?.settings?.dmgCompatible, spriteSheetId]);
+
   if (!spriteSheet || !metasprite) {
     return null;
   }
@@ -214,7 +235,17 @@ const MetaspriteEditorPreviewSettings = ({
           {l10n("FIELD_UNIQUE")}={spriteSheet.numTiles}
         </Info>
       </TooltipWrapper>
-      <FixedSpacer width={5} />
+      {isCGBOnly && (
+        <CheckboxWrapper>
+          <CheckboxField
+            name="dmgCompatible"
+            label={l10n("FIELD_MONOCHROME_COMPATIBLE")}
+            title={l10n("FIELD_MONOCHROME_COMPATIBLE_INFO")}
+            checked={spriteSheet?.settings?.dmgCompatible ?? false}
+            onChange={onChangeDMGCompatible}
+          />
+        </CheckboxWrapper>
+      )}
     </Wrapper>
   );
 };

diff --git a/src/lang/en.json b/src/lang/en.json
@@ -745,6 +745,8 @@
   "FIELD_SUPPORTED_PLATFORMS": "Supported Platforms",
   "FIELD_MONOCHROME_ONLY": "Monochrome only",
   "FIELD_SGB_UNAVAILABLE": "Super GB Mode is not supported for 'Color Only' games",
+  "FIELD_MONOCHROME_COMPATIBLE": "Monochrome Compatible",
+  "FIELD_MONOCHROME_COMPATIBLE_INFO": "As your game is set to 'Color Only' this asset may get placed in memory not available on incompatible devices. Setting this option allows keeping compatiblity with older devices for this asset, for example this could be useful to display a message that your game is only supported on color hardware.",
 
   "// 7": "Asset Viewer ---------------------------------------------",
   "ASSET_SEARCH": "Search...",

diff --git a/src/lib/compiler/compileImages.ts b/src/lib/compiler/compileImages.ts
@@ -104,9 +104,10 @@ const compileImage = async (
     };
   }
 
-  const tileAllocationStrategy = cgbOnly
-    ? imageTileAllocationColorOnly
-    : imageTileAllocationDefault;
+  const tileAllocationStrategy =
+    cgbOnly && !img.settings?.dmgCompatible
+      ? imageTileAllocationColorOnly
+      : imageTileAllocationDefault;
 
   const tilesetLookup = toTileLookup(tileData) ?? {};
   const uniqueTiles = Object.values(tilesetLookup);

diff --git a/src/lib/compiler/compileSprites.ts b/src/lib/compiler/compileSprites.ts
@@ -119,9 +119,10 @@ export const compileSprite = async (
 ): Promise<PrecompiledSpriteSheetData> => {
   const filename = assetFilename(projectRoot, "sprites", spriteSheet);
 
-  const tileAllocationStrategy = cgbOnly
-    ? spriteTileAllocationColorOnly
-    : spriteTileAllocationDefault;
+  const tileAllocationStrategy =
+    cgbOnly && !spriteSheet.settings?.dmgCompatible
+      ? spriteTileAllocationColorOnly
+      : spriteTileAllocationDefault;
 
   const metasprites = spriteSheet.states
     .map((state) => state.animations)

diff --git a/src/lib/project/loadBackgroundData.ts b/src/lib/project/loadBackgroundData.ts
@@ -21,6 +21,10 @@ export interface BackgroundAssetData {
   imageWidth: number;
   imageHeight: number;
   plugin?: string;
+  tileColors: number[];
+  settings: {
+    dmgCompatible: boolean;
+  };
   inode: string;
   _v: number;
 }
@@ -50,6 +54,10 @@ const loadBackgroundData =
         imageWidth: width,
         imageHeight: height,
         filename: file,
+        tileColors: [],
+        settings: {
+          dmgCompatible: false,
+        },
         inode,
         _v: Date.now(),
       };

diff --git a/src/lib/project/loadProjectData.ts b/src/lib/project/loadProjectData.ts
@@ -92,11 +92,20 @@ const loadProject = async (
             oldBackground?.tileColors !== undefined
               ? oldBackground.tileColors
               : [],
+          settings:
+            oldBackground.settings !== undefined
+              ? oldBackground.settings
+              : {
+                  dmgCompatible: false,
+                },
         };
       }
       return {
         ...background,
         tileColors: [],
+        settings: {
+          dmgCompatible: false,
+        },
       };
     })
     .sort(sortByName);

diff --git a/src/lib/project/loadSpriteData.ts b/src/lib/project/loadSpriteData.ts
@@ -34,6 +34,9 @@ export interface SpriteAssetData {
   animSpeed: number | null;
   states: string[];
   numFrames: number;
+  settings: {
+    dmgCompatible: boolean;
+  };
 }
 
 const loadSpriteData =
@@ -70,6 +73,9 @@ const loadSpriteData =
         boundsWidth: 16,
         boundsHeight: 16,
         animSpeed: 15,
+        settings: {
+          dmgCompatible: false,
+        },
         _v: Date.now(),
       };
     } catch (e) {

diff --git a/src/shared/lib/entities/entitiesTypes.ts b/src/shared/lib/entities/entitiesTypes.ts
@@ -138,6 +138,10 @@ export type TriggerNormalized = Omit<Trigger, "script" | "leaveScript"> & {
   leaveScript: string[];
 };
 
+export type BackgroundSettings = {
+  dmgCompatible?: boolean;
+};
+
 export type Background = {
   id: string;
   name: string;
@@ -148,6 +152,7 @@ export type Background = {
   imageWidth: number;
   imageHeight: number;
   tileColors: number[];
+  settings: BackgroundSettings;
   plugin?: string;
   inode: string;
   _v: number;
@@ -317,6 +322,10 @@ export type SpriteAnimationData = Omit<SpriteAnimation, "frames"> & {
   frames: MetaspriteData[];
 };
 
+export type SpriteSettings = {
+  dmgCompatible?: boolean;
+};
+
 export type SpriteSheet = {
   id: string;
   name: string;
@@ -337,6 +346,7 @@ export type SpriteSheet = {
   boundsHeight: number;
   animSpeed: number | null;
   states: string[];
+  settings: SpriteSettings;
 };
 
 export type SpriteSheetData = Omit<SpriteSheet, "states" | "_v" | "inode"> & {