From d6174a082f01af459c93354b969c0a72e4a35bd9 Mon Sep 17 00:00:00 2001 From: ad044 Date: Sun, 31 Jan 2021 19:51:37 +0400 Subject: [PATCH] prettied hud a bit --- .../MainScene/SyncedComponents/HUD.tsx | 133 +++++++++--------- src/resources/node_huds.json | 30 ++-- 2 files changed, 80 insertions(+), 83 deletions(-) diff --git a/src/components/MainScene/SyncedComponents/HUD.tsx b/src/components/MainScene/SyncedComponents/HUD.tsx index a8dec8e..cb53f67 100644 --- a/src/components/MainScene/SyncedComponents/HUD.tsx +++ b/src/components/MainScene/SyncedComponents/HUD.tsx @@ -45,6 +45,18 @@ const HUD = memo(() => { const scene = useStore((state) => state.currentScene); const prevData = usePrevious({ siteRotY, activeLevel, subscene, scene }); + const lerpObject = ( + obj: THREE.Object3D, + posX: number, + initialPosX: number + ) => { + obj.position.x = lerp( + obj.position.x, + activeRef.current ? posX : initialPosX, + 0.12 + ); + }; + // this part is imperative because it performs a lot better than having a toggleable spring. useFrame(() => { if ( @@ -53,36 +65,26 @@ const HUD = memo(() => { boringHudRef.current && greenTextRef.current ) { - longHudRef.current.position.x = lerp( - longHudRef.current.position.x, - !activeRef.current - ? currentHudRef.current.long.initial_position[0] - : currentHudRef.current.long.position[0], - 0.12 + const hud = currentHudRef.current; + lerpObject( + longHudRef.current, + hud.long.position[0], + hud.long.initial_position[0] ); - - boringHudRef.current.position.x = lerp( - boringHudRef.current.position.x, - !activeRef.current - ? currentHudRef.current.boring.initial_position[0] - : currentHudRef.current.boring.position[0], - 0.12 + lerpObject( + boringHudRef.current, + hud.boring.position[0], + hud.boring.initial_position[0] ); - - bigHudRef.current.position.x = lerp( - bigHudRef.current.position.x, - !activeRef.current - ? currentHudRef.current.big.initial_position[0] - : currentHudRef.current.big.position[0], - 0.12 + lerpObject( + bigHudRef.current, + hud.big.position[0], + hud.big.initial_position[0] ); - - greenTextRef.current.position.x = lerp( - greenTextRef.current.position.x, - !activeRef.current - ? currentHudRef.current.medium_text.initial_position[0] - : currentHudRef.current.medium_text.position[0], - 0.12 + lerpObject( + greenTextRef.current, + hud.medium_text.position[0], + hud.medium_text.initial_position[0] ); } }); @@ -100,26 +102,38 @@ const HUD = memo(() => { bigHudRef.current!.scale.x = Math.abs(bigHudRef.current!.scale.x); }; + const setPos = (hud: HUDType, pos: string) => { + longHudRef.current!.position.set( + ...(hud.long[pos as keyof typeof hud.long] as [number, number, number]) + ); + boringHudRef.current!.position.set( + ...(hud.boring[pos as keyof typeof hud.boring] as [ + number, + number, + number + ]) + ); + bigHudRef.current!.position.set( + ...(hud.big[pos as keyof typeof hud.big] as [number, number, number]) + ); + greenTextRef.current!.position.set( + ...(hud.medium_text[pos as keyof typeof hud.medium_text] as [ + number, + number, + number + ]) + ); + }; + if (activeRef.current !== undefined) { const hud = getNodeHud(activeNodeMatrixIndices!); if ( - (!(scene === "main" && prevData?.scene === "main") || - (subscene === "site" && prevData?.subscene === "pause") || - subscene === "pause") && - longHudRef.current && - bigHudRef.current && - boringHudRef.current && - greenTextRef.current + !(scene === "main" && prevData?.scene === "main") || + (subscene === "site" && prevData?.subscene === "pause") || + subscene === "pause" ) { - longHudRef.current.position.y = hud.long.position[1]; - boringHudRef.current.position.y = hud.boring.position[1]; - bigHudRef.current.position.y = hud.big.position[1]; - greenTextRef.current.position.y = hud.medium_text.position[1]; - - longHudRef.current.position.x = hud.long.position[0]; - boringHudRef.current.position.x = hud.boring.position[0]; - bigHudRef.current.position.x = hud.big.position[0]; - greenTextRef.current.position.x = hud.medium_text.position[0]; + // set to final pos instantly + setPos(hud, "position"); } else { if ( prevData?.siteRotY !== siteRotY || @@ -132,32 +146,15 @@ const HUD = memo(() => { activeRef.current = false; setTimeout( () => { - if ( - longHudRef.current && - bigHudRef.current && - boringHudRef.current && - greenTextRef.current - ) { - longHudRef.current.position.y = hud.long.position[1]; - boringHudRef.current.position.y = hud.boring.position[1]; - bigHudRef.current.position.y = hud.big.position[1]; - greenTextRef.current.position.y = hud.medium_text.position[1]; - - longHudRef.current.position.x = hud.long.initial_position[0]; - boringHudRef.current.position.x = - hud.boring.initial_position[0]; - bigHudRef.current.position.x = hud.big.initial_position[0]; - greenTextRef.current.position.x = - hud.medium_text.initial_position[0]; - - if (hud.mirrored) { - mirror(); - } else { - unMirror(); - } - currentHudRef.current = hud; - activeRef.current = true; + // set to initial pos instantly while its hidden + setPos(hud, "initial_position"); + if (hud.mirrored) { + mirror(); + } else { + unMirror(); } + currentHudRef.current = hud; + activeRef.current = true; }, wasHidden ? 0 : 500 ); diff --git a/src/resources/node_huds.json b/src/resources/node_huds.json index 9c9f50f..219a284 100644 --- a/src/resources/node_huds.json +++ b/src/resources/node_huds.json @@ -43,7 +43,7 @@ "mirrored": 0, "long": { "position": [-0.45, -0.32, -8.6], - "initial_position": [-1.43, -0.3, -8.6] + "initial_position": [-1.43, -0.32, -8.6] }, "boring": { "position": [0.51, -0.3, -8.6], @@ -51,7 +51,7 @@ }, "big": { "position": [0.3, -0.28, -8.6], - "initial_position": [1.3, -0.12, -8.6] + "initial_position": [1.3, -0.28, -8.6] }, "big_text": [-0.35, -0.32, -8.7], "medium_text": { @@ -123,15 +123,15 @@ "mirrored": 0, "long": { "position": [-0.3, 0.04, -8.6], - "initial_position": [-1.3, 0.02, -8.6] + "initial_position": [-1.3, 0.04, -8.6] }, "boring": { "position": [0.6, 0.06, -8.6], - "initial_position": [1.6, 0.038, -8.6] + "initial_position": [1.6, 0.06, -8.6] }, "big": { "position": [0.3, 0.015, -8.6], - "initial_position": [1.3, 0, -8.6] + "initial_position": [1.3, 0.015, -8.6] }, "big_text": [-0.15, 0.1, -8.7], "medium_text": { @@ -143,15 +143,15 @@ "mirrored": 0, "long": { "position": [-0.3, -0.07, -8.6], - "initial_position": [-1.35, -0.09, -8.6] + "initial_position": [-1.35, -0.07, -8.6] }, "boring": { "position": [0.6, -0.05, -8.6], - "initial_position": [1.6, -0.07, -8.6] + "initial_position": [1.6, -0.05, -8.6] }, "big": { "position": [0.3, -0.1, -8.6], - "initial_position": [1.35, -0.12, -8.6] + "initial_position": [1.35, -0.1, -8.6] }, "big_text": [-0.15, -0.03, -8.7], "medium_text": { @@ -203,15 +203,15 @@ "mirrored": 1, "long": { "position": [0.65, -0.07, -8.6], - "initial_position": [1.65, -0.09, -8.6] + "initial_position": [1.65, -0.07, -8.6] }, "boring": { "position": [-0.3, -0.05, -8.6], - "initial_position": [-1.3, -0.07, -8.6] + "initial_position": [-1.3, -0.05, -8.6] }, "big": { "position": [-0.35, -0.1, -8.6], - "initial_position": [-1.35, -0.12, -8.6] + "initial_position": [-1.35, -0.1, -8.6] }, "big_text": [0.2, -0.03, -8.7], "medium_text": { @@ -223,20 +223,20 @@ "mirrored": 1, "long": { "position": [0.63, -0.19, -8.6], - "initial_position": [1.63, -0.2, -8.6] + "initial_position": [1.63, -0.19, -8.6] }, "boring": { "position": [-0.29, -0.17, -8.6], - "initial_position": [-1.29, -0.18, -8.6] + "initial_position": [-1.29, -0.17, -8.6] }, "big": { "position": [-0.25, -0.22, -8.6], - "initial_position": [-1.25, -0.18, -8.6] + "initial_position": [-1.25, -0.22, -8.6] }, "big_text": [0.2, -0.17, -8.7], "medium_text": { "position": [-0.53, -0.25, -8.7], - "initial_position": [-1.53, -0.2, -8.7] + "initial_position": [-1.53, -0.25, -8.7] } } }