mirror of
https://github.com/ad044/lainTSX.git
synced 2024-10-22 23:19:06 +00:00
working on the exit animation. i am tired.
This commit is contained in:
parent
e1813e83e0
commit
3dabc1a70f
10 changed files with 132 additions and 46 deletions
|
@ -4,8 +4,9 @@ import PauseSquare from "./PauseSquare";
|
||||||
import StaticBigLetter from "../TextRenderer/StaticBigLetter";
|
import StaticBigLetter from "../TextRenderer/StaticBigLetter";
|
||||||
import { usePauseStore } from "../../store";
|
import { usePauseStore } from "../../store";
|
||||||
|
|
||||||
const Pause = () => {
|
const Pause = (props: { visible: boolean }) => {
|
||||||
const [intro, setIntro] = useState(true);
|
const [intro, setIntro] = useState(true);
|
||||||
|
const [animation, setAnimation] = useState(false);
|
||||||
|
|
||||||
const componentMatrixIdx = usePauseStore((state) => state.componentMatrixIdx);
|
const componentMatrixIdx = usePauseStore((state) => state.componentMatrixIdx);
|
||||||
const activeComponent = usePauseStore(
|
const activeComponent = usePauseStore(
|
||||||
|
@ -39,11 +40,17 @@ const Pause = () => {
|
||||||
);
|
);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
setTimeout(() => {
|
if (props.visible) {
|
||||||
setIntro(false);
|
setTimeout(() => {
|
||||||
}, 2000);
|
setAnimation(true);
|
||||||
}, []);
|
}, 1000);
|
||||||
return (
|
setTimeout(() => {
|
||||||
|
setIntro(false);
|
||||||
|
}, 3000);
|
||||||
|
}
|
||||||
|
}, [props.visible]);
|
||||||
|
|
||||||
|
return animation ? (
|
||||||
<group position={[-1, -0.8, 0]} scale={[0.9, 0.9, 0]}>
|
<group position={[-1, -0.8, 0]} scale={[0.9, 0.9, 0]}>
|
||||||
{[0, 1, 2, 3, 2, 1, 0].map((row: number, rowIdx: number) =>
|
{[0, 1, 2, 3, 2, 1, 0].map((row: number, rowIdx: number) =>
|
||||||
[0, 1, 2, 3, 4, 5, 6].map((col: number) => {
|
[0, 1, 2, 3, 4, 5, 6].map((col: number) => {
|
||||||
|
@ -275,6 +282,8 @@ const Pause = () => {
|
||||||
/>
|
/>
|
||||||
))}
|
))}
|
||||||
</group>
|
</group>
|
||||||
|
) : (
|
||||||
|
<></>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
|
@ -1,9 +1,10 @@
|
||||||
import React, { useEffect, useMemo, useState } from "react";
|
import React, { useCallback, useEffect, useMemo, useState } from "react";
|
||||||
import * as THREE from "three";
|
import * as THREE from "three";
|
||||||
import { useLoader } from "react-three-fiber";
|
import { useLoader } from "react-three-fiber";
|
||||||
import pauseGrayBoxes from "../../static/sprite/pause_gray_boxes.png";
|
import pauseGrayBoxes from "../../static/sprite/pause_gray_boxes.png";
|
||||||
import { a, useSpring } from "@react-spring/three";
|
import { a, useSpring } from "@react-spring/three";
|
||||||
import { CurveUtils } from "three";
|
import { CurveUtils } from "three";
|
||||||
|
import { usePauseStore } from "../../store";
|
||||||
|
|
||||||
type PauseSquareProps = {
|
type PauseSquareProps = {
|
||||||
colIdx: number;
|
colIdx: number;
|
||||||
|
@ -14,6 +15,8 @@ type PauseSquareProps = {
|
||||||
};
|
};
|
||||||
|
|
||||||
const PauseSquare = (props: PauseSquareProps) => {
|
const PauseSquare = (props: PauseSquareProps) => {
|
||||||
|
const exitAnimation = usePauseStore((state) => state.exitAnimation);
|
||||||
|
|
||||||
const grayBoxesTex = useLoader(THREE.TextureLoader, pauseGrayBoxes);
|
const grayBoxesTex = useLoader(THREE.TextureLoader, pauseGrayBoxes);
|
||||||
|
|
||||||
const [intro, setIntro] = useState(true);
|
const [intro, setIntro] = useState(true);
|
||||||
|
@ -29,8 +32,8 @@ const PauseSquare = (props: PauseSquareProps) => {
|
||||||
config: { duration: 200 },
|
config: { duration: 200 },
|
||||||
});
|
});
|
||||||
|
|
||||||
const rotX = toggle.to([0, 1], [-Math.PI, 0]);
|
const rotX = toggle.to([0, 1], [-Math.PI, exitAnimation ? 2.2 : 0]);
|
||||||
const rotY = toggle.to([0, 1], [Math.PI / 2, 0]);
|
const rotY = toggle.to([0, 1], [Math.PI / 2, exitAnimation ? 2.2 : 0]);
|
||||||
|
|
||||||
const introRotX = introToggle.to([0, 1], [Math.PI, 0]);
|
const introRotX = introToggle.to([0, 1], [Math.PI, 0]);
|
||||||
const introRotY = introToggle.to(
|
const introRotY = introToggle.to(
|
||||||
|
@ -50,9 +53,22 @@ const PauseSquare = (props: PauseSquareProps) => {
|
||||||
}, 500);
|
}, 500);
|
||||||
}, [props.colIdx, props.rowIdx]);
|
}, [props.colIdx, props.rowIdx]);
|
||||||
|
|
||||||
|
const getExitAnimValue = useMemo(() => {
|
||||||
|
let col, row;
|
||||||
|
if (props.colIdx < 3) col = -1;
|
||||||
|
else if (props.colIdx > 3) col = 1;
|
||||||
|
else col = 0;
|
||||||
|
|
||||||
|
if (props.rowIdx < 3) row = -1;
|
||||||
|
else if (props.rowIdx > 3) row = 1;
|
||||||
|
else row = 0;
|
||||||
|
|
||||||
|
return { row, col };
|
||||||
|
}, [props.colIdx, props.rowIdx]);
|
||||||
|
|
||||||
const initialState = useSpring({
|
const initialState = useSpring({
|
||||||
posX: props.colIdx / 2.8,
|
posX: props.colIdx / 2.8 + getExitAnimValue.col * (exitAnimation ? 2.2 : 0),
|
||||||
posY: props.rowIdx / 2.8,
|
posY: props.rowIdx / 2.8 + getExitAnimValue.row * (exitAnimation ? 2.2 : 0),
|
||||||
rotZ: 0,
|
rotZ: 0,
|
||||||
from: { posX: 1.05, posY: 1.07, rotZ: -1 },
|
from: { posX: 1.05, posY: 1.07, rotZ: -1 },
|
||||||
config: { duration: 500 },
|
config: { duration: 500 },
|
||||||
|
|
|
@ -6,6 +6,7 @@ import { useLoader } from "react-three-fiber";
|
||||||
import orange_font_json from "../../resources/font_data/big_font.json";
|
import orange_font_json from "../../resources/font_data/big_font.json";
|
||||||
import { a, useSpring } from "@react-spring/three";
|
import { a, useSpring } from "@react-spring/three";
|
||||||
import React, { useEffect, useMemo, useState } from "react";
|
import React, { useEffect, useMemo, useState } from "react";
|
||||||
|
import { usePauseStore } from "../../store";
|
||||||
|
|
||||||
const StaticBigLetter = (props: {
|
const StaticBigLetter = (props: {
|
||||||
color: string;
|
color: string;
|
||||||
|
@ -17,24 +18,7 @@ const StaticBigLetter = (props: {
|
||||||
rowIdx?: number;
|
rowIdx?: number;
|
||||||
colIdx?: number;
|
colIdx?: number;
|
||||||
}) => {
|
}) => {
|
||||||
const { toggle } = useSpring({
|
const exitAnimation = usePauseStore((state) => state.exitAnimation);
|
||||||
toggle: Number(props.active),
|
|
||||||
config: { duration: 200 },
|
|
||||||
});
|
|
||||||
|
|
||||||
const rotX = toggle.to([0, 1], [-Math.PI, 0]);
|
|
||||||
const rotY = toggle.to([0, 1], [Math.PI / 2, 0]);
|
|
||||||
|
|
||||||
const [intro, setIntro] = useState<boolean>(!!(props.rowIdx && props.colIdx));
|
|
||||||
const [introAnimToggle, setIntroAnimToggle] = useState(false);
|
|
||||||
|
|
||||||
const { introToggle } = useSpring({
|
|
||||||
introToggle: Number(introAnimToggle),
|
|
||||||
config: { duration: 200 },
|
|
||||||
});
|
|
||||||
|
|
||||||
const introRotX = introToggle.to([0, 1], [Math.PI, 0]);
|
|
||||||
const introRotY = introToggle.to([0, 1], [Math.PI * 2, 0]);
|
|
||||||
|
|
||||||
const colorToTexture = (color: string) => {
|
const colorToTexture = (color: string) => {
|
||||||
const colorTexture = {
|
const colorTexture = {
|
||||||
|
@ -112,6 +96,39 @@ const StaticBigLetter = (props: {
|
||||||
return geometry;
|
return geometry;
|
||||||
}, [letterData, lineYOffsets, props.letter]);
|
}, [letterData, lineYOffsets, props.letter]);
|
||||||
|
|
||||||
|
const { toggle } = useSpring({
|
||||||
|
toggle: Number(props.active),
|
||||||
|
config: { duration: 200 },
|
||||||
|
});
|
||||||
|
|
||||||
|
const getExitAnimValue = useMemo(() => {
|
||||||
|
let col = 0;
|
||||||
|
let row = 0;
|
||||||
|
if (props.colIdx && props.rowIdx) {
|
||||||
|
if (props.colIdx < 3) col = -1;
|
||||||
|
else if (props.colIdx > 3) col = 1;
|
||||||
|
|
||||||
|
if (props.rowIdx < 3) row = -1;
|
||||||
|
else if (props.rowIdx > 3) row = 1;
|
||||||
|
|
||||||
|
return { row, col };
|
||||||
|
}
|
||||||
|
}, [props.colIdx, props.rowIdx]);
|
||||||
|
|
||||||
|
const rotX = toggle.to([0, 1], [-Math.PI, 0 + (exitAnimation ? 2.2 : 0)]);
|
||||||
|
const rotY = toggle.to([0, 1], [Math.PI / 2, 0 + (exitAnimation ? 2.2 : 0)]);
|
||||||
|
|
||||||
|
const [intro, setIntro] = useState<boolean>(!!(props.rowIdx && props.colIdx));
|
||||||
|
const [introAnimToggle, setIntroAnimToggle] = useState(false);
|
||||||
|
|
||||||
|
const { introToggle } = useSpring({
|
||||||
|
introToggle: Number(introAnimToggle),
|
||||||
|
config: { duration: 200 },
|
||||||
|
});
|
||||||
|
|
||||||
|
const introRotX = introToggle.to([0, 1], [Math.PI, 0]);
|
||||||
|
const introRotY = introToggle.to([0, 1], [Math.PI * 2, 0]);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
if (props.rowIdx && props.colIdx) {
|
if (props.rowIdx && props.colIdx) {
|
||||||
|
@ -126,6 +143,17 @@ const StaticBigLetter = (props: {
|
||||||
}, 500);
|
}, 500);
|
||||||
}, [props.colIdx, props.rowIdx]);
|
}, [props.colIdx, props.rowIdx]);
|
||||||
|
|
||||||
|
const initialState = useSpring({
|
||||||
|
posX:
|
||||||
|
props.position[0] +
|
||||||
|
(getExitAnimValue ? getExitAnimValue.col * (exitAnimation ? 2.2 : 0) : 0),
|
||||||
|
posY:
|
||||||
|
-letterData[4] / 50 +
|
||||||
|
props.position[1] +
|
||||||
|
(getExitAnimValue ? getExitAnimValue.row * (exitAnimation ? 2.2 : 0) : 0),
|
||||||
|
config: { duration: 800 },
|
||||||
|
});
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<a.mesh
|
<a.mesh
|
||||||
position={[
|
position={[
|
||||||
|
@ -133,6 +161,8 @@ const StaticBigLetter = (props: {
|
||||||
-letterData[4] / 50 + props.position[1],
|
-letterData[4] / 50 + props.position[1],
|
||||||
props.position[2],
|
props.position[2],
|
||||||
]}
|
]}
|
||||||
|
position-x={initialState.posX}
|
||||||
|
position-y={initialState.posY}
|
||||||
scale={props.scale as [number, number, number]}
|
scale={props.scale as [number, number, number]}
|
||||||
geometry={geom}
|
geometry={geom}
|
||||||
rotation-x={intro ? introRotX : rotX}
|
rotation-x={intro ? introRotX : rotX}
|
||||||
|
|
|
@ -65,6 +65,11 @@ const EventManager = () => {
|
||||||
(state) => state.selectedLevelIdx
|
(state) => state.selectedLevelIdx
|
||||||
);
|
);
|
||||||
const pauseMatrixIdx = usePauseStore((state) => state.componentMatrixIdx);
|
const pauseMatrixIdx = usePauseStore((state) => state.componentMatrixIdx);
|
||||||
|
const activePauseComponent = usePauseStore(
|
||||||
|
useCallback((state) => state.componentMatrix[pauseMatrixIdx], [
|
||||||
|
pauseMatrixIdx,
|
||||||
|
])
|
||||||
|
);
|
||||||
|
|
||||||
// media scene
|
// media scene
|
||||||
const mediaComponentMatrixIndices = useMediaStore(
|
const mediaComponentMatrixIndices = useMediaStore(
|
||||||
|
@ -146,6 +151,7 @@ const EventManager = () => {
|
||||||
activeLevel: activeLevel,
|
activeLevel: activeLevel,
|
||||||
levelSelectionIdx: levelSelectionIdx,
|
levelSelectionIdx: levelSelectionIdx,
|
||||||
pauseMatrixIdx: pauseMatrixIdx,
|
pauseMatrixIdx: pauseMatrixIdx,
|
||||||
|
activePauseComponent: activePauseComponent,
|
||||||
});
|
});
|
||||||
break;
|
break;
|
||||||
case "media":
|
case "media":
|
||||||
|
|
|
@ -6,6 +6,7 @@ const PauseComponentManager = (props: StateManagerProps) => {
|
||||||
const setComponentMatrixIdx = usePauseStore(
|
const setComponentMatrixIdx = usePauseStore(
|
||||||
(state) => state.setComponentMatrixIdx
|
(state) => state.setComponentMatrixIdx
|
||||||
);
|
);
|
||||||
|
const setExitAnimation = usePauseStore((state) => state.setExitAnimation);
|
||||||
|
|
||||||
const dispatchObject = useCallback(
|
const dispatchObject = useCallback(
|
||||||
(event: string, newComponentMatrixIdx: number) => {
|
(event: string, newComponentMatrixIdx: number) => {
|
||||||
|
@ -16,9 +17,14 @@ const PauseComponentManager = (props: StateManagerProps) => {
|
||||||
action: setComponentMatrixIdx,
|
action: setComponentMatrixIdx,
|
||||||
value: newComponentMatrixIdx,
|
value: newComponentMatrixIdx,
|
||||||
};
|
};
|
||||||
|
case "pause_exit_select":
|
||||||
|
return {
|
||||||
|
action: setExitAnimation,
|
||||||
|
value: true,
|
||||||
|
};
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
[setComponentMatrixIdx]
|
[setComponentMatrixIdx, setExitAnimation]
|
||||||
);
|
);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
|
|
|
@ -30,6 +30,12 @@ const SiteManager = (props: StateManagerProps) => {
|
||||||
value: [Math.PI / 2, "rotX"],
|
value: [Math.PI / 2, "rotX"],
|
||||||
actionDelay: 0,
|
actionDelay: 0,
|
||||||
};
|
};
|
||||||
|
case "pause_exit_select":
|
||||||
|
return {
|
||||||
|
action: setTransformState,
|
||||||
|
value: [0, "rotX"],
|
||||||
|
actionDelay: 0,
|
||||||
|
};
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
[setTransformState]
|
[setTransformState]
|
||||||
|
|
|
@ -26,6 +26,11 @@ const SubsceneManager = (props: StateManagerProps) => {
|
||||||
action: setMainSubscene,
|
action: setMainSubscene,
|
||||||
value: "pause",
|
value: "pause",
|
||||||
};
|
};
|
||||||
|
case "pause_exit_select":
|
||||||
|
return {
|
||||||
|
action: setMainSubscene,
|
||||||
|
value: "site",
|
||||||
|
};
|
||||||
case "authorize_user_back":
|
case "authorize_user_back":
|
||||||
case "load_data_no_select":
|
case "load_data_no_select":
|
||||||
return {
|
return {
|
||||||
|
|
|
@ -24,6 +24,7 @@ const handleMainSceneEvent = (gameContext: any) => {
|
||||||
const subscene = gameContext.mainSubscene;
|
const subscene = gameContext.mainSubscene;
|
||||||
const levelSelectionIdx = gameContext.levelSelectionIdx;
|
const levelSelectionIdx = gameContext.levelSelectionIdx;
|
||||||
const pauseMatrixIdx = gameContext.pauseMatrixIdx;
|
const pauseMatrixIdx = gameContext.pauseMatrixIdx;
|
||||||
|
const activePauseComponent = gameContext.activePauseComponent;
|
||||||
|
|
||||||
const nodeColIdx = gameContext.nodeMatrixIndices.colIdx;
|
const nodeColIdx = gameContext.nodeMatrixIndices.colIdx;
|
||||||
const nodeRowIdx = gameContext.nodeMatrixIndices.rowIdx;
|
const nodeRowIdx = gameContext.nodeMatrixIndices.rowIdx;
|
||||||
|
@ -213,6 +214,10 @@ const handleMainSceneEvent = (gameContext: any) => {
|
||||||
event: "pause_down",
|
event: "pause_down",
|
||||||
newPauseMatrixIdx: pauseMatrixIdx + 1,
|
newPauseMatrixIdx: pauseMatrixIdx + 1,
|
||||||
};
|
};
|
||||||
|
case "CIRCLE":
|
||||||
|
return {
|
||||||
|
event: `pause_${activePauseComponent}_select`,
|
||||||
|
};
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
|
@ -35,23 +35,23 @@ const MainScene = () => {
|
||||||
<Suspense fallback={null}>
|
<Suspense fallback={null}>
|
||||||
<MainSceneIntro />
|
<MainSceneIntro />
|
||||||
<a.group>
|
<a.group>
|
||||||
{/*<Preloader />*/}
|
<Preloader />
|
||||||
{/*<Site />*/}
|
<Site />
|
||||||
{/*<ActiveLevelNodes />*/}
|
<ActiveLevelNodes />
|
||||||
{/*<HUD visible={!isPaused} />*/}
|
<HUD visible={!isPaused} />
|
||||||
{/*<GreenTextRenderer visible={!isPaused} />*/}
|
<GreenTextRenderer visible={!isPaused} />
|
||||||
{/*<YellowTextRenderer visible={!isPaused} />*/}
|
<YellowTextRenderer visible={!isPaused} />
|
||||||
{/*<YellowOrb visible={!isPaused} />*/}
|
<YellowOrb visible={!isPaused} />
|
||||||
{/*<Starfield />*/}
|
<Starfield />
|
||||||
{/*<GrayPlanes visible={!isPaused} />*/}
|
<GrayPlanes visible={!isPaused} />
|
||||||
{/*<MiddleRing />*/}
|
<MiddleRing />
|
||||||
{/*<LevelSelection />*/}
|
<LevelSelection />
|
||||||
{/*<OrbitControls />*/}
|
<Pause visible={isPaused} />
|
||||||
|
<OrbitControls />
|
||||||
<pointLight color={0xffffff} position={[0, 0, 7]} intensity={1} />
|
<pointLight color={0xffffff} position={[0, 0, 7]} intensity={1} />
|
||||||
<pointLight color={0x7f7f7f} position={[0, 10, 0]} intensity={1.5} />
|
<pointLight color={0x7f7f7f} position={[0, 10, 0]} intensity={1.5} />
|
||||||
<pointLight color={0xffffff} position={[8, 0, 0]} intensity={0.2} />
|
<pointLight color={0xffffff} position={[8, 0, 0]} intensity={0.2} />
|
||||||
<pointLight color={0xffffff} position={[-8, 0, 0]} intensity={0.2} />
|
<pointLight color={0xffffff} position={[-8, 0, 0]} intensity={0.2} />
|
||||||
<Pause />
|
|
||||||
</a.group>
|
</a.group>
|
||||||
{/*<Lain />*/}
|
{/*<Lain />*/}
|
||||||
</Suspense>
|
</Suspense>
|
||||||
|
|
|
@ -4,9 +4,11 @@ import * as THREE from "three";
|
||||||
import authorize_user_letters from "./resources/authorize_user_letters.json";
|
import authorize_user_letters from "./resources/authorize_user_letters.json";
|
||||||
|
|
||||||
type PauseState = {
|
type PauseState = {
|
||||||
|
exitAnimation: boolean;
|
||||||
componentMatrix: string[];
|
componentMatrix: string[];
|
||||||
componentMatrixIdx: number;
|
componentMatrixIdx: number;
|
||||||
setComponentMatrixIdx: (to: number) => void;
|
setComponentMatrixIdx: (to: number) => void;
|
||||||
|
setExitAnimation: (to: boolean) => void;
|
||||||
};
|
};
|
||||||
|
|
||||||
type LevelSelectionState = {
|
type LevelSelectionState = {
|
||||||
|
@ -403,7 +405,7 @@ export const useAuthorizeUserStore = create<AuthorizeUserState>((set) => ({
|
||||||
}));
|
}));
|
||||||
|
|
||||||
export const useMainSceneStore = create<MainSceneState>((set) => ({
|
export const useMainSceneStore = create<MainSceneState>((set) => ({
|
||||||
subscene: "pause",
|
subscene: "site",
|
||||||
setSubscene: (to) => set(() => ({ subscene: to })),
|
setSubscene: (to) => set(() => ({ subscene: to })),
|
||||||
}));
|
}));
|
||||||
|
|
||||||
|
@ -479,6 +481,7 @@ export const useLevelSelectionStore = create<LevelSelectionState>((set) => ({
|
||||||
export const usePauseStore = create<PauseState>((set) => ({
|
export const usePauseStore = create<PauseState>((set) => ({
|
||||||
componentMatrix: ["load", "about", "change", "save", "exit"],
|
componentMatrix: ["load", "about", "change", "save", "exit"],
|
||||||
componentMatrixIdx: 2,
|
componentMatrixIdx: 2,
|
||||||
setComponentMatrixIdx: (to: number) =>
|
exitAnimation: false,
|
||||||
set(() => ({ componentMatrixIdx: to })),
|
setComponentMatrixIdx: (to) => set(() => ({ componentMatrixIdx: to })),
|
||||||
|
setExitAnimation: (to) => set(() => ({ exitAnimation: to })),
|
||||||
}));
|
}));
|
||||||
|
|
Loading…
Reference in a new issue