rypi-dev/game-engine
1
0
Fork 0
Code Issues Pull Requests Actions Releases Activity

fix(objects/RoomCamera): not being centered correctly

Browse Source
This commit is contained in:
Walid 2023-07-31 10:56:12 +01:00
parent c217245058
commit bbb1376f95
Signed by: Walidoux
GPG Key ID: CCF21881FE8BEBAF
5 changed files with 232 additions and 145 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
TODO.md
View File

@ -1,14 +1,28 @@
# 🏁 To-do's # 🏁 To-do's
## Rooms - [ ] Register interactions with walls in `RoomVisualization`
- [ ] Implement Habbo-like Camera wheeling effect
- [ ] Room Camera Container not being resized when resize window event is triggered
- [ ] Hide cursor when it's out of room + Cursor broken and no interactions
- [x] Fix duplicate doors and door walls being renderer for no reason
- [x] Fix & Resolve `WallTypes` being parsed accurately on tiles. Wallw were drawn where they shoudn't.
- [x] Fix & walls of the right-hand side of the door tile
- [x] Animations `gsap.EaseFunction` not satisfied
- [ ] Jaaj ## 🧹 Future fixes
- [ ] Stairs acting weird, see [Stairs problem](public/rooms/stairs.txt)
- [ ] `centerObject` doesn't work for furniture
## ✨ Refactors
- Double-check type conditions and performance with recursive in `RoomTileMap` and `RoomVisualization`
## 🐛 Patch Notes ## 🐛 Patch Notes
### 📆 22/07/2023 - 23/07/2023
- Door walls: In order for the game to render the top-front wall of a door, it needs to make sure that the tile is actually a door in the first place, then it needs to check if the two neighboor tiles have walls too. - Door walls: In order for the game to render the top-front wall of a door, it needs to make sure that the tile is actually a door in the first place, then it needs to check if the two neighboor tiles have walls too.
- Duplicate doors: If it appears to be more than one door in a single room the game logic will pick the first one in a concurrent way. - Duplicate doors: If it appears to be more than one door in a single room the game logic will pick the first one in a concurrent way.
## 🧹 Refactors ### 📆 23/07/2023
- Look for `hasWall` method that has O(n²) loop conditionals, and fix enum `WallType` type condition in `RoomTileMap`

32
public/rooms/stairs.txt Normal file
View File

@ -0,0 +1,32 @@
'xxxxxxxxxx00000000000000000000000\n' +
'xxxxxxxxxx00000000000000000000000\n' +
'xxxxxxxxxx00000000000000000000000\n' +
'xxxxxxxxxx00000000000000000000000\n' +
'xxxxxxxxxx00000000000000000000000\n' +
'xxxxxxxxxx00000000000000000000000\n' +
'xxxxxxxxxx00000000000000000000000\n' +
'xxxxx555xxxxxxxxx0000000000000000\n' +
'xxxxx5555555555550000000000000000\n' +
'0xxxx5555555555550000000000000000\n' +
'xxxxx5555555555550000000000000000\n' +
'xxxxxx555555555550000000000000000\n' +
'xxxxxx555555555550000000000000000\n' +
'xxxxxx555555555550000000000000000\n' +
'xxxxxx555555555550000000000000000\n' +
'xxxxxx555555555550000000000000000\n' +
'xxxxxx555555555550000000000000000\n' +
'xxxxxx555555555550000000000000000\n' +
'xxxxxx555555555550000000000000000\n' +
'x00000000004400000000000000000000\n' +
'x00000000004400000000000000000000\n' +
'x00000000003322110000000000000000\n' +
'x00000000003322110000000000000000\n' +
'x00000000000000000000000000000000\n' +
'x00000000000000000000000000000000\n' +
'x00000000000000000000000000000000\n' +
'x00000000000000000000000000000000\n' +
'x00000000000000000000000000000000\n' +
'x00000000000000000000000000000000\n' +
'x00000000000000000000000000000000\n' +
'x00000000000000000000000000000000\n' +
'x00000000000000000000000000000000\n'

