mirror of
https://github.com/ad044/lainTSX.git
synced 2024-10-22 23:19:06 +00:00
minor tweaks to intro
This commit is contained in:
parent
85a0461572
commit
3df106d991
4 changed files with 148 additions and 118 deletions
|
@ -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(<LainStanding />);
|
||||
const [isLainMoving, setLainMoving] = useState(true);
|
||||
const [lainMoveState, setLainMoveState] = useState(<LainIntro />);
|
||||
|
||||
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(<LainStanding />);
|
||||
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(<LainStanding />);
|
||||
|
||||
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(<LainIntro />);
|
||||
}, [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}
|
||||
>
|
||||
<group rotation={[2.3, 0, 0]} position={[0, 1.5, -7.5]} ref={groupRef}>
|
||||
<Suspense fallback={null}>
|
||||
<Suspense fallback={null}>
|
||||
<group rotation={[2.3, 0, 0]} position={[0, 1.5, -7.5]} ref={groupRef}>
|
||||
<Preloader />
|
||||
<Hub currentSprite={currentSprite} />
|
||||
<OrthoCamera
|
||||
|
@ -428,16 +436,21 @@ const Game = () => {
|
|||
orbVisibility={!isIntro}
|
||||
hudVisibility={!isIntro}
|
||||
/>
|
||||
<Starfield starfieldPosY={starfieldPosY} />
|
||||
<Starfield
|
||||
starfieldPosY={starfieldPosY}
|
||||
mainStarfieldVisible={mainStarfieldVisible}
|
||||
introStarfieldVisible={isIntro}
|
||||
/>
|
||||
<Lights />
|
||||
<OrbitControls />
|
||||
</Suspense>
|
||||
</group>
|
||||
<Lain
|
||||
isLainMoving={isLainMoving}
|
||||
lainMoveState={lainMoveState}
|
||||
lainPosY={lainPosY}
|
||||
/>
|
||||
</group>
|
||||
|
||||
<Lain
|
||||
isLainMoving={isLainMoving}
|
||||
lainMoveState={lainMoveState}
|
||||
lainPosY={lainPosY}
|
||||
/>
|
||||
</Suspense>
|
||||
</a.perspectiveCamera>
|
||||
);
|
||||
};
|
||||
|
|
|
@ -18,12 +18,10 @@ export type HUDElementProps = {
|
|||
longHUDPosX: Interpolation<number, number>;
|
||||
longHUDScale: [number, number, number];
|
||||
|
||||
// boringHudPosition: [number, number, number];
|
||||
boringHUDPosX: Interpolation<number, number>;
|
||||
boringHUDPosYZ: [number, number];
|
||||
boringHUDScale: [number, number, number];
|
||||
|
||||
// bigHudPosition: [number, number, number];
|
||||
bigHUDPosX: Interpolation<number, number>;
|
||||
bigHUDPosYZ: [number, number];
|
||||
bigHUDScale: [number, number, number];
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -11,6 +11,7 @@ type StarRefsAndIncrementors = [
|
|||
type StarfieldProps = {
|
||||
starfieldPosY: Interpolation<number, number>;
|
||||
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<THREE.Object3D>) => {
|
||||
|
@ -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 ? (
|
||||
<a.group
|
||||
ref={introStarfieldGroupRef}
|
||||
position={[-2, -20, -2]}
|
||||
rotation={[0, 0, 0]}
|
||||
visible={props.introStarfieldVisible}
|
||||
>
|
||||
{introStarfieldObjects.map((obj: IntroStarfieldObjectData) =>
|
||||
obj.starPoses.map((pos: number[], idx: number) => {
|
||||
return (
|
||||
<mesh
|
||||
ref={obj.ref.current[idx]}
|
||||
scale={[0.01, 2, -0.5]}
|
||||
position={[pos[0], pos[1], pos[2]]}
|
||||
key={pos[0]}
|
||||
renderOrder={-1}
|
||||
>
|
||||
<planeGeometry attach="geometry" />
|
||||
<shaderMaterial
|
||||
attach="material"
|
||||
uniforms={obj.uniform}
|
||||
fragmentShader={fragmentShader}
|
||||
vertexShader={vertexShader}
|
||||
side={THREE.DoubleSide}
|
||||
transparent={true}
|
||||
depthWrite={false}
|
||||
/>
|
||||
</mesh>
|
||||
);
|
||||
})
|
||||
)}
|
||||
</a.group>
|
||||
) : (
|
||||
<a.group
|
||||
position={[-0.7, 0, -5]}
|
||||
rotation={[0, 0, 0]}
|
||||
position-y={props.starfieldPosY}
|
||||
>
|
||||
{mainStarfieldObjects.map((obj: StarfieldObjectData) =>
|
||||
obj.starPoses.map((pos: number[], idx: number) => {
|
||||
return (
|
||||
<mesh
|
||||
ref={obj.ref.current[idx]}
|
||||
position={[
|
||||
pos[0] + obj.positionSpecifier[0],
|
||||
pos[1] + obj.positionSpecifier[1],
|
||||
pos[2] + obj.positionSpecifier[2],
|
||||
]}
|
||||
rotation={obj.rotation as [number, number, number]}
|
||||
scale={[0.01, 2, -0.5]}
|
||||
renderOrder={-1}
|
||||
key={pos[0]}
|
||||
>
|
||||
<planeGeometry attach="geometry" />
|
||||
<shaderMaterial
|
||||
attach="material"
|
||||
uniforms={obj.uniform}
|
||||
fragmentShader={fragmentShader}
|
||||
vertexShader={vertexShader}
|
||||
side={THREE.DoubleSide}
|
||||
transparent={true}
|
||||
depthWrite={false}
|
||||
/>
|
||||
</mesh>
|
||||
);
|
||||
})
|
||||
)}
|
||||
</a.group>
|
||||
return (
|
||||
<>
|
||||
<a.group
|
||||
ref={introStarfieldGroupRef}
|
||||
position={[-2, -20, -2]}
|
||||
rotation={[0, 0, 0]}
|
||||
visible={props.introStarfieldVisible}
|
||||
>
|
||||
{introStarfieldObjects.map((obj: IntroStarfieldObjectData) =>
|
||||
obj.starPoses.map((pos: number[], idx: number) => {
|
||||
return (
|
||||
<mesh
|
||||
ref={obj.ref.current[idx]}
|
||||
scale={[0.01, 2, -0.5]}
|
||||
position={[pos[0], pos[1], pos[2]]}
|
||||
key={pos[0]}
|
||||
renderOrder={-1}
|
||||
>
|
||||
<planeGeometry attach="geometry" />
|
||||
<shaderMaterial
|
||||
attach="material"
|
||||
uniforms={obj.uniform}
|
||||
fragmentShader={fragmentShader}
|
||||
vertexShader={vertexShader}
|
||||
side={THREE.DoubleSide}
|
||||
transparent={true}
|
||||
depthWrite={false}
|
||||
/>
|
||||
</mesh>
|
||||
);
|
||||
})
|
||||
)}
|
||||
</a.group>
|
||||
<a.group
|
||||
position={[-0.7, 0, -5]}
|
||||
rotation={[0, 0, 0]}
|
||||
position-y={props.starfieldPosY}
|
||||
visible={props.mainStarfieldVisible}
|
||||
>
|
||||
{mainStarfieldObjects.map((obj: StarfieldObjectData) =>
|
||||
obj.starPoses.map((pos: number[], idx: number) => {
|
||||
return (
|
||||
<mesh
|
||||
ref={obj.ref.current[idx]}
|
||||
position={[
|
||||
pos[0] + obj.positionSpecifier[0],
|
||||
pos[1] + obj.positionSpecifier[1],
|
||||
pos[2] + obj.positionSpecifier[2],
|
||||
]}
|
||||
rotation={obj.rotation as [number, number, number]}
|
||||
scale={[0.01, 2, -0.5]}
|
||||
renderOrder={-1}
|
||||
key={pos[0]}
|
||||
>
|
||||
<planeGeometry attach="geometry" />
|
||||
<a.shaderMaterial
|
||||
attach="material"
|
||||
uniforms={obj.uniform}
|
||||
fragmentShader={fragmentShader}
|
||||
vertexShader={vertexShader}
|
||||
side={THREE.DoubleSide}
|
||||
transparent={true}
|
||||
depthWrite={false}
|
||||
opacity={0.1}
|
||||
/>
|
||||
</mesh>
|
||||
);
|
||||
})
|
||||
)}
|
||||
</a.group>
|
||||
</>
|
||||
);
|
||||
});
|
||||
|
||||
|
|
Loading…
Reference in a new issue