refactor: tile rendering

This commit is contained in:
cha0s 2021-03-26 15:05:59 -05:00
parent db223e6d23
commit 5942272b93

View File

@ -17,6 +17,7 @@ const ticker = () => {};
const RoomStage = () => { const RoomStage = () => {
const selfEntity = useSelfEntity(); const selfEntity = useSelfEntity();
const [container] = useState(new Container()); const [container] = useState(new Container());
const [roomView, setRoomView] = useState();
const [viewport] = useState([320, 180]); const [viewport] = useState([320, 180]);
const room = useRoom(); const room = useRoom();
useEffect(() => { useEffect(() => {
@ -27,19 +28,21 @@ const RoomStage = () => {
return undefined; return undefined;
} }
const roomView = new RoomView(room, renderer); const roomView = new RoomView(room, renderer);
setRoomView(roomView);
container.addChild(roomView); container.addChild(roomView);
return () => { return () => {
container.removeChild(roomView); container.removeChild(roomView);
}; };
}, [container, room]); }, [container, room]);
useEffect(() => { useEffect(() => {
if (!room || !selfEntity || !selfEntity.camera) { if (!roomView || !selfEntity || !selfEntity.camera) {
return undefined; return undefined;
} }
const {camera} = selfEntity; const {camera} = selfEntity;
const halfViewport = Vector.scale(viewport, 0.5); const halfViewport = Vector.scale(viewport, 0.5);
camera.realPosition = camera.position; camera.realPosition = camera.position;
const onCameraRealOffsetChanged = () => { const onCameraRealOffsetChanged = () => {
roomView.renderChunksForExtent(camera.rectangle);
container.pivot = Vector.sub(halfViewport, Vector.scale(camera.realOffset, -1)); container.pivot = Vector.sub(halfViewport, Vector.scale(camera.realOffset, -1));
}; };
const onCameraRotationChanged = () => { const onCameraRotationChanged = () => {
@ -59,7 +62,7 @@ const RoomStage = () => {
camera.off('rotationChanged', onCameraRotationChanged); camera.off('rotationChanged', onCameraRotationChanged);
camera.off('scaleChanged', onCameraScaleChanged); camera.off('scaleChanged', onCameraScaleChanged);
}; };
}, [container, room, selfEntity, viewport]); }, [container, roomView, selfEntity, viewport]);
useEffect(() => { useEffect(() => {
if (!room) { if (!room) {
return undefined; return undefined;