From c8ba3d8ab93f1318e58f79ce28c6eab7404cfdbc Mon Sep 17 00:00:00 2001 From: kharhamel Date: Wed, 21 Apr 2021 18:27:33 +0200 Subject: [PATCH] FIX: use phaser Zones instead of rectangles objects to create tap zones --- front/src/Phaser/Login/EnableCameraScene.ts | 16 +++++----------- front/src/Phaser/Login/LoginScene.ts | 13 ++++--------- front/src/Phaser/Login/SelectCharacterScene.ts | 14 ++++---------- front/src/Phaser/Login/SelectCompanionScene.ts | 9 ++++----- 4 files changed, 17 insertions(+), 35 deletions(-) diff --git a/front/src/Phaser/Login/EnableCameraScene.ts b/front/src/Phaser/Login/EnableCameraScene.ts index 6a91fc34..cced9732 100644 --- a/front/src/Phaser/Login/EnableCameraScene.ts +++ b/front/src/Phaser/Login/EnableCameraScene.ts @@ -9,6 +9,7 @@ import {SoundMeterSprite} from "../Components/SoundMeterSprite"; import {HtmlUtils} from "../../WebRtc/HtmlUtils"; import {touchScreenManager} from "../../Touch/TouchScreenManager"; import {PinchManager} from "../UserInput/PinchManager"; +import Zone = Phaser.GameObjects.Zone; export const EnableCameraSceneName = "EnableCameraScene"; enum LoginTextures { @@ -38,7 +39,7 @@ export class EnableCameraScene extends Phaser.Scene { private microphoneNameField!: TextField; private repositionCallback!: (this: Window, ev: UIEvent) => void; - private mobileTapRectangle!: Rectangle; + private mobileTapZone!: Zone; constructor() { super({ key: EnableCameraSceneName @@ -64,15 +65,8 @@ export class EnableCameraScene extends Phaser.Scene { this.pressReturnField = new TextField(this, this.game.renderer.width / 2, this.game.renderer.height - 30, 'Touch here\n\n or \n\nPress enter to start'); // For mobile purposes - we need a big enough touchable area. - this.mobileTapRectangle = this.add - .rectangle( - this.game.renderer.width / 2, - this.game.renderer.height - 30, - 200, - 50, - ) - .setInteractive() - .on("pointerdown", () => { + this.mobileTapZone = this.add.zone(this.game.renderer.width / 2,this.game.renderer.height - 30,200,50) + .setInteractive().on("pointerdown", () => { this.login(); }); @@ -215,7 +209,7 @@ export class EnableCameraScene extends Phaser.Scene { } this.textField.x = this.game.renderer.width / 2; - this.mobileTapRectangle.x = this.game.renderer.width / 2; + this.mobileTapZone.x = this.game.renderer.width / 2; this.cameraNameField.x = this.game.renderer.width / 2; this.microphoneNameField.x = this.game.renderer.width / 2; this.pressReturnField.x = this.game.renderer.width / 2; diff --git a/front/src/Phaser/Login/LoginScene.ts b/front/src/Phaser/Login/LoginScene.ts index 057cb6ae..36de4472 100644 --- a/front/src/Phaser/Login/LoginScene.ts +++ b/front/src/Phaser/Login/LoginScene.ts @@ -24,7 +24,7 @@ export class LoginScene extends ResizableScene { private pressReturnField!: TextField; private logo!: Image; private name: string = ''; - private mobileTapRectangle!: Rectangle; + private mobileTapZone!: Phaser.GameObjects.Zone; constructor() { super({ @@ -60,13 +60,8 @@ export class LoginScene extends ResizableScene { this.nameInput.focus(); }) // For mobile purposes - we need a big enough touchable area. - this.mobileTapRectangle = this.add.rectangle( - this.game.renderer.width / 2, - 130, - this.game.renderer.width / 2, - 60, - ).setInteractive() - .on('pointerdown', () => { + this.mobileTapZone = this.add.zone(this.game.renderer.width / 2,130,this.game.renderer.width / 2,60,) + .setInteractive().on('pointerdown', () => { this.login(this.name) }) this.pressReturnField = new TextField(this, this.game.renderer.width / 2, 130, 'Touch here\n\n or \n\nPress enter to start') @@ -105,7 +100,7 @@ export class LoginScene extends ResizableScene { 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.mobileTapRectangle.x = this.game.renderer.width / 2; + this.mobileTapZone.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; diff --git a/front/src/Phaser/Login/SelectCharacterScene.ts b/front/src/Phaser/Login/SelectCharacterScene.ts index 3c8d0281..8e1f4481 100644 --- a/front/src/Phaser/Login/SelectCharacterScene.ts +++ b/front/src/Phaser/Login/SelectCharacterScene.ts @@ -12,6 +12,7 @@ import {AbstractCharacterScene} from "./AbstractCharacterScene"; import {areCharacterLayersValid} from "../../Connexion/LocalUser"; import {touchScreenManager} from "../../Touch/TouchScreenManager"; import {PinchManager} from "../UserInput/PinchManager"; +import Zone = Phaser.GameObjects.Zone; //todo: put this constants in a dedicated file @@ -37,7 +38,7 @@ export class SelectCharacterScene extends AbstractCharacterScene { private selectedRectangleYPos = 0; // Number of the character selected in the columns private selectedPlayer!: Phaser.Physics.Arcade.Sprite|null; // null if we are selecting the "customize" option private players: Array = new Array(); - private mobileTapRectangle!: Rectangle; + private mobileTapZone!: Zone; private playerModels!: BodyResourceDescriptionInterface[]; constructor() { @@ -77,15 +78,8 @@ export class SelectCharacterScene extends AbstractCharacterScene { 90 + 32 * Math.ceil( this.playerModels.length / this.nbCharactersPerRow) + 60, 'Touch here\n\n or \n\nPress enter to start'); // For mobile purposes - we need a big enough touchable area. - this.mobileTapRectangle = this.add - .rectangle( - this.game.renderer.width / 2, - 275, - this.game.renderer.width / 2, - 50, - ) - .setInteractive() - .on("pointerdown", () => { + this.mobileTapZone = this.add.zone(this.game.renderer.width / 2, 275, this.game.renderer.width / 2, 50) + .setInteractive().on("pointerdown", () => { this.nextScene(); }); diff --git a/front/src/Phaser/Login/SelectCompanionScene.ts b/front/src/Phaser/Login/SelectCompanionScene.ts index aeacd0c2..80c2a5b4 100644 --- a/front/src/Phaser/Login/SelectCompanionScene.ts +++ b/front/src/Phaser/Login/SelectCompanionScene.ts @@ -10,6 +10,7 @@ import { CompanionResourceDescriptionInterface } from "../Companion/CompanionTex import { getAllCompanionResources } from "../Companion/CompanionTexturesLoadingManager"; import {touchScreenManager} from "../../Touch/TouchScreenManager"; import {PinchManager} from "../UserInput/PinchManager"; +import Zone = Phaser.GameObjects.Zone; export const SelectCompanionSceneName = "SelectCompanionScene"; @@ -31,7 +32,7 @@ export class SelectCompanionScene extends ResizableScene { private companions: Array = new Array(); private companionModels: Array = [null]; - private confirmTouchArea!: Rectangle; + private confirmTouchArea!: Zone; constructor() { super({ @@ -69,10 +70,8 @@ export class SelectCompanionScene extends ResizableScene { confirmTouchAreaY, 'Touch here\n\n or \n\n press enter to start' ); - this.confirmTouchArea = this.add - .rectangle(this.game.renderer.width / 2, confirmTouchAreaY, 200, 50) - .setInteractive() - .on("pointerdown", this.nextScene.bind(this)); + this.confirmTouchArea = this.add.zone(this.game.renderer.width / 2, confirmTouchAreaY, 200, 50) + .setInteractive().on("pointerdown", this.nextScene.bind(this)); const rectangleXStart = this.game.renderer.width / 2 - (this.nbCharactersPerRow / 2) * 32 + 16; this.selectedRectangle = this.add.rectangle(rectangleXStart, 90, 32, 32).setStrokeStyle(2, 0xFFFFFF);