From d991f84850b68ca6afb114981a220732e8897349 Mon Sep 17 00:00:00 2001 From: ad044 Date: Sun, 11 Oct 2020 22:02:06 +0400 Subject: [PATCH] adding blue orb interactions --- src/components/BlueOrb/BlueOrb.tsx | 37 +++++- src/components/BlueOrb/CurrentBlueOrbAtom.tsx | 28 ++++- src/components/HUD/HUDElementAtom.tsx | 6 +- .../{ => InputHandler}/InputHandler.tsx | 85 ++++++++++--- .../InputHandler/inputHandlerHelpers.ts | 2 + src/components/Lain/Lain.tsx | 112 +++++++++--------- src/components/MainScene/MainScene.tsx | 2 +- src/components/Preloader.tsx | 4 + src/resources/blue_orb_directions.json | 7 +- src/resources/lain_animations.json | 4 + 10 files changed, 205 insertions(+), 82 deletions(-) rename src/components/{ => InputHandler}/InputHandler.tsx (84%) create mode 100644 src/components/InputHandler/inputHandlerHelpers.ts diff --git a/src/components/BlueOrb/BlueOrb.tsx b/src/components/BlueOrb/BlueOrb.tsx index 1a8be6c..a3e119c 100644 --- a/src/components/BlueOrb/BlueOrb.tsx +++ b/src/components/BlueOrb/BlueOrb.tsx @@ -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 ( { 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(); + 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, ] ); diff --git a/src/components/InputHandler/inputHandlerHelpers.ts b/src/components/InputHandler/inputHandlerHelpers.ts new file mode 100644 index 0000000..a8c24f3 --- /dev/null +++ b/src/components/InputHandler/inputHandlerHelpers.ts @@ -0,0 +1,2 @@ +export const sleep = (ms: number) => + new Promise((resolve) => setTimeout(resolve, ms)); diff --git a/src/components/Lain/Lain.tsx b/src/components/Lain/Lain.tsx index 9b1f771..8e60194 100644 --- a/src/components/Lain/Lain.tsx +++ b/src/components/Lain/Lain.tsx @@ -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 ( - - ); -}; +export const LainIntro = () => ( + +); -export const LainStanding = () => { - return ( - - ); -}; +export const LainStanding = () => ( + +); -export const LainMoveDown = () => { - return ( - - ); -}; +export const LainMoveDown = () => ( + +); -export const LainMoveLeft = () => { +export const LainMoveLeft = () => ( + +); + +export const LainMoveRight = () => ( + +); + +export const LainMoveUp = () => ( + +); + +export const LainThrowBlueOrb = () => { return ( - ); -}; - -export const LainMoveRight = () => { - return ( - - ); -}; - -export const LainMoveUp = () => { - return ( - ); }; diff --git a/src/components/MainScene/MainScene.tsx b/src/components/MainScene/MainScene.tsx index 37367b7..69125ce 100644 --- a/src/components/MainScene/MainScene.tsx +++ b/src/components/MainScene/MainScene.tsx @@ -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, diff --git a/src/components/Preloader.tsx b/src/components/Preloader.tsx index 70a73c9..9d6fade 100644 --- a/src/components/Preloader.tsx +++ b/src/components/Preloader.tsx @@ -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; }; diff --git a/src/resources/blue_orb_directions.json b/src/resources/blue_orb_directions.json index 01aa73f..df46d3d 100644 --- a/src/resources/blue_orb_directions.json +++ b/src/resources/blue_orb_directions.json @@ -51,7 +51,10 @@ "0417_right": { "id": "0413", "hud": "fg_hud_5" + }, + + "0506_down": { + "id": "+0422", + "hud": "fg_hud_1" } - - } diff --git a/src/resources/lain_animations.json b/src/resources/lain_animations.json index 281ec4a..c132cbf 100644 --- a/src/resources/lain_animations.json +++ b/src/resources/lain_animations.json @@ -18,5 +18,9 @@ "right": { "frame_count": 47, "duration": 3903.704 + }, + "throw_blue_orb": { + "frame_count": 47, + "duration": 3903.704 } }