debug for mr yukkuri

src/App.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from "react";
+import React, { useEffect, useState, Suspense } from "react";
 import Intro from "./components/Intro";
 import Game from "./components/Game";
 import "./static/css/main.css";
@@ -19,7 +19,7 @@ const App = () => {
     <div id="game-root" className="game">
       {/* {moveToGame ? <Game /> : <Intro setMoveToGame={setMoveToGame} />} */}
       {/* <Intro /> */}
-      <Game/>
+        <Game />
     </div>
   );
 };

src/components/Game.tsx

@@ -1,5 +1,11 @@
-import React, { useState, Suspense, useCallback, useEffect } from "react";
-import { Canvas } from "react-three-fiber";
+import React, {
+  useState,
+  Suspense,
+  useCallback,
+  useEffect,
+  useLayoutEffect,
+} from "react";
+import { Canvas, useLoader, useThree } from "react-three-fiber";
 import Lain, {
   LainIntro,
   LainMoveDown,
@@ -14,10 +20,13 @@ import { OrbitControls, PerspectiveCamera } from "drei";
 import Lights from "./Lights";
 import OrthoCamera from "./OrthoCamera";
 import TWEEN from "@tweenjs/tween.js";
+import moveDownSpriteSheet from "../static/sprites/jump_down.png";
+import moveUpSpriteSheet from "../static/sprites/jump_up.png";
 
 import level_sprite_directions from "../resources/level_sprite_directions.json";
 import lain_animations from "../resources/lain_animations.json";
 import level_sprite_huds from "../resources/level_sprite_huds.json";
+import * as THREE from "three";
 
 type KeyCodeAssociations = {
   [keyCode: number]: string;
@@ -38,6 +47,9 @@ type LainAnimations = {
 
 const Game = () => {
   const [isLainMoving, setLainMoving] = useState(false);
+  const [lainIntro, setLainIntro] = useState(false);
+  const [lainMoveUp, setLainMoveUp] = useState(false);
+  const [lainMoveDown, setLainMoveDown] = useState(false);
   const [lainMoveState, setLainMoveState] = useState(<LainStanding />);
   const [lainPosY, setLainPosY] = useState(-0.2);
 
@@ -187,7 +199,6 @@ const Game = () => {
   }, [handleUserKeyPress]);
 
   const animateSpriteHUDIn = () => {
-
     //wip
     const initialLongPos = getHudData(currentSprite)["long"]["initial"];
     const finalLongPos = getHudData(currentSprite)["long"]["initial"];
@@ -201,22 +212,34 @@ const Game = () => {
 
   useEffect(animateSpriteHUDIn, []);
 
+  function Preload() {
+    const moveDown = useLoader(THREE.TextureLoader, moveDownSpriteSheet);
+    const moveUp = useLoader(THREE.TextureLoader, moveUpSpriteSheet);
+    const { gl } = useThree();
+    useLayoutEffect(() => {
+      gl.initTexture(moveDown);
+      gl.initTexture(moveUp);
+    }, [moveDown, moveUp]);
+    return null;
+  }
+
   return (
     <>
-      <Canvas>
+      <Canvas concurrent>
         <PerspectiveCamera
           position={[0, cameraPosY, 3]}
           rotation={[0, cameraRotationY, 0]}
         >
-          <OrbitControls />
-          <Lain
-            isLainMoving={isLainMoving}
-            lainMoveState={lainMoveState}
-            lainPosY={lainPosY}
-          />
-          <Hub />
-          <Lights />
           <Suspense fallback={null}>
+            <OrbitControls />
+            <Preload />
+            <Lain
+              isLainMoving={isLainMoving}
+              lainMoveState={lainMoveState}
+              lainPosY={lainPosY}
+            />
+            <Hub currentSprite={currentSprite} />
+            <Lights />
             <OrthoCamera
               bigHudPosition={bigHudPosition!}
               boringHudPosition={boringHudPosition!}

src/components/Hub.tsx

@@ -21,6 +21,7 @@ const Hub = (props: any) => {
               rotation={sprite.rotation as RotationProps}
               sprite={sprite.sprite}
               key={sprite.id}
+              active={sprite.id === props.currentSprite ? true : false}
             />
           );
         })}

src/components/Lain.tsx

@@ -1,4 +1,10 @@
-import React, { useCallback, Suspense, useEffect, useState } from "react";
+import React, {
+  useCallback,
+  Suspense,
+  useEffect,
+  useState,
+  useLayoutEffect,
+} from "react";
 import { useFrame, useLoader, useThree } from "react-three-fiber";
 import * as THREE from "three";
 import introSpriteSheet from "../static/sprites/intro.png";

src/components/LevelSprite.tsx

@@ -9,14 +9,13 @@ import s from "../static/sprites/s.png";
 import sActive from "../static/sprites/s_active.png";
 import copland from "../static/sprites/copland.png";
 import coplandActive from "../static/sprites/copland_active.png";
-import { SpriteMaterial } from "three";
-import { act } from "react-dom/test-utils";
 
 type LevelSpriteConstructorProps = {
   sprite: string;
   position: [number, number, number];
   scale: [number, number, number];
   rotation: [number, number, number, (string | undefined)?];
+  active: boolean;
 };
 
 type SpriteToPath = {
@@ -24,7 +23,6 @@ type SpriteToPath = {
 };
 
 const LevelSprite = (props: LevelSpriteConstructorProps) => {
-  const [test, setTest] = useState(1.0);
   // the game only has a couple of sprites that it displays in the hub
   // dynamically importnig them would be worse for performance,
   // so we import all of them here and then use this function to
@@ -47,9 +45,9 @@ const LevelSprite = (props: LevelSpriteConstructorProps) => {
   const activeTexture: any = useLoader(THREE.TextureLoader, spriteSheet[1]);
 
   const uniforms = {
-    texture1: { type: "t", value: nonActiveTexture },
-    texture2: { type: "t", value: activeTexture },
-    alphaVal: { value: test },
+    tex1: { type: "t", value: nonActiveTexture },
+    tex2: { type: "t", value: activeTexture },
+    timeMSeconds: { value: Date.now() },
   };
 
   const vertexShader = `
@@ -57,30 +55,50 @@ const LevelSprite = (props: LevelSpriteConstructorProps) => {
 
     void main() {
       vUv = uv;
-      gl_Position = projectionMatrix * modelViewMatrix * vec4(position,1.0);
+      gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
     }
   `;
 
   const fragmentShader = `
-    uniform sampler2D texture1;
-    uniform sampler2D texture2;
-    uniform float alphaVal;
+    precision highp float;
+
+    uniform sampler2D tex1;
+    uniform sampler2D tex2;
+    uniform float timeMSeconds;
 
     varying vec2 vUv;
 
+    #define M_PI 3.1415926535897932384626433832795
+
     void main() {
-        vec4 tex1 = texture2D (texture1, vUv);
-        vec4 tex2 = texture2D (texture2, vUv);
-        vec3 mixCol  = mix(tex1.rgb / tex1.a, tex2.rgb / tex2.a, alphaVal);
-        gl_FragColor = vec4(mixCol.rgb, 1.0);
-        gl_FragColor.a = max(tex1.a, tex2.a); 
+        vec4 t1 = texture2D(tex1,vUv);
+        vec4 t2 = texture2D(tex2,vUv);
+        float bias = abs(sin(timeMSeconds));
+        gl_FragColor = mix(t1, t2, bias);
     }
   `;
 
   useFrame(() => {
-    (materialRef.current! as any).uniforms.alphaVal = test;
+    if (materialRef.current) {
+      (materialRef.current! as any).uniforms.timeMSeconds.value = 1.5;
+    }
   });
 
+  // useEffect(() => {
+  //   setInterval(() => {
+  //     if (materialRef.current) {
+  //       const currentRef = materialRef.current! as any;
+  //       if (currentRef.uniforms.alpha.value > 0.1) {
+  //         currentRef.uniforms.alpha.value = (
+  //           currentRef.uniforms.alpha.value - 0.1
+  //         ).toPrecision(1);
+  //       } else {
+  //         currentRef.uniforms.alpha.value = 1.0;
+  //       }
+  //     }
+  //   }, 125);
+  // }, []);
+
   return (
     <mesh
       position={props.position}
@@ -88,16 +106,24 @@ const LevelSprite = (props: LevelSpriteConstructorProps) => {
       rotation={props.rotation}
     >
       <planeBufferGeometry attach="geometry" />
-      <shaderMaterial
-        ref={materialRef}
-        attach="material"
-        uniforms={uniforms}
-        fragmentShader={fragmentShader}
-        vertexShader={vertexShader}
-        side={THREE.DoubleSide}
-        transparent={true}
-        uniformsNeedUpdate={true}
-      />
+      {props.active ? (
+        <shaderMaterial
+          ref={materialRef}
+          attach="material"
+          uniforms={uniforms}
+          fragmentShader={fragmentShader}
+          vertexShader={vertexShader}
+          side={THREE.DoubleSide}
+          transparent={true}
+        />
+      ) : (
+        <meshStandardMaterial
+          attach="material"
+          map={nonActiveTexture}
+          side={THREE.DoubleSide}
+          transparent={true}
+        />
+      )}
     </mesh>
   );
 };

src/resources/level_sprite_huds.json

@@ -17,5 +17,24 @@
       "scale": [0.5, 0.06, 1],
       "type": "normal"
     }
+  },
+  "042": {
+    "id": "042hud",
+    "long": {
+      "position": [-0.45, 0.15, -8.6],
+      "scale": [1, 0.03, 1],
+      "type": "normal",
+      "initial_position": [-1.45, 0.15, -8.6]
+    },
+    "boring": {
+      "position": [0.48, 0.174, -8.6],
+      "scale": [1, 0.03, 1],
+      "type": "normal"
+    },
+    "big": {
+      "position": [0.36, 0.13, -8.6],
+      "scale": [0.5, 0.06, 1],
+      "type": "normal"
+    }
   }
 }