diff --git a/src/components/Game.tsx b/src/components/Game.tsx
index bbe2824..3943183 100644
--- a/src/components/Game.tsx
+++ b/src/components/Game.tsx
@@ -122,6 +122,14 @@ const Game = () => {
[]
);
+ const [{ starfieldPositionY }, setStarfieldPositionY] = useSpring(
+ () => ({
+ starfieldPositionY: -0.5,
+ config: { precision: 0.0001, duration: 1200 },
+ }),
+ []
+ );
+
const moveCamera = useCallback(
(val: number) =>
void setTimeout(
@@ -134,6 +142,18 @@ const Game = () => {
[cameraPositionY, setCameraPositionY]
);
+ const moveStarfield = useCallback(
+ (val: number) =>
+ void setTimeout(
+ () =>
+ setStarfieldPositionY(() => ({
+ starfieldPositionY: starfieldPositionY.get() + val,
+ })),
+ 1300
+ ),
+ [starfieldPositionY, setStarfieldPositionY]
+ );
+
const moveLain = useCallback(
(val: number) =>
void setTimeout(
@@ -161,6 +181,7 @@ const Game = () => {
const camRotY = cameraRotationY.to([0, 1], [0, Math.PI]);
const camPosY = cameraPositionY.to([0, 1], [0, Math.PI]);
const lainPosY = lainPositionY.to([0, 1], [0, Math.PI]);
+ const starfieldPosY = starfieldPositionY.to([0, 1], [0, Math.PI]);
const getMove = (currentLoc: string, key: string): string => {
return (level_sprite_directions as SpriteDirections)[currentLoc][key];
@@ -180,6 +201,7 @@ const Game = () => {
switch (key) {
case "down":
moveCamera(0.6);
+ moveStarfield(-0.6);
moveLain(-0.6);
setLainMoveState();
break;
@@ -189,6 +211,7 @@ const Game = () => {
break;
case "up":
moveCamera(-0.6);
+ moveStarfield(0.6);
moveLain(0.6);
setLainMoveState();
break;
@@ -210,7 +233,7 @@ const Game = () => {
setLainMoveState();
}, (lain_animations as LainAnimations)[key]["duration"]);
},
- [moveCamera, moveLain, rotateCamera]
+ [moveCamera, moveLain, rotateCamera, moveStarfield]
);
const updateHUD = useCallback(() => {
@@ -372,7 +395,7 @@ const Game = () => {
id={currentSpriteHUD!["id"]}
orbVisibility={!isIntro}
/>
-
+
diff --git a/src/components/Starfield.tsx b/src/components/Starfield.tsx
index 68729c0..8d75faa 100644
--- a/src/components/Starfield.tsx
+++ b/src/components/Starfield.tsx
@@ -1,48 +1,29 @@
-import { Interpolation } from "@react-spring/three";
+import { Interpolation, a } from "@react-spring/three";
import React, { createRef, memo, useMemo, useRef } from "react";
import { useFrame } from "react-three-fiber";
import * as THREE from "three";
type StarfieldProps = {
starfieldPosY: Interpolation;
-}
+};
const Starfield = memo((props: StarfieldProps) => {
- const blueUniforms = useMemo(
- () => ({
+ const uniformConstructor = (col: string) => {
+ return {
color1: {
value: new THREE.Color("white"),
},
color2: {
- value: new THREE.Color("blue"),
+ value: new THREE.Color(col),
},
- }),
- []
- );
+ };
+ };
- const cyanUniforms = useMemo(
- () => ({
- color1: {
- value: new THREE.Color("white"),
- },
- color2: {
- value: new THREE.Color("cyan"),
- },
- }),
- []
- );
-
- const whiteUniforms = useMemo(
- () => ({
- color1: {
- value: new THREE.Color("white"),
- },
- color2: {
- value: new THREE.Color("gray"),
- },
- }),
- []
- );
+ const [blueUniforms, cyanUniforms, whiteUniforms] = [
+ "blue",
+ "cyan",
+ "gray",
+ ].map((color: string) => useMemo(() => uniformConstructor(color), [color]));
const vertexShader = `
varying vec2 vUv;
@@ -72,41 +53,33 @@ const Starfield = memo((props: StarfieldProps) => {
const lcgInstance = LCG(1664525, 1013904223, 2 ** 32, 2);
- const posesBlueFromRight = Array.from({ length: 40 }, () => [
- lcgInstance() / 1000000000,
- lcgInstance() / 1000000000,
- lcgInstance() / 1000000000,
- ]);
+ const [
+ posesBlueFromRight,
+ posesBlueFromLeft,
+ posesCyanFromRight,
+ posesCyanFromLeft,
+ posesWhiteFromLeft,
+ ] = [40, 40, 10, 5, 5].map((x) =>
+ Array.from({ length: x }, () => [
+ lcgInstance() / 1000000000,
+ lcgInstance() / 1000000000,
+ lcgInstance() / 1000000000,
+ ])
+ );
- const posesBlueFromLeft = Array.from({ length: 25 }, () => [
- lcgInstance() / 1000000000,
- lcgInstance() / 1000000000,
- lcgInstance() / 1000000000,
- ]);
-
- const posesCyanFromRight = Array.from({ length: 10 }, () => [
- lcgInstance() / 1000000000,
- lcgInstance() / 1000000000,
- lcgInstance() / 1000000000,
- ]);
-
- const posesCyanFromLeft = Array.from({ length: 5 }, () => [
- lcgInstance() / 1000000000,
- lcgInstance() / 1000000000,
- lcgInstance() / 1000000000,
- ]);
-
- const posesWhiteFromleft = Array.from({ length: 5 }, () => [
- lcgInstance() / 1000000000,
- lcgInstance() / 1000000000,
- lcgInstance() / 1000000000,
- ]);
-
- const blueFromRightRef = useRef(posesBlueFromRight.map(() => createRef()));
- const blueFromLeftRef = useRef(posesBlueFromLeft.map(() => createRef()));
- const cyanFromRightRef = useRef(posesCyanFromRight.map(() => createRef()));
- const cyanFromLeftRef = useRef(posesCyanFromLeft.map(() => createRef()));
- const whiteFromLeftRef = useRef(posesWhiteFromleft.map(() => createRef()));
+ const [
+ blueFromRightRef,
+ blueFromLeftRef,
+ cyanFromRightRef,
+ cyanFromLeftRef,
+ whiteFromLeftRef,
+ ] = [
+ posesBlueFromRight,
+ posesBlueFromLeft,
+ posesCyanFromRight,
+ posesCyanFromLeft,
+ posesWhiteFromLeft,
+ ].map((poses) => useRef(poses.map(() => createRef())));
useFrame(() => {
blueFromRightRef.current.forEach((ref) => {
@@ -150,14 +123,18 @@ const Starfield = memo((props: StarfieldProps) => {
(ref.current as any).position.x -= 3.3;
(ref.current as any).position.z -= 3.3;
} else {
- (ref.current as any).position.x += 0.03;
- (ref.current as any).position.z += 0.03;
+ (ref.current as any).position.x += 0.02;
+ (ref.current as any).position.z += 0.02;
}
});
});
return (
-
+
{posesBlueFromRight.map((pos: any, idx: number) => {
return (
{
ref={(blueFromLeftRef.current as any)[idx]}
scale={[0.01, 2, 1]}
rotation={[1.7, 0, -0.9]}
- position={[pos[0] - 2.4, pos[1] - 1.5, pos[2]]}
+ position={[pos[0] - 2.4, pos[1] - 0.5, pos[2]]}
key={pos[0]}
renderOrder={-1}
>
@@ -250,12 +227,12 @@ const Starfield = memo((props: StarfieldProps) => {
);
})}
- {posesWhiteFromleft.map((pos: any, idx: number) => {
+ {posesWhiteFromLeft.map((pos: any, idx: number) => {
return (
{
);
})}
-
+
);
});