Update ellipse to use canvas

- Create class Ellipse to use object sprite phaser
This commit is contained in:
Gregoire Parant 2020-10-27 00:42:38 +01:00
parent 20ba628ed8
commit 7bb534c398
2 changed files with 105 additions and 38 deletions

View File

@ -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();
}
}

View File

@ -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<Phaser.Tilemaps.StaticTilemapLayer>;
Objects!: Array<Phaser.Physics.Arcade.Sprite>;
mapFile!: ITiledMap;
groups: Map<number, Phaser.GameObjects.Ellipse>;
groups: Map<number, EllipseTexture>;
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<number, Phaser.GameObjects.Ellipse>();
this.groups = new Map<number, EllipseTexture>();
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 {