Implement nineslice for some UI windows

src/battle-scene.ts

@@ -158,6 +158,7 @@ export default class BattleScene extends Phaser.Scene {
 		this.loadImage('bg_fight', 'ui');
 		this.loadAtlas('prompt', 'ui');
 		this.loadImage('cursor', 'ui');
+		this.loadImage('window', 'ui');
 		this.loadImage('pbinfo_player', 'ui');
 		this.loadImage('pbinfo_player_mini', 'ui');
 		this.loadImage('pbinfo_enemy_mini', 'ui');
@@ -166,11 +167,7 @@ export default class BattleScene extends Phaser.Scene {
 		this.loadAtlas('overlay_hp', 'ui');
 		this.loadImage('overlay_exp', 'ui');
 		this.loadImage('icon_owned', 'ui');
-		this.loadImage('level_up_stats', 'ui');
 		this.loadImage('ability_bar', 'ui');
-		this.loadImage('ball_window', 'ui');
-		this.loadImage('boolean_window', 'ui');
-		this.loadImage('game_mode_select_window', 'ui');
 
 		this.loadImage('party_bg', 'ui');
 		this.loadImage('party_bg_double', 'ui');

src/main.ts

@@ -15,7 +15,7 @@ const config: Phaser.Types.Core.GameConfig = {
 };
 
 const setPositionRelative = function (guideObject: any, x: number, y: number) {
-	if (guideObject && guideObject.hasOwnProperty('width') && guideObject.hasOwnProperty('height')) {
+	if (guideObject && guideObject instanceof Phaser.GameObjects.GameObject) {
 		const offsetX = guideObject.width * (-0.5 + (0.5 - guideObject.originX));
 		const offsetY = guideObject.height * (-0.5 + (0.5 - guideObject.originY));
 		this.setPosition(guideObject.x + offsetX + x, guideObject.y + offsetY + y);
@@ -27,6 +27,7 @@ const setPositionRelative = function (guideObject: any, x: number, y: number) {
 
 Phaser.GameObjects.Sprite.prototype.setPositionRelative = setPositionRelative;
 Phaser.GameObjects.Image.prototype.setPositionRelative = setPositionRelative;
+Phaser.GameObjects.NineSlice.prototype.setPositionRelative = setPositionRelative;
 Phaser.GameObjects.Text.prototype.setPositionRelative = setPositionRelative;
 
 document.fonts.load('16px emerald').then(() => document.fonts.load('10px pkmnems'));

src/ui/ball-ui-handler.ts

@@ -8,7 +8,7 @@ import UiHandler from "./uiHandler";
 
 export default class BallUiHandler extends UiHandler {
   private pokeballSelectContainer: Phaser.GameObjects.Container;
-  private pokeballSelectBg: Phaser.GameObjects.Image;
+  private pokeballSelectBg: Phaser.GameObjects.NineSlice;
   private countsText: Phaser.GameObjects.Text;
 
   private cursorObj: Phaser.GameObjects.Image;
@@ -24,7 +24,7 @@ export default class BallUiHandler extends UiHandler {
     this.pokeballSelectContainer.setVisible(false);
     ui.add(this.pokeballSelectContainer);
 
-    this.pokeballSelectBg = this.scene.add.image(0, 0, 'ball_window');
+    this.pokeballSelectBg = this.scene.add.nineslice(0, 0, 'window', null, 114, 96, 6, 6, 6, 6);
     this.pokeballSelectBg.setOrigin(0, 1);
     this.pokeballSelectContainer.add(this.pokeballSelectBg);
 

src/ui/battle-message-ui-handler.ts

@@ -54,7 +54,7 @@ export default class BattleMessageUiHandler extends MessageUiHandler {
 
     this.levelUpStatsContainer = levelUpStatsContainer;
 
-    const levelUpStatsBg = this.scene.add.image((this.scene.game.canvas.width / 6), -100, 'level_up_stats');
+    const levelUpStatsBg = this.scene.add.nineslice((this.scene.game.canvas.width / 6), -100, 'window', null, 118, 100, 6, 6, 6, 6);
     levelUpStatsBg.setOrigin(1, 0);
     levelUpStatsContainer.add(levelUpStatsBg);
 
@@ -75,6 +75,7 @@ export default class BattleMessageUiHandler extends MessageUiHandler {
 
     const levelUpStatsValuesContent = addTextObject(this.scene, (this.scene.game.canvas.width / 6) - 7, -94, '', TextStyle.WINDOW, { maxLines: 6 });
     levelUpStatsValuesContent.setOrigin(1, 0);
+    levelUpStatsValuesContent.setAlign('right');
     levelUpStatsContainer.add(levelUpStatsValuesContent);
 
     this.levelUpStatsValuesContent = levelUpStatsValuesContent;

src/ui/confirm-ui-handler.ts

@@ -1,6 +1,5 @@
-import BattleScene, { Button } from "../battle-scene";
+import BattleScene from "../battle-scene";
 import OptionSelectUiHandler from "./option-select-ui-handler";
-import { addTextObject, TextStyle } from "./text";
 import { Mode } from "./ui";
 
 export default class ConfirmUiHandler extends OptionSelectUiHandler {
@@ -11,11 +10,11 @@ export default class ConfirmUiHandler extends OptionSelectUiHandler {
     super(scene, Mode.CONFIRM);
   }
 
-  getWindowName(): string {
+  getWindowWidth(): integer {
-    return 'boolean_window';
+    return 48;
   }
 
-  getWindowWidth(): integer {
+  getWindowHeight(): integer {
     return 48;
   }
 

src/ui/game-mode-select-ui-handler.ts

@@ -8,11 +8,11 @@ export default class GameModeSelectUiHandler extends OptionSelectUiHandler {
     super(scene, Mode.GAME_MODE_SELECT);
   }
 
-  getWindowName(): string {
+  getWindowWidth(): integer {
-    return 'game_mode_select_window';
+    return 64;
   }
 
-  getWindowWidth(): integer {
+  getWindowHeight(): number {
     return 64;
   }
 

src/ui/option-select-ui-handler.ts

@@ -7,7 +7,7 @@ export default abstract class OptionSelectUiHandler extends UiHandler {
   protected handlers: Function[];
 
   protected optionSelectContainer: Phaser.GameObjects.Container;
-  protected optionSelectBg: Phaser.GameObjects.Image;
+  protected optionSelectBg: Phaser.GameObjects.NineSlice;
 
   private cursorObj: Phaser.GameObjects.Image;
 
@@ -15,10 +15,10 @@ export default abstract class OptionSelectUiHandler extends UiHandler {
     super(scene, mode);
   }
 
-  abstract getWindowName(): string;
-
   abstract getWindowWidth(): integer;
 
+  abstract getWindowHeight(): integer;
+
   abstract getOptions(): string[];
 
   setup() {
@@ -28,7 +28,7 @@ export default abstract class OptionSelectUiHandler extends UiHandler {
     this.optionSelectContainer.setVisible(false);
     ui.add(this.optionSelectContainer);
 
-    this.optionSelectBg = this.scene.add.image(0, 0, this.getWindowName());
+    this.optionSelectBg = this.scene.add.nineslice(0, 0, 'window', null, this.getWindowWidth(), this.getWindowHeight(), 6, 6, 6, 6);
     this.optionSelectBg.setOrigin(0, 1);
     this.optionSelectContainer.add(this.optionSelectBg);