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;