Update Companion Scene for mobile

This commit is contained in:
Gregoire Parant 2021-04-22 13:10:23 +02:00
parent 3697ddabfa
commit d7f00b505a
3 changed files with 305 additions and 166 deletions

View File

@ -0,0 +1,125 @@
<style>
#selectCompanionScene {
background: #0000;
/*border: 1px solid #ebeeee;*/
border-radius: 6px;
margin: 10px auto 0;
color: #ebeeee;
max-height: 40vh;
overflow: scroll;
max-width: 300px;
width: 40vw;
}
#selectCompanionScene h1 {
background-image: linear-gradient(top, #f1f3f3, #d4dae0);
border-bottom: 1px solid #a6abaf;
border-radius: 6px 6px 0 0;
box-sizing: border-box;
color: #727678;
display: block;
height: 43px;
padding-top: 10px;
margin: 0;
text-align: center;
text-shadow: 0 -1px 0 rgba(0,0,0,0.2), 0 1px 0 #fff;
}
#selectCompanionScene input {
font-size: 70%;
background: linear-gradient(top, #d6d7d7, #dee0e0);
border: 1px solid #a1a3a3;
border-radius: 4px;
box-shadow: 0 1px #fff;
box-sizing: border-box;
color: #696969;
height: 30px;
transition: box-shadow 0.3s;
width: 100%;
text-align: center;
}
#selectCompanionScene section {
margin: 10px;
}
#selectCompanionScene section.action {
text-align: center;
margin: 0;
margin-top: 20vh;
}
#selectCompanionScene button {
margin: 10px 4px;
background-color: black;;
color: #ebeeee;
border-radius: 7px;
padding-bottom: 4px;
width: 100px;
}
#selectCompanionScene button#selectCompanionSceneFormCancel {
background-color: #aca6a600;
color: #292929;
}
#selectCompanionScene section h6,
#selectCompanionScene section h5{
margin: 1px;
}
#selectCompanionScene section.text-center{
text-align: center;
}
#selectCompanionScene section a{
font-size: 14px;
text-decoration: underline;
color: #ebeeee;
}
#selectCompanionScene section a:hover{
font-weight: 700;
}
#selectCompanionScene section p{
text-align: left;
font-size: 8px;
margin: 10px 10px;
}
#selectCompanionScene section p.err{
color: red;
text-align: center;
}
#selectCompanionScene section p.info{
display: none;
text-align: center;
}
#selectCompanionScene section input#selectCompanionSceneLink{
background-color: #a1a3a3;
}
#selectCompanionScene section img{
width: 160px;
margin: 20px 0;
}
#selectCompanionScene section button.selectCharacterButton{
position: absolute;
top: 20vh;
margin: 0;
width: 25px;
}
#selectCompanionScene section button.selectCharacterButton#selectCharacterButtonLeft{
left: 1vw;
}
#selectCompanionScene section button.selectCharacterButton#selectCharacterButtonRight{
right: 1vw;
}
#selectCompanionScene section button#selectCompanionSceneFormCustomYourOwnSubmit{
font-size: 14px;
width: auto;
margin-top: -2px;
background-color: #ffd700;
color: black;
}
</style>
<form id="selectCompanionScene" hidden>
<section class="text-center">
<h5>Select your WOKA</h5>
<button class="selectCharacterButton" id="selectCharacterButtonLeft"> < </button>
<button class="selectCharacterButton" id="selectCharacterButtonRight"> > </button>
</section>
<section class="action">
<a herf="#" id="selectCompanionSceneFormBack">Back</a>
<button type="submit" id="selectCompanionSceneFormSubmit">Continue</button>
</section>
</form>

View File

