cha0s/humus
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: viewSize

Browse Source
This commit is contained in:
cha0s 2022-03-24 08:04:25 -05:00
parent 9f01056ef8
commit ef7f27326d
1 changed files with 15 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
packages/app/src/components/app/play/renderable/index.jsx
View File

@ -4,6 +4,7 @@ import {
React, React,
useCallback, useCallback,
useEffect, useEffect,
useFlecks,
useState, useState,
} from '@flecks/react'; } from '@flecks/react';
@ -19,14 +20,15 @@ import {
const renderer = new Renderer(); const renderer = new Renderer();
const RoomStage = () => { const RoomStage = () => {
const flecks = useFlecks();
const selfEntity = useSelfEntity(); const selfEntity = useSelfEntity();
const [container] = useState(new Container()); const [container] = useState(new Container());
const [roomRenderable, setRoomRenderable] = useState(); const [roomRenderable, setRoomRenderable] = useState();
const [viewport] = useState([320, 180]); const [viewSize, setViewSize] = useState(flecks.get('@avocado/topdown.viewSize'));
const room = useRoom(); const room = useRoom();
useEffect(() => { useEffect(() => {
[container.x, container.y] = Vector.scale(viewport, 0.5); [container.x, container.y] = Vector.scale(viewSize, 0.5);
}, [container, viewport]); }, [container, viewSize]);
useEffect(() => { useEffect(() => {
if (!room) { if (!room) {
return undefined; return undefined;
@ -43,7 +45,7 @@ const RoomStage = () => {
return undefined; return undefined;
} }
const {camera} = selfEntity; const {camera} = selfEntity;
const halfViewport = Vector.scale(viewport, 0.5); const halfViewport = Vector.scale(viewSize, 0.5);
camera.realPosition = camera.position; camera.realPosition = camera.position;
const onCameraRealOffsetChanged = () => { const onCameraRealOffsetChanged = () => {
roomRenderable.renderChunksForExtent(camera.rectangle); roomRenderable.renderChunksForExtent(camera.rectangle);
@ -53,20 +55,26 @@ const RoomStage = () => {
container.rotation = camera.rotation; container.rotation = camera.rotation;
}; };
const onCameraScaleChanged = () => { const onCameraScaleChanged = () => {
[container.scaleX, container.scaleY] = camera.scale; [container.scaleX, container.scaleY] = [1, 1] || camera.scale;
};
const onCameraViewSizeChanged = () => {
setViewSize(camera.viewSize);
}; };
onCameraRealOffsetChanged(); onCameraRealOffsetChanged();
onCameraRotationChanged(); onCameraRotationChanged();
onCameraScaleChanged(); onCameraScaleChanged();
onCameraViewSizeChanged();
camera.on('realOffsetChanged', onCameraRealOffsetChanged); camera.on('realOffsetChanged', onCameraRealOffsetChanged);
camera.on('rotationChanged', onCameraRotationChanged); camera.on('rotationChanged', onCameraRotationChanged);
camera.on('scaleChanged', onCameraScaleChanged); camera.on('scaleChanged', onCameraScaleChanged);
camera.on('viewSize', onCameraViewSizeChanged);
return () => { return () => {
camera.off('realOffsetChanged', onCameraRealOffsetChanged); camera.off('realOffsetChanged', onCameraRealOffsetChanged);
camera.off('rotationChanged', onCameraRotationChanged); camera.off('rotationChanged', onCameraRotationChanged);
camera.off('scaleChanged', onCameraScaleChanged); camera.off('scaleChanged', onCameraScaleChanged);
camera.off('viewSize', onCameraViewSizeChanged);
}; };
}, [container, roomRenderable, selfEntity, viewport]); }, [container, roomRenderable, selfEntity, viewSize]);
const ticker = useCallback( const ticker = useCallback(
(elapsed) => { (elapsed) => {
container.renderTick(elapsed); container.renderTick(elapsed);
@ -90,7 +98,7 @@ const RoomStage = () => {
scalable={false} scalable={false}
renderer={renderer} renderer={renderer}
renderable={container} renderable={container}
size={viewport} size={viewSize}
ticker={ticker} ticker={ticker}
/> />
); );