Merge pull request #293 from thecodingmachine/responsive_scenes

Making scenes responsive
This commit is contained in:
David Négrier 2020-10-08 17:53:54 +02:00 committed by GitHub
commit 120804e774
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 72 additions and 22 deletions

View File

@ -38,4 +38,16 @@ export class TextInput extends Phaser.GameObjects.BitmapText {
getText(): string {
return this.text;
}
setX(x: number): this {
super.setX(x);
this.underLine.x = x;
return this;
}
setY(y: number): this {
super.setY(y);
this.underLine.y = y+1;
return this;
}
}

View File

@ -45,6 +45,7 @@ import {connectionManager} from "../../Connexion/ConnectionManager";
import {RoomConnection} from "../../Connexion/RoomConnection";
import {GlobalMessageManager} from "../../Administration/GlobalMessageManager";
import {ConsoleGlobalMessageManager} from "../../Administration/ConsoleGlobalMessageManager";
import {ResizableScene} from "../Login/ResizableScene";
export enum Textures {
@ -86,7 +87,7 @@ interface DeleteGroupEventInterface {
groupId: number
}
export class GameScene extends Phaser.Scene implements CenterListener {
export class GameScene extends ResizableScene implements CenterListener {
GameManager : GameManager;
Terrains : Array<Phaser.Tilemaps.Tileset>;
CurrentPlayer!: CurrentGamerInterface;
@ -132,7 +133,6 @@ export class GameScene extends Phaser.Scene implements CenterListener {
private startLayerName: string|undefined;
private presentationModeSprite!: Sprite;
private chatModeSprite!: Sprite;
private onResizeCallback!: (this: Window, ev: UIEvent) => void;
private gameMap!: GameMap;
private actionableItems: Map<number, ActionableItem> = new Map<number, ActionableItem>();
// The item that can be selected by pressing the space key.
@ -271,7 +271,6 @@ export class GameScene extends Phaser.Scene implements CenterListener {
this.scene.stop(this.scene.key);
this.scene.remove(this.scene.key);
window.removeEventListener('resize', this.onResizeCallback);
})
connection.onActionableEvent((message => {
@ -565,8 +564,6 @@ export class GameScene extends Phaser.Scene implements CenterListener {
this.switchLayoutMode();
});
this.onResizeCallback = this.onResize.bind(this);
window.addEventListener('resize', this.onResizeCallback);
this.reposition();
// From now, this game scene will be notified of reposition events
@ -957,7 +954,6 @@ export class GameScene extends Phaser.Scene implements CenterListener {
this.simplePeer.unregister();
this.scene.stop();
this.scene.remove(this.scene.key);
window.removeEventListener('resize', this.onResizeCallback);
this.scene.start(nextSceneKey.key, {
startLayerName: nextSceneKey.hash
});
@ -1156,7 +1152,7 @@ export class GameScene extends Phaser.Scene implements CenterListener {
this.connection.emitActionableEvent(itemId, eventName, state, parameters);
}
private onResize(): void {
public onResize(): void {
this.reposition();
// Send new viewport to server

View File

@ -6,6 +6,7 @@ import {LAYERS, loadAllLayers} from "../Entity/body_character";
import Sprite = Phaser.GameObjects.Sprite;
import Container = Phaser.GameObjects.Container;
import {gameManager} from "../Game/GameManager";
import {ResizableScene} from "./ResizableScene";
export const CustomizeSceneName = "CustomizeScene";
@ -16,7 +17,7 @@ enum CustomizeTextures{
arrowUp = "arrow_up",
}
export class CustomizeScene extends Phaser.Scene {
export class CustomizeScene extends ResizableScene {
private textField!: TextField;
private enterField!: TextField;
@ -35,8 +36,6 @@ export class CustomizeScene extends Phaser.Scene {
private containersRow: Array<Array<Container>> = new Array<Array<Container>>();
private activeRow = 0;
private repositionCallback!: (this: Window, ev: UIEvent) => void;
constructor() {
super({
key: CustomizeSceneName
@ -144,10 +143,6 @@ export class CustomizeScene extends Phaser.Scene {
this.moveLayers();
}
});
this.repositionCallback = this.reposition.bind(this);
window.addEventListener('resize', this.repositionCallback);
}
update(time: number, delta: number): void {
super.update(time, delta);
@ -249,7 +244,7 @@ export class CustomizeScene extends Phaser.Scene {
}
}
private reposition() {
public onResize(): void {
this.moveLayers();
this.Rectangle.x = this.cameras.main.worldView.x + this.cameras.main.width / 2;

View File

@ -7,6 +7,7 @@ import Rectangle = Phaser.GameObjects.Rectangle;
import {PLAYER_RESOURCES, PlayerResourceDescriptionInterface} from "../Entity/Character";
import {cypressAsserter} from "../../Cypress/CypressAsserter";
import {SelectCharacterSceneName} from "./SelectCharacterScene";
import {ResizableScene} from "./ResizableScene";
//todo: put this constants in a dedicated file
export const LoginSceneName = "LoginScene";
@ -15,12 +16,12 @@ enum LoginTextures {
mainFont = "main_font"
}
export class LoginScene extends Phaser.Scene {
private nameInput: TextInput|null = null;
private textField: TextField|null = null;
private infoTextField: TextField|null = null;
private pressReturnField: TextField|null = null;
private logo: Image|null = null;
export class LoginScene extends ResizableScene {
private nameInput!: TextInput;
private textField!: TextField;
private infoTextField!: TextField;
private pressReturnField!: TextField;
private logo!: Image;
private name: string = '';
constructor() {
@ -93,4 +94,14 @@ export class LoginScene extends Phaser.Scene {
this.scene.start(SelectCharacterSceneName);
}
public onResize(ev: UIEvent): void {
this.textField.x = this.game.renderer.width / 2;
this.nameInput.setX(this.game.renderer.width / 2 - 64);
this.pressReturnField.x = this.game.renderer.width / 2;
this.logo.x = this.game.renderer.width - 30;
this.logo.y = this.game.renderer.height - 20;
this.infoTextField.y = this.game.renderer.height - 35;
}
}

View File

@ -0,0 +1,5 @@
import {Scene} from "phaser";
export abstract class ResizableScene extends Scene {
public abstract onResize(ev: UIEvent): void;
}

View File

@ -5,6 +5,7 @@ import Rectangle = Phaser.GameObjects.Rectangle;
import {PLAYER_RESOURCES, PlayerResourceDescriptionInterface} from "../Entity/Character";
import {EnableCameraSceneName} from "./EnableCameraScene";
import {CustomizeSceneName} from "./CustomizeScene";
import {ResizableScene} from "./ResizableScene";
//todo: put this constants in a dedicated file
@ -17,7 +18,7 @@ enum LoginTextures {
customizeButtonSelected = "customize_button_selected"
}
export class SelectCharacterScene extends Phaser.Scene {
export class SelectCharacterScene extends ResizableScene {
private readonly nbCharactersPerRow = 4;
private textField!: TextField;
private pressReturnField!: TextField;
@ -242,4 +243,26 @@ export class SelectCharacterScene extends Phaser.Scene {
window.localStorage.setItem('selectedPlayer', String(playerNumber));
}
}
public onResize(ev: UIEvent): void {
this.textField.x = this.game.renderer.width / 2;
this.pressReturnField.x = this.game.renderer.width / 2;
this.logo.x = this.game.renderer.width - 30;
this.logo.y = this.game.renderer.height - 20;
this.customizeButton.x = this.game.renderer.width / 2;
this.customizeButtonSelected.x = this.game.renderer.width / 2;
for (let i = 0; i <PLAYER_RESOURCES.length; i++) {
const player = this.players[i];
const col = i % this.nbCharactersPerRow;
const row = Math.floor(i / this.nbCharactersPerRow);
const [x, y] = this.getCharacterPosition(col, row);
player.x = x;
player.y = y;
}
this.updateSelectedPlayer();
}
}

View File

@ -12,6 +12,7 @@ import {OutlinePipeline} from "./Phaser/Shaders/OutlinePipeline";
import {CustomizeScene} from "./Phaser/Login/CustomizeScene";
import {CoWebsiteManager} from "./WebRtc/CoWebsiteManager";
import {connectionManager} from "./Connexion/ConnectionManager";
import {ResizableScene} from "./Phaser/Login/ResizableScene";
//CoWebsiteManager.loadCoWebsite('https://thecodingmachine.com');
connectionManager.init();
@ -55,6 +56,13 @@ window.addEventListener('resize', function (event) {
const {width, height} = CoWebsiteManager.getGameSize();
game.scale.resize(width / RESOLUTION, height / RESOLUTION);
// Let's trigger the onResize method of any active scene that is a ResizableScene
for (const scene of game.scene.getScenes(true)) {
if (scene instanceof ResizableScene) {
scene.onResize(event);
}
}
});
CoWebsiteManager.onStateChange(() => {
const {width, height} = CoWebsiteManager.getGameSize();