opt: render and compositing

This commit is contained in:
cha0s 2022-03-25 06:26:31 -05:00
parent 49c050fe91
commit 8b5b62829e
2 changed files with 27 additions and 3 deletions

View File

@ -3,7 +3,9 @@ import {usePropertyChange} from '@avocado/react';
import {RoomUi} from '@avocado/topdown';
import {
React,
useEffect,
useFlecks,
useRef,
} from '@flecks/react';
import {
@ -15,13 +17,34 @@ import styles from './index.module.scss';
const PlayUi = () => {
const {config: {'@humus/app': {resolution}}} = useFlecks();
const ref = useRef();
const room = useRoom();
const selfEntity = useSelfEntity();
const viewSize = usePropertyChange(selfEntity?.camera, 'viewSize', [0, 0]);
const {camera} = selfEntity || {};
// Update the transform.
useEffect(() => {
if (!ref.current || !room || !camera) {
return undefined;
}
const onRealOffsetChanged = () => {
const translated = Vector.mul(
Vector.scale(camera.realOffset, -1),
Vector.div(resolution, viewSize),
);
ref.current
.style.transform = `translate(${translated[0]}px, ${translated[1]}px)`;
};
camera.on('realOffsetChanged', onRealOffsetChanged);
return () => {
camera.off('realOffsetChanged', onRealOffsetChanged);
};
}, [camera, ref, resolution, room, viewSize]);
return (
<div className={styles.ui}>
<RoomUi
domScale={Vector.div(resolution, usePropertyChange(selfEntity?.camera, 'viewSize', [0, 0]))}
position={Vector.scale(usePropertyChange(selfEntity?.camera, 'realOffset', [0, 0]), -1)}
domScale={Vector.div(resolution, viewSize)}
ref={ref}
room={room}
/>
{selfEntity && <Hotbar selfEntity={selfEntity} />}

View File

@ -1,5 +1,6 @@
.ui {
height: 100%;
position: relative;
// Move children to a separate composite layer.
position: absolute;
width: 100%;
}