added more convenient way of managing hud elements

src/components/HUDElement.tsx

@@ -0,0 +1,89 @@
+import React, { Suspense } from "react";
+import { useFrame, useLoader, useThree } from "react-three-fiber";
+import * as THREE from "three";
+import longHud from "../static/sprites/long_hud.png";
+import boringHud from "../static/sprites/long_hud_boring.png";
+import bigHud from "../static/sprites/big_hud.png";
+
+type HUDElementProps = {
+  longHudType: string;
+  boringHudType: string;
+  bigHudType: string;
+
+  longHudPosition: [number, number, number];
+  longHudScale: [number, number, number];
+
+  boringHudPosition: [number, number, number];
+  boringHudScale: [number, number, number];
+
+  bigHudPosition: [number, number, number];
+  bigHudScale: [number, number, number];
+};
+
+type SpriteTypeToSprite = {
+  [key: string]: string;
+};
+
+const HUDElement = (props: HUDElementProps) => {
+  // these hud elements come in all shapes and forms, some of them are mirrored, rotated
+  // you name it. this function allows me to specify whether i want a normal texture
+  // for the sprite or the mirrored/rotated one.
+  const spriteTypeToSprite = (spriteType: string, hudElement: string) => {
+    switch (spriteType) {
+      case "normal":
+        switch (hudElement) {
+          case "long":
+            return longHud;
+          case "boring":
+            return boringHud;
+          case "big":
+            return bigHud;
+        }
+    }
+  };
+
+  const longHudTexture: any = useLoader(
+    THREE.TextureLoader,
+    spriteTypeToSprite(props.longHudType, "long")!
+  );
+
+  const longHudBoringTexture: any = useLoader(
+    THREE.TextureLoader,
+    spriteTypeToSprite(props.boringHudType, "boring")!
+  );
+  const bigHudTexture: any = useLoader(
+    THREE.TextureLoader,
+    spriteTypeToSprite(props.bigHudType, "big")!
+  );
+
+  return (
+    <>
+      <sprite position={props.longHudPosition} scale={props.longHudScale}>
+        <spriteMaterial
+          attach="material"
+          map={longHudTexture}
+          transparent={true}
+        />
+      </sprite>
+      <sprite
+        position={props.boringHudPosition}
+        scale={props.boringHudScale}
+      >
+        <spriteMaterial
+          attach="material"
+          map={longHudBoringTexture}
+          transparent={true}
+        />
+      </sprite>
+      <sprite position={props.bigHudPosition} scale={props.bigHudScale}>
+        <spriteMaterial
+          attach="material"
+          map={bigHudTexture}
+          transparent={true}
+        />
+      </sprite>
+    </>
+  );
+};
+
+export default HUDElement;

src/components/LevelSprite.tsx

@@ -32,7 +32,10 @@ const LevelSprite = (props: LevelSpriteConstructorProps) => {
     } as SpriteToPath)[sprite];
   };
 
-  const spriteTexture: any = useLoader(THREE.TextureLoader, spriteToPath(props.sprite));
+  const spriteTexture: any = useLoader(
+    THREE.TextureLoader,
+    spriteToPath(props.sprite)
+  );
 
   return (
     <mesh
@@ -42,6 +45,7 @@ const LevelSprite = (props: LevelSpriteConstructorProps) => {
     >
       <planeBufferGeometry attach="geometry" />
       <meshStandardMaterial
+        color={0xffffff}
         side={THREE.DoubleSide}
         attach="material"
         map={spriteTexture}

src/components/OrthoCamera.tsx

@@ -16,11 +16,12 @@ import {
 } from "react-three-fiber";
 //import Orb from "./Orb";
 import { OrthographicCamera, Octahedron } from "drei";
-import { Matrix4, Scene } from "three";
+import { Matrix4, Scene, BasicDepthPacking } from "three";
 import * as THREE from "three";
-import longHud from "../static/sprites/long_hud.png";
-import longHudBoring from "../static/sprites/long_hud_boring.png";
-import bigHud from "../static/sprites/big_hud.png";
+import HUDElement from "./HUDElement";
+import level_sprite_huds from "../resources/level_sprite_huds.json";
+
+type PositionAndScaleProps = [number, number, number];
 
 const OrthoCamera = () => {
   const { gl, scene, camera } = useThree();
@@ -35,40 +36,29 @@ const OrthoCamera = () => {
     gl.render(virtualScene, virtualCam.current!);
   }, 1);
 
-  const longHudTexture: any = useLoader(THREE.TextureLoader, longHud);
-  const longHudBoringTexture: any = useLoader(
-    THREE.TextureLoader,
-    longHudBoring
-  );
-  const bigHudTexture: any = useLoader(THREE.TextureLoader, bigHud);
-
   return (
     <OrthographicCamera
       ref={virtualCam}
       makeDefault={false}
       position={[0, 0, 10]}
     >
-      <sprite position={[-0.45, 0.15, -8.6]} scale={[1, 0.03, 1]}>
-        <spriteMaterial
-          attach="material"
-          map={longHudTexture}
-          transparent={true}
-        />
-      </sprite>
-      <sprite position={[0.48, 0.174, -8.6]} scale={[1, 0.03, 1]}>
-        <spriteMaterial
-          attach="material"
-          map={longHudBoringTexture}
-          transparent={true}
-        />
-      </sprite>
-      <sprite position={[0.36, 0.13, -8.6]} scale={[0.5, 0.06, 1]}>
-        <spriteMaterial
-          attach="material"
-          map={bigHudTexture}
-          transparent={true}
-        />
-      </sprite>
+      {Object.values(level_sprite_huds.level04).map((spriteHud) => {
+        return (
+          <HUDElement
+            longHudType={spriteHud.long.type}
+            boringHudType={spriteHud.boring.type}
+            bigHudType={spriteHud.big.type}
+            longHudPosition={spriteHud.long.position as PositionAndScaleProps}
+            longHudScale={spriteHud.long.scale as PositionAndScaleProps}
+            boringHudPosition={
+              spriteHud.boring.position as PositionAndScaleProps
+            }
+            boringHudScale={spriteHud.boring.scale as PositionAndScaleProps}
+            bigHudPosition={spriteHud.big.position as PositionAndScaleProps}
+            bigHudScale={spriteHud.big.scale as PositionAndScaleProps}
+          />
+        );
+      })}
     </OrthographicCamera>
   );
 };

src/resources/level_sprite_huds.json

@@ -0,0 +1,21 @@
+{
+  "level04": {
+    "043": {
+      "long": {
+        "position": [-0.45, 0.15, -8.6],
+        "scale": [1, 0.03, 1],
+        "type": "normal"
+      },
+      "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"
+      }
+    }
+  }
+}

src/resources/level_sprites.json

@@ -26,21 +26,7 @@
       "scale": [0.25, 0.15, 0.25],
       "rotation": [0, -0.1, 0],
       "sprite": "touko",
-      "id": "043",
-      "hud": {
-        "long": {
-          "position": [-0.45, 0.15, -8.6],
-          "scale": [1, 0.03, 1]
-        },
-        "long_boring": {
-          "position": [0.48, 0.174, -8.6],
-          "scale": [1, 0.03, 1]
-        },
-        "big": {
-          "position": [0.36, 0.13, -8.6],
-          "scale": [0.5, 0.06, 1]
-        }
-      }
+      "id": "043"
     }
   }
 }