From 6e27377b07f31c0e62f3b69f129bcba99f5b51e6 Mon Sep 17 00:00:00 2001 From: kharhamel Date: Sun, 12 Apr 2020 16:12:08 +0200 Subject: [PATCH] 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 | 112 ++++---------------- front/src/Phaser/Rock/Rock.ts | 28 ----- front/src/index.ts | 7 +- 10 files changed, 138 insertions(+), 267 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 9a10e63..d68f4df 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 0000000..8456ed4 --- /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 0000000..f2abad5 --- /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 b158554..0000000 --- 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 faf1961..3d02cf7 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 e6a82dc..0000000 --- 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 eb8298f..48dc3ac 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 11b3d4f..ed85f5b 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); + stop() { + this.setVelocity(0, 0) } - private sharePosition(direction : string){ + /*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 8892f10..0000000 --- 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 f74c9fa..a366078 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); -- 2.25.1