Compare commits
4 commits
develop
...
update-arc
Author | SHA1 | Date | |
---|---|---|---|
7bb534c398 | |||
20ba628ed8 | |||
146245f193 | |||
22e36dc20e |
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, Sprite>;
|
||||
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, Sprite>();
|
||||
this.groups = new Map<number, EllipseTexture>();
|
||||
this.instance = room.getInstance();
|
||||
|
||||
this.MapKey = MapUrlFile;
|
||||
|
@ -401,36 +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 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();
|
||||
//create canvas ellipse
|
||||
EllipseTexture.createEllipseCanvas(this);
|
||||
|
||||
// Let's pause the scene if the connection is not established yet
|
||||
if (this.connection === undefined) {
|
||||
|
@ -1132,21 +1105,37 @@ export class GameScene extends ResizableScene implements CenterListener {
|
|||
}
|
||||
|
||||
private doShareGroupPosition(groupPositionMessage: GroupCreatedUpdatedMessageInterface) {
|
||||
//delete previous group
|
||||
this.doDeleteGroup(groupPositionMessage.groupId);
|
||||
|
||||
// TODO: circle radius should not be hard stored
|
||||
//create new group
|
||||
const sprite = new Sprite(
|
||||
this,
|
||||
Math.round(groupPositionMessage.position.x),
|
||||
Math.round(groupPositionMessage.position.y),
|
||||
groupPositionMessage.groupSize === 4 ? 'circleSprite-red' : 'circleSprite-white'
|
||||
);
|
||||
sprite.setDisplayOrigin(48, 48);
|
||||
this.add.existing(sprite);
|
||||
this.groups.set(groupPositionMessage.groupId, sprite);
|
||||
return sprite;
|
||||
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 {
|
||||
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
|
||||
);
|
||||
}
|
||||
}
|
||||
this.groups.set(groupPositionMessage.groupId, ellipse);
|
||||
return ellipse;
|
||||
}
|
||||
|
||||
deleteGroup(groupId: number): void {
|
||||
|
|
Loading…
Reference in a new issue