Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Adds support for per scene and project wide DMG palettes #1601

Open
wants to merge 24 commits into
base: develop
Choose a base branch
from
Open

Adds support for per scene and project wide DMG palettes #1601

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
24 commits
Select commit Hold shift + click to select a range
0c5dc0b
dmg palettes (BGP, OBP0, OBP1) assignable in project settings file (n…
Q-Bert-Reynolds Oct 1, 2024
27c9f71
stubbs out settings page for DMG palettes
Q-Bert-Reynolds Oct 1, 2024
a840e83
functional but ugly... how the fuck do you change the color of a UI e…
Q-Bert-Reynolds Oct 2, 2024
feb87db
ok, that looks decent... now for scenes... and I should probably make…
Q-Bert-Reynolds Oct 2, 2024
5c1579b
obj pal select shows configured palette
Q-Bert-Reynolds Oct 2, 2024
8af70eb
can now see custom BGP in scene view
Q-Bert-Reynolds Oct 2, 2024
b979450
OBP palette selection shows on sprites... something seems off though
Q-Bert-Reynolds Oct 2, 2024
e65305e
fixes issue with incorrect sprite palletization
Q-Bert-Reynolds Oct 2, 2024
491cc10
fixes issue where preview as mono showed wrong sprite pallete in scen…
Q-Bert-Reynolds Oct 2, 2024
6f01ceb
fixes issue where switching between mono and color wouldn't update sp…
Q-Bert-Reynolds Oct 2, 2024
0e8ac08
adds preview as monochrome option to sprite and image pages
Q-Bert-Reynolds Oct 2, 2024
ebbad21
adds dmg palette picker to tidy up settings page and prepare for addi…
Q-Bert-Reynolds Oct 2, 2024
adfdd17
adds dmg palette pickers to scene editor, fixes issue with picker tha…
Q-Bert-Reynolds Oct 3, 2024
a5b470a
better looking... maybe
Q-Bert-Reynolds Oct 3, 2024
8cd7007
uglier code, prettier editor
Q-Bert-Reynolds Oct 4, 2024
dbb4514
updates sprite colorization to be more consistent with current user e…
Q-Bert-Reynolds Oct 4, 2024
ffcbf8d
add MonoPalette type instead of using [number,number,number,number] e…
Q-Bert-Reynolds Oct 5, 2024
7a59195
fixes issue where scene actors weren't updating their colors when the…
Q-Bert-Reynolds Oct 5, 2024
3237f33
replaces hard-coded UI text with language keys for english and spanish
Q-Bert-Reynolds Oct 5, 2024
591b584
fixes regression where color sprites had incorrect palettes in editor
Q-Bert-Reynolds Oct 5, 2024
53209d2
actor and scene editor sprites now display in color
Q-Bert-Reynolds Oct 6, 2024
736c0da
background select now uses scene colors where appropriate
Q-Bert-Reynolds Oct 6, 2024
1df68d9
giving up on colorized backgrounds, they work but I have no idea how …
Q-Bert-Reynolds Oct 7, 2024
d334907
small refactor of react hooks... I think this is better
Q-Bert-Reynolds Oct 12, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
18 changes: 15 additions & 3 deletions src/components/backgrounds/BackgroundPreviewSettings.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ import {
backgroundSelectors,
sceneSelectors,
} from "store/features/entities/entitiesState";
import settingsActions from "store/features/settings/settingsActions";
import editorActions from "store/features/editor/editorActions";
import electronActions from "store/features/electron/electronActions";
import { SceneSelect } from "components/forms/SceneSelect";
Expand Down Expand Up @@ -66,7 +67,12 @@ const BackgroundPreviewSettings = ({
);
const [isOpen, setIsOpen] = useState<boolean>(false);
const [buttonFocus, setButtonFocus] = useState<boolean>(false);
const value = useAppSelector((state) => state.editor.previewAsSceneId);
const value = useAppSelector((state) => {
if (state.project.present.settings.previewAsMono) return "0";
const sceneId = state.editor.previewAsSceneId;
if (sceneId === "") return "1";
return sceneId;
});
Comment on lines +70 to +75
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I added a mono mode, similar to the one found on the world page, to the "preview as" drop down. Previously, only one non-scene option was available in this drop down, "Default Colors", which was used when previewAsSceneId was "". To facilitate more options, I'm just using the stringified index of the non-scene values. To ensure a consistent experience when switching between pages, I set the default state to "0" when previewAsMono and "1" when previewAsSceneId is unset.

const scene = useAppSelector((state) =>
sceneSelectors.selectById(state, value)
);
Expand Down Expand Up @@ -144,6 +150,11 @@ const BackgroundPreviewSettings = ({
};

const onChange = (newValue: string) => {
dispatch(
settingsActions.editSettings({
previewAsMono: (newValue == "0"),
})
);
dispatch(editorActions.setPreviewAsSceneId(newValue));
};
Comment on lines 152 to 159
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm also using the "preview as" drop down selection to drive the previewAsMono editor setting so if you select it here or in the sprites page, the scenes will be in monochrome when you return to the world page.


Expand Down Expand Up @@ -173,7 +184,7 @@ const BackgroundPreviewSettings = ({
onBlur={closeMenu}
maxMenuHeight={200}
optional
optionalLabel={l10n("FIELD_DEFAULT_COLORS")}
optionalLabels={[l10n("FIELD_COLOR_MODE_MONO"), l10n("FIELD_DEFAULT_COLORS")]}
{...selectMenuStyleProps}
/>
</SelectMenu>
Expand All @@ -190,7 +201,8 @@ const BackgroundPreviewSettings = ({
? l10n("FIELD_PREVIEW_AS_SCENE", {
sceneName: sceneName(scene, sceneIndex),
})
: l10n("FIELD_PREVIEW_AS_DEFAULT")}
: ([l10n("FIELD_PREVIEW_AS_MONO"), l10n("FIELD_PREVIEW_AS_DEFAULT")][+value])
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

As someone who has never used TypeScript before, I found the [+value] syntax a little strange, but it's what StackOverflow told me to do. I'm considering revisiting the weird stringified index hack when I add SGB preview support anyway, but this is a little too hacky for your tastes now, let me know.

}
</Pill>
<FixedSpacer width={5} />
</>
Expand Down
12 changes: 11 additions & 1 deletion src/components/backgrounds/BackgroundViewer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import React, { useEffect, useState } from "react";
import React, { useCallback, useEffect, useState } from "react";
import { useAppSelector } from "store/hooks";
import styled from "styled-components";
import {
Expand Down Expand Up @@ -84,6 +84,12 @@ const BackgroundViewer = ({ backgroundId }: MetaspriteEditorProps) => {
(state) => state.project.present.settings.colorMode !== "mono"
);
const [palettes, setPalettes] = useState<Palette[]>(emptyPalettes);
const previewAsMono = useAppSelector((state) =>
!gbcEnabled || state.project.present.settings.previewAsMono
);
const defaultBGP = useAppSelector((state) =>
state.project.present.settings.defaultBGP
);

useEffect(() => {
setPalettes(
Expand Down Expand Up @@ -128,6 +134,8 @@ const BackgroundViewer = ({ backgroundId }: MetaspriteEditorProps) => {
src={assetURL("backgrounds", background)}
tiles={background.tileColors}
palettes={palettes}
previewAsMono={previewAsMono}
monoPalette={defaultBGP}
/>
)}
</ImageScale>
Expand Down Expand Up @@ -162,6 +170,8 @@ const BackgroundViewer = ({ backgroundId }: MetaspriteEditorProps) => {
src={assetURL("tilesets", tileset)}
tiles={[]}
palettes={palettes}
previewAsMono={previewAsMono}
monoPalette={defaultBGP}
/>
</ImageScale>
</ImageContainer>
Expand Down
64 changes: 61 additions & 3 deletions src/components/editors/ActorEditor.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,9 @@
import React, { FC, useCallback, useState } from "react";
import React, { FC, useCallback, useState, useMemo } from "react";
import {
actorPrefabSelectors,
actorSelectors,
sceneSelectors,
paletteSelectors,
} from "store/features/entities/entitiesState";
import { DropdownButton } from "ui/buttons/DropdownButton";
import { EditableText } from "ui/form/EditableText";
Expand Down Expand Up @@ -43,6 +44,7 @@ import { ActorEditorProperties } from "./actor/ActorEditorProperties";
import { FlexGrow } from "ui/spacing/Spacing";
import { ActorPrefabSelectButton } from "components/forms/ActorPrefabSelectButton";
import { PrefabHeader } from "ui/form/headers/PrefabHeader";
import { DMG_PALETTE } from "consts";

interface ActorEditorProps {
id: string;
Expand All @@ -62,6 +64,52 @@ export const ActorEditor: FC<ActorEditorProps> = ({ id, sceneId }) => {
const scene = useAppSelector((state) =>
sceneSelectors.selectById(state, sceneId)
);

const gbcEnabled = useAppSelector(
(state) => state.project.present.settings.colorMode !== "mono"
);

const previewAsMono = useAppSelector(
(state) =>
state.project.present.settings.colorMode === "mono" ||
(state.project.present.settings.colorMode === "mixed" &&
state.project.present.settings.previewAsMono)
);

const palettesLookup = useAppSelector((state) =>
paletteSelectors.selectEntities(state)
);

const defaultSpritePaletteIds = useAppSelector(
(state) => state.project.present.settings.defaultSpritePaletteIds || []
);

const getPalette = useCallback(
(paletteIndex: number) => {
const sceneSpritePaletteIds = scene?.paletteIds ?? [];
if (sceneSpritePaletteIds[paletteIndex] === "dmg") {
return DMG_PALETTE;
}
return (
palettesLookup[sceneSpritePaletteIds[paletteIndex]] ||
palettesLookup[defaultSpritePaletteIds[paletteIndex]] ||
DMG_PALETTE
);
},
[defaultSpritePaletteIds, palettesLookup, scene?.paletteIds]
);

const palettes = useMemo(() => ([0,1,2,3,4,5,6,7].map(i =>
gbcEnabled ? getPalette(i) : DMG_PALETTE)),
[gbcEnabled, getPalette]
);

const monoPalettes = useAppSelector((state) => {
const defaultOBP0 = state.project.present.settings.defaultOBP0 ?? [0,0,1,3];
const defaultOBP1 = state.project.present.settings.defaultOBP1 ?? [0,0,2,3];
return [scene.dmgOBP0 ?? defaultOBP0, scene.dmgOBP1 ?? defaultOBP1];
});

const lockScriptEditor = useAppSelector(
(state) => state.editor.lockScriptEditor
);
Expand Down Expand Up @@ -415,9 +463,19 @@ export const ActorEditor: FC<ActorEditorProps> = ({ id, sceneId }) => {
{!lockScriptEditor && (
<SidebarColumns>
{prefab ? (
<ActorPrefabEditorProperties prefab={prefab} />
<ActorPrefabEditorProperties
prefab={prefab}
previewAsMono={previewAsMono}
palettes={palettes}
monoPalettes ={monoPalettes}
/>
) : (
<ActorEditorProperties actor={actor} />
<ActorEditorProperties
actor={actor}
previewAsMono={previewAsMono}
palettes={palettes}
monoPalettes ={monoPalettes}
/>
)}
</SidebarColumns>
)}
Expand Down
Loading