_Bastler/partey_workadventure
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

latest dev

Browse Source
This commit is contained in:
_Bastler
2021-09-06 18:36:31 +02:00
parent 22ff1cc82e
commit f320184d23
32 changed files with 618 additions and 237 deletions
Download Patch File Download Diff File Expand all files Collapse all files
front/src/Phaser/Components/Loader.ts
+6
View File
@@ -70,3 +70,9 @@ export const addLoader = (scene: Phaser.Scene): void => {
}
});
};
export const removeLoader = (scene: Phaser.Scene): void => {
if (scene.load.textureManager.exists(LogoNameIndex)) {
scene.load.textureManager.remove(LogoNameIndex);
}
};
front/src/Phaser/Entity/Character.ts
+138 -112
View File
@@ -1,29 +1,30 @@
import {PlayerAnimationDirections, PlayerAnimationTypes} from "../Player/Animation";
import {SpeechBubble} from "./SpeechBubble";
import { PlayerAnimationDirections, PlayerAnimationTypes } from "../Player/Animation";
import { SpeechBubble } from "./SpeechBubble";
import Text = Phaser.GameObjects.Text;
import Container = Phaser.GameObjects.Container;
import Sprite = Phaser.GameObjects.Sprite;
import {TextureError} from "../../Exception/TextureError";
import {Companion} from "../Companion/Companion";
import type {GameScene} from "../Game/GameScene";
import {DEPTH_INGAME_TEXT_INDEX} from "../Game/DepthIndexes";
import {waScaleManager} from "../Services/WaScaleManager";
import { TextureError } from "../../Exception/TextureError";
import { Companion } from "../Companion/Companion";
import type { GameScene } from "../Game/GameScene";
import { DEPTH_INGAME_TEXT_INDEX } from "../Game/DepthIndexes";
import { waScaleManager } from "../Services/WaScaleManager";
import type OutlinePipelinePlugin from "phaser3-rex-plugins/plugins/outlinepipeline-plugin.js";
import { isSilentStore } from "../../Stores/MediaStore";
const playerNameY = - 25;
const playerNameY = -25;
interface AnimationData {
key: string;
frameRate: number;
repeat: number;
frameModel: string; //todo use an enum
frames : number[]
frames: number[];
}
const interactiveRadius = 35;
export abstract class Character extends Container {
private bubble: SpeechBubble|null = null;
private bubble: SpeechBubble | null = null;
private readonly playerName: Text;
public PlayerValue: string;
public sprites: Map<string, Sprite>;
@@ -35,32 +36,38 @@ export abstract class Character extends Container {
private emoteTween: Phaser.Tweens.Tween|null = null;
scene: GameScene;
constructor(scene: GameScene,
x: number,
y: number,
texturesPromise: Promise<string[]>,
name: string,
direction: PlayerAnimationDirections,
moving: boolean,
frame: string | number,
isClickable: boolean,
companion: string|null,
companionTexturePromise?: Promise<string>
constructor(
scene: GameScene,
x: number,
y: number,
texturesPromise: Promise<string[]>,
name: string,
direction: PlayerAnimationDirections,
moving: boolean,
frame: string | number,
isClickable: boolean,
companion: string | null,
companionTexturePromise?: Promise<string>
) {
super(scene, x, y/*, texture, frame*/);
super(scene, x, y /*, texture, frame*/);
this.scene = scene;
this.PlayerValue = name;
this.invisible = true
this.invisible = true;
this.sprites = new Map<string, Sprite>();
//textures are inside a Promise in case they need to be lazyloaded before use.
texturesPromise.then((textures) => {
this.addTextures(textures, frame);
this.invisible = false
})
this.invisible = false;
});
this.playerName = new Text(scene, 0, playerNameY, name, {fontFamily: '"Press Start 2P"', fontSize: '8px', strokeThickness: 2, stroke: "#000"});
this.playerName = new Text(scene, 0, playerNameY, name, {
fontFamily: '"Press Start 2P"',
fontSize: "8px",
strokeThickness: 2,
stroke: "#000",
});
this.playerName.setOrigin(0.5).setDepth(DEPTH_INGAME_TEXT_INDEX);
this.add(this.playerName);
@@ -71,18 +78,17 @@ export abstract class Character extends Container {
useHandCursor: true,
});
this.on('pointerover',() => {
this.on("pointerover", () => {
this.getOutlinePlugin()?.add(this.playerName, {
thickness: 2,
outlineColor: 0xffff00
outlineColor: 0xffff00,
});
this.scene.markDirty();
});
this.on('pointerout',() => {
this.on("pointerout", () => {
this.getOutlinePlugin()?.remove(this.playerName);
this.scene.markDirty();
})
});
}
scene.add.existing(this);
@@ -97,38 +103,38 @@ export abstract class Character extends Container {
this.playAnimation(direction, moving);
if (typeof companion === 'string') {
if (typeof companion === "string") {
this.addCompanion(companion, companionTexturePromise);
}
}
private getOutlinePlugin(): OutlinePipelinePlugin|undefined {
return this.scene.plugins.get('rexOutlinePipeline') as unknown as OutlinePipelinePlugin|undefined;
private getOutlinePlugin(): OutlinePipelinePlugin | undefined {
return this.scene.plugins.get("rexOutlinePipeline") as unknown as OutlinePipelinePlugin | undefined;
}
public addCompanion(name: string, texturePromise?: Promise<string>): void {
if (typeof texturePromise !== 'undefined') {
if (typeof texturePromise !== "undefined") {
this.companion = new Companion(this.scene, this.x, this.y, name, texturePromise);
}
}
public addTextures(textures: string[], frame?: string | number): void {
for (const texture of textures) {
if(this.scene && !this.scene.textures.exists(texture)){
throw new TextureError('texture not found');
if (this.scene && !this.scene.textures.exists(texture)) {
throw new TextureError("texture not found");
}
const sprite = new Sprite(this.scene, 0, 0, texture, frame);
this.add(sprite);
this.getPlayerAnimations(texture).forEach(d => {
this.getPlayerAnimations(texture).forEach((d) => {
this.scene.anims.create({
key: d.key,
frames: this.scene.anims.generateFrameNumbers(d.frameModel, {frames: d.frames}),
frames: this.scene.anims.generateFrameNumbers(d.frameModel, { frames: d.frames }),
frameRate: d.frameRate,
repeat: d.repeat
repeat: d.repeat,
});
})
});
// Needed, otherwise, animations are not handled correctly.
if(this.scene) {
if (this.scene) {
this.scene.sys.updateList.add(sprite);
}
this.sprites.set(texture, sprite);
@@ -136,68 +142,77 @@ export abstract class Character extends Container {
}
private getPlayerAnimations(name: string): AnimationData[] {
return [{
key: `${name}-${PlayerAnimationDirections.Down}-${PlayerAnimationTypes.Walk}`,
frameModel: name,
frames: [0, 1, 2, 1],
frameRate: 10,
repeat: -1
}, {
key: `${name}-${PlayerAnimationDirections.Left}-${PlayerAnimationTypes.Walk}`,
frameModel: name,
frames: [3, 4, 5, 4],
frameRate: 10,
repeat: -1
}, {
key: `${name}-${PlayerAnimationDirections.Right}-${PlayerAnimationTypes.Walk}`,
frameModel: name,
frames: [6, 7, 8, 7],
frameRate: 10,
repeat: -1
}, {
key: `${name}-${PlayerAnimationDirections.Up}-${PlayerAnimationTypes.Walk}`,
frameModel: name,
frames: [9, 10, 11, 10],
frameRate: 10,
repeat: -1
},{
key: `${name}-${PlayerAnimationDirections.Down}-${PlayerAnimationTypes.Idle}`,
frameModel: name,
frames: [1],
frameRate: 10,
repeat: 1
}, {
key: `${name}-${PlayerAnimationDirections.Left}-${PlayerAnimationTypes.Idle}`,
frameModel: name,
frames: [4],
frameRate: 10,
repeat: 1
}, {
key: `${name}-${PlayerAnimationDirections.Right}-${PlayerAnimationTypes.Idle}`,
frameModel: name,
frames: [7],
frameRate: 10,
repeat: 1
}, {
key: `${name}-${PlayerAnimationDirections.Up}-${PlayerAnimationTypes.Idle}`,
frameModel: name,
frames: [10],
frameRate: 10,
repeat: 1
}];
return [
{
key: `${name}-${PlayerAnimationDirections.Down}-${PlayerAnimationTypes.Walk}`,
frameModel: name,
frames: [0, 1, 2, 1],
frameRate: 10,
repeat: -1,
},
{
key: `${name}-${PlayerAnimationDirections.Left}-${PlayerAnimationTypes.Walk}`,
frameModel: name,
frames: [3, 4, 5, 4],
frameRate: 10,
repeat: -1,
},
{
key: `${name}-${PlayerAnimationDirections.Right}-${PlayerAnimationTypes.Walk}`,
frameModel: name,
frames: [6, 7, 8, 7],
frameRate: 10,
repeat: -1,
},
{
key: `${name}-${PlayerAnimationDirections.Up}-${PlayerAnimationTypes.Walk}`,
frameModel: name,
frames: [9, 10, 11, 10],
frameRate: 10,
repeat: -1,
},
{
key: `${name}-${PlayerAnimationDirections.Down}-${PlayerAnimationTypes.Idle}`,
frameModel: name,
frames: [1],
frameRate: 10,
repeat: 1,
},
{
key: `${name}-${PlayerAnimationDirections.Left}-${PlayerAnimationTypes.Idle}`,
frameModel: name,
frames: [4],
frameRate: 10,
repeat: 1,
},
{
key: `${name}-${PlayerAnimationDirections.Right}-${PlayerAnimationTypes.Idle}`,
frameModel: name,
frames: [7],
frameRate: 10,
repeat: 1,
},
{
key: `${name}-${PlayerAnimationDirections.Up}-${PlayerAnimationTypes.Idle}`,
frameModel: name,
frames: [10],
frameRate: 10,
repeat: 1,
},
];
}
protected playAnimation(direction : PlayerAnimationDirections, moving: boolean): void {
protected playAnimation(direction: PlayerAnimationDirections, moving: boolean): void {
if (this.invisible) return;
for (const [texture, sprite] of this.sprites.entries()) {
if (!sprite.anims) {
console.error('ANIMS IS NOT DEFINED!!!');
console.error("ANIMS IS NOT DEFINED!!!");
return;
}
if (moving && (!sprite.anims.currentAnim || sprite.anims.currentAnim.key !== direction)) {
sprite.play(texture+'-'+direction+'-'+PlayerAnimationTypes.Walk, true);
sprite.play(texture + "-" + direction + "-" + PlayerAnimationTypes.Walk, true);
} else if (!moving) {
sprite.anims.play(texture + '-' + direction + '-'+PlayerAnimationTypes.Idle, true);
sprite.anims.play(texture + "-" + direction + "-" + PlayerAnimationTypes.Idle, true);
}
}
}
@@ -205,7 +220,7 @@ export abstract class Character extends Container {
protected getBody(): Phaser.Physics.Arcade.Body {
const body = this.body;
if (!(body instanceof Phaser.Physics.Arcade.Body)) {
throw new Error('Container does not have arcade body');
throw new Error("Container does not have arcade body");
}
return body;
}
@@ -216,16 +231,20 @@ export abstract class Character extends Container {
body.setVelocity(x, y);
// up or down animations are prioritized over left and right
if (body.velocity.y < 0) { //moving up
if (body.velocity.y < 0) {
//moving up
this.lastDirection = PlayerAnimationDirections.Up;
this.playAnimation(PlayerAnimationDirections.Up, true);
} else if (body.velocity.y > 0) { //moving down
} else if (body.velocity.y > 0) {
//moving down
this.lastDirection = PlayerAnimationDirections.Down;
this.playAnimation(PlayerAnimationDirections.Down, true);
} else if (body.velocity.x > 0) { //moving right
} else if (body.velocity.x > 0) {
//moving right
this.lastDirection = PlayerAnimationDirections.Right;
this.playAnimation(PlayerAnimationDirections.Right, true);
} else if (body.velocity.x < 0) { //moving left
} else if (body.velocity.x < 0) {
//moving left
this.lastDirection = PlayerAnimationDirections.Left;
this.playAnimation(PlayerAnimationDirections.Left, true);
}
@@ -237,32 +256,39 @@ export abstract class Character extends Container {
}
}
stop(){
stop() {
this.getBody().setVelocity(0, 0);
this.playAnimation(this.lastDirection, false);
}
say(text: string) {
if (this.bubble) return;
this.bubble = new SpeechBubble(this.scene, this, text)
this.bubble = new SpeechBubble(this.scene, this, text);
setTimeout(() => {
if (this.bubble !== null) {
this.bubble.destroy();
this.bubble = null;
}
}, 3000)
}, 3000);
}
destroy(): void {
for (const sprite of this.sprites.values()) {
if(this.scene) {
if (this.scene) {
this.scene.sys.updateList.remove(sprite);
}
}
this.list.forEach(objectContaining => objectContaining.destroy())
this.list.forEach((objectContaining) => objectContaining.destroy());
super.destroy();
}
isSilent() {
isSilentStore.set(true);
}
noSilent() {
isSilentStore.set(false);
}
playEmote(emote: string) {
this.cancelPreviousEmote();
@@ -284,11 +310,11 @@ export abstract class Character extends Container {
alpha: 1,
y: emoteY,
},
ease: 'Power2',
ease: "Power2",
duration: 500,
onComplete: () => {
this.startPulseTransition(emoteY, scalingFactor);
}
},
});
}
@@ -297,7 +323,7 @@ export abstract class Character extends Container {
targets: this.emote,
props: {
y: emoteY * 1.3,
scale: scalingFactor * 1.1
scale: scalingFactor * 1.1,
},
duration: 250,
yoyo: true,
@@ -305,7 +331,7 @@ export abstract class Character extends Container {
completeDelay: 200,
onComplete: () => {
this.startExitTransition(emoteY);
}
},
});
}
@@ -316,11 +342,11 @@ export abstract class Character extends Container {
alpha: 0,
y: 2 * emoteY,
},
ease: 'Power2',
ease: "Power2",
duration: 500,
onComplete: () => {
this.destroyEmote();
}
},
});
}
@@ -328,7 +354,7 @@ export abstract class Character extends Container {
if (!this.emote) return;
this.emoteTween?.remove();
this.destroyEmote()
this.destroyEmote();
}
private destroyEmote() {
front/src/Phaser/Game/EmoteManager.ts
+2 -2
View File
@@ -11,10 +11,10 @@ export class EmoteManager {
if(actor) {
actor.playEmote(event.emote);
}
})
});
}
destroy() {
this.subscription.unsubscribe();
}
}
}
front/src/Phaser/Game/GameManager.ts
+20 -2
View File
@@ -19,6 +19,7 @@ export class GameManager {
private characterLayers: string[] | null;
private companion: string | null;
private startRoom!: Room;
private cameraSetup?: { video: unknown; audio: unknown };
currentGameSceneName: string | null = null;
// Note: this scenePlugin is the scenePlugin of the EntryScene. We should always provide a key in methods called on this scenePlugin.
private scenePlugin!: Phaser.Scenes.ScenePlugin;
@@ -27,6 +28,7 @@ export class GameManager {
this.playerName = localUserStore.getName();
this.characterLayers = localUserStore.getCharacterLayers();
this.companion = localUserStore.getCompanion();
this.cameraSetup = localUserStore.getCameraSetup();
}
public async init(scenePlugin: Phaser.Scenes.ScenePlugin): Promise<string> {
@@ -39,12 +41,17 @@ export class GameManager {
this.playerName = res.headers['bstlyusername'];
}
if (!this.playerName) {
//If player name was not set show login scene with player name
//If Room si not public and Auth was not set, show login scene to authenticate user (OpenID - SSO - Anonymous)
if (!this.playerName || (this.startRoom.authenticationMandatory && !localUserStore.getAuthToken())) {
return LoginSceneName;
} else if (!this.characterLayers || !this.characterLayers.length) {
return SelectCharacterSceneName;
} else {
} else if (this.cameraSetup == undefined) {
return EnableCameraSceneName;
} else {
this.activeMenuSceneAndHelpCameraSettings();
return this.startRoom.key;
}
}
@@ -90,7 +97,14 @@ export class GameManager {
public goToStartingMap(): void {
console.log("starting " + (this.currentGameSceneName || this.startRoom.key));
this.scenePlugin.start(this.currentGameSceneName || this.startRoom.key);
this.activeMenuSceneAndHelpCameraSettings();
}
/**
* @private
* @return void
*/
private activeMenuSceneAndHelpCameraSettings(): void {
if (
!localUserStore.getHelpCameraSettingsShown() &&
(!get(requestedMicrophoneState) || !get(requestedCameraState))
@@ -137,6 +151,10 @@ export class GameManager {
if (this.currentGameSceneName === null) throw "No current scene id set!";
return this.scenePlugin.get(this.currentGameSceneName) as GameScene;
}
public get currentStartedRoom() {
return this.startRoom;
}
}
export const gameManager = new GameManager();
front/src/Phaser/Game/GameScene.ts
+11 -3
View File
@@ -37,7 +37,7 @@ import { localUserStore } from "../../Connexion/LocalUserStore";
import { HtmlUtils } from "../../WebRtc/HtmlUtils";
import { mediaManager } from "../../WebRtc/MediaManager";
import { SimplePeer } from "../../WebRtc/SimplePeer";
import { addLoader } from "../Components/Loader";
import { addLoader, removeLoader } from "../Components/Loader";
import { OpenChatIcon, openChatIconName } from "../Components/OpenChatIcon";
import { lazyLoadPlayerCharacterTextures, loadCustomTexture } from "../Entity/PlayerTexturesLoadingManager";
import { RemotePlayer } from "../Entity/RemotePlayer";
@@ -93,6 +93,7 @@ import { userIsAdminStore } from "../../Stores/GameStore";
import { layoutManagerActionStore } from "../../Stores/LayoutManagerStore";
import { EmbeddedWebsiteManager } from "./EmbeddedWebsiteManager";
import { GameMapPropertiesListener } from "./GameMapPropertiesListener";
import type { RadialMenuItem } from "../Components/RadialMenu";
export interface GameSceneInitInterface {
initPosition: PointInterface | null;
@@ -291,8 +292,11 @@ export class GameScene extends DirtyScene {
}
//once preloading is over, we don't want loading errors to crash the game, so we need to disable this behavior after preloading.
console.error("Error when loading: ", file);
if (this.preloading) {
//remove loader in progress
removeLoader(this);
//display an error scene
this.scene.start(ErrorSceneName, {
title: "Network error",
subTitle: "An error occurred while loading resource:",
@@ -850,8 +854,10 @@ export class GameScene extends DirtyScene {
this.gameMap.onPropertyChange("silent", (newValue, oldValue) => {
if (newValue === undefined || newValue === false || newValue === "") {
this.connection?.setSilent(false);
this.CurrentPlayer.noSilent();
} else {
this.connection?.setSilent(true);
this.CurrentPlayer.isSilent();
}
});
this.gameMap.onPropertyChange("playAudio", (newValue, oldValue, allProps) => {
@@ -1294,7 +1300,9 @@ export class GameScene extends DirtyScene {
if (!targetRoom.isEqual(this.room)) {
if (this.scene.get(targetRoom.key) === null) {
console.error("next room not loaded", targetRoom.key);
return;
// Try to load next dame room from exit URL
// The policy of room can to be updated during a session and not load before
await this.loadNextGameFromExitUrl(targetRoom.key);
}
this.cleanupClosingScene();
this.scene.stop();
front/src/Phaser/Game/SharedVariablesManager.ts
+1 -1
View File
@@ -1,7 +1,7 @@
import type { RoomConnection } from "../../Connexion/RoomConnection";
import { iframeListener } from "../../Api/IframeListener";
import type { GameMap } from "./GameMap";
import type {ITiledMapLayer, ITiledMapObject, ITiledMapObjectLayer} from "../Map/ITiledMap";
import type { ITiledMapLayer, ITiledMapObject, ITiledMapObjectLayer } from "../Map/ITiledMap";
interface Variable {
defaultValue: unknown;
front/src/Phaser/Login/EnableCameraScene.ts
+1
View File
@@ -1,6 +1,7 @@
import { gameManager } from "../Game/GameManager";
import { ResizableScene } from "./ResizableScene";
import { enableCameraSceneVisibilityStore } from "../../Stores/MediaStore";
import { localUserStore } from "../../Connexion/LocalUserStore";
export const EnableCameraSceneName = "EnableCameraScene";
front/src/Phaser/Login/LoginScene.ts
+14 -2
View File
@@ -1,7 +1,9 @@
import { gameManager } from "../Game/GameManager";
import { SelectCharacterSceneName } from "./SelectCharacterScene";
import { ResizableScene } from "./ResizableScene";
import { loginSceneVisibleStore } from "../../Stores/LoginSceneStore";
import { loginSceneVisibleIframeStore, loginSceneVisibleStore } from "../../Stores/LoginSceneStore";
import { localUserStore } from "../../Connexion/LocalUserStore";
import { connectionManager } from "../../Connexion/ConnectionManager";
import { gameManager } from "../Game/GameManager";
export const LoginSceneName = "LoginScene";
@@ -18,6 +20,16 @@ export class LoginScene extends ResizableScene {
preload() {}
create() {
loginSceneVisibleIframeStore.set(false);
//If authentication is mandatory, push authentication iframe
if (
localUserStore.getAuthToken() == undefined &&
gameManager.currentStartedRoom &&
gameManager.currentStartedRoom?.authenticationMandatory
) {
connectionManager.loadOpenIDScreen();
loginSceneVisibleIframeStore.set(true);
}
loginSceneVisibleStore.set(true);
}
front/src/Phaser/Login/SelectCompanionScene.ts
-2
View File
@@ -1,5 +1,3 @@
import Image = Phaser.GameObjects.Image;
import Rectangle = Phaser.GameObjects.Rectangle;
import { addLoader } from "../Components/Loader";
import { gameManager } from "../Game/GameManager";
import { ResizableScene } from "./ResizableScene";
front/src/Phaser/Player/Player.ts
+13 -6
View File
@@ -23,7 +23,7 @@ export class Player extends Character {
direction: PlayerAnimationDirections,
moving: boolean,
private userInputManager: UserInputManager,
companion: string|null,
companion: string | null,
companionTexturePromise?: Promise<string>
) {
super(Scene, x, y, texturesPromise, name, direction, moving, 1, true, companion, companionTexturePromise);
@@ -37,7 +37,7 @@ export class Player extends Character {
this.emoteMenu.y = this.y;
}
};
this.scene.events.addListener('postupdate', this.updateListener);
this.scene.events.addListener("postupdate", this.updateListener);
}
moveUser(delta: number): void {
@@ -73,14 +73,14 @@ export class Player extends Character {
if (x !== 0 || y !== 0) {
this.move(x, y);
this.emit(hasMovedEventName, {moving, direction, x: this.x, y: this.y});
this.emit(hasMovedEventName, { moving, direction, x: this.x, y: this.y });
} else if (this.wasMoving && moving) {
// slow joystick movement
this.move(0, 0);
this.emit(hasMovedEventName, {moving, direction: this.previousDirection, x: this.x, y: this.y});
this.emit(hasMovedEventName, { moving, direction: this.previousDirection, x: this.x, y: this.y });
} else if (this.wasMoving && !moving) {
this.stop();
this.emit(hasMovedEventName, {moving, direction: this.previousDirection, x: this.x, y: this.y});
this.emit(hasMovedEventName, { moving, direction: this.previousDirection, x: this.x, y: this.y });
}
if (direction !== null) {
@@ -117,13 +117,20 @@ export class Player extends Character {
});
}
isSilent() {
super.isSilent();
}
noSilent() {
super.noSilent();
}
closeEmoteMenu(): void {
if (!this.emoteMenu) return;
this.emoteMenu.closePicker();
}
destroy() {
this.scene.events.removeListener('postupdate', this.updateListener);
this.scene.events.removeListener("postupdate", this.updateListener);
super.destroy();
}
}