diff --git a/src/components/HUDElement.tsx b/src/components/HUDElement.tsx
new file mode 100644
index 0000000..0530755
--- /dev/null
+++ b/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 (
+ <>
+
+
+
+
+
+
+
+
+
+ >
+ );
+};
+
+export default HUDElement;
diff --git a/src/components/LevelSprite.tsx b/src/components/LevelSprite.tsx
index 0e0ac72..d9414ce 100644
--- a/src/components/LevelSprite.tsx
+++ b/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 (
{
>
{
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 (
-
-
-
-
-
-
-
-
-
+ {Object.values(level_sprite_huds.level04).map((spriteHud) => {
+ return (
+
+ );
+ })}
);
};
diff --git a/src/resources/level_sprite_huds.json b/src/resources/level_sprite_huds.json
new file mode 100644
index 0000000..dec2a94
--- /dev/null
+++ b/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"
+ }
+ }
+ }
+}
diff --git a/src/resources/level_sprites.json b/src/resources/level_sprites.json
index 7ba8738..afb7c6c 100644
--- a/src/resources/level_sprites.json
+++ b/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"
}
}
}