Update ellipse to use canvas
- Create class Ellipse to use object sprite phaser
This commit is contained in:
parent
20ba628ed8
commit
7bb534c398
72
front/src/Phaser/Components/EllipseTexture.ts
Normal file
72
front/src/Phaser/Components/EllipseTexture.ts
Normal 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();
|
||||
}
|
||||
}
|
|
@ -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);
|
||||
let ellipse = this.groups.get(groupPositionMessage.groupId);
|
||||
if(!ellipse) {
|
||||
ellipse = new EllipseTexture(
|
||||
this,
|
||||
Math.round(groupPositionMessage.position.x),
|
||||
Math.round(groupPositionMessage.position.y),
|
||||
groupPositionMessage.groupSize
|
||||
);
|
||||
}else {
|
||||
arcGroup.setStrokeStyle(1, 0xFFFFFF);
|
||||
arcGroup.setFillStyle(0xFFFFFF, 0.2);
|
||||
}
|
||||
arcGroup.setPosition(
|
||||
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) + ((widthEllipse - heightEllipse) / 2))
|
||||
Math.round(groupPositionMessage.position.y),
|
||||
groupPositionMessage.groupSize
|
||||
);
|
||||
return;
|
||||
}
|
||||
arcGroup = this.add.ellipse(
|
||||
} else {
|
||||
//delete previous group
|
||||
this.doDeleteGroup(groupPositionMessage.groupId);
|
||||
ellipse = new EllipseTexture(
|
||||
this,
|
||||
Math.round(groupPositionMessage.position.x),
|
||||
Math.round(groupPositionMessage.position.y) + ((widthEllipse - heightEllipse) / 2),
|
||||
widthEllipse,
|
||||
heightEllipse,
|
||||
0xFFFFFF,
|
||||
0.2
|
||||
Math.round(groupPositionMessage.position.y),
|
||||
groupPositionMessage.groupSize
|
||||
);
|
||||
arcGroup.setStrokeStyle(1, 0xFFFFFF);
|
||||
this.groups.set(groupPositionMessage.groupId, arcGroup);
|
||||
return arcGroup;
|
||||
}
|
||||
}
|
||||
this.groups.set(groupPositionMessage.groupId, ellipse);
|
||||
return ellipse;
|
||||
}
|
||||
|
||||
deleteGroup(groupId: number): void {
|
||||
|
|
Loading…
Reference in a new issue