refactor: tile rendering
This commit is contained in:
parent
db223e6d23
commit
5942272b93
|
@ -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;
|
||||||
|
|
Loading…
Reference in New Issue
Block a user