Implement nineslice for some UI windows

pull/2/head
Flashfyre 2023-06-16 12:13:52 -04:00
parent cb2c77542d
commit 23de25d585
13 changed files with 18 additions and 20 deletions

Binary file not shown.

Before

Width:  |  Height:  |  Size: 411 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 3.0 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 330 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 426 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 3.3 KiB

View File

Before

Width:  |  Height:  |  Size: 295 B

After

Width:  |  Height:  |  Size: 295 B

View File

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

View File

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

View File

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

View File

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

View File

@ -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 {
return 'boolean_window';
getWindowWidth(): integer {
return 48;
}
getWindowWidth(): integer {
getWindowHeight(): integer {
return 48;
}

View File

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

View File

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