99
public/script.ts
View File

@ -4,7 +4,7 @@ import { FloorMaterial } from '../src/objects/rooms/materials/FloorMaterial'
import { WallMaterial } from '../src/objects/rooms/materials/WallMaterial' import { WallMaterial } from '../src/objects/rooms/materials/WallMaterial'
import { FloorFurniture } from '../src/objects/furnitures/FloorFurniture' import { FloorFurniture } from '../src/objects/furnitures/FloorFurniture'
import { WiredSelectionFilter } from '../src/objects/filters/WiredSelectionFilter' import { WiredSelectionFilter } from '../src/objects/filters/WiredSelectionFilter'
import { WallFurniture } from '../src' import { Avatar, AvatarAction, WallFurniture } from '../src'
// Initialising Scuti Engine // Initialising Scuti Engine
;(async () => { ;(async () => {
@ -38,42 +38,41 @@ import { WallFurniture } from '../src'
wallMaterial: new WallMaterial(renderer, 2301) wallMaterial: new WallMaterial(renderer, 2301)
}) })
const furniture = new FloorFurniture({ const avatar = new Avatar({
//id: 4950, //figure: "hr-100-61.hd-180-7.ch-210-66.lg-270-82.sh-290-80",
//id: 1619, // police figure: "hr-892-46.hd-209-8.ch-225-81.lg-270-64.sh-300-64.ca-1804-64.wa-2012",
id: 4967, figure: 'hd-209-14.ch-3688-1408.lg-280-1408.sh-290-1408.ha-1008.ea-3578.ca-1806-82.cc-3360-1408',
//figure: "hd-180-1.ch-255-66.lg-280-110.sh-305-62.ha-1012-110.hr-828-61",
position: { position: {
x: 5, x: 4,
y: 4, y: 4,
z: 0 z: 0
}, },
direction: 2, bodyDirection: 6,
state: 1 headDirection: 6,
actions: [
//AvatarAction.Idle,
//AvatarAction.Walk,
AvatarAction.Talk,
AvatarAction.Wave,
//AvatarAction.Walk,
AvatarAction.CarryItem,
AvatarAction.Sit
],
handItem: 55
}) })
room.objects.add(furniture)
furniture.onPointerDown = () => { // ids: 4950, 1619
const furniture = new FloorFurniture({ id: 4967, position: { x: 5, y: 4, z: 0 }, direction: 2, state: 1 })
// room.objects.add(avatar)
/* furniture.onPointerDown = () => {
console.log('clicked') console.log('clicked')
} } */
const furniture3 = new FloorFurniture({
id: 8916, const furniture3 = new FloorFurniture({ id: 8916, position: { x: 10, y: 10, z: 0 }, direction: 2, state: 1 })
position: { const furniture2 = new FloorFurniture({ id: 8916, position: { x: 8, y: 10, z: 0 }, direction: 2, state: 1 })
x: 10,
y: 10,
z: 0
},
direction: 2,
state: 1
})
const furniture2 = new FloorFurniture({
id: 8916,
position: {
x: 8,
y: 10,
z: 0
},
direction: 2,
state: 1
})
const wallFurniture = new WallFurniture({ const wallFurniture = new WallFurniture({
id: 4625, id: 4625,
position: { position: {
@ -85,21 +84,21 @@ import { WallFurniture } from '../src'
direction: 2, direction: 2,
state: 2 state: 2
}) })
room.objects.add(wallFurniture)
const wallFurniture2 = new WallFurniture({ const wallFurniture2 = new WallFurniture({
id: 4032, id: 4032,
position: { position: { x: 3, y: -1, offsetX: 4, offsetY: -30 },
x: 3,
y: -1,
offsetX: 4,
offsetY: -30
},
direction: 4, direction: 4,
state: 1 state: 1
}) })
room.objects.add(furniture3)
/* room.objects.add(furniture3)
room.objects.add(furniture2) room.objects.add(furniture2)
room.objects.add(wallFurniture) room.objects.add(wallFurniture)
room.objects.add(wallFurniture2) room.objects.add(wallFurniture2) */
setTimeout(() => { setTimeout(() => {
return wallFurniture.move({ return wallFurniture.move({
x: -1, x: -1,
@ -116,16 +115,20 @@ import { WallFurniture } from '../src'
offsetY: -25 offsetY: -25
}) })
}, 5000) }, 5000)
//setTimeout(() => room.objects.add(furniture), 6000); //setTimeout(() => room.objects.add(furniture), 6000);
furniture3.onLoadComplete = () => {
/* furniture3.onLoadComplete = () => {
console.log('loaded!') console.log('loaded!')
} }
room.tiles.onPointerDown = (event) => { room.tiles.onPointerDown = (event) => {
furniture.move(event.position) furniture.move(event.position)
//room.tileMap = tileMap; //room.tileMap = tileMap;
} } */
//dice(room, 5, 5, 2); //dice(room, 5, 5, 2);
document.onkeydown = (e) => {
/* document.onkeydown = (e) => {
e = e || window.event e = e || window.event
if (e.keyCode == '38') { if (e.keyCode == '38') {
@ -146,12 +149,12 @@ import { WallFurniture } from '../src'
const filter = new WiredSelectionFilter(0xffffff, 0x999999) const filter = new WiredSelectionFilter(0xffffff, 0x999999)
furniture.addFilter(filter) furniture.addFilter(filter)
} }
} } */
})().catch((error) => { })().catch((error) => {
return console.error(error) return console.error(error)
}) })
function dice(room, x, y, z) { /* function dice(room, x, y, z) {
const furni5 = new FloorFurniture({ const furni5 = new FloorFurniture({
position: { position: {
x, x,
@ -176,13 +179,11 @@ function dice(room, x, y, z) {
timeout = setTimeout(() => { timeout = setTimeout(() => {
furni5.state = Math.floor(Math.random() * 6) + 1 furni5.state = Math.floor(Math.random() * 6) + 1
}, 1000) }, 1000)
/*setTimeout(() => { //setTimeout(() => furni5.state = 0, 2000)
furni5.state = 0
}, 2000);*/
} else { } else {
clearTimeout(timeout) clearTimeout(timeout)
furni5.state = 0 furni5.state = 0
} }
//x@}
} }
} } */

