_Bastler/partey_workadventure
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Making a nice "customize" button

Browse Source
This commit is contained in:
David Négrier
2020-07-28 15:53:44 +02:00
parent 866985326b
commit 6d0bccc0e1
8 changed files with 79 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files
front/src/Phaser/Login/SelectCharacterScene.ts
+48 -19
View File
@@ -1,23 +1,22 @@
import {gameManager} from "../Game/GameManager";
import {TextField} from "../Components/TextField";
import {ClickButton} from "../Components/ClickButton";
import Image = Phaser.GameObjects.Image;
import Rectangle = Phaser.GameObjects.Rectangle;
import {PLAYER_RESOURCES, PlayerResourceDescriptionInterface} from "../Entity/Character";
import {GameSceneInitInterface} from "../Game/GameScene";
import {StartMapInterface} from "../../Connection";
import {EnableCameraSceneName} from "./EnableCameraScene";
import {CustomizeSceneName} from "./CustomizeScene";
//todo: put this constants in a dedicated file
export const SelectCharacterSceneName = "SelectCharacterScene";
enum LoginTextures {
playButton = "play_button",
icon = "icon",
mainFont = "main_font"
}
export interface SelectCharacterSceneInitDataInterface {
name: string
mainFont = "main_font",
customizeButton = "customize_button",
customizeButtonSelected = "customize_button_selected"
}
export class SelectCharacterScene extends Phaser.Scene {
@@ -25,12 +24,13 @@ export class SelectCharacterScene extends Phaser.Scene {
private textField: TextField;
private pressReturnField: TextField;
private logo: Image;
private loginName: string;
private customizeButton: Image;
private customizeButtonSelected: Image;
private selectedRectangle: Rectangle;
private selectedRectangleXPos = 0; // Number of the character selected in the rows
private selectedRectangleYPos = 0; // Number of the character selected in the columns
private selectedPlayer: Phaser.Physics.Arcade.Sprite;
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>();
constructor() {
@@ -39,10 +39,6 @@ export class SelectCharacterScene extends Phaser.Scene {
});
}
init({ name }: SelectCharacterSceneInitDataInterface) {
this.loginName = name;
}
preload() {
this.load.image(LoginTextures.playButton, "resources/objects/play_button.png");
this.load.image(LoginTextures.icon, "resources/logos/tcm_full.png");
@@ -56,13 +52,15 @@ export class SelectCharacterScene extends Phaser.Scene {
{frameWidth: 32, frameHeight: 32}
);
});
this.load.image(LoginTextures.customizeButton, 'resources/objects/customize.png');
this.load.image(LoginTextures.customizeButtonSelected, 'resources/objects/customize_selected.png');
}
create() {
this.textField = new TextField(this, this.game.renderer.width / 2, 50, 'Select your character');
this.textField.setOrigin(0.5).setCenterAlign()
this.pressReturnField = new TextField(this, this.game.renderer.width / 2, 230, 'Press enter to start');
this.pressReturnField = new TextField(this, this.game.renderer.width / 2, 256, 'Press enter to start');
this.pressReturnField.setOrigin(0.5).setCenterAlign()
const rectangleXStart = this.game.renderer.width / 2 - (this.nbCharactersPerRow / 2) * 32 + 16;
@@ -73,7 +71,7 @@ export class SelectCharacterScene extends Phaser.Scene {
this.add.existing(this.logo);
this.input.keyboard.on('keyup-ENTER', () => {
return this.login(this.loginName);
return this.nextScene();
});
this.input.keyboard.on('keydown-RIGHT', () => {
@@ -89,7 +87,7 @@ export class SelectCharacterScene extends Phaser.Scene {
this.updateSelectedPlayer();
});
this.input.keyboard.on('keydown-DOWN', () => {
if (this.selectedRectangleYPos < Math.ceil(PLAYER_RESOURCES.length / this.nbCharactersPerRow) - 1) {
if (this.selectedRectangleYPos < Math.ceil(PLAYER_RESOURCES.length / this.nbCharactersPerRow)) {
this.selectedRectangleYPos++;
}
this.updateSelectedPlayer();
@@ -117,10 +115,15 @@ export class SelectCharacterScene extends Phaser.Scene {
this.pressReturnField.setVisible(!!(Math.floor(time / 500) % 2));
}
private login(name: string): void {
gameManager.storePlayerDetails(name, this.selectedPlayer.texture.key);
private nextScene(): void {
this.scene.start(EnableCameraSceneName);
if (this.selectedPlayer !== null) {
gameManager.setCharacterUserSelected(this.selectedPlayer.texture.key);
this.scene.start(EnableCameraSceneName);
} else {
this.scene.start(CustomizeSceneName);
}
// Do we have a start URL in the address bar? If so, let's redirect to this address
/*const instanceAndMapUrl = this.findMapUrl();
@@ -188,6 +191,20 @@ export class SelectCharacterScene extends Phaser.Scene {
});
this.players.push(player);
}
this.customizeButton = new Image(this, this.game.renderer.width / 2, 90 + 32 * 4 + 6, LoginTextures.customizeButton);
this.customizeButton.setOrigin(0.5, 0.5);
this.add.existing(this.customizeButton);
this.customizeButtonSelected = new Image(this, this.game.renderer.width / 2, 90 + 32 * 4 + 6, LoginTextures.customizeButtonSelected);
this.customizeButtonSelected.setOrigin(0.5, 0.5);
this.customizeButtonSelected.setVisible(false);
this.add.existing(this.customizeButtonSelected);
this.customizeButton.setInteractive().on("pointerdown", () => {
this.selectedRectangleYPos = Math.ceil(PLAYER_RESOURCES.length / this.nbCharactersPerRow);
this.updateSelectedPlayer();
});
this.selectedPlayer = this.players[0];
this.selectedPlayer.play(PLAYER_RESOURCES[0].name);
}
@@ -203,10 +220,22 @@ export class SelectCharacterScene extends Phaser.Scene {
}
private updateSelectedPlayer(): void {
this.selectedPlayer.anims.pause();
this.selectedPlayer?.anims.pause();
// If we selected the customize button
if (this.selectedRectangleYPos === Math.ceil(PLAYER_RESOURCES.length / this.nbCharactersPerRow)) {
this.selectedPlayer = null;
this.selectedRectangle.setVisible(false);
this.customizeButtonSelected.setVisible(true);
this.customizeButton.setVisible(false);
return;
}
this.customizeButtonSelected.setVisible(false);
this.customizeButton.setVisible(true);
const [x, y] = this.getCharacterPosition(this.selectedRectangleXPos, this.selectedRectangleYPos);
this.selectedRectangle.setVisible(true);
this.selectedRectangle.setX(x);
this.selectedRectangle.setY(y);
this.selectedRectangle.setSize(32, 32);
const playerNumber = this.selectedRectangleXPos + this.selectedRectangleYPos * this.nbCharactersPerRow;
const player = this.players[playerNumber];
player.play(PLAYER_RESOURCES[playerNumber].name);