diff --git a/src/battle-scene.ts b/src/battle-scene.ts index 8c8906be2b0..ea15969ce61 100644 --- a/src/battle-scene.ts +++ b/src/battle-scene.ts @@ -478,8 +478,8 @@ export class BattleScene extends SceneBase { this.uiContainer = uiContainer; - const overlayWidth = this.game.canvas.width / 6; - const overlayHeight = this.game.canvas.height / 6 - 48; + const overlayWidth = this.scaledCanvas.width; + const overlayHeight = this.scaledCanvas.height - 48; this.fieldOverlay = this.add.rectangle(0, overlayHeight * -1 - 48, overlayWidth, overlayHeight, 0x424242); this.fieldOverlay.setName("rect-field-overlay"); this.fieldOverlay.setOrigin(0, 0); @@ -537,34 +537,29 @@ export class BattleScene extends SceneBase { this.candyBar.setup(); this.fieldUI.add(this.candyBar); - this.biomeWaveText = addTextObject( - this.game.canvas.width / 6 - 2, - 0, - startingWave.toString(), - TextStyle.BATTLE_INFO, - ); + this.biomeWaveText = addTextObject(this.scaledCanvas.width - 2, 0, startingWave.toString(), TextStyle.BATTLE_INFO); this.biomeWaveText.setName("text-biome-wave"); this.biomeWaveText.setOrigin(1, 0.5); this.fieldUI.add(this.biomeWaveText); - this.moneyText = addTextObject(this.game.canvas.width / 6 - 2, 0, "", TextStyle.MONEY); + this.moneyText = addTextObject(this.scaledCanvas.width - 2, 0, "", TextStyle.MONEY); this.moneyText.setName("text-money"); this.moneyText.setOrigin(1, 0.5); this.fieldUI.add(this.moneyText); - this.scoreText = addTextObject(this.game.canvas.width / 6 - 2, 0, "", TextStyle.PARTY, { fontSize: "54px" }); + this.scoreText = addTextObject(this.scaledCanvas.width - 2, 0, "", TextStyle.PARTY, { fontSize: "54px" }); this.scoreText.setName("text-score"); this.scoreText.setOrigin(1, 0.5); this.fieldUI.add(this.scoreText); - this.luckText = addTextObject(this.game.canvas.width / 6 - 2, 0, "", TextStyle.PARTY, { fontSize: "54px" }); + this.luckText = addTextObject(this.scaledCanvas.width - 2, 0, "", TextStyle.PARTY, { fontSize: "54px" }); this.luckText.setName("text-luck"); this.luckText.setOrigin(1, 0.5); this.luckText.setVisible(false); this.fieldUI.add(this.luckText); this.luckLabelText = addTextObject( - this.game.canvas.width / 6 - 2, + this.scaledCanvas.width - 2, 0, i18next.t("common:luckIndicator"), TextStyle.PARTY, @@ -586,10 +581,7 @@ export class BattleScene extends SceneBase { this.spriteSparkleHandler = new PokemonSpriteSparkleHandler(); this.spriteSparkleHandler.setup(); - this.pokemonInfoContainer = new PokemonInfoContainer( - this.game.canvas.width / 6 + 52, - -(this.game.canvas.height / 6) + 66, - ); + this.pokemonInfoContainer = new PokemonInfoContainer(this.scaledCanvas.width + 52, -this.scaledCanvas.height + 66); this.pokemonInfoContainer.setup(); this.fieldUI.add(this.pokemonInfoContainer); @@ -2054,7 +2046,7 @@ export class BattleScene extends SceneBase { } else { this.luckText.setTint(0xffef5c, 0x47ff69, 0x6b6bff, 0xff6969); } - this.luckLabelText.setX(this.game.canvas.width / 6 - 2 - (this.luckText.displayWidth + 2)); + this.luckLabelText.setX(this.scaledCanvas.width - 2 - (this.luckText.displayWidth + 2)); this.tweens.add({ targets: labels, duration: duration, @@ -2088,7 +2080,7 @@ export class BattleScene extends SceneBase { const enemyModifierCount = this.enemyModifiers.filter(m => m.isIconVisible()).length; const biomeWaveTextHeight = this.biomeWaveText.getBottomLeft().y - this.biomeWaveText.getTopLeft().y; this.biomeWaveText.setY( - -(this.game.canvas.height / 6) + + -this.scaledCanvas.height + (enemyModifierCount ? (enemyModifierCount <= 12 ? 15 : 24) : 0) + biomeWaveTextHeight / 2, ); @@ -2100,7 +2092,7 @@ export class BattleScene extends SceneBase { const offsetY = (this.scoreText.visible ? this.scoreText : this.moneyText).y + 15; this.partyExpBar.setY(offsetY); this.candyBar.setY(offsetY + 15); - this.ui?.achvBar.setY(this.game.canvas.height / 6 + offsetY); + this.ui?.achvBar.setY(this.scaledCanvas.height + offsetY); } /** diff --git a/src/data/mystery-encounters/encounters/bug-type-superfan-encounter.ts b/src/data/mystery-encounters/encounters/bug-type-superfan-encounter.ts index d60ebe690ac..d86f1511207 100644 --- a/src/data/mystery-encounters/encounters/bug-type-superfan-encounter.ts +++ b/src/data/mystery-encounters/encounters/bug-type-superfan-encounter.ts @@ -715,15 +715,13 @@ function doBugTypeMoveTutor(): Promise { const moveOptions = globalScene.currentBattle.mysteryEncounter!.misc.moveTutorOptions; await showEncounterDialogue(`${namespace}:battle_won`, `${namespace}:speaker`); - const overlayScale = 1; const moveInfoOverlay = new MoveInfoOverlay({ delayVisibility: false, - scale: overlayScale, onSide: true, right: true, x: 1, - y: -MoveInfoOverlay.getHeight(overlayScale, true) - 1, - width: globalScene.game.canvas.width / 6 - 2, + y: -MoveInfoOverlay.getHeight(true) - 1, + width: globalScene.scaledCanvas.width - 2, }); globalScene.ui.add(moveInfoOverlay); diff --git a/src/data/mystery-encounters/encounters/global-trade-system-encounter.ts b/src/data/mystery-encounters/encounters/global-trade-system-encounter.ts index 347092fe0b4..083a6d06801 100644 --- a/src/data/mystery-encounters/encounters/global-trade-system-encounter.ts +++ b/src/data/mystery-encounters/encounters/global-trade-system-encounter.ts @@ -564,14 +564,14 @@ function generateTradeOption(alreadyUsedSpecies: PokemonSpecies[], originalBst?: function showTradeBackground() { return new Promise(resolve => { - const tradeContainer = globalScene.add.container(0, -globalScene.game.canvas.height / 6); + const tradeContainer = globalScene.add.container(0, -globalScene.scaledCanvas.height); tradeContainer.setName("Trade Background"); const flyByStaticBg = globalScene.add.rectangle( 0, 0, - globalScene.game.canvas.width / 6, - globalScene.game.canvas.height / 6, + globalScene.scaledCanvas.width, + globalScene.scaledCanvas.height, 0, ); flyByStaticBg.setName("Black Background"); diff --git a/src/data/mystery-encounters/encounters/weird-dream-encounter.ts b/src/data/mystery-encounters/encounters/weird-dream-encounter.ts index 1164d2ca7ca..ca385472414 100644 --- a/src/data/mystery-encounters/encounters/weird-dream-encounter.ts +++ b/src/data/mystery-encounters/encounters/weird-dream-encounter.ts @@ -648,15 +648,15 @@ function getTransformedSpecies( } function doShowDreamBackground() { - const transformationContainer = globalScene.add.container(0, -globalScene.game.canvas.height / 6); + const transformationContainer = globalScene.add.container(0, -globalScene.scaledCanvas.height); transformationContainer.name = "Dream Background"; // In case it takes a bit for video to load const transformationStaticBg = globalScene.add.rectangle( 0, 0, - globalScene.game.canvas.width / 6, - globalScene.game.canvas.height / 6, + globalScene.scaledCanvas.width, + globalScene.scaledCanvas.height, 0, ); transformationStaticBg.setName("Black Background"); diff --git a/src/field/damage-number-handler.ts b/src/field/damage-number-handler.ts index 1bbacc19566..112b08631b0 100644 --- a/src/field/damage-number-handler.ts +++ b/src/field/damage-number-handler.ts @@ -30,7 +30,7 @@ export class DamageNumberHandler { const baseScale = target.getSpriteScale() / 6; const damageNumber = addTextObject( target.x, - -(globalScene.game.canvas.height / 6) + target.y - target.getSprite().height / 2, + -globalScene.scaledCanvas.height + target.y - target.getSprite().height / 2, formatStat(amount, true), TextStyle.SUMMARY, ); diff --git a/src/phases/egg-hatch-phase.ts b/src/phases/egg-hatch-phase.ts index 94923ae8c1f..e9d28e0fe2a 100644 --- a/src/phases/egg-hatch-phase.ts +++ b/src/phases/egg-hatch-phase.ts @@ -148,9 +148,9 @@ export class EggHatchPhase extends Phase { this.eggHatchOverlay = globalScene.add.rectangle( 0, - -globalScene.game.canvas.height / 6, - globalScene.game.canvas.width / 6, - globalScene.game.canvas.height / 6, + -globalScene.scaledCanvas.height, + globalScene.scaledCanvas.width, + globalScene.scaledCanvas.height, 0xffffff, ); this.eggHatchOverlay.setOrigin(0, 0); diff --git a/src/phases/end-card-phase.ts b/src/phases/end-card-phase.ts index b9b383db13d..5ce0ca47b99 100644 --- a/src/phases/end-card-phase.ts +++ b/src/phases/end-card-phase.ts @@ -25,8 +25,8 @@ export class EndCardPhase extends Phase { globalScene.field.add(this.endCard); this.text = addTextObject( - globalScene.game.canvas.width / 12, - globalScene.game.canvas.height / 6 - 16, + globalScene.scaledCanvas.width / 2, + globalScene.scaledCanvas.height - 16, i18next.t("battle:congratulations"), TextStyle.SUMMARY, { fontSize: "128px" }, diff --git a/src/phases/evolution-phase.ts b/src/phases/evolution-phase.ts index cad79455af3..ad3db97d520 100644 --- a/src/phases/evolution-phase.ts +++ b/src/phases/evolution-phase.ts @@ -90,16 +90,16 @@ export class EvolutionPhase extends Phase { .setVisible(false); this.evolutionBgOverlay = globalScene.add - .rectangle(0, 0, globalScene.game.canvas.width / 6, globalScene.game.canvas.height / 6, 0x262626) + .rectangle(0, 0, globalScene.scaledCanvas.width, globalScene.scaledCanvas.height, 0x262626) .setOrigin(0) .setAlpha(0); this.evolutionContainer.add([this.evolutionBaseBg, this.evolutionBgOverlay, this.evolutionBg]); this.evolutionOverlay = globalScene.add.rectangle( 0, - -globalScene.game.canvas.height / 6, - globalScene.game.canvas.width / 6, - globalScene.game.canvas.height / 6 - 48, + -globalScene.scaledCanvas.height, + globalScene.scaledCanvas.width, + globalScene.scaledCanvas.height - 48, 0xffffff, ); this.evolutionOverlay.setOrigin(0).setAlpha(0); diff --git a/src/timed-event-manager.ts b/src/timed-event-manager.ts index 9877f298404..9e711735e7f 100644 --- a/src/timed-event-manager.ts +++ b/src/timed-event-manager.ts @@ -653,7 +653,7 @@ export class TimedEventDisplay extends Phaser.GameObjects.Container { console.log(this.event.bannerKey); const padding = 5; const showTimer = this.event.eventType !== EventType.NO_TIMER_DISPLAY; - const yPosition = globalScene.game.canvas.height / 6 - padding - (showTimer ? 10 : 0) - (this.event.yOffset ?? 0); + const yPosition = globalScene.scaledCanvas.height - padding - (showTimer ? 10 : 0) - (this.event.yOffset ?? 0); this.banner = new Phaser.GameObjects.Image(globalScene, this.availableWidth / 2, yPosition - padding, key); this.banner.setName("img-event-banner"); this.banner.setOrigin(0.5, 1); diff --git a/src/ui/abstact-option-select-ui-handler.ts b/src/ui/abstact-option-select-ui-handler.ts index 2fb0159b6ef..b7279bc2d30 100644 --- a/src/ui/abstact-option-select-ui-handler.ts +++ b/src/ui/abstact-option-select-ui-handler.ts @@ -66,7 +66,7 @@ export abstract class AbstractOptionSelectUiHandler extends UiHandler { setup() { const ui = this.getUi(); - this.optionSelectContainer = globalScene.add.container(globalScene.game.canvas.width / 6 - 1, -48); + this.optionSelectContainer = globalScene.add.container(globalScene.scaledCanvas.width - 1, -48); this.optionSelectContainer.setName(`option-select-${this.mode ? UiMode[this.mode] : "UNKNOWN"}`); this.optionSelectContainer.setVisible(false); ui.add(this.optionSelectContainer); @@ -135,7 +135,7 @@ export abstract class AbstractOptionSelectUiHandler extends UiHandler { this.optionSelectText.setName("text-option-select"); this.optionSelectTextContainer.add(this.optionSelectText); this.optionSelectContainer.setPosition( - globalScene.game.canvas.width / 6 - 1 - (this.config?.xOffset || 0), + globalScene.scaledCanvas.width - 1 - (this.config?.xOffset || 0), -48 + (this.config?.yOffset || 0), ); this.optionSelectBg.width = Math.max(this.optionSelectText.displayWidth + 24, this.getWindowWidth()); diff --git a/src/ui/achv-bar.ts b/src/ui/achv-bar.ts index bb1ef95c9de..0f71bcbfde0 100644 --- a/src/ui/achv-bar.ts +++ b/src/ui/achv-bar.ts @@ -21,7 +21,7 @@ export class AchvBar extends Phaser.GameObjects.Container { public shown: boolean; constructor() { - super(globalScene, globalScene.game.canvas.width / 6, 0); + super(globalScene, globalScene.scaledCanvas.width, 0); this.playerGender = globalScene.gameData.gender; } @@ -118,7 +118,7 @@ export class AchvBar extends Phaser.GameObjects.Container { globalScene.tweens.add({ targets: this, - x: globalScene.game.canvas.width / 6 - this.bg.width / 2, + x: globalScene.scaledCanvas.width - this.bg.width / 2, duration: 500, ease: "Sine.easeOut", }); @@ -136,7 +136,7 @@ export class AchvBar extends Phaser.GameObjects.Container { globalScene.tweens.add({ targets: this, - x: globalScene.game.canvas.width / 6, + x: globalScene.scaledCanvas.width, duration: 500, ease: "Sine.easeIn", onComplete: () => { diff --git a/src/ui/achvs-ui-handler.ts b/src/ui/achvs-ui-handler.ts index 01fd1d45a61..2c04e24e0f2 100644 --- a/src/ui/achvs-ui-handler.ts +++ b/src/ui/achvs-ui-handler.ts @@ -72,9 +72,9 @@ export class AchvsUiHandler extends MessageUiHandler { const ui = this.getUi(); /** Width of the global canvas / 6 */ - const WIDTH = globalScene.game.canvas.width / 6; + const WIDTH = globalScene.scaledCanvas.width; /** Height of the global canvas / 6 */ - const HEIGHT = globalScene.game.canvas.height / 6; + const HEIGHT = globalScene.scaledCanvas.height; this.mainContainer = globalScene.add.container(1, -HEIGHT + 1); diff --git a/src/ui/ball-ui-handler.ts b/src/ui/ball-ui-handler.ts index 67beb0eba84..99dabd893df 100644 --- a/src/ui/ball-ui-handler.ts +++ b/src/ui/ball-ui-handler.ts @@ -37,7 +37,7 @@ export class BallUiHandler extends UiHandler { const optionsText = addTextObject(0, 0, optionsTextContent, TextStyle.WINDOW, { align: "right", maxLines: 6 }); const optionsTextWidth = optionsText.displayWidth; this.pokeballSelectContainer = globalScene.add.container( - globalScene.game.canvas.width / 6 - 51 - Math.max(64, optionsTextWidth), + globalScene.scaledCanvas.width - 51 - Math.max(64, optionsTextWidth), -49, ); this.pokeballSelectContainer.setVisible(false); diff --git a/src/ui/base-stats-overlay.ts b/src/ui/base-stats-overlay.ts index e3ba472475a..3b432e13096 100644 --- a/src/ui/base-stats-overlay.ts +++ b/src/ui/base-stats-overlay.ts @@ -16,7 +16,6 @@ interface BaseStatsOverlaySettings { const HEIGHT = 120; const BORDER = 8; -const GLOBAL_SCALE = 6; const shortStats = ["HP", "ATK", "DEF", "SPATK", "SPDEF", "SPD"]; export class BaseStatsOverlay extends Phaser.GameObjects.Container implements InfoToggle { @@ -109,7 +108,7 @@ export class BaseStatsOverlay extends Phaser.GameObjects.Container implements In // width of this element static getWidth(_scale: number): number { - return globalScene.game.canvas.width / GLOBAL_SCALE / 2; + return globalScene.scaledCanvas.width / 2; } // height of this element diff --git a/src/ui/battle-info/player-battle-info.ts b/src/ui/battle-info/player-battle-info.ts index 62a2eddecb9..8784495e6d2 100644 --- a/src/ui/battle-info/player-battle-info.ts +++ b/src/ui/battle-info/player-battle-info.ts @@ -39,7 +39,7 @@ export class PlayerBattleInfo extends BattleInfo { statOverflow: 1, }, }; - super(Math.floor(globalScene.game.canvas.width / 6) - 10, -72, true, posParams); + super(Math.floor(globalScene.scaledCanvas.width) - 10, -72, true, posParams); this.hpNumbersContainer = globalScene.add.container(-15, 10).setName("container_hp"); diff --git a/src/ui/battle-message-ui-handler.ts b/src/ui/battle-message-ui-handler.ts index b58897b9022..2ecca06172b 100644 --- a/src/ui/battle-message-ui-handler.ts +++ b/src/ui/battle-message-ui-handler.ts @@ -94,7 +94,7 @@ export class BattleMessageUiHandler extends MessageUiHandler { this.levelUpStatsContainer = levelUpStatsContainer; - const levelUpStatsLabelsContent = addTextObject(globalScene.game.canvas.width / 6 - 73, -94, "", TextStyle.WINDOW, { + const levelUpStatsLabelsContent = addTextObject(globalScene.scaledCanvas.width - 73, -94, "", TextStyle.WINDOW, { maxLines: 6, }); let levelUpStatsLabelText = ""; @@ -106,7 +106,7 @@ export class BattleMessageUiHandler extends MessageUiHandler { levelUpStatsLabelsContent.x -= levelUpStatsLabelsContent.displayWidth; const levelUpStatsBg = addWindow( - globalScene.game.canvas.width / 6, + globalScene.scaledCanvas.width, -100, 80 + levelUpStatsLabelsContent.displayWidth, 100, @@ -117,7 +117,7 @@ export class BattleMessageUiHandler extends MessageUiHandler { levelUpStatsContainer.add(levelUpStatsLabelsContent); const levelUpStatsIncrContent = addTextObject( - globalScene.game.canvas.width / 6 - 50, + globalScene.scaledCanvas.width - 50, -94, "+\n+\n+\n+\n+\n+", TextStyle.WINDOW, @@ -128,7 +128,7 @@ export class BattleMessageUiHandler extends MessageUiHandler { this.levelUpStatsIncrContent = levelUpStatsIncrContent; const levelUpStatsValuesContent = addBBCodeTextObject( - globalScene.game.canvas.width / 6 - 7, + globalScene.scaledCanvas.width - 7, -94, "", TextStyle.WINDOW, diff --git a/src/ui/candy-bar.ts b/src/ui/candy-bar.ts index 239b963227b..b29ac3ec520 100644 --- a/src/ui/candy-bar.ts +++ b/src/ui/candy-bar.ts @@ -19,7 +19,7 @@ export class CandyBar extends Phaser.GameObjects.Container { public shown: boolean; constructor() { - super(globalScene, globalScene.game.canvas.width / 6, -(globalScene.game.canvas.height / 6) + 15); + super(globalScene, globalScene.scaledCanvas.width, -globalScene.scaledCanvas.height + 15); } setup(): void { @@ -80,7 +80,7 @@ export class CandyBar extends Phaser.GameObjects.Container { this.tween = globalScene.tweens.add({ targets: this, - x: globalScene.game.canvas.width / 6 - (this.bg.width - 5), + x: globalScene.scaledCanvas.width - (this.bg.width - 5), duration: 500, ease: "Sine.easeOut", onComplete: () => { @@ -111,7 +111,7 @@ export class CandyBar extends Phaser.GameObjects.Container { this.tween = globalScene.tweens.add({ targets: this, - x: globalScene.game.canvas.width / 6, + x: globalScene.scaledCanvas.width, duration: 500, ease: "Sine.easeIn", onComplete: () => { diff --git a/src/ui/challenges-select-ui-handler.ts b/src/ui/challenges-select-ui-handler.ts index 4a7ab7641a3..b37ddcc6a5f 100644 --- a/src/ui/challenges-select-ui-handler.ts +++ b/src/ui/challenges-select-ui-handler.ts @@ -58,11 +58,11 @@ export class GameChallengesUiHandler extends UiHandler { this.widestTextBox = 0; - this.challengesContainer = globalScene.add.container(1, -(globalScene.game.canvas.height / 6) + 1); + this.challengesContainer = globalScene.add.container(1, -globalScene.scaledCanvas.height + 1); this.challengesContainer.setName("challenges"); this.challengesContainer.setInteractive( - new Phaser.Geom.Rectangle(0, 0, globalScene.game.canvas.width / 6, globalScene.game.canvas.height / 6), + new Phaser.Geom.Rectangle(0, 0, globalScene.scaledCanvas.width, globalScene.scaledCanvas.height), Phaser.Geom.Rectangle.Contains, ); @@ -79,7 +79,7 @@ export class GameChallengesUiHandler extends UiHandler { this.challengesContainer.add(bgOverlay); // TODO: Change this back to /9 when adding in difficulty - const headerBg = addWindow(0, 0, globalScene.game.canvas.width / 6, 24); + const headerBg = addWindow(0, 0, globalScene.scaledCanvas.width, 24); headerBg.setName("window-header-bg"); headerBg.setOrigin(0, 0); diff --git a/src/ui/char-sprite.ts b/src/ui/char-sprite.ts index 381421086ff..1ab00291ff6 100644 --- a/src/ui/char-sprite.ts +++ b/src/ui/char-sprite.ts @@ -10,7 +10,7 @@ export class CharSprite extends Phaser.GameObjects.Container { public shown: boolean; constructor() { - super(globalScene, globalScene.game.canvas.width / 6 + 32, -42); + super(globalScene, globalScene.scaledCanvas.width + 32, -42); } setup(): void { @@ -49,7 +49,7 @@ export class CharSprite extends Phaser.GameObjects.Container { globalScene.tweens.add({ targets: this, - x: globalScene.game.canvas.width / 6 - 102, + x: globalScene.scaledCanvas.width - 102, duration: 750, ease: "Cubic.easeOut", onComplete: () => { @@ -95,7 +95,7 @@ export class CharSprite extends Phaser.GameObjects.Container { globalScene.tweens.add({ targets: this, - x: globalScene.game.canvas.width / 6 + 32, + x: globalScene.scaledCanvas.width + 32, duration: 750, ease: "Cubic.easeIn", onComplete: () => { diff --git a/src/ui/confirm-ui-handler.ts b/src/ui/confirm-ui-handler.ts index b2f35931278..aeef7fc1c91 100644 --- a/src/ui/confirm-ui-handler.ts +++ b/src/ui/confirm-ui-handler.ts @@ -69,7 +69,7 @@ export class ConfirmUiHandler extends AbstractOptionSelectUiHandler { const xOffset = args.length >= 7 && args[6] !== null ? (args[6] as number) : 0; const yOffset = args.length >= 8 && args[7] !== null ? (args[7] as number) : 0; - this.optionSelectContainer.setPosition(globalScene.game.canvas.width / 6 - 1 + xOffset, -48 + yOffset); + this.optionSelectContainer.setPosition(globalScene.scaledCanvas.width - 1 + xOffset, -48 + yOffset); this.setCursor(this.switchCheck ? this.switchCheckCursor : 0); return true; @@ -103,7 +103,7 @@ export class ConfirmUiHandler extends AbstractOptionSelectUiHandler { const xOffset = args.length >= 4 && args[3] !== null ? (args[3] as number) : 0; const yOffset = args.length >= 5 && args[4] !== null ? (args[4] as number) : 0; - this.optionSelectContainer.setPosition(globalScene.game.canvas.width / 6 - 1 + xOffset, -48 + yOffset); + this.optionSelectContainer.setPosition(globalScene.scaledCanvas.width - 1 + xOffset, -48 + yOffset); this.setCursor(this.switchCheck ? this.switchCheckCursor : 0); diff --git a/src/ui/egg-gacha-ui-handler.ts b/src/ui/egg-gacha-ui-handler.ts index 5dcf05e2606..0287e0ee7a5 100644 --- a/src/ui/egg-gacha-ui-handler.ts +++ b/src/ui/egg-gacha-ui-handler.ts @@ -174,7 +174,7 @@ export class EggGachaUiHandler extends MessageUiHandler { const ui = this.getUi(); - this.eggGachaContainer = globalScene.add.container(0, -globalScene.game.canvas.height / 6).setVisible(false); + this.eggGachaContainer = globalScene.add.container(0, -globalScene.scaledCanvas.height).setVisible(false); ui.add(this.eggGachaContainer); const bg = globalScene.add.nineslice(0, 0, "default_bg", undefined, 320, 180, 0, 0, 16, 0).setOrigin(0); @@ -212,7 +212,7 @@ export class EggGachaUiHandler extends MessageUiHandler { this.eggGachaOptionSelectBg = addWindow(0, 0, eggGachaOptionSelectWidth, 16 + 576 * this.scale).setOrigin(1); this.eggGachaOptionsContainer = globalScene.add - .container(globalScene.game.canvas.width / 6, 148) + .container(globalScene.scaledCanvas.width, 148) .add(this.eggGachaOptionSelectBg); this.eggGachaContainer.add(this.eggGachaOptionsContainer); @@ -278,7 +278,7 @@ export class EggGachaUiHandler extends MessageUiHandler { this.eggGachaContainer.add(this.eggGachaOptionsContainer); for (const voucher of getEnumValues(VoucherType)) { - const container = globalScene.add.container(globalScene.game.canvas.width / 6 - 56 * voucher, 0); + const container = globalScene.add.container(globalScene.scaledCanvas.width - 56 * voucher, 0); const bg = addWindow(0, 0, 56, 22).setOrigin(1, 0); container.add(bg); diff --git a/src/ui/egg-hatch-scene-handler.ts b/src/ui/egg-hatch-scene-handler.ts index 5b2c9d40cfa..6536ef2af80 100644 --- a/src/ui/egg-hatch-scene-handler.ts +++ b/src/ui/egg-hatch-scene-handler.ts @@ -19,7 +19,7 @@ export class EggHatchSceneHandler extends UiHandler { } setup() { - this.eggHatchContainer = globalScene.add.container(0, -globalScene.game.canvas.height / 6); + this.eggHatchContainer = globalScene.add.container(0, -globalScene.scaledCanvas.height); globalScene.fieldUI.add(this.eggHatchContainer); const eggLightraysAnimFrames = globalScene.anims.generateFrameNames("egg_lightrays", { start: 0, end: 3 }); diff --git a/src/ui/egg-list-ui-handler.ts b/src/ui/egg-list-ui-handler.ts index 42f969b9d38..2516903f631 100644 --- a/src/ui/egg-list-ui-handler.ts +++ b/src/ui/egg-list-ui-handler.ts @@ -36,11 +36,11 @@ export class EggListUiHandler extends MessageUiHandler { setup() { const ui = this.getUi(); - this.eggListContainer = globalScene.add.container(0, -globalScene.game.canvas.height / 6).setVisible(false); + this.eggListContainer = globalScene.add.container(0, -globalScene.scaledCanvas.height).setVisible(false); ui.add(this.eggListContainer); const bgColor = globalScene.add - .rectangle(0, 0, globalScene.game.canvas.width / 6, globalScene.game.canvas.height / 6, 0x006860) + .rectangle(0, 0, globalScene.scaledCanvas.width, globalScene.scaledCanvas.height, 0x006860) .setOrigin(0); const eggListBg = globalScene.add.image(0, 0, "egg_list_bg").setOrigin(0); @@ -69,9 +69,7 @@ export class EggListUiHandler extends MessageUiHandler { .withUpdateGridCallBack(() => this.updateEggIcons()) .withUpdateSingleElementCallback((i: number) => this.setEggDetails(i)); - this.eggListMessageBoxContainer = globalScene.add - .container(0, globalScene.game.canvas.height / 6) - .setVisible(false); + this.eggListMessageBoxContainer = globalScene.add.container(0, globalScene.scaledCanvas.height).setVisible(false); const eggListMessageBox = addWindow(1, -1, 318, 28).setOrigin(0, 1); this.eggListMessageBoxContainer.add(eggListMessageBox); diff --git a/src/ui/egg-summary-ui-handler.ts b/src/ui/egg-summary-ui-handler.ts index aa4e8974318..c66075dd910 100644 --- a/src/ui/egg-summary-ui-handler.ts +++ b/src/ui/egg-summary-ui-handler.ts @@ -59,11 +59,11 @@ export class EggSummaryUiHandler extends MessageUiHandler { setup() { const ui = this.getUi(); - this.summaryContainer = globalScene.add.container(0, -globalScene.game.canvas.height / 6); + this.summaryContainer = globalScene.add.container(0, -globalScene.scaledCanvas.height); this.summaryContainer.setVisible(false); ui.add(this.summaryContainer); - this.eggHatchContainer = globalScene.add.container(0, -globalScene.game.canvas.height / 6); + this.eggHatchContainer = globalScene.add.container(0, -globalScene.scaledCanvas.height); this.eggHatchContainer.setVisible(false); ui.add(this.eggHatchContainer); @@ -92,7 +92,7 @@ export class EggSummaryUiHandler extends MessageUiHandler { iconContainerX + numCols * iconSize, iconContainerY + 3, 4, - globalScene.game.canvas.height / 6 - 20, + globalScene.scaledCanvas.height - 20, numRows, ); this.summaryContainer.add(scrollBar); diff --git a/src/ui/evolution-scene-handler.ts b/src/ui/evolution-scene-handler.ts index c22cf31faaa..0333594dc36 100644 --- a/src/ui/evolution-scene-handler.ts +++ b/src/ui/evolution-scene-handler.ts @@ -22,7 +22,7 @@ export class EvolutionSceneHandler extends MessageUiHandler { const ui = this.getUi(); - this.evolutionContainer = globalScene.add.container(0, -globalScene.game.canvas.height / 6); + this.evolutionContainer = globalScene.add.container(0, -globalScene.scaledCanvas.height); const messageBg = globalScene.add.sprite(0, 0, "bg", globalScene.windowType).setOrigin(0, 1).setVisible(false); diff --git a/src/ui/fight-ui-handler.ts b/src/ui/fight-ui-handler.ts index 42f8cba5df4..1d856079939 100644 --- a/src/ui/fight-ui-handler.ts +++ b/src/ui/fight-ui-handler.ts @@ -105,15 +105,13 @@ export class FightUiHandler extends UiHandler implements InfoToggle { ]); // prepare move overlay - const overlayScale = 1; this.moveInfoOverlay = new MoveInfoOverlay({ delayVisibility: true, - scale: overlayScale, onSide: true, right: true, x: 0, - y: -MoveInfoOverlay.getHeight(overlayScale, true), - width: globalScene.game.canvas.width / 6 + 4, + y: -MoveInfoOverlay.getHeight(true), + width: globalScene.scaledCanvas.width + 4, hideEffectBox: true, hideBg: true, }); diff --git a/src/ui/filter-text.ts b/src/ui/filter-text.ts index ff7119dd778..d5809292c25 100644 --- a/src/ui/filter-text.ts +++ b/src/ui/filter-text.ts @@ -62,7 +62,7 @@ export class FilterText extends Phaser.GameObjects.Container { this.dialogueMessageBox = addWindow( -this.textPadding, 0, - globalScene.game.canvas.width / 6 + this.textPadding * 2, + globalScene.scaledCanvas.width + this.textPadding * 2, 49, false, false, diff --git a/src/ui/login-form-ui-handler.ts b/src/ui/login-form-ui-handler.ts index 524eaeece86..67b2c81b94c 100644 --- a/src/ui/login-form-ui-handler.ts +++ b/src/ui/login-form-ui-handler.ts @@ -49,7 +49,7 @@ export class LoginFormUiHandler extends FormModalUiHandler { private buildExternalPartyContainer() { this.externalPartyContainer = globalScene.add.container(0, 0); this.externalPartyContainer.setInteractive( - new Phaser.Geom.Rectangle(0, 0, globalScene.game.canvas.width / 12, globalScene.game.canvas.height / 12), + new Phaser.Geom.Rectangle(0, 0, globalScene.scaledCanvas.width / 2, globalScene.scaledCanvas.height / 2), Phaser.Geom.Rectangle.Contains, ); this.externalPartyTitle = addTextObject(0, 4, "", TextStyle.SETTINGS_LABEL); diff --git a/src/ui/menu-ui-handler.ts b/src/ui/menu-ui-handler.ts index fa65cccab2f..10a94a2c51d 100644 --- a/src/ui/menu-ui-handler.ts +++ b/src/ui/menu-ui-handler.ts @@ -96,10 +96,10 @@ export class MenuUiHandler extends MessageUiHandler { ui.bgmBar = this.bgmBar; - this.menuContainer = globalScene.add.container(1, -(globalScene.game.canvas.height / 6) + 1); + this.menuContainer = globalScene.add.container(1, -globalScene.scaledCanvas.height + 1); this.menuContainer.setName("menu"); this.menuContainer.setInteractive( - new Phaser.Geom.Rectangle(0, 0, globalScene.game.canvas.width / 6, globalScene.game.canvas.height / 6), + new Phaser.Geom.Rectangle(0, 0, globalScene.scaledCanvas.width, globalScene.scaledCanvas.height), Phaser.Geom.Rectangle.Contains, ); @@ -146,10 +146,10 @@ export class MenuUiHandler extends MessageUiHandler { this.scale = getTextStyleOptions(TextStyle.WINDOW, globalScene.uiTheme).scale; this.menuBg = addWindow( - globalScene.game.canvas.width / 6 - (this.optionSelectText.displayWidth + 25), + globalScene.scaledCanvas.width - (this.optionSelectText.displayWidth + 25), 0, this.optionSelectText.displayWidth + 19 + 24 * this.scale, - globalScene.game.canvas.height / 6 - 2, + globalScene.scaledCanvas.height - 2, ); this.menuBg.setOrigin(0, 0); @@ -174,7 +174,7 @@ export class MenuUiHandler extends MessageUiHandler { this.dialogueMessageBox = addWindow( -this.textPadding, 0, - globalScene.game.canvas.width / 6 + this.textPadding * 2, + globalScene.scaledCanvas.width + this.textPadding * 2, 49, false, false, diff --git a/src/ui/modal-ui-handler.ts b/src/ui/modal-ui-handler.ts index 228d80968b9..0a35fd841c4 100644 --- a/src/ui/modal-ui-handler.ts +++ b/src/ui/modal-ui-handler.ts @@ -46,7 +46,7 @@ export abstract class ModalUiHandler extends UiHandler { this.modalContainer = globalScene.add.container(0, 0); this.modalContainer.setInteractive( - new Phaser.Geom.Rectangle(0, 0, globalScene.game.canvas.width / 6, globalScene.game.canvas.height / 6), + new Phaser.Geom.Rectangle(0, 0, globalScene.scaledCanvas.width, globalScene.scaledCanvas.height), Phaser.Geom.Rectangle.Contains, ); @@ -105,8 +105,8 @@ export abstract class ModalUiHandler extends UiHandler { const overlay = globalScene.add.rectangle( (this.getWidth() + marginLeft + marginRight) / 2, (this.getHeight() + marginTop + marginBottom) / 2, - globalScene.game.canvas.width / 6, - globalScene.game.canvas.height / 6, + globalScene.scaledCanvas.width, + globalScene.scaledCanvas.height, 0, ); overlay.setOrigin(0.5, 0.5); @@ -159,8 +159,8 @@ export abstract class ModalUiHandler extends UiHandler { const width = this.getWidth(config); const height = this.getHeight(config); this.modalContainer.setPosition( - (globalScene.game.canvas.width / 6 - (width + (marginRight - marginLeft))) / 2, - (-globalScene.game.canvas.height / 6 - (height + (marginBottom - marginTop))) / 2, + (globalScene.scaledCanvas.width - (width + (marginRight - marginLeft))) / 2, + (-globalScene.scaledCanvas.height - (height + (marginBottom - marginTop))) / 2, ); this.modalBg.setSize(width, height); diff --git a/src/ui/modifier-select-ui-handler.ts b/src/ui/modifier-select-ui-handler.ts index 16eecf6993d..85466258160 100644 --- a/src/ui/modifier-select-ui-handler.ts +++ b/src/ui/modifier-select-ui-handler.ts @@ -86,10 +86,7 @@ export class ModifierSelectUiHandler extends AwaitableUiHandler { transferButtonText.setOrigin(1, 0); this.transferButtonContainer.add(transferButtonText); - this.checkButtonContainer = globalScene.add.container( - globalScene.game.canvas.width / 6 - 1, - OPTION_BUTTON_YPOSITION, - ); + this.checkButtonContainer = globalScene.add.container(globalScene.scaledCanvas.width - 1, OPTION_BUTTON_YPOSITION); this.checkButtonContainer.setName("use-btn"); this.checkButtonContainer.setVisible(false); ui.add(this.checkButtonContainer); @@ -129,8 +126,8 @@ export class ModifierSelectUiHandler extends AwaitableUiHandler { this.lockRarityButtonContainer.add(this.lockRarityButtonText); this.continueButtonContainer = globalScene.add.container( - globalScene.game.canvas.width / 12, - -(globalScene.game.canvas.height / 12), + globalScene.scaledCanvas.width / 2, + -(globalScene.scaledCanvas.height / 2), ); this.continueButtonContainer.setVisible(false); ui.add(this.continueButtonContainer); @@ -146,15 +143,13 @@ export class ModifierSelectUiHandler extends AwaitableUiHandler { this.continueButtonContainer.add(continueButtonText); // prepare move overlay - const overlayScale = 1; this.moveInfoOverlay = new MoveInfoOverlay({ delayVisibility: true, - scale: overlayScale, onSide: true, right: true, x: 1, - y: -MoveInfoOverlay.getHeight(overlayScale, true) - 1, - width: globalScene.game.canvas.width / 6 - 2, + y: -MoveInfoOverlay.getHeight(true) - 1, + width: globalScene.scaledCanvas.width - 2, }); ui.add(this.moveInfoOverlay); // register the overlay to receive toggle events @@ -219,10 +214,10 @@ export class ModifierSelectUiHandler extends AwaitableUiHandler { shopTypeOptions.length > SHOP_OPTIONS_ROW_LIMIT ? -SINGLE_SHOP_ROW_YOFFSET : -DOUBLE_SHOP_ROW_YOFFSET; for (let m = 0; m < typeOptions.length; m++) { - const sliceWidth = globalScene.game.canvas.width / 6 / (typeOptions.length + 2); + const sliceWidth = globalScene.scaledCanvas.width / (typeOptions.length + 2); const option = new ModifierOption( sliceWidth * (m + 1) + sliceWidth * 0.5, - -globalScene.game.canvas.height / 12 + optionsYOffset, + -globalScene.scaledCanvas.height / 2 + optionsYOffset, typeOptions[m], ); option.setScale(0.5); @@ -243,10 +238,10 @@ export class ModifierSelectUiHandler extends AwaitableUiHandler { row ? SHOP_OPTIONS_ROW_LIMIT : 0, row ? undefined : SHOP_OPTIONS_ROW_LIMIT, ); - const sliceWidth = globalScene.game.canvas.width / 6 / (rowOptions.length + 2); + const sliceWidth = globalScene.scaledCanvas.width / (rowOptions.length + 2); const option = new ModifierOption( sliceWidth * (col + 1) + sliceWidth * 0.5, - -globalScene.game.canvas.height / 12 - globalScene.game.canvas.height / 32 - (42 - (28 * row - 1)), + -globalScene.scaledCanvas.height / 2 - globalScene.game.canvas.height / 32 - (42 - (28 * row - 1)), shopTypeOptions[m], ); option.setScale(0.375); @@ -558,27 +553,27 @@ export class ModifierSelectUiHandler extends AwaitableUiHandler { // Continue button when no shop items this.cursorObj.setScale(1.25); this.cursorObj.setPosition( - globalScene.game.canvas.width / 18 + 23, - -globalScene.game.canvas.height / 12 - + globalScene.scaledCanvas.width / 3 + 23, + -globalScene.scaledCanvas.height / 2 - (this.shopOptionsRows.length > 1 ? SINGLE_SHOP_ROW_YOFFSET - 2 : DOUBLE_SHOP_ROW_YOFFSET - 2), ); ui.showText(i18next.t("modifierSelectUiHandler:continueNextWaveDescription")); return ret; } - const sliceWidth = globalScene.game.canvas.width / 6 / (options.length + 2); + const sliceWidth = globalScene.scaledCanvas.width / (options.length + 2); if (this.rowCursor < 2) { // Cursor on free items this.cursorObj.setPosition( sliceWidth * (cursor + 1) + sliceWidth * 0.5 - 20, - -globalScene.game.canvas.height / 12 - + -globalScene.scaledCanvas.height / 2 - (this.shopOptionsRows.length > 1 ? SINGLE_SHOP_ROW_YOFFSET - 2 : DOUBLE_SHOP_ROW_YOFFSET - 2), ); } else { // Cursor on paying items this.cursorObj.setPosition( sliceWidth * (cursor + 1) + sliceWidth * 0.5 - 16, - -globalScene.game.canvas.height / 12 - + -globalScene.scaledCanvas.height / 2 - globalScene.game.canvas.height / 32 - (-14 + 28 * (this.rowCursor - (this.shopOptionsRows.length - 1))), ); diff --git a/src/ui/move-info-overlay.ts b/src/ui/move-info-overlay.ts index f8632eb244e..f98630260db 100644 --- a/src/ui/move-info-overlay.ts +++ b/src/ui/move-info-overlay.ts @@ -10,17 +10,24 @@ import { fixedInt, getLocalizedSpriteKey } from "#utils/common"; import i18next from "i18next"; 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. - scale?: number; // scale the box? A scale of 0.5 is recommended - top?: boolean; // should the effect box be on top? - right?: boolean; // should the effect box be on the right? - onSide?: boolean; // should the effect be on the side? ignores top argument if true - //location and width of the component; unaffected by scaling + /** + * 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. + */ + delayVisibility?: boolean; + /** Whether the effect box should be on top */ + top?: boolean; + /** Whether the effect box should be on the right */ + right?: boolean; + /** Whether the effect box should be on the side. Overrides the `top` param if `true`. */ + onSide?: boolean; + /** `x` position of the component, unaffected by scaling */ x?: number; + /** `y` position of the component, unaffected by scaling */ y?: number; - /** Default is always half the screen, regardless of scale */ + /** Width of the component, unaffected by scaling. Defaults to half the screen width. */ width?: number; - /** Determines whether to display the small secondary box */ + /** Whether to display the small secondary box */ hideEffectBox?: boolean; hideBg?: boolean; } @@ -54,12 +61,11 @@ export class MoveInfoOverlay extends Phaser.GameObjects.Container implements Inf options.top = false; } super(globalScene, options?.x, options?.y); - const scale = options?.scale || 1; // set up the scale - this.setScale(scale); + this.setScale(1); this.options = options || {}; // prepare the description box - const width = (options?.width || MoveInfoOverlay.getWidth(scale)) / scale; // divide by scale as we always want this to be half a window wide + 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, @@ -88,19 +94,19 @@ export class MoveInfoOverlay extends Phaser.GameObjects.Container implements Inf y: options?.y || 0, }; if (maskPointOrigin.x < 0) { - maskPointOrigin.x += globalScene.game.canvas.width / GLOBAL_SCALE; + maskPointOrigin.x += globalScene.scaledCanvas.width; } if (maskPointOrigin.y < 0) { - maskPointOrigin.y += globalScene.game.canvas.height / GLOBAL_SCALE; + maskPointOrigin.y += globalScene.scaledCanvas.height; } 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, + maskPointOrigin.x + ((options?.onSide && !options?.right ? EFF_WIDTH : 0) + BORDER), + maskPointOrigin.y + ((options?.top ? EFF_HEIGHT : 0) + BORDER - 2), + width - ((options?.onSide ? EFF_WIDTH : 0) - BORDER * 2), + DESC_HEIGHT - (BORDER - 2) * 2, ); moveDescriptionTextMaskRect.setScale(6); const moveDescriptionTextMask = this.createGeometryMask(moveDescriptionTextMaskRect); @@ -233,12 +239,12 @@ export class MoveInfoOverlay extends Phaser.GameObjects.Container implements Inf } // width of this element - static getWidth(_scale: number): number { - return globalScene.game.canvas.width / GLOBAL_SCALE / 2; + static getWidth(): number { + return globalScene.scaledCanvas.width / 2; } // height of this element - static getHeight(scale: number, onSide?: boolean): number { - return (onSide ? Math.max(EFF_HEIGHT, DESC_HEIGHT) : EFF_HEIGHT + DESC_HEIGHT) * scale; + static getHeight(onSide?: boolean): number { + return onSide ? Math.max(EFF_HEIGHT, DESC_HEIGHT) : EFF_HEIGHT + DESC_HEIGHT; } } diff --git a/src/ui/mystery-encounter-ui-handler.ts b/src/ui/mystery-encounter-ui-handler.ts index b6bc464855c..881c375fa8a 100644 --- a/src/ui/mystery-encounter-ui-handler.ts +++ b/src/ui/mystery-encounter-ui-handler.ts @@ -471,7 +471,7 @@ export class MysteryEncounterUiHandler extends UiHandler { // View Party Button const viewPartyText = addBBCodeTextObject( - globalScene.game.canvas.width / 6, + globalScene.scaledCanvas.width, -24, getBBCodeFrag(i18next.t("mysteryEncounterMessages:view_party_button"), TextStyle.PARTY), TextStyle.PARTY, diff --git a/src/ui/party-exp-bar.ts b/src/ui/party-exp-bar.ts index 952a1f8227a..c9567ceb042 100644 --- a/src/ui/party-exp-bar.ts +++ b/src/ui/party-exp-bar.ts @@ -14,7 +14,7 @@ export class PartyExpBar extends Phaser.GameObjects.Container { public shown: boolean; constructor() { - super(globalScene, globalScene.game.canvas.width / 6, -(globalScene.game.canvas.height / 6) + 15); + super(globalScene, globalScene.scaledCanvas.width, -globalScene.scaledCanvas.height + 15); } setup(): void { @@ -66,7 +66,7 @@ export class PartyExpBar extends Phaser.GameObjects.Container { this.tween = globalScene.tweens.add({ targets: this, - x: globalScene.game.canvas.width / 6 - (this.bg.width - 5), + x: globalScene.scaledCanvas.width - (this.bg.width - 5), duration: 500 / Math.pow(2, globalScene.expGainsSpeed), ease: "Sine.easeOut", onComplete: () => { @@ -92,7 +92,7 @@ export class PartyExpBar extends Phaser.GameObjects.Container { this.tween = globalScene.tweens.add({ targets: this, - x: globalScene.game.canvas.width / 6, + x: globalScene.scaledCanvas.width, duration: 500, ease: "Sine.easeIn", onComplete: () => { diff --git a/src/ui/party-ui-handler.ts b/src/ui/party-ui-handler.ts index 0337e487200..c9887dcb93e 100644 --- a/src/ui/party-ui-handler.ts +++ b/src/ui/party-ui-handler.ts @@ -311,7 +311,7 @@ export class PartyUiHandler extends MessageUiHandler { this.partyCancelButton = partyCancelButton; - this.optionsContainer = globalScene.add.container(globalScene.game.canvas.width / 6 - 1, -1); + this.optionsContainer = globalScene.add.container(globalScene.scaledCanvas.width - 1, -1); partyContainer.add(this.optionsContainer); this.iconAnimHandler = new PokemonIconAnimHandler(); @@ -323,14 +323,12 @@ export class PartyUiHandler extends MessageUiHandler { this.partyDiscardModeButton = partyDiscardModeButton; - // prepare move overlay. in case it appears to be too big, set the overlayScale to .5 - const overlayScale = 1; + // prepare move overlay this.moveInfoOverlay = new MoveInfoOverlay({ - scale: overlayScale, top: true, x: 1, - y: -MoveInfoOverlay.getHeight(overlayScale) - 1, - width: globalScene.game.canvas.width / 12 - 30, + y: -MoveInfoOverlay.getHeight() - 1, + width: globalScene.scaledCanvas.width / 2 - 30, }); ui.add(this.moveInfoOverlay); diff --git a/src/ui/pokeball-tray.ts b/src/ui/pokeball-tray.ts index 9720aa42090..b1522af0e27 100644 --- a/src/ui/pokeball-tray.ts +++ b/src/ui/pokeball-tray.ts @@ -10,7 +10,7 @@ export class PokeballTray extends Phaser.GameObjects.Container { public shown: boolean; constructor(player: boolean) { - super(globalScene, player ? globalScene.game.canvas.width / 6 : 0, player ? -72 : -144); + super(globalScene, player ? globalScene.scaledCanvas.width : 0, player ? -72 : -144); this.player = player; } @@ -36,7 +36,7 @@ export class PokeballTray extends Phaser.GameObjects.Container { .map((_, i) => globalScene.add.sprite( (this.player ? -83 : 76) + - (globalScene.game.canvas.width / 6) * (this.player ? -1 : 1) + + globalScene.scaledCanvas.width * (this.player ? -1 : 1) + 10 * i * (this.player ? 1 : -1), -8, "pb_tray_ball", @@ -67,7 +67,7 @@ export class PokeballTray extends Phaser.GameObjects.Container { this.bg.alpha = 1; this.balls.forEach((ball, b) => { - ball.x += (globalScene.game.canvas.width / 6 + 104) * (this.player ? 1 : -1); + ball.x += (globalScene.scaledCanvas.width + 104) * (this.player ? 1 : -1); let ballFrame = "ball"; if (b >= party.length) { ballFrame = "empty"; @@ -115,7 +115,7 @@ export class PokeballTray extends Phaser.GameObjects.Container { this.balls.forEach((ball, b) => { globalScene.tweens.add({ targets: ball, - x: `${this.player ? "-" : "+"}=${globalScene.game.canvas.width / 6}`, + x: `${this.player ? "-" : "+"}=${globalScene.scaledCanvas.width}`, duration: 250, delay: b * 100, ease: "Sine.easeIn", diff --git a/src/ui/pokedex-info-overlay.ts b/src/ui/pokedex-info-overlay.ts index 0f2f5fa3dde..9c5876318ec 100644 --- a/src/ui/pokedex-info-overlay.ts +++ b/src/ui/pokedex-info-overlay.ts @@ -7,7 +7,6 @@ import { fixedInt } from "#utils/common"; 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. - scale?: number; // scale the box? A scale of 0.5 is recommended //location and width of the component; unaffected by scaling x?: number; y?: number; @@ -36,17 +35,15 @@ export class PokedexInfoOverlay extends Phaser.GameObjects.Container implements private maskPointOriginX: number; private maskPointOriginY: number; - public scale: number; public width: number; constructor(options?: PokedexInfoOverlaySettings) { super(globalScene, options?.x, options?.y); - this.scale = options?.scale || 1; // set up the scale - this.setScale(this.scale); + this.setScale(1); this.options = options || {}; // prepare the description box - this.width = (options?.width || PokedexInfoOverlay.getWidth(this.scale)) / this.scale; // divide by scale as we always want this to be half a window wide + 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); @@ -61,19 +58,19 @@ export class PokedexInfoOverlay extends Phaser.GameObjects.Container implements this.maskPointOriginY = options?.y || 0; if (this.maskPointOriginX < 0) { - this.maskPointOriginX += globalScene.game.canvas.width / GLOBAL_SCALE; + this.maskPointOriginX += globalScene.scaledCanvas.width; } if (this.maskPointOriginY < 0) { - this.maskPointOriginY += globalScene.game.canvas.height / GLOBAL_SCALE; + this.maskPointOriginY += globalScene.scaledCanvas.height; } this.textMaskRect = globalScene.make.graphics(); this.textMaskRect.fillStyle(0xff0000); this.textMaskRect.fillRect( - this.maskPointOriginX + BORDER * this.scale, - this.maskPointOriginY + (BORDER - 2) * this.scale, - this.width - BORDER * 2 * this.scale, - (DESC_HEIGHT - (BORDER - 2) * 2) * this.scale, + this.maskPointOriginX + BORDER, + this.maskPointOriginY + (BORDER - 2), + this.width - BORDER * 2, + DESC_HEIGHT - (BORDER - 2) * 2, ); this.textMaskRect.setScale(6); const textMask = this.createGeometryMask(this.textMaskRect); @@ -111,10 +108,10 @@ export class PokedexInfoOverlay extends Phaser.GameObjects.Container implements this.textMaskRect.clear(); this.textMaskRect.fillStyle(0xff0000); this.textMaskRect.fillRect( - this.maskPointOriginX + BORDER * this.scale, - this.maskPointOriginY + (BORDER - 2) * this.scale + (48 - newHeight), - this.width - BORDER * 2 * this.scale, - (newHeight - (BORDER - 2) * 2) * this.scale, + 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); @@ -167,12 +164,12 @@ export class PokedexInfoOverlay extends Phaser.GameObjects.Container implements } // width of this element - static getWidth(_scale: number): number { - return globalScene.game.canvas.width / GLOBAL_SCALE / 2; + static getWidth(): number { + return globalScene.scaledCanvas.width / 2; } // height of this element - static getHeight(scale: number, _onSide?: boolean): number { - return DESC_HEIGHT * scale; + static getHeight(): number { + return DESC_HEIGHT; } } diff --git a/src/ui/pokedex-page-ui-handler.ts b/src/ui/pokedex-page-ui-handler.ts index 227b86c4d4d..fbfb6b615a4 100644 --- a/src/ui/pokedex-page-ui-handler.ts +++ b/src/ui/pokedex-page-ui-handler.ts @@ -299,15 +299,15 @@ export class PokedexPageUiHandler extends MessageUiHandler { const langSettingKey = Object.keys(languageSettings).find(lang => currentLanguage.includes(lang)) ?? "en"; const textSettings = languageSettings[langSettingKey]; - this.starterSelectContainer = globalScene.add.container(0, -globalScene.game.canvas.height / 6); + this.starterSelectContainer = globalScene.add.container(0, -globalScene.scaledCanvas.height); this.starterSelectContainer.setVisible(false); ui.add(this.starterSelectContainer); const bgColor = globalScene.add.rectangle( 0, 0, - globalScene.game.canvas.width / 6, - globalScene.game.canvas.height / 6, + globalScene.scaledCanvas.width, + globalScene.scaledCanvas.height, 0x006860, ); bgColor.setOrigin(0, 0); @@ -602,7 +602,7 @@ export class PokedexPageUiHandler extends MessageUiHandler { this.filterInstructionsContainer.setVisible(true); this.starterSelectContainer.add(this.filterInstructionsContainer); - this.starterSelectMessageBoxContainer = globalScene.add.container(0, globalScene.game.canvas.height / 6); + this.starterSelectMessageBoxContainer = globalScene.add.container(0, globalScene.scaledCanvas.height); this.starterSelectMessageBoxContainer.setVisible(false); this.starterSelectContainer.add(this.starterSelectMessageBoxContainer); @@ -629,7 +629,7 @@ export class PokedexPageUiHandler extends MessageUiHandler { this.menuContainer = globalScene.add.container(-130, 0); this.menuContainer.setName("menu"); this.menuContainer.setInteractive( - new Phaser.Geom.Rectangle(0, 0, globalScene.game.canvas.width / 6, globalScene.game.canvas.height / 6), + new Phaser.Geom.Rectangle(0, 0, globalScene.scaledCanvas.width, globalScene.scaledCanvas.height), Phaser.Geom.Rectangle.Contains, ); @@ -659,10 +659,10 @@ export class PokedexPageUiHandler extends MessageUiHandler { this.scale = getTextStyleOptions(TextStyle.WINDOW, globalScene.uiTheme).scale; this.menuBg = addWindow( - globalScene.game.canvas.width / 6 - 83, + globalScene.scaledCanvas.width - 83, 0, this.optionSelectText.displayWidth + 19 + 24 * this.scale, - globalScene.game.canvas.height / 6 - 2, + globalScene.scaledCanvas.height - 2, ); this.menuBg.setOrigin(0, 0); @@ -682,19 +682,16 @@ export class PokedexPageUiHandler extends MessageUiHandler { this.menuContainer.bringToTop(this.baseStatsOverlay); // add the info overlay last to be the top most ui element and prevent the IVs from overlaying this - const overlayScale = 1; this.moveInfoOverlay = new MoveInfoOverlay({ - scale: overlayScale, top: true, x: 1, - y: globalScene.game.canvas.height / 6 - MoveInfoOverlay.getHeight(overlayScale) - 29, + y: globalScene.scaledCanvas.height - MoveInfoOverlay.getHeight() - 29, }); this.starterSelectContainer.add(this.moveInfoOverlay); this.infoOverlay = new PokedexInfoOverlay({ - scale: overlayScale, x: 1, - y: globalScene.game.canvas.height / 6 - PokedexInfoOverlay.getHeight(overlayScale) - 29, + y: globalScene.scaledCanvas.height - PokedexInfoOverlay.getHeight() - 29, }); this.starterSelectContainer.add(this.infoOverlay); @@ -1103,7 +1100,7 @@ export class PokedexPageUiHandler extends MessageUiHandler { this.starterSelectMessageBoxContainer.setY(0); this.message.setY(4); } else { - this.starterSelectMessageBoxContainer.setY(globalScene.game.canvas.height / 6); + this.starterSelectMessageBoxContainer.setY(globalScene.scaledCanvas.height); this.starterSelectMessageBox.setOrigin(0, 1); this.message.setY(singleLine ? -22 : -37); } diff --git a/src/ui/pokedex-ui-handler.ts b/src/ui/pokedex-ui-handler.ts index cd1dc312f4d..75a3e5162e3 100644 --- a/src/ui/pokedex-ui-handler.ts +++ b/src/ui/pokedex-ui-handler.ts @@ -245,15 +245,15 @@ export class PokedexUiHandler extends MessageUiHandler { const langSettingKey = Object.keys(languageSettings).find(lang => currentLanguage.includes(lang)) ?? "en"; const textSettings = languageSettings[langSettingKey]; - this.starterSelectContainer = globalScene.add.container(0, -globalScene.game.canvas.height / 6); + this.starterSelectContainer = globalScene.add.container(0, -globalScene.scaledCanvas.height); this.starterSelectContainer.setVisible(false); ui.add(this.starterSelectContainer); const bgColor = globalScene.add.rectangle( 0, 0, - globalScene.game.canvas.width / 6, - globalScene.game.canvas.height / 6, + globalScene.scaledCanvas.width, + globalScene.scaledCanvas.height, 0x006860, ); bgColor.setOrigin(0, 0); @@ -544,7 +544,7 @@ export class PokedexUiHandler extends MessageUiHandler { this.type2Icon.setOrigin(0, 0); this.starterSelectContainer.add(this.type2Icon); - this.starterSelectMessageBoxContainer = globalScene.add.container(0, globalScene.game.canvas.height / 6); + this.starterSelectMessageBoxContainer = globalScene.add.container(0, globalScene.scaledCanvas.height); this.starterSelectMessageBoxContainer.setVisible(false); this.starterSelectContainer.add(this.starterSelectMessageBoxContainer); @@ -784,7 +784,7 @@ export class PokedexUiHandler extends MessageUiHandler { this.starterSelectMessageBoxContainer.setY(0); this.message.setY(4); } else { - this.starterSelectMessageBoxContainer.setY(globalScene.game.canvas.height / 6); + this.starterSelectMessageBoxContainer.setY(globalScene.scaledCanvas.height); this.starterSelectMessageBox.setOrigin(0, 1); this.message.setY(singleLine ? -22 : -37); } diff --git a/src/ui/run-history-ui-handler.ts b/src/ui/run-history-ui-handler.ts index 00aa47ae65d..457c48654a3 100644 --- a/src/ui/run-history-ui-handler.ts +++ b/src/ui/run-history-ui-handler.ts @@ -54,14 +54,14 @@ export class RunHistoryUiHandler extends MessageUiHandler { const loadSessionBg = globalScene.add.rectangle( 0, 0, - globalScene.game.canvas.width / 6, - -globalScene.game.canvas.height / 6, + globalScene.scaledCanvas.width, + -globalScene.scaledCanvas.height, 0x006860, ); loadSessionBg.setOrigin(0, 0); this.runSelectContainer.add(loadSessionBg); - this.runContainerInitialY = -globalScene.game.canvas.height / 6 + 8; + this.runContainerInitialY = -globalScene.scaledCanvas.height + 8; this.runsContainer = globalScene.add.container(8, this.runContainerInitialY); this.runSelectContainer.add(this.runsContainer); diff --git a/src/ui/run-info-ui-handler.ts b/src/ui/run-info-ui-handler.ts index 465e48a45ad..667a22a001a 100644 --- a/src/ui/run-info-ui-handler.ts +++ b/src/ui/run-info-ui-handler.ts @@ -74,7 +74,7 @@ export class RunInfoUiHandler extends UiHandler { } override async setup() { - this.runContainer = globalScene.add.container(1, -(globalScene.game.canvas.height / 6) + 1); + this.runContainer = globalScene.add.container(1, -globalScene.scaledCanvas.height + 1); // The import of the modifiersModule is loaded here to sidestep async/await issues. this.modifiersModule = Modifier; this.runContainer.setVisible(false); @@ -120,7 +120,7 @@ export class RunInfoUiHandler extends UiHandler { // Creates Header and adds to this.runContainer this.addHeader(); - this.statsBgWidth = (globalScene.game.canvas.width / 6 - 2) / 3; + this.statsBgWidth = (globalScene.scaledCanvas.width - 2) / 3; // Creates Run Result Container this.runResultContainer = globalScene.add.container(0, 24); @@ -147,7 +147,7 @@ export class RunInfoUiHandler extends UiHandler { this.showParty(true); this.runContainer.setInteractive( - new Phaser.Geom.Rectangle(0, 0, globalScene.game.canvas.width / 6, globalScene.game.canvas.height / 6), + new Phaser.Geom.Rectangle(0, 0, globalScene.scaledCanvas.width, globalScene.scaledCanvas.height), Phaser.Geom.Rectangle.Contains, ); this.getUi().bringToTop(this.runContainer); @@ -174,7 +174,7 @@ export class RunInfoUiHandler extends UiHandler { * It does not check if the run has any PokemonHeldItemModifiers though. */ private addHeader() { - const headerBg = addWindow(0, 0, globalScene.game.canvas.width / 6 - 2, 24); + const headerBg = addWindow(0, 0, globalScene.scaledCanvas.width - 2, 24); headerBg.setOrigin(0, 0); this.runContainer.add(headerBg); if (this.runInfo.modifiers.length !== 0) { @@ -723,7 +723,7 @@ export class RunInfoUiHandler extends UiHandler { private parsePartyInfo(): void { const party = this.runInfo.party; const currentLanguage = i18next.resolvedLanguage ?? "en"; - const windowHeight = (globalScene.game.canvas.height / 6 - 23) / 6; + const windowHeight = (globalScene.scaledCanvas.height - 23) / 6; party.forEach((p: PokemonData, i: number) => { const pokemonInfoWindow = new RoundRectangle(globalScene, 0, 14, this.statsBgWidth * 2 + 10, windowHeight - 2, 3); @@ -971,8 +971,8 @@ export class RunInfoUiHandler extends UiHandler { endCard.setOrigin(0); endCard.setScale(0.5); const text = addTextObject( - globalScene.game.canvas.width / 12, - globalScene.game.canvas.height / 6 - 16, + globalScene.scaledCanvas.width / 2, + globalScene.scaledCanvas.height - 16, i18next.t("battle:congratulations"), TextStyle.SUMMARY, { fontSize: "128px" }, diff --git a/src/ui/save-slot-select-ui-handler.ts b/src/ui/save-slot-select-ui-handler.ts index 9da34e672f1..5b1566b4913 100644 --- a/src/ui/save-slot-select-ui-handler.ts +++ b/src/ui/save-slot-select-ui-handler.ts @@ -54,14 +54,14 @@ export class SaveSlotSelectUiHandler extends MessageUiHandler { const loadSessionBg = globalScene.add.rectangle( 0, 0, - globalScene.game.canvas.width / 6, - -globalScene.game.canvas.height / 6, + globalScene.scaledCanvas.width, + -globalScene.scaledCanvas.height, 0x006860, ); loadSessionBg.setOrigin(0, 0); this.saveSlotSelectContainer.add(loadSessionBg); - this.sessionSlotsContainerInitialY = -globalScene.game.canvas.height / 6 + 8; + this.sessionSlotsContainerInitialY = -globalScene.scaledCanvas.height + 8; this.sessionSlotsContainer = globalScene.add.container(8, this.sessionSlotsContainerInitialY); this.saveSlotSelectContainer.add(this.sessionSlotsContainer); diff --git a/src/ui/saving-icon-handler.ts b/src/ui/saving-icon-handler.ts index 6923017218f..00c8b8b526c 100644 --- a/src/ui/saving-icon-handler.ts +++ b/src/ui/saving-icon-handler.ts @@ -8,7 +8,7 @@ export class SavingIconHandler extends Phaser.GameObjects.Container { private shown: boolean; constructor() { - super(globalScene, globalScene.game.canvas.width / 6 - 4, globalScene.game.canvas.height / 6 - 4); + super(globalScene, globalScene.scaledCanvas.width - 4, globalScene.scaledCanvas.height - 4); } setup(): void { diff --git a/src/ui/settings/abstract-binding-ui-handler.ts b/src/ui/settings/abstract-binding-ui-handler.ts index eb68456a69d..b2bda2455bb 100644 --- a/src/ui/settings/abstract-binding-ui-handler.ts +++ b/src/ui/settings/abstract-binding-ui-handler.ts @@ -73,8 +73,8 @@ export abstract class AbstractBindingUiHandler extends UiHandler { // Setup backgrounds and text objects for UI. this.titleBg = addWindow( - globalScene.game.canvas.width / 6 - this.getWindowWidth(), - -(globalScene.game.canvas.height / 6) + 28 + 21, + globalScene.scaledCanvas.width - this.getWindowWidth(), + -globalScene.scaledCanvas.height + 28 + 21, this.getWindowWidth(), 24, ); @@ -82,8 +82,8 @@ export abstract class AbstractBindingUiHandler extends UiHandler { this.optionSelectContainer.add(this.titleBg); this.actionBg = addWindow( - globalScene.game.canvas.width / 6 - this.getWindowWidth(), - -(globalScene.game.canvas.height / 6) + this.getWindowHeight() + 28 + 21 + 21, + globalScene.scaledCanvas.width - this.getWindowWidth(), + -globalScene.scaledCanvas.height + this.getWindowHeight() + 28 + 21 + 21, this.getWindowWidth(), 24, ); @@ -102,8 +102,8 @@ export abstract class AbstractBindingUiHandler extends UiHandler { this.optionSelectContainer.add(this.timerText); this.optionSelectBg = addWindow( - globalScene.game.canvas.width / 6 - this.getWindowWidth(), - -(globalScene.game.canvas.height / 6) + this.getWindowHeight() + 28, + globalScene.scaledCanvas.width - this.getWindowWidth(), + -globalScene.scaledCanvas.height + this.getWindowHeight() + 28, this.getWindowWidth(), this.getWindowHeight(), ); diff --git a/src/ui/settings/abstract-control-settings-ui-handler.ts b/src/ui/settings/abstract-control-settings-ui-handler.ts index ee9e990ee2a..b40676fc97c 100644 --- a/src/ui/settings/abstract-control-settings-ui-handler.ts +++ b/src/ui/settings/abstract-control-settings-ui-handler.ts @@ -96,11 +96,11 @@ export abstract class AbstractControlSettingsUiHandler extends UiHandler { const ui = this.getUi(); this.navigationIcons = {}; - this.settingsContainer = globalScene.add.container(1, -(globalScene.game.canvas.height / 6) + 1); + this.settingsContainer = globalScene.add.container(1, -globalScene.scaledCanvas.height + 1); this.settingsContainer.setName(`settings-${this.titleSelected}`); this.settingsContainer.setInteractive( - new Phaser.Geom.Rectangle(0, 0, globalScene.game.canvas.width / 6, globalScene.game.canvas.height / 6), + new Phaser.Geom.Rectangle(0, 0, globalScene.scaledCanvas.width, globalScene.scaledCanvas.height), Phaser.Geom.Rectangle.Contains, ); @@ -109,15 +109,15 @@ export abstract class AbstractControlSettingsUiHandler extends UiHandler { this.optionsBg = addWindow( 0, this.navigationContainer.height, - globalScene.game.canvas.width / 6 - 2, - globalScene.game.canvas.height / 6 - 16 - this.navigationContainer.height - 2, + globalScene.scaledCanvas.width - 2, + globalScene.scaledCanvas.height - 16 - this.navigationContainer.height - 2, ); this.optionsBg.setOrigin(0, 0); this.actionsBg = addWindow( 0, - globalScene.game.canvas.height / 6 - this.navigationContainer.height, - globalScene.game.canvas.width / 6 - 2, + globalScene.scaledCanvas.height - this.navigationContainer.height, + globalScene.scaledCanvas.width - 2, 22, ); this.actionsBg.setOrigin(0, 0); @@ -597,7 +597,7 @@ export abstract class AbstractControlSettingsUiHandler extends UiHandler { // Check if the cursor object exists, if not, create it. if (!this.cursorObj) { - const cursorWidth = globalScene.game.canvas.width / 6 - (this.scrollBar.visible ? 16 : 10); + const cursorWidth = globalScene.scaledCanvas.width - (this.scrollBar.visible ? 16 : 10); this.cursorObj = globalScene.add.nineslice(0, 0, "summary_moves_cursor", undefined, cursorWidth, 16, 1, 1, 1, 1); this.cursorObj.setOrigin(0, 0); // Set the origin to the top-left corner. this.optionsContainer.add(this.cursorObj); // Add the cursor to the options container. diff --git a/src/ui/settings/abstract-settings-ui-handler.ts b/src/ui/settings/abstract-settings-ui-handler.ts index 81d733220fc..91d5aec984a 100644 --- a/src/ui/settings/abstract-settings-ui-handler.ts +++ b/src/ui/settings/abstract-settings-ui-handler.ts @@ -56,10 +56,10 @@ export class AbstractSettingsUiHandler extends MessageUiHandler { setup() { const ui = this.getUi(); - this.settingsContainer = globalScene.add.container(1, -(globalScene.game.canvas.height / 6) + 1); + this.settingsContainer = globalScene.add.container(1, -globalScene.scaledCanvas.height + 1); this.settingsContainer.setName(`settings-${this.title}`); this.settingsContainer.setInteractive( - new Phaser.Geom.Rectangle(0, 0, globalScene.game.canvas.width / 6, globalScene.game.canvas.height / 6 - 20), + new Phaser.Geom.Rectangle(0, 0, globalScene.scaledCanvas.width, globalScene.scaledCanvas.height - 20), Phaser.Geom.Rectangle.Contains, ); @@ -70,16 +70,16 @@ export class AbstractSettingsUiHandler extends MessageUiHandler { this.optionsBg = addWindow( 0, this.navigationContainer.height, - globalScene.game.canvas.width / 6 - 2, - globalScene.game.canvas.height / 6 - 16 - this.navigationContainer.height - 2, + globalScene.scaledCanvas.width - 2, + globalScene.scaledCanvas.height - 16 - this.navigationContainer.height - 2, ); this.optionsBg.setName("window-options-bg"); this.optionsBg.setOrigin(0, 0); const actionsBg = addWindow( 0, - globalScene.game.canvas.height / 6 - this.navigationContainer.height, - globalScene.game.canvas.width / 6 - 2, + globalScene.scaledCanvas.height - this.navigationContainer.height, + globalScene.scaledCanvas.width - 2, 22, ); actionsBg.setOrigin(0, 0); @@ -375,7 +375,7 @@ export class AbstractSettingsUiHandler extends MessageUiHandler { const ret = super.setCursor(cursor); if (!this.cursorObj) { - const cursorWidth = globalScene.game.canvas.width / 6 - (this.scrollBar.visible ? 16 : 10); + const cursorWidth = globalScene.scaledCanvas.width - (this.scrollBar.visible ? 16 : 10); this.cursorObj = globalScene.add.nineslice(0, 0, "summary_moves_cursor", undefined, cursorWidth, 16, 1, 1, 1, 1); this.cursorObj.setOrigin(0, 0); this.optionsContainer.add(this.cursorObj); diff --git a/src/ui/settings/navigation-menu.ts b/src/ui/settings/navigation-menu.ts index 2f3aa50f7f3..b889ce57b61 100644 --- a/src/ui/settings/navigation-menu.ts +++ b/src/ui/settings/navigation-menu.ts @@ -124,7 +124,7 @@ export class NavigationMenu extends Phaser.GameObjects.Container { */ setup() { const navigationManager = NavigationManager.getInstance(); - const headerBg = addWindow(0, 0, globalScene.game.canvas.width / 6 - 2, 24); + const headerBg = addWindow(0, 0, globalScene.scaledCanvas.width - 2, 24); headerBg.setOrigin(0, 0); this.add(headerBg); this.width = headerBg.width; diff --git a/src/ui/starter-select-ui-handler.ts b/src/ui/starter-select-ui-handler.ts index dac6bc677a2..8267a4a3835 100644 --- a/src/ui/starter-select-ui-handler.ts +++ b/src/ui/starter-select-ui-handler.ts @@ -408,15 +408,15 @@ export class StarterSelectUiHandler extends MessageUiHandler { const langSettingKey = Object.keys(languageSettings).find(lang => currentLanguage.includes(lang)) ?? "en"; const textSettings = languageSettings[langSettingKey]; - this.starterSelectContainer = globalScene.add.container(0, -globalScene.game.canvas.height / 6); + this.starterSelectContainer = globalScene.add.container(0, -globalScene.scaledCanvas.height); this.starterSelectContainer.setVisible(false); ui.add(this.starterSelectContainer); const bgColor = globalScene.add.rectangle( 0, 0, - globalScene.game.canvas.width / 6, - globalScene.game.canvas.height / 6, + globalScene.scaledCanvas.width, + globalScene.scaledCanvas.height, 0x006860, ); bgColor.setOrigin(0, 0); @@ -1164,7 +1164,7 @@ export class StarterSelectUiHandler extends MessageUiHandler { this.filterInstructionsContainer.setVisible(true); this.starterSelectContainer.add(this.filterInstructionsContainer); - this.starterSelectMessageBoxContainer = globalScene.add.container(0, globalScene.game.canvas.height / 6); + this.starterSelectMessageBoxContainer = globalScene.add.container(0, globalScene.scaledCanvas.height); this.starterSelectMessageBoxContainer.setVisible(false); this.starterSelectContainer.add(this.starterSelectMessageBoxContainer); @@ -1188,12 +1188,10 @@ export class StarterSelectUiHandler extends MessageUiHandler { this.starterSelectContainer.add(this.statsContainer); // add the info overlay last to be the top most ui element and prevent the IVs from overlaying this - const overlayScale = 1; this.moveInfoOverlay = new MoveInfoOverlay({ - scale: overlayScale, top: true, x: 1, - y: globalScene.game.canvas.height / 6 - MoveInfoOverlay.getHeight(overlayScale) - 29, + y: globalScene.scaledCanvas.height - MoveInfoOverlay.getHeight() - 29, }); this.starterSelectContainer.add(this.moveInfoOverlay); @@ -1394,7 +1392,7 @@ export class StarterSelectUiHandler extends MessageUiHandler { this.starterSelectMessageBoxContainer.setY(0); this.message.setY(4); } else { - this.starterSelectMessageBoxContainer.setY(globalScene.game.canvas.height / 6); + this.starterSelectMessageBoxContainer.setY(globalScene.scaledCanvas.height); this.starterSelectMessageBox.setOrigin(0, 1); this.message.setY(singleLine ? -22 : -37); } diff --git a/src/ui/title-ui-handler.ts b/src/ui/title-ui-handler.ts index 66cb69f6a26..ab7a4d020fa 100644 --- a/src/ui/title-ui-handler.ts +++ b/src/ui/title-ui-handler.ts @@ -36,12 +36,12 @@ export class TitleUiHandler extends OptionSelectUiHandler { const ui = this.getUi(); - this.titleContainer = globalScene.add.container(0, -(globalScene.game.canvas.height / 6)); + this.titleContainer = globalScene.add.container(0, -globalScene.scaledCanvas.height); this.titleContainer.setName("title"); this.titleContainer.setAlpha(0); ui.add(this.titleContainer); - const logo = globalScene.add.image(globalScene.game.canvas.width / 6 / 2, 8, "logo"); + const logo = globalScene.add.image(globalScene.scaledCanvas.width / 2, 8, "logo"); logo.setOrigin(0.5, 0); this.titleContainer.add(logo); @@ -53,7 +53,7 @@ export class TitleUiHandler extends OptionSelectUiHandler { this.playerCountLabel = addTextObject( // Actual y position will be determined after the title menu has been populated with options - globalScene.game.canvas.width / 6 - 2, + globalScene.scaledCanvas.width - 2, 0, `? ${i18next.t("menu:playersOnline")}`, TextStyle.MESSAGE, @@ -131,7 +131,7 @@ export class TitleUiHandler extends OptionSelectUiHandler { if (ret) { // Moving player count to top of the menu - this.playerCountLabel.setY(globalScene.game.canvas.height / 6 - 13 - this.getWindowHeight()); + this.playerCountLabel.setY(globalScene.scaledCanvas.height - 13 - this.getWindowHeight()); this.splashMessage = randItem(getSplashMessages()); this.splashMessageText.setText( diff --git a/src/ui/ui.ts b/src/ui/ui.ts index 4c8f0613122..081ba46401c 100644 --- a/src/ui/ui.ts +++ b/src/ui/ui.ts @@ -121,7 +121,7 @@ export class UI extends Phaser.GameObjects.Container { private overlayActive: boolean; constructor() { - super(globalScene, 0, globalScene.game.canvas.height / 6); + super(globalScene, 0, globalScene.scaledCanvas.height); this.mode = UiMode.MESSAGE; this.modeChain = []; @@ -180,13 +180,7 @@ export class UI extends Phaser.GameObjects.Container { for (const handler of this.handlers) { handler.setup(); } - this.overlay = globalScene.add.rectangle( - 0, - 0, - globalScene.game.canvas.width / 6, - globalScene.game.canvas.height / 6, - 0, - ); + this.overlay = globalScene.add.rectangle(0, 0, globalScene.scaledCanvas.width, globalScene.scaledCanvas.height, 0); this.overlay.setName("rect-ui-overlay"); this.overlay.setOrigin(0, 0); globalScene.uiContainer.add(this.overlay); @@ -437,15 +431,15 @@ export class UI extends Phaser.GameObjects.Container { if (isTouch) { // If we are in the top left quadrant on mobile, move the tooltip to the top right corner if (pointerX <= globalScene.game.canvas.width / 2 && pointerY <= globalScene.game.canvas.height / 2) { - x = globalScene.game.canvas.width / 6 - tooltipWidth - padding; + x = globalScene.scaledCanvas.width - tooltipWidth - padding; } } else { // If the tooltip would go offscreen on the right, or is close to it, move to the left of the cursor - if (x + tooltipWidth + padding > globalScene.game.canvas.width / 6) { + if (x + tooltipWidth + padding > globalScene.scaledCanvas.width) { x = Math.max(padding, pointerX / 6 - tooltipWidth - padding); } // If the tooltip would go offscreen at the bottom, or is close to it, move above the cursor - if (y + tooltipHeight + padding > globalScene.game.canvas.height / 6) { + if (y + tooltipHeight + padding > globalScene.scaledCanvas.height) { y = Math.max(padding, pointerY / 6 - tooltipHeight - padding); } }