198
src/objects/rooms/RoomCamera.ts
View File

@ -1,10 +1,11 @@
import { Container, EventBoundary, FederatedPointerEvent } from 'pixi.js'; import { Container, EventBoundary, FederatedPointerEvent, Point } from 'pixi.js'
import { Expo, gsap } from 'gsap'; import { Expo, gsap } from 'gsap'
import type { Room } from './Room'; import type { Room } from './Room'
import type { Tile } from './parts/Tile'; import type { Tile } from './parts/Tile'
import type { Stair } from './parts/Stair'; import type { Stair } from './parts/Stair'
import type { RoomObject } from './objects/RoomObject'; import type { RoomObject } from './objects/RoomObject'
import type { Nullable } from '../../types'
/** /**
* RoomCamera class that manage things like the room dragging or detecting if the room is out of bounds. * RoomCamera class that manage things like the room dragging or detecting if the room is out of bounds.
@ -19,7 +20,7 @@ export class RoomCamera extends Container {
* @member {Room} * @member {Room}
* @private * @private
*/ */
private readonly _room: Room; private readonly _room: Room
/** /**
* A boolean indicating if the room is being dragged. * A boolean indicating if the room is being dragged.
@ -27,7 +28,23 @@ export class RoomCamera extends Container {
* @member {boolean} * @member {boolean}
* @private * @private
*/ */
private _dragging!: boolean; private _dragging!: boolean
/**
* The container that will act as a trigger to drag the room container.
*
* @member {Container}
* @private
*/
private readonly _viewContainer: Container
/**
* The container that will contain the room.
*
* @member {Container}
* @private
*/
private readonly _roomContainer: Container
/** /**
* The current selected tile. * The current selected tile.
@ -35,7 +52,7 @@ export class RoomCamera extends Container {
* @member {Tile | Stair} * @member {Tile | Stair}
* @private * @private
*/ */
private _selectedTile!: Tile | Stair; private _selectedTile!: Tile | Stair
/** /**
* The current zoom level. * The current zoom level.
@ -43,50 +60,58 @@ export class RoomCamera extends Container {
* @member {number} * @member {number}
* @private * @private
*/ */
private _zoomLevel: number; private _zoomLevel: number
/** /**
* @param {Room} [room] - The room instance that will be managed by this camera. * @param {Room} [room] - The room instance that will be managed by this camera.
*/ */
constructor(room: Room) { constructor(room: Room) {
super(); super()
this._room = room; this._room = room
this._zoomLevel = 1; this._zoomLevel = 1
this.addChild(this._room); /** Initialise the view container */
this._viewContainer = new Container()
/** Initialise the room container */
this._roomContainer = new Container()
this._roomContainer.addChild(this._room)
this._viewContainer.addChild(this._roomContainer)
this.addChild(this._viewContainer)
/** Handle interactions */ /** Handle interactions */
this._room.engine.application.renderer.events.domElement.addEventListener('pointerdown', this._dragStart); this._room.engine.application.renderer.events.domElement.addEventListener('pointerdown', this._dragStart)
this._room.engine.application.renderer.events.domElement.addEventListener('pointerup', this._dragEnd); this._room.engine.application.renderer.events.domElement.addEventListener('pointerup', this._dragEnd)
this._room.engine.application.renderer.events.domElement.addEventListener('pointermove', this._dragMove); this._room.engine.application.renderer.events.domElement.addEventListener('pointermove', this._dragMove)
/** Handle tile interactions */ /** Handle tile interactions */
this._room.engine.application.renderer.events.domElement.addEventListener('pointerdown', this._tilePointerDown); this._room.engine.application.renderer.events.domElement.addEventListener('pointerdown', this._tilePointerDown)
this._room.engine.application.renderer.events.domElement.addEventListener('pointerup', this._tilePointerUp); this._room.engine.application.renderer.events.domElement.addEventListener('pointerup', this._tilePointerUp)
this._room.engine.application.renderer.events.domElement.addEventListener('pointermove', this._tilePointerMove); this._room.engine.application.renderer.events.domElement.addEventListener('pointermove', this._tilePointerMove)
window.addEventListener( window.addEventListener(
'wheel', 'wheel',
(event) => { (event) => {
if (event.ctrlKey) event.preventDefault(); if (event.ctrlKey) event.preventDefault()
const delta = Math.sign(event.deltaY); /* const delta = Math.sign(event.deltaY)
const zoomLevel = parseFloat((-delta / 8).toFixed(2)); const zoomLevel = parseFloat((-delta / 8).toFixed(2))
if (this.zoomLevel + zoomLevel <= 0.8 || this.zoomLevel + zoomLevel >= 2.8) return; if (this.zoomLevel + zoomLevel <= 0.8 || this.zoomLevel + zoomLevel >= 2.8) return
this.zoomLevel += zoomLevel; this.zoomLevel += zoomLevel */
}, },
{ passive: false } { passive: false }
); )
window.addEventListener('resize', () => { window.addEventListener('resize', () => {
this._room.engine.application.view.height = window.innerHeight; this._room.engine.application.view.height = window.innerHeight
this._room.engine.application.view.width = window.innerWidth; this._room.engine.application.view.width = window.innerWidth
}); })
this._updateBounds(); this._updateBounds()
this.centerCamera(); this.centerCamera(null, 0)
} }
/** /**
@ -96,8 +121,8 @@ export class RoomCamera extends Container {
* @private * @private
*/ */
private _updateBounds(): void { private _updateBounds(): void {
this.pivot.x = this._room.visualization.getBounds().x; this._roomContainer.pivot.x = this._room.visualization.objectContainer.getBounds().x
this.pivot.y = this._room.visualization.getBounds().y; this._roomContainer.pivot.y = this._room.visualization.objectContainer.getBounds().y
} }
/** /**
@ -106,26 +131,24 @@ export class RoomCamera extends Container {
* @return {void} * @return {void}
* @public * @public
*/ */
public centerCamera(object?: RoomObject): void { public centerCamera(object?: Nullable<RoomObject>, duration = 1): void {
if (object === null || object === undefined) if (object == null) {
gsap.to(this, { const xAxis = this._room.engine.application.view.width / 2 - this._room.visualization.objectContainer.width / 2
x: Math.floor(this._room.engine.application.view.width / 2 - this._room.visualization.width / 2), const yAxis = this._room.engine.application.view.height / 2 - this._room.visualization.objectContainer.height / 2
y: Math.floor(this._room.engine.application.view.height / 2 - this._room.visualization.height / 2),
duration: 0.8, gsap.to(this._roomContainer, { x: Math.floor(xAxis), y: Math.floor(yAxis), duration, ease: Expo.easeOut })
ease: 'easeOut' } else {
}); const globalPos = object.getGlobalPosition(new Point(object.width / 2, object.height / 2))
// TODO: Reimplement this part with the new room object const diffX = globalPos.x - this._roomContainer.width / 2
/*else { const diffY = globalPos.y - this._roomContainer.height / 2
const globalPos: Point = object.getGlobalPosition(new Point(object.width / 2, object.height / 2));
const diffX: number = globalPos.x - this._room.engine.application.view.width / 2;
const diffY: number = globalPos.y - this._room.engine.application.view.height / 2;
gsap.to(this._roomContainer, { gsap.to(this._roomContainer, {
x: Math.floor(this._roomContainer.x - diffX), x: Math.floor(this._roomContainer.x - diffX),
y: Math.floor(this._roomContainer.y - diffY), y: Math.floor(this._roomContainer.y - diffY),
duration: 0.8, duration,
ease: 'easeOut' ease: Expo.easeOut
}); })
}*/ }
} }
/** /**
@ -135,9 +158,8 @@ export class RoomCamera extends Container {
* @private * @private
*/ */
private readonly _dragStart = (): void => { private readonly _dragStart = (): void => {
// console.log(event.movementX); this._dragging = true
this._dragging = true; }
};
/** /**
* This method is called when the user stop dragging the room. * This method is called when the user stop dragging the room.
@ -146,9 +168,9 @@ export class RoomCamera extends Container {
* @private * @private
*/ */
private readonly _dragEnd = (): void => { private readonly _dragEnd = (): void => {
this._dragging = false; this._dragging = false
if (this._isOutOfBounds()) this.centerCamera(); if (this._isOutOfBounds()) this.centerCamera()
}; }
/** /**
* This method is called when the user is moving the dragged room in the canvas. * This method is called when the user is moving the dragged room in the canvas.
@ -158,10 +180,10 @@ export class RoomCamera extends Container {
* @private * @private
*/ */
private readonly _dragMove = (event: PointerEvent): void => { private readonly _dragMove = (event: PointerEvent): void => {
if (!this._dragging) return; if (!this._dragging) return
this.x = Math.floor(this.x + event.movementX * (1 / this._zoomLevel)); this._roomContainer.x = Math.floor(this._roomContainer.x + event.movementX * (1 / this._zoomLevel))
this.y = Math.floor(this.y + event.movementY * (1 / this._zoomLevel)); this._roomContainer.y = Math.floor(this._roomContainer.y + event.movementY * (1 / this._zoomLevel))
}; }
/** /**
* Indicate if the room container is out of bounds of the PixiJS view. * Indicate if the room container is out of bounds of the PixiJS view.
@ -171,15 +193,15 @@ export class RoomCamera extends Container {
*/ */
private _isOutOfBounds(): boolean { private _isOutOfBounds(): boolean {
/** Out of bounds on the right */ /** Out of bounds on the right */
if (this.x > this._room.engine.application.view.width) return true; if (this._roomContainer.x > this._room.engine.application.view.width) return true
/** Out of bounds on the left */ /** Out of bounds on the left */
if (this.x + this.width < 0) return true; if (this._roomContainer.x + this._roomContainer.width < 0) return true
/** Out of bounds on the bottom */ /** Out of bounds on the bottom */
if (this.y > this._room.engine.application.view.height) return true; if (this._roomContainer.y > this._room.engine.application.view.height) return true
/** Out of bounds on the top */ /** Out of bounds on the top */
if (this.y + this.height < 0) return true; if (this._roomContainer.y + this._roomContainer.height < 0) return true
/** It is not out of bounds */ /** It is not out of bounds */
return false; return false
} }
/** /**
@ -189,10 +211,10 @@ export class RoomCamera extends Container {
* @private * @private
*/ */
private readonly _tilePointerDown = (event: PointerEvent): void => { private readonly _tilePointerDown = (event: PointerEvent): void => {
const tile = this._room.parts.getFromGlobal({ x: event.clientX, y: event.clientY }); const tile = this._room.parts.getFromGlobal({ x: event.clientX, y: event.clientY })
if (tile != null) tile.emit('pointerdown', new FederatedPointerEvent(new EventBoundary())); if (tile != null) tile.emit('pointerdown', new FederatedPointerEvent(new EventBoundary()))
}; }
/** /**
* Manage pointer up event on the canvas for tile interaction. * Manage pointer up event on the canvas for tile interaction.
@ -201,10 +223,10 @@ export class RoomCamera extends Container {
* @private * @private
*/ */
private readonly _tilePointerUp = (event: PointerEvent): void => { private readonly _tilePointerUp = (event: PointerEvent): void => {
const tile = this._room.parts.getFromGlobal({ x: event.clientX, y: event.clientY }); const tile = this._room.parts.getFromGlobal({ x: event.clientX, y: event.clientY })
if (tile != null) tile.emit('pointerup', new FederatedPointerEvent(new EventBoundary())); if (tile != null) tile.emit('pointerup', new FederatedPointerEvent(new EventBoundary()))
}; }
/** /**
* Manage pointer move event on the canvas for tile interaction. * Manage pointer move event on the canvas for tile interaction.
@ -213,18 +235,18 @@ export class RoomCamera extends Container {
* @private * @private
*/ */
private readonly _tilePointerMove = (event: PointerEvent): void => { private readonly _tilePointerMove = (event: PointerEvent): void => {
const objectPart = this._room.parts.getFromGlobal({ x: event.clientX, y: event.clientY }); const objectPart = this._room.parts.getFromGlobal({ x: event.clientX, y: event.clientY })
if (objectPart == null) return; if (objectPart == null) return
if (this._selectedTile === objectPart) { if (this._selectedTile === objectPart) {
objectPart.emit('pointermove', new FederatedPointerEvent(new EventBoundary())); objectPart.emit('pointermove', new FederatedPointerEvent(new EventBoundary()))
} else { } else {
if (this._selectedTile != null) if (this._selectedTile != null)
this._selectedTile.emit('pointerout', new FederatedPointerEvent(new EventBoundary())); this._selectedTile.emit('pointerout', new FederatedPointerEvent(new EventBoundary()))
if (objectPart != null) objectPart.emit('pointerover', new FederatedPointerEvent(new EventBoundary())); if (objectPart != null) objectPart.emit('pointerover', new FederatedPointerEvent(new EventBoundary()))
this._selectedTile = objectPart; this._selectedTile = objectPart
} }
}; }
/** /**
* Zoom the room container. * Zoom the room container.
@ -233,27 +255,27 @@ export class RoomCamera extends Container {
* @public * @public
*/ */
public set zoomLevel(zoomLevel: number) { public set zoomLevel(zoomLevel: number) {
const origWidth = this.width / this._zoomLevel; const origWidth = this.width / this._zoomLevel
const origHeight = this.height / this._zoomLevel; const origHeight = this.height / this._zoomLevel
this._zoomLevel = zoomLevel; this._zoomLevel = zoomLevel
// pivot's container property must be changed // pivot's container property must be changed
// because by default things are centered and scaled from the top corner // because by default things are centered and scaled from the top corner
// this.pivot.x = ... / this.pivot.y = ... // this.pivot.x = ... / this.pivot.y = ...
gsap.set(this.scale, { x: zoomLevel, y: zoomLevel, ease: Expo.easeOut }); gsap.set(this.scale, { x: zoomLevel, y: zoomLevel, ease: Expo.easeOut })
const diffWidth = origWidth - this.width; const diffWidth = origWidth - this.width
const diffHeight = origHeight - this.height; const diffHeight = origHeight - this.height
const offsetX = this._room.engine.application.view.width / 2 - (this.x + origWidth / 2); const offsetX = this._room.engine.application.view.width / 2 - (this.x + origWidth / 2)
const offsetY = this._room.engine.application.view.height / 2 - (this.y + origHeight / 2); const offsetY = this._room.engine.application.view.height / 2 - (this.y + origHeight / 2)
gsap.to(this, { gsap.to(this, {
x: this.x + Math.floor(diffWidth / 2 + offsetX), x: this.x + Math.floor(diffWidth / 2 + offsetX),
y: this.y + Math.floor(diffHeight / 2 + offsetY), y: this.y + Math.floor(diffHeight / 2 + offsetY),
duration: 0.8, duration: 0.8,
ease: 'easeOut' ease: 'easeOut'
}); })
} }
/** /**
@ -264,6 +286,6 @@ export class RoomCamera extends Container {
* @public * @public
*/ */
public get zoomLevel(): number { public get zoomLevel(): number {
return this._zoomLevel; return this._zoomLevel
} }
} }

