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 [isLainMoving, setLainMoving] = useState(true);
-  const [lainMoveState, setLainMoveState] = useState(<LainStanding />);
+  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,10 +347,12 @@ const Game = () => {
 
   useFrame(() => {
     if (isIntro) {
+      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;
           }
         }
@@ -365,23 +367,29 @@ const Game = () => {
         // 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) {
+        if (
-        updateHUD();
+          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}>
+        <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}
         />
+      </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,12 +220,25 @@ const Starfield = memo((props: StarfieldProps) => {
   ];
 
   const introStarfieldObjects = [
-    { starPoses: introPosesBlue, ref: introBlueRef, uniform: blueUniforms },
+    {
-    { starPoses: introPosesCyan, ref: introCyanRef, uniform: cyanUniforms },
+      starPoses: introPosesBlue,
-    { starPoses: introPosesWhite, ref: introWhiteRef, uniform: whiteUniforms },
+      ref: introBlueRef,
+      uniform: blueUniforms,
+    },
+    {
+      starPoses: introPosesCyan,
+      ref: introCyanRef,
+      uniform: cyanUniforms,
+    },
+    {
+      starPoses: introPosesWhite,
+      ref: introWhiteRef,
+      uniform: whiteUniforms,
+    },
   ];
 
-  return props.introStarfieldVisible ? (
+  return (
+    <>
       <a.group
         ref={introStarfieldGroupRef}
         position={[-2, -20, -2]}
@@ -254,11 +270,11 @@ const Starfield = memo((props: StarfieldProps) => {
           })
         )}
       </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) => {
@@ -276,7 +292,7 @@ const Starfield = memo((props: StarfieldProps) => {
                 key={pos[0]}
               >
                 <planeGeometry attach="geometry" />
-              <shaderMaterial
+                <a.shaderMaterial
                   attach="material"
                   uniforms={obj.uniform}
                   fragmentShader={fragmentShader}
@@ -284,12 +300,14 @@ const Starfield = memo((props: StarfieldProps) => {
                   side={THREE.DoubleSide}
                   transparent={true}
                   depthWrite={false}
+                  opacity={0.1}
                 />
               </mesh>
             );
           })
         )}
       </a.group>
+    </>
   );
 });