diff --git a/public/images/ui/bg_command.png b/public/images/ui/bg_command.png deleted file mode 100644 index 073261fa7..000000000 Binary files a/public/images/ui/bg_command.png and /dev/null differ diff --git a/public/images/ui/bg_fight.png b/public/images/ui/bg_fight.png deleted file mode 100644 index 538fe67bc..000000000 Binary files a/public/images/ui/bg_fight.png and /dev/null differ diff --git a/public/images/ui/command_fight_labels.png b/public/images/ui/command_fight_labels.png new file mode 100644 index 000000000..257d0e5d9 Binary files /dev/null and b/public/images/ui/command_fight_labels.png differ diff --git a/public/images/ui/option_select_window_1.png b/public/images/ui/option_select_window_1.png deleted file mode 100644 index 429be5b29..000000000 Binary files a/public/images/ui/option_select_window_1.png and /dev/null differ diff --git a/public/images/ui/option_select_window_2.png b/public/images/ui/option_select_window_2.png deleted file mode 100644 index c0ca520cd..000000000 Binary files a/public/images/ui/option_select_window_2.png and /dev/null differ diff --git a/public/images/ui/option_select_window_3.png b/public/images/ui/option_select_window_3.png deleted file mode 100644 index d10d044a8..000000000 Binary files a/public/images/ui/option_select_window_3.png and /dev/null differ diff --git a/public/images/ui/party_message.png b/public/images/ui/party_message.png deleted file mode 100644 index 8759b02e6..000000000 Binary files a/public/images/ui/party_message.png and /dev/null differ diff --git a/public/images/ui/party_message_large.png b/public/images/ui/party_message_large.png deleted file mode 100644 index 7720ab2ac..000000000 Binary files a/public/images/ui/party_message_large.png and /dev/null differ diff --git a/public/images/ui/party_message_options.png b/public/images/ui/party_message_options.png deleted file mode 100644 index b0fd8f122..000000000 Binary files a/public/images/ui/party_message_options.png and /dev/null differ diff --git a/public/images/ui/party_message_options_wide.png b/public/images/ui/party_message_options_wide.png deleted file mode 100644 index fba84a08b..000000000 Binary files a/public/images/ui/party_message_options_wide.png and /dev/null differ diff --git a/public/images/ui/window.png b/public/images/ui/window.png deleted file mode 100644 index 5663f5c7b..000000000 Binary files a/public/images/ui/window.png and /dev/null differ diff --git a/public/images/ui/windows/trim.ps1 b/public/images/ui/windows/trim.ps1 new file mode 100644 index 000000000..54356943e --- /dev/null +++ b/public/images/ui/windows/trim.ps1 @@ -0,0 +1,3 @@ +Get-ChildItem -Path "*.png" | ForEach-Object { + magick.exe convert -trim $_.FullName $_.FullName +} \ No newline at end of file diff --git a/public/images/ui/windows/window_1.png b/public/images/ui/windows/window_1.png new file mode 100644 index 000000000..edfef03f9 Binary files /dev/null and b/public/images/ui/windows/window_1.png differ diff --git a/public/images/ui/windows/window_2.png b/public/images/ui/windows/window_2.png new file mode 100644 index 000000000..7da47310d Binary files /dev/null and b/public/images/ui/windows/window_2.png differ diff --git a/public/images/ui/windows/window_3.png b/public/images/ui/windows/window_3.png new file mode 100644 index 000000000..0764ea2d6 Binary files /dev/null and b/public/images/ui/windows/window_3.png differ diff --git a/public/images/ui/windows/window_4.png b/public/images/ui/windows/window_4.png new file mode 100644 index 000000000..69c5bce9d Binary files /dev/null and b/public/images/ui/windows/window_4.png differ diff --git a/src/battle-scene.ts b/src/battle-scene.ts index 226f8069c..9b28be80d 100644 --- a/src/battle-scene.ts +++ b/src/battle-scene.ts @@ -76,6 +76,7 @@ export default class BattleScene extends Phaser.Scene { public seVolume: number = 1; public gameSpeed: integer = 1; public showLevelUpStats: boolean = true; + public windowType: integer = 1; public quickStart: boolean = quickStart; public finalWave: integer = 200; @@ -183,11 +184,11 @@ export default class BattleScene extends Phaser.Scene { preload() { // Load menu images this.loadImage('bg', 'ui'); - this.loadImage('bg_command', 'ui'); - this.loadImage('bg_fight', 'ui'); + this.loadImage('command_fight_labels', 'ui'); this.loadAtlas('prompt', 'ui'); this.loadImage('cursor', 'ui'); - this.loadImage('window', 'ui'); + for (let w = 1; w <= 4; w++) + this.loadImage(`window_${w}`, 'ui/windows'); this.loadImage('namebox', 'ui'); this.loadImage('pbinfo_player', 'ui'); this.loadImage('pbinfo_player_mini', 'ui'); @@ -219,10 +220,6 @@ export default class BattleScene extends Phaser.Scene { this.loadImage('party_slot_hp_bar', 'ui'); this.loadAtlas('party_slot_hp_overlay', 'ui'); this.loadAtlas('party_pb', 'ui'); - this.loadImage('party_message', 'ui'); - this.loadImage('party_message_large', 'ui'); - this.loadImage('party_message_options', 'ui'); - this.loadImage('party_message_options_wide', 'ui'); this.loadAtlas('party_cancel', 'ui'); this.loadImage('summary_bg', 'ui'); @@ -239,9 +236,6 @@ export default class BattleScene extends Phaser.Scene { for (let t = 1; t <= 3; t++) this.loadImage(`summary_tabs_${t}`, 'ui'); - for (let o = 1; o <= 3; o++) - this.loadImage(`option_select_window_${o}`, 'ui'); - this.loadImage('starter_select_bg', 'ui'); this.loadImage('starter_select_message', 'ui'); this.loadImage('starter_select_cursor', 'ui'); diff --git a/src/egg-hatch-phase.ts b/src/egg-hatch-phase.ts index 910528e65..eaf0621af 100644 --- a/src/egg-hatch-phase.ts +++ b/src/egg-hatch-phase.ts @@ -13,6 +13,7 @@ import { StatsContainer } from "./ui/stats-container"; import { TextStyle, addTextObject } from "./ui/text"; import { Gender, getGenderColor, getGenderSymbol } from "./data/gender"; import { achvs } from "./system/achv"; +import { addWindow } from "./ui/window"; export class EggHatchPhase extends BattlePhase { private egg: Egg; @@ -84,7 +85,8 @@ export class EggHatchPhase extends BattlePhase { this.eggHatchOverlay.setAlpha(0); this.scene.fieldUI.add(this.eggHatchOverlay); - const infoBg = this.scene.add.nineslice(0, 0, 'window', null, 96, 116, 6, 6, 6, 6); + const infoBg = addWindow(this.scene, 0, 0, 96, 116); + infoBg.setOrigin(0.5, 0.5); this.infoContainer = this.scene.add.container(this.eggHatchBg.displayWidth + infoBg.width / 2, this.eggHatchBg.displayHeight / 2); diff --git a/src/system/settings.ts b/src/system/settings.ts index 104ac760f..d153df7f9 100644 --- a/src/system/settings.ts +++ b/src/system/settings.ts @@ -1,11 +1,13 @@ import BattleScene from "../battle-scene"; +import { updateWindowType } from "../ui/window"; export enum Setting { Game_Speed = "GAME_SPEED", Master_Volume = "MASTER_VOLUME", BGM_Volume = "BGM_VOLUME", SE_Volume = "SE_VOLUME", - Show_Stats_on_Level_Up = "SHOW_LEVEL_UP_STATS" + Show_Stats_on_Level_Up = "SHOW_LEVEL_UP_STATS", + Window_Type = "WINDOW_TYPE" } export interface SettingOptions { @@ -21,7 +23,8 @@ export const settingOptions: SettingOptions = { [Setting.Master_Volume]: new Array(11).fill(null).map((_, i) => i ? (i * 10).toString() : 'Mute'), [Setting.BGM_Volume]: new Array(11).fill(null).map((_, i) => i ? (i * 10).toString() : 'Mute'), [Setting.SE_Volume]: new Array(11).fill(null).map((_, i) => i ? (i * 10).toString() : 'Mute'), - [Setting.Show_Stats_on_Level_Up]: [ 'Off', 'On' ] + [Setting.Show_Stats_on_Level_Up]: [ 'Off', 'On' ], + [Setting.Window_Type]: new Array(4).fill(null).map((_, i) => (i + 1).toString()) }; export const settingDefaults: SettingDefaults = { @@ -29,7 +32,8 @@ export const settingDefaults: SettingDefaults = { [Setting.Master_Volume]: 5, [Setting.BGM_Volume]: 10, [Setting.SE_Volume]: 10, - [Setting.Show_Stats_on_Level_Up]: 1 + [Setting.Show_Stats_on_Level_Up]: 1, + [Setting.Window_Type]: 1 }; export function setSetting(scene: BattleScene, setting: Setting, value: integer): boolean { @@ -52,6 +56,9 @@ export function setSetting(scene: BattleScene, setting: Setting, value: integer) case Setting.Show_Stats_on_Level_Up: scene.showLevelUpStats = settingOptions[setting][value] === 'On'; break; + case Setting.Window_Type: + updateWindowType(scene, parseInt(settingOptions[setting][value])); + break; } return true; diff --git a/src/ui/abstact-option-select-ui-handler.ts b/src/ui/abstact-option-select-ui-handler.ts index 88ae5953d..3c57fb5a0 100644 --- a/src/ui/abstact-option-select-ui-handler.ts +++ b/src/ui/abstact-option-select-ui-handler.ts @@ -2,6 +2,7 @@ import BattleScene, { Button } from "../battle-scene"; import { TextStyle, addTextObject } from "./text"; import { Mode } from "./ui"; import UiHandler from "./ui-handler"; +import { addWindow } from "./window"; export default abstract class AbstractOptionSelectUiHandler extends UiHandler { protected handlers: Function[]; @@ -29,7 +30,7 @@ export default abstract class AbstractOptionSelectUiHandler extends UiHandler { this.optionSelectContainer.setVisible(false); ui.add(this.optionSelectContainer); - this.optionSelectBg = this.scene.add.nineslice(0, 0, 'window', null, this.getWindowWidth(), this.getWindowHeight(), 6, 6, 6, 6); + this.optionSelectBg = addWindow(this.scene, 0, 0, this.getWindowWidth(), this.getWindowHeight()); this.optionSelectBg.setOrigin(1, 1); this.optionSelectContainer.add(this.optionSelectBg); diff --git a/src/ui/achvs-ui-handler.ts b/src/ui/achvs-ui-handler.ts index ab08f4600..edf770e57 100644 --- a/src/ui/achvs-ui-handler.ts +++ b/src/ui/achvs-ui-handler.ts @@ -3,6 +3,7 @@ import { Achv, achvs } from "../system/achv"; import MessageUiHandler from "./message-ui-handler"; import { TextStyle, addTextObject } from "./text"; import { Mode } from "./ui"; +import { addWindow } from "./window"; export default class AchvsUiHandler extends MessageUiHandler { private achvsContainer: Phaser.GameObjects.Container; @@ -27,14 +28,14 @@ export default class AchvsUiHandler extends MessageUiHandler { this.achvsContainer.setInteractive(new Phaser.Geom.Rectangle(0, 0, this.scene.game.canvas.width / 6, this.scene.game.canvas.height / 6), Phaser.Geom.Rectangle.Contains); - const headerBg = this.scene.add.nineslice(0, 0, 'window', null, (this.scene.game.canvas.width / 6) - 2, 24, 6, 6, 6, 6); + const headerBg = addWindow(this.scene, 0, 0, (this.scene.game.canvas.width / 6) - 2, 24); headerBg.setOrigin(0, 0); const headerText = addTextObject(this.scene, 0, 0, 'Achievements', TextStyle.SETTINGS_LABEL); headerText.setOrigin(0, 0); headerText.setPositionRelative(headerBg, 8, 4); - this.achvIconsBg = this.scene.add.nineslice(0, headerBg.height, 'window', null, (this.scene.game.canvas.width / 6) - 2, (this.scene.game.canvas.height / 6) - headerBg.height - 68, 6, 6, 6, 6); + this.achvIconsBg = addWindow(this.scene, 0, headerBg.height, (this.scene.game.canvas.width / 6) - 2, (this.scene.game.canvas.height / 6) - headerBg.height - 68); this.achvIconsBg.setOrigin(0, 0); this.achvIconsContainer = this.scene.add.container(6, headerBg.height + 6); @@ -53,28 +54,28 @@ export default class AchvsUiHandler extends MessageUiHandler { this.achvIconsContainer.add(icon); } - const titleBg = this.scene.add.nineslice(0, headerBg.height + this.achvIconsBg.height, 'window', null, 174, 24, 6, 6, 6, 6); + const titleBg = addWindow(this.scene, 0, headerBg.height + this.achvIconsBg.height, 174, 24); titleBg.setOrigin(0, 0); this.titleText = addTextObject(this.scene, 0, 0, '', TextStyle.WINDOW); this.titleText.setOrigin(0, 0); this.titleText.setPositionRelative(titleBg, 8, 4); - const scoreBg = this.scene.add.nineslice(titleBg.x + titleBg.width, titleBg.y, 'window', null, 46, 24, 6, 6, 6, 6); + const scoreBg = addWindow(this.scene, titleBg.x + titleBg.width, titleBg.y, 46, 24); scoreBg.setOrigin(0, 0); this.scoreText = addTextObject(this.scene, 0, 0, '', TextStyle.WINDOW); this.scoreText.setOrigin(0, 0); this.scoreText.setPositionRelative(scoreBg, 8, 4); - const unlockBg = this.scene.add.nineslice(scoreBg.x + scoreBg.width, scoreBg.y, 'window', null, 98, 24, 6, 6, 6, 6); + const unlockBg = addWindow(this.scene, scoreBg.x + scoreBg.width, scoreBg.y, 98, 24); unlockBg.setOrigin(0, 0); this.unlockText = addTextObject(this.scene, 0, 0, '', TextStyle.WINDOW); this.unlockText.setOrigin(0, 0); this.unlockText.setPositionRelative(unlockBg, 8, 4); - const descriptionBg = this.scene.add.nineslice(0, titleBg.y + titleBg.height, 'window', null, (this.scene.game.canvas.width / 6) - 2, 42, 6, 6, 6, 6); + const descriptionBg = addWindow(this.scene, 0, titleBg.y + titleBg.height, (this.scene.game.canvas.width / 6) - 2, 42); descriptionBg.setOrigin(0, 0); const descriptionText = addTextObject(this.scene, 0, 0, '', TextStyle.WINDOW, { maxLines: 2 }); diff --git a/src/ui/ball-ui-handler.ts b/src/ui/ball-ui-handler.ts index 2e0f8cd8f..0682f4ea3 100644 --- a/src/ui/ball-ui-handler.ts +++ b/src/ui/ball-ui-handler.ts @@ -5,6 +5,7 @@ import { addTextObject, TextStyle } from "./text"; import { Command } from "./command-ui-handler"; import { Mode } from "./ui"; import UiHandler from "./ui-handler"; +import { addWindow } from "./window"; export default class BallUiHandler extends UiHandler { private pokeballSelectContainer: Phaser.GameObjects.Container; @@ -24,7 +25,7 @@ export default class BallUiHandler extends UiHandler { this.pokeballSelectContainer.setVisible(false); ui.add(this.pokeballSelectContainer); - this.pokeballSelectBg = this.scene.add.nineslice(0, 0, 'window', null, 114, 96, 6, 6, 6, 6); + this.pokeballSelectBg = addWindow(this.scene, 0, 0, 114, 96); this.pokeballSelectBg.setOrigin(0, 1); this.pokeballSelectContainer.add(this.pokeballSelectBg); diff --git a/src/ui/battle-message-ui-handler.ts b/src/ui/battle-message-ui-handler.ts index 56576f719..88a0f323d 100644 --- a/src/ui/battle-message-ui-handler.ts +++ b/src/ui/battle-message-ui-handler.ts @@ -4,6 +4,7 @@ import UI, { Mode } from "./ui"; import * as Utils from "../utils"; import MessageUiHandler from "./message-ui-handler"; import { getStatName, Stat } from "../data/pokemon-stat"; +import { addWindow } from "./window"; export default class BattleMessageUiHandler extends MessageUiHandler { private levelUpStatsContainer: Phaser.GameObjects.Container; @@ -12,6 +13,8 @@ export default class BattleMessageUiHandler extends MessageUiHandler { private nameText: Phaser.GameObjects.Text; public bg: Phaser.GameObjects.Image; + public commandWindow: Phaser.GameObjects.NineSlice; + public movesWindowContainer: Phaser.GameObjects.Container; public nameBoxContainer: Phaser.GameObjects.Container; constructor(scene: BattleScene) { @@ -30,6 +33,28 @@ export default class BattleMessageUiHandler extends MessageUiHandler { this.bg = bg; + this.commandWindow = addWindow(this.scene, 201, -1, 118, 46); + this.commandWindow.setOrigin(0, 1); + this.commandWindow.setVisible(false); + ui.add(this.commandWindow); + + this.movesWindowContainer = this.scene.add.container(1, -1); + this.movesWindowContainer.setVisible(false); + + const movesWindow = addWindow(this.scene, 0, 0, 243, 46); + movesWindow.setOrigin(0, 1); + this.movesWindowContainer.add(movesWindow); + + const moveDetailsWindow = addWindow(this.scene, 238, 0, 80, 46, false, true, 2, 133); + moveDetailsWindow.setOrigin(0, 1); + this.movesWindowContainer.add(moveDetailsWindow); + + const commandFightLabels = this.scene.add.image(246, -10, 'command_fight_labels'); + commandFightLabels.setOrigin(0, 1); + this.movesWindowContainer.add(commandFightLabels); + + ui.add(this.movesWindowContainer); + const messageContainer = this.scene.add.container(12, -39); ui.add(messageContainer); @@ -68,7 +93,7 @@ export default class BattleMessageUiHandler extends MessageUiHandler { this.levelUpStatsContainer = levelUpStatsContainer; - const levelUpStatsBg = this.scene.add.nineslice((this.scene.game.canvas.width / 6), -100, 'window', null, 128, 100, 6, 6, 6, 6); + const levelUpStatsBg = addWindow(this.scene, (this.scene.game.canvas.width / 6), -100, 128, 100); levelUpStatsBg.setOrigin(1, 0); levelUpStatsContainer.add(levelUpStatsBg); @@ -98,7 +123,8 @@ export default class BattleMessageUiHandler extends MessageUiHandler { show(args: any[]): void { super.show(args); - this.bg.setTexture('bg'); + this.commandWindow.setVisible(false); + this.movesWindowContainer.setVisible(false); this.message.setWordWrapWidth(1780); } diff --git a/src/ui/biome-select-ui-handler.ts b/src/ui/biome-select-ui-handler.ts index 752307b93..e7ba600c0 100644 --- a/src/ui/biome-select-ui-handler.ts +++ b/src/ui/biome-select-ui-handler.ts @@ -4,10 +4,11 @@ import { addTextObject, TextStyle } from "./text"; import { Mode } from "./ui"; import UiHandler from "./ui-handler"; import * as Utils from "../utils"; +import { addWindow } from "./window"; export default class BiomeSelectUiHandler extends UiHandler { private biomeSelectContainer: Phaser.GameObjects.Container; - private biomeSelectBg: Phaser.GameObjects.Image; + private biomeSelectBg: Phaser.GameObjects.NineSlice; private biomesText: Phaser.GameObjects.Text; private biomeChoices: Biome[]; @@ -26,7 +27,7 @@ export default class BiomeSelectUiHandler extends UiHandler { this.biomeSelectContainer.setVisible(false); ui.add(this.biomeSelectContainer); - this.biomeSelectBg = this.scene.add.image(0, 0, 'option_select_window_2'); + this.biomeSelectBg = addWindow(this.scene, 0, 0, 96, 32); this.biomeSelectBg.setOrigin(0, 1); this.biomeSelectContainer.add(this.biomeSelectBg); @@ -50,7 +51,7 @@ export default class BiomeSelectUiHandler extends UiHandler { if (this.biomeChoices.length <= 1) return; - this.biomeSelectBg.setTexture(`option_select_window_${this.biomeChoices.length}`) + this.biomeSelectBg.height = (this.biomeChoices.length + 1) * 16; this.biomesText.setText(this.biomeChoices.map(b => getBiomeName(b)).join('\n')); this.biomesText.setPositionRelative(this.biomeSelectBg, 16, 9); this.biomeSelectHandler = args[1] as Function; diff --git a/src/ui/command-ui-handler.ts b/src/ui/command-ui-handler.ts index 2294fdfbf..90f7a0172 100644 --- a/src/ui/command-ui-handler.ts +++ b/src/ui/command-ui-handler.ts @@ -45,7 +45,8 @@ export default class CommandUiHandler extends UiHandler { this.commandsContainer.setVisible(true); const messageHandler = this.getUi().getMessageHandler(); - messageHandler.bg.setTexture('bg_command'); + messageHandler.commandWindow.setVisible(true); + messageHandler.movesWindowContainer.setVisible(false); messageHandler.message.setWordWrapWidth(1110); messageHandler.showText(`What will\n${(this.scene.getCurrentPhase() as CommandPhase).getPokemon().name} do?`, 0); this.setCursor(this.getCursor()); diff --git a/src/ui/egg-gacha-ui-handler.ts b/src/ui/egg-gacha-ui-handler.ts index dcdebe51d..c04ab9124 100644 --- a/src/ui/egg-gacha-ui-handler.ts +++ b/src/ui/egg-gacha-ui-handler.ts @@ -8,6 +8,7 @@ import { EGG_SEED, Egg, GachaType, getEggTierDefaultHatchWaves, getEggDescriptor import { Voucher, VoucherType, getVoucherTypeIcon } from "../system/voucher"; import { getPokemonSpecies } from "../data/pokemon-species"; import { Type } from "../data/type"; +import { addWindow } from "./window"; const defaultText = 'Select a machine.'; @@ -144,7 +145,8 @@ export default class EggGachaUiHandler extends MessageUiHandler { this.eggGachaOptionsContainer = this.scene.add.container((this.scene.game.canvas.width / 6), 148); this.eggGachaContainer.add(this.eggGachaOptionsContainer); - this.eggGachaOptionSelectBg = this.scene.add.nineslice(0, 0, 'window', null, 96, 112, 6, 6, 6, 6); + + this.eggGachaOptionSelectBg = addWindow(this.scene, 0, 0, 96, 112); this.eggGachaOptionSelectBg.setOrigin(1, 1); this.eggGachaOptionsContainer.add(this.eggGachaOptionSelectBg); @@ -167,7 +169,7 @@ export default class EggGachaUiHandler extends MessageUiHandler { new Array(Utils.getEnumKeys(VoucherType).length).fill(null).map((_, i) => { const container = this.scene.add.container((this.scene.game.canvas.width / 6) - 56 * i, 0); - const bg = this.scene.add.nineslice(0, 0, 'window', null, 56, 22, 6, 6, 6, 6); + const bg = addWindow(this.scene, 0, 0, 56, 22); bg.setOrigin(1, 0); container.add(bg); @@ -200,7 +202,7 @@ export default class EggGachaUiHandler extends MessageUiHandler { const gachaMessageBoxContainer = this.scene.add.container(0, 148); this.eggGachaContainer.add(gachaMessageBoxContainer); - const gachaMessageBox = this.scene.add.nineslice(0, 0, 'window', null, 320, 32, 6, 6, 6, 6); + const gachaMessageBox = addWindow(this.scene, 0, 0, 320, 32); gachaMessageBox.setOrigin(0, 0); gachaMessageBoxContainer.add(gachaMessageBox); diff --git a/src/ui/egg-list-ui-handler.ts b/src/ui/egg-list-ui-handler.ts index e62524316..5be0eef90 100644 --- a/src/ui/egg-list-ui-handler.ts +++ b/src/ui/egg-list-ui-handler.ts @@ -5,6 +5,7 @@ import { TextStyle, addTextObject } from "./text"; import MessageUiHandler from "./message-ui-handler"; import { EGG_SEED, Egg, GachaType, getEggGachaTypeDescriptor, getEggHatchWavesMessage, getEggDescriptor } from "../data/egg"; import * as Utils from "../utils"; +import { addWindow } from "./window"; export default class EggListUiHandler extends MessageUiHandler { private eggListContainer: Phaser.GameObjects.Container; @@ -39,6 +40,11 @@ export default class EggListUiHandler extends MessageUiHandler { starterSelectBg.setOrigin(0, 0); this.eggListContainer.add(starterSelectBg); + this.eggListContainer.add(addWindow(this.scene, 1, 85, 106, 22)); + this.eggListContainer.add(addWindow(this.scene, 1, 102, 106, 50, true)); + this.eggListContainer.add(addWindow(this.scene, 1, 147, 106, 32, true)); + this.eggListContainer.add(addWindow(this.scene, 107, 1, 212, 178)); + this.iconAnimHandler = new PokemonIconAnimHandler(); this.iconAnimHandler.setup(this.scene); diff --git a/src/ui/fight-ui-handler.ts b/src/ui/fight-ui-handler.ts index 3ae3360ec..90fc9ca34 100644 --- a/src/ui/fight-ui-handler.ts +++ b/src/ui/fight-ui-handler.ts @@ -42,7 +42,8 @@ export default class FightUiHandler extends UiHandler { this.fieldIndex = args.length ? args[0] as integer : 0; const messageHandler = this.getUi().getMessageHandler(); - messageHandler.bg.setTexture('bg_fight'); + messageHandler.commandWindow.setVisible(false); + messageHandler.movesWindowContainer.setVisible(true); this.setCursor(this.getCursor()); this.displayMoves(); } diff --git a/src/ui/menu-ui-handler.ts b/src/ui/menu-ui-handler.ts index 1dc3aecaf..da488880a 100644 --- a/src/ui/menu-ui-handler.ts +++ b/src/ui/menu-ui-handler.ts @@ -3,6 +3,7 @@ import { TextStyle, addTextObject } from "./text"; import { Mode } from "./ui"; import UiHandler from "./ui-handler"; import * as Utils from "../utils"; +import { addWindow } from "./window"; export enum MenuOptions { SETTINGS, @@ -31,7 +32,7 @@ export default class MenuUiHandler extends UiHandler { this.menuContainer.setInteractive(new Phaser.Geom.Rectangle(0, 0, this.scene.game.canvas.width / 6, this.scene.game.canvas.height / 6), Phaser.Geom.Rectangle.Contains); - this.menuBg = this.scene.add.nineslice((this.scene.game.canvas.width / 6) - 92, 0, 'window', null, 90, (this.scene.game.canvas.height / 6) - 2, 6, 6, 6, 6); + this.menuBg = addWindow(this.scene, (this.scene.game.canvas.width / 6) - 92, 0, 90, (this.scene.game.canvas.height / 6) - 2); this.menuBg.setOrigin(0, 0); this.menuContainer.add(this.menuBg); diff --git a/src/ui/party-ui-handler.ts b/src/ui/party-ui-handler.ts index ebcc2146c..6aebec20a 100644 --- a/src/ui/party-ui-handler.ts +++ b/src/ui/party-ui-handler.ts @@ -12,6 +12,7 @@ import { getGenderColor, getGenderSymbol } from "../data/gender"; import { StatusEffect } from "../data/status-effect"; import PokemonIconAnimHandler, { PokemonIconAnimMode } from "./pokemon-icon-anim-handler"; import { pokemonEvolutions } from "../data/pokemon-evolutions"; +import { addWindow } from "./window"; const defaultMessage = 'Choose a Pokémon.'; @@ -63,7 +64,7 @@ export default class PartyUiHandler extends MessageUiHandler { private partySlotsContainer: Phaser.GameObjects.Container; private partySlots: PartySlot[]; private partyCancelButton: PartyCancelButton; - private partyMessageBox: Phaser.GameObjects.Image; + private partyMessageBox: Phaser.GameObjects.NineSlice; private optionsMode: boolean; private optionsScroll: boolean; @@ -131,7 +132,7 @@ export default class PartyUiHandler extends MessageUiHandler { const partyMessageBoxContainer = this.scene.add.container(0, -32); partyContainer.add(partyMessageBoxContainer); - const partyMessageBox = this.scene.add.image(1, 31, 'party_message'); + const partyMessageBox = addWindow(this.scene, 1, 31, 262, 30); partyMessageBox.setOrigin(0, 1); partyMessageBoxContainer.add(partyMessageBox); @@ -446,10 +447,10 @@ export default class PartyUiHandler extends MessageUiHandler { text = defaultMessage; if (text?.indexOf('\n') === -1) { - this.partyMessageBox.setTexture('party_message'); + this.partyMessageBox.setSize(262, 30); this.message.setY(10); } else { - this.partyMessageBox.setTexture('party_message_large'); + this.partyMessageBox.setSize(262, 42); this.message.setY(-5); } @@ -462,10 +463,6 @@ export default class PartyUiHandler extends MessageUiHandler { this.optionsMode = true; - const wideOptions = this.partyUiMode === PartyUiMode.MODIFIER_TRANSFER; - - this.partyMessageBox.setTexture(`party_message_options${wideOptions ? '_wide' : ''}`); - let optionsMessage = 'Do what with this Pokémon?'; switch (this.partyUiMode) { @@ -486,6 +483,10 @@ export default class PartyUiHandler extends MessageUiHandler { this.updateOptions(); + const wideOptions = this.partyUiMode === PartyUiMode.MODIFIER_TRANSFER; + + this.partyMessageBox.setSize(262 - (wideOptions ? 88 : 38), 30); + this.setCursor(0); } @@ -579,7 +580,7 @@ export default class PartyUiHandler extends MessageUiHandler { this.options.push(PartyOption.CANCEL); - const optionBg = this.scene.add.nineslice(0, 0, 'window', null, wideOptions ? 144 : 94, 16 * this.options.length + 13, 6, 6, 6, 6); + const optionBg = addWindow(this.scene, 0, 0, wideOptions ? 144 : 94, 16 * this.options.length + 13); optionBg.setOrigin(1, 1); this.optionsContainer.add(optionBg); @@ -701,7 +702,7 @@ export default class PartyUiHandler extends MessageUiHandler { this.optionsContainer.removeAll(true); this.eraseOptionsCursor(); - this.partyMessageBox.setTexture('party_message'); + this.partyMessageBox.setSize(262, 30); this.showText(null, 0); } diff --git a/src/ui/settings-ui-handler.ts b/src/ui/settings-ui-handler.ts index b75736c65..9c0cf8df0 100644 --- a/src/ui/settings-ui-handler.ts +++ b/src/ui/settings-ui-handler.ts @@ -3,6 +3,7 @@ import { Setting, settingDefaults, settingOptions } from "../system/settings"; import { TextStyle, addTextObject, getTextColor } from "./text"; import { Mode } from "./ui"; import UiHandler from "./ui-handler"; +import { addWindow } from "./window"; export default class SettingsUiHandler extends UiHandler { private settingsContainer: Phaser.GameObjects.Container; @@ -27,14 +28,14 @@ export default class SettingsUiHandler extends UiHandler { this.settingsContainer.setInteractive(new Phaser.Geom.Rectangle(0, 0, this.scene.game.canvas.width / 6, this.scene.game.canvas.height / 6), Phaser.Geom.Rectangle.Contains); - const headerBg = this.scene.add.nineslice(0, 0, 'window', null, (this.scene.game.canvas.width / 6) - 2, 24, 6, 6, 6, 6); + const headerBg = addWindow(this.scene, 0, 0, (this.scene.game.canvas.width / 6) - 2, 24); headerBg.setOrigin(0, 0); const headerText = addTextObject(this.scene, 0, 0, 'Options', TextStyle.SETTINGS_LABEL); headerText.setOrigin(0, 0); headerText.setPositionRelative(headerBg, 8, 4); - this.optionsBg = this.scene.add.nineslice(0, headerBg.height, 'window', null, (this.scene.game.canvas.width / 6) - 2, (this.scene.game.canvas.height / 6) - headerBg.height - 2, 6, 6, 6, 6); + this.optionsBg = addWindow(this.scene, 0, headerBg.height, (this.scene.game.canvas.width / 6) - 2, (this.scene.game.canvas.height / 6) - headerBg.height - 2); this.optionsBg.setOrigin(0, 0); this.optionsContainer = this.scene.add.container(0, 0); diff --git a/src/ui/starter-select-ui-handler.ts b/src/ui/starter-select-ui-handler.ts index 1a71efc4c..32c2f0537 100644 --- a/src/ui/starter-select-ui-handler.ts +++ b/src/ui/starter-select-ui-handler.ts @@ -13,6 +13,7 @@ import { DexAttr, DexEntry } from "../system/game-data"; import * as Utils from "../utils"; import PokemonIconAnimHandler, { PokemonIconAnimMode } from "./pokemon-icon-anim-handler"; import { StatsContainer } from "./stats-container"; +import { addWindow } from "./window"; export type StarterSelectCallback = (starters: Starter[]) => void; @@ -96,6 +97,11 @@ export default class StarterSelectUiHandler extends MessageUiHandler { starterSelectBg.setOrigin(0, 0); this.starterSelectContainer.add(starterSelectBg); + this.starterSelectContainer.add(addWindow(this.scene, 107, 1, 34, 92)); + this.starterSelectContainer.add(addWindow(this.scene, 107, 93, 34, 57)); + this.starterSelectContainer.add(addWindow(this.scene, 107, 145, 34, 34, true)); + this.starterSelectContainer.add(addWindow(this.scene, 141, 1, 178, 178)); + this.iconAnimHandler = new PokemonIconAnimHandler(); this.iconAnimHandler.setup(this.scene); diff --git a/src/ui/ui.ts b/src/ui/ui.ts index 110189f5a..dc09be05f 100644 --- a/src/ui/ui.ts +++ b/src/ui/ui.ts @@ -25,6 +25,7 @@ import EggListUiHandler from './egg-list-ui-handler'; import EggGachaUiHandler from './egg-gacha-ui-handler'; import VouchersUiHandler from './vouchers-ui-handler'; import VoucherBar from './voucher-bar'; +import { addWindow } from './window'; export enum Mode { MESSAGE, @@ -134,7 +135,7 @@ export default class UI extends Phaser.GameObjects.Container { this.tooltipContainer = this.scene.add.container(0, 0); this.tooltipContainer.setVisible(false); - this.tooltipBg = this.scene.add.nineslice(0, 0, 'window', null, 128, 31, 6, 6, 6, 6); + this.tooltipBg = addWindow(this.scene, 0, 0, 128, 31); this.tooltipBg.setOrigin(0, 0); this.tooltipTitle = addTextObject(this.scene, 64, 4, '', TextStyle.TOOLTIP_TITLE); diff --git a/src/ui/vouchers-ui-handler.ts b/src/ui/vouchers-ui-handler.ts index a8d0421cc..7a84343c8 100644 --- a/src/ui/vouchers-ui-handler.ts +++ b/src/ui/vouchers-ui-handler.ts @@ -3,6 +3,7 @@ import { Voucher, getVoucherTypeIcon, getVoucherTypeName, vouchers } from "../sy import MessageUiHandler from "./message-ui-handler"; import { TextStyle, addTextObject } from "./text"; import { Mode } from "./ui"; +import { addWindow } from "./window"; export default class VouchersUiHandler extends MessageUiHandler { private vouchersContainer: Phaser.GameObjects.Container; @@ -26,14 +27,14 @@ export default class VouchersUiHandler extends MessageUiHandler { this.vouchersContainer.setInteractive(new Phaser.Geom.Rectangle(0, 0, this.scene.game.canvas.width / 6, this.scene.game.canvas.height / 6), Phaser.Geom.Rectangle.Contains); - const headerBg = this.scene.add.nineslice(0, 0, 'window', null, (this.scene.game.canvas.width / 6) - 2, 24, 6, 6, 6, 6); + const headerBg = addWindow(this.scene, 0, 0, (this.scene.game.canvas.width / 6) - 2, 24); headerBg.setOrigin(0, 0); const headerText = addTextObject(this.scene, 0, 0, 'Vouchers', TextStyle.SETTINGS_LABEL); headerText.setOrigin(0, 0); headerText.setPositionRelative(headerBg, 8, 4); - this.voucherIconsBg = this.scene.add.nineslice(0, headerBg.height, 'window', null, (this.scene.game.canvas.width / 6) - 2, (this.scene.game.canvas.height / 6) - headerBg.height - 68, 6, 6, 6, 6); + this.voucherIconsBg = addWindow(this.scene, 0, headerBg.height, (this.scene.game.canvas.width / 6) - 2, (this.scene.game.canvas.height / 6) - headerBg.height - 68); this.voucherIconsBg.setOrigin(0, 0); this.voucherIconsContainer = this.scene.add.container(6, headerBg.height + 6); @@ -52,21 +53,21 @@ export default class VouchersUiHandler extends MessageUiHandler { this.voucherIconsContainer.add(icon); } - const titleBg = this.scene.add.nineslice(0, headerBg.height + this.voucherIconsBg.height, 'window', null, 220, 24, 6, 6, 6, 6); + const titleBg = addWindow(this.scene, 0, headerBg.height + this.voucherIconsBg.height, 220, 24); titleBg.setOrigin(0, 0); this.titleText = addTextObject(this.scene, 0, 0, '', TextStyle.WINDOW); this.titleText.setOrigin(0, 0); this.titleText.setPositionRelative(titleBg, 8, 4); - const unlockBg = this.scene.add.nineslice(titleBg.x + titleBg.width, titleBg.y, 'window', null, 98, 24, 6, 6, 6, 6); + const unlockBg = addWindow(this.scene, titleBg.x + titleBg.width, titleBg.y, 98, 24); unlockBg.setOrigin(0, 0); this.unlockText = addTextObject(this.scene, 0, 0, '', TextStyle.WINDOW); this.unlockText.setOrigin(0, 0); this.unlockText.setPositionRelative(unlockBg, 8, 4); - const descriptionBg = this.scene.add.nineslice(0, titleBg.y + titleBg.height, 'window', null, (this.scene.game.canvas.width / 6) - 2, 42, 6, 6, 6, 6); + const descriptionBg = addWindow(this.scene, 0, titleBg.y + titleBg.height, (this.scene.game.canvas.width / 6) - 2, 42); descriptionBg.setOrigin(0, 0); const descriptionText = addTextObject(this.scene, 0, 0, '', TextStyle.WINDOW, { maxLines: 2 }); diff --git a/src/ui/window.ts b/src/ui/window.ts new file mode 100644 index 000000000..55ecfdd6c --- /dev/null +++ b/src/ui/window.ts @@ -0,0 +1,43 @@ +import BattleScene from "../battle-scene"; + +export function addWindow(scene: BattleScene, x: number, y: number, width: number, height: number, mergeMaskTop?: boolean, mergeMaskLeft?: boolean, maskOffsetX?: number, maskOffsetY?: number): Phaser.GameObjects.NineSlice { + const window = scene.add.nineslice(x, y, `window_${scene.windowType}`, null, width, height, 8, 8, 8, 8); + window.setOrigin(0, 0); + + if (mergeMaskTop || mergeMaskLeft) { + const maskRect = scene.make.graphics({}); + maskRect.setScale(6); + maskRect.fillStyle(0xFFFFFF); + maskRect.beginPath(); + maskRect.fillRect(window.x + (mergeMaskLeft ? 2 : 0) + (maskOffsetX || 0), window.y + (mergeMaskTop ? 2 : 0) + (maskOffsetY || 0), window.width - (mergeMaskLeft ? 2 : 0), window.height - (mergeMaskTop ? 2 : 0)); + window.setMask(maskRect.createGeometryMask()); + } + + return window; +} + +export function updateWindowType(scene: BattleScene, windowTypeIndex: integer): void { + const windowObjects: Phaser.GameObjects.NineSlice[] = []; + const traverse = (object: any) => { + if (object.hasOwnProperty('children')) { + const children = object.children as Phaser.GameObjects.DisplayList; + for (let child of children.getAll()) + traverse(child); + } else if (object instanceof Phaser.GameObjects.Container) { + for (let child of object.getAll()) + traverse(child); + } else if (object instanceof Phaser.GameObjects.NineSlice) { + if (object.texture.key.startsWith('window_')) + windowObjects.push(object); + } + } + + traverse(scene); + + scene.windowType = windowTypeIndex; + + const windowKey = `window_${windowTypeIndex}`; + + for (let window of windowObjects) + window.setTexture(windowKey); +} \ No newline at end of file