Adding Clickbutton and MenuScene (not wired yet)
This commit is contained in:
parent
386b25afa0
commit
939c39545b
BIN
front/dist/resources/objects/button.png
vendored
Normal file
BIN
front/dist/resources/objects/button.png
vendored
Normal file
Binary file not shown.
After Width: | Height: | Size: 232 B |
BIN
front/dist/resources/objects/button_selected.png
vendored
Normal file
BIN
front/dist/resources/objects/button_selected.png
vendored
Normal file
Binary file not shown.
After Width: | Height: | Size: 997 B |
|
@ -1,11 +1,105 @@
|
||||||
|
import {SpeechBubble} from "../Entity/SpeechBubble";
|
||||||
|
import {PlayerAnimationNames} from "../Player/Animation";
|
||||||
|
import Container = Phaser.GameObjects.Container;
|
||||||
|
import Image = Phaser.GameObjects.Image;
|
||||||
|
import BitmapText = Phaser.GameObjects.BitmapText;
|
||||||
|
|
||||||
export class ClickButton extends Phaser.GameObjects.Image{
|
export class ClickButton extends Container {
|
||||||
|
private button!: Image;
|
||||||
constructor(scene: Phaser.Scene, x: number, y: number, textureName: string, callback: Function) {
|
private text!: BitmapText;
|
||||||
super(scene, x, y, textureName);
|
private buttonSelected!: Image;
|
||||||
this.scene.add.existing(this);
|
//private textSelected!: BitmapText;
|
||||||
this.setInteractive();
|
private selected: boolean = false;
|
||||||
this.on("pointerup", callback);
|
private callback: (() => void)|null = null;
|
||||||
|
private pointerOverCallback: (() => void)|null = null;
|
||||||
|
private pointerOutCallback: (() => void)|null = null;
|
||||||
|
|
||||||
|
constructor(scene: Phaser.Scene,
|
||||||
|
x: number,
|
||||||
|
y: number,
|
||||||
|
label: string,
|
||||||
|
texture: string,
|
||||||
|
textureSelected: string,
|
||||||
|
) {
|
||||||
|
super(scene, x, y/*, texture, frame*/);
|
||||||
|
|
||||||
|
this.button = new Image(scene, 0, 0, texture);
|
||||||
|
this.buttonSelected = new Image(scene, 0, 0, textureSelected);
|
||||||
|
this.buttonSelected.setVisible(false);
|
||||||
|
this.text = new BitmapText(scene, 0, 0, 'main_font', label, 8);
|
||||||
|
this.text.setOrigin(0.5, 0.5);
|
||||||
|
//this.textSelected = new BitmapText(scene, 0, 0, 'main_font', label, 8);
|
||||||
|
//this.textSelected.setOrigin(0.5, 0.5);
|
||||||
|
this.add(this.button);
|
||||||
|
this.add(this.buttonSelected);
|
||||||
|
this.add(this.text);
|
||||||
|
|
||||||
|
this.button.setInteractive();
|
||||||
|
this.buttonSelected.setInteractive();
|
||||||
|
|
||||||
|
this.button.on("pointerover", () => {
|
||||||
|
if (this.pointerOverCallback === null) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
this.pointerOverCallback();
|
||||||
|
});
|
||||||
|
|
||||||
|
this.buttonSelected.on("pointerout", () => {
|
||||||
|
if (this.pointerOutCallback === null) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
this.pointerOutCallback();
|
||||||
|
});
|
||||||
|
|
||||||
|
this.buttonSelected.on('pointerup', () => {
|
||||||
|
if (this.callback === null) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
this.callback();
|
||||||
|
});
|
||||||
|
this.button.on('pointerup', () => {
|
||||||
|
if (this.callback === null) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
this.callback();
|
||||||
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
public select(): void {
|
||||||
|
this.selected = true;
|
||||||
|
this.switchToSelected();
|
||||||
|
}
|
||||||
|
|
||||||
|
private switchToSelected(): void {
|
||||||
|
this.button.setVisible(false);
|
||||||
|
this.buttonSelected.setVisible(true);
|
||||||
|
}
|
||||||
|
|
||||||
|
public unselect(): void {
|
||||||
|
this.selected = false;
|
||||||
|
this.switchToNotSelected();
|
||||||
|
}
|
||||||
|
|
||||||
|
private switchToNotSelected(): void {
|
||||||
|
this.button.setVisible(true);
|
||||||
|
this.buttonSelected.setVisible(false);
|
||||||
|
}
|
||||||
|
|
||||||
|
public onClick(callback: () => void) {
|
||||||
|
this.callback = callback;
|
||||||
|
}
|
||||||
|
|
||||||
|
public onPointerOver(callback: () => void) {
|
||||||
|
this.pointerOverCallback = callback;
|
||||||
|
}
|
||||||
|
|
||||||
|
public onPointerOut(callback: () => void) {
|
||||||
|
this.pointerOutCallback = callback;
|
||||||
|
}
|
||||||
|
|
||||||
|
public click(): void {
|
||||||
|
if (this.callback !== null) {
|
||||||
|
this.callback();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
110
front/src/Phaser/Login/MenuScene.ts
Normal file
110
front/src/Phaser/Login/MenuScene.ts
Normal file
|
@ -0,0 +1,110 @@
|
||||||
|
import {gameManager} from "../Game/GameManager";
|
||||||
|
import {TextField} from "../Components/TextField";
|
||||||
|
import Image = Phaser.GameObjects.Image;
|
||||||
|
import {GameSceneInitInterface} from "../Game/GameScene";
|
||||||
|
import {StartMapInterface} from "../../Connexion/ConnexionModels";
|
||||||
|
import {mediaManager} from "../../WebRtc/MediaManager";
|
||||||
|
import {RESOLUTION} from "../../Enum/EnvironmentVariable";
|
||||||
|
import {SoundMeter} from "../Components/SoundMeter";
|
||||||
|
import {SoundMeterSprite} from "../Components/SoundMeterSprite";
|
||||||
|
import {ClickButton} from "../Components/ClickButton";
|
||||||
|
import {ResizableScene} from "./ResizableScene";
|
||||||
|
|
||||||
|
export const MenuSceneName = "MenuScene";
|
||||||
|
enum MenuTextures {
|
||||||
|
mainFont = "main_font",
|
||||||
|
}
|
||||||
|
|
||||||
|
export class MenuScene extends ResizableScene {
|
||||||
|
private buttons: ClickButton[] = [];
|
||||||
|
private selected: number = 0;
|
||||||
|
|
||||||
|
|
||||||
|
constructor() {
|
||||||
|
super({
|
||||||
|
key: MenuSceneName
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
preload() {
|
||||||
|
this.load.image('notSelectedButton', "resources/objects/button.png");
|
||||||
|
this.load.image('selectedButton', "resources/objects/button_selected.png");
|
||||||
|
this.load.bitmapFont(MenuTextures.mainFont, 'resources/fonts/arcade.png', 'resources/fonts/arcade.xml');
|
||||||
|
}
|
||||||
|
|
||||||
|
create() {
|
||||||
|
const changeName = new ClickButton(this, this.game.renderer.width / 2, 50, 'Edit name', 'notSelectedButton', 'selectedButton');
|
||||||
|
changeName.onClick(() => {
|
||||||
|
console.log('Change name clicked')
|
||||||
|
})
|
||||||
|
this.add.existing(changeName);
|
||||||
|
this.buttons.push(changeName);
|
||||||
|
|
||||||
|
const changeCharacter = new ClickButton(this, this.game.renderer.width / 2, 100, 'Edit character', 'notSelectedButton', 'selectedButton');
|
||||||
|
changeCharacter.onClick(() => {
|
||||||
|
console.log('changeCharacter clicked')
|
||||||
|
})
|
||||||
|
this.add.existing(changeCharacter);
|
||||||
|
this.buttons.push(changeCharacter);
|
||||||
|
|
||||||
|
const setupCamera = new ClickButton(this, this.game.renderer.width / 2, 150, 'Setup webcam', 'notSelectedButton', 'selectedButton');
|
||||||
|
setupCamera.onClick(() => {
|
||||||
|
console.log('setupCamera clicked')
|
||||||
|
})
|
||||||
|
this.add.existing(setupCamera);
|
||||||
|
this.buttons.push(setupCamera);
|
||||||
|
|
||||||
|
const backToGame = new ClickButton(this, this.game.renderer.width / 2, 200, 'Back to game', 'notSelectedButton', 'selectedButton');
|
||||||
|
backToGame.onClick(() => {
|
||||||
|
console.log('backToGame clicked')
|
||||||
|
})
|
||||||
|
this.add.existing(backToGame);
|
||||||
|
this.buttons.push(backToGame);
|
||||||
|
|
||||||
|
for (let i = 0; i < this.buttons.length; i++) {
|
||||||
|
const button = this.buttons[i];
|
||||||
|
button.onPointerOver(() => {
|
||||||
|
this.selected = i;
|
||||||
|
this.select();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
this.select();
|
||||||
|
|
||||||
|
this.input.keyboard.on('keydown-DOWN', () => {
|
||||||
|
if (this.selected === this.buttons.length - 1) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
this.selected++;
|
||||||
|
this.select();
|
||||||
|
});
|
||||||
|
this.input.keyboard.on('keydown-UP', () => {
|
||||||
|
if (this.selected === 0) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
this.selected--;
|
||||||
|
this.select();
|
||||||
|
});
|
||||||
|
this.input.keyboard.on('keydown-ENTER', () => {
|
||||||
|
this.buttons[this.selected].click();
|
||||||
|
});
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
onResize(ev: UIEvent): void {
|
||||||
|
for (const button of this.buttons) {
|
||||||
|
button.setX(this.game.renderer.width / 2);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
private select(): void {
|
||||||
|
for (let i = 0; i < this.buttons.length; i++) {
|
||||||
|
const button = this.buttons[i];
|
||||||
|
if (i === this.selected) {
|
||||||
|
button.select();
|
||||||
|
} else {
|
||||||
|
button.unselect();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
|
@ -6,6 +6,7 @@ import {PLAYER_RESOURCES, PlayerResourceDescriptionInterface} from "../Entity/Ch
|
||||||
import {EnableCameraSceneName} from "./EnableCameraScene";
|
import {EnableCameraSceneName} from "./EnableCameraScene";
|
||||||
import {CustomizeSceneName} from "./CustomizeScene";
|
import {CustomizeSceneName} from "./CustomizeScene";
|
||||||
import {ResizableScene} from "./ResizableScene";
|
import {ResizableScene} from "./ResizableScene";
|
||||||
|
import {ClickButton} from "../Components/ClickButton";
|
||||||
|
|
||||||
|
|
||||||
//todo: put this constants in a dedicated file
|
//todo: put this constants in a dedicated file
|
||||||
|
@ -23,8 +24,7 @@ export class SelectCharacterScene extends ResizableScene {
|
||||||
private textField!: TextField;
|
private textField!: TextField;
|
||||||
private pressReturnField!: TextField;
|
private pressReturnField!: TextField;
|
||||||
private logo!: Image;
|
private logo!: Image;
|
||||||
private customizeButton!: Image;
|
private customizeButton!: ClickButton;
|
||||||
private customizeButtonSelected!: Image;
|
|
||||||
|
|
||||||
private selectedRectangle!: Rectangle;
|
private selectedRectangle!: Rectangle;
|
||||||
private selectedRectangleXPos = 0; // Number of the character selected in the rows
|
private selectedRectangleXPos = 0; // Number of the character selected in the rows
|
||||||
|
@ -53,6 +53,9 @@ export class SelectCharacterScene extends ResizableScene {
|
||||||
});
|
});
|
||||||
this.load.image(LoginTextures.customizeButton, 'resources/objects/customize.png');
|
this.load.image(LoginTextures.customizeButton, 'resources/objects/customize.png');
|
||||||
this.load.image(LoginTextures.customizeButtonSelected, 'resources/objects/customize_selected.png');
|
this.load.image(LoginTextures.customizeButtonSelected, 'resources/objects/customize_selected.png');
|
||||||
|
|
||||||
|
this.load.image('notSelectedButton', "resources/objects/button.png");
|
||||||
|
this.load.image('selectedButton', "resources/objects/button_selected.png");
|
||||||
}
|
}
|
||||||
|
|
||||||
create() {
|
create() {
|
||||||
|
@ -191,13 +194,8 @@ export class SelectCharacterScene extends ResizableScene {
|
||||||
this.players.push(player);
|
this.players.push(player);
|
||||||
}
|
}
|
||||||
|
|
||||||
this.customizeButton = new Image(this, this.game.renderer.width / 2, 90 + 32 * 4 + 6, LoginTextures.customizeButton);
|
this.customizeButton = new ClickButton(this, this.game.renderer.width / 2, 90 + 32 * 4 + 6, 'Design your own', 'notSelectedButton', 'selectedButton');
|
||||||
this.customizeButton.setOrigin(0.5, 0.5);
|
|
||||||
this.add.existing(this.customizeButton);
|
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.customizeButton.setInteractive().on("pointerdown", () => {
|
||||||
this.selectedRectangleYPos = Math.ceil(PLAYER_RESOURCES.length / this.nbCharactersPerRow);
|
this.selectedRectangleYPos = Math.ceil(PLAYER_RESOURCES.length / this.nbCharactersPerRow);
|
||||||
|
@ -224,12 +222,10 @@ export class SelectCharacterScene extends ResizableScene {
|
||||||
if (this.selectedRectangleYPos === Math.ceil(PLAYER_RESOURCES.length / this.nbCharactersPerRow)) {
|
if (this.selectedRectangleYPos === Math.ceil(PLAYER_RESOURCES.length / this.nbCharactersPerRow)) {
|
||||||
this.selectedPlayer = null;
|
this.selectedPlayer = null;
|
||||||
this.selectedRectangle.setVisible(false);
|
this.selectedRectangle.setVisible(false);
|
||||||
this.customizeButtonSelected.setVisible(true);
|
this.customizeButton.select();
|
||||||
this.customizeButton.setVisible(false);
|
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
this.customizeButtonSelected.setVisible(false);
|
this.customizeButton.unselect();
|
||||||
this.customizeButton.setVisible(true);
|
|
||||||
const [x, y] = this.getCharacterPosition(this.selectedRectangleXPos, this.selectedRectangleYPos);
|
const [x, y] = this.getCharacterPosition(this.selectedRectangleXPos, this.selectedRectangleYPos);
|
||||||
this.selectedRectangle.setVisible(true);
|
this.selectedRectangle.setVisible(true);
|
||||||
this.selectedRectangle.setX(x);
|
this.selectedRectangle.setX(x);
|
||||||
|
@ -249,8 +245,7 @@ export class SelectCharacterScene extends ResizableScene {
|
||||||
this.pressReturnField.x = this.game.renderer.width / 2;
|
this.pressReturnField.x = this.game.renderer.width / 2;
|
||||||
this.logo.x = this.game.renderer.width - 30;
|
this.logo.x = this.game.renderer.width - 30;
|
||||||
this.logo.y = this.game.renderer.height - 20;
|
this.logo.y = this.game.renderer.height - 20;
|
||||||
this.customizeButton.x = this.game.renderer.width / 2;
|
this.customizeButton.setX(this.game.renderer.width / 2);
|
||||||
this.customizeButtonSelected.x = this.game.renderer.width / 2;
|
|
||||||
|
|
||||||
for (let i = 0; i <PLAYER_RESOURCES.length; i++) {
|
for (let i = 0; i <PLAYER_RESOURCES.length; i++) {
|
||||||
const player = this.players[i];
|
const player = this.players[i];
|
||||||
|
|
|
@ -13,6 +13,7 @@ import {CustomizeScene} from "./Phaser/Login/CustomizeScene";
|
||||||
import {CoWebsiteManager} from "./WebRtc/CoWebsiteManager";
|
import {CoWebsiteManager} from "./WebRtc/CoWebsiteManager";
|
||||||
import {connectionManager} from "./Connexion/ConnectionManager";
|
import {connectionManager} from "./Connexion/ConnectionManager";
|
||||||
import {ResizableScene} from "./Phaser/Login/ResizableScene";
|
import {ResizableScene} from "./Phaser/Login/ResizableScene";
|
||||||
|
import {MenuScene} from "./Phaser/Login/MenuScene";
|
||||||
|
|
||||||
//CoWebsiteManager.loadCoWebsite('https://thecodingmachine.com');
|
//CoWebsiteManager.loadCoWebsite('https://thecodingmachine.com');
|
||||||
connectionManager.init();
|
connectionManager.init();
|
||||||
|
@ -31,7 +32,7 @@ const config: GameConfig = {
|
||||||
width: width / RESOLUTION,
|
width: width / RESOLUTION,
|
||||||
height: height / RESOLUTION,
|
height: height / RESOLUTION,
|
||||||
parent: "game",
|
parent: "game",
|
||||||
scene: [LoginScene, SelectCharacterScene, EnableCameraScene, ReconnectingScene, FourOFourScene, CustomizeScene],
|
scene: [LoginScene, SelectCharacterScene, EnableCameraScene, ReconnectingScene, FourOFourScene, CustomizeScene, MenuScene],
|
||||||
zoom: RESOLUTION,
|
zoom: RESOLUTION,
|
||||||
physics: {
|
physics: {
|
||||||
default: "arcade",
|
default: "arcade",
|
||||||
|
|
Loading…
Reference in a new issue