noby
/
workadventure
2
2
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

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

This commit is contained in:
kharhamel 2021-04-21 18:27:33 +02:00
parent 5dc2f0ac47
commit c8ba3d8ab9
4 changed files with 17 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
front/src/Phaser/Login/EnableCameraScene.ts
View File

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

13
front/src/Phaser/Login/LoginScene.ts
View File

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

14
front/src/Phaser/Login/SelectCharacterScene.ts
View File

@ -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
.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();
});

9
front/src/Phaser/Login/SelectCompanionScene.ts
View File

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