From d93b30f9820d719bcd9f5ca469ce12d6d5bfca54 Mon Sep 17 00:00:00 2001 From: kharhamel Date: Wed, 19 May 2021 18:08:53 +0200 Subject: [PATCH] improved radial menu --- back/src/Services/SocketManager.ts | 3 --- front/src/Phaser/Components/RadialMenu.ts | 18 ++++++++++++++++-- front/src/Phaser/Entity/Character.ts | 8 +++++--- front/src/Phaser/Game/EmoteManager.ts | 10 +++++----- front/src/Phaser/Player/Player.ts | 19 ++++++++++++++++--- front/src/Phaser/Services/WaScaleManager.ts | 9 +++++++++ 6 files changed, 51 insertions(+), 16 deletions(-) diff --git a/back/src/Services/SocketManager.ts b/back/src/Services/SocketManager.ts index 5d5dcf03..dd40b951 100644 --- a/back/src/Services/SocketManager.ts +++ b/back/src/Services/SocketManager.ts @@ -74,9 +74,6 @@ export class SocketManager { clientEventsEmitter.registerToClientLeave((clientUUid: string, roomId: string) => { gaugeManager.decNbClientPerRoomGauge(roomId); }); - - - //zoneMessageStream.stream.subscribe(myMessage); } public async handleJoinRoom(socket: UserSocket, joinRoomMessage: JoinRoomMessage): Promise<{ room: GameRoom; user: User }> { diff --git a/front/src/Phaser/Components/RadialMenu.ts b/front/src/Phaser/Components/RadialMenu.ts index a2a646f5..d566258c 100644 --- a/front/src/Phaser/Components/RadialMenu.ts +++ b/front/src/Phaser/Components/RadialMenu.ts @@ -1,5 +1,6 @@ import Sprite = Phaser.GameObjects.Sprite; import {DEPTH_UI_INDEX} from "../Game/DepthIndexes"; +import {waScaleManager} from "../Services/WaScaleManager"; export interface RadialMenuItem { sprite: string, @@ -7,16 +8,21 @@ export interface RadialMenuItem { name: string, } -const menuRadius = 80; +const menuRadius = 60; export const RadialMenuClickEvent = 'radialClick'; export class RadialMenu extends Phaser.GameObjects.Container { + private resizeCallback: OmitThisParameter<() => void>; constructor(scene: Phaser.Scene, x: number, y: number, private items: RadialMenuItem[]) { super(scene, x, y); this.setDepth(DEPTH_UI_INDEX) this.scene.add.existing(this); this.initItems(); + + this.resize(); + this.resizeCallback = this.resize.bind(this); + this.scene.scale.on(Phaser.Scale.Events.RESIZE, this.resizeCallback); } private initItems() { @@ -54,5 +60,13 @@ export class RadialMenu extends Phaser.GameObjects.Container { const angle = 2 * Math.PI * index / itemsNumber; Phaser.Actions.RotateAroundDistance([image], {x: 0, y: 0}, angle, menuRadius); } - + + private resize() { + this.setScale(waScaleManager.uiScalingFactor); + } + + public destroy() { + this.scene.scale.removeListener(Phaser.Scale.Events.RESIZE, this.resizeCallback); + super.destroy(); + } } \ No newline at end of file diff --git a/front/src/Phaser/Entity/Character.ts b/front/src/Phaser/Entity/Character.ts index bc536eb4..1975182c 100644 --- a/front/src/Phaser/Entity/Character.ts +++ b/front/src/Phaser/Entity/Character.ts @@ -6,8 +6,9 @@ import Sprite = Phaser.GameObjects.Sprite; import {TextureError} from "../../Exception/TextureError"; import {Companion} from "../Companion/Companion"; import {getEmoteAnimName} from "../Game/EmoteManager"; -import {GameScene} from "../Game/GameScene"; +import type {GameScene} from "../Game/GameScene"; import {DEPTH_INGAME_TEXT_INDEX} from "../Game/DepthIndexes"; +import {waScaleManager} from "../Services/WaScaleManager"; const playerNameY = - 25; @@ -19,7 +20,7 @@ interface AnimationData { frames : number[] } -const interactiveRadius = 40; +const interactiveRadius = 35; export abstract class Character extends Container { private bubble: SpeechBubble|null = null; @@ -247,8 +248,9 @@ export abstract class Character extends Container { this.cancelPreviousEmote(); this.playerName.setVisible(false); - this.emote = new Sprite(this.scene, 0, -40, emoteKey, 1); + this.emote = new Sprite(this.scene, 0, -30 - waScaleManager.uiScalingFactor * 10, emoteKey, 1); this.emote.setDepth(DEPTH_INGAME_TEXT_INDEX); + this.emote.setScale(waScaleManager.uiScalingFactor) this.add(this.emote); this.scene.sys.updateList.add(this.emote); this.emote.play(getEmoteAnimName(emoteKey)); diff --git a/front/src/Phaser/Game/EmoteManager.ts b/front/src/Phaser/Game/EmoteManager.ts index 0256f458..5d8d7179 100644 --- a/front/src/Phaser/Game/EmoteManager.ts +++ b/front/src/Phaser/Game/EmoteManager.ts @@ -1,8 +1,8 @@ -import {BodyResourceDescriptionInterface} from "../Entity/PlayerTextures"; +import type {BodyResourceDescriptionInterface} from "../Entity/PlayerTextures"; import {createLoadingPromise} from "../Entity/PlayerTexturesLoadingManager"; import {emoteEventStream} from "../../Connexion/EmoteEventStream"; -import {GameScene} from "./GameScene"; -import {RadialMenuItem} from "../Components/RadialMenu"; +import type {GameScene} from "./GameScene"; +import type {RadialMenuItem} from "../Components/RadialMenu"; enum RegisteredEmoteTypes { short = 1, @@ -56,11 +56,11 @@ export class EmoteManager { if (this.scene.anims.exists(getEmoteAnimName(textureKey))) { return Promise.resolve(textureKey); } - const frameConfig = emoteDescriptor.type === RegisteredEmoteTypes.short ? {frames: [0,1,2]} : {frames : [0,1,2,3,4,5,6,7]}; + const frameConfig = emoteDescriptor.type === RegisteredEmoteTypes.short ? {frames: [0,1,2,2]} : {frames : [0,1,2,3,4,]}; this.scene.anims.create({ key: getEmoteAnimName(textureKey), frames: this.scene.anims.generateFrameNumbers(textureKey, frameConfig), - frameRate: 3, + frameRate: 5, repeat: 2, }); return textureKey; diff --git a/front/src/Phaser/Player/Player.ts b/front/src/Phaser/Player/Player.ts index e93b25c7..b971407b 100644 --- a/front/src/Phaser/Player/Player.ts +++ b/front/src/Phaser/Player/Player.ts @@ -11,6 +11,7 @@ export class Player extends Character { private previousDirection: string = PlayerAnimationDirections.Down; private wasMoving: boolean = false; private emoteMenu: RadialMenu|null = null; + private updateListener: () => void; constructor( Scene: GameScene, @@ -28,6 +29,14 @@ export class Player extends Character { //the current player model should be push away by other players to prevent conflict this.getBody().setImmovable(false); + + this.updateListener = () => { + if (this.emoteMenu) { + this.emoteMenu.x = this.x; + this.emoteMenu.y = this.y; + } + }; + this.scene.events.addListener('postupdate', this.updateListener); } moveUser(delta: number): void { @@ -97,13 +106,12 @@ export class Player extends Character { openEmoteMenu(emotes:RadialMenuItem[]): void { this.cancelPreviousEmote(); - this.emoteMenu = new RadialMenu(this.scene, 0, 0, emotes) + this.emoteMenu = new RadialMenu(this.scene, this.x, this.y, emotes) this.emoteMenu.on(RadialMenuClickEvent, (item: RadialMenuItem) => { this.closeEmoteMenu(); this.emit(requestEmoteEventName, item.name); this.playEmote(item.name); - }) - this.add(this.emoteMenu); + }); } closeEmoteMenu(): void { @@ -111,4 +119,9 @@ export class Player extends Character { this.emoteMenu.destroy(); this.emoteMenu = null; } + + destroy() { + this.scene.events.removeListener('postupdate', this.updateListener); + super.destroy(); + } } diff --git a/front/src/Phaser/Services/WaScaleManager.ts b/front/src/Phaser/Services/WaScaleManager.ts index 9b013e32..ef375a39 100644 --- a/front/src/Phaser/Services/WaScaleManager.ts +++ b/front/src/Phaser/Services/WaScaleManager.ts @@ -8,6 +8,7 @@ class WaScaleManager { private hdpiManager: HdpiManager; private scaleManager!: ScaleManager; private game!: Game; + private actualZoom: number = 1; public constructor(private minGamePixelsNumber: number, private absoluteMinPixelNumber: number) { this.hdpiManager = new HdpiManager(minGamePixelsNumber, absoluteMinPixelNumber); @@ -28,6 +29,7 @@ class WaScaleManager { const { game: gameSize, real: realSize } = this.hdpiManager.getOptimalGameSize({width: width * devicePixelRatio, height: height * devicePixelRatio}); + this.actualZoom = realSize.width / gameSize.width / devicePixelRatio; this.scaleManager.setZoom(realSize.width / gameSize.width / devicePixelRatio); this.scaleManager.resize(gameSize.width, gameSize.height); @@ -48,6 +50,13 @@ class WaScaleManager { this.applyNewSize(); } + /** + * This is used to scale back the ui components to counter-act the zoom. + */ + public get uiScalingFactor(): number { + return this.actualZoom > 1 ? 1 : 2; + } + } export const waScaleManager = new WaScaleManager(640*480, 196*196);