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

wip with handling outlines for activitable objects

Browse source
This commit is contained in:
Hanusiak Piotr 2022-01-26 17:14:22 +01:00
parent b88ebbdf08
commit 2781b72799
3 changed files with 48 additions and 19 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
front/src/Phaser/Entity/Character.ts
View file

@ -105,13 +105,6 @@ export abstract class Character extends Container implements OutlineableInterfac
hitAreaCallback: Phaser.Geom.Circle.Contains, //eslint-disable-line @typescript-eslint/unbound-method
useHandCursor: true,
});
this.on("pointerover", () => {
this.outlineColorStore.pointerOver();
});
this.on("pointerout", () => {
this.outlineColorStore.pointerOut();
});
}
this.outlineColorStoreUnsubscribe = this.outlineColorStore.subscribe((color) => {

46
front/src/Phaser/Game/GameScene.ts
View file

@ -194,7 +194,8 @@ export class GameScene extends DirtyScene {
private gameMap!: GameMap;
private actionableItems: Map<number, ActionableItem> = new Map<number, ActionableItem>();
// The item that can be selected by pressing the space key.
private selectedActivatableObject?: ActivatableInterface;
private selectedActivatableObjectByDistance?: ActivatableInterface;
private selectedActivatableObjectByPointer?: ActivatableInterface;
private activatableObjectsDistances: Map<ActivatableInterface, number> = new Map<ActivatableInterface, number>();
private outlinedItem: ActionableItem | null = null;
public userInputManager!: UserInputManager;
@ -1688,18 +1689,23 @@ ${escapedMessage}
this.pushPlayerPosition(event);
this.gameMap.setPosition(event.x, event.y);
this.updateActivatableObjectsDistances();
this.deduceSelectedActivatableObject();
this.deduceSelectedActivatableObjectByDistance();
// this.outlineItem(event);
}
private deduceSelectedActivatableObject(): void {
private deduceSelectedActivatableObjectByDistance(): void {
const newNearestObject = this.findNearestActivatableObject();
if (this.selectedActivatableObject === newNearestObject) {
if (this.selectedActivatableObjectByDistance === newNearestObject) {
return;
}
this.outlineManager.tryRemoveOutline(this.selectedActivatableObject);
this.selectedActivatableObject = newNearestObject;
this.outlineManager.tryAddOutline(this.selectedActivatableObject);
// update value but do not change the outline
if (this.selectedActivatableObjectByPointer) {
this.selectedActivatableObjectByDistance = newNearestObject;
return;
}
this.outlineManager.tryRemoveOutline(this.selectedActivatableObjectByDistance);
this.selectedActivatableObjectByDistance = newNearestObject;
this.outlineManager.tryAddOutline(this.selectedActivatableObjectByDistance);
}
private updateDistanceForSingleActivatableObject(object: ActivatableInterface): void {
@ -1764,7 +1770,7 @@ ${escapedMessage}
this.companion,
this.companion !== null ? lazyLoadCompanionResource(this.load, this.companion) : undefined
);
this.CurrentPlayer.on("pointerdown", (pointer: Phaser.Input.Pointer) => {
this.CurrentPlayer.on(Phaser.Input.Events.POINTER_DOWN, (pointer: Phaser.Input.Pointer) => {
if (pointer.wasTouch && (pointer.event as TouchEvent).touches.length > 1) {
return; //we don't want the menu to open when pinching on a touch screen.
}
@ -1901,7 +1907,7 @@ ${escapedMessage}
const remotePlayer = this.MapPlayersByKey.get(event.event.userId);
if (remotePlayer) {
this.updateDistanceForSingleActivatableObject(remotePlayer);
this.deduceSelectedActivatableObject();
this.deduceSelectedActivatableObjectByDistance();
}
break;
case "GroupCreatedUpdatedEvent":
@ -1995,6 +2001,26 @@ ${escapedMessage}
this.MapPlayers.add(player);
this.MapPlayersByKey.set(player.userId, player);
player.updatePosition(addPlayerData.position);
player.on(Phaser.Input.Events.POINTER_OVER, () => {
if (this.selectedActivatableObjectByPointer === player) {
return;
}
this.outlineManager.tryRemoveOutline(this.selectedActivatableObjectByDistance);
this.outlineManager.tryRemoveOutline(this.selectedActivatableObjectByPointer);
this.selectedActivatableObjectByPointer = player;
this.outlineManager.tryAddOutline(player);
this.markDirty();
});
player.on(Phaser.Input.Events.POINTER_OUT, () => {
this.outlineManager.tryRemoveOutline(this.selectedActivatableObjectByPointer);
this.selectedActivatableObjectByPointer = undefined;
if (this.selectedActivatableObjectByDistance) {
this.outlineManager.tryAddOutline(this.selectedActivatableObjectByDistance);
}
this.markDirty();
});
}
/**
@ -2263,6 +2289,6 @@ ${escapedMessage}
}
public getSelectedActivatableObject(): ActivatableInterface | undefined {
return this.selectedActivatableObject;
return this.selectedActivatableObjectByDistance;
}
}

14
front/src/Utils/OutlineManager.ts
View file

@ -1,4 +1,5 @@
import type OutlinePipelinePlugin from 'phaser3-rex-plugins/plugins/outlinepipeline-plugin.js';
import type { OutlineableInterface } from '../Phaser/Game/OutlineableInterface';
import { isOutlineable } from './CustomTypeGuards';
export interface OutlineConfig {
@ -10,25 +11,34 @@ export class OutlineManager {
private scene: Phaser.Scene;
private objectsWithOutline: OutlineableInterface[];
private outlinePlugin?: OutlinePipelinePlugin
constructor(scene: Phaser.Scene) {
this.scene = scene;
this.objectsWithOutline = [];
this.outlinePlugin =
this.scene.plugins.get("rexOutlinePipeline") as unknown as OutlinePipelinePlugin | undefined;
}
public tryAddOutline(object: unknown): void {
if (!isOutlineable(object)) {
if (!isOutlineable(object) || this.objectsWithOutline.includes(object)) {
return;
}
this.outlinePlugin?.add(object.getObjectToOutline(), object.getOutlineConfig());
this.objectsWithOutline.push(object);
}
public tryRemoveOutline(object: unknown): void {
if (!isOutlineable(object)) {
if (!isOutlineable(object) || !this.objectsWithOutline.includes(object)) {
return;
}
this.outlinePlugin?.remove(object.getObjectToOutline());
const index = this.objectsWithOutline.findIndex(obj => obj === object);
if (index === -1) {
return;
}
this.objectsWithOutline.splice(index, 1);
}
}