From 8069f9ad91237b6f670f71307ae2265692324f16 Mon Sep 17 00:00:00 2001 From: Wlowscha <54003515+Wlowscha@users.noreply.github.com> Date: Sat, 28 Jun 2025 10:53:20 +0200 Subject: [PATCH 1/8] Extracted scrolling logic from move-info-overlay.ts --- src/ui/move-info-overlay.ts | 86 ++++++++++++++----------------------- src/ui/scrolling-text.ts | 68 +++++++++++++++++++++++++++++ 2 files changed, 101 insertions(+), 53 deletions(-) create mode 100644 src/ui/scrolling-text.ts diff --git a/src/ui/move-info-overlay.ts b/src/ui/move-info-overlay.ts index 2b230d609fd..6f00978affd 100644 --- a/src/ui/move-info-overlay.ts +++ b/src/ui/move-info-overlay.ts @@ -7,6 +7,7 @@ import type Move from "../data/moves/move"; import { MoveCategory } from "#enums/MoveCategory"; import { PokemonType } from "#enums/pokemon-type"; import i18next from "i18next"; +import ScrollingText from "./scrolling-text"; export interface MoveInfoOverlaySettings { delayVisibility?: boolean; // if true, showing the overlay will only set it to active and populate the fields and the handler using this field has to manually call setVisible later. @@ -35,7 +36,7 @@ export default class MoveInfoOverlay extends Phaser.GameObjects.Container implem private move: Move; - private desc: Phaser.GameObjects.Text; + private desc: ScrollingText; private descScroll: Phaser.Tweens.Tween | null = null; private val: Phaser.GameObjects.Container; @@ -68,45 +69,42 @@ export default class MoveInfoOverlay extends Phaser.GameObjects.Container implem this.descBg.setOrigin(0, 0); this.add(this.descBg); + const x = options?.x || 0; + const y = options?.y || 0; + const descX = (options?.onSide && !options?.right ? EFF_WIDTH : 0) + BORDER; + const descY = (options?.top ? EFF_HEIGHT : 0) + BORDER - 2; + + const visibleX = x < 0 ? x + globalScene.game.canvas.width / GLOBAL_SCALE : x; + + const visibleY = y < 0 ? y + globalScene.game.canvas.height / GLOBAL_SCALE : y; + + const globalMaskX = (visibleX + descX) * scale; + const globalMaskY = (visibleY + descY) * scale; + const wrapWidth = (width - (BORDER - 2) * 2 - (options?.onSide ? EFF_WIDTH : 0)) * GLOBAL_SCALE; + const visibleWidth = (width - (BORDER - 2) * 2 - (options?.onSide ? EFF_WIDTH : 0)) * scale; + const visibleHeight = (DESC_HEIGHT - (BORDER - 2) * 2) * scale; + // set up the description; wordWrap uses true pixels, unaffected by any scaling, while other values are affected - this.desc = addTextObject( - (options?.onSide && !options?.right ? EFF_WIDTH : 0) + BORDER, - (options?.top ? EFF_HEIGHT : 0) + BORDER - 2, - "", + this.desc = new ScrollingText( + globalScene, + descX, // Container local x + descY, // Container local y + globalMaskX, // Global mask X + globalMaskY, // Global mask Y + visibleWidth, // Mask width (unscaled) + visibleHeight, // Mask height (already scaled) + 3, // maxLineCount + 96 / 72 / 14.83, // scale_property + "", // initial content TextStyle.BATTLE_INFO, { wordWrap: { - width: (width - (BORDER - 2) * 2 - (options?.onSide ? EFF_WIDTH : 0)) * GLOBAL_SCALE, + width: wrapWidth, }, }, ); - this.desc.setLineSpacing(i18next.resolvedLanguage === "ja" ? 25 : 5); - - // limit the text rendering, required for scrolling later on - const maskPointOrigin = { - x: options?.x || 0, - y: options?.y || 0, - }; - if (maskPointOrigin.x < 0) { - maskPointOrigin.x += globalScene.game.canvas.width / GLOBAL_SCALE; - } - if (maskPointOrigin.y < 0) { - maskPointOrigin.y += globalScene.game.canvas.height / GLOBAL_SCALE; - } - - const moveDescriptionTextMaskRect = globalScene.make.graphics(); - moveDescriptionTextMaskRect.fillStyle(0xff0000); - moveDescriptionTextMaskRect.fillRect( - maskPointOrigin.x + ((options?.onSide && !options?.right ? EFF_WIDTH : 0) + BORDER) * scale, - maskPointOrigin.y + ((options?.top ? EFF_HEIGHT : 0) + BORDER - 2) * scale, - width - ((options?.onSide ? EFF_WIDTH : 0) - BORDER * 2) * scale, - (DESC_HEIGHT - (BORDER - 2) * 2) * scale, - ); - moveDescriptionTextMaskRect.setScale(6); - const moveDescriptionTextMask = this.createGeometryMask(moveDescriptionTextMaskRect); - + this.desc.text.setLineSpacing(i18next.resolvedLanguage === "ja" ? 25 : 5); this.add(this.desc); - this.desc.setMask(moveDescriptionTextMask); // prepare the effect box this.val = new Phaser.GameObjects.Container( @@ -178,28 +176,10 @@ export default class MoveInfoOverlay extends Phaser.GameObjects.Container implem this.typ.setTexture(getLocalizedSpriteKey("types"), PokemonType[move.type].toLowerCase()); this.cat.setFrame(MoveCategory[move.category].toLowerCase()); - this.desc.setText(move?.effect || ""); + this.desc.text.setText(move?.effect || ""); // stop previous scrolling effects and reset y position - if (this.descScroll) { - this.descScroll.remove(); - this.descScroll = null; - this.desc.y = (this.options?.top ? EFF_HEIGHT : 0) + BORDER - 2; - } - - // determine if we need to add new scrolling effects - const moveDescriptionLineCount = Math.floor((this.desc.displayHeight * (96 / 72)) / 14.83); - if (moveDescriptionLineCount > 3) { - // generate scrolling effects - this.descScroll = globalScene.tweens.add({ - targets: this.desc, - delay: fixedInt(2000), - loop: -1, - hold: fixedInt(2000), - duration: fixedInt((moveDescriptionLineCount - 3) * 2000), - y: `-=${14.83 * (72 / 96) * (moveDescriptionLineCount - 3)}`, - }); - } + this.desc.activate(); if (!this.options.delayVisibility) { this.setVisible(true); @@ -218,7 +198,7 @@ export default class MoveInfoOverlay extends Phaser.GameObjects.Container implem this.setVisible(true); } globalScene.tweens.add({ - targets: this.desc, + targets: this.desc.text, duration: fixedInt(125), ease: "Sine.easeInOut", alpha: visible ? 1 : 0, diff --git a/src/ui/scrolling-text.ts b/src/ui/scrolling-text.ts new file mode 100644 index 00000000000..e47f8e59a0b --- /dev/null +++ b/src/ui/scrolling-text.ts @@ -0,0 +1,68 @@ +import { globalScene } from "#app/global-scene"; +import { fixedInt } from "#app/utils/common"; +import { addTextObject, type TextStyle } from "./text"; + +export default class ScrollingText extends Phaser.GameObjects.Container { + public text: Phaser.GameObjects.Text; + private descScroll: Phaser.Tweens.Tween | null = null; + private maxLineCount: number; + private scale_property: number; + private baseY: number; + + constructor( + scene: Phaser.Scene, + x: number, + y: number, + globalMaskX: number, + globalMaskY: number, + visibleWidth: number, + visibleHeight: number, + maxLineCount: number, + scale_property: number, + content: string, + style: TextStyle, + extraStyleOptions?: Phaser.Types.GameObjects.Text.TextStyle, + ) { + super(scene, x, y); + this.text = addTextObject(0, 0, content, style, extraStyleOptions); + this.maxLineCount = maxLineCount; + this.scale_property = scale_property; + this.baseY = 0; + this.add(this.text); + + const maskGraphics = scene.make.graphics({ x: 0, y: 0 }); + maskGraphics.fillStyle(0xffffff); + maskGraphics.fillRect(globalMaskX, globalMaskY, visibleWidth, visibleHeight); + + maskGraphics.setScale(6); + + scene.add.existing(maskGraphics); + + const mask = this.createGeometryMask(maskGraphics); + this.text.setMask(mask); + } + + activate() { + // stop previous scrolling effects and reset y position + if (this.descScroll) { + this.descScroll.remove(); + this.descScroll = null; + this.text.y = this.baseY; + } + + // determine if we need to add new scrolling effects + const lineCount = Math.floor(this.text.displayHeight * this.scale_property); + + if (lineCount > this.maxLineCount) { + // generate scrolling effects + this.descScroll = globalScene.tweens.add({ + targets: this.text, + delay: fixedInt(2000), + loop: -1, + hold: fixedInt(2000), + duration: fixedInt((lineCount - this.maxLineCount) * 2000), + y: `-=${(lineCount - this.maxLineCount) / this.scale_property}`, + }); + } + } +} From b270af32ace105ca5ca7ea7a3bebc9ef45bf099c Mon Sep 17 00:00:00 2001 From: Wlowscha <54003515+Wlowscha@users.noreply.github.com> Date: Sun, 27 Jul 2025 22:55:36 +0200 Subject: [PATCH 2/8] Added TODO --- src/ui/scrolling-text.ts | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/ui/scrolling-text.ts b/src/ui/scrolling-text.ts index e47f8e59a0b..c5acd2c688a 100644 --- a/src/ui/scrolling-text.ts +++ b/src/ui/scrolling-text.ts @@ -2,6 +2,9 @@ import { globalScene } from "#app/global-scene"; import { fixedInt } from "#app/utils/common"; import { addTextObject, type TextStyle } from "./text"; +/* + */ + export default class ScrollingText extends Phaser.GameObjects.Container { public text: Phaser.GameObjects.Text; private descScroll: Phaser.Tweens.Tween | null = null; @@ -31,6 +34,7 @@ export default class ScrollingText extends Phaser.GameObjects.Container { this.add(this.text); const maskGraphics = scene.make.graphics({ x: 0, y: 0 }); + //TODO: Remove, this line is for testing maskGraphics.fillStyle(0xffffff); maskGraphics.fillRect(globalMaskX, globalMaskY, visibleWidth, visibleHeight); From 14aa8b7f713a45640a23efb8732e8a324f80e327 Mon Sep 17 00:00:00 2001 From: Wlowscha <54003515+Wlowscha@users.noreply.github.com> Date: Tue, 29 Jul 2025 22:39:58 +0200 Subject: [PATCH 3/8] Remove unused baseY parameter --- src/ui/scrolling-text.ts | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/src/ui/scrolling-text.ts b/src/ui/scrolling-text.ts index c5acd2c688a..5d42bca2e57 100644 --- a/src/ui/scrolling-text.ts +++ b/src/ui/scrolling-text.ts @@ -10,7 +10,6 @@ export default class ScrollingText extends Phaser.GameObjects.Container { private descScroll: Phaser.Tweens.Tween | null = null; private maxLineCount: number; private scale_property: number; - private baseY: number; constructor( scene: Phaser.Scene, @@ -30,7 +29,6 @@ export default class ScrollingText extends Phaser.GameObjects.Container { this.text = addTextObject(0, 0, content, style, extraStyleOptions); this.maxLineCount = maxLineCount; this.scale_property = scale_property; - this.baseY = 0; this.add(this.text); const maskGraphics = scene.make.graphics({ x: 0, y: 0 }); @@ -51,7 +49,7 @@ export default class ScrollingText extends Phaser.GameObjects.Container { if (this.descScroll) { this.descScroll.remove(); this.descScroll = null; - this.text.y = this.baseY; + this.text.y = 0; } // determine if we need to add new scrolling effects From a4b7bd8b22c4452a87bb3d99fe01b86719e68706 Mon Sep 17 00:00:00 2001 From: Wlowscha <54003515+Wlowscha@users.noreply.github.com> Date: Sun, 17 Aug 2025 12:47:36 +0200 Subject: [PATCH 4/8] Fixed minor issues --- src/ui/move-info-overlay.ts | 8 ++++---- src/ui/scrolling-text.ts | 3 ++- 2 files changed, 6 insertions(+), 5 deletions(-) diff --git a/src/ui/move-info-overlay.ts b/src/ui/move-info-overlay.ts index 2358363f5a9..74a2fb50fe7 100644 --- a/src/ui/move-info-overlay.ts +++ b/src/ui/move-info-overlay.ts @@ -85,11 +85,11 @@ export class MoveInfoOverlay extends Phaser.GameObjects.Container implements Inf const visibleY = y < 0 ? y + globalScene.game.canvas.height / GLOBAL_SCALE : y; - const globalMaskX = (visibleX + descX) * scale; - const globalMaskY = (visibleY + descY) * scale; + const globalMaskX = visibleX + descX; + const globalMaskY = visibleY + descY; const wrapWidth = (width - (BORDER - 2) * 2 - (options?.onSide ? EFF_WIDTH : 0)) * GLOBAL_SCALE; - const visibleWidth = (width - (BORDER - 2) * 2 - (options?.onSide ? EFF_WIDTH : 0)) * scale; - const visibleHeight = (DESC_HEIGHT - (BORDER - 2) * 2) * scale; + const visibleWidth = width - (BORDER - 2) * 2 - (options?.onSide ? EFF_WIDTH : 0); + const visibleHeight = DESC_HEIGHT - (BORDER - 2) * 2; // set up the description; wordWrap uses true pixels, unaffected by any scaling, while other values are affected this.desc = new ScrollingText( diff --git a/src/ui/scrolling-text.ts b/src/ui/scrolling-text.ts index 5d42bca2e57..7c35f61cdad 100644 --- a/src/ui/scrolling-text.ts +++ b/src/ui/scrolling-text.ts @@ -1,6 +1,7 @@ import { globalScene } from "#app/global-scene"; import { fixedInt } from "#app/utils/common"; -import { addTextObject, type TextStyle } from "./text"; +import type { TextStyle } from "#enums/text-style"; +import { addTextObject } from "./text"; /* */ From 96bc26880b6d27b2504dfef9e6e01c84120893e1 Mon Sep 17 00:00:00 2001 From: Wlowscha <54003515+Wlowscha@users.noreply.github.com> Date: Sun, 17 Aug 2025 13:27:11 +0200 Subject: [PATCH 5/8] Cleaned up move info overlay --- src/ui/move-info-overlay.ts | 25 ++++++++++++------------- src/ui/scrolling-text.ts | 1 + 2 files changed, 13 insertions(+), 13 deletions(-) diff --git a/src/ui/move-info-overlay.ts b/src/ui/move-info-overlay.ts index 74a2fb50fe7..b1ecc48125f 100644 --- a/src/ui/move-info-overlay.ts +++ b/src/ui/move-info-overlay.ts @@ -37,7 +37,6 @@ const EFF_HEIGHT = 48; const EFF_WIDTH = 82; const DESC_HEIGHT = 48; const BORDER = 8; -const GLOBAL_SCALE = 6; export class MoveInfoOverlay extends Phaser.GameObjects.Container implements InfoToggle { public active = false; @@ -65,14 +64,15 @@ export class MoveInfoOverlay extends Phaser.GameObjects.Container implements Inf this.setScale(1); this.options = options || {}; + const descBoxX = options?.onSide && !options?.right ? EFF_WIDTH : 0; + const descBoxY = options?.top ? EFF_HEIGHT : 0; + // we always want this to be half a window wide + const width = options?.width || MoveInfoOverlay.getWidth(); + const descBoxWidth = width - (options?.onSide ? EFF_WIDTH : 0); + const descBoxHeight = DESC_HEIGHT; + // prepare the description box - const width = options?.width || MoveInfoOverlay.getWidth(); // we always want this to be half a window wide - this.descBg = addWindow( - options?.onSide && !options?.right ? EFF_WIDTH : 0, - options?.top ? EFF_HEIGHT : 0, - width - (options?.onSide ? EFF_WIDTH : 0), - DESC_HEIGHT, - ); + this.descBg = addWindow(descBoxX, descBoxY, descBoxWidth, descBoxHeight); this.descBg.setOrigin(0, 0); this.add(this.descBg); @@ -81,14 +81,13 @@ export class MoveInfoOverlay extends Phaser.GameObjects.Container implements Inf const descX = (options?.onSide && !options?.right ? EFF_WIDTH : 0) + BORDER; const descY = (options?.top ? EFF_HEIGHT : 0) + BORDER - 2; - const visibleX = x < 0 ? x + globalScene.game.canvas.width / GLOBAL_SCALE : x; - - const visibleY = y < 0 ? y + globalScene.game.canvas.height / GLOBAL_SCALE : y; + const visibleX = x < 0 ? x + globalScene.scaledCanvas.width : x; + const visibleY = y < 0 ? y + globalScene.scaledCanvas.height : y; const globalMaskX = visibleX + descX; const globalMaskY = visibleY + descY; - const wrapWidth = (width - (BORDER - 2) * 2 - (options?.onSide ? EFF_WIDTH : 0)) * GLOBAL_SCALE; - const visibleWidth = width - (BORDER - 2) * 2 - (options?.onSide ? EFF_WIDTH : 0); + const wrapWidth = (descBoxWidth - (BORDER - 2) * 2) * 6; + const visibleWidth = descBoxWidth - (BORDER - 2) * 2; const visibleHeight = DESC_HEIGHT - (BORDER - 2) * 2; // set up the description; wordWrap uses true pixels, unaffected by any scaling, while other values are affected diff --git a/src/ui/scrolling-text.ts b/src/ui/scrolling-text.ts index 7c35f61cdad..f3b06d21492 100644 --- a/src/ui/scrolling-text.ts +++ b/src/ui/scrolling-text.ts @@ -27,6 +27,7 @@ export default class ScrollingText extends Phaser.GameObjects.Container { extraStyleOptions?: Phaser.Types.GameObjects.Text.TextStyle, ) { super(scene, x, y); + this.text = addTextObject(0, 0, content, style, extraStyleOptions); this.maxLineCount = maxLineCount; this.scale_property = scale_property; From 0c4a96cec546d580bc0a6cfb34031160354957d8 Mon Sep 17 00:00:00 2001 From: Wlowscha <54003515+Wlowscha@users.noreply.github.com> Date: Sun, 17 Aug 2025 15:35:45 +0200 Subject: [PATCH 6/8] Reduced variables to the minimum --- src/ui/move-info-overlay.ts | 46 ++------------- src/ui/pokedex-info-overlay.ts | 100 +++++++-------------------------- src/ui/scrolling-text.ts | 64 +++++++++++++++------ 3 files changed, 74 insertions(+), 136 deletions(-) diff --git a/src/ui/move-info-overlay.ts b/src/ui/move-info-overlay.ts index b1ecc48125f..d65602b5f88 100644 --- a/src/ui/move-info-overlay.ts +++ b/src/ui/move-info-overlay.ts @@ -36,15 +36,11 @@ export interface MoveInfoOverlaySettings { const EFF_HEIGHT = 48; const EFF_WIDTH = 82; const DESC_HEIGHT = 48; -const BORDER = 8; export class MoveInfoOverlay extends Phaser.GameObjects.Container implements InfoToggle { public active = false; - private move: Move; - private desc: ScrollingText; - private descScroll: Phaser.Tweens.Tween | null = null; private val: Phaser.GameObjects.Container; private pp: Phaser.GameObjects.Text; @@ -52,7 +48,6 @@ export class MoveInfoOverlay extends Phaser.GameObjects.Container implements Inf private acc: Phaser.GameObjects.Text; private typ: Phaser.GameObjects.Sprite; private cat: Phaser.GameObjects.Sprite; - private descBg: Phaser.GameObjects.NineSlice; private options: MoveInfoOverlaySettings; @@ -66,50 +61,22 @@ export class MoveInfoOverlay extends Phaser.GameObjects.Container implements Inf const descBoxX = options?.onSide && !options?.right ? EFF_WIDTH : 0; const descBoxY = options?.top ? EFF_HEIGHT : 0; - // we always want this to be half a window wide const width = options?.width || MoveInfoOverlay.getWidth(); const descBoxWidth = width - (options?.onSide ? EFF_WIDTH : 0); const descBoxHeight = DESC_HEIGHT; // prepare the description box - this.descBg = addWindow(descBoxX, descBoxY, descBoxWidth, descBoxHeight); - this.descBg.setOrigin(0, 0); - this.add(this.descBg); - - const x = options?.x || 0; - const y = options?.y || 0; - const descX = (options?.onSide && !options?.right ? EFF_WIDTH : 0) + BORDER; - const descY = (options?.top ? EFF_HEIGHT : 0) + BORDER - 2; - - const visibleX = x < 0 ? x + globalScene.scaledCanvas.width : x; - const visibleY = y < 0 ? y + globalScene.scaledCanvas.height : y; - - const globalMaskX = visibleX + descX; - const globalMaskY = visibleY + descY; - const wrapWidth = (descBoxWidth - (BORDER - 2) * 2) * 6; - const visibleWidth = descBoxWidth - (BORDER - 2) * 2; - const visibleHeight = DESC_HEIGHT - (BORDER - 2) * 2; - - // set up the description; wordWrap uses true pixels, unaffected by any scaling, while other values are affected this.desc = new ScrollingText( globalScene, - descX, // Container local x - descY, // Container local y - globalMaskX, // Global mask X - globalMaskY, // Global mask Y - visibleWidth, // Mask width (unscaled) - visibleHeight, // Mask height (already scaled) + descBoxX, + descBoxY, + descBoxWidth, + descBoxHeight, 3, // maxLineCount - 96 / 72 / 14.83, // scale_property "", // initial content TextStyle.BATTLE_INFO, - { - wordWrap: { - width: wrapWidth, - }, - }, ); - this.desc.text.setLineSpacing(i18next.resolvedLanguage === "ja" ? 25 : 5); + this.desc.createMask(globalScene, this.x, this.y); this.add(this.desc); // prepare the effect box @@ -163,7 +130,7 @@ export class MoveInfoOverlay extends Phaser.GameObjects.Container implements Inf } if (options?.hideBg) { - this.descBg.setVisible(false); + this.desc.hideBg(); } // hide this component for now @@ -175,7 +142,6 @@ export class MoveInfoOverlay extends Phaser.GameObjects.Container implements Inf if (!globalScene.enableMoveInfo) { return false; // move infos have been disabled // TODO:: is `false` correct? i used to be `undeefined` } - this.move = move; this.pow.setText(move.power >= 0 ? move.power.toString() : "---"); this.acc.setText(move.accuracy >= 0 ? move.accuracy.toString() : "---"); this.pp.setText(move.pp >= 0 ? move.pp.toString() : "---"); diff --git a/src/ui/pokedex-info-overlay.ts b/src/ui/pokedex-info-overlay.ts index 9c5876318ec..a46b94198df 100644 --- a/src/ui/pokedex-info-overlay.ts +++ b/src/ui/pokedex-info-overlay.ts @@ -1,9 +1,8 @@ import type { InfoToggle } from "#app/battle-scene"; import { globalScene } from "#app/global-scene"; import { TextStyle } from "#enums/text-style"; -import { addTextObject } from "#ui/text"; -import { addWindow } from "#ui/ui-theme"; import { fixedInt } from "#utils/common"; +import ScrollingText from "./scrolling-text"; export interface PokedexInfoOverlaySettings { delayVisibility?: boolean; // if true, showing the overlay will only set it to active and populate the fields and the handler using this field has to manually call setVisible later. @@ -14,17 +13,14 @@ export interface PokedexInfoOverlaySettings { width?: number; /** Determines whether to display the small secondary box */ hideEffectBox?: boolean; - hideBg?: boolean; } const DESC_HEIGHT = 48; -const BORDER = 8; -const GLOBAL_SCALE = 6; export class PokedexInfoOverlay extends Phaser.GameObjects.Container implements InfoToggle { public active = false; - private desc: Phaser.GameObjects.Text; + private desc: ScrollingText; private descScroll: Phaser.Tweens.Tween | null = null; private descBg: Phaser.GameObjects.NineSlice; @@ -35,52 +31,31 @@ export class PokedexInfoOverlay extends Phaser.GameObjects.Container implements private maskPointOriginX: number; private maskPointOriginY: number; - public width: number; constructor(options?: PokedexInfoOverlaySettings) { super(globalScene, options?.x, options?.y); this.setScale(1); this.options = options || {}; + const descBoxX = 0; + const descBoxY = 0; + const width = options?.width || PokedexInfoOverlay.getWidth(); + const descBoxWidth = width; + const descBoxHeight = DESC_HEIGHT; + // prepare the description box - this.width = options?.width || PokedexInfoOverlay.getWidth(); // we always want this to be half a window wide - this.descBg = addWindow(0, 0, this.width, DESC_HEIGHT); - this.descBg.setOrigin(0, 0); - this.add(this.descBg); - - // set up the description; wordWrap uses true pixels, unaffected by any scaling, while other values are affected - this.desc = addTextObject(BORDER, BORDER - 2, "", TextStyle.BATTLE_INFO, { - wordWrap: { width: (this.width - (BORDER - 2) * 2) * GLOBAL_SCALE }, - }); - - // limit the text rendering, required for scrolling later on - this.maskPointOriginX = options?.x || 0; - this.maskPointOriginY = options?.y || 0; - - if (this.maskPointOriginX < 0) { - this.maskPointOriginX += globalScene.scaledCanvas.width; - } - if (this.maskPointOriginY < 0) { - this.maskPointOriginY += globalScene.scaledCanvas.height; - } - - this.textMaskRect = globalScene.make.graphics(); - this.textMaskRect.fillStyle(0xff0000); - this.textMaskRect.fillRect( - this.maskPointOriginX + BORDER, - this.maskPointOriginY + (BORDER - 2), - this.width - BORDER * 2, - DESC_HEIGHT - (BORDER - 2) * 2, + this.desc = new ScrollingText( + globalScene, + descBoxX, + descBoxY, + descBoxWidth, + descBoxHeight, + 3, // maxLineCount + "", // initial content + TextStyle.BATTLE_INFO, ); - this.textMaskRect.setScale(6); - const textMask = this.createGeometryMask(this.textMaskRect); - + this.desc.createMask(globalScene, this.x, this.y); this.add(this.desc); - this.desc.setMask(textMask); - - if (options?.hideBg) { - this.descBg.setVisible(false); - } // hide this component for now this.setVisible(false); @@ -92,45 +67,10 @@ export class PokedexInfoOverlay extends Phaser.GameObjects.Container implements return false; // move infos have been disabled // TODO:: is `false` correct? i used to be `undeefined` } - this.desc.setText(text ?? ""); + this.desc.text.setText(text ?? ""); // stop previous scrolling effects and reset y position - if (this.descScroll) { - this.descScroll.remove(); - this.descScroll = null; - this.desc.y = BORDER - 2; - } - - // determine if we need to add new scrolling effects - const lineCount = Math.floor((this.desc.displayHeight * (96 / 72)) / 14.83); - - const newHeight = lineCount >= 3 ? 48 : lineCount === 2 ? 36 : 24; - this.textMaskRect.clear(); - this.textMaskRect.fillStyle(0xff0000); - this.textMaskRect.fillRect( - this.maskPointOriginX + BORDER, - this.maskPointOriginY + (BORDER - 2) + (48 - newHeight), - this.width - BORDER * 2, - newHeight - (BORDER - 2) * 2, - ); - const updatedMask = this.createGeometryMask(this.textMaskRect); - this.desc.setMask(updatedMask); - - this.descBg.setSize(this.descBg.width, newHeight); - this.descBg.setY(48 - newHeight); - this.desc.setY(BORDER - 2 + (48 - newHeight)); - - if (lineCount > 3) { - // generate scrolling effects - this.descScroll = globalScene.tweens.add({ - targets: this.desc, - delay: fixedInt(2000), - loop: -1, - hold: fixedInt(2000), - duration: fixedInt((lineCount - 3) * 2000), - y: `-=${14.83 * (72 / 96) * (lineCount - 3)}`, - }); - } + this.desc.activate(); if (!this.options.delayVisibility) { this.setVisible(true); diff --git a/src/ui/scrolling-text.ts b/src/ui/scrolling-text.ts index f3b06d21492..9f5eeaaea1c 100644 --- a/src/ui/scrolling-text.ts +++ b/src/ui/scrolling-text.ts @@ -1,47 +1,75 @@ import { globalScene } from "#app/global-scene"; import { fixedInt } from "#app/utils/common"; import type { TextStyle } from "#enums/text-style"; +import i18next from "i18next"; import { addTextObject } from "./text"; +import { addWindow } from "./ui-theme"; /* +This takes various coordinates: +- The x and y coordinates relative to the parent container, this is typical behavior for Phaser.GameObjects.Container. +- The width and height of the box; these are needed to create the background. +The mask is not created right away (although this is possible in principle). Instead, we have a separate function, +which takes as input the _global_ coordinates of the parent. This is necessary to correctly position the mask in the scene. */ +const BORDER = 8; +const DESC_X = BORDER; +const DESC_Y = BORDER - 2; +const SCALE_PROPERTY = 96 / 72 / 14.83; + export default class ScrollingText extends Phaser.GameObjects.Container { + private descBg: Phaser.GameObjects.NineSlice; public text: Phaser.GameObjects.Text; private descScroll: Phaser.Tweens.Tween | null = null; private maxLineCount: number; - private scale_property: number; constructor( scene: Phaser.Scene, x: number, y: number, - globalMaskX: number, - globalMaskY: number, - visibleWidth: number, - visibleHeight: number, + width: number, + height: number, maxLineCount: number, - scale_property: number, content: string, style: TextStyle, - extraStyleOptions?: Phaser.Types.GameObjects.Text.TextStyle, ) { super(scene, x, y); - this.text = addTextObject(0, 0, content, style, extraStyleOptions); + // Adding the background + this.descBg = addWindow(0, 0, width, height); + this.descBg.setOrigin(0, 0); + this.descBg.setVisible(true); + this.add(this.descBg); + + // Adding the text element + const wrapWidth = (width - (DESC_X - 2) * 2) * 6; + + this.text = addTextObject(DESC_X, DESC_Y, content, style, { + wordWrap: { + width: wrapWidth, + }, + }); this.maxLineCount = maxLineCount; - this.scale_property = scale_property; + this.text.setLineSpacing(i18next.resolvedLanguage === "ja" ? 25 : 5); this.add(this.text); + } + + createMask(scene: Phaser.Scene, parentX: number, parentY: number) { + // Adding the mask for the scrolling effect + const visibleX = parentX < 0 ? parentX + globalScene.scaledCanvas.width : parentX; + const visibleY = parentY < 0 ? parentY + globalScene.scaledCanvas.height : parentY; + const globalMaskX = visibleX + this.x + DESC_X; + const globalMaskY = visibleY + this.y + DESC_Y; + + const visibleWidth = this.descBg.width - (BORDER - 2) * 2; + const visibleHeight = this.descBg.height - (BORDER - 2) * 2; const maskGraphics = scene.make.graphics({ x: 0, y: 0 }); - //TODO: Remove, this line is for testing - maskGraphics.fillStyle(0xffffff); maskGraphics.fillRect(globalMaskX, globalMaskY, visibleWidth, visibleHeight); - maskGraphics.setScale(6); scene.add.existing(maskGraphics); - const mask = this.createGeometryMask(maskGraphics); this.text.setMask(mask); } @@ -51,11 +79,11 @@ export default class ScrollingText extends Phaser.GameObjects.Container { if (this.descScroll) { this.descScroll.remove(); this.descScroll = null; - this.text.y = 0; + this.text.y = BORDER - 2; } // determine if we need to add new scrolling effects - const lineCount = Math.floor(this.text.displayHeight * this.scale_property); + const lineCount = Math.floor(this.text.displayHeight * SCALE_PROPERTY); if (lineCount > this.maxLineCount) { // generate scrolling effects @@ -65,8 +93,12 @@ export default class ScrollingText extends Phaser.GameObjects.Container { loop: -1, hold: fixedInt(2000), duration: fixedInt((lineCount - this.maxLineCount) * 2000), - y: `-=${(lineCount - this.maxLineCount) / this.scale_property}`, + y: `-=${(lineCount - this.maxLineCount) / SCALE_PROPERTY}`, }); } } + + hideBg() { + this.descBg.setVisible(false); + } } From c9e2a8a99f0b1bf62210cafcfee675e27b42375d Mon Sep 17 00:00:00 2001 From: Wlowscha <54003515+Wlowscha@users.noreply.github.com> Date: Sun, 17 Aug 2025 16:21:28 +0200 Subject: [PATCH 7/8] Using scrolling text in summary too --- src/ui/move-info-overlay.ts | 5 +- src/ui/pokedex-info-overlay.ts | 1 + src/ui/scrolling-text.ts | 31 +++++----- src/ui/summary-ui-handler.ts | 109 ++++++++++++--------------------- 4 files changed, 58 insertions(+), 88 deletions(-) diff --git a/src/ui/move-info-overlay.ts b/src/ui/move-info-overlay.ts index d65602b5f88..9726f9c5ae3 100644 --- a/src/ui/move-info-overlay.ts +++ b/src/ui/move-info-overlay.ts @@ -75,6 +75,7 @@ export class MoveInfoOverlay extends Phaser.GameObjects.Container implements Inf 3, // maxLineCount "", // initial content TextStyle.BATTLE_INFO, + !options?.hideBg, ); this.desc.createMask(globalScene, this.x, this.y); this.add(this.desc); @@ -129,10 +130,6 @@ export class MoveInfoOverlay extends Phaser.GameObjects.Container implements Inf this.val.setVisible(false); } - if (options?.hideBg) { - this.desc.hideBg(); - } - // hide this component for now this.setVisible(false); } diff --git a/src/ui/pokedex-info-overlay.ts b/src/ui/pokedex-info-overlay.ts index a46b94198df..9bfb531a060 100644 --- a/src/ui/pokedex-info-overlay.ts +++ b/src/ui/pokedex-info-overlay.ts @@ -53,6 +53,7 @@ export class PokedexInfoOverlay extends Phaser.GameObjects.Container implements 3, // maxLineCount "", // initial content TextStyle.BATTLE_INFO, + true, ); this.desc.createMask(globalScene, this.x, this.y); this.add(this.desc); diff --git a/src/ui/scrolling-text.ts b/src/ui/scrolling-text.ts index 9f5eeaaea1c..a76530ae7c5 100644 --- a/src/ui/scrolling-text.ts +++ b/src/ui/scrolling-text.ts @@ -14,8 +14,6 @@ which takes as input the _global_ coordinates of the parent. This is necessary t */ const BORDER = 8; -const DESC_X = BORDER; -const DESC_Y = BORDER - 2; const SCALE_PROPERTY = 96 / 72 / 14.83; export default class ScrollingText extends Phaser.GameObjects.Container { @@ -24,6 +22,9 @@ export default class ScrollingText extends Phaser.GameObjects.Container { private descScroll: Phaser.Tweens.Tween | null = null; private maxLineCount: number; + private offsetX: number; + private offsetY: number; + constructor( scene: Phaser.Scene, x: number, @@ -33,24 +34,29 @@ export default class ScrollingText extends Phaser.GameObjects.Container { maxLineCount: number, content: string, style: TextStyle, + hasBackground = false, ) { super(scene, x, y); + this.offsetX = hasBackground ? BORDER : 0; + this.offsetY = hasBackground ? BORDER - 2 : 0; + // Adding the background this.descBg = addWindow(0, 0, width, height); this.descBg.setOrigin(0, 0); - this.descBg.setVisible(true); + this.descBg.setVisible(hasBackground); this.add(this.descBg); // Adding the text element - const wrapWidth = (width - (DESC_X - 2) * 2) * 6; + const wrapWidth = (width - (this.offsetX - 2) * 2) * 6; - this.text = addTextObject(DESC_X, DESC_Y, content, style, { + this.text = addTextObject(this.offsetX, this.offsetY, content, style, { wordWrap: { width: wrapWidth, }, }); this.maxLineCount = maxLineCount; + // TODO: change this based on which text is being used, etc this.text.setLineSpacing(i18next.resolvedLanguage === "ja" ? 25 : 5); this.add(this.text); } @@ -59,11 +65,11 @@ export default class ScrollingText extends Phaser.GameObjects.Container { // Adding the mask for the scrolling effect const visibleX = parentX < 0 ? parentX + globalScene.scaledCanvas.width : parentX; const visibleY = parentY < 0 ? parentY + globalScene.scaledCanvas.height : parentY; - const globalMaskX = visibleX + this.x + DESC_X; - const globalMaskY = visibleY + this.y + DESC_Y; + const globalMaskX = visibleX + this.x + this.offsetX; + const globalMaskY = visibleY + this.y + this.offsetY; - const visibleWidth = this.descBg.width - (BORDER - 2) * 2; - const visibleHeight = this.descBg.height - (BORDER - 2) * 2; + const visibleWidth = this.descBg.width - (this.offsetX - 2) * 2; + const visibleHeight = this.descBg.height - this.offsetY * 2; const maskGraphics = scene.make.graphics({ x: 0, y: 0 }); maskGraphics.fillRect(globalMaskX, globalMaskY, visibleWidth, visibleHeight); @@ -79,10 +85,11 @@ export default class ScrollingText extends Phaser.GameObjects.Container { if (this.descScroll) { this.descScroll.remove(); this.descScroll = null; - this.text.y = BORDER - 2; + this.text.y = this.offsetY; } // determine if we need to add new scrolling effects + // TODO: The scale property may need to be adjusted based on the height of the font const lineCount = Math.floor(this.text.displayHeight * SCALE_PROPERTY); if (lineCount > this.maxLineCount) { @@ -97,8 +104,4 @@ export default class ScrollingText extends Phaser.GameObjects.Container { }); } } - - hideBg() { - this.descBg.setVisible(false); - } } diff --git a/src/ui/summary-ui-handler.ts b/src/ui/summary-ui-handler.ts index b6ce0a706f8..689f691f62b 100644 --- a/src/ui/summary-ui-handler.ts +++ b/src/ui/summary-ui-handler.ts @@ -40,6 +40,7 @@ import { getEnumValues } from "#utils/enums"; import { toTitleCase } from "#utils/strings"; import { argbFromRgba } from "@material/material-color-utilities"; import i18next from "i18next"; +import ScrollingText from "./scrolling-text"; enum Page { PROFILE, @@ -61,7 +62,7 @@ interface abilityContainer { /** The text object displaying the name of the ability */ nameText: Phaser.GameObjects.Text | null; /** The text object displaying the description of the ability */ - descriptionText: Phaser.GameObjects.Text | null; + description: ScrollingText | null; } export class SummaryUiHandler extends UiHandler { @@ -94,7 +95,7 @@ export class SummaryUiHandler extends UiHandler { private passiveContainer: abilityContainer; private summaryPageContainer: Phaser.GameObjects.Container; private movesContainer: Phaser.GameObjects.Container; - private moveDescriptionText: Phaser.GameObjects.Text; + private moveDescription: ScrollingText; private moveCursorObj: Phaser.GameObjects.Sprite | null; private selectedMoveCursorObj: Phaser.GameObjects.Sprite | null; private moveRowsContainer: Phaser.GameObjects.Container; @@ -583,12 +584,12 @@ export class SummaryUiHandler extends UiHandler { } else if (this.cursor === Page.PROFILE && this.pokemon?.hasPassive()) { // if we're on the PROFILE page and this pokemon has a passive unlocked.. // Since abilities are displayed by default, all we need to do is toggle visibility on all elements to show passives - this.abilityContainer.nameText?.setVisible(!this.abilityContainer.descriptionText?.visible); - this.abilityContainer.descriptionText?.setVisible(!this.abilityContainer.descriptionText.visible); + this.abilityContainer.nameText?.setVisible(!this.abilityContainer.description?.visible); + this.abilityContainer.description?.setVisible(!this.abilityContainer.description.visible); this.abilityContainer.labelImage.setVisible(!this.abilityContainer.labelImage.visible); - this.passiveContainer.nameText?.setVisible(!this.passiveContainer.descriptionText?.visible); - this.passiveContainer.descriptionText?.setVisible(!this.passiveContainer.descriptionText.visible); + this.passiveContainer.nameText?.setVisible(!this.passiveContainer.description?.visible); + this.passiveContainer.description?.setVisible(!this.passiveContainer.description.visible); this.passiveContainer.labelImage.setVisible(!this.passiveContainer.labelImage.visible); } else if (this.cursor === Page.STATS) { //Show IVs @@ -668,7 +669,6 @@ export class SummaryUiHandler extends UiHandler { const selectedMove = this.getSelectedMove(); if (selectedMove) { - this.moveDescriptionText.setY(84); this.movePowerText.setText(selectedMove.power >= 0 ? selectedMove.power.toString() : "---"); this.moveAccuracyText.setText(selectedMove.accuracy >= 0 ? selectedMove.accuracy.toString() : "---"); this.moveCategoryIcon.setFrame(MoveCategory[selectedMove.category].toLowerCase()); @@ -677,24 +677,9 @@ export class SummaryUiHandler extends UiHandler { this.hideMoveEffect(); } - this.moveDescriptionText.setText(selectedMove?.effect || ""); - const moveDescriptionLineCount = Math.floor(this.moveDescriptionText.displayHeight / 14.83); + this.moveDescription.text.setText(selectedMove?.effect || ""); - if (this.descriptionScrollTween) { - this.descriptionScrollTween.remove(); - this.descriptionScrollTween = null; - } - - if (moveDescriptionLineCount > 3) { - this.descriptionScrollTween = globalScene.tweens.add({ - targets: this.moveDescriptionText, - delay: fixedInt(2000), - loop: -1, - hold: fixedInt(2000), - duration: fixedInt((moveDescriptionLineCount - 3) * 2000), - y: `-=${14.83 * (moveDescriptionLineCount - 3)}`, - }); - } + this.moveDescription.activate(); if (!this.moveCursorObj) { this.moveCursorObj = globalScene.add.sprite(-2, 0, "summary_moves_cursor", "highlight"); @@ -888,7 +873,7 @@ export class SummaryUiHandler extends UiHandler { labelImage: globalScene.add.image(0, 0, "summary_profile_ability"), ability: this.pokemon?.getAbility(true)!, // TODO: is this bang correct? nameText: null, - descriptionText: null, + description: null, }; const allAbilityInfo = [this.abilityContainer]; // Creates an array to iterate through @@ -898,7 +883,7 @@ export class SummaryUiHandler extends UiHandler { labelImage: globalScene.add.image(0, 0, "summary_profile_passive"), ability: this.pokemon.getPassiveAbility(), nameText: null, - descriptionText: null, + description: null, }; allAbilityInfo.push(this.passiveContainer); @@ -924,42 +909,26 @@ export class SummaryUiHandler extends UiHandler { abilityInfo.nameText.setOrigin(0, 1); profileContainer.add(abilityInfo.nameText); - abilityInfo.descriptionText = addTextObject(7, 71, abilityInfo.ability?.description!, TextStyle.WINDOW_ALT, { - wordWrap: { width: 1224 }, - }); // TODO: is this bang correct? - abilityInfo.descriptionText.setOrigin(0, 0); - profileContainer.add(abilityInfo.descriptionText); + abilityInfo.description = new ScrollingText( + globalScene, + 7, + 71, + 206, + 31, + 2, // maxLineCount + abilityInfo.ability?.description!, // initial content + TextStyle.WINDOW_ALT, + ); + abilityInfo.description.createMask(globalScene, 110 - 7, 90.5 - 71); + profileContainer.add(abilityInfo.description); - // Sets up the mask that hides the description text to give an illusion of scrolling - const descriptionTextMaskRect = globalScene.make.graphics({}); - descriptionTextMaskRect.setScale(6); - descriptionTextMaskRect.fillStyle(0xffffff); - descriptionTextMaskRect.beginPath(); - descriptionTextMaskRect.fillRect(110, 90.5, 206, 31); - - const abilityDescriptionTextMask = descriptionTextMaskRect.createGeometryMask(); - - abilityInfo.descriptionText.setMask(abilityDescriptionTextMask); - - const abilityDescriptionLineCount = Math.floor(abilityInfo.descriptionText.displayHeight / 14.83); - - // Animates the description text moving upwards - if (abilityDescriptionLineCount > 2) { - abilityInfo.descriptionText.setY(69); - this.descriptionScrollTween = globalScene.tweens.add({ - targets: abilityInfo.descriptionText, - delay: fixedInt(2000), - loop: -1, - hold: fixedInt(2000), - duration: fixedInt((abilityDescriptionLineCount - 2) * 2000), - y: `-=${14.83 * (abilityDescriptionLineCount - 2)}`, - }); - } + abilityInfo.description.activate(); }); + // Turn off visibility of passive info by default this.passiveContainer?.labelImage.setVisible(false); this.passiveContainer?.nameText?.setVisible(false); - this.passiveContainer?.descriptionText?.setVisible(false); + this.passiveContainer?.description?.setVisible(false); const closeFragment = getBBCodeFrag("", TextStyle.WINDOW_ALT); const rawNature = toTitleCase(Nature[this.pokemon?.getNature()!]); // TODO: is this bang correct? @@ -1182,18 +1151,18 @@ export class SummaryUiHandler extends UiHandler { moveRowContainer.add(ppText); } - this.moveDescriptionText = addTextObject(2, 84, "", TextStyle.WINDOW_ALT, { wordWrap: { width: 1212 } }); - this.movesContainer.add(this.moveDescriptionText); - - const moveDescriptionTextMaskRect = globalScene.make.graphics({}); - moveDescriptionTextMaskRect.setScale(6); - moveDescriptionTextMaskRect.fillStyle(0xffffff); - moveDescriptionTextMaskRect.beginPath(); - moveDescriptionTextMaskRect.fillRect(112, 130, 202, 46); - - const moveDescriptionTextMask = moveDescriptionTextMaskRect.createGeometryMask(); - - this.moveDescriptionText.setMask(moveDescriptionTextMask); + this.moveDescription = new ScrollingText( + globalScene, + 2, + 84, + 202, + 46, + 3, // maxLineCount + "", // initial content + TextStyle.WINDOW_ALT, + ); + this.moveDescription.createMask(globalScene, 112 - 2, 130 - 84); + this.movesContainer.add(this.moveDescription); break; } } @@ -1255,7 +1224,7 @@ export class SummaryUiHandler extends UiHandler { this.moveSelect = false; this.extraMoveRowContainer.setVisible(false); - this.moveDescriptionText.setText(""); + this.moveDescription.text.setText(""); this.destroyBlinkCursor(); this.hideMoveEffect(); From 2787f2e26c0bb69e90ccd5eef4ec53af72ed17ae Mon Sep 17 00:00:00 2001 From: Wlowscha <54003515+Wlowscha@users.noreply.github.com> Date: Sun, 17 Aug 2025 16:42:02 +0200 Subject: [PATCH 8/8] Using global coordinate directly --- src/ui/move-info-overlay.ts | 2 +- src/ui/pokedex-info-overlay.ts | 2 +- src/ui/scrolling-text.ts | 10 ++++------ src/ui/summary-ui-handler.ts | 4 ++-- 4 files changed, 8 insertions(+), 10 deletions(-) diff --git a/src/ui/move-info-overlay.ts b/src/ui/move-info-overlay.ts index 9726f9c5ae3..e8bc561026e 100644 --- a/src/ui/move-info-overlay.ts +++ b/src/ui/move-info-overlay.ts @@ -77,7 +77,7 @@ export class MoveInfoOverlay extends Phaser.GameObjects.Container implements Inf TextStyle.BATTLE_INFO, !options?.hideBg, ); - this.desc.createMask(globalScene, this.x, this.y); + this.desc.createMask(globalScene, this.x + this.desc.x, this.y + this.desc.y); this.add(this.desc); // prepare the effect box diff --git a/src/ui/pokedex-info-overlay.ts b/src/ui/pokedex-info-overlay.ts index 9bfb531a060..8f6d5398cb6 100644 --- a/src/ui/pokedex-info-overlay.ts +++ b/src/ui/pokedex-info-overlay.ts @@ -55,7 +55,7 @@ export class PokedexInfoOverlay extends Phaser.GameObjects.Container implements TextStyle.BATTLE_INFO, true, ); - this.desc.createMask(globalScene, this.x, this.y); + this.desc.createMask(globalScene, this.x + this.desc.x, this.y + this.desc.y); this.add(this.desc); // hide this component for now diff --git a/src/ui/scrolling-text.ts b/src/ui/scrolling-text.ts index a76530ae7c5..16f8dedadea 100644 --- a/src/ui/scrolling-text.ts +++ b/src/ui/scrolling-text.ts @@ -10,7 +10,7 @@ This takes various coordinates: - The x and y coordinates relative to the parent container, this is typical behavior for Phaser.GameObjects.Container. - The width and height of the box; these are needed to create the background. The mask is not created right away (although this is possible in principle). Instead, we have a separate function, -which takes as input the _global_ coordinates of the parent. This is necessary to correctly position the mask in the scene. +which takes as input the _global_ coordinates of scrolling text object. This is necessary to correctly position the mask in the scene. */ const BORDER = 8; @@ -61,12 +61,10 @@ export default class ScrollingText extends Phaser.GameObjects.Container { this.add(this.text); } - createMask(scene: Phaser.Scene, parentX: number, parentY: number) { + createMask(scene: Phaser.Scene, globalX: number, globalY: number) { // Adding the mask for the scrolling effect - const visibleX = parentX < 0 ? parentX + globalScene.scaledCanvas.width : parentX; - const visibleY = parentY < 0 ? parentY + globalScene.scaledCanvas.height : parentY; - const globalMaskX = visibleX + this.x + this.offsetX; - const globalMaskY = visibleY + this.y + this.offsetY; + const globalMaskX = globalX + this.offsetX; + const globalMaskY = globalY + this.offsetY; const visibleWidth = this.descBg.width - (this.offsetX - 2) * 2; const visibleHeight = this.descBg.height - this.offsetY * 2; diff --git a/src/ui/summary-ui-handler.ts b/src/ui/summary-ui-handler.ts index 689f691f62b..31549efc4c6 100644 --- a/src/ui/summary-ui-handler.ts +++ b/src/ui/summary-ui-handler.ts @@ -919,7 +919,7 @@ export class SummaryUiHandler extends UiHandler { abilityInfo.ability?.description!, // initial content TextStyle.WINDOW_ALT, ); - abilityInfo.description.createMask(globalScene, 110 - 7, 90.5 - 71); + abilityInfo.description.createMask(globalScene, 110, 90.5); profileContainer.add(abilityInfo.description); abilityInfo.description.activate(); @@ -1161,7 +1161,7 @@ export class SummaryUiHandler extends UiHandler { "", // initial content TextStyle.WINDOW_ALT, ); - this.moveDescription.createMask(globalScene, 112 - 2, 130 - 84); + this.moveDescription.createMask(globalScene, 112, 130); this.movesContainer.add(this.moveDescription); break; }