diff --git a/.gitignore b/.gitignore index 4d29575..e56ab53 100644 --- a/.gitignore +++ b/.gitignore @@ -21,3 +21,6 @@ npm-debug.log* yarn-debug.log* yarn-error.log* + +.idea + diff --git a/src/App.tsx b/src/App.tsx index b644d20..9eb6d58 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -2,6 +2,7 @@ import React, { useEffect, useState } from "react"; import Game from "./components/Game"; import "./static/css/hub.css"; import "./static/css/main.css"; +import { Canvas } from "react-three-fiber"; const App = () => { const [moveToGame, setMoveToGame] = useState(false); @@ -18,7 +19,9 @@ const App = () => {
{/* {moveToGame ? : } */} {/* */} - + + +
); }; diff --git a/src/components/Game.tsx b/src/components/Game.tsx index 90dba43..bbe2824 100644 --- a/src/components/Game.tsx +++ b/src/components/Game.tsx @@ -1,7 +1,13 @@ import { a, useSpring } from "@react-spring/three"; import { OrbitControls } from "drei"; -import React, { Suspense, useCallback, useEffect, useState } from "react"; -import { Canvas } from "react-three-fiber"; +import React, { + Suspense, + useCallback, + useEffect, + useRef, + useState, +} from "react"; +import { useFrame } from "react-three-fiber"; import lain_animations from "../resources/lain_animations.json"; import level_sprite_directions from "../resources/level_sprite_directions.json"; import level_sprite_huds from "../resources/level_sprite_huds.json"; @@ -12,11 +18,13 @@ import Lain, { LainMoveRight, LainMoveUp, LainStanding, + LainIntro, } from "./Lain"; import Lights from "./Lights"; import OrthoCamera from "./OrthoCamera"; import Preloader from "./Preloader"; import Starfield from "./Starfield"; +import * as THREE from "three"; type KeyCodeAssociations = { [keyCode: number]: string; @@ -36,12 +44,14 @@ type LainAnimations = { }; const Game = () => { + const [isIntro, setIsIntro] = useState(true); + const [isLainMoving, setLainMoving] = useState(false); const [lainMoveState, setLainMoveState] = useState(); const [orthoCameraPosY, setOrthoCameraPosY] = useState(0); - const [currentSprite, setCurrentSprite] = useState("0506"); + const [currentSprite, setCurrentSprite] = useState("0422"); const [currentSpriteHUD, setCurrentSpriteHUD] = useState( (level_sprite_huds as SpriteHuds)[currentSprite.substr(2)] ); @@ -169,8 +179,8 @@ const Game = () => { (key: string) => { switch (key) { case "down": - moveCamera(0.3); - moveLain(-0.3); + moveCamera(0.6); + moveLain(-0.6); setLainMoveState(); break; case "left": @@ -290,21 +300,51 @@ const Game = () => { }; }, [handleKeyPress]); + const groupRef = useRef(); + + useFrame(() => { + if (isIntro) { + if ((groupRef.current as any).rotation.x > 0) { + if ((groupRef.current as any).position.z > -1) { + (groupRef.current as any).rotation.x -= 0.015; + } else { + (groupRef.current as any).rotation.x -= 0.01; + } + } + if ((groupRef.current as any).position.y > 0) { + (groupRef.current as any).position.y -= 0.015; + } + if ((groupRef.current as any).position.z < 0) { + (groupRef.current as any).position.z += 0.04; + } + } + }); + + useEffect(() => { + setLainMoving(true); + setLainMoveState(); + updateHUD(); + setTimeout(() => { + setLainMoving(false); + setLainMoveState(); + setIsIntro(false); + updateHUD(); + }, (lain_animations as LainAnimations)["intro"]["duration"]); + }, [updateHUD]); + + // pos-z ? => 3 + // rot-x 1.5 => 0 + // grp rot/pos both 0,0,0 => ? return ( - - + + - { bigHUDScale={currentSpriteHUD!["big"]["scale"]} orthoCameraPosY={orthoCameraPosY} id={currentSpriteHUD!["id"]} + orbVisibility={!isIntro} /> - - - + + + ); }; export default Game; diff --git a/src/components/Lain.tsx b/src/components/Lain.tsx index 12e81f1..96cd312 100644 --- a/src/components/Lain.tsx +++ b/src/components/Lain.tsx @@ -8,6 +8,7 @@ import moveUpSpriteSheet from "../static/sprites/jump_up.png"; import moveLeftSpriteSheet from "../static/sprites/move_left.png"; import moveRightSpriteSheet from "../static/sprites/move_right.png"; import standingSpriteSheet from "../static/sprites/standing.png"; +import introSpriteSheet from "../static/sprites/intro.png"; type LainProps = { isLainMoving: boolean; @@ -47,10 +48,10 @@ const LainConstructor = (props: LainConstructorProps) => { export const LainIntro = () => { return ( ); }; diff --git a/src/components/Orb.tsx b/src/components/Orb.tsx index 3ef24dd..2368020 100644 --- a/src/components/Orb.tsx +++ b/src/components/Orb.tsx @@ -7,7 +7,11 @@ import orbSprite from "../static/sprites/orb.png"; let orbIdx = 0; let orbDirectionChangeCount = 0; -const Orb = memo(() => { +type OrbProps = { + orbVisibility: boolean; +}; + +const Orb = memo((props: OrbProps) => { const orbRef = useRef(); const [orbDirection, setOrbDirection] = useState("left"); const [currentCurve, setCurrentCurve] = useState("first"); @@ -29,79 +33,81 @@ const Orb = memo(() => { ); useFrame(() => { - let orbPosFirst = firstCurve.getPoint(orbIdx / 250); - let orbPosSecond = secondCurve.getPoint(orbIdx / 250); + if (props.orbVisibility) { + let orbPosFirst = firstCurve.getPoint(orbIdx / 250); + let orbPosSecond = secondCurve.getPoint(orbIdx / 250); - if (orbPosFirst.x < -1.4) { - switch (currentCurve) { - case "first": - setOrbDirection("right"); - break; - case "second": - setOrbDirection("left"); - break; + if (orbPosFirst.x < -1.4) { + switch (currentCurve) { + case "first": + setOrbDirection("right"); + break; + case "second": + setOrbDirection("left"); + break; + } + orbDirectionChangeCount++; } - orbDirectionChangeCount++; - } - if (orbPosFirst.x > 1.4) { - switch (currentCurve) { - case "first": - setOrbDirection("left"); - break; - case "second": - setOrbDirection("right"); - break; + if (orbPosFirst.x > 1.4) { + switch (currentCurve) { + case "first": + setOrbDirection("left"); + break; + case "second": + setOrbDirection("right"); + break; + } + orbDirectionChangeCount++; } - orbDirectionChangeCount++; - } - if (orbDirection === "left") { - switch (currentCurve) { - case "first": - orbIdx++; - break; - case "second": - orbIdx--; - break; + if (orbDirection === "left") { + switch (currentCurve) { + case "first": + orbIdx++; + break; + case "second": + orbIdx--; + break; + } + } else { + switch (currentCurve) { + case "first": + orbIdx--; + break; + case "second": + orbIdx++; + break; + } } - } else { - switch (currentCurve) { - case "first": - orbIdx--; - break; - case "second": - orbIdx++; - break; - } - } - if (orbDirectionChangeCount % 6 === 0 && orbDirectionChangeCount !== 0) { - orbDirectionChangeCount = 0; - switch (currentCurve) { - case "first": - orbIdx = 250; - setCurrentCurve("second"); - break; - case "second": - orbIdx = 0; - setCurrentCurve("first"); - break; + if (orbDirectionChangeCount % 6 === 0 && orbDirectionChangeCount !== 0) { + orbDirectionChangeCount = 0; + switch (currentCurve) { + case "first": + orbIdx = 250; + setCurrentCurve("second"); + break; + case "second": + orbIdx = 0; + setCurrentCurve("first"); + break; + } + setOrbDirection("left"); } - setOrbDirection("left"); - } - if (currentCurve === "first") { - (orbRef.current as any).position.x = orbPosFirst.x; - (orbRef.current as any).position.y = orbPosFirst.y; - } else { - (orbRef.current as any).position.x = orbPosSecond.x; - (orbRef.current as any).position.y = orbPosSecond.y; + if (currentCurve === "first") { + (orbRef.current as any).position.x = orbPosFirst.x; + (orbRef.current as any).position.y = orbPosFirst.y; + } else { + (orbRef.current as any).position.x = orbPosSecond.x; + (orbRef.current as any).position.y = orbPosSecond.y; + } } }); return ( - + diff --git a/src/components/OrthoCamera.tsx b/src/components/OrthoCamera.tsx index 0a11bad..600c6a5 100644 --- a/src/components/OrthoCamera.tsx +++ b/src/components/OrthoCamera.tsx @@ -7,6 +7,7 @@ import Orb from "./Orb"; interface OrthoCameraProps extends HUDElementProps { id: string; orthoCameraPosY: number; + orbVisibility:boolean; } const OrthoCamera = (props: OrthoCameraProps) => { @@ -43,7 +44,7 @@ const OrthoCamera = (props: OrthoCameraProps) => { bigHUDScale={props.bigHUDScale} key={props.id} /> - + ); }; diff --git a/src/components/PurpleRing.tsx b/src/components/PurpleRing.tsx index b18c9ad..87518fa 100644 --- a/src/components/PurpleRing.tsx +++ b/src/components/PurpleRing.tsx @@ -1,6 +1,5 @@ -import { a, useSpring } from "@react-spring/three"; import { draco } from "drei"; -import React, { memo } from "react"; +import React, { memo, useRef } from "react"; import { useFrame, useLoader } from "react-three-fiber"; import * as THREE from "three"; import { GLTF, GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader"; @@ -17,13 +16,7 @@ type GLTFResult = GLTF & { }; const PurpleRing = memo((props: PurpleRingProps) => { - const [{ purpleRingRotationY }, setPurpleRingRotationY] = useSpring( - () => ({ - purpleRingRotationY: 0, - config: { precision: 0.0001, duration: 1200 }, - }), - [] - ); + const purpleRingRef = useRef(); const { nodes } = useLoader( GLTFLoader, @@ -32,18 +25,14 @@ const PurpleRing = memo((props: PurpleRingProps) => { ); useFrame(() => { - setPurpleRingRotationY(() => ({ - purpleRingRotationY: purpleRingRotationY.get() + 0.15, - })); + (purpleRingRef.current as any).rotation.y += 0.01; }); - const purpleRingRotY = purpleRingRotationY.to([0, 1], [0, Math.PI]); - return ( - { side={THREE.DoubleSide} /> - + ); }); diff --git a/src/components/Starfield.tsx b/src/components/Starfield.tsx index 710f098..68729c0 100644 --- a/src/components/Starfield.tsx +++ b/src/components/Starfield.tsx @@ -157,7 +157,7 @@ const Starfield = memo((props: StarfieldProps) => { }); return ( - + {posesBlueFromRight.map((pos: any, idx: number) => { return (