mirror of
https://github.com/ad044/lainTSX.git
synced 2024-10-22 23:19:06 +00:00
adding blue orb interactions
This commit is contained in:
parent
1e3a33bef5
commit
d991f84850
10 changed files with 205 additions and 82 deletions
|
@ -1,6 +1,6 @@
|
|||
import React, { memo, useMemo, useRef } from "react";
|
||||
import { useFrame, useLoader } from "react-three-fiber";
|
||||
import { a } from "@react-spring/three";
|
||||
import { useSpring, a } from "@react-spring/three";
|
||||
import * as THREE from "three";
|
||||
import Cou from "../../static/sprites/Cou.png";
|
||||
import CouActive from "../../static/sprites/Cou_active.png";
|
||||
|
@ -17,6 +17,13 @@ import LdaActive from "../../static/sprites/Lda_active.png";
|
|||
import MULTI from "../../static/sprites/MULTI.png";
|
||||
import MULTIActive from "../../static/sprites/MULTI_active.png";
|
||||
import level_y_values from "../../resources/level_y_values.json";
|
||||
import { useRecoilValue } from "recoil";
|
||||
import {
|
||||
currentBlueOrbAnimatingAtom,
|
||||
currentBlueOrbPosXAtom,
|
||||
currentBlueOrbPosYAtom,
|
||||
currentBlueOrbPosZAtom,
|
||||
} from "./CurrentBlueOrbAtom";
|
||||
|
||||
type BlueOrbContructorProps = {
|
||||
sprite: string;
|
||||
|
@ -39,6 +46,11 @@ const BlueOrb = memo((props: BlueOrbContructorProps) => {
|
|||
// dynamically importnig them would be worse for performance,
|
||||
// so we import all of them here and then use this function to
|
||||
// associate a sprite with the path
|
||||
const currentBlueOrbAnimating = useRecoilValue(currentBlueOrbAnimatingAtom);
|
||||
const currentBlueOrbPosX = useRecoilValue(currentBlueOrbPosXAtom);
|
||||
const currentBlueOrbPosY = useRecoilValue(currentBlueOrbPosYAtom);
|
||||
const currentBlueOrbPosZ = useRecoilValue(currentBlueOrbPosZAtom);
|
||||
|
||||
const spriteToPath = (sprite: string) => {
|
||||
if (sprite.includes("S")) {
|
||||
return [SSkn, SSKnActive];
|
||||
|
@ -116,10 +128,31 @@ const BlueOrb = memo((props: BlueOrbContructorProps) => {
|
|||
}
|
||||
});
|
||||
|
||||
const currentBlueOrbState = useSpring({
|
||||
currentBlueOrbPosX: currentBlueOrbPosX,
|
||||
currentBlueOrbPosY: currentBlueOrbPosY,
|
||||
currentBlueOrbPosZ: currentBlueOrbPosZ,
|
||||
config: { duration: 900 },
|
||||
});
|
||||
|
||||
return (
|
||||
<group position={[0, (level_y_values as LevelYValues)[props.level], 0]}>
|
||||
<a.mesh
|
||||
position={props.position as [number, number, number]}
|
||||
position-x={
|
||||
props.active && currentBlueOrbAnimating
|
||||
? currentBlueOrbState.currentBlueOrbPosX
|
||||
: props.position[0]
|
||||
}
|
||||
position-y={
|
||||
props.active && currentBlueOrbAnimating
|
||||
? currentBlueOrbState.currentBlueOrbPosY
|
||||
: props.position[1]
|
||||
}
|
||||
position-z={
|
||||
props.active && currentBlueOrbAnimating
|
||||
? currentBlueOrbState.currentBlueOrbPosZ
|
||||
: props.position[2]
|
||||
}
|
||||
rotation-y={props.rotation[1]}
|
||||
scale={[0.36, 0.18, 0.36]}
|
||||
renderOrder={1}
|
||||
|
|
|
@ -1,6 +1,26 @@
|
|||
import { atom } from 'recoil'
|
||||
import { atom } from "recoil";
|
||||
|
||||
export const currentBlueOrbAtom = atom({
|
||||
key: 'currentBlueOrbAtom',
|
||||
default: "0422"
|
||||
})
|
||||
key: "currentBlueOrbAtom",
|
||||
default: "0422",
|
||||
});
|
||||
|
||||
export const currentBlueOrbAnimatingAtom = atom({
|
||||
key: "currentBlueOrbAnimatingAtom",
|
||||
default: false,
|
||||
});
|
||||
|
||||
export const currentBlueOrbPosXAtom = atom({
|
||||
key: "currentBlueOrbPosXAtom",
|
||||
default: 0,
|
||||
});
|
||||
|
||||
export const currentBlueOrbPosYAtom = atom({
|
||||
key: "currentBlueOrbPosYAtom",
|
||||
default: 0,
|
||||
});
|
||||
|
||||
export const currentBlueOrbPosZAtom = atom({
|
||||
key: "currentBlueOrbPosZAtom",
|
||||
default: 0,
|
||||
});
|
||||
|
|
|
@ -14,17 +14,17 @@ export const hudVisibilityAtom = atom({
|
|||
|
||||
export const currentHUDAtom = atom({
|
||||
key: "currentHUDAtom",
|
||||
default: (blue_orb_huds as BlueOrbHuds)["bg_hud_3"],
|
||||
default: (blue_orb_huds as BlueOrbHuds)["fg_hud_1"],
|
||||
});
|
||||
|
||||
export const bigLetterPosYAtom = atom({
|
||||
key: "bigLetterPosYAtom",
|
||||
default: (blue_orb_huds as BlueOrbHuds)["bg_hud_3"]["big_text"][1],
|
||||
default: (blue_orb_huds as BlueOrbHuds)["fg_hud_1"]["big_text"][1],
|
||||
});
|
||||
|
||||
export const bigLetterPosXAtom = atom({
|
||||
key: "bigLetterPosXAtom",
|
||||
default: (blue_orb_huds as BlueOrbHuds)["bg_hud_3"]["big_text"][0],
|
||||
default: (blue_orb_huds as BlueOrbHuds)["fg_hud_1"]["big_text"][0],
|
||||
});
|
||||
|
||||
export const bigHudTextAtom = atom({
|
||||
|
|
|
@ -5,7 +5,8 @@ import {
|
|||
LainMoveRight,
|
||||
LainMoveUp,
|
||||
LainStanding,
|
||||
} from "./Lain/Lain";
|
||||
LainThrowBlueOrb,
|
||||
} from "../Lain/Lain";
|
||||
import { useRecoilState, useSetRecoilState } from "recoil";
|
||||
import {
|
||||
bigHudTextAtom,
|
||||
|
@ -14,14 +15,21 @@ import {
|
|||
currentHUDAtom,
|
||||
hudActiveAtom,
|
||||
mediumHudTextAtom,
|
||||
} from "./HUD/HUDElementAtom";
|
||||
import { currentBlueOrbAtom } from "./BlueOrb/CurrentBlueOrbAtom";
|
||||
import lain_animations from "../resources/lain_animations.json";
|
||||
import blue_orb_huds from "../resources/blue_orb_huds.json";
|
||||
import blue_orb_directions from "../resources/blue_orb_directions.json";
|
||||
import site_a from "../resources/site_a.json";
|
||||
import { lainMoveStateAtom, lainMovingAtom } from "./Lain/LainAtom";
|
||||
import { BlueOrbHudData, BlueOrbHuds } from "./HUD/HUDElement";
|
||||
} from "../HUD/HUDElementAtom";
|
||||
import {
|
||||
currentBlueOrbAnimatingAtom,
|
||||
currentBlueOrbAtom,
|
||||
currentBlueOrbPosXAtom,
|
||||
currentBlueOrbPosYAtom,
|
||||
currentBlueOrbPosZAtom,
|
||||
} from "../BlueOrb/CurrentBlueOrbAtom";
|
||||
import lain_animations from "../../resources/lain_animations.json";
|
||||
import blue_orb_huds from "../../resources/blue_orb_huds.json";
|
||||
import blue_orb_directions from "../../resources/blue_orb_directions.json";
|
||||
import blue_orb_positions from "../../resources/blue_orb_positions.json";
|
||||
import site_a from "../../resources/site_a.json";
|
||||
import { lainMoveStateAtom, lainMovingAtom } from "../Lain/LainAtom";
|
||||
import { BlueOrbHudData, BlueOrbHuds } from "../HUD/HUDElement";
|
||||
import {
|
||||
middleRingAnimDurationAtom,
|
||||
middleRingNoiseAtom,
|
||||
|
@ -30,14 +38,15 @@ import {
|
|||
middleRingRotZAtom,
|
||||
middleRingPosYAtom,
|
||||
middleRingWobbleStrengthAtom,
|
||||
} from "./MiddleRing/MiddleRingAtom";
|
||||
import { bigLetterOffsetXCoeffAtom } from "./TextRenderer/TextRendererAtom";
|
||||
import { SiteData } from "./Site/Site";
|
||||
} from "../MiddleRing/MiddleRingAtom";
|
||||
import { bigLetterOffsetXCoeffAtom } from "../TextRenderer/TextRendererAtom";
|
||||
import { SiteData } from "../Site/Site";
|
||||
import {
|
||||
isSiteYChangingAtom,
|
||||
sitePosYAtom,
|
||||
siteRotYAtom,
|
||||
} from "./Site/SiteAtom";
|
||||
} from "../Site/SiteAtom";
|
||||
import { sleep } from "./inputHandlerHelpers";
|
||||
|
||||
type KeyCodeAssociations = {
|
||||
[keyCode: number]: string;
|
||||
|
@ -75,6 +84,7 @@ const getKeyCodeAssociation = (keyCode: number): string => {
|
|||
37: "left",
|
||||
38: "up",
|
||||
39: "right",
|
||||
88: "x",
|
||||
} as KeyCodeAssociations)[keyCode];
|
||||
};
|
||||
|
||||
|
@ -82,6 +92,13 @@ const InputHandler = () => {
|
|||
const [currentBlueOrb, setCurrentBlueOrb] = useRecoilState(
|
||||
currentBlueOrbAtom
|
||||
);
|
||||
const setCurrentBlueOrbAnimating = useSetRecoilState(
|
||||
currentBlueOrbAnimatingAtom
|
||||
);
|
||||
|
||||
const setCurrentBlueOrbPosX = useSetRecoilState(currentBlueOrbPosXAtom);
|
||||
const setCurrentBlueOrbPosY = useSetRecoilState(currentBlueOrbPosYAtom);
|
||||
const setCurrentBlueOrbPosZ = useSetRecoilState(currentBlueOrbPosZAtom);
|
||||
|
||||
const [lainMoving, setLainMoving] = useRecoilState(lainMovingAtom);
|
||||
const setLainMoveState = useSetRecoilState(lainMoveStateAtom);
|
||||
|
@ -379,6 +396,9 @@ const InputHandler = () => {
|
|||
|
||||
rotateMiddleRing("right");
|
||||
break;
|
||||
case "throw_blue_orb":
|
||||
setLainMoveState(<LainThrowBlueOrb />);
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
|
@ -493,7 +513,16 @@ const InputHandler = () => {
|
|||
(event) => {
|
||||
const { keyCode } = event;
|
||||
|
||||
const moveDirection = getKeyCodeAssociation(keyCode);
|
||||
const keyCodeAssoc = getKeyCodeAssociation(keyCode);
|
||||
|
||||
let moveDirection;
|
||||
let action;
|
||||
|
||||
if (keyCodeAssoc !== "x") {
|
||||
moveDirection = keyCodeAssoc;
|
||||
} else {
|
||||
action = "throw_blue_orb";
|
||||
}
|
||||
|
||||
if (moveDirection && !lainMoving && !spriteUpdateCooldown) {
|
||||
const targetBlueOrb = getTargetFrom(currentBlueOrb, moveDirection);
|
||||
|
@ -528,6 +557,29 @@ const InputHandler = () => {
|
|||
targetBlueOrbHudId
|
||||
);
|
||||
}
|
||||
} else if (action && !lainMoving && !spriteUpdateCooldown) {
|
||||
const currentBlueOrbPosId = currentBlueOrb.substr(2);
|
||||
|
||||
const currentBlueOrbPos =
|
||||
blue_orb_positions[
|
||||
currentBlueOrbPosId as keyof typeof blue_orb_positions
|
||||
].position;
|
||||
|
||||
setAnimationState(action);
|
||||
setCurrentBlueOrbPosX(currentBlueOrbPos[0]);
|
||||
setCurrentBlueOrbPosY(currentBlueOrbPos[1]);
|
||||
setCurrentBlueOrbPosZ(currentBlueOrbPos[2]);
|
||||
|
||||
setTimeout(() => {
|
||||
setCurrentBlueOrbAnimating(true);
|
||||
setCurrentBlueOrbPosX(0.5);
|
||||
setCurrentBlueOrbPosY(0);
|
||||
setCurrentBlueOrbPosZ(0);
|
||||
}, 1500);
|
||||
|
||||
setTimeout(() => {
|
||||
setCurrentBlueOrbAnimating(false);
|
||||
}, 4200);
|
||||
}
|
||||
},
|
||||
[
|
||||
|
@ -536,6 +588,11 @@ const InputHandler = () => {
|
|||
currentBlueOrb,
|
||||
moveAndChangeBlueOrbFocus,
|
||||
changeBlueOrbFocus,
|
||||
setAnimationState,
|
||||
setCurrentBlueOrbPosX,
|
||||
setCurrentBlueOrbPosY,
|
||||
setCurrentBlueOrbPosZ,
|
||||
setCurrentBlueOrbAnimating,
|
||||
]
|
||||
);
|
||||
|
2
src/components/InputHandler/inputHandlerHelpers.ts
Normal file
2
src/components/InputHandler/inputHandlerHelpers.ts
Normal file
|
@ -0,0 +1,2 @@
|
|||
export const sleep = (ms: number) =>
|
||||
new Promise((resolve) => setTimeout(resolve, ms));
|
|
@ -8,6 +8,7 @@ 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";
|
||||
import throwBlueOrbSpriteSheet from "../../static/sprites/throw_blue_orb.png";
|
||||
import { useRecoilValue } from "recoil";
|
||||
import { lainMoveStateAtom, lainMovingAtom } from "./LainAtom";
|
||||
|
||||
|
@ -46,68 +47,67 @@ const LainConstructor = (props: LainConstructorProps) => {
|
|||
);
|
||||
};
|
||||
|
||||
export const LainIntro = () => {
|
||||
return (
|
||||
<LainConstructor
|
||||
sprite={introSpriteSheet}
|
||||
frameCount={50}
|
||||
framesHorizontal={10}
|
||||
framesVertical={5}
|
||||
/>
|
||||
);
|
||||
};
|
||||
export const LainIntro = () => (
|
||||
<LainConstructor
|
||||
sprite={introSpriteSheet}
|
||||
frameCount={50}
|
||||
framesHorizontal={10}
|
||||
framesVertical={5}
|
||||
/>
|
||||
);
|
||||
|
||||
export const LainStanding = () => {
|
||||
return (
|
||||
<LainConstructor
|
||||
sprite={standingSpriteSheet}
|
||||
frameCount={3}
|
||||
framesHorizontal={3}
|
||||
framesVertical={1}
|
||||
/>
|
||||
);
|
||||
};
|
||||
export const LainStanding = () => (
|
||||
<LainConstructor
|
||||
sprite={standingSpriteSheet}
|
||||
frameCount={3}
|
||||
framesHorizontal={3}
|
||||
framesVertical={1}
|
||||
/>
|
||||
);
|
||||
|
||||
export const LainMoveDown = () => {
|
||||
return (
|
||||
<LainConstructor
|
||||
sprite={moveDownSpriteSheet}
|
||||
frameCount={36}
|
||||
framesHorizontal={6}
|
||||
framesVertical={6}
|
||||
/>
|
||||
);
|
||||
};
|
||||
export const LainMoveDown = () => (
|
||||
<LainConstructor
|
||||
sprite={moveDownSpriteSheet}
|
||||
frameCount={36}
|
||||
framesHorizontal={6}
|
||||
framesVertical={6}
|
||||
/>
|
||||
);
|
||||
|
||||
export const LainMoveLeft = () => {
|
||||
export const LainMoveLeft = () => (
|
||||
<LainConstructor
|
||||
sprite={moveLeftSpriteSheet}
|
||||
frameCount={47}
|
||||
framesHorizontal={8}
|
||||
framesVertical={6}
|
||||
/>
|
||||
);
|
||||
|
||||
export const LainMoveRight = () => (
|
||||
<LainConstructor
|
||||
sprite={moveRightSpriteSheet}
|
||||
frameCount={47}
|
||||
framesHorizontal={8}
|
||||
framesVertical={6}
|
||||
/>
|
||||
);
|
||||
|
||||
export const LainMoveUp = () => (
|
||||
<LainConstructor
|
||||
sprite={moveUpSpriteSheet}
|
||||
frameCount={36}
|
||||
framesHorizontal={6}
|
||||
framesVertical={6}
|
||||
/>
|
||||
);
|
||||
|
||||
export const LainThrowBlueOrb = () => {
|
||||
return (
|
||||
<LainConstructor
|
||||
sprite={moveLeftSpriteSheet}
|
||||
sprite={throwBlueOrbSpriteSheet}
|
||||
frameCount={47}
|
||||
framesHorizontal={8}
|
||||
framesVertical={6}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
export const LainMoveRight = () => {
|
||||
return (
|
||||
<LainConstructor
|
||||
sprite={moveRightSpriteSheet}
|
||||
frameCount={47}
|
||||
framesHorizontal={8}
|
||||
framesVertical={6}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
export const LainMoveUp = () => {
|
||||
return (
|
||||
<LainConstructor
|
||||
sprite={moveUpSpriteSheet}
|
||||
frameCount={36}
|
||||
framesHorizontal={6}
|
||||
framesVertical={6}
|
||||
framesHorizontal={7}
|
||||
framesVertical={7}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
|
|
@ -8,7 +8,7 @@ import OrthoCamera from "../OrthoCamera/OrthoCamera";
|
|||
import Preloader from "../Preloader";
|
||||
import { useRecoilValue, useSetRecoilState } from "recoil";
|
||||
import { lainMoveStateAtom, lainMovingAtom } from "../Lain/LainAtom";
|
||||
import InputHandler from "../InputHandler";
|
||||
import InputHandler from "../InputHandler/InputHandler";
|
||||
import MainSceneIntro from "./MainSceneIntro";
|
||||
import {
|
||||
mainGroupPosYAtom,
|
||||
|
|
|
@ -10,6 +10,7 @@ import longHudSpriteSheet from "../static/sprites/long_hud.png";
|
|||
import longHudMirroredSpriteSheet from "../static/sprites/long_hud_mirrored.png";
|
||||
import boringHudSpriteSheet from "../static/sprites/long_hud_boring.png";
|
||||
import boringHudMirroredSpriteSheet from "../static/sprites/long_hud_boring_mirrored.png";
|
||||
import throwBlueOrbSpriteSheet from "../static/sprites/throw_blue_orb.png";
|
||||
|
||||
import * as THREE from "three";
|
||||
import { useLoader, useThree } from "react-three-fiber";
|
||||
|
@ -24,6 +25,7 @@ const Preloader = () => {
|
|||
const moveLeft = useLoader(THREE.TextureLoader, moveLeftSpriteSheet);
|
||||
const moveRight = useLoader(THREE.TextureLoader, moveRightSpriteSheet);
|
||||
const stand = useLoader(THREE.TextureLoader, standingSpriteSheet);
|
||||
const throwBlueOrb = useLoader(THREE.TextureLoader, throwBlueOrbSpriteSheet);
|
||||
const bigHud = useLoader(THREE.TextureLoader, bigHudSpriteSheet);
|
||||
const bigHudMirrored = useLoader(
|
||||
THREE.TextureLoader,
|
||||
|
@ -54,6 +56,7 @@ const Preloader = () => {
|
|||
gl.initTexture(longHudMirrored);
|
||||
gl.initTexture(boringHud);
|
||||
gl.initTexture(boringHudMirrored);
|
||||
gl.initTexture(throwBlueOrb);
|
||||
}, [
|
||||
moveDown,
|
||||
moveUp,
|
||||
|
@ -68,6 +71,7 @@ const Preloader = () => {
|
|||
longHud,
|
||||
longHudMirrored,
|
||||
intro,
|
||||
throwBlueOrb,
|
||||
]);
|
||||
return null;
|
||||
};
|
||||
|
|
|
@ -51,7 +51,10 @@
|
|||
"0417_right": {
|
||||
"id": "0413",
|
||||
"hud": "fg_hud_5"
|
||||
},
|
||||
|
||||
"0506_down": {
|
||||
"id": "+0422",
|
||||
"hud": "fg_hud_1"
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
|
|
@ -18,5 +18,9 @@
|
|||
"right": {
|
||||
"frame_count": 47,
|
||||
"duration": 3903.704
|
||||
},
|
||||
"throw_blue_orb": {
|
||||
"frame_count": 47,
|
||||
"duration": 3903.704
|
||||
}
|
||||
}
|
||||
|
|
Loading…
Reference in a new issue