minor tweaks to intro

src/components/Game.tsx

@@ -64,10 +64,10 @@ type LainAnimations = {
 };
 
 const Game = () => {
-  const [isIntro, setIsIntro] = useState(false);
+  const [isIntro, setIsIntro] = useState(true);
 
-  const [isLainMoving, setLainMoving] = useState(false);
-  const [lainMoveState, setLainMoveState] = useState(<LainStanding />);
+  const [isLainMoving, setLainMoving] = useState(true);
+  const [lainMoveState, setLainMoveState] = useState(<LainIntro />);
 
   const [orthoCameraPosY, setOrthoCameraPosY] = useState(0);
 
@@ -77,6 +77,8 @@ const Game = () => {
   );
   const [spriteUpdateCooldown, setSpriteUpdateCooldown] = useState(false);
 
+  const [mainStarfieldVisible, setMainStarfieldVisible] = useState(false);
+
   const [HUDActive, setHUDActive] = useState(1);
 
   const { bigHUDPositionX } = useSpring({
@@ -335,8 +337,6 @@ const Game = () => {
   useEffect(() => {
     window.addEventListener("keydown", handleKeyPress);
 
-    document.getElementsByTagName("canvas")[0].className = "hub-background";
-
     return () => {
       window.removeEventListener("keydown", handleKeyPress);
       document.getElementsByTagName("body")[0].className = "";
@@ -347,41 +347,49 @@ const Game = () => {
 
   useFrame(() => {
     if (isIntro) {
-      if (groupRef.current!.rotation.x > 0) {
-        if (groupRef.current!.position.z > -1) {
-          groupRef.current!.rotation.x -= 0.015;
-        } else {
-          groupRef.current!.rotation.x -= 0.01;
+      if (groupRef.current) {
+        if (groupRef.current!.rotation.x > 0) {
+          if (groupRef.current!.position.z > -1) {
+            groupRef.current!.rotation.x -= 0.015;
+          } else {
+            // if the position z is at a certain point speed up the rotation
+            groupRef.current!.rotation.x -= 0.01;
+          }
+        }
+        if (groupRef.current!.position.y > 0) {
+          groupRef.current!.position.y -= 0.015;
         }
-      }
-      if (groupRef.current!.position.y > 0) {
-        groupRef.current!.position.y -= 0.015;
-      }
 
-      if (groupRef.current!.position.z < 0) {
-        groupRef.current!.position.z += 0.04;
-      }
+        if (groupRef.current!.position.z < 0) {
+          groupRef.current!.position.z += 0.04;
+        }
 
-      // if the rotation hits this value that means that the intro is finished.
-      // using a settimeout or something similar resulted in clunkiness, since it was dependant
-      // on load times.
-      if (parseFloat(groupRef.current!.rotation.x.toPrecision(2)) === -0.005) {
-        updateHUD();
-        setLainMoving(false);
-        setLainMoveState(<LainStanding />);
-        setIsIntro(false);
+        // if the rotation hits this value that means that the intro is finished.
+        // using a settimeout or something similar resulted in clunkiness, since it was dependant
+        // on load times.
+        if (
+          parseFloat(groupRef.current!.rotation.x.toPrecision(2)) === -0.005
+        ) {
+          setLainMoving(false);
+          setLainMoveState(<LainStanding />);
+
+          setTimeout(() => {
+            setIsIntro(false);
+            document.getElementsByTagName("canvas")[0].className =
+              "hub-background";
+          }, 300);
+        }
+
+        // when pos z reaches this point, make the main starfield appear
+        if (parseFloat(groupRef.current!.position.z.toPrecision(2)) === -1.4) {
+          if (!mainStarfieldVisible) {
+            setMainStarfieldVisible(true);
+          }
+        }
       }
     }
   });
 
-  // on load, move the hud to the right (out of vision), and set lain sprite to intro
-  useEffect(() => {
-    setIsIntro(true);
-    updateHUD();
-    setLainMoving(true);
-    setLainMoveState(<LainIntro />);
-  }, [updateHUD]);
-
   // pos-z ? => 3
   // rot-x 1.5 => 0
   // grp rot/pos both 0,0,0 => ?
@@ -391,8 +399,8 @@ const Game = () => {
       position-y={camPosY}
       rotation-y={camRotY}
     >
-      <group rotation={[2.3, 0, 0]} position={[0, 1.5, -7.5]} ref={groupRef}>
-        <Suspense fallback={null}>
+      <Suspense fallback={null}>
+        <group rotation={[2.3, 0, 0]} position={[0, 1.5, -7.5]} ref={groupRef}>
           <Preloader />
           <Hub currentSprite={currentSprite} />
           <OrthoCamera
@@ -428,16 +436,21 @@ const Game = () => {
             orbVisibility={!isIntro}
             hudVisibility={!isIntro}
           />
-          <Starfield starfieldPosY={starfieldPosY} />
+          <Starfield
+            starfieldPosY={starfieldPosY}
+            mainStarfieldVisible={mainStarfieldVisible}
+            introStarfieldVisible={isIntro}
+          />
           <Lights />
           <OrbitControls />
-        </Suspense>
-      </group>
-      <Lain
-        isLainMoving={isLainMoving}
-        lainMoveState={lainMoveState}
-        lainPosY={lainPosY}
-      />
+        </group>
+
+        <Lain
+          isLainMoving={isLainMoving}
+          lainMoveState={lainMoveState}
+          lainPosY={lainPosY}
+        />
+      </Suspense>
     </a.perspectiveCamera>
   );
 };

src/components/HUDElement.tsx

@@ -18,12 +18,10 @@ export type HUDElementProps = {
   longHUDPosX: Interpolation<number, number>;
   longHUDScale: [number, number, number];
 
-  // boringHudPosition: [number, number, number];
   boringHUDPosX: Interpolation<number, number>;
   boringHUDPosYZ: [number, number];
   boringHUDScale: [number, number, number];
 
-  // bigHudPosition: [number, number, number];
   bigHUDPosX: Interpolation<number, number>;
   bigHUDPosYZ: [number, number];
   bigHUDScale: [number, number, number];

src/components/Hub.tsx

@@ -3,6 +3,7 @@ import level_sprites from "../resources/level_sprites.json";
 import GrayRing from "./GrayRing";
 import LevelSprite from "./LevelSprite";
 import PurpleRing from "./PurpleRing";
+import Preloader from "./Preloader";
 
 type HubProps = {
   currentSprite: string;

src/components/Starfield.tsx

@@ -11,6 +11,7 @@ type StarRefsAndIncrementors = [
 type StarfieldProps = {
   starfieldPosY: Interpolation<number, number>;
   introStarfieldVisible: boolean;
+  mainStarfieldVisible: boolean;
 };
 
 type StarfieldObjectData = {
@@ -57,6 +58,7 @@ const Starfield = memo((props: StarfieldProps) => {
   const fragmentShader = `
     uniform vec3 color1;
     uniform vec3 color2;
+    uniform float alpha;
 
     varying vec2 vUv;
     
@@ -142,14 +144,15 @@ const Starfield = memo((props: StarfieldProps) => {
 
   const fromLeftStarRefsAndIncrementors: StarRefsAndIncrementors = [
     [blueFromLeftRef, 8.3],
-    [cyanFromLeftRef, 3.3],
+    [cyanFromLeftRef, 3.7],
     [whiteFromLeftRef, 3.3],
   ];
 
   useFrame(() => {
     if (props.introStarfieldVisible) {
       introStarfieldGroupRef.current!.position.y += 0.2;
-    } else {
+    }
+    if (props.mainStarfieldVisible) {
       // planes (stars) coming from right move to positive X and negative Z direction
       fromRightStarRefsAndIncrementors.forEach((el) => {
         el[0].current.forEach((posRef: RefObject<THREE.Object3D>) => {
@@ -217,79 +220,94 @@ const Starfield = memo((props: StarfieldProps) => {
   ];
 
   const introStarfieldObjects = [
-    { starPoses: introPosesBlue, ref: introBlueRef, uniform: blueUniforms },
-    { starPoses: introPosesCyan, ref: introCyanRef, uniform: cyanUniforms },
-    { starPoses: introPosesWhite, ref: introWhiteRef, uniform: whiteUniforms },
+    {
+      starPoses: introPosesBlue,
+      ref: introBlueRef,
+      uniform: blueUniforms,
+    },
+    {
+      starPoses: introPosesCyan,
+      ref: introCyanRef,
+      uniform: cyanUniforms,
+    },
+    {
+      starPoses: introPosesWhite,
+      ref: introWhiteRef,
+      uniform: whiteUniforms,
+    },
   ];
 
-  return props.introStarfieldVisible ? (
-    <a.group
-      ref={introStarfieldGroupRef}
-      position={[-2, -20, -2]}
-      rotation={[0, 0, 0]}
-      visible={props.introStarfieldVisible}
-    >
-      {introStarfieldObjects.map((obj: IntroStarfieldObjectData) =>
-        obj.starPoses.map((pos: number[], idx: number) => {
-          return (
-            <mesh
-              ref={obj.ref.current[idx]}
-              scale={[0.01, 2, -0.5]}
-              position={[pos[0], pos[1], pos[2]]}
-              key={pos[0]}
-              renderOrder={-1}
-            >
-              <planeGeometry attach="geometry" />
-              <shaderMaterial
-                attach="material"
-                uniforms={obj.uniform}
-                fragmentShader={fragmentShader}
-                vertexShader={vertexShader}
-                side={THREE.DoubleSide}
-                transparent={true}
-                depthWrite={false}
-              />
-            </mesh>
-          );
-        })
-      )}
-    </a.group>
-  ) : (
-    <a.group
-      position={[-0.7, 0, -5]}
-      rotation={[0, 0, 0]}
-      position-y={props.starfieldPosY}
-    >
-      {mainStarfieldObjects.map((obj: StarfieldObjectData) =>
-        obj.starPoses.map((pos: number[], idx: number) => {
-          return (
-            <mesh
-              ref={obj.ref.current[idx]}
-              position={[
-                pos[0] + obj.positionSpecifier[0],
-                pos[1] + obj.positionSpecifier[1],
-                pos[2] + obj.positionSpecifier[2],
-              ]}
-              rotation={obj.rotation as [number, number, number]}
-              scale={[0.01, 2, -0.5]}
-              renderOrder={-1}
-              key={pos[0]}
-            >
-              <planeGeometry attach="geometry" />
-              <shaderMaterial
-                attach="material"
-                uniforms={obj.uniform}
-                fragmentShader={fragmentShader}
-                vertexShader={vertexShader}
-                side={THREE.DoubleSide}
-                transparent={true}
-                depthWrite={false}
-              />
-            </mesh>
-          );
-        })
-      )}
-    </a.group>
+  return (
+    <>
+      <a.group
+        ref={introStarfieldGroupRef}
+        position={[-2, -20, -2]}
+        rotation={[0, 0, 0]}
+        visible={props.introStarfieldVisible}
+      >
+        {introStarfieldObjects.map((obj: IntroStarfieldObjectData) =>
+          obj.starPoses.map((pos: number[], idx: number) => {
+            return (
+              <mesh
+                ref={obj.ref.current[idx]}
+                scale={[0.01, 2, -0.5]}
+                position={[pos[0], pos[1], pos[2]]}
+                key={pos[0]}
+                renderOrder={-1}
+              >
+                <planeGeometry attach="geometry" />
+                <shaderMaterial
+                  attach="material"
+                  uniforms={obj.uniform}
+                  fragmentShader={fragmentShader}
+                  vertexShader={vertexShader}
+                  side={THREE.DoubleSide}
+                  transparent={true}
+                  depthWrite={false}
+                />
+              </mesh>
+            );
+          })
+        )}
+      </a.group>
+      <a.group
+        position={[-0.7, 0, -5]}
+        rotation={[0, 0, 0]}
+        position-y={props.starfieldPosY}
+        visible={props.mainStarfieldVisible}
+      >
+        {mainStarfieldObjects.map((obj: StarfieldObjectData) =>
+          obj.starPoses.map((pos: number[], idx: number) => {
+            return (
+              <mesh
+                ref={obj.ref.current[idx]}
+                position={[
+                  pos[0] + obj.positionSpecifier[0],
+                  pos[1] + obj.positionSpecifier[1],
+                  pos[2] + obj.positionSpecifier[2],
+                ]}
+                rotation={obj.rotation as [number, number, number]}
+                scale={[0.01, 2, -0.5]}
+                renderOrder={-1}
+                key={pos[0]}
+              >
+                <planeGeometry attach="geometry" />
+                <a.shaderMaterial
+                  attach="material"
+                  uniforms={obj.uniform}
+                  fragmentShader={fragmentShader}
+                  vertexShader={vertexShader}
+                  side={THREE.DoubleSide}
+                  transparent={true}
+                  depthWrite={false}
+                  opacity={0.1}
+                />
+              </mesh>
+            );
+          })
+        )}
+      </a.group>
+    </>
   );
 });