added select companion scene
This commit is contained in:
Johannes Berthel
parent
4cfce15695
commit
52303c0bd6
@ -48,11 +48,14 @@ class LocalUserStore {
|
||||
return JSON.parse(localStorage.getItem(characterLayersKey) || "null");
|
||||
}
|
||||
|
||||
setCompanion(companion: string): void {
|
||||
localStorage.setItem(companionKey, companion);
|
||||
setCompanion(companion: string|null): void {
|
||||
return localStorage.setItem(companionKey, JSON.stringify(companion));
|
||||
}
|
||||
getCompanion(): string|null {
|
||||
return localStorage.getItem(companionKey);
|
||||
return JSON.parse(localStorage.getItem(companionKey) || "null");
|
||||
}
|
||||
wasCompanionSet(): boolean {
|
||||
return localStorage.getItem(companionKey) ? true : false;
|
||||
}
|
||||
|
||||
setGameQualityValue(value: number): void {
|
||||
|
||||
@ -1,14 +1,16 @@
|
||||
import LoaderPlugin = Phaser.Loader.LoaderPlugin;
|
||||
import { COMPANION_RESOURCES, CompanionResourceDescriptionInterface } from "./CompanionTextures";
|
||||
|
||||
export const loadAll = (loader: LoaderPlugin): CompanionResourceDescriptionInterface[] => {
|
||||
const resources = COMPANION_RESOURCES;
|
||||
export const loadAll = (loader: LoaderPlugin): Promise<CompanionResourceDescriptionInterface[]> => {
|
||||
const promises: Promise<string>[] = [];
|
||||
|
||||
resources.forEach((resource: CompanionResourceDescriptionInterface) => {
|
||||
loader.spritesheet(resource.name, resource.img, { frameWidth: 32, frameHeight: 32, endFrame: 12 });
|
||||
COMPANION_RESOURCES.forEach((resource: CompanionResourceDescriptionInterface) => {
|
||||
promises.push(lazyLoadResource(loader, resource.name));
|
||||
});
|
||||
|
||||
return resources;
|
||||
return Promise.all(promises).then(() => {
|
||||
return COMPANION_RESOURCES;
|
||||
});
|
||||
}
|
||||
|
||||
export const lazyLoadResource = (loader: LoaderPlugin, name: string): Promise<string> => {
|
||||
|
||||
@ -5,6 +5,7 @@ import {MenuScene, MenuSceneName} from "../Menu/MenuScene";
|
||||
import {HelpCameraSettingsScene, HelpCameraSettingsSceneName} from "../Menu/HelpCameraSettingsScene";
|
||||
import {LoginSceneName} from "../Login/LoginScene";
|
||||
import {SelectCharacterSceneName} from "../Login/SelectCharacterScene";
|
||||
import {SelectCompanionSceneName} from "../Login/SelectCompanionScene";
|
||||
import {EnableCameraSceneName} from "../Login/EnableCameraScene";
|
||||
import {localUserStore} from "../../Connexion/LocalUserStore";
|
||||
|
||||
@ -39,6 +40,8 @@ export class GameManager {
|
||||
return LoginSceneName;
|
||||
} else if (!this.characterLayers) {
|
||||
return SelectCharacterSceneName;
|
||||
} else if (!localUserStore.wasCompanionSet()) {
|
||||
return SelectCompanionSceneName;
|
||||
} else {
|
||||
return EnableCameraSceneName;
|
||||
}
|
||||
@ -65,6 +68,11 @@ export class GameManager {
|
||||
return this.characterLayers;
|
||||
}
|
||||
|
||||
|
||||
setCompanion(companion: string|null): void {
|
||||
this.companion = companion;
|
||||
}
|
||||
|
||||
getCompanion(): string|null {
|
||||
return this.companion;
|
||||
}
|
||||
|
||||
248
front/src/Phaser/Login/SelectCompanionScene.ts
Normal file
248
front/src/Phaser/Login/SelectCompanionScene.ts
Normal file
@ -0,0 +1,248 @@
|
||||
import Image = Phaser.GameObjects.Image;
|
||||
import Rectangle = Phaser.GameObjects.Rectangle;
|
||||
import {gameManager} from "../Game/GameManager";
|
||||
import { addLoader } from "../Components/Loader";
|
||||
import {TextField} from "../Components/TextField";
|
||||
import { ResizableScene } from "./ResizableScene";
|
||||
import {EnableCameraSceneName} from "./EnableCameraScene";
|
||||
import {localUserStore} from "../../Connexion/LocalUserStore";
|
||||
import { loadAll } from "../Companion/CompanionTexturesLoadingManager";
|
||||
import { CompanionResourceDescriptionInterface } from "../Companion/CompanionTextures";
|
||||
|
||||
export const SelectCompanionSceneName = "SelectCompanionScene";
|
||||
|
||||
enum LoginTextures {
|
||||
playButton = "play_button",
|
||||
icon = "icon",
|
||||
mainFont = "main_font"
|
||||
}
|
||||
|
||||
export class SelectCompanionScene extends ResizableScene {
|
||||
private logo!: Image;
|
||||
private textField!: TextField;
|
||||
private pressReturnField!: TextField;
|
||||
private readonly nbCharactersPerRow = 7;
|
||||
|
||||
private selectedRectangle!: Rectangle;
|
||||
private selectedRectangleXPos = 0;
|
||||
private selectedRectangleYPos = 0;
|
||||
|
||||
private selectedCompanion!: Phaser.Physics.Arcade.Sprite;
|
||||
private companions: Array<Phaser.Physics.Arcade.Sprite> = new Array<Phaser.Physics.Arcade.Sprite>();
|
||||
private companionModels: Array<CompanionResourceDescriptionInterface|null> = [null];
|
||||
|
||||
constructor() {
|
||||
super({
|
||||
key: SelectCompanionSceneName
|
||||
});
|
||||
}
|
||||
|
||||
preload() {
|
||||
loadAll(this.load).then(resourceDescriptions => {
|
||||
resourceDescriptions.forEach(resourceDescription => {
|
||||
this.companionModels.push(resourceDescription);
|
||||
});
|
||||
});
|
||||
|
||||
this.load.image(LoginTextures.icon, "resources/logos/tcm_full.png");
|
||||
this.load.image(LoginTextures.playButton, "resources/objects/play_button.png");
|
||||
|
||||
// Note: arcade.png from the Phaser 3 examples at: https://github.com/photonstorm/phaser3-examples/tree/master/public/assets/fonts/bitmap
|
||||
this.load.bitmapFont(LoginTextures.mainFont, 'resources/fonts/arcade.png', 'resources/fonts/arcade.xml');
|
||||
|
||||
addLoader(this);
|
||||
}
|
||||
|
||||
create() {
|
||||
this.textField = new TextField(this, this.game.renderer.width / 2, 50, 'Select your companion');
|
||||
|
||||
this.pressReturnField = new TextField(
|
||||
this,
|
||||
this.game.renderer.width / 2,
|
||||
90 + 32 * Math.ceil(this.companionModels.length / this.nbCharactersPerRow),
|
||||
'Press enter to start'
|
||||
);
|
||||
|
||||
const rectangleXStart = this.game.renderer.width / 2 - (this.nbCharactersPerRow / 2) * 32 + 16;
|
||||
this.selectedRectangle = this.add.rectangle(rectangleXStart, 90, 32, 32).setStrokeStyle(2, 0xFFFFFF);
|
||||
|
||||
this.logo = new Image(this, this.game.renderer.width - 30, this.game.renderer.height - 20, LoginTextures.icon);
|
||||
this.add.existing(this.logo);
|
||||
|
||||
// input events
|
||||
this.input.keyboard.on('keyup-ENTER', () => {
|
||||
return this.nextScene();
|
||||
});
|
||||
|
||||
this.input.keyboard.on('keydown-RIGHT', () => {
|
||||
if(this.selectedRectangleYPos * this.nbCharactersPerRow + (this.selectedRectangleXPos + 2))
|
||||
if (
|
||||
this.selectedRectangleXPos < this.nbCharactersPerRow - 1
|
||||
&& ((this.selectedRectangleYPos * this.nbCharactersPerRow) + (this.selectedRectangleXPos + 1) + 1) <= this.companionModels.length
|
||||
) {
|
||||
this.selectedRectangleXPos++;
|
||||
}
|
||||
this.updateSelectedCompanion();
|
||||
});
|
||||
|
||||
this.input.keyboard.on('keydown-LEFT', () => {
|
||||
if (
|
||||
this.selectedRectangleXPos > 0
|
||||
&& ((this.selectedRectangleYPos * this.nbCharactersPerRow) + (this.selectedRectangleXPos - 1) + 1) <= this.companionModels.length
|
||||
) {
|
||||
this.selectedRectangleXPos--;
|
||||
}
|
||||
this.updateSelectedCompanion();
|
||||
});
|
||||
|
||||
this.input.keyboard.on('keydown-DOWN', () => {
|
||||
if (
|
||||
this.selectedRectangleYPos + 1 < Math.ceil(this.companionModels.length / this.nbCharactersPerRow)
|
||||
&& (
|
||||
(((this.selectedRectangleYPos + 1) * this.nbCharactersPerRow) + this.selectedRectangleXPos + 1) <= this.companionModels.length // check if companion isn't empty
|
||||
|| (this.selectedRectangleYPos + 1) === Math.ceil(this.companionModels.length / this.nbCharactersPerRow) // check if is custom rectangle
|
||||
)
|
||||
) {
|
||||
this.selectedRectangleYPos++;
|
||||
}
|
||||
this.updateSelectedCompanion();
|
||||
});
|
||||
|
||||
this.input.keyboard.on('keydown-UP', () => {
|
||||
if (
|
||||
this.selectedRectangleYPos > 0
|
||||
&& (((this.selectedRectangleYPos - 1) * this.nbCharactersPerRow) + this.selectedRectangleXPos + 1) <= this.companionModels.length
|
||||
) {
|
||||
this.selectedRectangleYPos--;
|
||||
}
|
||||
this.updateSelectedCompanion();
|
||||
});
|
||||
|
||||
this.createCurrentCompanion();
|
||||
|
||||
const companionNumber = this.getCompanionIndex();
|
||||
|
||||
this.selectedRectangleXPos = companionNumber % this.nbCharactersPerRow;
|
||||
this.selectedRectangleYPos = Math.floor(companionNumber / this.nbCharactersPerRow);
|
||||
|
||||
this.updateSelectedCompanion();
|
||||
}
|
||||
|
||||
update(time: number, delta: number): void {
|
||||
this.pressReturnField.setVisible(!!(Math.floor(time / 500) % 2));
|
||||
}
|
||||
|
||||
private nextScene(): void {
|
||||
// store companion
|
||||
const companionNumber = this.selectedRectangleXPos + this.selectedRectangleYPos * this.nbCharactersPerRow;
|
||||
const model = this.companionModels[companionNumber];
|
||||
const companion = model === null ? null : model.name;
|
||||
|
||||
localUserStore.setCompanion(companion);
|
||||
|
||||
// next scene
|
||||
this.scene.stop(SelectCompanionSceneName);
|
||||
|
||||
gameManager.setCompanion(companion);
|
||||
gameManager.tryResumingGame(this, EnableCameraSceneName);
|
||||
|
||||
this.scene.remove(SelectCompanionSceneName);
|
||||
}
|
||||
|
||||
private createCurrentCompanion(): void {
|
||||
for (let i = 0; i < this.companionModels.length; i++) {
|
||||
const companionResource = this.companionModels[i];
|
||||
|
||||
const col = i % this.nbCharactersPerRow;
|
||||
const row = Math.floor(i / this.nbCharactersPerRow);
|
||||
|
||||
const [x, y] = this.getCharacterPosition(col, row);
|
||||
|
||||
let name = "null";
|
||||
if (companionResource !== null) {
|
||||
name = companionResource.name;
|
||||
}
|
||||
|
||||
const companion = this.physics.add.sprite(x, y, name, 0);
|
||||
companion.setBounce(0.2);
|
||||
companion.setCollideWorldBounds(true);
|
||||
|
||||
if (companionResource !== null) {
|
||||
this.anims.create({
|
||||
key: name,
|
||||
frames: this.anims.generateFrameNumbers(name, {start: 0, end: 2,}),
|
||||
frameRate: 10,
|
||||
repeat: -1
|
||||
});
|
||||
}
|
||||
|
||||
companion.setInteractive().on("pointerdown", () => {
|
||||
this.selectedRectangleXPos = col;
|
||||
this.selectedRectangleYPos = row;
|
||||
this.updateSelectedCompanion();
|
||||
});
|
||||
|
||||
this.companions.push(companion);
|
||||
}
|
||||
|
||||
this.selectedCompanion = this.companions[0];
|
||||
}
|
||||
|
||||
private getCharacterPosition(x: number, y: number): [number, number] {
|
||||
return [
|
||||
this.game.renderer.width / 2 + 16 + (x - this.nbCharactersPerRow / 2) * 32,
|
||||
y * 32 + 90
|
||||
];
|
||||
}
|
||||
|
||||
private updateSelectedCompanion(): void {
|
||||
this.selectedCompanion?.anims.pause();
|
||||
|
||||
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 companionNumber = this.selectedRectangleXPos + this.selectedRectangleYPos * this.nbCharactersPerRow;
|
||||
const model = this.companionModels[companionNumber];
|
||||
|
||||
const companion = this.companions[companionNumber];
|
||||
|
||||
if (model !== null) {
|
||||
companion.play(model.name);
|
||||
}
|
||||
|
||||
this.selectedCompanion = companion;
|
||||
}
|
||||
|
||||
public onResize(ev: UIEvent): void {
|
||||
this.textField.x = this.game.renderer.width / 2;
|
||||
this.pressReturnField.x = this.game.renderer.width / 2;
|
||||
this.logo.x = this.game.renderer.width - 30;
|
||||
this.logo.y = this.game.renderer.height - 20;
|
||||
|
||||
for (let i = 0; i <this.companionModels.length; i++) {
|
||||
const companion = this.companions[i];
|
||||
|
||||
const col = i % this.nbCharactersPerRow;
|
||||
const row = Math.floor(i / this.nbCharactersPerRow);
|
||||
|
||||
const [x, y] = this.getCharacterPosition(col, row);
|
||||
companion.x = x;
|
||||
companion.y = y;
|
||||
}
|
||||
|
||||
this.updateSelectedCompanion();
|
||||
}
|
||||
|
||||
private getCompanionIndex(): number {
|
||||
const companion = localUserStore.getCompanion();
|
||||
|
||||
if (companion === null) {
|
||||
return 0;
|
||||
}
|
||||
|
||||
return this.companionModels.findIndex(model => model !== null && model.name === companion);
|
||||
}
|
||||
}
|
||||
@ -6,6 +6,7 @@ import {DEBUG_MODE, JITSI_URL, RESOLUTION} from "./Enum/EnvironmentVariable";
|
||||
import {LoginScene} from "./Phaser/Login/LoginScene";
|
||||
import {ReconnectingScene} from "./Phaser/Reconnecting/ReconnectingScene";
|
||||
import {SelectCharacterScene} from "./Phaser/Login/SelectCharacterScene";
|
||||
import {SelectCompanionScene} from "./Phaser/Login/SelectCompanionScene";
|
||||
import {EnableCameraScene} from "./Phaser/Login/EnableCameraScene";
|
||||
import {CustomizeScene} from "./Phaser/Login/CustomizeScene";
|
||||
import {ResizableScene} from "./Phaser/Login/ResizableScene";
|
||||
@ -74,7 +75,7 @@ const config: GameConfig = {
|
||||
width: width / RESOLUTION,
|
||||
height: height / RESOLUTION,
|
||||
parent: "game",
|
||||
scene: [EntryScene, LoginScene, SelectCharacterScene, EnableCameraScene, ReconnectingScene, ErrorScene, CustomizeScene, MenuScene, HelpCameraSettingsScene],
|
||||
scene: [EntryScene, LoginScene, SelectCharacterScene, SelectCompanionScene, EnableCameraScene, ReconnectingScene, ErrorScene, CustomizeScene, MenuScene, HelpCameraSettingsScene],
|
||||
zoom: RESOLUTION,
|
||||
fps: fps,
|
||||
dom: {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user