From 6e53b78fc7efdd1efa8a6057f8dd56660154f634 Mon Sep 17 00:00:00 2001 From: ad044 Date: Mon, 31 Aug 2020 19:08:27 +0400 Subject: [PATCH] switching hud based on current sprite --- src/App.tsx | 5 +- src/components/Game.tsx | 72 ++++++++++++---------- src/components/GrayRing.tsx | 18 ++---- src/components/HUDElement.tsx | 24 +++++--- src/components/Lain.tsx | 11 ++-- src/components/LevelSprite.tsx | 16 ++--- src/components/OrthoCamera.tsx | 28 +++------ src/components/Preloader.tsx | 6 +- src/components/PurpleRing.tsx | 12 ++-- src/resources/level_sprite_directions.json | 2 +- src/resources/level_sprite_huds.json | 4 +- 11 files changed, 94 insertions(+), 104 deletions(-) diff --git a/src/App.tsx b/src/App.tsx index f99233e..b644d20 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,8 +1,7 @@ -import React, { useEffect, useState, Suspense } from "react"; -import Intro from "./components/Intro"; +import React, { useEffect, useState } from "react"; import Game from "./components/Game"; -import "./static/css/main.css"; import "./static/css/hub.css"; +import "./static/css/main.css"; const App = () => { const [moveToGame, setMoveToGame] = useState(false); diff --git a/src/components/Game.tsx b/src/components/Game.tsx index 8cd2f2c..0ea816d 100644 --- a/src/components/Game.tsx +++ b/src/components/Game.tsx @@ -1,7 +1,13 @@ -import { a, useSpring } from "@react-spring/three"; +import { a, useSpring, update } from "@react-spring/three"; //import Orb from "./Orb"; import { OrbitControls } from "drei"; -import React, { Suspense, useCallback, useEffect, useState } from "react"; +import React, { + Suspense, + useCallback, + useEffect, + useState, + useRef, +} from "react"; import { Canvas } from "react-three-fiber"; import lain_animations from "../resources/lain_animations.json"; import level_sprite_directions from "../resources/level_sprite_directions.json"; @@ -44,18 +50,20 @@ const Game = () => { (level_sprite_huds as SpriteHuds)[currentSprite] ); - // we separate positions of the hud sprites into the state since we need to animate thme - const [longHudPosX, setLongHudPosX] = useState( - currentSpriteHUD["long"]["position"][0] - ); - const [boringHudPosition, setBoringHudPosition] = useState< - PositionAndScaleProps - >(); - const [bigHudPosition, setBigHudPosition] = useState(); + const [longHUDActive, setLongHUDActive] = useState(1); - const getMove = (currentLoc: string, key: string): string => { - return (level_sprite_directions as SpriteDirections)[currentLoc][key]; - }; + const { longHUDPositionX } = useSpring({ + longHUDPositionX: longHUDActive, + config: { duration: 500 }, + }); + + const longHUDPosX = longHUDPositionX.to( + [0, 1], + [ + currentSpriteHUD["long"]["initial_position"][0], + currentSpriteHUD["long"]["position"][0], + ] + ); const [{ cameraRotationY }, setCameraRotationY] = useSpring( () => ({ @@ -121,6 +129,10 @@ const Game = () => { const camPosY = cameraPositionY.to([0, 1], [0, Math.PI]); const lainPosY = lainPositionY.to([0, 1], [0, Math.PI]); + const getMove = (currentLoc: string, key: string): string => { + return (level_sprite_directions as SpriteDirections)[currentLoc][key]; + }; + const getKeyCodeAssociation = (keyCode: number): string => { return ({ 40: "down", @@ -168,21 +180,9 @@ const Game = () => { [moveCamera, moveLain, rotateCamera] ); - const animateSpriteHUDIn = useCallback( - (spriteHUD: SpriteHuds) => { - const [longPos, boringPos, bigPos] = [ - spriteHUD["long"]["position"], - spriteHUD["boring"]["position"], - spriteHUD["big"]["position"], - ]; - const [initialLongPos, initialBoringPos, initialBigPos] = [ - spriteHUD["long"]["initial_position"], - spriteHUD["boring"]["initial_position"], - spriteHUD["big"]["initial_position"], - ]; - }, - [longHudPosX] - ); + const updateHUD = useCallback(() => { + setLongHUDActive((prev: number) => Number(!prev)); + }, [setLongHUDActive]); const moveDispatcher = useCallback( (move: string, key: string) => { @@ -203,11 +203,14 @@ const Game = () => { // only change sprite focus default: setCurrentSprite(move); - setCurrentSpriteHUD((level_sprite_huds as SpriteHuds)[move]); - animateSpriteHUDIn(currentSpriteHUD); + updateHUD(); + setTimeout(() => { + setCurrentSpriteHUD((level_sprite_huds as SpriteHuds)[move]); + updateHUD(); + }, 500); } }, - [setAnimationState, animateSpriteHUDIn, currentSpriteHUD] + [setAnimationState, updateHUD] ); const handleKeyPress = useCallback( @@ -256,10 +259,11 @@ const Game = () => { { - const { nodes, materials } = useLoader( + const { nodes } = useLoader( GLTFLoader, "/models/ring0.glb", draco("/draco-gltf/") diff --git a/src/components/HUDElement.tsx b/src/components/HUDElement.tsx index 7bebd18..15f2e6e 100644 --- a/src/components/HUDElement.tsx +++ b/src/components/HUDElement.tsx @@ -1,10 +1,11 @@ -import React, { Suspense } from "react"; -import { useFrame, useLoader, useThree } from "react-three-fiber"; +import React from "react"; +import { useLoader } from "react-three-fiber"; import * as THREE from "three"; +import bigHud from "../static/sprites/big_hud.png"; import longHud from "../static/sprites/long_hud.png"; import boringHud from "../static/sprites/long_hud_boring.png"; -import bigHud from "../static/sprites/big_hud.png"; import { PositionAndScaleProps } from "./Hub"; +import { a, Interpolation } from "@react-spring/three"; export type HUDElementProps = { longHudType: string; @@ -12,12 +13,13 @@ export type HUDElementProps = { bigHudType: string; longHudPosition: PositionAndScaleProps; + longHUDPosX: Interpolation; longHudScale: PositionAndScaleProps; - boringHudPosition: PositionAndScaleProps; + // boringHudPosition: PositionAndScaleProps; boringHudScale: PositionAndScaleProps; - bigHudPosition: PositionAndScaleProps; + // bigHudPosition: PositionAndScaleProps; bigHudScale: PositionAndScaleProps; }; @@ -56,14 +58,18 @@ const HUDElement = (props: HUDElementProps) => { return ( <> - + - - + + {/* { map={bigHudTexture} transparent={true} /> - + */} ); }; diff --git a/src/components/Lain.tsx b/src/components/Lain.tsx index 6eed98a..f96a8ee 100644 --- a/src/components/Lain.tsx +++ b/src/components/Lain.tsx @@ -1,14 +1,13 @@ +import { a, Interpolation } from "@react-spring/three"; import React, { Suspense, useState } from "react"; -import { useFrame, useLoader, useThree } from "react-three-fiber"; +import { useFrame, useLoader } from "react-three-fiber"; import * as THREE from "three"; -import introSpriteSheet from "../static/sprites/intro.png"; +import { PlainSingularAnimator } from "three-plain-animator/lib/plain-singular-animator"; import moveDownSpriteSheet from "../static/sprites/jump_down.png"; -import standingSpriteSheet from "../static/sprites/standing.png"; +import moveUpSpriteSheet from "../static/sprites/jump_up.png"; import moveLeftSpriteSheet from "../static/sprites/move_left.png"; import moveRightSpriteSheet from "../static/sprites/move_right.png"; -import moveUpSpriteSheet from "../static/sprites/jump_up.png"; -import { PlainSingularAnimator } from "three-plain-animator/lib/plain-singular-animator"; -import { a, Interpolation, useSpring } from "@react-spring/three"; +import standingSpriteSheet from "../static/sprites/standing.png"; type LainProps = { isLainMoving: boolean; diff --git a/src/components/LevelSprite.tsx b/src/components/LevelSprite.tsx index 574a10c..ca2fe2a 100644 --- a/src/components/LevelSprite.tsx +++ b/src/components/LevelSprite.tsx @@ -1,14 +1,14 @@ -import React, { Suspense, useMemo, useState, useEffect, useRef } from "react"; -import { useFrame, useLoader, useThree } from "react-three-fiber"; +import React, { useRef } from "react"; +import { useFrame, useLoader } from "react-three-fiber"; import * as THREE from "three"; -import movie from "../static/sprites/movie.png"; -import movieActive from "../static/sprites/movie_active.png"; -import touko from "../static/sprites/touko.png"; -import toukoActive from "../static/sprites/touko_active.png"; -import s from "../static/sprites/s.png"; -import sActive from "../static/sprites/s_active.png"; import copland from "../static/sprites/copland.png"; import coplandActive from "../static/sprites/copland_active.png"; +import movie from "../static/sprites/movie.png"; +import movieActive from "../static/sprites/movie_active.png"; +import s from "../static/sprites/s.png"; +import sActive from "../static/sprites/s_active.png"; +import touko from "../static/sprites/touko.png"; +import toukoActive from "../static/sprites/touko_active.png"; type LevelSpriteConstructorProps = { sprite: string; diff --git a/src/components/OrthoCamera.tsx b/src/components/OrthoCamera.tsx index 8cad39b..cdd3cac 100644 --- a/src/components/OrthoCamera.tsx +++ b/src/components/OrthoCamera.tsx @@ -1,23 +1,8 @@ -import React, { - useState, - Suspense, - useCallback, - useEffect, - useMemo, - useRef, -} from "react"; -import { - useFrame, - Canvas, - useLoader, - useThree, - useCamera, - createPortal, -} from "react-three-fiber"; //import Orb from "./Orb"; -import { OrthographicCamera, Octahedron } from "drei"; -import { Matrix4, Scene, BasicDepthPacking } from "three"; -import * as THREE from "three"; +import { OrthographicCamera } from "drei"; +import React, { useMemo, useRef } from "react"; +import { useFrame, useThree } from "react-three-fiber"; +import { Scene } from "three"; import HUDElement, { HUDElementProps } from "./HUDElement"; interface OrthoCameraProps extends HUDElementProps { @@ -48,10 +33,11 @@ const OrthoCamera = (props: OrthoCameraProps) => { boringHudType={props.boringHudType} bigHudType={props.bigHudType} longHudPosition={props.longHudPosition} + longHUDPosX={props.longHUDPosX} longHudScale={props.longHudScale} - boringHudPosition={props.boringHudPosition} + // boringHudPosition={props.boringHudPosition} boringHudScale={props.boringHudScale} - bigHudPosition={props.bigHudPosition} + // bigHudPosition={props.bigHudPosition} bigHudScale={props.bigHudScale} key={props.id} /> diff --git a/src/components/Preloader.tsx b/src/components/Preloader.tsx index b69601c..b6493b0 100644 --- a/src/components/Preloader.tsx +++ b/src/components/Preloader.tsx @@ -14,11 +14,15 @@ const Preloader = () => { const moveUp = useLoader(THREE.TextureLoader, moveUpSpriteSheet); const moveLeft = useLoader(THREE.TextureLoader, moveLeftSpriteSheet); const moveRight = useLoader(THREE.TextureLoader, moveRightSpriteSheet); + const stand = useLoader(THREE.TextureLoader, standingSpriteSheet); const { gl } = useThree(); useLayoutEffect(() => { gl.initTexture(moveDown); gl.initTexture(moveUp); - }, [moveDown, moveUp, moveLeft, standingSpriteSheet, moveRight]); + gl.initTexture(moveLeft); + gl.initTexture(moveRight); + gl.initTexture(stand); + }, [moveDown, moveUp, moveLeft, moveRight, stand, gl]); return null; }; diff --git a/src/components/PurpleRing.tsx b/src/components/PurpleRing.tsx index 3efd0fd..f3f8a60 100644 --- a/src/components/PurpleRing.tsx +++ b/src/components/PurpleRing.tsx @@ -1,9 +1,9 @@ -import * as THREE from "three"; -import React, { useRef, useState, useEffect } from "react"; -import { useLoader, useFrame } from "react-three-fiber"; -import { GLTFLoader, GLTF } from "three/examples/jsm/loaders/GLTFLoader"; +import { a, useSpring } from "@react-spring/three"; import { draco } from "drei"; -import { useSpring, a } from "@react-spring/three"; +import React from "react"; +import { useFrame, useLoader } from "react-three-fiber"; +import * as THREE from "three"; +import { GLTF, GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader"; type GLTFResult = GLTF & { nodes: { @@ -21,7 +21,7 @@ const PurpleRing = (props: JSX.IntrinsicElements["group"]) => { [] ); - const { nodes, materials } = useLoader( + const { nodes } = useLoader( GLTFLoader, "/models/ring1.glb", draco("/draco-gltf/") diff --git a/src/resources/level_sprite_directions.json b/src/resources/level_sprite_directions.json index 55d355b..00f4a71 100644 --- a/src/resources/level_sprite_directions.json +++ b/src/resources/level_sprite_directions.json @@ -14,7 +14,7 @@ "041": { "up": "043", "down": "", - "left": "", + "left": "042", "right": "041" } } diff --git a/src/resources/level_sprite_huds.json b/src/resources/level_sprite_huds.json index 0e0ecca..9c6212f 100644 --- a/src/resources/level_sprite_huds.json +++ b/src/resources/level_sprite_huds.json @@ -21,10 +21,10 @@ "042": { "id": "042hud", "long": { - "position": [-0.45, 0.15, -8.6], + "position": [-0.45, -0.15, -8.6], "scale": [1, 0.03, 1], "type": "normal", - "initial_position": [-1.45, 0.15, -8.6] + "initial_position": [-1.45, -0.15, -8.6] }, "boring": { "position": [0.48, 0.174, -8.6],