diff --git a/front/dist/resources/objects/report_flag.png b/front/dist/resources/objects/report_flag.png new file mode 100644 index 00000000..57b99126 Binary files /dev/null and b/front/dist/resources/objects/report_flag.png differ diff --git a/front/dist/resources/objects/teleportation.png b/front/dist/resources/objects/teleportation.png new file mode 100644 index 00000000..e13826f9 Binary files /dev/null and b/front/dist/resources/objects/teleportation.png differ diff --git a/front/src/Phaser/Entity/Character.ts b/front/src/Phaser/Entity/Character.ts index 6edb0e36..74a4d99d 100644 --- a/front/src/Phaser/Entity/Character.ts +++ b/front/src/Phaser/Entity/Character.ts @@ -46,6 +46,8 @@ export abstract class Character extends Container { public PlayerValue: string; public sprites: Map; private lastDirection: string = PlayerAnimationNames.WalkDown; + private report: Sprite; + private teleportation: Sprite; constructor(scene: Phaser.Scene, x: number, @@ -62,6 +64,15 @@ export abstract class Character extends Container { for (const texture of textures) { const sprite = new Sprite(scene, 0, 0, texture, frame); + sprite.setInteractive({useHandCursor: true}); + sprite.on('pointerover', () => { + this.report.visible = true; + this.teleportation.visible = true; + }); + sprite.on('pointerup', () => { + this.report.visible = true; + this.teleportation.visible = true; + }); this.add(sprite); this.getPlayerAnimations(texture).forEach(d => { this.scene.anims.create({ @@ -76,6 +87,24 @@ export abstract class Character extends Container { this.sprites.set(texture, sprite); } + this.report = new Sprite(scene, 20, -10, 'report_flag', 3); + this.report.setInteractive(); + this.report.visible = false; + this.report.on('pointerup', () => { + this.report.visible = false; + this.teleportation.visible = false; + }); + this.add(this.report); + + this.teleportation = new Sprite(scene, -20, -10, 'teleportation', 3); + this.teleportation.setInteractive(); + this.teleportation.visible = false; + this.teleportation.on('pointerup', () => { + this.report.visible = false; + this.teleportation.visible = false; + }); + this.add(this.teleportation); + this.PlayerValue = name; this.playerName = new BitmapText(scene, x, y - 25, 'main_font', name, 8); this.playerName.setOrigin(0.5).setCenterAlign().setDepth(99999); diff --git a/front/src/Phaser/Entity/body_character.ts b/front/src/Phaser/Entity/body_character.ts index 3d9d5a5f..50f1eea6 100644 --- a/front/src/Phaser/Entity/body_character.ts +++ b/front/src/Phaser/Entity/body_character.ts @@ -1,4 +1,5 @@ import LoaderPlugin = Phaser.Loader.LoaderPlugin; +import {PLAYER_RESOURCES, PlayerResourceDescriptionInterface} from "./Character"; export interface BodyResourceDescriptionInterface { name: string, @@ -310,3 +311,29 @@ export const loadAllLayers = (load: LoaderPlugin) => { } } } + +export const OBJECTS: Array = [ + {name:'report_flag', img:'resources/objects/report_flag.png'}, + {name:'layout_modes', img:'resources/objects/layout_modes.png'}, + {name:'teleportation', img:'resources/objects/teleportation.png'}, +]; + +export const loadObject = (load: LoaderPlugin) => { + for (let j = 0; j < OBJECTS.length; j++) { + load.spritesheet( + OBJECTS[j].name, + OBJECTS[j].img, + {frameWidth: 32, frameHeight: 32} + ) + } +} + +export const loadPlayerCharacters = (load: LoaderPlugin) => { + PLAYER_RESOURCES.forEach((playerResource: PlayerResourceDescriptionInterface) => { + load.spritesheet( + playerResource.name, + playerResource.img, + {frameWidth: 32, frameHeight: 32} + ); + }); +} diff --git a/front/src/Phaser/Game/GameScene.ts b/front/src/Phaser/Game/GameScene.ts index 608d920b..ed98d9b9 100644 --- a/front/src/Phaser/Game/GameScene.ts +++ b/front/src/Phaser/Game/GameScene.ts @@ -16,7 +16,6 @@ import { ITiledMapLayerProperty, ITiledMapObject, ITiledTileSet } from "../Map/ITiledMap"; -import {PLAYER_RESOURCES, PlayerResourceDescriptionInterface} from "../Entity/Character"; import {AddPlayerInterface} from "./AddPlayerInterface"; import {PlayerAnimationNames} from "../Player/Animation"; import {PlayerMovement} from "./PlayerMovement"; @@ -25,7 +24,7 @@ import {RemotePlayer} from "../Entity/RemotePlayer"; import {Queue} from 'queue-typescript'; import {SimplePeer, UserSimplePeerInterface} from "../../WebRtc/SimplePeer"; import {ReconnectingSceneName} from "../Reconnecting/ReconnectingScene"; -import {loadAllLayers} from "../Entity/body_character"; +import {loadAllLayers, loadObject, loadPlayerCharacters} from "../Entity/body_character"; import {CenterListener, layoutManager, LayoutMode} from "../../WebRtc/LayoutManager"; import Texture = Phaser.Textures.Texture; import Sprite = Phaser.GameObjects.Sprite; @@ -189,21 +188,9 @@ export class GameScene extends Phaser.Scene implements CenterListener { } //add player png - PLAYER_RESOURCES.forEach((playerResource: PlayerResourceDescriptionInterface) => { - this.load.spritesheet( - playerResource.name, - playerResource.img, - {frameWidth: 32, frameHeight: 32} - ); - }); - - this.load.spritesheet( - 'layout_modes', - 'resources/objects/layout_modes.png', - {frameWidth: 32, frameHeight: 32} - ); - + loadPlayerCharacters(this.load); loadAllLayers(this.load); + loadObject(this.load); this.load.bitmapFont('main_font', 'resources/fonts/arcade.png', 'resources/fonts/arcade.xml');