Merge pull request #925 from thecodingmachine/touchZones

FIX: use phaser Zones instead of rectangles objects to create tap zones

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
+        this.mobileTapZone = this.add.zone(this.game.renderer.width / 2,this.game.renderer.height - 30,200,50)
-          .rectangle(
+          .setInteractive().on("pointerdown", () => {
-            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;

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.mobileTapZone = this.add.zone(this.game.renderer.width / 2,130,this.game.renderer.width / 2,60,)
-            this.game.renderer.width / 2,
+            .setInteractive().on('pointerdown', () => {
-            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;

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<Phaser.Physics.Arcade.Sprite> = new Array<Phaser.Physics.Arcade.Sprite>();
-    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
+        this.mobileTapZone = this.add.zone(this.game.renderer.width / 2, 275, this.game.renderer.width / 2, 50)
-          .rectangle(
+          .setInteractive().on("pointerdown", () => {
-            this.game.renderer.width / 2,
-            275,
-            this.game.renderer.width / 2,
-            50,
-          )
-          .setInteractive()
-          .on("pointerdown", () => {
             this.nextScene();
           });
 

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<Phaser.Physics.Arcade.Sprite> = new Array<Phaser.Physics.Arcade.Sprite>();
     private companionModels: Array<CompanionResourceDescriptionInterface|null> = [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
+        this.confirmTouchArea = this.add.zone(this.game.renderer.width / 2, confirmTouchAreaY, 200, 50)
-            .rectangle(this.game.renderer.width / 2, confirmTouchAreaY, 200, 50)
+            .setInteractive().on("pointerdown", this.nextScene.bind(this));
-            .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);