@ -169,6 +169,7 @@ export class SelectCharacterScene extends AbstractCharacterScene {
private defineSetupPlayer(numero: number){ private defineSetupPlayer(numero: number){
const deltaX = 30; const deltaX = 30;
const deltaY = 2;
let [playerX, playerY] = this.getCharacterPosition(); let [playerX, playerY] = this.getCharacterPosition();
let playerVisible = true; let playerVisible = true;
let playerScale = 1.5; let playerScale = 1.5;
@ -177,24 +178,28 @@ export class SelectCharacterScene extends AbstractCharacterScene {
playerVisible = false; playerVisible = false;
} }
if( numero === (this.currentSelectUser + 1) ){ if( numero === (this.currentSelectUser + 1) ){
playerY -= deltaY;
playerX += deltaX; playerX += deltaX;
playerScale = 0.8; playerScale = 0.8;
playserOpactity = 0.6; playserOpactity = 0.6;
playerVisible = true; playerVisible = true;
} }
if( numero === (this.currentSelectUser + 2) ){ if( numero === (this.currentSelectUser + 2) ){
playerY -= deltaY;
playerX += (deltaX * 2); playerX += (deltaX * 2);
playerScale = 0.8; playerScale = 0.8;
playserOpactity = 0.6; playserOpactity = 0.6;
playerVisible = true; playerVisible = true;
} }
if( numero === (this.currentSelectUser - 1) ){ if( numero === (this.currentSelectUser - 1) ){
playerY -= deltaY;
playerX -= deltaX; playerX -= deltaX;
playerScale = 0.8; playerScale = 0.8;
playserOpactity = 0.6; playserOpactity = 0.6;
playerVisible = true; playerVisible = true;
} }
if( numero === (this.currentSelectUser - 2) ){ if( numero === (this.currentSelectUser - 2) ){
playerY -= deltaY;
playerX -= (deltaX * 2); playerX -= (deltaX * 2);
playerScale = 0.8; playerScale = 0.8;
playserOpactity = 0.6; playserOpactity = 0.6;

View File

@ -3,13 +3,13 @@ import Rectangle = Phaser.GameObjects.Rectangle;
import { addLoader } from "../Components/Loader"; import { addLoader } from "../Components/Loader";
import { gameManager} from "../Game/GameManager"; import { gameManager} from "../Game/GameManager";
import { ResizableScene } from "./ResizableScene"; import { ResizableScene } from "./ResizableScene";
import { TextField } from "../Components/TextField";
import { EnableCameraSceneName } from "./EnableCameraScene"; import { EnableCameraSceneName } from "./EnableCameraScene";
import { localUserStore } from "../../Connexion/LocalUserStore"; import { localUserStore } from "../../Connexion/LocalUserStore";
import { CompanionResourceDescriptionInterface } from "../Companion/CompanionTextures"; import { CompanionResourceDescriptionInterface } from "../Companion/CompanionTextures";
import { getAllCompanionResources } from "../Companion/CompanionTexturesLoadingManager"; import { getAllCompanionResources } from "../Companion/CompanionTexturesLoadingManager";
import {touchScreenManager} from "../../Touch/TouchScreenManager"; import {touchScreenManager} from "../../Touch/TouchScreenManager";
import {PinchManager} from "../UserInput/PinchManager"; import {PinchManager} from "../UserInput/PinchManager";
import { MenuScene } from "../Menu/MenuScene";
export const SelectCompanionSceneName = "SelectCompanionScene"; export const SelectCompanionSceneName = "SelectCompanionScene";
@ -19,19 +19,15 @@ enum LoginTextures {
mainFont = "main_font" mainFont = "main_font"
} }
const selectCompanionSceneKey = 'selectCompanionScene';
export class SelectCompanionScene extends ResizableScene { export class SelectCompanionScene extends ResizableScene {
private logo!: Image;
private textField!: TextField;
private pressReturnField!: TextField;
private readonly nbCharactersPerRow = 7;
private selectedRectangle!: Rectangle;
private selectedCompanion!: Phaser.Physics.Arcade.Sprite; private selectedCompanion!: Phaser.Physics.Arcade.Sprite;
private companions: Array<Phaser.Physics.Arcade.Sprite> = new Array<Phaser.Physics.Arcade.Sprite>(); private companions: Array<Phaser.Physics.Arcade.Sprite> = new Array<Phaser.Physics.Arcade.Sprite>();
private companionModels: Array<CompanionResourceDescriptionInterface|null> = [null]; private companionModels: Array<CompanionResourceDescriptionInterface> = [];
private confirmTouchArea!: Rectangle; private selectCompanionSceneElement!: Phaser.GameObjects.DOMElement;
private currentCompanion = 0;
constructor() { constructor() {
super({ super({
@ -42,208 +38,221 @@ export class SelectCompanionScene extends ResizableScene {
preload() { preload() {
addLoader(this); addLoader(this);
this.load.html(selectCompanionSceneKey, 'resources/html/SelectCompanionScene.html');
getAllCompanionResources(this.load).forEach(model => { getAllCompanionResources(this.load).forEach(model => {
this.companionModels.push(model); this.companionModels.push(model);
}); });
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); addLoader(this);
} }
create() { create() {
const middleX = this.getMiddleX();
this.selectCompanionSceneElement = this.add.dom(middleX, 0).createFromCache(selectCompanionSceneKey);
MenuScene.revealMenusAfterInit(this.selectCompanionSceneElement, selectCompanionSceneKey);
this.selectCompanionSceneElement.addListener('click');
this.selectCompanionSceneElement.on('click', (event:MouseEvent) => {
event.preventDefault();
if((event?.target as HTMLInputElement).id === 'selectCharacterButtonLeft') {
this.moveToLeft();
}else if((event?.target as HTMLInputElement).id === 'selectCharacterButtonRight') {
this.moveToRight();
}else if((event?.target as HTMLInputElement).id === 'selectCompanionSceneFormSubmit') {
this.nextScene();
}else if((event?.target as HTMLInputElement).id === 'selectCompanionSceneFormBack') {
this._nextScene();
}
});
if (touchScreenManager.supportTouchScreen) { if (touchScreenManager.supportTouchScreen) {
new PinchManager(this); new PinchManager(this);
} }
this.textField = new TextField(this, this.game.renderer.width / 2, 50, 'Select your companion');
const confirmTouchAreaY = 115 + 32 * Math.ceil(this.companionModels.length / this.nbCharactersPerRow);
this.pressReturnField = new TextField(
this,
this.game.renderer.width / 2,
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));
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 // input events
this.input.keyboard.on('keyup-ENTER', this.nextScene.bind(this)); this.input.keyboard.on('keyup-ENTER', this.nextScene.bind(this));
this.input.keyboard.on('keydown-RIGHT', this.selectNext.bind(this)); this.input.keyboard.on('keydown-RIGHT', this.moveToRight.bind(this));
this.input.keyboard.on('keydown-LEFT', this.selectPrevious.bind(this)); this.input.keyboard.on('keydown-LEFT', this.moveToLeft.bind(this));
this.input.keyboard.on('keydown-DOWN', this.jumpToNextRow.bind(this));
this.input.keyboard.on('keydown-UP', this.jumpToPreviousRow.bind(this)); if(localUserStore.getCompanion()){
const companionIndex = this.companionModels.findIndex((companion) => companion.name === localUserStore.getCompanion());
if(companionIndex > -1 || companionIndex < this.companions.length){
this.currentCompanion = companionIndex;
this.selectedCompanion = this.companions[companionIndex];
}
}
localUserStore.setCompanion(null);
gameManager.setCompanion(null);
this.createCurrentCompanion(); this.createCurrentCompanion();
this.selectCompanion(this.getCompanionIndex()); this.updateSelectedCompanion();
} }
update(time: number, delta: number): void { update(time: number, delta: number): void {
this.pressReturnField.setVisible(!!(Math.floor(time / 500) % 2)); const middleX = this.getMiddleX();
} this.tweens.add({
targets: this.selectCompanionSceneElement,
private jumpToPreviousRow(): void { x: middleX,
const index = this.companions.indexOf(this.selectedCompanion) - this.nbCharactersPerRow; duration: 1000,
if (index >= 0) { ease: 'Power3'
this.selectCompanion(index); });
}
}
private jumpToNextRow(): void {
const index = this.companions.indexOf(this.selectedCompanion) + this.nbCharactersPerRow;
if (index < this.companions.length) {
this.selectCompanion(index);
}
}
private selectPrevious(): void {
const index = this.companions.indexOf(this.selectedCompanion);
this.selectCompanion(index - 1);
}
private selectNext(): void {
const index = this.companions.indexOf(this.selectedCompanion);
this.selectCompanion(index + 1);
}
private selectCompanion(index?: number): void {
if (typeof index === 'undefined') {
index = this.companions.indexOf(this.selectedCompanion);
}
// make sure index is inside possible range
index = Math.min(this.companions.length - 1, Math.max(0, index));
if (this.selectedCompanion === this.companions[index]) {
return;
}
this.selectedCompanion.anims.pause();
this.selectedCompanion = this.companions[index];
this.redrawSelectedRectangle();
const model = this.companionModels[index];
if (model !== null) {
this.selectedCompanion.anims.play(model.name);
}
}
private redrawSelectedRectangle(): void {
this.selectedRectangle.setVisible(true);
this.selectedRectangle.setX(this.selectedCompanion.x);
this.selectedRectangle.setY(this.selectedCompanion.y);
this.selectedRectangle.setSize(32, 32);
}
private storeCompanionSelection(): string|null {
const index = this.companions.indexOf(this.selectedCompanion);
const model = this.companionModels[index];
const companion = model === null ? null : model.name;
localUserStore.setCompanion(companion);
return companion;
} }
private nextScene(): void { private nextScene(): void {
const companion = this.storeCompanionSelection(); localUserStore.setCompanion(this.companionModels[this.currentCompanion].name);
gameManager.setCompanion(this.companionModels[this.currentCompanion].name);
this._nextScene();
}
private _nextScene(){
// next scene // next scene
this.scene.stop(SelectCompanionSceneName); this.scene.stop(SelectCompanionSceneName);
gameManager.setCompanion(companion);
gameManager.tryResumingGame(this, EnableCameraSceneName); gameManager.tryResumingGame(this, EnableCameraSceneName);
this.scene.remove(SelectCompanionSceneName); this.scene.remove(SelectCompanionSceneName);
} }
private createCurrentCompanion(): void { private createCurrentCompanion(): void {
for (let i = 0; i < this.companionModels.length; i++) { for (let i = 0; i < this.companionModels.length; i++) {
const companionResource = this.companionModels[i]; const companionResource = this.companionModels[i]
const [middleX, middleY] = this.getCompanionPosition();
const col = i % this.nbCharactersPerRow; const companion = this.physics.add.sprite(middleX, middleY, companionResource.name, 0);
const row = Math.floor(i / this.nbCharactersPerRow); this.setUpCompanion(companion, i);
this.anims.create({
const [x, y] = this.getCharacterPosition(col, row); key: companionResource.name,
frames: this.anims.generateFrameNumbers(companionResource.name, {start: 0, end: 2,}),
let name = "null"; frameRate: 10,
if (companionResource !== null) { repeat: -1
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", () => { companion.setInteractive().on("pointerdown", () => {
this.selectCompanion(i); this.currentCompanion = i;
this.updateSelectedCompanion();
}); });
this.companions.push(companion); this.companions.push(companion);
} }
this.selectedCompanion = this.companions[this.currentCompanion];
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
];
} }
public onResize(ev: UIEvent): void { public onResize(ev: UIEvent): void {
this.textField.x = this.game.renderer.width / 2; this.moveCompanion();
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 middleX = this.getMiddleX();
const companion = this.companions[i]; this.tweens.add({
targets: this.selectCompanionSceneElement,
const col = i % this.nbCharactersPerRow; x: middleX,
const row = Math.floor(i / this.nbCharactersPerRow); duration: 1000,
ease: 'Power3'
const [x, y] = this.getCharacterPosition(col, row); });
companion.x = x;
companion.y = y;
}
this.redrawSelectedRectangle();
} }
private getCompanionIndex(): number { private updateSelectedCompanion(): void {
const companion = localUserStore.getCompanion(); this.selectedCompanion?.anims.pause();
const companion = this.companions[this.currentCompanion];
companion.play(this.companionModels[this.currentCompanion].name);
this.selectedCompanion = companion;
}
if (companion === null) { private moveCompanion(){
return 0; for(let i = 0; i < this.companions.length; i++){
const companion = this.companions[i];
this.setUpCompanion(companion, i);
} }
this.updateSelectedCompanion();
}
return this.companionModels.findIndex(model => model !== null && model.name === companion); private moveToLeft(){
if(this.currentCompanion === 0){
return;
}
this.currentCompanion -= 1;
this.moveCompanion();
}
private moveToRight(){
if(this.currentCompanion === (this.companions.length - 1)){
return;
}
this.currentCompanion += 1;
this.moveCompanion();
}
private defineSetupCompanion(numero: number){
const deltaX = 30;
const deltaY = 2;
let [companionX, companionY] = this.getCompanionPosition();
let companionVisible = true;
let companionScale = 1.5;
let companionOpactity = 1;
if( this.currentCompanion !== numero ){
companionVisible = false;
}
if( numero === (this.currentCompanion + 1) ){
companionY -= deltaY;
companionX += deltaX;
companionScale = 0.8;
companionOpactity = 0.6;
companionVisible = true;
}
if( numero === (this.currentCompanion + 2) ){
companionY -= deltaY;
companionX += (deltaX * 2);
companionScale = 0.8;
companionOpactity = 0.6;
companionVisible = true;
}
if( numero === (this.currentCompanion - 1) ){
companionY -= deltaY;
companionX -= deltaX;
companionScale = 0.8;
companionOpactity = 0.6;
companionVisible = true;
}
if( numero === (this.currentCompanion - 2) ){
companionY -= deltaY;
companionX -= (deltaX * 2);
companionScale = 0.8;
companionOpactity = 0.6;
companionVisible = true;
}
return {companionX, companionY, companionScale, companionOpactity, companionVisible}
}
/**
* Returns pixel position by on column and row number
*/
private getCompanionPosition(): [number, number] {
return [
this.game.renderer.width / 2,
this.game.renderer.height / 3
];
}
private setUpCompanion(companion: Phaser.Physics.Arcade.Sprite, numero: number){
const {companionX, companionY, companionScale, companionOpactity, companionVisible} = this.defineSetupCompanion(numero);
companion.setBounce(0.2);
companion.setCollideWorldBounds(true);
companion.setVisible( companionVisible );
companion.setScale(companionScale, companionScale);
companion.setAlpha(companionOpactity);
companion.setX(companionX);
companion.setY(companionY);
}
private getMiddleX() : number{
return (this.game.renderer.width / 2) -
(
this.selectCompanionSceneElement
&& this.selectCompanionSceneElement.node
&& this.selectCompanionSceneElement.node.getBoundingClientRect().width > 0
? (this.selectCompanionSceneElement.node.getBoundingClientRect().width / 4)
: 150
);
} }
} }