From 22e36dc20e11a1549ad9a0d5c779c0264e1d21d7 Mon Sep 17 00:00:00 2001 From: Gregoire Parant Date: Sat, 24 Oct 2020 12:15:29 +0200 Subject: [PATCH 1/3] Change for ellipse - Delete canvas - Create ellipse gamer object - Add fill background --- front/src/Phaser/Game/GameScene.ts | 60 ++++++++++++++---------------- 1 file changed, 27 insertions(+), 33 deletions(-) diff --git a/front/src/Phaser/Game/GameScene.ts b/front/src/Phaser/Game/GameScene.ts index bfc6402e..0d7e9236 100644 --- a/front/src/Phaser/Game/GameScene.ts +++ b/front/src/Phaser/Game/GameScene.ts @@ -99,7 +99,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 +156,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; @@ -412,26 +412,6 @@ export class GameScene extends ResizableScene implements CenterListener { 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(); - // Let's pause the scene if the connection is not established yet if (this.connection === undefined) { // Let's wait 0.5 seconds before printing the "connecting" screen to avoid blinking @@ -1132,21 +1112,35 @@ export class GameScene extends ResizableScene implements CenterListener { } private doShareGroupPosition(groupPositionMessage: GroupCreatedUpdatedMessageInterface) { - //delete previous group - this.doDeleteGroup(groupPositionMessage.groupId); + const widthEllipse = 90; + const heightEllipse = 56; - // TODO: circle radius should not be hard stored - //create new group - const sprite = new Sprite( - this, + 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( + Math.round(groupPositionMessage.position.x), + (Math.round(groupPositionMessage.position.y) + ((widthEllipse - heightEllipse) / 2)) + ); + return; + } + arcGroup = this.add.ellipse( Math.round(groupPositionMessage.position.x), Math.round(groupPositionMessage.position.y), - groupPositionMessage.groupSize === 4 ? 'circleSprite-red' : 'circleSprite-white' + widthEllipse, + heightEllipse, + 0xFFFFFF, + 0.2 ); - sprite.setDisplayOrigin(48, 48); - this.add.existing(sprite); - this.groups.set(groupPositionMessage.groupId, sprite); - return sprite; + arcGroup.setStrokeStyle(1, 0xFFFFFF); + this.groups.set(groupPositionMessage.groupId, arcGroup); + return arcGroup; } deleteGroup(groupId: number): void { From 146245f1938cb09431763f9e8948316251b28e0f Mon Sep 17 00:00:00 2001 From: Gregoire Parant Date: Sat, 24 Oct 2020 12:17:51 +0200 Subject: [PATCH 2/3] Fix start position --- front/src/Phaser/Game/GameScene.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/front/src/Phaser/Game/GameScene.ts b/front/src/Phaser/Game/GameScene.ts index 0d7e9236..b97ec737 100644 --- a/front/src/Phaser/Game/GameScene.ts +++ b/front/src/Phaser/Game/GameScene.ts @@ -1132,7 +1132,7 @@ export class GameScene extends ResizableScene implements CenterListener { } arcGroup = this.add.ellipse( Math.round(groupPositionMessage.position.x), - Math.round(groupPositionMessage.position.y), + Math.round(groupPositionMessage.position.y) + ((widthEllipse - heightEllipse) / 2), widthEllipse, heightEllipse, 0xFFFFFF, From 7bb534c3980b37189e0dbdc7c565a9a04017c9bb Mon Sep 17 00:00:00 2001 From: Gregoire Parant Date: Tue, 27 Oct 2020 00:42:38 +0100 Subject: [PATCH 3/3] 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 {