24
src/objects/rooms/RoomVisualization.ts
View File

@ -75,6 +75,8 @@ export class RoomVisualization extends Container {
*/ */
private readonly _animationTicker = new Ticker() private readonly _animationTicker = new Ticker()
private readonly _objectContainer!: Container
/** /**
* @param {Room} [room] - The room instance that we want to visualize. * @param {Room} [room] - The room instance that we want to visualize.
*/ */
@ -85,6 +87,11 @@ export class RoomVisualization extends Container {
this._objectLayer = new RoomObjectLayer(this._room) this._objectLayer = new RoomObjectLayer(this._room)
this._partLayer = new RoomPartLayer(this._room) this._partLayer = new RoomPartLayer(this._room)
this._objectContainer = new Container()
/** Add layers to the visualization */
this.addChild(this._objectContainer)
/** Start the animation ticker */ /** Start the animation ticker */
this._animationTicker.maxFPS = 4 this._animationTicker.maxFPS = 4
this._animationTicker.start() this._animationTicker.start()
@ -222,7 +229,7 @@ export class RoomVisualization extends Container {
this._createCursor(part._position) this._createCursor(part._position)
} }
this.addChild(part) this._objectContainer.addChild(part)
} }
/** /**
@ -242,7 +249,7 @@ export class RoomVisualization extends Container {
const cursor = new Cursor(this._room, { position }) const cursor = new Cursor(this._room, { position })
this.addChild(cursor) this._objectContainer.addChild(cursor)
this._cursor = cursor this._cursor = cursor
} }
@ -275,7 +282,7 @@ export class RoomVisualization extends Container {
// todo!(): register event interactions for walls */ // todo!(): register event interactions for walls */
this.addChild(wall) this._objectContainer.addChild(wall)
this._walls.push(wall) this._walls.push(wall)
} }
@ -312,6 +319,17 @@ export class RoomVisualization extends Container {
return this._partLayer return this._partLayer
} }
/**
* Reference to the object container.
*
* @member {RoomObjectContainer}
* @readonly
* @public
*/
public get objectContainer(): Container {
return this._objectContainer
}
/** /**
* Reference to the room animation ticker instance. * Reference to the room animation ticker instance.
* *