From 58a1a8a3c979c4279faa686189255324c29c44ca Mon Sep 17 00:00:00 2001 From: gparant Date: Mon, 4 May 2020 01:48:14 +0200 Subject: [PATCH] Add select player in login page --- front/src/Enum/EnvironmentVariable.ts | 2 +- front/src/Phaser/Entity/PlayableCaracter.ts | 3 +- front/src/Phaser/Login/LogincScene.ts | 84 +++++++++++++++++++-- front/src/Phaser/Player/Animation.ts | 12 +-- 4 files changed, 86 insertions(+), 15 deletions(-) diff --git a/front/src/Enum/EnvironmentVariable.ts b/front/src/Enum/EnvironmentVariable.ts index f44f717b..30250d5e 100644 --- a/front/src/Enum/EnvironmentVariable.ts +++ b/front/src/Enum/EnvironmentVariable.ts @@ -1,7 +1,7 @@ const DEBUG_MODE: boolean = process.env.DEBUG_MODE as any === true; const API_URL = process.env.API_URL || "http://api.workadventure.localhost"; const ROOM = [process.env.ROOM || "THECODINGMACHINE"]; -const RESOLUTION = 4; +const RESOLUTION = 3; const ZOOM_LEVEL = 1/*3/4*/; export { diff --git a/front/src/Phaser/Entity/PlayableCaracter.ts b/front/src/Phaser/Entity/PlayableCaracter.ts index fdbe4496..02e5a08b 100644 --- a/front/src/Phaser/Entity/PlayableCaracter.ts +++ b/front/src/Phaser/Entity/PlayableCaracter.ts @@ -1,5 +1,4 @@ -import {getPlayerAnimations, playAnimation, PlayerAnimationNames} from "../Player/Animation"; -import {ActiveEventList, UserInputEvent} from "../UserInput/UserInputManager"; +import {PlayerAnimationNames} from "../Player/Animation"; import {SpeechBubble} from "./SpeechBubble"; import BitmapText = Phaser.GameObjects.BitmapText; diff --git a/front/src/Phaser/Login/LogincScene.ts b/front/src/Phaser/Login/LogincScene.ts index 1807ecb5..fc29e022 100644 --- a/front/src/Phaser/Login/LogincScene.ts +++ b/front/src/Phaser/Login/LogincScene.ts @@ -1,9 +1,12 @@ -import {gameManager} from "../Game/GameManager"; +import {gameManager, HasMovedEvent} from "../Game/GameManager"; import {TextField} from "../Components/TextField"; import {TextInput} from "../Components/TextInput"; import {ClickButton} from "../Components/ClickButton"; -import {GameSceneName} from "../Game/GameScene"; +import {GameSceneInterface, GameSceneName, Textures} from "../Game/GameScene"; import Image = Phaser.GameObjects.Image; +import {Player} from "../Player/Player"; +import {getPlayerAnimations, PlayerAnimationNames} from "../Player/Animation"; +import Rectangle = Phaser.GameObjects.Rectangle; //todo: put this constants in a dedicated file export const LoginSceneName = "LoginScene"; @@ -13,7 +16,7 @@ enum LoginTextures { mainFont = "main_font" } -export class LogincScene extends Phaser.Scene { +export class LogincScene extends Phaser.Scene implements GameSceneInterface { private nameInput: TextInput; private textField: TextField; private playButton: ClickButton; @@ -21,6 +24,32 @@ export class LogincScene extends Phaser.Scene { private pressReturnField: TextField; private logo: Image; + private selectedRectangle: Rectangle; + private selectedPlayer: Phaser.Physics.Arcade.Sprite; + private players: Array = new Array(); + + private playerResources: Array = [ + {name: "male1", img: "resources/characters/pipoya/Male 01-1.png", x: 32, y: 32}, + {name: "male2", img: "resources/characters/pipoya/Male 02-2.png", x: 64, y: 32}, + {name: "male3", img: "resources/characters/pipoya/Male 03-4.png", x: 96, y: 32}, + {name: "male4", img: "resources/characters/pipoya/Male 09-1.png", x: 128, y: 32}, + + {name: "male5", img: "resources/characters/pipoya/Male 10-3.png", x: 32, y: 64}, + {name: "male6", img: "resources/characters/pipoya/Male 17-2.png", x: 64, y: 64}, + {name: "male7", img: "resources/characters/pipoya/Male 18-1.png", x: 96, y: 64}, + {name: "male8", img: "resources/characters/pipoya/Male 16-4.png", x: 128, y: 64}, + + {name: "Female1", img: "resources/characters/pipoya/Female 01-1.png", x: 32, y: 96}, + {name: "Female2", img: "resources/characters/pipoya/Female 02-2.png", x: 64, y: 96}, + {name: "Female3", img: "resources/characters/pipoya/Female 03-4.png", x: 96, y: 96}, + {name: "Female4", img: "resources/characters/pipoya/Female 09-1.png", x: 128, y: 96}, + + {name: "Female5", img: "resources/characters/pipoya/Female 10-3.png", x: 32, y: 128}, + {name: "Female6", img: "resources/characters/pipoya/Female 17-2.png", x: 64, y: 128}, + {name: "Female7", img: "resources/characters/pipoya/Female 18-1.png", x: 96, y: 128}, + {name: "Female8", img: "resources/characters/pipoya/Female 16-4.png", x: 128, y: 128} + ]; + constructor() { super({ key: LoginSceneName @@ -32,6 +61,14 @@ export class LogincScene extends Phaser.Scene { this.load.image(LoginTextures.icon, "resources/logos/tcm_full.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'); + //add player png + this.playerResources.forEach((playerResource: any) => { + this.load.spritesheet( + playerResource.name, + playerResource.img, + {frameWidth: 32, frameHeight: 32} + ); + }); } create() { @@ -42,9 +79,7 @@ export class LogincScene extends Phaser.Scene { this.pressReturnField = new TextField(this, this.game.renderer.width / 2, 130, 'Press enter to start'); this.pressReturnField.setOrigin(0.5).setCenterAlign() - //let x = this.game.renderer.width / 2; - //let y = this.game.renderer.height / 2; - //this.playButton = new ClickButton(this, x, y, LoginTextures.playButton, this.login.bind(this)); + this.selectedRectangle = this.add.rectangle(32, 32, 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); @@ -60,6 +95,8 @@ export class LogincScene extends Phaser.Scene { return this.login(name); }); + /*create user*/ + this.createCurrentPlayer("test"); } update(time: number, delta: number): void { @@ -75,4 +112,39 @@ export class LogincScene extends Phaser.Scene { this.scene.start(GameSceneName); }); } + + Map: Phaser.Tilemaps.Tilemap; + + initAnimation(): void { + + } + + createCurrentPlayer(UserId: string): void { + for (let i = 0; i < this.playerResources.length; i++) { + let playerResource = this.playerResources[i]; + let player = this.physics.add.sprite(playerResource.x, playerResource.y, playerResource.name, playerResource.name); + player.setBounce(0.2); + player.setCollideWorldBounds(true); + this.anims.create({ + key: playerResource.name, + frames: this.anims.generateFrameNumbers(playerResource.name, {start: 0, end: 2,}), + frameRate: 10, + repeat: -1 + }); + player.setInteractive().on("pointerdown", () => { + this.selectedPlayer.anims.pause(); + this.selectedRectangle.setY(player.y); + this.selectedRectangle.setX(player.x); + player.play(playerResource.name); + this.selectedPlayer = player; + }); + this.players.push(player); + } + this.selectedPlayer = this.players[0]; + this.selectedPlayer.play(this.playerResources[0].name); + } + + shareUserPosition(UsersPosition: import("../../Connexion").MessageUserPositionInterface[]): void { + throw new Error("Method not implemented."); + } } diff --git a/front/src/Phaser/Player/Animation.ts b/front/src/Phaser/Player/Animation.ts index 48f34682..0ecc4d74 100644 --- a/front/src/Phaser/Player/Animation.ts +++ b/front/src/Phaser/Player/Animation.ts @@ -17,31 +17,31 @@ export enum PlayerAnimationNames { None = 'none', } -export const getPlayerAnimations = (): AnimationData[] => { +export const getPlayerAnimations = (name: string = Textures.Player): AnimationData[] => { return [{ - key: PlayerAnimationNames.WalkDown, - frameModel: Textures.Player, + key: PlayerAnimationNames.WalkDown, //TODO chnage, it's a key for one anumation of ine user type. + frameModel: name, frameStart: 0, frameEnd: 2, frameRate: 10, repeat: -1 }, { key: PlayerAnimationNames.WalkLeft, - frameModel: Textures.Player, + frameModel: name, frameStart: 3, frameEnd: 5, frameRate: 10, repeat: -1 }, { key: PlayerAnimationNames.WalkRight, - frameModel: Textures.Player, + frameModel: name, frameStart: 6, frameEnd: 8, frameRate: 10, repeat: -1 }, { key: PlayerAnimationNames.WalkUp, - frameModel: Textures.Player, + frameModel: name, frameStart: 9, frameEnd: 11, frameRate: 10,