mirror of
https://github.com/ad044/lainTSX.git
synced 2024-10-22 23:19:06 +00:00
implementing more animations...
This commit is contained in:
parent
e5220e193d
commit
49a31b127a
6 changed files with 149 additions and 18 deletions
|
@ -10,6 +10,9 @@ import standingSpriteSheet from "../../static/sprite/standing.png";
|
|||
import introSpriteSheet from "../../static/sprite/intro.png";
|
||||
import throwNodeSpriteSheet from "../../static/sprite/throw_node.png";
|
||||
import ripMiddleRingSpriteSheet from "../../static/sprite/rip_middle_ring.png";
|
||||
import knockSpriteSheet from "../../static/sprite/knock.png";
|
||||
import knockAndFallSpriteSheet from "../../static/sprite/knock_and_fall.png";
|
||||
import touchAndScareSpriteSheet from "../../static/sprite/touch_and_scare.png";
|
||||
import { useLainStore, useMainSceneStore } from "../../store";
|
||||
|
||||
type LainConstructorProps = {
|
||||
|
@ -17,6 +20,7 @@ type LainConstructorProps = {
|
|||
frameCount: number;
|
||||
framesVertical: number;
|
||||
framesHorizontal: number;
|
||||
fps?: number;
|
||||
};
|
||||
|
||||
export const LainConstructor = (props: LainConstructorProps) => {
|
||||
|
@ -29,7 +33,7 @@ export const LainConstructor = (props: LainConstructorProps) => {
|
|||
props.framesHorizontal,
|
||||
props.framesVertical,
|
||||
props.frameCount,
|
||||
props.frameCount * 0.27
|
||||
props.fps ? props.fps : props.frameCount * 0.27
|
||||
);
|
||||
anim.init(0);
|
||||
return anim;
|
||||
|
@ -124,6 +128,40 @@ export const LainRipMiddleRing = () => {
|
|||
);
|
||||
};
|
||||
|
||||
export const LainKnock = () => {
|
||||
return (
|
||||
<LainConstructor
|
||||
sprite={knockSpriteSheet}
|
||||
frameCount={32}
|
||||
framesHorizontal={6}
|
||||
framesVertical={6}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
export const LainKnockAndFall = () => {
|
||||
return (
|
||||
<LainConstructor
|
||||
sprite={knockAndFallSpriteSheet}
|
||||
frameCount={64}
|
||||
framesHorizontal={8}
|
||||
framesVertical={8}
|
||||
fps={64 * 0.17}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
export const LainTouchAndScare = () => {
|
||||
return (
|
||||
<LainConstructor
|
||||
sprite={touchAndScareSpriteSheet}
|
||||
frameCount={37}
|
||||
framesHorizontal={7}
|
||||
framesVertical={6}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
type LainProps = {
|
||||
shouldIntro: boolean;
|
||||
};
|
||||
|
@ -141,6 +179,7 @@ const Lain = (props: LainProps) => {
|
|||
select_level_up: <LainMoveUp />,
|
||||
throw_node: <LainThrowNode />,
|
||||
pause_game: <LainRipMiddleRing />,
|
||||
test: <LainTouchAndScare />,
|
||||
};
|
||||
|
||||
const [introFinished, setIntroFinished] = useState(false);
|
||||
|
|
|
@ -115,14 +115,15 @@ const Node = (props: NodeContructorProps) => {
|
|||
// these pieces of state get updated transiently rather than reactively
|
||||
// to avoid excess unnecessary renders (this is absolutely crucial for performance).
|
||||
const [
|
||||
{ activeNodePosX, activeNodePosY, activeNodePosZ, activeNodeRotZ },
|
||||
{ activeNodePosX, activeNodePosY, activeNodePosZ, activeNodeRotZ, activeNodeRotY },
|
||||
set,
|
||||
] = useSpring(() => ({
|
||||
activeNodePosX: useNodeStore.getState().activeNodeState.interactedWith
|
||||
? useNodeStore.getState().activeNodeState.posX
|
||||
: props.position[0],
|
||||
activeNodePosY: useNodeStore.getState().activeNodeState.interactedWith
|
||||
? level_y_values[props.level as keyof typeof level_y_values]
|
||||
? level_y_values[props.level as keyof typeof level_y_values] +
|
||||
useNodeStore.getState().activeNodeState.posY
|
||||
: props.position[1],
|
||||
activeNodePosZ: useNodeStore.getState().activeNodeState.interactedWith
|
||||
? useNodeStore.getState().activeNodeState.posZ
|
||||
|
@ -130,6 +131,9 @@ const Node = (props: NodeContructorProps) => {
|
|||
activeNodeRotZ: useNodeStore.getState().activeNodeState.interactedWith
|
||||
? useNodeStore.getState().activeNodeState.rotZ
|
||||
: 0,
|
||||
activeNodeRotY: useNodeStore.getState().activeNodeState.interactedWith
|
||||
? useNodeStore.getState().activeNodeState.rotY
|
||||
: props.rotation[1],
|
||||
config: { duration: 800 },
|
||||
}));
|
||||
|
||||
|
@ -139,7 +143,7 @@ const Node = (props: NodeContructorProps) => {
|
|||
? state.activeNodeState.posX
|
||||
: props.position[0],
|
||||
activeNodePosY: useNodeStore.getState().activeNodeState.interactedWith
|
||||
? 0
|
||||
? state.activeNodeState.posY
|
||||
: props.position[1],
|
||||
activeNodePosZ: useNodeStore.getState().activeNodeState.interactedWith
|
||||
? state.activeNodeState.posZ
|
||||
|
@ -147,6 +151,9 @@ const Node = (props: NodeContructorProps) => {
|
|||
activeNodeRotZ: useNodeStore.getState().activeNodeState.interactedWith
|
||||
? state.activeNodeState.rotZ
|
||||
: 0,
|
||||
activeNodeRotY: useNodeStore.getState().activeNodeState.interactedWith
|
||||
? state.activeNodeState.rotY
|
||||
: props.rotation[1],
|
||||
}));
|
||||
}, [
|
||||
props.level,
|
||||
|
@ -155,6 +162,7 @@ const Node = (props: NodeContructorProps) => {
|
|||
activeNodeRotZ,
|
||||
props.position,
|
||||
set,
|
||||
props.rotation,
|
||||
]);
|
||||
|
||||
return (
|
||||
|
@ -171,7 +179,7 @@ const Node = (props: NodeContructorProps) => {
|
|||
position-y={activeNodePosY}
|
||||
position-z={activeNodePosZ}
|
||||
rotation-z={activeNodeRotZ}
|
||||
rotation-y={props.rotation[1]}
|
||||
rotation-y={activeNodeRotY}
|
||||
scale={[0.36, 0.18, 0.36]}
|
||||
renderOrder={1}
|
||||
>
|
||||
|
|
|
@ -29,10 +29,22 @@ const LainManager = (props: StateManagerProps) => {
|
|||
value: "throw_node",
|
||||
duration: 3900,
|
||||
};
|
||||
case "knock_node":
|
||||
return {
|
||||
action: setLainMoveState,
|
||||
value: "knock_node",
|
||||
duration: 3900,
|
||||
};
|
||||
case "knock_node_and_fall":
|
||||
return {
|
||||
action: setLainMoveState,
|
||||
value: "knock_node_and_fall",
|
||||
duration: 6000,
|
||||
};
|
||||
case "test":
|
||||
return {
|
||||
action: setLainMoveState,
|
||||
value: "pause_game",
|
||||
value: "test",
|
||||
duration: 3900,
|
||||
};
|
||||
}
|
||||
|
|
|
@ -8,10 +8,6 @@ const NodeManager = (props: StateManagerProps) => {
|
|||
(state) => state.setNodeMatrixIndices
|
||||
);
|
||||
|
||||
const animateActiveNodeThrow = useCallback(
|
||||
(siteRotY: number) => {
|
||||
setActiveNodeState(true, "interactedWith");
|
||||
|
||||
const calculateCoordsBasedOnRotation = (
|
||||
x: number,
|
||||
z: number,
|
||||
|
@ -21,6 +17,10 @@ const NodeManager = (props: StateManagerProps) => {
|
|||
z: x * Math.sin(rotation) + z * Math.cos(rotation),
|
||||
});
|
||||
|
||||
const animateActiveNodeThrow = useCallback(
|
||||
(siteRotY: number) => {
|
||||
setActiveNodeState(true, "interactedWith");
|
||||
|
||||
const fstCoordSet = calculateCoordsBasedOnRotation(0.9, 0.3, siteRotY);
|
||||
const sndCoordSet = calculateCoordsBasedOnRotation(0.5, 0.2, siteRotY);
|
||||
const thirdCoordSet = calculateCoordsBasedOnRotation(1.55, 0.2, siteRotY);
|
||||
|
@ -28,6 +28,7 @@ const NodeManager = (props: StateManagerProps) => {
|
|||
|
||||
setActiveNodeState(fstCoordSet.x, "posX");
|
||||
setActiveNodeState(fstCoordSet.z, "posZ");
|
||||
setActiveNodeState(0, "posY");
|
||||
|
||||
setTimeout(() => {
|
||||
setActiveNodeState(sndCoordSet.x, "posX");
|
||||
|
@ -51,6 +52,68 @@ const NodeManager = (props: StateManagerProps) => {
|
|||
[setActiveNodeState]
|
||||
);
|
||||
|
||||
const animateNodeKnock = useCallback(
|
||||
(siteRotY: number) => {
|
||||
setActiveNodeState(true, "interactedWith");
|
||||
|
||||
const fstCoordSet = calculateCoordsBasedOnRotation(1.1, 0.2, siteRotY);
|
||||
|
||||
setActiveNodeState(fstCoordSet.x, "posX");
|
||||
setActiveNodeState(fstCoordSet.z, "posZ");
|
||||
setActiveNodeState(-0.6, "posY");
|
||||
|
||||
setTimeout(() => {
|
||||
setActiveNodeState(false, "interactedWith");
|
||||
}, 2500);
|
||||
},
|
||||
[setActiveNodeState]
|
||||
);
|
||||
|
||||
const animateNodeKnockAndFall = useCallback(
|
||||
(siteRotY: number) => {
|
||||
setActiveNodeState(true, "interactedWith");
|
||||
|
||||
const fstCoordSet = calculateCoordsBasedOnRotation(1.1, 0.2, siteRotY);
|
||||
|
||||
setActiveNodeState(fstCoordSet.x, "posX");
|
||||
setActiveNodeState(fstCoordSet.z, "posZ");
|
||||
setActiveNodeState(-0.6, "posY");
|
||||
|
||||
setTimeout(() => {
|
||||
setActiveNodeState(1.2, "posY");
|
||||
}, 2300);
|
||||
|
||||
setTimeout(() => {
|
||||
setActiveNodeState(false, "interactedWith");
|
||||
}, 2500);
|
||||
},
|
||||
[setActiveNodeState]
|
||||
);
|
||||
|
||||
const animateNodeTouchAndScare = useCallback(
|
||||
(siteRotY: number) => {
|
||||
setActiveNodeState(true, "interactedWith");
|
||||
|
||||
const fstCoordSet = calculateCoordsBasedOnRotation(-0.6, 0.2, siteRotY);
|
||||
|
||||
setActiveNodeState(fstCoordSet.x, "posX");
|
||||
setActiveNodeState(fstCoordSet.z, "posZ");
|
||||
setActiveNodeState(0, "posY");
|
||||
|
||||
setTimeout(() => {
|
||||
setActiveNodeState(Math.PI, "rotZ");
|
||||
setActiveNodeState(Math.PI, "rotY");
|
||||
}, 1200);
|
||||
|
||||
setTimeout(() => {
|
||||
setActiveNodeState(false, "interactedWith");
|
||||
setActiveNodeState(0, "rotZ");
|
||||
setActiveNodeState(0, "rotY");
|
||||
}, 2500);
|
||||
},
|
||||
[setActiveNodeState]
|
||||
);
|
||||
|
||||
const updateActiveNode = useCallback(
|
||||
(
|
||||
newActiveNodeId: string,
|
||||
|
@ -110,9 +173,14 @@ const NodeManager = (props: StateManagerProps) => {
|
|||
action: animateActiveNodeThrow,
|
||||
value: [eventState.siteRotY],
|
||||
};
|
||||
case "test":
|
||||
return {
|
||||
action: animateNodeTouchAndScare,
|
||||
value: [eventState.siteRotY],
|
||||
};
|
||||
}
|
||||
},
|
||||
[animateActiveNodeThrow, updateActiveNode]
|
||||
[animateActiveNodeThrow, animateNodeKnock, updateActiveNode]
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
|
|
|
@ -102,7 +102,7 @@ const handleMainSceneEvent = (gameContext: any) => {
|
|||
case "TRIANGLE":
|
||||
return { event: "pause_game" };
|
||||
case "SPACE":
|
||||
return { event: "test" };
|
||||
return { event: "test", siteRotY: siteRotY };
|
||||
}
|
||||
|
||||
return {
|
||||
|
|
|
@ -61,6 +61,8 @@ type NodeState = {
|
|||
id: string;
|
||||
posX: number;
|
||||
posZ: number;
|
||||
posY: number;
|
||||
rotY: number;
|
||||
rotZ: number;
|
||||
interactedWith: boolean;
|
||||
};
|
||||
|
@ -107,7 +109,7 @@ type MiddleRingState = {
|
|||
isRotating: boolean;
|
||||
animDuration: number;
|
||||
mainRingVisible: boolean;
|
||||
partSeparatorVal: number
|
||||
partSeparatorVal: number;
|
||||
};
|
||||
|
||||
type MediaWordState = {
|
||||
|
@ -296,6 +298,8 @@ export const useNodeStore = create(
|
|||
posX: 0,
|
||||
posZ: 0,
|
||||
rotZ: 0,
|
||||
rotY: 0,
|
||||
posY: 0,
|
||||
interactedWith: false,
|
||||
},
|
||||
nodeMatrixIndices: { matrixIdx: 7, rowIdx: 0, colIdx: 0 },
|
||||
|
|
Loading…
Reference in a new issue