Merge b9c42bfaea into 375587213e

src/battle-scene.ts

@@ -478,8 +478,8 @@ export class BattleScene extends SceneBase {
 
     this.uiContainer = uiContainer;
 
-    const overlayWidth = this.game.canvas.width / 6;
+    const overlayWidth = this.scaledCanvas.width;
-    const overlayHeight = this.game.canvas.height / 6 - 48;
+    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.biomeWaveText = addTextObject(this.scaledCanvas.width - 2, 0, startingWave.toString(), TextStyle.BATTLE_INFO);
-      this.game.canvas.width / 6 - 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.pokemonInfoContainer = new PokemonInfoContainer(this.scaledCanvas.width + 52, -this.scaledCanvas.height + 66);
-      this.game.canvas.width / 6 + 52,
-      -(this.game.canvas.height / 6) + 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);
   }
 
   /**

src/data/mystery-encounters/encounters/bug-type-superfan-encounter.ts

@@ -715,15 +715,13 @@ function doBugTypeMoveTutor(): Promise<void> {
     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,
+      y: -MoveInfoOverlay.getHeight(true) - 1,
-      width: globalScene.game.canvas.width / 6 - 2,
+      width: globalScene.scaledCanvas.width - 2,
     });
     globalScene.ui.add(moveInfoOverlay);
 

src/data/mystery-encounters/encounters/global-trade-system-encounter.ts

@@ -564,14 +564,14 @@ function generateTradeOption(alreadyUsedSpecies: PokemonSpecies[], originalBst?:
 
 function showTradeBackground() {
   return new Promise<void>(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.scaledCanvas.width,
-      globalScene.game.canvas.height / 6,
+      globalScene.scaledCanvas.height,
       0,
     );
     flyByStaticBg.setName("Black Background");

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.scaledCanvas.width,
-    globalScene.game.canvas.height / 6,
+    globalScene.scaledCanvas.height,
     0,
   );
   transformationStaticBg.setName("Black Background");

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,
     );

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.scaledCanvas.height,
-        globalScene.game.canvas.width / 6,
+        globalScene.scaledCanvas.width,
-        globalScene.game.canvas.height / 6,
+        globalScene.scaledCanvas.height,
         0xffffff,
       );
       this.eggHatchOverlay.setOrigin(0, 0);

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.scaledCanvas.width / 2,
-      globalScene.game.canvas.height / 6 - 16,
+      globalScene.scaledCanvas.height - 16,
       i18next.t("battle:congratulations"),
       TextStyle.SUMMARY,
       { fontSize: "128px" },

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.scaledCanvas.height,
-      globalScene.game.canvas.width / 6,
+      globalScene.scaledCanvas.width,
-      globalScene.game.canvas.height / 6 - 48,
+      globalScene.scaledCanvas.height - 48,
       0xffffff,
     );
     this.evolutionOverlay.setOrigin(0).setAlpha(0);

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);

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());

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: () => {

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);
 

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);

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

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");
 

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,

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: () => {

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);
 

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: () => {

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);
 

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);

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 });

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
+    this.eggListMessageBoxContainer = globalScene.add.container(0, globalScene.scaledCanvas.height).setVisible(false);
-      .container(0, globalScene.game.canvas.height / 6)
-      .setVisible(false);
 
     const eggListMessageBox = addWindow(1, -1, 318, 28).setOrigin(0, 1);
     this.eggListMessageBoxContainer.add(eggListMessageBox);

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);

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);
 

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),
+      y: -MoveInfoOverlay.getHeight(true),
-      width: globalScene.game.canvas.width / 6 + 4,
+      width: globalScene.scaledCanvas.width + 4,
       hideEffectBox: true,
       hideBg: true,
     });

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,

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);

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,

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.scaledCanvas.width,
-          globalScene.game.canvas.height / 6,
+          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.scaledCanvas.width - (width + (marginRight - marginLeft))) / 2,
-      (-globalScene.game.canvas.height / 6 - (height + (marginBottom - marginTop))) / 2,
+      (-globalScene.scaledCanvas.height - (height + (marginBottom - marginTop))) / 2,
     );
 
     this.modalBg.setSize(width, height);

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(
+    this.checkButtonContainer = globalScene.add.container(globalScene.scaledCanvas.width - 1, OPTION_BUTTON_YPOSITION);
-      globalScene.game.canvas.width / 6 - 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.scaledCanvas.width / 2,
-      -(globalScene.game.canvas.height / 12),
+      -(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,
+      y: -MoveInfoOverlay.getHeight(true) - 1,
-      width: globalScene.game.canvas.width / 6 - 2,
+      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.scaledCanvas.width / 3 + 23,
-          -globalScene.game.canvas.height / 12 -
+          -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))),
         );

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
+   * If true, showing the overlay will only set it to active and populate the fields
-  top?: boolean; // should the effect box be on top?
+   * and the handler using this field has to manually call `setVisible` later.
-  right?: boolean; // should the effect box be on the right?
+   */
-  onSide?: boolean; // should the effect be on the side? ignores top argument if true
+  delayVisibility?: boolean;
-  //location and width of the component; unaffected by scaling
+  /** 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(1);
-    this.setScale(scale);
     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.x + ((options?.onSide && !options?.right ? EFF_WIDTH : 0) + BORDER),
-      maskPointOrigin.y + ((options?.top ? EFF_HEIGHT : 0) + BORDER - 2) * scale,
+      maskPointOrigin.y + ((options?.top ? EFF_HEIGHT : 0) + BORDER - 2),
-      width - ((options?.onSide ? EFF_WIDTH : 0) - BORDER * 2) * scale,
+      width - ((options?.onSide ? EFF_WIDTH : 0) - BORDER * 2),
-      (DESC_HEIGHT - (BORDER - 2) * 2) * scale,
+      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 {
+  static getWidth(): number {
-    return globalScene.game.canvas.width / GLOBAL_SCALE / 2;
+    return globalScene.scaledCanvas.width / 2;
   }
 
   // height of this element
-  static getHeight(scale: number, onSide?: boolean): number {
+  static getHeight(onSide?: boolean): number {
-    return (onSide ? Math.max(EFF_HEIGHT, DESC_HEIGHT) : EFF_HEIGHT + DESC_HEIGHT) * scale;
+    return onSide ? Math.max(EFF_HEIGHT, DESC_HEIGHT) : EFF_HEIGHT + DESC_HEIGHT;
   }
 }

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,

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: () => {

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
+    // prepare move overlay
-    const overlayScale = 1;
     this.moveInfoOverlay = new MoveInfoOverlay({
-      scale: overlayScale,
       top: true,
       x: 1,
-      y: -MoveInfoOverlay.getHeight(overlayScale) - 1,
+      y: -MoveInfoOverlay.getHeight() - 1,
-      width: globalScene.game.canvas.width / 12 - 30,
+      width: globalScene.scaledCanvas.width / 2 - 30,
     });
     ui.add(this.moveInfoOverlay);
 

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",

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(1);
-    this.setScale(this.scale);
     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.maskPointOriginX + BORDER,
-      this.maskPointOriginY + (BORDER - 2) * this.scale,
+      this.maskPointOriginY + (BORDER - 2),
-      this.width - BORDER * 2 * this.scale,
+      this.width - BORDER * 2,
-      (DESC_HEIGHT - (BORDER - 2) * 2) * this.scale,
+      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.maskPointOriginX + BORDER,
-      this.maskPointOriginY + (BORDER - 2) * this.scale + (48 - newHeight),
+      this.maskPointOriginY + (BORDER - 2) + (48 - newHeight),
-      this.width - BORDER * 2 * this.scale,
+      this.width - BORDER * 2,
-      (newHeight - (BORDER - 2) * 2) * this.scale,
+      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 {
+  static getWidth(): number {
-    return globalScene.game.canvas.width / GLOBAL_SCALE / 2;
+    return globalScene.scaledCanvas.width / 2;
   }
 
   // height of this element
-  static getHeight(scale: number, _onSide?: boolean): number {
+  static getHeight(): number {
-    return DESC_HEIGHT * scale;
+    return DESC_HEIGHT;
   }
 }

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.scaledCanvas.width,
-      globalScene.game.canvas.height / 6,
+      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);
     }

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.scaledCanvas.width,
-      globalScene.game.canvas.height / 6,
+      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);
     }

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.scaledCanvas.width,
-      -globalScene.game.canvas.height / 6,
+      -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);

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.scaledCanvas.width / 2,
-      globalScene.game.canvas.height / 6 - 16,
+      globalScene.scaledCanvas.height - 16,
       i18next.t("battle:congratulations"),
       TextStyle.SUMMARY,
       { fontSize: "128px" },

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.scaledCanvas.width,
-      -globalScene.game.canvas.height / 6,
+      -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);

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 {

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.scaledCanvas.width - this.getWindowWidth(),
-      -(globalScene.game.canvas.height / 6) + 28 + 21,
+      -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.scaledCanvas.width - this.getWindowWidth(),
-      -(globalScene.game.canvas.height / 6) + this.getWindowHeight() + 28 + 21 + 21,
+      -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.scaledCanvas.width - this.getWindowWidth(),
-      -(globalScene.game.canvas.height / 6) + this.getWindowHeight() + 28,
+      -globalScene.scaledCanvas.height + this.getWindowHeight() + 28,
       this.getWindowWidth(),
       this.getWindowHeight(),
     );

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.scaledCanvas.width - 2,
-      globalScene.game.canvas.height / 6 - 16 - this.navigationContainer.height - 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.scaledCanvas.height - this.navigationContainer.height,
-      globalScene.game.canvas.width / 6 - 2,
+      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.

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.scaledCanvas.width - 2,
-      globalScene.game.canvas.height / 6 - 16 - this.navigationContainer.height - 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.scaledCanvas.height - this.navigationContainer.height,
-      globalScene.game.canvas.width / 6 - 2,
+      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);

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;

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.scaledCanvas.width,
-      globalScene.game.canvas.height / 6,
+      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);
     }

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(

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(
+    this.overlay = globalScene.add.rectangle(0, 0, globalScene.scaledCanvas.width, globalScene.scaledCanvas.height, 0);
-      0,
-      0,
-      globalScene.game.canvas.width / 6,
-      globalScene.game.canvas.height / 6,
-      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);
         }
       }