From 48fe86634fd2499f8ab3fd711d453a10ba2d8c11 Mon Sep 17 00:00:00 2001 From: gparant Date: Mon, 13 Apr 2020 15:15:20 +0200 Subject: [PATCH] Add feature to move bubble --- front/src/Phaser/Entity/PlayableCaracter.ts | 4 ++ front/src/Phaser/Entity/SpeechBubble.ts | 34 +++++++++-- front/src/Phaser/Game/MapManager.ts | 63 ++++++++++++++++----- 3 files changed, 82 insertions(+), 19 deletions(-) diff --git a/front/src/Phaser/Entity/PlayableCaracter.ts b/front/src/Phaser/Entity/PlayableCaracter.ts index 69bcfd55..d2a72b14 100644 --- a/front/src/Phaser/Entity/PlayableCaracter.ts +++ b/front/src/Phaser/Entity/PlayableCaracter.ts @@ -31,6 +31,10 @@ export class PlayableCaracter extends Phaser.Physics.Arcade.Sprite { } else if (this.body.velocity.y > 0) { //moving down this.play(PlayerAnimationNames.WalkDown, true); } + + if(this.bubble) { + this.bubble.moveBubble(this.x, this.y); + } } say(text: string) { diff --git a/front/src/Phaser/Entity/SpeechBubble.ts b/front/src/Phaser/Entity/SpeechBubble.ts index e3a055b2..51aaa169 100644 --- a/front/src/Phaser/Entity/SpeechBubble.ts +++ b/front/src/Phaser/Entity/SpeechBubble.ts @@ -5,7 +5,13 @@ export class SpeechBubble { private bubble: Phaser.GameObjects.Graphics; private content: Phaser.GameObjects.Text; - constructor(scene: Scene, player: PlayableCaracter, text: string) { + /** + * + * @param scene + * @param player + * @param text + */ + constructor(scene: Scene, player: PlayableCaracter, text: string = "") { let bubbleHeight = 50; let bubblePadding = 10; @@ -49,14 +55,34 @@ export class SpeechBubble { 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)); - + } + + /** + * + * @param x + * @param y + */ + moveBubble(x : number, y : number) { + if (this.bubble) { + this.bubble.setPosition((x + 16), (y - 80)); + } + if (this.content) { + let bubbleHeight = 50; + let bubblePadding = 10; + let bubbleWidth = bubblePadding * 2 + this.content.text.length * 10; + let bounds = this.content.getBounds(); + //this.content.setPosition(x, y); + 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() + this.bubble.destroy(); + this.bubble = null; + this.content.destroy(); + this.content = null; } } \ No newline at end of file diff --git a/front/src/Phaser/Game/MapManager.ts b/front/src/Phaser/Game/MapManager.ts index 3a91954c..1ac8d57e 100644 --- a/front/src/Phaser/Game/MapManager.ts +++ b/front/src/Phaser/Game/MapManager.ts @@ -4,6 +4,8 @@ import {CurrentGamerInterface, GamerInterface, Player} from "../Player/Player"; import {GameSceneInterface, Textures} from "./GameScene"; import {MessageUserPositionInterface} from "../../Connexion"; import {NonPlayer} from "../NonPlayer/NonPlayer"; +import GameObject = Phaser.GameObjects.GameObject; +import Tile = Phaser.Tilemaps.Tile; export interface MapManagerInterface { Map: Phaser.Tilemaps.Tilemap; @@ -22,14 +24,11 @@ export class MapManager implements MapManagerInterface{ MapPlayers : Phaser.Physics.Arcade.Group; Scene: GameSceneInterface; Map: Phaser.Tilemaps.Tilemap; - BottomLayer: Phaser.Tilemaps.StaticTilemapLayer; - TopLayer: Phaser.Tilemaps.StaticTilemapLayer; + Layers : Array; + Objects : Array; startX = (window.innerWidth / 2) / RESOLUTION; startY = (window.innerHeight / 2) / RESOLUTION; - //entities - private rock: Phaser.Physics.Arcade.Sprite; - constructor(scene: GameSceneInterface){ this.Scene = scene; @@ -37,20 +36,26 @@ export class MapManager implements MapManagerInterface{ this.Map = this.Scene.add.tilemap("map"); this.Terrain = this.Map.addTilesetImage("tiles", "tiles"); this.Map.createStaticLayer("tiles", "tiles"); - this.BottomLayer = this.Map.createStaticLayer("Calque 1", [this.Terrain], 0, 0).setDepth(-2); - this.TopLayer = this.Map.createStaticLayer("Calque 2", [this.Terrain], 0, 0).setDepth(-1); + + //permit to set bound collision this.Scene.physics.world.setBounds(0,0, this.Map.widthInPixels, this.Map.heightInPixels); - //add entitites - this.rock = this.Scene.physics.add.sprite(200, 400, Textures.Rock, 26).setImmovable(true); + //add layer on map + this.Layers = new Array(); + this.addLayer( this.Map.createStaticLayer("Calque 1", [this.Terrain], 0, 0).setDepth(-2) ); + this.addLayer( this.Map.createStaticLayer("Calque 2", [this.Terrain], 0, 0).setDepth(-1) ); + + //add entities + this.Objects = new Array(); + this.addSpite(this.Scene.physics.add.sprite(200, 400, Textures.Rock, 26)); //debug code //debug code to see the collision hitbox of the object in the top layer - this.TopLayer.renderDebug(this.Scene.add.graphics(),{ + /*this.TopLayer.renderDebug(this.Scene.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 - }); + });*/ //init event click this.EventToClickOnTile(); @@ -62,6 +67,36 @@ export class MapManager implements MapManagerInterface{ this.MapPlayers = this.Scene.physics.add.group({ immovable: true }); } + addLayer(Layer : Phaser.Tilemaps.StaticTilemapLayer){ + this.Layers.push(Layer); + } + + createCollisionWithPlayer() { + //add collision layer + this.Layers.forEach((Layer: Phaser.Tilemaps.StaticTilemapLayer) => { + this.Scene.physics.add.collider(this.CurrentPlayer, Layer); + Layer.setCollisionByProperty({collides: true}); + //debug code + //debug code to see the collision hitbox of the object in the top layer + Layer.renderDebug(this.Scene.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 + }); + }); + } + + addSpite(Object : Phaser.Physics.Arcade.Sprite){ + Object.setImmovable(true); + this.Objects.push(Object); + } + + createCollisionObject(){ + this.Objects.forEach((Object : Phaser.Physics.Arcade.Sprite) => { + this.Scene.physics.add.collider(this.CurrentPlayer, Object); + }) + } + createCurrentPlayer(UserId : string){ //initialise player this.CurrentPlayer = new Player( @@ -75,10 +110,8 @@ export class MapManager implements MapManagerInterface{ this.CurrentPlayer.initAnimation(); //create collision - this.Scene.physics.add.collider(this.CurrentPlayer, this.rock); - //add collision layer - this.Scene.physics.add.collider(this.CurrentPlayer, this.TopLayer); - this.TopLayer.setCollisionByProperty({collides:true}); + this.createCollisionWithPlayer(); + this.createCollisionObject(); } EventToClickOnTile(){