From 00b8cf2e30bf173ac1763ef971d3aa790adc2acf Mon Sep 17 00:00:00 2001 From: Steven B <373152+Stevebel@users.noreply.github.com> Date: Sun, 10 Jul 2022 14:14:26 -0400 Subject: [PATCH] Add sprite preview in battle screen for correctly adjusting offsets --- src/common/config.interface.ts | 1 + src/common/convert-to-source.ts | 1 + src/common/ipc.interface.ts | 2 + src/main/main.ts | 22 +++- src/renderer/SettingsDialog.tsx | 22 ++++ src/renderer/images/battle_bg.png | Bin 0 -> 3789 bytes src/renderer/images/battle_bg_shadow.png | Bin 0 -> 3853 bytes .../tabs/graphics/BattlePreview.tsx | 102 ++++++++++++++++++ .../tabs/graphics/GraphicsTab.tsx | 72 +++++++------ 9 files changed, 188 insertions(+), 34 deletions(-) create mode 100644 src/renderer/images/battle_bg.png create mode 100644 src/renderer/images/battle_bg_shadow.png create mode 100644 src/renderer/pokemon-editor/tabs/graphics/BattlePreview.tsx diff --git a/src/common/config.interface.ts b/src/common/config.interface.ts index 1ecb244..eb3f739 100644 --- a/src/common/config.interface.ts +++ b/src/common/config.interface.ts @@ -1,4 +1,5 @@ export type AppConfig = { dpeFolder: string; cfruFolder: string; + assetsFolder: string; }; diff --git a/src/common/convert-to-source.ts b/src/common/convert-to-source.ts index 0844e2c..567f4f2 100644 --- a/src/common/convert-to-source.ts +++ b/src/common/convert-to-source.ts @@ -45,6 +45,7 @@ function populateCoords( return { ...coords, species, + size: 0, }; } return undefined; diff --git a/src/common/ipc.interface.ts b/src/common/ipc.interface.ts index 5d09df1..c04e16c 100644 --- a/src/common/ipc.interface.ts +++ b/src/common/ipc.interface.ts @@ -6,6 +6,8 @@ export type IPCConfigs = { 'set-dpe-location': () => string; 'locate-cfru': () => void; 'set-cfru-location': () => string; + 'locate-assets': () => void; + 'set-assets-location': () => string; 'load-files': () => void; 'pokemon-source-data': (data: AllPokemonData) => AllPokemonData; 'data-saved': () => boolean; diff --git a/src/main/main.ts b/src/main/main.ts index 7f85568..0912e88 100644 --- a/src/main/main.ts +++ b/src/main/main.ts @@ -1,7 +1,7 @@ /* eslint-disable @typescript-eslint/no-var-requires */ /* eslint global-require: off, no-console: off, promise/always-return: off */ import 'core-js/stable'; -import { app, BrowserWindow, dialog, ipcMain, shell } from 'electron'; +import { app, BrowserWindow, dialog, ipcMain, protocol, shell } from 'electron'; import log from 'electron-log'; import ElectronStore from 'electron-store'; import { autoUpdater } from 'electron-updater'; @@ -146,6 +146,20 @@ ipcMain.on('locate-cfru', async (event) => { } }); +ipcMain.on('locate-assets', async (event) => { + const result = dialog.showOpenDialogSync(mainWindow!, { + properties: ['openDirectory'], + message: 'Select Assets Location', + title: 'Select Assets Folder', + defaultPath: store.get('assetsFolder'), + }); + if (result && result.length > 0) { + store.set('assetsFolder', result[0]); + event.reply('set-assets-location', result[0]); + await loadFiles(); + } +}); + if (process.env.NODE_ENV === 'production') { const sourceMapSupport = require('source-map-support'); sourceMapSupport.install(); @@ -184,6 +198,12 @@ const createWindow = async () => { return path.join(RESOURCES_PATH, ...paths); }; + protocol.registerFileProtocol('asset', (request, callback) => { + const relativePath = request.url.replace('asset://', ''); + const absolutePath = path.join(store.get('assetsFolder'), relativePath); + callback(absolutePath); + }); + mainWindow = new BrowserWindow({ show: false, width: 1024, diff --git a/src/renderer/SettingsDialog.tsx b/src/renderer/SettingsDialog.tsx index 0088075..e26f50d 100644 --- a/src/renderer/SettingsDialog.tsx +++ b/src/renderer/SettingsDialog.tsx @@ -37,6 +37,9 @@ const folderInputStyle: SxProps = { export const SettingsDialog = ({ open, onClose }: SettingsDialogProps) => { const [dpeFolder, setDPEFolder] = React.useState(Config.get('dpeFolder')); const [cfruFolder, setCFRUFolder] = React.useState(Config.get('cfruFolder')); + const [assetsFolder, setAssetsFolder] = React.useState( + Config.get('assetsFolder') + ); const handleDPESelect = () => { window.electron.ipcRenderer.send('locate-dpe'); @@ -44,6 +47,9 @@ export const SettingsDialog = ({ open, onClose }: SettingsDialogProps) => { const handleCFRUSelect = () => { window.electron.ipcRenderer.send('locate-cfru'); }; + const handleAssetsSelect = () => { + window.electron.ipcRenderer.send('locate-assets'); + }; useEffect(() => { const clearDpeListener = window.electron.ipcRenderer.on( @@ -54,9 +60,15 @@ export const SettingsDialog = ({ open, onClose }: SettingsDialogProps) => { 'set-cfru-location', setCFRUFolder ); + const clearAssetsListener = window.electron.ipcRenderer.on( + 'set-assets-location', + setAssetsFolder + ); + return () => { clearDpeListener(); clearCfruListener(); + clearAssetsListener(); }; }, [setDPEFolder, setCFRUFolder]); @@ -101,6 +113,16 @@ export const SettingsDialog = ({ open, onClose }: SettingsDialogProps) => { /> + + + + + diff --git a/src/renderer/images/battle_bg.png b/src/renderer/images/battle_bg.png new file mode 100644 index 0000000000000000000000000000000000000000..2b38b55fbd76fb7a6617cdd03ff78f8795a47a73 GIT binary patch literal 3789 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 DQMz@O literal 0 HcmV?d00001 diff --git a/src/renderer/images/battle_bg_shadow.png b/src/renderer/images/battle_bg_shadow.png new file mode 100644 index 0000000000000000000000000000000000000000..1f8c00f6613d8534ff5d18c20781f10ea8cc5d13 GIT binary patch literal 3853 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 P00000NkvXXu0mjf!R~_O literal 0 HcmV?d00001 diff --git a/src/renderer/pokemon-editor/tabs/graphics/BattlePreview.tsx b/src/renderer/pokemon-editor/tabs/graphics/BattlePreview.tsx new file mode 100644 index 0000000..5274fba --- /dev/null +++ b/src/renderer/pokemon-editor/tabs/graphics/BattlePreview.tsx @@ -0,0 +1,102 @@ +import { observer } from 'mobx-react-lite'; +import { useEffect, useRef } from 'react'; +import BgImage from '../../../images/battle_bg.png'; +import BgImageWithShadow from '../../../images/battle_bg_shadow.png'; +import { usePokemonStoreContext } from '../../pokemon.store'; + +export const BattlePreview = observer(() => { + const pokemonStore = usePokemonStoreContext(); + const species = pokemonStore.selectedSpecies; + const battleScreenCanvas = useRef(null); + + if (species) { + useEffect(() => { + function getSprite() { + return `asset://${species!.name.toLowerCase()}/sprites.png`; + } + + function getCroppedSpriteCanvas( + xOffset: number, + callback: (data: HTMLCanvasElement) => void + ) { + const spritesheet = new Image(); + spritesheet.src = getSprite(); + spritesheet.addEventListener('load', () => { + const canvas = document.createElement('canvas'); + const context = canvas.getContext('2d')!; + canvas.width = spritesheet.width; + canvas.height = spritesheet.height; + context.drawImage(spritesheet, xOffset, 0, 64, 64, 0, 0, 64, 64); + const imageData = context.getImageData(0, 0, 64, 64); + const bgRed = imageData.data[0]; + const bgGreen = imageData.data[1]; + const bgBlue = imageData.data[2]; + const bgAlpha = imageData.data[3]; + for (let i = 0; i < imageData.data.length; i += 4) { + // is this pixel tbg colored + if ( + imageData.data[i] === bgRed && + imageData.data[i + 1] === bgGreen && + imageData.data[i + 2] === bgBlue && + imageData.data[i + 3] === bgAlpha + ) { + // change to transparent + imageData.data[i] = 0; + imageData.data[i + 1] = 0; + imageData.data[i + 2] = 0; + imageData.data[i + 3] = 0; + } + } + context.clearRect(0, 0, canvas.width, canvas.height); + context.putImageData(imageData, 0, 0); + callback(canvas); + }); + } + + function getFrontSpriteData(callback: (data: HTMLCanvasElement) => void) { + return getCroppedSpriteCanvas(0, callback); + } + + function getBackSpriteData(callback: (data: HTMLCanvasElement) => void) { + return getCroppedSpriteCanvas(192, callback); + } + + const frontCanvas = battleScreenCanvas.current!; + const frontContext = frontCanvas.getContext('2d')!; + + const bgImage = new Image(); + bgImage.src = species.enemyElevation > 0 ? BgImageWithShadow : BgImage; + bgImage.addEventListener('load', () => { + frontContext.drawImage(bgImage, 0, 0); + getBackSpriteData((data) => { + frontContext.drawImage(data, 40, 48 + species.backCoords.y_offset); + }); + getFrontSpriteData((data) => { + frontContext.drawImage( + data, + 144, + 8 + species.frontCoords.y_offset - species.enemyElevation + ); + }); + }); + }, [ + species, + species.frontCoords.y_offset, + species.backCoords.y_offset, + species.enemyElevation, + ]); + return ( + + ); + } + return null; +}); diff --git a/src/renderer/pokemon-editor/tabs/graphics/GraphicsTab.tsx b/src/renderer/pokemon-editor/tabs/graphics/GraphicsTab.tsx index 79fbca0..13ba668 100644 --- a/src/renderer/pokemon-editor/tabs/graphics/GraphicsTab.tsx +++ b/src/renderer/pokemon-editor/tabs/graphics/GraphicsTab.tsx @@ -4,45 +4,51 @@ import { ObservableNumberField } from '../../../common/forms/ObservableNumberFie import { ObservableSwitch } from '../../../common/forms/ObservableSwitch'; import { ObservableTextField } from '../../../common/forms/ObservableTextField'; import { usePokemonStoreContext } from '../../pokemon.store'; +import { BattlePreview } from './BattlePreview'; export const GraphicsTab = observer(() => { const pokemonStore = usePokemonStoreContext(); const species = pokemonStore.selectedSpecies; + if (species) { return ( - - - - - - - + + + + + + + + + + + ); }