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

Add touch input support to login scenes (thx @TabscoEye)

This commit is contained in:
PizZaKatZe 2021-02-03 23:22:23 +01:00
parent c7dcaec940
commit e807350279
3 changed files with 59 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,6 +1,7 @@
import {gameManager} from "../Game/GameManager";
import {TextField} from "../Components/TextField";
import Image = Phaser.GameObjects.Image;
import Rectangle = Phaser.GameObjects.Rectangle;
import {mediaManager} from "../../WebRtc/MediaManager";
import {RESOLUTION} from "../../Enum/EnvironmentVariable";
import {SoundMeter} from "../Components/SoundMeter";
@ -35,6 +36,7 @@ export class EnableCameraScene extends Phaser.Scene {
private microphoneNameField!: TextField;
private repositionCallback!: (this: Window, ev: UIEvent) => void;
private mobileTapRectangle!: Rectangle;
constructor() {
super({
key: EnableCameraSceneName
@ -54,7 +56,19 @@ export class EnableCameraScene extends Phaser.Scene {
create() {
this.textField = new TextField(this, this.game.renderer.width / 2, 20, 'Turn on your camera and microphone');
this.pressReturnField = new TextField(this, this.game.renderer.width / 2, this.game.renderer.height - 30, 'Press enter to start');
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.login();
});
this.cameraNameField = new TextField(this, this.game.renderer.width / 2, this.game.renderer.height - 60, '');
@ -195,6 +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.cameraNameField.x = this.game.renderer.width / 2;
this.microphoneNameField.x = this.game.renderer.width / 2;
this.pressReturnField.x = this.game.renderer.width / 2;

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

@ -5,6 +5,8 @@ import Image = Phaser.GameObjects.Image;
import {SelectCharacterSceneName} from "./SelectCharacterScene";
import {ResizableScene} from "./ResizableScene";
import {isUserNameValid, maxUserNameLength} from "../../Connexion/LocalUser";
import { localUserStore } from "../../Connexion/LocalUserStore";
import Rectangle = Phaser.GameObjects.Rectangle;
//todo: put this constants in a dedicated file
export const LoginSceneName = "LoginScene";
@ -20,6 +22,7 @@ export class LoginScene extends ResizableScene {
private pressReturnField!: TextField;
private logo!: Image;
private name: string = '';
private mobileTapRectangle!: Rectangle;
constructor() {
super({
@ -37,17 +40,36 @@ export class LoginScene extends ResizableScene {
create() {
this.textField = new TextField(this, this.game.renderer.width / 2, 50, 'Enter your name:');
this.nameInput = new TextInput(this, this.game.renderer.width / 2, 70, maxUserNameLength, this.name,(text: string) => {
this.name = text;
});
localUserStore.setName(text);
})
.setInteractive()
.on('pointerdown', () => {
this.nameInput.focus();
})
this.pressReturnField = new TextField(this, this.game.renderer.width / 2, 130, 'Press enter to start');
this.textField = new TextField(this, this.game.renderer.width / 2, 50, 'Enter your name:')
.setInteractive()
.on('pointerdown', () => {
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.login(this.name)
})
this.pressReturnField = new TextField(this, this.game.renderer.width / 2, 130, 'Touch here\n\n or \n\nPress enter to start')
this.logo = new Image(this, this.game.renderer.width - 30, this.game.renderer.height - 20, LoginTextures.icon);
this.add.existing(this.logo);
const infoText = "Commands: \n - Arrows or Z,Q,S,D to move\n - SHIFT to run";
const infoText = "Commands: \n - Arrows or W, A, S, D to move\n - SHIFT to run";
this.infoTextField = new TextField(this, 10, this.game.renderer.height - 35, infoText, false);
this.input.keyboard.on('keyup-ENTER', () => {
@ -66,6 +88,7 @@ export class LoginScene extends ResizableScene {
}
private login(name: string): void {
if (this.name === '') return
gameManager.setPlayerName(name);
this.scene.stop(LoginSceneName)
@ -77,6 +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.logo.x = this.game.renderer.width - 30;
this.logo.y = this.game.renderer.height - 20;
this.infoTextField.y = this.game.renderer.height - 35;

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

@ -36,6 +36,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 playerModels!: BodyResourceDescriptionInterface[];
constructor() {
@ -69,8 +70,20 @@ export class SelectCharacterScene extends AbstractCharacterScene {
this.pressReturnField = new TextField(
this,
this.game.renderer.width / 2,
90 + 32 * Math.ceil( this.playerModels.length / this.nbCharactersPerRow) + 40,
'Press enter to start');
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.nextScene();
});
const rectangleXStart = this.game.renderer.width / 2 - (this.nbCharactersPerRow / 2) * 32 + 16;