mirror_maker/lainTSX
1
0
Fork 0
mirror of https://github.com/ad044/lainTSX.git synced 2024-10-22 23:19:06 +00:00
Code Issues Projects Releases Packages Wiki Activity

minor tweaks to intro

Browse source
This commit is contained in:
ad044 2020-09-10 17:07:57 +04:00
parent 85a0461572
commit 3df106d991
4 changed files with 148 additions and 118 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

99
src/components/Game.tsx
View file

@ -64,10 +64,10 @@ type LainAnimations = {
}; };
const Game = () => { const Game = () => {
const [isIntro, setIsIntro] = useState(false); const [isIntro, setIsIntro] = useState(true);
const [isLainMoving, setLainMoving] = useState(false); const [isLainMoving, setLainMoving] = useState(true);
const [lainMoveState, setLainMoveState] = useState(<LainStanding />); const [lainMoveState, setLainMoveState] = useState(<LainIntro />);
const [orthoCameraPosY, setOrthoCameraPosY] = useState(0); const [orthoCameraPosY, setOrthoCameraPosY] = useState(0);
@ -77,6 +77,8 @@ const Game = () => {
); );
const [spriteUpdateCooldown, setSpriteUpdateCooldown] = useState(false); const [spriteUpdateCooldown, setSpriteUpdateCooldown] = useState(false);
const [mainStarfieldVisible, setMainStarfieldVisible] = useState(false);
const [HUDActive, setHUDActive] = useState(1); const [HUDActive, setHUDActive] = useState(1);
const { bigHUDPositionX } = useSpring({ const { bigHUDPositionX } = useSpring({
@ -335,8 +337,6 @@ const Game = () => {
useEffect(() => { useEffect(() => {
window.addEventListener("keydown", handleKeyPress); window.addEventListener("keydown", handleKeyPress);
document.getElementsByTagName("canvas")[0].className = "hub-background";
return () => { return () => {
window.removeEventListener("keydown", handleKeyPress); window.removeEventListener("keydown", handleKeyPress);
document.getElementsByTagName("body")[0].className = ""; document.getElementsByTagName("body")[0].className = "";
@ -347,41 +347,49 @@ const Game = () => {
useFrame(() => { useFrame(() => {
if (isIntro) { if (isIntro) {
if (groupRef.current!.rotation.x > 0) { if (groupRef.current) {
if (groupRef.current!.position.z > -1) { if (groupRef.current!.rotation.x > 0) {
groupRef.current!.rotation.x -= 0.015; if (groupRef.current!.position.z > -1) {
} else { groupRef.current!.rotation.x -= 0.015;
groupRef.current!.rotation.x -= 0.01; } 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) { if (groupRef.current!.position.z < 0) {
groupRef.current!.position.z += 0.04; groupRef.current!.position.z += 0.04;
} }
// if the rotation hits this value that means that the intro is finished. // 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 // using a settimeout or something similar resulted in clunkiness, since it was dependant
// on load times. // on load times.
if (parseFloat(groupRef.current!.rotation.x.toPrecision(2)) === -0.005) { if (
updateHUD(); parseFloat(groupRef.current!.rotation.x.toPrecision(2)) === -0.005
setLainMoving(false); ) {
setLainMoveState(<LainStanding />); setLainMoving(false);
setIsIntro(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 // pos-z ? => 3
// rot-x 1.5 => 0 // rot-x 1.5 => 0
// grp rot/pos both 0,0,0 => ? // grp rot/pos both 0,0,0 => ?
@ -391,8 +399,8 @@ const Game = () => {
position-y={camPosY} position-y={camPosY}
rotation-y={camRotY} 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 /> <Preloader />
<Hub currentSprite={currentSprite} /> <Hub currentSprite={currentSprite} />
<OrthoCamera <OrthoCamera
@ -428,16 +436,21 @@ const Game = () => {
orbVisibility={!isIntro} orbVisibility={!isIntro}
hudVisibility={!isIntro} hudVisibility={!isIntro}
/> />
<Starfield starfieldPosY={starfieldPosY} /> <Starfield
starfieldPosY={starfieldPosY}
mainStarfieldVisible={mainStarfieldVisible}
introStarfieldVisible={isIntro}
/>
<Lights /> <Lights />
<OrbitControls /> <OrbitControls />
</Suspense> </group>
</group>
<Lain <Lain
isLainMoving={isLainMoving} isLainMoving={isLainMoving}
lainMoveState={lainMoveState} lainMoveState={lainMoveState}
lainPosY={lainPosY} lainPosY={lainPosY}
/> />
</Suspense>
</a.perspectiveCamera> </a.perspectiveCamera>
); );
}; };

2
src/components/HUDElement.tsx
View file

@ -18,12 +18,10 @@ export type HUDElementProps = {
longHUDPosX: Interpolation<number, number>; longHUDPosX: Interpolation<number, number>;
longHUDScale: [number, number, number]; longHUDScale: [number, number, number];
// boringHudPosition: [number, number, number];
boringHUDPosX: Interpolation<number, number>; boringHUDPosX: Interpolation<number, number>;
boringHUDPosYZ: [number, number]; boringHUDPosYZ: [number, number];
boringHUDScale: [number, number, number]; boringHUDScale: [number, number, number];
// bigHudPosition: [number, number, number];
bigHUDPosX: Interpolation<number, number>; bigHUDPosX: Interpolation<number, number>;
bigHUDPosYZ: [number, number]; bigHUDPosYZ: [number, number];
bigHUDScale: [number, number, number]; bigHUDScale: [number, number, number];

1
src/components/Hub.tsx
View file

@ -3,6 +3,7 @@ import level_sprites from "../resources/level_sprites.json";
import GrayRing from "./GrayRing"; import GrayRing from "./GrayRing";
import LevelSprite from "./LevelSprite"; import LevelSprite from "./LevelSprite";
import PurpleRing from "./PurpleRing"; import PurpleRing from "./PurpleRing";
import Preloader from "./Preloader";
type HubProps = { type HubProps = {
currentSprite: string; currentSprite: string;

164
src/components/Starfield.tsx
View file

@ -11,6 +11,7 @@ type StarRefsAndIncrementors = [
type StarfieldProps = { type StarfieldProps = {
starfieldPosY: Interpolation<number, number>; starfieldPosY: Interpolation<number, number>;
introStarfieldVisible: boolean; introStarfieldVisible: boolean;
mainStarfieldVisible: boolean;
}; };
type StarfieldObjectData = { type StarfieldObjectData = {
@ -57,6 +58,7 @@ const Starfield = memo((props: StarfieldProps) => {
const fragmentShader = ` const fragmentShader = `
uniform vec3 color1; uniform vec3 color1;
uniform vec3 color2; uniform vec3 color2;
uniform float alpha;
varying vec2 vUv; varying vec2 vUv;
@ -142,14 +144,15 @@ const Starfield = memo((props: StarfieldProps) => {
const fromLeftStarRefsAndIncrementors: StarRefsAndIncrementors = [ const fromLeftStarRefsAndIncrementors: StarRefsAndIncrementors = [
[blueFromLeftRef, 8.3], [blueFromLeftRef, 8.3],
[cyanFromLeftRef, 3.3], [cyanFromLeftRef, 3.7],
[whiteFromLeftRef, 3.3], [whiteFromLeftRef, 3.3],
]; ];
useFrame(() => { useFrame(() => {
if (props.introStarfieldVisible) { if (props.introStarfieldVisible) {
introStarfieldGroupRef.current!.position.y += 0.2; introStarfieldGroupRef.current!.position.y += 0.2;
} else { }
if (props.mainStarfieldVisible) {
// planes (stars) coming from right move to positive X and negative Z direction // planes (stars) coming from right move to positive X and negative Z direction
fromRightStarRefsAndIncrementors.forEach((el) => { fromRightStarRefsAndIncrementors.forEach((el) => {
el[0].current.forEach((posRef: RefObject<THREE.Object3D>) => { el[0].current.forEach((posRef: RefObject<THREE.Object3D>) => {
@ -217,79 +220,94 @@ const Starfield = memo((props: StarfieldProps) => {
]; ];
const introStarfieldObjects = [ const introStarfieldObjects = [
{ starPoses: introPosesBlue, ref: introBlueRef, uniform: blueUniforms }, {
{ starPoses: introPosesCyan, ref: introCyanRef, uniform: cyanUniforms }, starPoses: introPosesBlue,
{ starPoses: introPosesWhite, ref: introWhiteRef, uniform: whiteUniforms }, ref: introBlueRef,
uniform: blueUniforms,
},
{
starPoses: introPosesCyan,
ref: introCyanRef,
uniform: cyanUniforms,
},
{
starPoses: introPosesWhite,
ref: introWhiteRef,
uniform: whiteUniforms,
},
]; ];
return props.introStarfieldVisible ? ( return (
<a.group <>
ref={introStarfieldGroupRef} <a.group
position={[-2, -20, -2]} ref={introStarfieldGroupRef}
rotation={[0, 0, 0]} position={[-2, -20, -2]}
visible={props.introStarfieldVisible} rotation={[0, 0, 0]}
> visible={props.introStarfieldVisible}
{introStarfieldObjects.map((obj: IntroStarfieldObjectData) => >
obj.starPoses.map((pos: number[], idx: number) => { {introStarfieldObjects.map((obj: IntroStarfieldObjectData) =>
return ( obj.starPoses.map((pos: number[], idx: number) => {
<mesh return (
ref={obj.ref.current[idx]} <mesh
scale={[0.01, 2, -0.5]} ref={obj.ref.current[idx]}
position={[pos[0], pos[1], pos[2]]} scale={[0.01, 2, -0.5]}
key={pos[0]} position={[pos[0], pos[1], pos[2]]}
renderOrder={-1} key={pos[0]}
> renderOrder={-1}
<planeGeometry attach="geometry" /> >
<shaderMaterial <planeGeometry attach="geometry" />
attach="material" <shaderMaterial
uniforms={obj.uniform} attach="material"
fragmentShader={fragmentShader} uniforms={obj.uniform}
vertexShader={vertexShader} fragmentShader={fragmentShader}
side={THREE.DoubleSide} vertexShader={vertexShader}
transparent={true} side={THREE.DoubleSide}
depthWrite={false} transparent={true}
/> depthWrite={false}
</mesh> />
); </mesh>
}) );
)} })
</a.group> )}
) : ( </a.group>
<a.group <a.group
position={[-0.7, 0, -5]} position={[-0.7, 0, -5]}
rotation={[0, 0, 0]} rotation={[0, 0, 0]}
position-y={props.starfieldPosY} position-y={props.starfieldPosY}
> visible={props.mainStarfieldVisible}
{mainStarfieldObjects.map((obj: StarfieldObjectData) => >
obj.starPoses.map((pos: number[], idx: number) => { {mainStarfieldObjects.map((obj: StarfieldObjectData) =>
return ( obj.starPoses.map((pos: number[], idx: number) => {
<mesh return (
ref={obj.ref.current[idx]} <mesh
position={[ ref={obj.ref.current[idx]}
pos[0] + obj.positionSpecifier[0], position={[
pos[1] + obj.positionSpecifier[1], pos[0] + obj.positionSpecifier[0],
pos[2] + obj.positionSpecifier[2], pos[1] + obj.positionSpecifier[1],
]} pos[2] + obj.positionSpecifier[2],
rotation={obj.rotation as [number, number, number]} ]}
scale={[0.01, 2, -0.5]} rotation={obj.rotation as [number, number, number]}
renderOrder={-1} scale={[0.01, 2, -0.5]}
key={pos[0]} renderOrder={-1}
> key={pos[0]}
<planeGeometry attach="geometry" /> >
<shaderMaterial <planeGeometry attach="geometry" />
attach="material" <a.shaderMaterial
uniforms={obj.uniform} attach="material"
fragmentShader={fragmentShader} uniforms={obj.uniform}
vertexShader={vertexShader} fragmentShader={fragmentShader}
side={THREE.DoubleSide} vertexShader={vertexShader}
transparent={true} side={THREE.DoubleSide}
depthWrite={false} transparent={true}
/> depthWrite={false}
</mesh> opacity={0.1}
); />
}) </mesh>
)} );
</a.group> })
)}
</a.group>
</>
); );
}); });