lbehm/workadventure
1
0
Fork 0
Code Issues Pull requests Releases Activity

Add feature to move bubble

Browse source
This commit is contained in:
gparant 2020-04-13 15:15:20 +02:00
parent 01dbff7aee
commit 48fe86634f
3 changed files with 82 additions and 19 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
front/src/Phaser/Entity/PlayableCaracter.ts
View file

@ -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) {

34
front/src/Phaser/Entity/SpeechBubble.ts
View file

@ -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;
}
}

63
front/src/Phaser/Game/MapManager.ts
View file

@ -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<Phaser.Tilemaps.StaticTilemapLayer>;
Objects : Array<Phaser.Physics.Arcade.Sprite>;
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<Phaser.Tilemaps.StaticTilemapLayer>();
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<Phaser.Physics.Arcade.Sprite>();
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(){