mirror of
https://github.com/ad044/lainTSX.git
synced 2024-10-22 23:19:06 +00:00
switching hud based on current sprite
This commit is contained in:
parent
11b5b8fed4
commit
6e53b78fc7
11 changed files with 94 additions and 104 deletions
|
@ -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);
|
||||
|
|
|
@ -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<PositionAndScaleProps>();
|
||||
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);
|
||||
updateHUD();
|
||||
setTimeout(() => {
|
||||
setCurrentSpriteHUD((level_sprite_huds as SpriteHuds)[move]);
|
||||
animateSpriteHUDIn(currentSpriteHUD);
|
||||
updateHUD();
|
||||
}, 500);
|
||||
}
|
||||
},
|
||||
[setAnimationState, animateSpriteHUDIn, currentSpriteHUD]
|
||||
[setAnimationState, updateHUD]
|
||||
);
|
||||
|
||||
const handleKeyPress = useCallback(
|
||||
|
@ -256,10 +259,11 @@ const Game = () => {
|
|||
<Hub currentSprite={currentSprite} />
|
||||
<Lights />
|
||||
<OrthoCamera
|
||||
bigHudPosition={bigHudPosition!}
|
||||
boringHudPosition={boringHudPosition!}
|
||||
// bigHudPosition={bigHudPosition!}
|
||||
// boringHudPosition={boringHudPosition!}
|
||||
longHUDPosX={longHUDPosX}
|
||||
longHudPosition={[
|
||||
longHudPosX,
|
||||
currentSpriteHUD!["long"]["position"][0],
|
||||
currentSpriteHUD!["long"]["position"][1],
|
||||
currentSpriteHUD!["long"]["position"][2],
|
||||
]}
|
||||
|
|
|
@ -1,16 +1,8 @@
|
|||
import React, {
|
||||
useRef,
|
||||
useCallback,
|
||||
Suspense,
|
||||
useState,
|
||||
useEffect,
|
||||
} from "react";
|
||||
import { GLTFLoader, GLTF } from "three/examples/jsm/loaders/GLTFLoader.js";
|
||||
import { useThree, useFrame, Canvas, useLoader } from "react-three-fiber";
|
||||
import { OrbitControls, Html, draco, Icosahedron } from "drei";
|
||||
import Lain from "./Lain";
|
||||
import { Mesh, MeshLambertMaterial, DoubleSide } from "three";
|
||||
import { draco } from "drei";
|
||||
import React from "react";
|
||||
import { useLoader } from "react-three-fiber";
|
||||
import * as THREE from "three";
|
||||
import { GLTF, GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader.js";
|
||||
|
||||
type GrayRingProps = {
|
||||
lowerRingPositionY: number;
|
||||
|
@ -25,7 +17,7 @@ type GLTFResult = GLTF & {
|
|||
};
|
||||
|
||||
const GrayRing = (props: any) => {
|
||||
const { nodes, materials } = useLoader<GLTFResult>(
|
||||
const { nodes } = useLoader<GLTFResult>(
|
||||
GLTFLoader,
|
||||
"/models/ring0.glb",
|
||||
draco("/draco-gltf/")
|
||||
|
|
|
@ -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<any, any>;
|
||||
longHudScale: PositionAndScaleProps;
|
||||
|
||||
boringHudPosition: PositionAndScaleProps;
|
||||
// boringHudPosition: PositionAndScaleProps;
|
||||
boringHudScale: PositionAndScaleProps;
|
||||
|
||||
bigHudPosition: PositionAndScaleProps;
|
||||
// bigHudPosition: PositionAndScaleProps;
|
||||
bigHudScale: PositionAndScaleProps;
|
||||
};
|
||||
|
||||
|
@ -56,14 +58,18 @@ const HUDElement = (props: HUDElementProps) => {
|
|||
|
||||
return (
|
||||
<>
|
||||
<sprite position={props.longHudPosition} scale={props.longHudScale}>
|
||||
<a.sprite
|
||||
position={props.longHudPosition}
|
||||
position-x={props.longHUDPosX}
|
||||
scale={props.longHudScale}
|
||||
>
|
||||
<spriteMaterial
|
||||
attach="material"
|
||||
map={longHudTexture}
|
||||
transparent={true}
|
||||
/>
|
||||
</sprite>
|
||||
<sprite position={props.boringHudPosition} scale={props.boringHudScale}>
|
||||
</a.sprite>
|
||||
{/* <sprite position={props.boringHudPosition} scale={props.boringHudScale}>
|
||||
<spriteMaterial
|
||||
attach="material"
|
||||
map={longHudBoringTexture}
|
||||
|
@ -76,7 +82,7 @@ const HUDElement = (props: HUDElementProps) => {
|
|||
map={bigHudTexture}
|
||||
transparent={true}
|
||||
/>
|
||||
</sprite>
|
||||
</sprite> */}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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}
|
||||
/>
|
||||
|
|
|
@ -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;
|
||||
};
|
||||
|
||||
|
|
|
@ -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<GLTFResult>(
|
||||
const { nodes } = useLoader<GLTFResult>(
|
||||
GLTFLoader,
|
||||
"/models/ring1.glb",
|
||||
draco("/draco-gltf/")
|
||||
|
|
|
@ -14,7 +14,7 @@
|
|||
"041": {
|
||||
"up": "043",
|
||||
"down": "",
|
||||
"left": "",
|
||||
"left": "042",
|
||||
"right": "041"
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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],
|
||||
|
|
Loading…
Reference in a new issue