diff --git a/src/components/Game.tsx b/src/components/Game.tsx
index 68d7866..f6a35e7 100644
--- a/src/components/Game.tsx
+++ b/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();
+ const [isLainMoving, setLainMoving] = useState(true);
+ const [lainMoveState, setLainMoveState] = useState();
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();
- 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();
+
+ 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();
- }, [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}
>
-
-
+
+
{
orbVisibility={!isIntro}
hudVisibility={!isIntro}
/>
-
+
-
-
-
+
+
+
+
);
};
diff --git a/src/components/HUDElement.tsx b/src/components/HUDElement.tsx
index 66adbb7..f0aa8ae 100644
--- a/src/components/HUDElement.tsx
+++ b/src/components/HUDElement.tsx
@@ -18,12 +18,10 @@ export type HUDElementProps = {
longHUDPosX: Interpolation;
longHUDScale: [number, number, number];
- // boringHudPosition: [number, number, number];
boringHUDPosX: Interpolation;
boringHUDPosYZ: [number, number];
boringHUDScale: [number, number, number];
- // bigHudPosition: [number, number, number];
bigHUDPosX: Interpolation;
bigHUDPosYZ: [number, number];
bigHUDScale: [number, number, number];
diff --git a/src/components/Hub.tsx b/src/components/Hub.tsx
index 5676c73..309c860 100644
--- a/src/components/Hub.tsx
+++ b/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;
diff --git a/src/components/Starfield.tsx b/src/components/Starfield.tsx
index cd47603..200958f 100644
--- a/src/components/Starfield.tsx
+++ b/src/components/Starfield.tsx
@@ -11,6 +11,7 @@ type StarRefsAndIncrementors = [
type StarfieldProps = {
starfieldPosY: Interpolation;
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) => {
@@ -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 ? (
-
- {introStarfieldObjects.map((obj: IntroStarfieldObjectData) =>
- obj.starPoses.map((pos: number[], idx: number) => {
- return (
-
-
-
-
- );
- })
- )}
-
- ) : (
-
- {mainStarfieldObjects.map((obj: StarfieldObjectData) =>
- obj.starPoses.map((pos: number[], idx: number) => {
- return (
-
-
-
-
- );
- })
- )}
-
+ return (
+ <>
+
+ {introStarfieldObjects.map((obj: IntroStarfieldObjectData) =>
+ obj.starPoses.map((pos: number[], idx: number) => {
+ return (
+
+
+
+
+ );
+ })
+ )}
+
+
+ {mainStarfieldObjects.map((obj: StarfieldObjectData) =>
+ obj.starPoses.map((pos: number[], idx: number) => {
+ return (
+
+
+
+
+ );
+ })
+ )}
+
+ >
);
});