diff --git a/app/src/react/components/renderer/room-view.jsx b/app/src/react/components/renderer/room-view.jsx
index 630af31..f7b68c8 100644
--- a/app/src/react/components/renderer/room-view.jsx
+++ b/app/src/react/components/renderer/room-view.jsx
@@ -8,6 +8,7 @@ import {useRoom, useSelfEntity} from '@humus/core';
import {PixiComponent, useApp} from '@inlet/react-pixi';
const container = new Container();
+const VIEWPORT = [320, 180];
const Component = PixiComponent('RoomView', {
create: () => container.internal,
@@ -22,8 +23,11 @@ const Component = PixiComponent('RoomView', {
}
const [roomView] = container.children;
if (roomView) {
- [roomView.x, roomView.y] = Vector.scale(newProps.offset, -1);
+ const halfViewport = Vector.scale(VIEWPORT, 0.5);
+ roomView.pivot = Vector.sub(halfViewport, Vector.scale(newProps.offset, -1));
+ [roomView.x, roomView.y] = halfViewport;
[roomView.scaleX, roomView.scaleY] = newProps.scale;
+ roomView.rotation = newProps.rotation;
}
},
});
@@ -41,6 +45,7 @@ const RoomViewComponent = () => {
const selfEntity = useSelfEntity();
const [offset, setOffset] = useState([0, 0]);
const [scale, setScale] = useState([1, 1]);
+ const [rotation, setRotation] = useState(0);
const room = useRoom();
useEffect(() => {
if (!room || !selfEntity) {
@@ -50,12 +55,17 @@ const RoomViewComponent = () => {
const onCameraRealOffsetChanged = () => {
setOffset(selfEntity.camera.realOffset);
};
+ const onCameraRotationChanged = () => {
+ setRotation(selfEntity.camera.rotation);
+ };
const onCameraScaleChanged = () => {
setScale(selfEntity.camera.scale);
};
onCameraRealOffsetChanged();
+ onCameraRotationChanged();
onCameraScaleChanged();
selfEntity.camera.on('realOffsetChanged', onCameraRealOffsetChanged);
+ selfEntity.camera.on('rotationChanged', onCameraRotationChanged);
selfEntity.camera.on('scaleChanged', onCameraScaleChanged);
return () => {
const {camera} = selfEntity || {};
@@ -77,7 +87,15 @@ const RoomViewComponent = () => {
destroyLoop(handle);
};
}, [room]);
- return ;
+ return (
+
+ );
};
export default RoomViewComponent;