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 introSpriteSheet from "../../static/sprite/intro.png";
|
||||||
import throwNodeSpriteSheet from "../../static/sprite/throw_node.png";
|
import throwNodeSpriteSheet from "../../static/sprite/throw_node.png";
|
||||||
import ripMiddleRingSpriteSheet from "../../static/sprite/rip_middle_ring.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";
|
import { useLainStore, useMainSceneStore } from "../../store";
|
||||||
|
|
||||||
type LainConstructorProps = {
|
type LainConstructorProps = {
|
||||||
|
@ -17,6 +20,7 @@ type LainConstructorProps = {
|
||||||
frameCount: number;
|
frameCount: number;
|
||||||
framesVertical: number;
|
framesVertical: number;
|
||||||
framesHorizontal: number;
|
framesHorizontal: number;
|
||||||
|
fps?: number;
|
||||||
};
|
};
|
||||||
|
|
||||||
export const LainConstructor = (props: LainConstructorProps) => {
|
export const LainConstructor = (props: LainConstructorProps) => {
|
||||||
|
@ -29,7 +33,7 @@ export const LainConstructor = (props: LainConstructorProps) => {
|
||||||
props.framesHorizontal,
|
props.framesHorizontal,
|
||||||
props.framesVertical,
|
props.framesVertical,
|
||||||
props.frameCount,
|
props.frameCount,
|
||||||
props.frameCount * 0.27
|
props.fps ? props.fps : props.frameCount * 0.27
|
||||||
);
|
);
|
||||||
anim.init(0);
|
anim.init(0);
|
||||||
return anim;
|
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 = {
|
type LainProps = {
|
||||||
shouldIntro: boolean;
|
shouldIntro: boolean;
|
||||||
};
|
};
|
||||||
|
@ -141,6 +179,7 @@ const Lain = (props: LainProps) => {
|
||||||
select_level_up: <LainMoveUp />,
|
select_level_up: <LainMoveUp />,
|
||||||
throw_node: <LainThrowNode />,
|
throw_node: <LainThrowNode />,
|
||||||
pause_game: <LainRipMiddleRing />,
|
pause_game: <LainRipMiddleRing />,
|
||||||
|
test: <LainTouchAndScare />,
|
||||||
};
|
};
|
||||||
|
|
||||||
const [introFinished, setIntroFinished] = useState(false);
|
const [introFinished, setIntroFinished] = useState(false);
|
||||||
|
|
|
@ -115,14 +115,15 @@ const Node = (props: NodeContructorProps) => {
|
||||||
// these pieces of state get updated transiently rather than reactively
|
// these pieces of state get updated transiently rather than reactively
|
||||||
// to avoid excess unnecessary renders (this is absolutely crucial for performance).
|
// to avoid excess unnecessary renders (this is absolutely crucial for performance).
|
||||||
const [
|
const [
|
||||||
{ activeNodePosX, activeNodePosY, activeNodePosZ, activeNodeRotZ },
|
{ activeNodePosX, activeNodePosY, activeNodePosZ, activeNodeRotZ, activeNodeRotY },
|
||||||
set,
|
set,
|
||||||
] = useSpring(() => ({
|
] = useSpring(() => ({
|
||||||
activeNodePosX: useNodeStore.getState().activeNodeState.interactedWith
|
activeNodePosX: useNodeStore.getState().activeNodeState.interactedWith
|
||||||
? useNodeStore.getState().activeNodeState.posX
|
? useNodeStore.getState().activeNodeState.posX
|
||||||
: props.position[0],
|
: props.position[0],
|
||||||
activeNodePosY: useNodeStore.getState().activeNodeState.interactedWith
|
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],
|
: props.position[1],
|
||||||
activeNodePosZ: useNodeStore.getState().activeNodeState.interactedWith
|
activeNodePosZ: useNodeStore.getState().activeNodeState.interactedWith
|
||||||
? useNodeStore.getState().activeNodeState.posZ
|
? useNodeStore.getState().activeNodeState.posZ
|
||||||
|
@ -130,6 +131,9 @@ const Node = (props: NodeContructorProps) => {
|
||||||
activeNodeRotZ: useNodeStore.getState().activeNodeState.interactedWith
|
activeNodeRotZ: useNodeStore.getState().activeNodeState.interactedWith
|
||||||
? useNodeStore.getState().activeNodeState.rotZ
|
? useNodeStore.getState().activeNodeState.rotZ
|
||||||
: 0,
|
: 0,
|
||||||
|
activeNodeRotY: useNodeStore.getState().activeNodeState.interactedWith
|
||||||
|
? useNodeStore.getState().activeNodeState.rotY
|
||||||
|
: props.rotation[1],
|
||||||
config: { duration: 800 },
|
config: { duration: 800 },
|
||||||
}));
|
}));
|
||||||
|
|
||||||
|
@ -139,7 +143,7 @@ const Node = (props: NodeContructorProps) => {
|
||||||
? state.activeNodeState.posX
|
? state.activeNodeState.posX
|
||||||
: props.position[0],
|
: props.position[0],
|
||||||
activeNodePosY: useNodeStore.getState().activeNodeState.interactedWith
|
activeNodePosY: useNodeStore.getState().activeNodeState.interactedWith
|
||||||
? 0
|
? state.activeNodeState.posY
|
||||||
: props.position[1],
|
: props.position[1],
|
||||||
activeNodePosZ: useNodeStore.getState().activeNodeState.interactedWith
|
activeNodePosZ: useNodeStore.getState().activeNodeState.interactedWith
|
||||||
? state.activeNodeState.posZ
|
? state.activeNodeState.posZ
|
||||||
|
@ -147,6 +151,9 @@ const Node = (props: NodeContructorProps) => {
|
||||||
activeNodeRotZ: useNodeStore.getState().activeNodeState.interactedWith
|
activeNodeRotZ: useNodeStore.getState().activeNodeState.interactedWith
|
||||||
? state.activeNodeState.rotZ
|
? state.activeNodeState.rotZ
|
||||||
: 0,
|
: 0,
|
||||||
|
activeNodeRotY: useNodeStore.getState().activeNodeState.interactedWith
|
||||||
|
? state.activeNodeState.rotY
|
||||||
|
: props.rotation[1],
|
||||||
}));
|
}));
|
||||||
}, [
|
}, [
|
||||||
props.level,
|
props.level,
|
||||||
|
@ -155,6 +162,7 @@ const Node = (props: NodeContructorProps) => {
|
||||||
activeNodeRotZ,
|
activeNodeRotZ,
|
||||||
props.position,
|
props.position,
|
||||||
set,
|
set,
|
||||||
|
props.rotation,
|
||||||
]);
|
]);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
|
@ -171,7 +179,7 @@ const Node = (props: NodeContructorProps) => {
|
||||||
position-y={activeNodePosY}
|
position-y={activeNodePosY}
|
||||||
position-z={activeNodePosZ}
|
position-z={activeNodePosZ}
|
||||||
rotation-z={activeNodeRotZ}
|
rotation-z={activeNodeRotZ}
|
||||||
rotation-y={props.rotation[1]}
|
rotation-y={activeNodeRotY}
|
||||||
scale={[0.36, 0.18, 0.36]}
|
scale={[0.36, 0.18, 0.36]}
|
||||||
renderOrder={1}
|
renderOrder={1}
|
||||||
>
|
>
|
||||||
|
|
|
@ -29,10 +29,22 @@ const LainManager = (props: StateManagerProps) => {
|
||||||
value: "throw_node",
|
value: "throw_node",
|
||||||
duration: 3900,
|
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":
|
case "test":
|
||||||
return {
|
return {
|
||||||
action: setLainMoveState,
|
action: setLainMoveState,
|
||||||
value: "pause_game",
|
value: "test",
|
||||||
duration: 3900,
|
duration: 3900,
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
|
@ -8,10 +8,6 @@ const NodeManager = (props: StateManagerProps) => {
|
||||||
(state) => state.setNodeMatrixIndices
|
(state) => state.setNodeMatrixIndices
|
||||||
);
|
);
|
||||||
|
|
||||||
const animateActiveNodeThrow = useCallback(
|
|
||||||
(siteRotY: number) => {
|
|
||||||
setActiveNodeState(true, "interactedWith");
|
|
||||||
|
|
||||||
const calculateCoordsBasedOnRotation = (
|
const calculateCoordsBasedOnRotation = (
|
||||||
x: number,
|
x: number,
|
||||||
z: number,
|
z: number,
|
||||||
|
@ -21,6 +17,10 @@ const NodeManager = (props: StateManagerProps) => {
|
||||||
z: x * Math.sin(rotation) + z * Math.cos(rotation),
|
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 fstCoordSet = calculateCoordsBasedOnRotation(0.9, 0.3, siteRotY);
|
||||||
const sndCoordSet = calculateCoordsBasedOnRotation(0.5, 0.2, siteRotY);
|
const sndCoordSet = calculateCoordsBasedOnRotation(0.5, 0.2, siteRotY);
|
||||||
const thirdCoordSet = calculateCoordsBasedOnRotation(1.55, 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.x, "posX");
|
||||||
setActiveNodeState(fstCoordSet.z, "posZ");
|
setActiveNodeState(fstCoordSet.z, "posZ");
|
||||||
|
setActiveNodeState(0, "posY");
|
||||||
|
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
setActiveNodeState(sndCoordSet.x, "posX");
|
setActiveNodeState(sndCoordSet.x, "posX");
|
||||||
|
@ -51,6 +52,68 @@ const NodeManager = (props: StateManagerProps) => {
|
||||||
[setActiveNodeState]
|
[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(
|
const updateActiveNode = useCallback(
|
||||||
(
|
(
|
||||||
newActiveNodeId: string,
|
newActiveNodeId: string,
|
||||||
|
@ -110,9 +173,14 @@ const NodeManager = (props: StateManagerProps) => {
|
||||||
action: animateActiveNodeThrow,
|
action: animateActiveNodeThrow,
|
||||||
value: [eventState.siteRotY],
|
value: [eventState.siteRotY],
|
||||||
};
|
};
|
||||||
|
case "test":
|
||||||
|
return {
|
||||||
|
action: animateNodeTouchAndScare,
|
||||||
|
value: [eventState.siteRotY],
|
||||||
|
};
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
[animateActiveNodeThrow, updateActiveNode]
|
[animateActiveNodeThrow, animateNodeKnock, updateActiveNode]
|
||||||
);
|
);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
|
|
|
@ -102,7 +102,7 @@ const handleMainSceneEvent = (gameContext: any) => {
|
||||||
case "TRIANGLE":
|
case "TRIANGLE":
|
||||||
return { event: "pause_game" };
|
return { event: "pause_game" };
|
||||||
case "SPACE":
|
case "SPACE":
|
||||||
return { event: "test" };
|
return { event: "test", siteRotY: siteRotY };
|
||||||
}
|
}
|
||||||
|
|
||||||
return {
|
return {
|
||||||
|
|
|
@ -61,6 +61,8 @@ type NodeState = {
|
||||||
id: string;
|
id: string;
|
||||||
posX: number;
|
posX: number;
|
||||||
posZ: number;
|
posZ: number;
|
||||||
|
posY: number;
|
||||||
|
rotY: number;
|
||||||
rotZ: number;
|
rotZ: number;
|
||||||
interactedWith: boolean;
|
interactedWith: boolean;
|
||||||
};
|
};
|
||||||
|
@ -107,7 +109,7 @@ type MiddleRingState = {
|
||||||
isRotating: boolean;
|
isRotating: boolean;
|
||||||
animDuration: number;
|
animDuration: number;
|
||||||
mainRingVisible: boolean;
|
mainRingVisible: boolean;
|
||||||
partSeparatorVal: number
|
partSeparatorVal: number;
|
||||||
};
|
};
|
||||||
|
|
||||||
type MediaWordState = {
|
type MediaWordState = {
|
||||||
|
@ -296,6 +298,8 @@ export const useNodeStore = create(
|
||||||
posX: 0,
|
posX: 0,
|
||||||
posZ: 0,
|
posZ: 0,
|
||||||
rotZ: 0,
|
rotZ: 0,
|
||||||
|
rotY: 0,
|
||||||
|
posY: 0,
|
||||||
interactedWith: false,
|
interactedWith: false,
|
||||||
},
|
},
|
||||||
nodeMatrixIndices: { matrixIdx: 7, rowIdx: 0, colIdx: 0 },
|
nodeMatrixIndices: { matrixIdx: 7, rowIdx: 0, colIdx: 0 },
|
||||||
|
|
Loading…
Reference in a new issue