all idle animations done

This commit is contained in:
ad044 2021-01-10 20:51:32 +04:00
parent 7b67f44135
commit 75c838c7bf
4 changed files with 274 additions and 65 deletions

View file

@ -14,7 +14,25 @@ import knockSpriteSheet from "../../static/sprite/knock.png";
import knockAndFallSpriteSheet from "../../static/sprite/knock_and_fall.png"; import knockAndFallSpriteSheet from "../../static/sprite/knock_and_fall.png";
import touchAndScareSpriteSheet from "../../static/sprite/touch_and_scare.png"; import touchAndScareSpriteSheet from "../../static/sprite/touch_and_scare.png";
import ripNodeSpriteSheet from "../../static/sprite/rip_node.png"; import ripNodeSpriteSheet from "../../static/sprite/rip_node.png";
import { useLainStore, useMainSceneStore } from "../../store"; import touchSleeveSpriteSheet from "../../static/sprite/touch_sleeve.png";
import prayerSpriteSheet from "../../static/sprite/prayer.png";
import thinkingSpriteSheet from "../../static/sprite/thinking.png";
import stretchSpriteSheet from "../../static/sprite/stretch.png";
import stretch2SpriteSheet from "../../static/sprite/stretch_2.png";
import spinSpriteSheet from "../../static/sprite/spin.png";
import scratchHeadSpriteSheet from "../../static/sprite/scratch_head.png";
import blushSpriteSheet from "../../static/sprite/blush.png";
import handsBehindHeadSpriteSheet from "../../static/sprite/hands_behind_head.png";
import handsOnHipsSpriteSheet from "../../static/sprite/hands_on_hips.png";
import handsOnHips2SpriteSheet from "../../static/sprite/hands_on_hips_2.png";
import handsTogetherSpriteSheet from "../../static/sprite/hands_together.png";
import leanForwardSpriteSheet from "../../static/sprite/lean_forward.png";
import leanLeftSpriteSheet from "../../static/sprite/lean_left.png";
import leanRightSpriteSheet from "../../static/sprite/lean_right.png";
import lookAroundSpriteSheet from "../../static/sprite/look_around.png";
import playWithHairSpriteSheet from "../../static/sprite/play_with_hair.png";
import { useLainStore } from "../../store";
type LainConstructorProps = { type LainConstructorProps = {
sprite: string; sprite: string;
@ -25,7 +43,6 @@ type LainConstructorProps = {
}; };
export const LainConstructor = (props: LainConstructorProps) => { export const LainConstructor = (props: LainConstructorProps) => {
// any here temporarily
const lainSpriteTexture: any = useLoader(THREE.TextureLoader, props.sprite); const lainSpriteTexture: any = useLoader(THREE.TextureLoader, props.sprite);
const [animator] = useState(() => { const [animator] = useState(() => {
@ -107,73 +124,227 @@ export const LainMoveUp = () => (
/> />
); );
export const LainThrowNode = () => { export const LainThrowNode = () => (
return ( <LainConstructor
<LainConstructor sprite={throwNodeSpriteSheet}
sprite={throwNodeSpriteSheet} frameCount={47}
frameCount={47} framesHorizontal={7}
framesHorizontal={7} framesVertical={7}
framesVertical={7} />
/> );
);
};
export const LainRipMiddleRing = () => { export const LainRipMiddleRing = () => (
return ( <LainConstructor
<LainConstructor sprite={ripMiddleRingSpriteSheet}
sprite={ripMiddleRingSpriteSheet} frameCount={53}
frameCount={53} framesHorizontal={8}
framesHorizontal={8} framesVertical={7}
framesVertical={7} />
/> );
);
};
export const LainKnock = () => { export const LainKnock = () => (
return ( <LainConstructor
<LainConstructor sprite={knockSpriteSheet}
sprite={knockSpriteSheet} frameCount={32}
frameCount={32} framesHorizontal={6}
framesHorizontal={6} framesVertical={6}
framesVertical={6} />
/> );
);
};
export const LainKnockAndFall = () => { export const LainKnockAndFall = () => (
return ( <LainConstructor
<LainConstructor sprite={knockAndFallSpriteSheet}
sprite={knockAndFallSpriteSheet} frameCount={64}
frameCount={64} framesHorizontal={8}
framesHorizontal={8} framesVertical={8}
framesVertical={8} fps={64 * 0.17}
fps={64 * 0.17} />
/> );
);
};
export const LainTouchAndScare = () => { export const LainTouchAndScare = () => (
return ( <LainConstructor
<LainConstructor sprite={touchAndScareSpriteSheet}
sprite={touchAndScareSpriteSheet} frameCount={37}
frameCount={37} framesHorizontal={7}
framesHorizontal={7} framesVertical={6}
framesVertical={6} />
/> );
);
};
export const LainRipNode = () => { export const LainRipNode = () => (
return ( <LainConstructor
<LainConstructor sprite={ripNodeSpriteSheet}
sprite={ripNodeSpriteSheet} frameCount={60}
frameCount={60} framesHorizontal={8}
framesHorizontal={8} framesVertical={8}
framesVertical={8} fps={60 * 0.17}
fps={60 * 0.17} />
/> );
);
}; export const LainPrayer = () => (
<LainConstructor
sprite={prayerSpriteSheet}
frameCount={32}
framesHorizontal={6}
framesVertical={6}
fps={32 * 0.3}
/>
);
export const LainTouchSleeve = () => (
<LainConstructor
sprite={touchSleeveSpriteSheet}
frameCount={33}
framesHorizontal={6}
framesVertical={6}
fps={33 * 0.35}
/>
);
export const LainThinking = () => (
<LainConstructor
sprite={thinkingSpriteSheet}
frameCount={38}
framesHorizontal={7}
framesVertical={6}
/>
);
export const LainStretch2 = () => (
<LainConstructor
sprite={stretch2SpriteSheet}
frameCount={34}
framesHorizontal={6}
framesVertical={6}
/>
);
export const LainStretch = () => (
<LainConstructor
sprite={stretchSpriteSheet}
frameCount={23}
framesHorizontal={5}
framesVertical={5}
fps={23 * 0.35}
/>
);
export const LainSpin = () => (
<LainConstructor
sprite={spinSpriteSheet}
frameCount={27}
framesHorizontal={6}
framesVertical={5}
fps={27 * 0.35}
/>
);
export const LainScratchHead = () => (
<LainConstructor
sprite={scratchHeadSpriteSheet}
frameCount={35}
framesHorizontal={6}
framesVertical={6}
/>
);
export const LainBlush = () => (
<LainConstructor
sprite={blushSpriteSheet}
frameCount={28}
framesHorizontal={6}
framesVertical={5}
fps={28 * 0.35}
/>
);
export const LainHandsBehindHead = () => (
<LainConstructor
sprite={handsBehindHeadSpriteSheet}
frameCount={21}
framesHorizontal={5}
framesVertical={5}
fps={28 * 0.35}
/>
);
export const LainHandsOnHips = () => (
<LainConstructor
sprite={handsOnHipsSpriteSheet}
frameCount={27}
framesHorizontal={6}
framesVertical={5}
fps={28 * 0.35}
/>
);
export const LainHandsOnHips2 = () => (
<LainConstructor
sprite={handsOnHips2SpriteSheet}
frameCount={35}
framesHorizontal={6}
framesVertical={6}
/>
);
export const LainLeanForward = () => (
<LainConstructor
sprite={leanForwardSpriteSheet}
frameCount={25}
framesHorizontal={5}
framesVertical={5}
fps={28 * 0.35}
/>
);
export const LainHandsTogether = () => (
<LainConstructor
sprite={handsTogetherSpriteSheet}
frameCount={23}
framesHorizontal={5}
framesVertical={5}
fps={28 * 0.35}
/>
);
export const LainLeanLeft = () => (
<LainConstructor
sprite={leanLeftSpriteSheet}
frameCount={29}
framesHorizontal={6}
framesVertical={5}
fps={32 * 0.35}
/>
);
export const LainLeanRight = () => (
<LainConstructor
sprite={leanRightSpriteSheet}
frameCount={52}
framesHorizontal={8}
framesVertical={7}
fps={45 * 0.35}
/>
);
export const LainLookAround = () => (
<LainConstructor
sprite={lookAroundSpriteSheet}
frameCount={35}
framesHorizontal={6}
framesVertical={6}
fps={35 * 0.35}
/>
);
export const LainPlayWithHair = () => (
<LainConstructor
sprite={playWithHairSpriteSheet}
frameCount={33}
framesHorizontal={6}
framesVertical={6}
fps={35 * 0.35}
/>
);
type LainProps = { type LainProps = {
shouldIntro: boolean; shouldIntro: boolean;
@ -193,6 +364,23 @@ const Lain = (props: LainProps) => {
throw_node: <LainThrowNode />, throw_node: <LainThrowNode />,
pause_game: <LainRipMiddleRing />, pause_game: <LainRipMiddleRing />,
rip_node: <LainRipNode />, rip_node: <LainRipNode />,
prayer: <LainPrayer />,
scratch_head: <LainScratchHead />,
spin: <LainSpin />,
stretch: <LainStretch />,
stretch_2: <LainStretch2 />,
thinking: <LainThinking />,
touch_sleeve: <LainTouchSleeve />,
blush: <LainBlush />,
hands_behind_head: <LainHandsBehindHead />,
hands_on_hips: <LainHandsOnHips />,
hands_on_hips_2: <LainHandsOnHips2 />,
hands_together: <LainHandsTogether />,
lean_forward: <LainLeanForward />,
lean_left: <LainLeanLeft />,
lean_right: <LainLeanRight />,
look_around: <LainLookAround />,
play_with_hair: <LainPlayWithHair />,
}; };
const [introFinished, setIntroFinished] = useState(false); const [introFinished, setIntroFinished] = useState(false);

View file

@ -13,6 +13,7 @@ import boringHudMirroredSpriteSheet from "../static/sprite/long_hud_boring_mirro
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 ripNodeSpriteSheet from "../static/sprite/rip_node.png"; import ripNodeSpriteSheet from "../static/sprite/rip_node.png";
import prayerSpriteSheet from "../static/sprite/prayer.png";
import * as THREE from "three"; import * as THREE from "three";
import { useLoader, useThree } from "react-three-fiber"; import { useLoader, useThree } from "react-three-fiber";
@ -48,6 +49,7 @@ const Preloader = () => {
ripMiddleRingSpriteSheet ripMiddleRingSpriteSheet
); );
const ripNode = useLoader(THREE.TextureLoader, ripNodeSpriteSheet); const ripNode = useLoader(THREE.TextureLoader, ripNodeSpriteSheet);
const prayer = useLoader(THREE.TextureLoader, prayerSpriteSheet);
const { gl } = useThree(); const { gl } = useThree();
useLayoutEffect(() => { useLayoutEffect(() => {
@ -66,6 +68,7 @@ const Preloader = () => {
gl.initTexture(throwNode); gl.initTexture(throwNode);
gl.initTexture(ripMiddleRing); gl.initTexture(ripMiddleRing);
gl.initTexture(ripNode); gl.initTexture(ripNode);
gl.initTexture(prayer);
}, [ }, [
moveDown, moveDown,
moveUp, moveUp,
@ -83,6 +86,7 @@ const Preloader = () => {
throwNode, throwNode,
ripMiddleRing, ripMiddleRing,
ripNode, ripNode,
prayer,
]); ]);
return null; return null;
}; };

View file

@ -16,6 +16,23 @@ const LainManager = (props: StateManagerProps) => {
case "select_level_down": case "select_level_down":
case "pause_game": case "pause_game":
case "knock_node": case "knock_node":
case "prayer":
case "touch_sleeve":
case "thinking":
case "stretch_2":
case "stretch":
case "spin":
case "scratch_head":
case "blush":
case "hands_behind_head":
case "hands_on_hips":
case "hands_on_hips_2":
case "hands_together":
case "lean_forward":
case "lean_left":
case "lean_right":
case "look_around":
case "play_with_hair":
return { return {
action: setLainMoveState, action: setLainMoveState,
value: eventState.event, value: eventState.event,

View file

@ -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", siteRotY: siteRotY }; return { event: "play_with_hair", siteRotY: siteRotY };
} }
return { return {