From 7bb534c3980b37189e0dbdc7c565a9a04017c9bb Mon Sep 17 00:00:00 2001 From: Gregoire Parant Date: Tue, 27 Oct 2020 00:42:38 +0100 Subject: [PATCH] Update ellipse to use canvas - Create class Ellipse to use object sprite phaser --- front/src/Phaser/Components/EllipseTexture.ts | 72 +++++++++++++++++++ front/src/Phaser/Game/GameScene.ts | 71 +++++++++--------- 2 files changed, 105 insertions(+), 38 deletions(-) create mode 100644 front/src/Phaser/Components/EllipseTexture.ts diff --git a/front/src/Phaser/Components/EllipseTexture.ts b/front/src/Phaser/Components/EllipseTexture.ts new file mode 100644 index 00000000..75e2c961 --- /dev/null +++ b/front/src/Phaser/Components/EllipseTexture.ts @@ -0,0 +1,72 @@ +import Sprite = Phaser.GameObjects.Sprite; +import {Scene} from "phaser"; +import Texture = Phaser.Textures.Texture; + +export const CIRCLE_ELLIPSE_WHITE = 'ellipseSprite-white'; +export const CIRCLE_ELLIPSE_RED = 'ellipseSprite-red'; +export const LINE_WIDTH = 2; +export const RADIUS_X = 45; +export const RADIUS_Y = 28; +export const START_ANGLE = 0; +export const END_ANGLE = 2 * Math.PI; +export const STROKE_STYLE_WHITE = '#ffffff'; +export const STROKE_STYLE_RED = '#ff0000'; + +export class EllipseTexture extends Sprite { + + constructor(scene: Scene, x: number, y: number, public groupSize: number) { + super( + scene, + x, + y, + groupSize === 4 ? CIRCLE_ELLIPSE_RED : CIRCLE_ELLIPSE_WHITE + ); + + this.setDisplayOrigin(RADIUS_X, RADIUS_Y); + scene.add.existing(this); + } + + + public update(x: number, y: number, groupSize: number) { + this.x = x; + this.y = y; + this.groupSize = groupSize; + } + + public static createEllipseCanvas(scene: Scene) { + // Let's generate the circle for the group delimiter + let circleElement = Object.values(scene.textures.list).find((object: Texture) => object.key === CIRCLE_ELLIPSE_WHITE); + if (circleElement) { + scene.textures.remove(CIRCLE_ELLIPSE_WHITE); + } + + circleElement = Object.values(scene.textures.list).find((object: Texture) => object.key === CIRCLE_ELLIPSE_RED); + if (circleElement) { + scene.textures.remove(CIRCLE_ELLIPSE_RED); + } + + //create white circle canvas use to create sprite + const circleTexture = scene.textures.createCanvas(CIRCLE_ELLIPSE_WHITE, (RADIUS_X * 2) + LINE_WIDTH , (RADIUS_Y * 2) + LINE_WIDTH); + const context = circleTexture.context; + context.lineWidth = LINE_WIDTH; + context.strokeStyle = STROKE_STYLE_WHITE; + context.fillStyle = STROKE_STYLE_WHITE+'2F'; + context.beginPath(); + context.ellipse(RADIUS_X + (LINE_WIDTH / 2), RADIUS_Y + (LINE_WIDTH / 2), RADIUS_X, RADIUS_Y, 0, 0,2 * Math.PI); + context.fill(); + context.stroke(); + circleTexture.refresh(); + + //create red circle canvas use to create sprite + const circleRedTexture = scene.textures.createCanvas(CIRCLE_ELLIPSE_RED, (RADIUS_X * 2) + LINE_WIDTH , (RADIUS_Y * 2) + LINE_WIDTH); + const contextRed = circleRedTexture.context; + contextRed.lineWidth = 2; + contextRed.strokeStyle = STROKE_STYLE_RED; + contextRed.fillStyle = STROKE_STYLE_RED+'2F'; + contextRed.beginPath(); + contextRed.ellipse(RADIUS_X + (LINE_WIDTH / 2), RADIUS_Y + (LINE_WIDTH / 2), RADIUS_X, RADIUS_Y, 0, 0,2 * Math.PI); + contextRed.fill(); + contextRed.stroke(); + circleRedTexture.refresh(); + } +} \ No newline at end of file diff --git a/front/src/Phaser/Game/GameScene.ts b/front/src/Phaser/Game/GameScene.ts index b97ec737..e386232b 100644 --- a/front/src/Phaser/Game/GameScene.ts +++ b/front/src/Phaser/Game/GameScene.ts @@ -54,6 +54,7 @@ import {ConsoleGlobalMessageManager} from "../../Administration/ConsoleGlobalMes import {ResizableScene} from "../Login/ResizableScene"; import {Room} from "../../Connexion/Room"; import {jitsiFactory} from "../../WebRtc/JitsiFactory"; +import {EllipseTexture} from "../Components/EllipseTexture"; export interface GameSceneInitInterface { initPosition: PointInterface|null @@ -99,7 +100,7 @@ export class GameScene extends ResizableScene implements CenterListener { Layers!: Array; Objects!: Array; mapFile!: ITiledMap; - groups: Map; + groups: Map; startX!: number; startY!: number; circleTexture!: CanvasTexture; @@ -156,7 +157,7 @@ export class GameScene extends ResizableScene implements CenterListener { this.GameManager = gameManager; this.Terrains = []; - this.groups = new Map(); + this.groups = new Map(); this.instance = room.getInstance(); this.MapKey = MapUrlFile; @@ -401,16 +402,8 @@ export class GameScene extends ResizableScene implements CenterListener { //initialise camera 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 canvas ellipse + EllipseTexture.createEllipseCanvas(this); // Let's pause the scene if the connection is not established yet if (this.connection === undefined) { @@ -1112,35 +1105,37 @@ export class GameScene extends ResizableScene implements CenterListener { } private doShareGroupPosition(groupPositionMessage: GroupCreatedUpdatedMessageInterface) { - const widthEllipse = 90; - const heightEllipse = 56; - - let arcGroup = this.groups.get(groupPositionMessage.groupId); - if(arcGroup) { - if (groupPositionMessage.groupSize > 3) { - arcGroup.setStrokeStyle(1, 0xFF0000); - arcGroup.setFillStyle(0xFF0000, 0.2); - } else { - arcGroup.setStrokeStyle(1, 0xFFFFFF); - arcGroup.setFillStyle(0xFFFFFF, 0.2); - } - arcGroup.setPosition( + let ellipse = this.groups.get(groupPositionMessage.groupId); + if(!ellipse) { + ellipse = new EllipseTexture( + this, Math.round(groupPositionMessage.position.x), - (Math.round(groupPositionMessage.position.y) + ((widthEllipse - heightEllipse) / 2)) + Math.round(groupPositionMessage.position.y), + groupPositionMessage.groupSize ); - return; + }else { + if ( + (groupPositionMessage.groupSize > 3 && ellipse.groupSize > 3) + || (groupPositionMessage.groupSize < 4 && ellipse.groupSize < 4) + ) { + ellipse.update( + Math.round(groupPositionMessage.position.x), + Math.round(groupPositionMessage.position.y), + groupPositionMessage.groupSize + ); + } else { + //delete previous group + this.doDeleteGroup(groupPositionMessage.groupId); + ellipse = new EllipseTexture( + this, + Math.round(groupPositionMessage.position.x), + Math.round(groupPositionMessage.position.y), + groupPositionMessage.groupSize + ); + } } - arcGroup = this.add.ellipse( - Math.round(groupPositionMessage.position.x), - Math.round(groupPositionMessage.position.y) + ((widthEllipse - heightEllipse) / 2), - widthEllipse, - heightEllipse, - 0xFFFFFF, - 0.2 - ); - arcGroup.setStrokeStyle(1, 0xFFFFFF); - this.groups.set(groupPositionMessage.groupId, arcGroup); - return arcGroup; + this.groups.set(groupPositionMessage.groupId, ellipse); + return ellipse; } deleteGroup(groupId: number): void {