feat: camera rotation

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 <Component renderer={renderer} room={room} offset={offset} scale={scale} />;
+  return (
+    <Component
+      offset={offset}
+      renderer={renderer}
+      room={room}
+      rotation={rotation}
+      scale={scale}
+    />
+  );
 };
 
 export default RoomViewComponent;