fixed a game crashed because of lack of animations and improved the character class
This commit is contained in:
kharhamel
parent
fbb44af369
commit
3ce8427378
|
|
@ -59,6 +59,7 @@ export abstract class Character extends Container {
|
|||
frame?: string | number
|
||||
) {
|
||||
super(scene, x, y/*, texture, frame*/);
|
||||
this.PlayerValue = name;
|
||||
|
||||
this.sprites = new Map<string, Sprite>();
|
||||
|
||||
|
|
@ -73,10 +74,9 @@ export abstract class Character extends Container {
|
|||
});
|
||||
this.add(this.teleportation);*/
|
||||
|
||||
this.PlayerValue = name;
|
||||
this.playerName = new BitmapText(scene, x, y - 25, 'main_font', name, 7);
|
||||
this.playerName = new BitmapText(scene, 0, - 25, 'main_font', name, 7);
|
||||
this.playerName.setOrigin(0.5).setCenterAlign().setDepth(99999);
|
||||
scene.add.existing(this.playerName);
|
||||
this.add(this.playerName);
|
||||
|
||||
scene.add.existing(this);
|
||||
|
||||
|
|
@ -88,8 +88,6 @@ export abstract class Character extends Container {
|
|||
this.getBody().setOffset(0, 8);
|
||||
this.setDepth(-1);
|
||||
|
||||
this.scene.events.on('postupdate', this.postupdate.bind(this));
|
||||
|
||||
this.playAnimation(direction, moving);
|
||||
}
|
||||
|
||||
|
|
@ -181,35 +179,21 @@ export abstract class Character extends Container {
|
|||
if (body.velocity.y < 0) { //moving up
|
||||
this.lastDirection = PlayerAnimationNames.WalkUp;
|
||||
this.playAnimation(PlayerAnimationNames.WalkUp, true);
|
||||
//this.play(`${this.PlayerTexture}-${PlayerAnimationNames.WalkUp}`, true);
|
||||
} else if (body.velocity.y > 0) { //moving down
|
||||
this.lastDirection = PlayerAnimationNames.WalkDown;
|
||||
this.playAnimation(PlayerAnimationNames.WalkDown, true);
|
||||
//this.play(`${this.PlayerTexture}-${PlayerAnimationNames.WalkDown}`, true);
|
||||
} else if (body.velocity.x > 0) { //moving right
|
||||
this.lastDirection = PlayerAnimationNames.WalkRight;
|
||||
this.playAnimation(PlayerAnimationNames.WalkRight, true);
|
||||
//this.play(`${this.PlayerTexture}-${PlayerAnimationNames.WalkRight}`, true);
|
||||
} else if (body.velocity.x < 0) { //moving left
|
||||
this.lastDirection = PlayerAnimationNames.WalkLeft;
|
||||
this.playAnimation(PlayerAnimationNames.WalkLeft, true);
|
||||
//this.anims.playReverse(`${this.PlayerTexture}-${PlayerAnimationNames.WalkLeft}`, true);
|
||||
}
|
||||
|
||||
//todo:remove this, use a container tech to move the bubble instead
|
||||
if (this.bubble) {
|
||||
this.bubble.moveBubble(this.x, this.y);
|
||||
}
|
||||
|
||||
//update depth user
|
||||
this.setDepth(this.y);
|
||||
}
|
||||
|
||||
postupdate(time: number, delta: number) {
|
||||
//super.update(delta);
|
||||
this.playerName.setPosition(this.x, this.y - 25);
|
||||
}
|
||||
|
||||
stop(){
|
||||
this.getBody().setVelocity(0, 0);
|
||||
this.playAnimation(this.lastDirection, false);
|
||||
|
|
@ -218,7 +202,6 @@ export abstract class Character extends Container {
|
|||
say(text: string) {
|
||||
if (this.bubble) return;
|
||||
this.bubble = new SpeechBubble(this.scene, this, text)
|
||||
//todo make the bubble destroy on player movement?
|
||||
setTimeout(() => {
|
||||
if (this.bubble !== null) {
|
||||
this.bubble.destroy();
|
||||
|
|
@ -228,9 +211,6 @@ export abstract class Character extends Container {
|
|||
}
|
||||
|
||||
destroy(): void {
|
||||
if (this.scene) {
|
||||
this.scene.events.removeListener('postupdate', this.postupdate.bind(this));
|
||||
}
|
||||
for (const sprite of this.sprites.values()) {
|
||||
if(this.scene) {
|
||||
this.scene.sys.updateList.remove(sprite);
|
||||
|
|
|
|||
|
|
@ -1,16 +1,12 @@
|
|||
import Scene = Phaser.Scene;
|
||||
import {Character} from "./Character";
|
||||
|
||||
//todo: improve this WIP
|
||||
export class SpeechBubble {
|
||||
private bubble: Phaser.GameObjects.Graphics;
|
||||
private content: Phaser.GameObjects.Text;
|
||||
|
||||
/**
|
||||
*
|
||||
* @param scene
|
||||
* @param player
|
||||
* @param text
|
||||
*/
|
||||
|
||||
constructor(scene: Scene, player: Character, text: string = "") {
|
||||
|
||||
const bubbleHeight = 50;
|
||||
|
|
@ -19,6 +15,7 @@ export class SpeechBubble {
|
|||
const arrowHeight = bubbleHeight / 4;
|
||||
|
||||
this.bubble = scene.add.graphics({ x: player.x + 16, y: player.y - 80 });
|
||||
player.add(this.bubble);
|
||||
|
||||
// Bubble shadow
|
||||
this.bubble.fillStyle(0x222222, 0.5);
|
||||
|
|
@ -53,30 +50,12 @@ export class SpeechBubble {
|
|||
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) } });
|
||||
player.add(this.content);
|
||||
|
||||
const 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) {
|
||||
const bubbleHeight = 50;
|
||||
const bubblePadding = 10;
|
||||
const bubbleWidth = bubblePadding * 2 + this.content.text.length * 10;
|
||||
const 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.bubble.destroy();
|
||||
|
|
|
|||
|
|
@ -66,6 +66,7 @@ import {ChatModeIcon} from "../Components/ChatModeIcon";
|
|||
import {OpenChatIcon, openChatIconName} from "../Components/OpenChatIcon";
|
||||
import {SelectCharacterScene, SelectCharacterSceneName} from "../Login/SelectCharacterScene";
|
||||
import {TextureError} from "../../Exception/TextureError";
|
||||
import {TextField} from "../Components/TextField";
|
||||
|
||||
export interface GameSceneInitInterface {
|
||||
initPosition: PointInterface|null,
|
||||
|
|
@ -209,13 +210,17 @@ export class GameScene extends ResizableScene implements CenterListener {
|
|||
}
|
||||
|
||||
private initProgressBar(): void {
|
||||
const loadingText = this.add.text(this.game.renderer.width / 2, 200, 'Loading');
|
||||
const progress = this.add.graphics();
|
||||
this.load.on('progress', (value: number) => {
|
||||
progress.clear();
|
||||
progress.fillStyle(0xffffff, 1);
|
||||
progress.fillRect(0, 270, 800 * value, 60);
|
||||
});
|
||||
this.load.on('complete', () => progress.destroy());
|
||||
this.load.on('complete', () => {
|
||||
loadingText.destroy();
|
||||
progress.destroy();
|
||||
});
|
||||
}
|
||||
|
||||
// FIXME: we need to put a "unknown" instead of a "any" and validate the structure of the JSON we are receiving.
|
||||
|
|
@ -391,40 +396,11 @@ export class GameScene extends ResizableScene implements CenterListener {
|
|||
|
||||
//notify game manager can to create currentUser in map
|
||||
this.createCurrentPlayer();
|
||||
|
||||
//initialise camera
|
||||
this.removeAllRemotePlayers(); //cleanup the list of remote players in case the scene was rebooted
|
||||
|
||||
this.initCamera();
|
||||
|
||||
// Let's generate the circle for the group delimiter
|
||||
let circleElement = Object.values(this.textures.list).find((object: Texture) => object.key === 'circleSprite-white');
|
||||
if (circleElement) {
|
||||
this.textures.remove('circleSprite-white');
|
||||
}
|
||||
|
||||
circleElement = Object.values(this.textures.list).find((object: Texture) => object.key === 'circleSprite-red');
|
||||
if (circleElement) {
|
||||
this.textures.remove('circleSprite-red');
|
||||
}
|
||||
|
||||
//create white circle canvas use to create sprite
|
||||
this.circleTexture = this.textures.createCanvas('circleSprite-white', 96, 96);
|
||||
const context = this.circleTexture.context;
|
||||
context.beginPath();
|
||||
context.arc(48, 48, 48, 0, 2 * Math.PI, false);
|
||||
// context.lineWidth = 5;
|
||||
context.strokeStyle = '#ffffff';
|
||||
context.stroke();
|
||||
this.circleTexture.refresh();
|
||||
|
||||
//create red circle canvas use to create sprite
|
||||
this.circleRedTexture = this.textures.createCanvas('circleSprite-red', 96, 96);
|
||||
const contextRed = this.circleRedTexture.context;
|
||||
contextRed.beginPath();
|
||||
contextRed.arc(48, 48, 48, 0, 2 * Math.PI, false);
|
||||
// context.lineWidth = 5;
|
||||
contextRed.strokeStyle = '#ff0000';
|
||||
contextRed.stroke();
|
||||
this.circleRedTexture.refresh();
|
||||
this.initCirclesCanvas();
|
||||
|
||||
// Let's pause the scene if the connection is not established yet
|
||||
if (this.isReconnecting) {
|
||||
|
|
@ -606,6 +582,40 @@ export class GameScene extends ResizableScene implements CenterListener {
|
|||
});
|
||||
}
|
||||
|
||||
//todo: into dedicated classes
|
||||
private initCirclesCanvas(): void {
|
||||
// Let's generate the circle for the group delimiter
|
||||
let circleElement = Object.values(this.textures.list).find((object: Texture) => object.key === 'circleSprite-white');
|
||||
if (circleElement) {
|
||||
this.textures.remove('circleSprite-white');
|
||||
}
|
||||
|
||||
circleElement = Object.values(this.textures.list).find((object: Texture) => object.key === 'circleSprite-red');
|
||||
if (circleElement) {
|
||||
this.textures.remove('circleSprite-red');
|
||||
}
|
||||
|
||||
//create white circle canvas use to create sprite
|
||||
this.circleTexture = this.textures.createCanvas('circleSprite-white', 96, 96);
|
||||
const context = this.circleTexture.context;
|
||||
context.beginPath();
|
||||
context.arc(48, 48, 48, 0, 2 * Math.PI, false);
|
||||
// context.lineWidth = 5;
|
||||
context.strokeStyle = '#ffffff';
|
||||
context.stroke();
|
||||
this.circleTexture.refresh();
|
||||
|
||||
//create red circle canvas use to create sprite
|
||||
this.circleRedTexture = this.textures.createCanvas('circleSprite-red', 96, 96);
|
||||
const contextRed = this.circleRedTexture.context;
|
||||
contextRed.beginPath();
|
||||
contextRed.arc(48, 48, 48, 0, 2 * Math.PI, false);
|
||||
// context.lineWidth = 5;
|
||||
contextRed.strokeStyle = '#ff0000';
|
||||
contextRed.stroke();
|
||||
this.circleRedTexture.refresh();
|
||||
}
|
||||
|
||||
private playAudio(url: string|number|boolean|undefined, loop=false): void {
|
||||
if (url === undefined) {
|
||||
audioManager.unloadAudio();
|
||||
|
|
@ -717,6 +727,14 @@ export class GameScene extends ResizableScene implements CenterListener {
|
|||
}
|
||||
}
|
||||
|
||||
private removeAllRemotePlayers(): void {
|
||||
this.MapPlayersByKey.forEach((player: RemotePlayer) => {
|
||||
player.destroy();
|
||||
this.MapPlayers.remove(player);
|
||||
});
|
||||
this.MapPlayersByKey = new Map<number, RemotePlayer>();
|
||||
}
|
||||
|
||||
private switchLayoutMode(): void {
|
||||
//if discussion is activated, this layout cannot be activated
|
||||
if(mediaManager.activatedDiscussion){
|
||||
|
|
@ -1024,14 +1042,7 @@ export class GameScene extends ResizableScene implements CenterListener {
|
|||
*/
|
||||
private doInitUsersPosition(usersPosition: MessageUserPositionInterface[]): void {
|
||||
const currentPlayerId = this.connection.getUserId();
|
||||
|
||||
// clean map
|
||||
this.MapPlayersByKey.forEach((player: RemotePlayer) => {
|
||||
player.destroy();
|
||||
this.MapPlayers.remove(player);
|
||||
});
|
||||
this.MapPlayersByKey = new Map<number, RemotePlayer>();
|
||||
|
||||
this.removeAllRemotePlayers();
|
||||
// load map
|
||||
usersPosition.forEach((userPosition : MessageUserPositionInterface) => {
|
||||
if(userPosition.userId === currentPlayerId){
|
||||
|
|
@ -1224,9 +1235,7 @@ export class GameScene extends ResizableScene implements CenterListener {
|
|||
// Let's put this in Game coordinates by applying the zoom level:
|
||||
xCenter /= ZOOM_LEVEL * RESOLUTION;
|
||||
yCenter /= ZOOM_LEVEL * RESOLUTION;
|
||||
|
||||
//console.log("updateCameraOffset", array, xCenter, yCenter, this.game.renderer.width, this.game.renderer.height);
|
||||
|
||||
|
||||
this.cameras.main.startFollow(this.CurrentPlayer, true, 1, 1, xCenter - this.game.renderer.width / 2, yCenter - this.game.renderer.height / 2);
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue