From 793e5318f7fe2d097433725d1d56fac4156cb9fc Mon Sep 17 00:00:00 2001 From: kharhamel Date: Sat, 11 Apr 2020 16:46:28 +0200 Subject: [PATCH 1/8] created a class to centralize all user inputs catching and expose user events --- front/src/Phaser/Game/MapManager.ts | 46 +++----------- front/src/Phaser/Player/Player.ts | 13 ++-- .../src/Phaser/UserInput/UserInputManager.ts | 63 +++++++++++++++++++ 3 files changed, 77 insertions(+), 45 deletions(-) create mode 100644 front/src/Phaser/UserInput/UserInputManager.ts diff --git a/front/src/Phaser/Game/MapManager.ts b/front/src/Phaser/Game/MapManager.ts index 8b3d9231..3f8521d4 100644 --- a/front/src/Phaser/Game/MapManager.ts +++ b/front/src/Phaser/Game/MapManager.ts @@ -2,35 +2,17 @@ import {CameraManager, CameraManagerInterface} from "./CameraManager"; import {RESOLUTION} from "../../Enum/EnvironmentVariable"; import {Player} from "../Player/Player"; import {GameScene, GameSceneInterface} from "./GameScene"; +import {UserInputManager} from "../UserInput/UserInputManager"; export interface MapManagerInterface { - keyZ: Phaser.Input.Keyboard.Key; - keyQ: Phaser.Input.Keyboard.Key; - keyS: Phaser.Input.Keyboard.Key; - keyD: Phaser.Input.Keyboard.Key; - keyRight: Phaser.Input.Keyboard.Key; - keyLeft: Phaser.Input.Keyboard.Key; - keyUp: Phaser.Input.Keyboard.Key; - keyDown: Phaser.Input.Keyboard.Key; - keyShift: Phaser.Input.Keyboard.Key; - Map: Phaser.Tilemaps.Tilemap; Terrain: Phaser.Tilemaps.Tileset; Camera: CameraManagerInterface; Scene: GameSceneInterface; + userInputManager: UserInputManager; update(): void; } export class MapManager implements MapManagerInterface{ - keyZ: Phaser.Input.Keyboard.Key; - keyQ: Phaser.Input.Keyboard.Key; - keyS: Phaser.Input.Keyboard.Key; - keyD: Phaser.Input.Keyboard.Key; - keyRight: Phaser.Input.Keyboard.Key; - keyLeft: Phaser.Input.Keyboard.Key; - keyUp: Phaser.Input.Keyboard.Key; - keyDown: Phaser.Input.Keyboard.Key; - keyShift: Phaser.Input.Keyboard.Key; - Terrain : Phaser.Tilemaps.Tileset; Camera: CameraManagerInterface; CurrentPlayer: Player; @@ -38,6 +20,7 @@ export class MapManager implements MapManagerInterface{ Map: Phaser.Tilemaps.Tilemap; startX = (window.innerWidth / 2) / RESOLUTION; startY = (window.innerHeight / 2) / RESOLUTION; + userInputManager: UserInputManager; constructor(scene: GameSceneInterface){ this.Scene = scene; @@ -49,11 +32,9 @@ export class MapManager implements MapManagerInterface{ this.Map.createStaticLayer("Calque 1", [this.Terrain], 0, 0); this.Map.createStaticLayer("Calque 2", [this.Terrain], 0, 0); - //initialise keyboard - this.initKeyBoard(); - //initialise camera this.Camera = new CameraManager(this.Scene, this.Scene.cameras.main, this); + this.userInputManager = new UserInputManager(this.Scene); //initialise player this.CurrentPlayer = new Player( this.Scene, @@ -65,22 +46,9 @@ export class MapManager implements MapManagerInterface{ this.CurrentPlayer.initAnimation(); } - - initKeyBoard() { - this.keyShift = this.Scene.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.SHIFT); - - this.keyZ = this.Scene.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.Z); - this.keyQ = this.Scene.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.Q); - this.keyS = this.Scene.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.S); - this.keyD = this.Scene.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.D); - - this.keyUp = this.Scene.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.UP); - this.keyLeft = this.Scene.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.LEFT); - this.keyDown = this.Scene.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.DOWN); - this.keyRight = this.Scene.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.RIGHT); - } - update() : void { - this.CurrentPlayer.move(); + let activeEvents = this.userInputManager.getEventListForGameTick(); + + this.CurrentPlayer.move(activeEvents); } } \ No newline at end of file diff --git a/front/src/Phaser/Player/Player.ts b/front/src/Phaser/Player/Player.ts index 563843fd..11b3d4f6 100644 --- a/front/src/Phaser/Player/Player.ts +++ b/front/src/Phaser/Player/Player.ts @@ -3,6 +3,7 @@ import {getPlayerAnimations, playAnimation, PlayerAnimationNames} from "./Animat import {GameSceneInterface} from "../Game/GameScene"; import {ConnexionInstance} from "../Game/GameManager"; import {CameraManagerInterface} from "../Game/CameraManager"; +import {ActiveEventList, UserInputEvent} from "../UserInput/UserInputManager"; export class Player extends Phaser.GameObjects.Sprite{ MapManager : MapManagerInterface; @@ -36,13 +37,13 @@ export class Player extends Phaser.GameObjects.Sprite{ }) } - move(){ + move(activeEvents: ActiveEventList){ //if user client on shift, camera and player speed - let speedMultiplier = this.MapManager.keyShift.isDown ? 5 : 1; + let speedMultiplier = activeEvents.get(UserInputEvent.SpeedUp) ? 5 : 1; let haveMove = false; let direction = null; - if((this.MapManager.keyZ.isDown || this.MapManager.keyUp.isDown)){ + if(activeEvents.get(UserInputEvent.MoveUp)){ if(!this.CanMoveUp()){ return; } @@ -51,7 +52,7 @@ export class Player extends Phaser.GameObjects.Sprite{ haveMove = true; direction = PlayerAnimationNames.WalkUp; } - if((this.MapManager.keyQ.isDown || this.MapManager.keyLeft.isDown)){ + if(activeEvents.get(UserInputEvent.MoveLeft)){ if(!this.CanMoveLeft()){ return; } @@ -60,7 +61,7 @@ export class Player extends Phaser.GameObjects.Sprite{ haveMove = true; direction = PlayerAnimationNames.WalkLeft; } - if((this.MapManager.keyS.isDown || this.MapManager.keyDown.isDown)){ + if(activeEvents.get(UserInputEvent.MoveDown)){ if(!this.CanMoveDown()){ return; } @@ -69,7 +70,7 @@ export class Player extends Phaser.GameObjects.Sprite{ haveMove = true; direction = PlayerAnimationNames.WalkDown; } - if((this.MapManager.keyD.isDown || this.MapManager.keyRight.isDown)){ + if(activeEvents.get(UserInputEvent.MoveRight)){ if(!this.CanMoveRight()){ return; } diff --git a/front/src/Phaser/UserInput/UserInputManager.ts b/front/src/Phaser/UserInput/UserInputManager.ts new file mode 100644 index 00000000..c362bd95 --- /dev/null +++ b/front/src/Phaser/UserInput/UserInputManager.ts @@ -0,0 +1,63 @@ +import Map = Phaser.Structs.Map; +import {GameSceneInterface} from "../Game/GameScene"; + +interface UserInputManagerDatum { + keyCode: number; + keyInstance: Phaser.Input.Keyboard.Key; + event: UserInputEvent +} + +export enum UserInputEvent { + MoveLeft = 1, + MoveUp, + MoveRight, + MoveDown, + SpeedUp, +} + +//we cannot the map structure so we have to create a replacment +export class ActiveEventList { + private data:any; + constructor() { + this.data = {}; + } + get(event: UserInputEvent): boolean { + return this.data[event] || false; + } + set(event: UserInputEvent, value: boolean): boolean { + return this.data[event] = true; + } +} + +//this class is responsible for catching user inputs and listing all active user actions at every game tick events. +export class UserInputManager { + private data: UserInputManagerDatum[] = [ + {keyCode: Phaser.Input.Keyboard.KeyCodes.Z, event: UserInputEvent.MoveUp, keyInstance: null}, + {keyCode: Phaser.Input.Keyboard.KeyCodes.Q, event: UserInputEvent.MoveLeft, keyInstance: null}, + {keyCode: Phaser.Input.Keyboard.KeyCodes.S, event: UserInputEvent.MoveDown, keyInstance: null}, + {keyCode: Phaser.Input.Keyboard.KeyCodes.D, event: UserInputEvent.MoveRight, keyInstance: null}, + + {keyCode: Phaser.Input.Keyboard.KeyCodes.UP, event: UserInputEvent.MoveUp, keyInstance: null}, + {keyCode: Phaser.Input.Keyboard.KeyCodes.LEFT, event: UserInputEvent.MoveLeft, keyInstance: null}, + {keyCode: Phaser.Input.Keyboard.KeyCodes.DOWN, event: UserInputEvent.MoveDown, keyInstance: null}, + {keyCode: Phaser.Input.Keyboard.KeyCodes.RIGHT, event: UserInputEvent.MoveRight, keyInstance: null}, + + {keyCode: Phaser.Input.Keyboard.KeyCodes.SHIFT, event: UserInputEvent.SpeedUp, keyInstance: null}, + ]; + + constructor(Scene : GameSceneInterface) { + this.data.forEach(d => { + d.keyInstance = Scene.input.keyboard.addKey(d.keyCode); + }); + } + + getEventListForGameTick(): ActiveEventList { + let eventsMap = new ActiveEventList(); + this.data.forEach(d => { + if (d. keyInstance.isDown) { + eventsMap.set(d.event, true); + } + }); + return eventsMap; + } +} \ No newline at end of file From 241cbd720ab5e3062381b16d7d5724cef8406c20 Mon Sep 17 00:00:00 2001 From: kharhamel Date: Sat, 11 Apr 2020 18:17:36 +0200 Subject: [PATCH 2/8] added a rock --- front/dist/resources/objects/rockSprite.png | Bin 0 -> 3659 bytes front/src/Phaser/Game/GameScene.ts | 5 ++++ front/src/Phaser/Game/MapManager.ts | 16 ++++++++-- front/src/Phaser/Rock/Rock.ts | 28 ++++++++++++++++++ .../src/Phaser/UserInput/UserInputManager.ts | 3 ++ front/src/index.ts | 3 ++ 6 files changed, 53 insertions(+), 2 deletions(-) create mode 100644 front/dist/resources/objects/rockSprite.png create mode 100644 front/src/Phaser/Rock/Rock.ts diff --git a/front/dist/resources/objects/rockSprite.png b/front/dist/resources/objects/rockSprite.png new file mode 100644 index 0000000000000000000000000000000000000000..40820abd0ee4564498e779462128d879c48dae1e GIT binary patch literal 3659 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 YM$joE+UD)Q$@RdIgSOVi2i$4@0|kzR_y7O^ literal 0 HcmV?d00001 diff --git a/front/src/Phaser/Game/GameScene.ts b/front/src/Phaser/Game/GameScene.ts index d3abfd15..faf19616 100644 --- a/front/src/Phaser/Game/GameScene.ts +++ b/front/src/Phaser/Game/GameScene.ts @@ -1,6 +1,10 @@ import {MapManagerInterface, MapManager} from "./MapManager"; import {GameManagerInterface} from "./GameManager"; +export enum Textures { + Rock = 'rock', +} + export interface GameSceneInterface extends Phaser.Scene { RoomId : string; sharedUserPosition(data : []): void; @@ -18,6 +22,7 @@ export class GameScene extends Phaser.Scene implements GameSceneInterface{ //hook preload scene preload(): void { + this.load.image(Textures.Rock, 'resources/objects/rockSprite.png'); this.load.image('tiles', 'maps/tiles.png'); this.load.tilemapTiledJSON('map', 'maps/map2.json'); this.load.spritesheet('player', diff --git a/front/src/Phaser/Game/MapManager.ts b/front/src/Phaser/Game/MapManager.ts index 3f8521d4..e6a82dc0 100644 --- a/front/src/Phaser/Game/MapManager.ts +++ b/front/src/Phaser/Game/MapManager.ts @@ -1,8 +1,9 @@ import {CameraManager, CameraManagerInterface} from "./CameraManager"; import {RESOLUTION} from "../../Enum/EnvironmentVariable"; import {Player} from "../Player/Player"; -import {GameScene, GameSceneInterface} from "./GameScene"; -import {UserInputManager} from "../UserInput/UserInputManager"; +import {Rock} from "../Rock/Rock"; +import {GameSceneInterface} from "./GameScene"; +import {UserInputEvent, UserInputManager} from "../UserInput/UserInputManager"; export interface MapManagerInterface { Map: Phaser.Tilemaps.Tilemap; @@ -21,6 +22,7 @@ export class MapManager implements MapManagerInterface{ startX = (window.innerWidth / 2) / RESOLUTION; startY = (window.innerHeight / 2) / RESOLUTION; userInputManager: UserInputManager; + private rock: Rock; constructor(scene: GameSceneInterface){ this.Scene = scene; @@ -44,11 +46,21 @@ export class MapManager implements MapManagerInterface{ this ); this.CurrentPlayer.initAnimation(); + this.rock = new Rock( + this.Scene, + 100, + 300, + ); + //this.rock.set() } update() : void { let activeEvents = this.userInputManager.getEventListForGameTick(); this.CurrentPlayer.move(activeEvents); + + /*if (activeEvents.get(UserInputEvent.Interact)) { + + }*/ } } \ No newline at end of file diff --git a/front/src/Phaser/Rock/Rock.ts b/front/src/Phaser/Rock/Rock.ts new file mode 100644 index 00000000..8892f10d --- /dev/null +++ b/front/src/Phaser/Rock/Rock.ts @@ -0,0 +1,28 @@ +import {GameSceneInterface, Textures} from "../Game/GameScene"; +import {CameraManagerInterface} from "../Game/CameraManager"; +import {MapManagerInterface} from "../Game/MapManager"; + +export class Rock extends Phaser.GameObjects.Image { + private isMoving: boolean; + + constructor( + Scene : GameSceneInterface, + x : number, + y : number, + ) { + super(Scene, x, y, Textures.Rock); + Scene.add.existing(this); + this.isMoving = false; + } + + push() { + console.log("the rock is pushed!") + } + + move() { + if(!this.isMoving) { + return; + } + } + +} \ No newline at end of file diff --git a/front/src/Phaser/UserInput/UserInputManager.ts b/front/src/Phaser/UserInput/UserInputManager.ts index c362bd95..e05eccb2 100644 --- a/front/src/Phaser/UserInput/UserInputManager.ts +++ b/front/src/Phaser/UserInput/UserInputManager.ts @@ -13,6 +13,7 @@ export enum UserInputEvent { MoveRight, MoveDown, SpeedUp, + Interact, } //we cannot the map structure so we have to create a replacment @@ -43,6 +44,8 @@ export class UserInputManager { {keyCode: Phaser.Input.Keyboard.KeyCodes.RIGHT, event: UserInputEvent.MoveRight, keyInstance: null}, {keyCode: Phaser.Input.Keyboard.KeyCodes.SHIFT, event: UserInputEvent.SpeedUp, keyInstance: null}, + + {keyCode: Phaser.Input.Keyboard.KeyCodes.E, event: UserInputEvent.Interact, keyInstance: null}, ]; constructor(Scene : GameSceneInterface) { diff --git a/front/src/index.ts b/front/src/index.ts index 650fd52c..f74c9fa5 100644 --- a/front/src/index.ts +++ b/front/src/index.ts @@ -12,6 +12,9 @@ const config: GameConfig = { parent: "game", scene: gameManager.GameScenes, zoom: RESOLUTION, + physics: { + default: 'impact' + }, }; let game = new Phaser.Game(config); From 6e27377b07f31c0e62f3b69f129bcba99f5b51e6 Mon Sep 17 00:00:00 2001 From: kharhamel Date: Sun, 12 Apr 2020 16:12:08 +0200 Subject: [PATCH 3/8] rewrote the app code to more easily allow for collisions --- front/dist/maps/map2.json | 6 ++ front/src/Phaser/Entity/PlayableCaracter.ts | 16 +++ front/src/Phaser/Entity/Sprite.ts | 8 ++ front/src/Phaser/Game/CameraManager.ts | 54 ---------- front/src/Phaser/Game/GameScene.ts | 76 +++++++++++-- front/src/Phaser/Game/MapManager.ts | 66 ------------ front/src/Phaser/Player/Animation.ts | 32 +++--- front/src/Phaser/Player/Player.ts | 114 ++++---------------- front/src/Phaser/Rock/Rock.ts | 28 ----- front/src/index.ts | 7 +- 10 files changed, 139 insertions(+), 268 deletions(-) create mode 100644 front/src/Phaser/Entity/PlayableCaracter.ts create mode 100644 front/src/Phaser/Entity/Sprite.ts delete mode 100644 front/src/Phaser/Game/CameraManager.ts delete mode 100644 front/src/Phaser/Game/MapManager.ts delete mode 100644 front/src/Phaser/Rock/Rock.ts diff --git a/front/dist/maps/map2.json b/front/dist/maps/map2.json index 9a10e634..d68f4df9 100644 --- a/front/dist/maps/map2.json +++ b/front/dist/maps/map2.json @@ -155,6 +155,12 @@ }, { "id":77, + "properties":[ + { + "name":"collides", + "type":"bool", + "value":true + }], "terrain":[2, 2, 2, 2] }, { diff --git a/front/src/Phaser/Entity/PlayableCaracter.ts b/front/src/Phaser/Entity/PlayableCaracter.ts new file mode 100644 index 00000000..8456ed44 --- /dev/null +++ b/front/src/Phaser/Entity/PlayableCaracter.ts @@ -0,0 +1,16 @@ +import {getPlayerAnimations, playAnimation, PlayerAnimationNames} from "../Player/Animation"; +import {ActiveEventList, UserInputEvent} from "../UserInput/UserInputManager"; + +export class PlayableCaracter extends Phaser.Physics.Arcade.Sprite { + + constructor(scene: Phaser.Scene, x: number, y: number, texture: string, frame?: string | number) { + super(scene, x, y, texture, frame); + + scene.sys.updateList.add(this); + scene.sys.displayList.add(this); + this.setScale(2); + scene.physics.world.enableBody(this); + this.setImmovable(true); + this.setCollideWorldBounds(true) + } +} \ No newline at end of file diff --git a/front/src/Phaser/Entity/Sprite.ts b/front/src/Phaser/Entity/Sprite.ts new file mode 100644 index 00000000..f2abad52 --- /dev/null +++ b/front/src/Phaser/Entity/Sprite.ts @@ -0,0 +1,8 @@ +export class Sprite extends Phaser.GameObjects.Sprite { + + constructor(scene: Phaser.Scene, x: number, y: number, texture: string, frame?: number | string) { + super(scene, x, y, texture, frame); + scene.sys.updateList.add(this); + scene.sys.displayList.add(this); + } +} \ No newline at end of file diff --git a/front/src/Phaser/Game/CameraManager.ts b/front/src/Phaser/Game/CameraManager.ts deleted file mode 100644 index b1585542..00000000 --- a/front/src/Phaser/Game/CameraManager.ts +++ /dev/null @@ -1,54 +0,0 @@ -import {RESOLUTION} from "../../Enum/EnvironmentVariable"; -import {Player} from "../Player/Player"; -import {MapManagerInterface} from "./MapManager"; -import {PlayerAnimationNames} from "../Player/Animation"; - -export interface CameraManagerInterface { - MapManager : MapManagerInterface; - moveCamera(CurrentPlayer : Player) : void; -} - -export class CameraManager implements CameraManagerInterface{ - Scene : Phaser.Scene; - Camera : Phaser.Cameras.Scene2D.Camera; - MapManager : MapManagerInterface; - - constructor( - Scene: Phaser.Scene, - Camera : Phaser.Cameras.Scene2D.Camera, - MapManager: MapManagerInterface, - ) { - this.Scene = Scene; - this.MapManager = MapManager; - this.Camera = Camera; - } - - moveCamera(CurrentPlayer : Player): void { - //center of camera - let startX = ((window.innerWidth / 2) / RESOLUTION); - let startY = ((window.innerHeight / 2) / RESOLUTION); - - let limit = { - top: startY, - left: startX, - bottom : this.MapManager.Map.heightInPixels - startY, - right: this.MapManager.Map.widthInPixels - startX, - }; - - if(CurrentPlayer.x < limit.left){ - this.Camera.scrollX = 0; - }else if(CurrentPlayer.x > limit.right){ - this.Camera.scrollX = (limit.right - startX); - }else { - this.Camera.scrollX = (CurrentPlayer.x - startX); - } - - if(CurrentPlayer.y < limit.top){ - this.Camera.scrollY = 0; - }else if(CurrentPlayer.y > limit.bottom){ - this.Camera.scrollY = (limit.bottom - startY); - }else { - this.Camera.scrollY = (CurrentPlayer.y - startY); - } - } -} \ No newline at end of file diff --git a/front/src/Phaser/Game/GameScene.ts b/front/src/Phaser/Game/GameScene.ts index faf19616..3d02cf72 100644 --- a/front/src/Phaser/Game/GameScene.ts +++ b/front/src/Phaser/Game/GameScene.ts @@ -1,8 +1,13 @@ -import {MapManagerInterface, MapManager} from "./MapManager"; import {GameManagerInterface} from "./GameManager"; +import {UserInputManager} from "../UserInput/UserInputManager"; +import {getPlayerAnimations, PlayerAnimationNames} from "../Player/Animation"; +import {Player} from "../Player/Player"; export enum Textures { Rock = 'rock', + Player = 'player', + Map = 'map', + Tiles = 'tiles' } export interface GameSceneInterface extends Phaser.Scene { @@ -10,8 +15,11 @@ export interface GameSceneInterface extends Phaser.Scene { sharedUserPosition(data : []): void; } export class GameScene extends Phaser.Scene implements GameSceneInterface{ - private MapManager : MapManagerInterface; + //private MapManager : MapManagerInterface; RoomId : string; + private player: Player; + private rock: Phaser.Physics.Arcade.Sprite; + private userInputManager: UserInputManager; constructor(RoomId : string, GameManager : GameManagerInterface) { super({ @@ -23,26 +31,72 @@ export class GameScene extends Phaser.Scene implements GameSceneInterface{ //hook preload scene preload(): void { this.load.image(Textures.Rock, 'resources/objects/rockSprite.png'); - this.load.image('tiles', 'maps/tiles.png'); - this.load.tilemapTiledJSON('map', 'maps/map2.json'); - this.load.spritesheet('player', + this.load.image(Textures.Tiles, 'maps/tiles.png'); + this.load.tilemapTiledJSON(Textures.Map, 'maps/map2.json'); + this.load.spritesheet(Textures.Player, 'resources/characters/pipoya/Male 01-1.png', { frameWidth: 32, frameHeight: 32 } ); - } - //hook initialisation - init(){} + getPlayerAnimations().forEach(d => { + this.anims.create({ + key: d.key, + frames: this.anims.generateFrameNumbers(d.frameModel, { start: d.frameStart, end: d.frameEnd }), + frameRate: d.frameRate, + //repeat: d.repeat + }); + }); + } //hook create scene create(): void { - //create map manager - this.MapManager = new MapManager(this); + this.userInputManager = new UserInputManager(this); + + //create entities + this.player = new Player(this, 400, 400); + this.rock = this.physics.add.sprite(200, 400, Textures.Rock, 26).setImmovable(true); + this.physics.world.addCollider(this.player, this.rock, (player: Player, rock) => { + rock.destroy(); + }); + + //create map + let currentMap = this.add.tilemap(Textures.Map); + let terrain = currentMap.addTilesetImage(Textures.Tiles, "tiles"); + let bottomLayer = currentMap.createStaticLayer("Calque 1", [terrain], 0, 0).setDepth(-1); + let topLayer = currentMap.createStaticLayer("Calque 2", [terrain], 0, 0); + this.physics.world.setBounds(0,0, currentMap.widthInPixels, currentMap.heightInPixels); + + this.physics.add.collider(this.player, topLayer); + topLayer.setCollisionByProperty({collides:true}); + + + this.cameras.main.startFollow(this.player); + + + + //debug code + //debug code to see the collision hitbox of the object in the top layer + topLayer.renderDebug(this.add.graphics(),{ + tileColor: null, //non-colliding tiles + collidingTileColor: new Phaser.Display.Color(243, 134, 48, 200), // Colliding tiles, + faceColor: new Phaser.Display.Color(40, 39, 37, 255) // Colliding face edges + }) + + // debug code to get a tile properties by clicking on it + this.input.on("pointerdown", (pointer: Phaser.Input.Pointer)=>{ + //pixel position to tile position + let tile = currentMap.getTileAt(currentMap.worldToTileX(pointer.worldX), currentMap.worldToTileY(pointer.worldY)); + if(tile){ + console.log(tile); + } + }); } //hook update update(dt: number): void { - this.MapManager.update(); + let eventList = this.userInputManager.getEventListForGameTick(); + + this.player.move(eventList); } sharedUserPosition(data: []): void { diff --git a/front/src/Phaser/Game/MapManager.ts b/front/src/Phaser/Game/MapManager.ts deleted file mode 100644 index e6a82dc0..00000000 --- a/front/src/Phaser/Game/MapManager.ts +++ /dev/null @@ -1,66 +0,0 @@ -import {CameraManager, CameraManagerInterface} from "./CameraManager"; -import {RESOLUTION} from "../../Enum/EnvironmentVariable"; -import {Player} from "../Player/Player"; -import {Rock} from "../Rock/Rock"; -import {GameSceneInterface} from "./GameScene"; -import {UserInputEvent, UserInputManager} from "../UserInput/UserInputManager"; - -export interface MapManagerInterface { - Map: Phaser.Tilemaps.Tilemap; - Terrain: Phaser.Tilemaps.Tileset; - Camera: CameraManagerInterface; - Scene: GameSceneInterface; - userInputManager: UserInputManager; - update(): void; -} -export class MapManager implements MapManagerInterface{ - Terrain : Phaser.Tilemaps.Tileset; - Camera: CameraManagerInterface; - CurrentPlayer: Player; - Scene: GameSceneInterface; - Map: Phaser.Tilemaps.Tilemap; - startX = (window.innerWidth / 2) / RESOLUTION; - startY = (window.innerHeight / 2) / RESOLUTION; - userInputManager: UserInputManager; - private rock: Rock; - - constructor(scene: GameSceneInterface){ - this.Scene = scene; - - //initalise map - this.Map = this.Scene.add.tilemap("map"); - this.Terrain = this.Map.addTilesetImage("tiles", "tiles"); - this.Map.createStaticLayer("tiles", "tiles"); - this.Map.createStaticLayer("Calque 1", [this.Terrain], 0, 0); - this.Map.createStaticLayer("Calque 2", [this.Terrain], 0, 0); - - //initialise camera - this.Camera = new CameraManager(this.Scene, this.Scene.cameras.main, this); - this.userInputManager = new UserInputManager(this.Scene); - //initialise player - this.CurrentPlayer = new Player( - this.Scene, - this.startX, - this.startY, - this.Camera, - this - ); - this.CurrentPlayer.initAnimation(); - this.rock = new Rock( - this.Scene, - 100, - 300, - ); - //this.rock.set() - } - - update() : void { - let activeEvents = this.userInputManager.getEventListForGameTick(); - - this.CurrentPlayer.move(activeEvents); - - /*if (activeEvents.get(UserInputEvent.Interact)) { - - }*/ - } -} \ No newline at end of file diff --git a/front/src/Phaser/Player/Animation.ts b/front/src/Phaser/Player/Animation.ts index eb8298f4..48dc3ac9 100644 --- a/front/src/Phaser/Player/Animation.ts +++ b/front/src/Phaser/Player/Animation.ts @@ -1,7 +1,10 @@ +import {Textures} from "../Game/GameScene"; +import {PlayableCaracter} from "../Entity/PlayableCaracter"; + interface AnimationData { key: string; frameRate: number; - repeat: number; + //repeat: number; frameModel: string; //todo use an enum frameStart: number; frameEnd: number; @@ -15,42 +18,39 @@ export enum PlayerAnimationNames { None = 'none', } -export const getPlayerAnimations = (PlayerValue : string): AnimationData[] => { +export const getPlayerAnimations = (): AnimationData[] => { return [{ key: PlayerAnimationNames.WalkDown, - frameModel: PlayerValue, + frameModel: Textures.Player, frameStart: 0, frameEnd: 2, frameRate: 10, - repeat: -1 + //repeat: -1 }, { key: PlayerAnimationNames.WalkLeft, - frameModel: PlayerValue, + frameModel: Textures.Player, frameStart: 3, frameEnd: 5, frameRate: 10, - repeat: -1 + //repeat: -1 }, { key: PlayerAnimationNames.WalkRight, - frameModel: PlayerValue, + frameModel: Textures.Player, frameStart: 6, frameEnd: 8, frameRate: 10, - repeat: -1 + //repeat: -1 }, { key: PlayerAnimationNames.WalkUp, - frameModel: PlayerValue, + frameModel: Textures.Player, frameStart: 9, frameEnd: 11, frameRate: 10, - repeat: -1 + //repeat: -1 }]; }; -export const playAnimation = (Player : Phaser.GameObjects.Sprite, direction : string) => { - if (!Player.anims.currentAnim || Player.anims.currentAnim.key !== direction) { - Player.anims.play(direction); - } else if (direction === PlayerAnimationNames.None && Player.anims.currentAnim) { - Player.anims.currentAnim.destroy(); - } +export const playAnimation = (Player : PlayableCaracter, direction : string) => { + //if (direction === 'none') return; + //Player.play(direction, true); }; diff --git a/front/src/Phaser/Player/Player.ts b/front/src/Phaser/Player/Player.ts index 11b3d4f6..ed85f5b4 100644 --- a/front/src/Phaser/Player/Player.ts +++ b/front/src/Phaser/Player/Player.ts @@ -1,112 +1,44 @@ -import {MapManagerInterface} from "../Game/MapManager"; import {getPlayerAnimations, playAnimation, PlayerAnimationNames} from "./Animation"; -import {GameSceneInterface} from "../Game/GameScene"; +import {GameSceneInterface, Textures} from "../Game/GameScene"; import {ConnexionInstance} from "../Game/GameManager"; -import {CameraManagerInterface} from "../Game/CameraManager"; import {ActiveEventList, UserInputEvent} from "../UserInput/UserInputManager"; +import {PlayableCaracter} from "../Entity/PlayableCaracter"; -export class Player extends Phaser.GameObjects.Sprite{ - MapManager : MapManagerInterface; - PlayerValue : string; - CameraManager: CameraManagerInterface; - - constructor( - Scene : GameSceneInterface, - x : number, - y : number, - CameraManager: CameraManagerInterface, - MapManager: MapManagerInterface, - PlayerValue : string = "player" - ) { - super(Scene, x, y, PlayerValue); - this.PlayerValue = PlayerValue; - Scene.add.existing(this); - this.MapManager = MapManager; - this.CameraManager = CameraManager; - } - - - initAnimation(){ - getPlayerAnimations(this.PlayerValue).forEach(d => { - this.scene.anims.create({ - key: d.key, - frames: this.scene.anims.generateFrameNumbers(d.frameModel, { start: d.frameStart, end: d.frameEnd }), - frameRate: d.frameRate, - repeat: d.repeat - }); - }) +export class Player extends PlayableCaracter{ + + constructor(scene: Phaser.Scene, x: number, y: number) { + super(scene, x, y, Textures.Player, 26); + this.setSize(32, 32); //edit the hitbox to better match the caracter model } move(activeEvents: ActiveEventList){ - //if user client on shift, camera and player speed - let speedMultiplier = activeEvents.get(UserInputEvent.SpeedUp) ? 5 : 1; + let speed = activeEvents.get(UserInputEvent.SpeedUp) ? 500 : 100; let haveMove = false; let direction = null; if(activeEvents.get(UserInputEvent.MoveUp)){ - if(!this.CanMoveUp()){ - return; - } + this.setVelocity(0, -speed) playAnimation(this, PlayerAnimationNames.WalkUp); - this.setY(this.y - (2 * speedMultiplier)); - haveMove = true; - direction = PlayerAnimationNames.WalkUp; - } - if(activeEvents.get(UserInputEvent.MoveLeft)){ - if(!this.CanMoveLeft()){ - return; - } - playAnimation(this, PlayerAnimationNames.WalkLeft); - this.setX(this.x - (2 * speedMultiplier)); - haveMove = true; - direction = PlayerAnimationNames.WalkLeft; - } - if(activeEvents.get(UserInputEvent.MoveDown)){ - if(!this.CanMoveDown()){ - return; - } + } else if(activeEvents.get(UserInputEvent.MoveLeft)){ + this.setVelocity(-speed, 0) + } else if(activeEvents.get(UserInputEvent.MoveDown)){ playAnimation(this, PlayerAnimationNames.WalkDown); - this.setY(this.y + (2 * speedMultiplier)); - haveMove = true; - direction = PlayerAnimationNames.WalkDown; - } - if(activeEvents.get(UserInputEvent.MoveRight)){ - if(!this.CanMoveRight()){ - return; - } - playAnimation(this, PlayerAnimationNames.WalkRight); - this.setX(this.x + (2 * speedMultiplier)); - haveMove = true; - direction = PlayerAnimationNames.WalkRight; - } - if(!haveMove){ + this.setVelocity(0, speed) + } else if(activeEvents.get(UserInputEvent.MoveRight)){ + this.setVelocity(speed, 0) + } else { + this.setVelocity(0, 0) playAnimation(this, PlayerAnimationNames.None); - }else{ - this.sharePosition(direction); } - - this.CameraManager.moveCamera(this); } - private sharePosition(direction : string){ + stop() { + this.setVelocity(0, 0) + } + + /*private sharePosition(direction : string){ if(ConnexionInstance) { ConnexionInstance.sharePosition((this.scene as GameSceneInterface).RoomId, this.x, this.y, direction); } - } - - private CanMoveUp(){ - return this.y > 0; - } - - private CanMoveLeft(){ - return this.x > 0; - } - - private CanMoveDown(){ - return this.MapManager.Map.heightInPixels > this.y; - } - - private CanMoveRight(){ - return this.MapManager.Map.widthInPixels > this.x; - } + }*/ } \ No newline at end of file diff --git a/front/src/Phaser/Rock/Rock.ts b/front/src/Phaser/Rock/Rock.ts deleted file mode 100644 index 8892f10d..00000000 --- a/front/src/Phaser/Rock/Rock.ts +++ /dev/null @@ -1,28 +0,0 @@ -import {GameSceneInterface, Textures} from "../Game/GameScene"; -import {CameraManagerInterface} from "../Game/CameraManager"; -import {MapManagerInterface} from "../Game/MapManager"; - -export class Rock extends Phaser.GameObjects.Image { - private isMoving: boolean; - - constructor( - Scene : GameSceneInterface, - x : number, - y : number, - ) { - super(Scene, x, y, Textures.Rock); - Scene.add.existing(this); - this.isMoving = false; - } - - push() { - console.log("the rock is pushed!") - } - - move() { - if(!this.isMoving) { - return; - } - } - -} \ No newline at end of file diff --git a/front/src/index.ts b/front/src/index.ts index f74c9fa5..a366078a 100644 --- a/front/src/index.ts +++ b/front/src/index.ts @@ -13,8 +13,11 @@ const config: GameConfig = { scene: gameManager.GameScenes, zoom: RESOLUTION, physics: { - default: 'impact' - }, + default: "arcade", + arcade: { + debug: true + } + } }; let game = new Phaser.Game(config); From 2b2b615e7bb2094d7a25f563228da0bb18d9457e Mon Sep 17 00:00:00 2001 From: kharhamel Date: Sun, 12 Apr 2020 17:08:28 +0200 Subject: [PATCH 4/8] added other players models and fixed collision with other entities --- front/src/Phaser/Game/GameScene.ts | 12 +++++++++--- front/src/Phaser/NonPlayer/NonPlayer.ts | 10 ++++++++++ front/src/Phaser/Player/Player.ts | 1 + 3 files changed, 20 insertions(+), 3 deletions(-) create mode 100644 front/src/Phaser/NonPlayer/NonPlayer.ts diff --git a/front/src/Phaser/Game/GameScene.ts b/front/src/Phaser/Game/GameScene.ts index 3d02cf72..545146b1 100644 --- a/front/src/Phaser/Game/GameScene.ts +++ b/front/src/Phaser/Game/GameScene.ts @@ -2,6 +2,7 @@ import {GameManagerInterface} from "./GameManager"; import {UserInputManager} from "../UserInput/UserInputManager"; import {getPlayerAnimations, PlayerAnimationNames} from "../Player/Animation"; import {Player} from "../Player/Player"; +import {NonPlayer} from "../NonPlayer/NonPlayer"; export enum Textures { Rock = 'rock', @@ -20,6 +21,7 @@ export class GameScene extends Phaser.Scene implements GameSceneInterface{ private player: Player; private rock: Phaser.Physics.Arcade.Sprite; private userInputManager: UserInputManager; + private otherPlayers: Phaser.Physics.Arcade.Group; constructor(RoomId : string, GameManager : GameManagerInterface) { super({ @@ -55,9 +57,13 @@ export class GameScene extends Phaser.Scene implements GameSceneInterface{ //create entities this.player = new Player(this, 400, 400); this.rock = this.physics.add.sprite(200, 400, Textures.Rock, 26).setImmovable(true); - this.physics.world.addCollider(this.player, this.rock, (player: Player, rock) => { - rock.destroy(); - }); + this.physics.add.collider(this.player, this.rock); + + this.otherPlayers = this.physics.add.group({ immovable: true }); + this.otherPlayers.add(new NonPlayer(this, 200, 600)); + this.otherPlayers.add(new NonPlayer(this, 400, 600)); + + this.physics.add.collider(this.player, this.otherPlayers); //create map let currentMap = this.add.tilemap(Textures.Map); diff --git a/front/src/Phaser/NonPlayer/NonPlayer.ts b/front/src/Phaser/NonPlayer/NonPlayer.ts new file mode 100644 index 00000000..d9b22001 --- /dev/null +++ b/front/src/Phaser/NonPlayer/NonPlayer.ts @@ -0,0 +1,10 @@ +import {PlayableCaracter} from "../Entity/PlayableCaracter"; +import {Textures} from "../Game/GameScene"; + +export class NonPlayer extends PlayableCaracter { + + constructor(scene: Phaser.Scene, x: number, y: number) { + super(scene, x, y, Textures.Player, 26); + this.setSize(32, 32); //edit the hitbox to better match the caracter model + } +} \ No newline at end of file diff --git a/front/src/Phaser/Player/Player.ts b/front/src/Phaser/Player/Player.ts index ed85f5b4..f6079ac8 100644 --- a/front/src/Phaser/Player/Player.ts +++ b/front/src/Phaser/Player/Player.ts @@ -8,6 +8,7 @@ export class Player extends PlayableCaracter{ constructor(scene: Phaser.Scene, x: number, y: number) { super(scene, x, y, Textures.Player, 26); + this.setImmovable(false); this.setSize(32, 32); //edit the hitbox to better match the caracter model } From d1106d757daba6b0e85a1ac3c22e97bacb6f1d7c Mon Sep 17 00:00:00 2001 From: kharhamel Date: Sun, 12 Apr 2020 17:13:33 +0200 Subject: [PATCH 5/8] made the player pushable by other models --- front/src/Phaser/Game/GameScene.ts | 4 ++++ front/src/Phaser/Player/Player.ts | 2 +- 2 files changed, 5 insertions(+), 1 deletion(-) diff --git a/front/src/Phaser/Game/GameScene.ts b/front/src/Phaser/Game/GameScene.ts index 545146b1..dac1f2fc 100644 --- a/front/src/Phaser/Game/GameScene.ts +++ b/front/src/Phaser/Game/GameScene.ts @@ -103,6 +103,10 @@ export class GameScene extends Phaser.Scene implements GameSceneInterface{ let eventList = this.userInputManager.getEventListForGameTick(); this.player.move(eventList); + + this.otherPlayers.getChildren().forEach((otherPlayer: NonPlayer) => { + otherPlayer.setVelocity(20, 5); + }) } sharedUserPosition(data: []): void { diff --git a/front/src/Phaser/Player/Player.ts b/front/src/Phaser/Player/Player.ts index f6079ac8..e4395b3d 100644 --- a/front/src/Phaser/Player/Player.ts +++ b/front/src/Phaser/Player/Player.ts @@ -8,7 +8,7 @@ export class Player extends PlayableCaracter{ constructor(scene: Phaser.Scene, x: number, y: number) { super(scene, x, y, Textures.Player, 26); - this.setImmovable(false); + this.setImmovable(false); //the current player model should be push away by other players to prevent conflict this.setSize(32, 32); //edit the hitbox to better match the caracter model } From 97a55ab66cd61a3b875fa4ef24bdb98d8d9fd677 Mon Sep 17 00:00:00 2001 From: kharhamel Date: Sun, 12 Apr 2020 18:28:05 +0200 Subject: [PATCH 6/8] fixed the player animations --- front/src/Phaser/Game/GameScene.ts | 16 +++++++++------- front/src/Phaser/NonPlayer/NonPlayer.ts | 2 +- front/src/Phaser/Player/Player.ts | 21 +++++++++++---------- 3 files changed, 21 insertions(+), 18 deletions(-) diff --git a/front/src/Phaser/Game/GameScene.ts b/front/src/Phaser/Game/GameScene.ts index dac1f2fc..648e6579 100644 --- a/front/src/Phaser/Game/GameScene.ts +++ b/front/src/Phaser/Game/GameScene.ts @@ -6,7 +6,7 @@ import {NonPlayer} from "../NonPlayer/NonPlayer"; export enum Textures { Rock = 'rock', - Player = 'player', + Player = 'playerModel', Map = 'map', Tiles = 'tiles' } @@ -39,7 +39,11 @@ export class GameScene extends Phaser.Scene implements GameSceneInterface{ 'resources/characters/pipoya/Male 01-1.png', { frameWidth: 32, frameHeight: 32 } ); + } + //hook create scene + create(): void { + //anims cannot be in preload because it needs to wait to the sprit to be loaded getPlayerAnimations().forEach(d => { this.anims.create({ key: d.key, @@ -48,10 +52,7 @@ export class GameScene extends Phaser.Scene implements GameSceneInterface{ //repeat: d.repeat }); }); - } - - //hook create scene - create(): void { + this.userInputManager = new UserInputManager(this); //create entities @@ -68,8 +69,8 @@ export class GameScene extends Phaser.Scene implements GameSceneInterface{ //create map let currentMap = this.add.tilemap(Textures.Map); let terrain = currentMap.addTilesetImage(Textures.Tiles, "tiles"); - let bottomLayer = currentMap.createStaticLayer("Calque 1", [terrain], 0, 0).setDepth(-1); - let topLayer = currentMap.createStaticLayer("Calque 2", [terrain], 0, 0); + let bottomLayer = currentMap.createStaticLayer("Calque 1", [terrain], 0, 0).setDepth(-2); + let topLayer = currentMap.createStaticLayer("Calque 2", [terrain], 0, 0).setDepth(-1); this.physics.world.setBounds(0,0, currentMap.widthInPixels, currentMap.heightInPixels); this.physics.add.collider(this.player, topLayer); @@ -105,6 +106,7 @@ export class GameScene extends Phaser.Scene implements GameSceneInterface{ this.player.move(eventList); this.otherPlayers.getChildren().forEach((otherPlayer: NonPlayer) => { + //this.physics.accelerateToObject(otherPlayer, this.player); //this line make the models chase the player otherPlayer.setVelocity(20, 5); }) } diff --git a/front/src/Phaser/NonPlayer/NonPlayer.ts b/front/src/Phaser/NonPlayer/NonPlayer.ts index d9b22001..46fa6450 100644 --- a/front/src/Phaser/NonPlayer/NonPlayer.ts +++ b/front/src/Phaser/NonPlayer/NonPlayer.ts @@ -4,7 +4,7 @@ import {Textures} from "../Game/GameScene"; export class NonPlayer extends PlayableCaracter { constructor(scene: Phaser.Scene, x: number, y: number) { - super(scene, x, y, Textures.Player, 26); + super(scene, x, y, Textures.Player, 1); this.setSize(32, 32); //edit the hitbox to better match the caracter model } } \ No newline at end of file diff --git a/front/src/Phaser/Player/Player.ts b/front/src/Phaser/Player/Player.ts index e4395b3d..ff2278f5 100644 --- a/front/src/Phaser/Player/Player.ts +++ b/front/src/Phaser/Player/Player.ts @@ -7,7 +7,7 @@ import {PlayableCaracter} from "../Entity/PlayableCaracter"; export class Player extends PlayableCaracter{ constructor(scene: Phaser.Scene, x: number, y: number) { - super(scene, x, y, Textures.Player, 26); + super(scene, x, y, Textures.Player, 1); this.setImmovable(false); //the current player model should be push away by other players to prevent conflict this.setSize(32, 32); //edit the hitbox to better match the caracter model } @@ -19,27 +19,28 @@ export class Player extends PlayableCaracter{ if(activeEvents.get(UserInputEvent.MoveUp)){ this.setVelocity(0, -speed) - playAnimation(this, PlayerAnimationNames.WalkUp); } else if(activeEvents.get(UserInputEvent.MoveLeft)){ this.setVelocity(-speed, 0) } else if(activeEvents.get(UserInputEvent.MoveDown)){ - playAnimation(this, PlayerAnimationNames.WalkDown); this.setVelocity(0, speed) } else if(activeEvents.get(UserInputEvent.MoveRight)){ this.setVelocity(speed, 0) } else { this.setVelocity(0, 0) - playAnimation(this, PlayerAnimationNames.None); + } + + if (this.body.velocity.x > 0) { //moving right + this.play("right", true); + } else if (this.body.velocity.x < 0) { //moving left + this.anims.playReverse("left", true); + } else if (this.body.velocity.y < 0) { //moving up + this.play("up", true); + } else if (this.body.velocity.y > 0) { //moving down + this.play("down", true); } } stop() { this.setVelocity(0, 0) } - - /*private sharePosition(direction : string){ - if(ConnexionInstance) { - ConnexionInstance.sharePosition((this.scene as GameSceneInterface).RoomId, this.x, this.y, direction); - } - }*/ } \ No newline at end of file From 05379c800190adabddda3003ba65630a8c21cdf3 Mon Sep 17 00:00:00 2001 From: kharhamel Date: Sun, 12 Apr 2020 19:06:31 +0200 Subject: [PATCH 7/8] the other playes now run away from the player on contact --- front/src/Phaser/Entity/PlayableCaracter.ts | 16 +++++++++++ front/src/Phaser/Game/GameScene.ts | 31 +++++++++++++++++---- front/src/Phaser/NonPlayer/NonPlayer.ts | 20 +++++++++++++ front/src/Phaser/Player/Player.ts | 28 ------------------- 4 files changed, 62 insertions(+), 33 deletions(-) diff --git a/front/src/Phaser/Entity/PlayableCaracter.ts b/front/src/Phaser/Entity/PlayableCaracter.ts index 8456ed44..789b2475 100644 --- a/front/src/Phaser/Entity/PlayableCaracter.ts +++ b/front/src/Phaser/Entity/PlayableCaracter.ts @@ -13,4 +13,20 @@ export class PlayableCaracter extends Phaser.Physics.Arcade.Sprite { this.setImmovable(true); this.setCollideWorldBounds(true) } + + move(x: number, y: number){ + + this.setVelocity(x, y); + + //todo improve animations to better account for diagonal movement + if (this.body.velocity.x > 0) { //moving right + this.play(PlayerAnimationNames.WalkRight, true); + } else if (this.body.velocity.x < 0) { //moving left + this.anims.playReverse(PlayerAnimationNames.WalkLeft, true); + } else if (this.body.velocity.y < 0) { //moving up + this.play(PlayerAnimationNames.WalkUp, true); + } else if (this.body.velocity.y > 0) { //moving down + this.play(PlayerAnimationNames.WalkDown, true); + } + } } \ No newline at end of file diff --git a/front/src/Phaser/Game/GameScene.ts b/front/src/Phaser/Game/GameScene.ts index 648e6579..112e452c 100644 --- a/front/src/Phaser/Game/GameScene.ts +++ b/front/src/Phaser/Game/GameScene.ts @@ -1,5 +1,5 @@ import {GameManagerInterface} from "./GameManager"; -import {UserInputManager} from "../UserInput/UserInputManager"; +import {UserInputEvent, UserInputManager} from "../UserInput/UserInputManager"; import {getPlayerAnimations, PlayerAnimationNames} from "../Player/Animation"; import {Player} from "../Player/Player"; import {NonPlayer} from "../NonPlayer/NonPlayer"; @@ -64,7 +64,10 @@ export class GameScene extends Phaser.Scene implements GameSceneInterface{ this.otherPlayers.add(new NonPlayer(this, 200, 600)); this.otherPlayers.add(new NonPlayer(this, 400, 600)); - this.physics.add.collider(this.player, this.otherPlayers); + this.physics.add.collider(this.player, this.otherPlayers, (player: Player, otherPlayer: NonPlayer) => { + console.log("Don't touch me!"); + otherPlayer.fleeFrom(player) + }); //create map let currentMap = this.add.tilemap(Textures.Map); @@ -101,13 +104,31 @@ export class GameScene extends Phaser.Scene implements GameSceneInterface{ //hook update update(dt: number): void { - let eventList = this.userInputManager.getEventListForGameTick(); + //user inputs + let activeEvents = this.userInputManager.getEventListForGameTick(); + let speed = activeEvents.get(UserInputEvent.SpeedUp) ? 500 : 100; + + if(activeEvents.get(UserInputEvent.MoveUp)){ + this.player.move(0, -speed) + } else if(activeEvents.get(UserInputEvent.MoveLeft)){ + this.player.move(-speed, 0) + } else if(activeEvents.get(UserInputEvent.MoveDown)){ + this.player.move(0, speed) + } else if(activeEvents.get(UserInputEvent.MoveRight)){ + this.player.move(speed, 0) + } else { + this.player.move(0, 0) + } - this.player.move(eventList); + //updates other players this.otherPlayers.getChildren().forEach((otherPlayer: NonPlayer) => { //this.physics.accelerateToObject(otherPlayer, this.player); //this line make the models chase the player - otherPlayer.setVelocity(20, 5); + if (otherPlayer.isFleeing) { + otherPlayer.move(otherPlayer.fleeingDirection.x, otherPlayer.fleeingDirection.y); + } else { + otherPlayer.move(0, 0); + } }) } diff --git a/front/src/Phaser/NonPlayer/NonPlayer.ts b/front/src/Phaser/NonPlayer/NonPlayer.ts index 46fa6450..91b83ba3 100644 --- a/front/src/Phaser/NonPlayer/NonPlayer.ts +++ b/front/src/Phaser/NonPlayer/NonPlayer.ts @@ -1,10 +1,30 @@ import {PlayableCaracter} from "../Entity/PlayableCaracter"; import {Textures} from "../Game/GameScene"; +import {UserInputEvent} from "../UserInput/UserInputManager"; +import {Player} from "../Player/Player"; export class NonPlayer extends PlayableCaracter { + isFleeing: boolean = false; + fleeingDirection:any = null //todo create a vector class + constructor(scene: Phaser.Scene, x: number, y: number) { super(scene, x, y, Textures.Player, 1); this.setSize(32, 32); //edit the hitbox to better match the caracter model } + + fleeFrom(player:Player) { + if (this.isFleeing) return; + this.isFleeing = true; + + setTimeout(() => { + console.log("I escaped"); + this.isFleeing = false + this.fleeingDirection = null + }, 3000); + + let vectorX = this.x - player.x; + let vectorY = this.y - player.y; + this.fleeingDirection = {x: vectorX, y: vectorY} + } } \ No newline at end of file diff --git a/front/src/Phaser/Player/Player.ts b/front/src/Phaser/Player/Player.ts index ff2278f5..8c9b462b 100644 --- a/front/src/Phaser/Player/Player.ts +++ b/front/src/Phaser/Player/Player.ts @@ -12,34 +12,6 @@ export class Player extends PlayableCaracter{ this.setSize(32, 32); //edit the hitbox to better match the caracter model } - move(activeEvents: ActiveEventList){ - let speed = activeEvents.get(UserInputEvent.SpeedUp) ? 500 : 100; - let haveMove = false; - let direction = null; - - if(activeEvents.get(UserInputEvent.MoveUp)){ - this.setVelocity(0, -speed) - } else if(activeEvents.get(UserInputEvent.MoveLeft)){ - this.setVelocity(-speed, 0) - } else if(activeEvents.get(UserInputEvent.MoveDown)){ - this.setVelocity(0, speed) - } else if(activeEvents.get(UserInputEvent.MoveRight)){ - this.setVelocity(speed, 0) - } else { - this.setVelocity(0, 0) - } - - if (this.body.velocity.x > 0) { //moving right - this.play("right", true); - } else if (this.body.velocity.x < 0) { //moving left - this.anims.playReverse("left", true); - } else if (this.body.velocity.y < 0) { //moving up - this.play("up", true); - } else if (this.body.velocity.y > 0) { //moving down - this.play("down", true); - } - } - stop() { this.setVelocity(0, 0) } From c51f5f4aa9977e542f6e5c571709555978d0df35 Mon Sep 17 00:00:00 2001 From: kharhamel Date: Sun, 12 Apr 2020 19:35:51 +0200 Subject: [PATCH 8/8] added som ebasic speech bubbles --- front/src/Phaser/Entity/PlayableCaracter.ts | 12 ++++ front/src/Phaser/Entity/SpeechBubble.ts | 62 +++++++++++++++++++ front/src/Phaser/Game/GameScene.ts | 7 ++- front/src/Phaser/NonPlayer/NonPlayer.ts | 3 +- .../src/Phaser/UserInput/UserInputManager.ts | 2 + 5 files changed, 83 insertions(+), 3 deletions(-) create mode 100644 front/src/Phaser/Entity/SpeechBubble.ts diff --git a/front/src/Phaser/Entity/PlayableCaracter.ts b/front/src/Phaser/Entity/PlayableCaracter.ts index 789b2475..0c9db376 100644 --- a/front/src/Phaser/Entity/PlayableCaracter.ts +++ b/front/src/Phaser/Entity/PlayableCaracter.ts @@ -1,7 +1,9 @@ import {getPlayerAnimations, playAnimation, PlayerAnimationNames} from "../Player/Animation"; import {ActiveEventList, UserInputEvent} from "../UserInput/UserInputManager"; +import {SpeechBubble} from "./SpeechBubble"; export class PlayableCaracter extends Phaser.Physics.Arcade.Sprite { + private bubble: SpeechBubble; constructor(scene: Phaser.Scene, x: number, y: number, texture: string, frame?: string | number) { super(scene, x, y, texture, frame); @@ -29,4 +31,14 @@ export class PlayableCaracter extends Phaser.Physics.Arcade.Sprite { this.play(PlayerAnimationNames.WalkDown, true); } } + + say(text: string) { + if (this.bubble) return; + this.bubble = new SpeechBubble(this.scene, this, text) + //todo make the buble destroy on player movement? + setTimeout(() => { + this.bubble.destroy(); + this.bubble = null; + }, 3000) + } } \ No newline at end of file diff --git a/front/src/Phaser/Entity/SpeechBubble.ts b/front/src/Phaser/Entity/SpeechBubble.ts new file mode 100644 index 00000000..e3a055b2 --- /dev/null +++ b/front/src/Phaser/Entity/SpeechBubble.ts @@ -0,0 +1,62 @@ +import Scene = Phaser.Scene; +import {PlayableCaracter} from "./PlayableCaracter"; + +export class SpeechBubble { + private bubble: Phaser.GameObjects.Graphics; + private content: Phaser.GameObjects.Text; + + constructor(scene: Scene, player: PlayableCaracter, text: string) { + + let bubbleHeight = 50; + let bubblePadding = 10; + let bubbleWidth = bubblePadding * 2 + text.length * 10; + let arrowHeight = bubbleHeight / 4; + + this.bubble = scene.add.graphics({ x: player.x + 16, y: player.y - 80 }); + + // Bubble shadow + this.bubble.fillStyle(0x222222, 0.5); + this.bubble.fillRoundedRect(6, 6, bubbleWidth, bubbleHeight, 16); + + // this.bubble color + this.bubble.fillStyle(0xffffff, 1); + + // this.bubble outline line style + this.bubble.lineStyle(4, 0x565656, 1); + + // this.bubble shape and outline + this.bubble.strokeRoundedRect(0, 0, bubbleWidth, bubbleHeight, 16); + this.bubble.fillRoundedRect(0, 0, bubbleWidth, bubbleHeight, 16); + + // Calculate arrow coordinates + let point1X = Math.floor(bubbleWidth / 7); + let point1Y = bubbleHeight; + let point2X = Math.floor((bubbleWidth / 7) * 2); + let point2Y = bubbleHeight; + let point3X = Math.floor(bubbleWidth / 7); + let point3Y = Math.floor(bubbleHeight + arrowHeight); + + // bubble arrow shadow + this.bubble.lineStyle(4, 0x222222, 0.5); + this.bubble.lineBetween(point2X - 1, point2Y + 6, point3X + 2, point3Y); + + // bubble arrow fill + this.bubble.fillTriangle(point1X, point1Y, point2X, point2Y, point3X, point3Y); + this.bubble.lineStyle(2, 0x565656, 1); + this.bubble.lineBetween(point2X, point2Y, point3X, point3Y); + this.bubble.lineBetween(point1X, point1Y, point3X, point3Y); + + this.content = scene.add.text(0, 0, text, { fontFamily: 'Arial', fontSize: 20, color: '#000000', align: 'center', wordWrap: { width: bubbleWidth - (bubblePadding * 2) } }); + + let bounds = this.content.getBounds(); + + this.content.setPosition(this.bubble.x + (bubbleWidth / 2) - (bounds.width / 2), this.bubble.y + (bubbleHeight / 2) - (bounds.height / 2)); + + } + + destroy(): void { + this.bubble.setVisible(false) //todo find a better way + this.content.destroy() + } + +} \ No newline at end of file diff --git a/front/src/Phaser/Game/GameScene.ts b/front/src/Phaser/Game/GameScene.ts index 112e452c..eab3df65 100644 --- a/front/src/Phaser/Game/GameScene.ts +++ b/front/src/Phaser/Game/GameScene.ts @@ -1,6 +1,6 @@ import {GameManagerInterface} from "./GameManager"; import {UserInputEvent, UserInputManager} from "../UserInput/UserInputManager"; -import {getPlayerAnimations, PlayerAnimationNames} from "../Player/Animation"; +import {getPlayerAnimations} from "../Player/Animation"; import {Player} from "../Player/Player"; import {NonPlayer} from "../NonPlayer/NonPlayer"; @@ -65,7 +65,6 @@ export class GameScene extends Phaser.Scene implements GameSceneInterface{ this.otherPlayers.add(new NonPlayer(this, 400, 600)); this.physics.add.collider(this.player, this.otherPlayers, (player: Player, otherPlayer: NonPlayer) => { - console.log("Don't touch me!"); otherPlayer.fleeFrom(player) }); @@ -120,6 +119,10 @@ export class GameScene extends Phaser.Scene implements GameSceneInterface{ this.player.move(0, 0) } + if(activeEvents.get(UserInputEvent.Shout)) { + this.player.say('HEHO!'); + } + //updates other players this.otherPlayers.getChildren().forEach((otherPlayer: NonPlayer) => { diff --git a/front/src/Phaser/NonPlayer/NonPlayer.ts b/front/src/Phaser/NonPlayer/NonPlayer.ts index 91b83ba3..f2d748ab 100644 --- a/front/src/Phaser/NonPlayer/NonPlayer.ts +++ b/front/src/Phaser/NonPlayer/NonPlayer.ts @@ -15,10 +15,11 @@ export class NonPlayer extends PlayableCaracter { fleeFrom(player:Player) { if (this.isFleeing) return; + this.say("Don't touch me!"); this.isFleeing = true; setTimeout(() => { - console.log("I escaped"); + this.say("Feww, I escaped."); this.isFleeing = false this.fleeingDirection = null }, 3000); diff --git a/front/src/Phaser/UserInput/UserInputManager.ts b/front/src/Phaser/UserInput/UserInputManager.ts index e05eccb2..1e5e6e13 100644 --- a/front/src/Phaser/UserInput/UserInputManager.ts +++ b/front/src/Phaser/UserInput/UserInputManager.ts @@ -14,6 +14,7 @@ export enum UserInputEvent { MoveDown, SpeedUp, Interact, + Shout, } //we cannot the map structure so we have to create a replacment @@ -46,6 +47,7 @@ export class UserInputManager { {keyCode: Phaser.Input.Keyboard.KeyCodes.SHIFT, event: UserInputEvent.SpeedUp, keyInstance: null}, {keyCode: Phaser.Input.Keyboard.KeyCodes.E, event: UserInputEvent.Interact, keyInstance: null}, + {keyCode: Phaser.Input.Keyboard.KeyCodes.F, event: UserInputEvent.Shout, keyInstance: null}, ]; constructor(Scene : GameSceneInterface) {