From 7847aa1644a732b7002e10660cd342675136e312 Mon Sep 17 00:00:00 2001 From: Dakurei Date: Fri, 5 Jul 2024 21:50:19 +0200 Subject: [PATCH] [Enhancement] Fixes sizing and legacy theme problem for bgm-bar (#2603) * Adds TextStyle for bgm-bar ui * Makes the ui bgm-bar truly dynamic + cleans up unused code + Removes all hard-coded characters from the string to allow for different typographical rules in different languages * Applies the necessary modifications to locales following the deletion of the hard-coded character to form strings * Use same style as above + reduce shadow offset * Creates and loads a resource for the bgm-bar ui + Can be redesigned by someone with more talent if needed, since it won't affect the ability bar * Using the new resource in bgm-bar ui * Use of more space by default following deletion of the 'noteText' text zone --- public/images/ui/bgm_bar.png | Bin 0 -> 233 bytes public/images/ui/legacy/bgm_bar.png | Bin 0 -> 1077 bytes src/loading-scene.ts | 1 + src/locales/de/bgm-name.ts | 2 +- src/locales/en/bgm-name.ts | 2 +- src/locales/es/bgm-name.ts | 2 +- src/locales/fr/bgm-name.ts | 2 +- src/locales/it/bgm-name.ts | 2 +- src/locales/ko/bgm-name.ts | 2 +- src/locales/pt_BR/bgm-name.ts | 2 +- src/locales/zh_CN/bgm-name.ts | 2 +- src/locales/zh_TW/bgm-name.ts | 2 +- src/ui/bgm-bar.ts | 25 +++++-------------------- src/ui/text.ts | 10 +++++++++- 14 files changed, 24 insertions(+), 30 deletions(-) create mode 100644 public/images/ui/bgm_bar.png create mode 100644 public/images/ui/legacy/bgm_bar.png diff --git a/public/images/ui/bgm_bar.png b/public/images/ui/bgm_bar.png new file mode 100644 index 0000000000000000000000000000000000000000..54abe4c5a944b55109144a4e254720e7896867f1 GIT binary patch literal 233 zcmeAS@N?(olHy`uVBq!ia0vp^Wk4*?!3HFaVl111)CNx%$B>MBZ*OkoVlotHdD!`b zi=F$B>7mfFY1{0!tzA0zYU9~Pg984Ap$|T>O#1qNmBTLCG({ICpjHNk9~*@P<&RBh zej9YY`q;(gg)>Ta&QtaLe%tx9mHBsTw=2t2=cYzaDzTAO@x1-kdxLDX?S0dL-oq}* z{}*m$nY{&yMGmS}d~1|Bx{%y0j>l{?e(LSh_3&N|9s5@xgPGAIC_~NAa W*?f1|PU{1LAg-sYpUXO@geCyA30!&r literal 0 HcmV?d00001 diff --git a/public/images/ui/legacy/bgm_bar.png b/public/images/ui/legacy/bgm_bar.png new file mode 100644 index 0000000000000000000000000000000000000000..fedeb323fc2d758a76827b9be2daf9dfd439f2d7 GIT binary patch literal 1077 zcmaJ=O=#0l91m`YiUUP=P(-s-P;t#y*KQ4~vrQUTUB>JR7Ev@!-qx@sFD7qmRzXCE z=%(PolMDsHgBO|eprW8CA|ig^K}AtPnL8*B=0QXczI1K%U=1&MANl=$|Ic@#r+Zt& zlGRHHf@nx}N@+X~<9FSnh4{*;hvM8%`2^utM)yL4DX=64)w0C&6sto`{=0Lw;#i-evw<*%lW7Mv&!YZ~1@3f(EMNkplAbwexq=s?O1c7G`^OALmLO;#M$J2wReDGfI)Dt* zp`gZc92tqwTuV3-;hIUF<#>k0BNF6Vgm6UQTgmc6VQY@wC!{60YzyyVR30H)V3$Zbov=C8jboIJRih}pgUqA)eBl~prRlFS91&-8PFnqMKuS9P>jN!&WB*yRawg| zrwJ#F@l>1PXx0y@0#ua$Lrt@ac2OGq@%Nv?Zf3*=Od7aw$kA}&`U1WwTM!+fBIslw z9IRxqCl3*H^Ux;6-UzvImtpC!;BG466-7u{E>bNGq@);y6==iIg|>LSO^<D8wf@ zE-5EOIh1JO<&Z4$yv%YHt^~Cq6IiIi)&FplHMxE(m^QX70mm2yy6ixcEQKr>wS7s{ z)GKrK+P;W2xeRuO@eBJ`p({tYd;Dd!ZSkhs_`t&5?%=lWyl`kYz7m&GQat0m{_^HZ z!(DdS)}3p>@vaY4-N7>}SKSF+pSl&NPH%nIw0>;j-R1?`NA@kAIg;6aWBF6P{w~#w z$NL@McRcyQj%D|5*eMF1X08qGJry`?zFB+z+t0@@&OY3eoqao}ZJJ~dG=GXmu{_jWo bCKfCu4z@NO&evT``WHEs?3OMk_8<8TFd=4z literal 0 HcmV?d00001 diff --git a/src/loading-scene.ts b/src/loading-scene.ts index 0a6648a9c57..15cd295d23c 100644 --- a/src/loading-scene.ts +++ b/src/loading-scene.ts @@ -78,6 +78,7 @@ export class LoadingScene extends SceneBase { this.loadImage("overlay_exp", "ui"); this.loadImage("icon_owned", "ui"); this.loadImage("ability_bar_left", "ui"); + this.loadImage("bgm_bar", "ui"); this.loadImage("party_exp_bar", "ui"); this.loadImage("achv_bar", "ui"); this.loadImage("achv_bar_2", "ui"); diff --git a/src/locales/de/bgm-name.ts b/src/locales/de/bgm-name.ts index 71e775c8846..1a6712b8608 100644 --- a/src/locales/de/bgm-name.ts +++ b/src/locales/de/bgm-name.ts @@ -1,7 +1,7 @@ import { SimpleTranslationEntries } from "#app/interfaces/locales"; export const bgmName: SimpleTranslationEntries = { - "music": "Musik", + "music": "Musik: ", "missing_entries" : "{{name}}", "battle_kanto_champion": "S2W2 Vs. Kanto Champion", "battle_johto_champion": "S2W2 Vs. Johto Champion", diff --git a/src/locales/en/bgm-name.ts b/src/locales/en/bgm-name.ts index ef15c6c6dcb..87d90dabc9d 100644 --- a/src/locales/en/bgm-name.ts +++ b/src/locales/en/bgm-name.ts @@ -1,7 +1,7 @@ import { SimpleTranslationEntries } from "#app/interfaces/locales"; export const bgmName: SimpleTranslationEntries = { - "music": "Music", + "music": "Music: ", "missing_entries" : "{{name}}", "battle_kanto_champion": "B2W2 Kanto Champion Battle", "battle_johto_champion": "B2W2 Johto Champion Battle", diff --git a/src/locales/es/bgm-name.ts b/src/locales/es/bgm-name.ts index cda6fba84f4..a0f7544d608 100644 --- a/src/locales/es/bgm-name.ts +++ b/src/locales/es/bgm-name.ts @@ -1,7 +1,7 @@ import { SimpleTranslationEntries } from "#app/interfaces/locales"; export const bgmName: SimpleTranslationEntries = { - "music": "Música", + "music": "Música: ", "missing_entries" : "{{name}}", "battle_kanto_champion": "B2W2 - ¡Vs Campeón de Kanto!", "battle_johto_champion": "B2W2 - ¡Vs Campeón de Johto!", diff --git a/src/locales/fr/bgm-name.ts b/src/locales/fr/bgm-name.ts index 025f339ee86..15ec145a6ff 100644 --- a/src/locales/fr/bgm-name.ts +++ b/src/locales/fr/bgm-name.ts @@ -1,7 +1,7 @@ import { SimpleTranslationEntries } from "#app/interfaces/locales"; export const bgmName: SimpleTranslationEntries = { - "music": "Musique ", + "music": "Musique : ", "missing_entries" : "{{name}}", "battle_kanto_champion": "N2B2 - Vs. Maitre de Kanto", "battle_johto_champion": "N2B2 - Vs. Maitre de Johto", diff --git a/src/locales/it/bgm-name.ts b/src/locales/it/bgm-name.ts index ef15c6c6dcb..87d90dabc9d 100644 --- a/src/locales/it/bgm-name.ts +++ b/src/locales/it/bgm-name.ts @@ -1,7 +1,7 @@ import { SimpleTranslationEntries } from "#app/interfaces/locales"; export const bgmName: SimpleTranslationEntries = { - "music": "Music", + "music": "Music: ", "missing_entries" : "{{name}}", "battle_kanto_champion": "B2W2 Kanto Champion Battle", "battle_johto_champion": "B2W2 Johto Champion Battle", diff --git a/src/locales/ko/bgm-name.ts b/src/locales/ko/bgm-name.ts index 032db1717e1..235d6a3320e 100644 --- a/src/locales/ko/bgm-name.ts +++ b/src/locales/ko/bgm-name.ts @@ -1,7 +1,7 @@ import { SimpleTranslationEntries } from "#app/interfaces/locales"; export const bgmName: SimpleTranslationEntries = { - "music": "Music", + "music": "Music: ", "missing_entries" : "{{name}}", "battle_kanto_champion": "BW2 관동 챔피언 배틀", "battle_johto_champion": "BW2 성도 챔피언 배틀", diff --git a/src/locales/pt_BR/bgm-name.ts b/src/locales/pt_BR/bgm-name.ts index ef15c6c6dcb..87d90dabc9d 100644 --- a/src/locales/pt_BR/bgm-name.ts +++ b/src/locales/pt_BR/bgm-name.ts @@ -1,7 +1,7 @@ import { SimpleTranslationEntries } from "#app/interfaces/locales"; export const bgmName: SimpleTranslationEntries = { - "music": "Music", + "music": "Music: ", "missing_entries" : "{{name}}", "battle_kanto_champion": "B2W2 Kanto Champion Battle", "battle_johto_champion": "B2W2 Johto Champion Battle", diff --git a/src/locales/zh_CN/bgm-name.ts b/src/locales/zh_CN/bgm-name.ts index 70e969d7b5e..b582bc6a2d0 100644 --- a/src/locales/zh_CN/bgm-name.ts +++ b/src/locales/zh_CN/bgm-name.ts @@ -1,7 +1,7 @@ import { SimpleTranslationEntries } from "#app/interfaces/locales"; export const bgmName: SimpleTranslationEntries = { - "music": "BGM", + "music": "BGM: ", "missing_entries" : "{{name}}", "battle_kanto_champion": "黑2白2「决战！关都冠军」", "battle_johto_champion": "黑2白2「决战！城都冠军」", diff --git a/src/locales/zh_TW/bgm-name.ts b/src/locales/zh_TW/bgm-name.ts index ef15c6c6dcb..87d90dabc9d 100644 --- a/src/locales/zh_TW/bgm-name.ts +++ b/src/locales/zh_TW/bgm-name.ts @@ -1,7 +1,7 @@ import { SimpleTranslationEntries } from "#app/interfaces/locales"; export const bgmName: SimpleTranslationEntries = { - "music": "Music", + "music": "Music: ", "missing_entries" : "{{name}}", "battle_kanto_champion": "B2W2 Kanto Champion Battle", "battle_johto_champion": "B2W2 Johto Champion Battle", diff --git a/src/ui/bgm-bar.ts b/src/ui/bgm-bar.ts index 5bca9632012..f4366ef9c65 100644 --- a/src/ui/bgm-bar.ts +++ b/src/ui/bgm-bar.ts @@ -3,24 +3,16 @@ import {addTextObject, TextStyle} from "./text"; import i18next from "i18next"; import * as Utils from "#app/utils"; - const hiddenX = -150; const shownX = 0; const baseY = 0; - export default class BgmBar extends Phaser.GameObjects.Container { private defaultWidth: number; private defaultHeight: number; private bg: Phaser.GameObjects.NineSlice; private musicText: Phaser.GameObjects.Text; - private noteText: Phaser.GameObjects.Text; - - private tween: Phaser.Tweens.Tween; - private autoHideTimer: NodeJS.Timeout; - private queue: (string)[] = []; - public shown: boolean; @@ -29,19 +21,15 @@ export default class BgmBar extends Phaser.GameObjects.Container { } setup(): void { - this.defaultWidth = 200; + this.defaultWidth = 230; this.defaultHeight = 100; - this.bg = this.scene.add.nineslice(-5, -5, "ability_bar_left", null, this.defaultWidth, this.defaultHeight, 0, 0, 10, 10); + this.bg = this.scene.add.nineslice(-5, -5, "bgm_bar", null, this.defaultWidth, this.defaultHeight, 0, 0, 10, 10); this.bg.setOrigin(0, 0); this.add(this.bg); - this.noteText = addTextObject(this.scene, 5, 5, "", TextStyle.MESSAGE, {fontSize: "72px"}); - this.noteText.setOrigin(0, 0); - this.add(this.noteText); - - this.musicText = addTextObject(this.scene, 30, 5, "", TextStyle.MESSAGE, {fontSize: "72px"}); + this.musicText = addTextObject(this.scene, 5, 5, "", TextStyle.BGM_BAR); this.musicText.setOrigin(0, 0); this.musicText.setWordWrapWidth(650, true); @@ -56,16 +44,15 @@ export default class BgmBar extends Phaser.GameObjects.Container { * @param {string} bgmName The name of the BGM to set. */ setBgmToBgmBar(bgmName: string): void { - this.noteText.setText(`${i18next.t("bgmName:music")}:`); - this.musicText.setText(`${this.getRealBgmName(bgmName)}`); + this.musicText.setText(`${i18next.t("bgmName:music")}${this.getRealBgmName(bgmName)}`); if (!(this.scene as BattleScene).showBgmBar) { return; } this.musicText.width = this.bg.width - 20; this.musicText.setWordWrapWidth(this.defaultWidth * 4); - this.bg.width = Math.min(this.defaultWidth, this.noteText.displayWidth + this.musicText.displayWidth + 30); + this.bg.width = Math.min(this.defaultWidth, this.musicText.displayWidth + 23); this.bg.height = Math.min(this.defaultHeight, this.musicText.displayHeight + 20); (this.scene as BattleScene).fieldUI.bringToTop(this); @@ -97,5 +84,3 @@ export default class BgmBar extends Phaser.GameObjects.Container { return i18next.t([`bgmName:${bgmName}`, "bgmName:missing_entries"], {name: Utils.formatText(bgmName)}); } } - - diff --git a/src/ui/text.ts b/src/ui/text.ts index 91ada7f12ad..2a12e883deb 100644 --- a/src/ui/text.ts +++ b/src/ui/text.ts @@ -34,7 +34,8 @@ export enum TextStyle { MOVE_PP_HALF_FULL, MOVE_PP_NEAR_EMPTY, MOVE_PP_EMPTY, - SMALLER_WINDOW_ALT + SMALLER_WINDOW_ALT, + BGM_BAR } export function addTextObject(scene: Phaser.Scene, x: number, y: number, content: string, style: TextStyle, extraStyleOptions?: Phaser.Types.GameObjects.Text.TextStyle): Phaser.GameObjects.Text { @@ -146,6 +147,11 @@ export function getTextStyleOptions(style: TextStyle, uiTheme: UiTheme, extraSty shadowXpos = 3; shadowYpos = 3; break; + case TextStyle.BGM_BAR: + styleOptions.fontSize = defaultFontSize - 24; + shadowXpos = 3; + shadowYpos = 3; + break; } const shadowColor = getTextColor(style, true, uiTheme); @@ -235,6 +241,8 @@ export function getTextColor(textStyle: TextStyle, shadow?: boolean, uiTheme: Ui return !shadow ? "#f88880" : "#f83018"; case TextStyle.SMALLER_WINDOW_ALT: return !shadow ? "#484848" : "#d0d0c8"; + case TextStyle.BGM_BAR: + return !shadow ? "#f8f8f8" : "#6b5a73"; } }