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 React, { useEffect, useState } from "react";
|
||||||
import Intro from "./components/Intro";
|
|
||||||
import Game from "./components/Game";
|
import Game from "./components/Game";
|
||||||
import "./static/css/main.css";
|
|
||||||
import "./static/css/hub.css";
|
import "./static/css/hub.css";
|
||||||
|
import "./static/css/main.css";
|
||||||
|
|
||||||
const App = () => {
|
const App = () => {
|
||||||
const [moveToGame, setMoveToGame] = useState(false);
|
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 Orb from "./Orb";
|
||||||
import { OrbitControls } from "drei";
|
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 { Canvas } from "react-three-fiber";
|
||||||
import lain_animations from "../resources/lain_animations.json";
|
import lain_animations from "../resources/lain_animations.json";
|
||||||
import level_sprite_directions from "../resources/level_sprite_directions.json";
|
import level_sprite_directions from "../resources/level_sprite_directions.json";
|
||||||
|
@ -44,18 +50,20 @@ const Game = () => {
|
||||||
(level_sprite_huds as SpriteHuds)[currentSprite]
|
(level_sprite_huds as SpriteHuds)[currentSprite]
|
||||||
);
|
);
|
||||||
|
|
||||||
// we separate positions of the hud sprites into the state since we need to animate thme
|
const [longHUDActive, setLongHUDActive] = useState(1);
|
||||||
const [longHudPosX, setLongHudPosX] = useState(
|
|
||||||
currentSpriteHUD["long"]["position"][0]
|
|
||||||
);
|
|
||||||
const [boringHudPosition, setBoringHudPosition] = useState<
|
|
||||||
PositionAndScaleProps
|
|
||||||
>();
|
|
||||||
const [bigHudPosition, setBigHudPosition] = useState<PositionAndScaleProps>();
|
|
||||||
|
|
||||||
const getMove = (currentLoc: string, key: string): string => {
|
const { longHUDPositionX } = useSpring({
|
||||||
return (level_sprite_directions as SpriteDirections)[currentLoc][key];
|
longHUDPositionX: longHUDActive,
|
||||||
};
|
config: { duration: 500 },
|
||||||
|
});
|
||||||
|
|
||||||
|
const longHUDPosX = longHUDPositionX.to(
|
||||||
|
[0, 1],
|
||||||
|
[
|
||||||
|
currentSpriteHUD["long"]["initial_position"][0],
|
||||||
|
currentSpriteHUD["long"]["position"][0],
|
||||||
|
]
|
||||||
|
);
|
||||||
|
|
||||||
const [{ cameraRotationY }, setCameraRotationY] = useSpring(
|
const [{ cameraRotationY }, setCameraRotationY] = useSpring(
|
||||||
() => ({
|
() => ({
|
||||||
|
@ -121,6 +129,10 @@ const Game = () => {
|
||||||
const camPosY = cameraPositionY.to([0, 1], [0, Math.PI]);
|
const camPosY = cameraPositionY.to([0, 1], [0, Math.PI]);
|
||||||
const lainPosY = lainPositionY.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 => {
|
const getKeyCodeAssociation = (keyCode: number): string => {
|
||||||
return ({
|
return ({
|
||||||
40: "down",
|
40: "down",
|
||||||
|
@ -168,21 +180,9 @@ const Game = () => {
|
||||||
[moveCamera, moveLain, rotateCamera]
|
[moveCamera, moveLain, rotateCamera]
|
||||||
);
|
);
|
||||||
|
|
||||||
const animateSpriteHUDIn = useCallback(
|
const updateHUD = useCallback(() => {
|
||||||
(spriteHUD: SpriteHuds) => {
|
setLongHUDActive((prev: number) => Number(!prev));
|
||||||
const [longPos, boringPos, bigPos] = [
|
}, [setLongHUDActive]);
|
||||||
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 moveDispatcher = useCallback(
|
const moveDispatcher = useCallback(
|
||||||
(move: string, key: string) => {
|
(move: string, key: string) => {
|
||||||
|
@ -203,11 +203,14 @@ const Game = () => {
|
||||||
// only change sprite focus
|
// only change sprite focus
|
||||||
default:
|
default:
|
||||||
setCurrentSprite(move);
|
setCurrentSprite(move);
|
||||||
setCurrentSpriteHUD((level_sprite_huds as SpriteHuds)[move]);
|
updateHUD();
|
||||||
animateSpriteHUDIn(currentSpriteHUD);
|
setTimeout(() => {
|
||||||
|
setCurrentSpriteHUD((level_sprite_huds as SpriteHuds)[move]);
|
||||||
|
updateHUD();
|
||||||
|
}, 500);
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
[setAnimationState, animateSpriteHUDIn, currentSpriteHUD]
|
[setAnimationState, updateHUD]
|
||||||
);
|
);
|
||||||
|
|
||||||
const handleKeyPress = useCallback(
|
const handleKeyPress = useCallback(
|
||||||
|
@ -256,10 +259,11 @@ const Game = () => {
|
||||||
<Hub currentSprite={currentSprite} />
|
<Hub currentSprite={currentSprite} />
|
||||||
<Lights />
|
<Lights />
|
||||||
<OrthoCamera
|
<OrthoCamera
|
||||||
bigHudPosition={bigHudPosition!}
|
// bigHudPosition={bigHudPosition!}
|
||||||
boringHudPosition={boringHudPosition!}
|
// boringHudPosition={boringHudPosition!}
|
||||||
|
longHUDPosX={longHUDPosX}
|
||||||
longHudPosition={[
|
longHudPosition={[
|
||||||
longHudPosX,
|
currentSpriteHUD!["long"]["position"][0],
|
||||||
currentSpriteHUD!["long"]["position"][1],
|
currentSpriteHUD!["long"]["position"][1],
|
||||||
currentSpriteHUD!["long"]["position"][2],
|
currentSpriteHUD!["long"]["position"][2],
|
||||||
]}
|
]}
|
||||||
|
|
|
@ -1,16 +1,8 @@
|
||||||
import React, {
|
import { draco } from "drei";
|
||||||
useRef,
|
import React from "react";
|
||||||
useCallback,
|
import { useLoader } from "react-three-fiber";
|
||||||
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 * as THREE from "three";
|
import * as THREE from "three";
|
||||||
|
import { GLTF, GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader.js";
|
||||||
|
|
||||||
type GrayRingProps = {
|
type GrayRingProps = {
|
||||||
lowerRingPositionY: number;
|
lowerRingPositionY: number;
|
||||||
|
@ -25,7 +17,7 @@ type GLTFResult = GLTF & {
|
||||||
};
|
};
|
||||||
|
|
||||||
const GrayRing = (props: any) => {
|
const GrayRing = (props: any) => {
|
||||||
const { nodes, materials } = useLoader<GLTFResult>(
|
const { nodes } = useLoader<GLTFResult>(
|
||||||
GLTFLoader,
|
GLTFLoader,
|
||||||
"/models/ring0.glb",
|
"/models/ring0.glb",
|
||||||
draco("/draco-gltf/")
|
draco("/draco-gltf/")
|
||||||
|
|
|
@ -1,10 +1,11 @@
|
||||||
import React, { Suspense } from "react";
|
import React from "react";
|
||||||
import { useFrame, useLoader, useThree } from "react-three-fiber";
|
import { useLoader } from "react-three-fiber";
|
||||||
import * as THREE from "three";
|
import * as THREE from "three";
|
||||||
|
import bigHud from "../static/sprites/big_hud.png";
|
||||||
import longHud from "../static/sprites/long_hud.png";
|
import longHud from "../static/sprites/long_hud.png";
|
||||||
import boringHud from "../static/sprites/long_hud_boring.png";
|
import boringHud from "../static/sprites/long_hud_boring.png";
|
||||||
import bigHud from "../static/sprites/big_hud.png";
|
|
||||||
import { PositionAndScaleProps } from "./Hub";
|
import { PositionAndScaleProps } from "./Hub";
|
||||||
|
import { a, Interpolation } from "@react-spring/three";
|
||||||
|
|
||||||
export type HUDElementProps = {
|
export type HUDElementProps = {
|
||||||
longHudType: string;
|
longHudType: string;
|
||||||
|
@ -12,12 +13,13 @@ export type HUDElementProps = {
|
||||||
bigHudType: string;
|
bigHudType: string;
|
||||||
|
|
||||||
longHudPosition: PositionAndScaleProps;
|
longHudPosition: PositionAndScaleProps;
|
||||||
|
longHUDPosX: Interpolation<any, any>;
|
||||||
longHudScale: PositionAndScaleProps;
|
longHudScale: PositionAndScaleProps;
|
||||||
|
|
||||||
boringHudPosition: PositionAndScaleProps;
|
// boringHudPosition: PositionAndScaleProps;
|
||||||
boringHudScale: PositionAndScaleProps;
|
boringHudScale: PositionAndScaleProps;
|
||||||
|
|
||||||
bigHudPosition: PositionAndScaleProps;
|
// bigHudPosition: PositionAndScaleProps;
|
||||||
bigHudScale: PositionAndScaleProps;
|
bigHudScale: PositionAndScaleProps;
|
||||||
};
|
};
|
||||||
|
|
||||||
|
@ -56,14 +58,18 @@ const HUDElement = (props: HUDElementProps) => {
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<sprite position={props.longHudPosition} scale={props.longHudScale}>
|
<a.sprite
|
||||||
|
position={props.longHudPosition}
|
||||||
|
position-x={props.longHUDPosX}
|
||||||
|
scale={props.longHudScale}
|
||||||
|
>
|
||||||
<spriteMaterial
|
<spriteMaterial
|
||||||
attach="material"
|
attach="material"
|
||||||
map={longHudTexture}
|
map={longHudTexture}
|
||||||
transparent={true}
|
transparent={true}
|
||||||
/>
|
/>
|
||||||
</sprite>
|
</a.sprite>
|
||||||
<sprite position={props.boringHudPosition} scale={props.boringHudScale}>
|
{/* <sprite position={props.boringHudPosition} scale={props.boringHudScale}>
|
||||||
<spriteMaterial
|
<spriteMaterial
|
||||||
attach="material"
|
attach="material"
|
||||||
map={longHudBoringTexture}
|
map={longHudBoringTexture}
|
||||||
|
@ -76,7 +82,7 @@ const HUDElement = (props: HUDElementProps) => {
|
||||||
map={bigHudTexture}
|
map={bigHudTexture}
|
||||||
transparent={true}
|
transparent={true}
|
||||||
/>
|
/>
|
||||||
</sprite>
|
</sprite> */}
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
|
@ -1,14 +1,13 @@
|
||||||
|
import { a, Interpolation } from "@react-spring/three";
|
||||||
import React, { Suspense, useState } from "react";
|
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 * 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 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 moveLeftSpriteSheet from "../static/sprites/move_left.png";
|
||||||
import moveRightSpriteSheet from "../static/sprites/move_right.png";
|
import moveRightSpriteSheet from "../static/sprites/move_right.png";
|
||||||
import moveUpSpriteSheet from "../static/sprites/jump_up.png";
|
import standingSpriteSheet from "../static/sprites/standing.png";
|
||||||
import { PlainSingularAnimator } from "three-plain-animator/lib/plain-singular-animator";
|
|
||||||
import { a, Interpolation, useSpring } from "@react-spring/three";
|
|
||||||
|
|
||||||
type LainProps = {
|
type LainProps = {
|
||||||
isLainMoving: boolean;
|
isLainMoving: boolean;
|
||||||
|
|
|
@ -1,14 +1,14 @@
|
||||||
import React, { Suspense, useMemo, useState, useEffect, useRef } from "react";
|
import React, { useRef } from "react";
|
||||||
import { useFrame, useLoader, useThree } from "react-three-fiber";
|
import { useFrame, useLoader } from "react-three-fiber";
|
||||||
import * as THREE from "three";
|
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 copland from "../static/sprites/copland.png";
|
||||||
import coplandActive from "../static/sprites/copland_active.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 = {
|
type LevelSpriteConstructorProps = {
|
||||||
sprite: string;
|
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 Orb from "./Orb";
|
||||||
import { OrthographicCamera, Octahedron } from "drei";
|
import { OrthographicCamera } from "drei";
|
||||||
import { Matrix4, Scene, BasicDepthPacking } from "three";
|
import React, { useMemo, useRef } from "react";
|
||||||
import * as THREE from "three";
|
import { useFrame, useThree } from "react-three-fiber";
|
||||||
|
import { Scene } from "three";
|
||||||
import HUDElement, { HUDElementProps } from "./HUDElement";
|
import HUDElement, { HUDElementProps } from "./HUDElement";
|
||||||
|
|
||||||
interface OrthoCameraProps extends HUDElementProps {
|
interface OrthoCameraProps extends HUDElementProps {
|
||||||
|
@ -48,10 +33,11 @@ const OrthoCamera = (props: OrthoCameraProps) => {
|
||||||
boringHudType={props.boringHudType}
|
boringHudType={props.boringHudType}
|
||||||
bigHudType={props.bigHudType}
|
bigHudType={props.bigHudType}
|
||||||
longHudPosition={props.longHudPosition}
|
longHudPosition={props.longHudPosition}
|
||||||
|
longHUDPosX={props.longHUDPosX}
|
||||||
longHudScale={props.longHudScale}
|
longHudScale={props.longHudScale}
|
||||||
boringHudPosition={props.boringHudPosition}
|
// boringHudPosition={props.boringHudPosition}
|
||||||
boringHudScale={props.boringHudScale}
|
boringHudScale={props.boringHudScale}
|
||||||
bigHudPosition={props.bigHudPosition}
|
// bigHudPosition={props.bigHudPosition}
|
||||||
bigHudScale={props.bigHudScale}
|
bigHudScale={props.bigHudScale}
|
||||||
key={props.id}
|
key={props.id}
|
||||||
/>
|
/>
|
||||||
|
|
|
@ -14,11 +14,15 @@ const Preloader = () => {
|
||||||
const moveUp = useLoader(THREE.TextureLoader, moveUpSpriteSheet);
|
const moveUp = useLoader(THREE.TextureLoader, moveUpSpriteSheet);
|
||||||
const moveLeft = useLoader(THREE.TextureLoader, moveLeftSpriteSheet);
|
const moveLeft = useLoader(THREE.TextureLoader, moveLeftSpriteSheet);
|
||||||
const moveRight = useLoader(THREE.TextureLoader, moveRightSpriteSheet);
|
const moveRight = useLoader(THREE.TextureLoader, moveRightSpriteSheet);
|
||||||
|
const stand = useLoader(THREE.TextureLoader, standingSpriteSheet);
|
||||||
const { gl } = useThree();
|
const { gl } = useThree();
|
||||||
useLayoutEffect(() => {
|
useLayoutEffect(() => {
|
||||||
gl.initTexture(moveDown);
|
gl.initTexture(moveDown);
|
||||||
gl.initTexture(moveUp);
|
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;
|
return null;
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
|
@ -1,9 +1,9 @@
|
||||||
import * as THREE from "three";
|
import { a, useSpring } from "@react-spring/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 { draco } from "drei";
|
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 & {
|
type GLTFResult = GLTF & {
|
||||||
nodes: {
|
nodes: {
|
||||||
|
@ -21,7 +21,7 @@ const PurpleRing = (props: JSX.IntrinsicElements["group"]) => {
|
||||||
[]
|
[]
|
||||||
);
|
);
|
||||||
|
|
||||||
const { nodes, materials } = useLoader<GLTFResult>(
|
const { nodes } = useLoader<GLTFResult>(
|
||||||
GLTFLoader,
|
GLTFLoader,
|
||||||
"/models/ring1.glb",
|
"/models/ring1.glb",
|
||||||
draco("/draco-gltf/")
|
draco("/draco-gltf/")
|
||||||
|
|
|
@ -14,7 +14,7 @@
|
||||||
"041": {
|
"041": {
|
||||||
"up": "043",
|
"up": "043",
|
||||||
"down": "",
|
"down": "",
|
||||||
"left": "",
|
"left": "042",
|
||||||
"right": "041"
|
"right": "041"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -21,10 +21,10 @@
|
||||||
"042": {
|
"042": {
|
||||||
"id": "042hud",
|
"id": "042hud",
|
||||||
"long": {
|
"long": {
|
||||||
"position": [-0.45, 0.15, -8.6],
|
"position": [-0.45, -0.15, -8.6],
|
||||||
"scale": [1, 0.03, 1],
|
"scale": [1, 0.03, 1],
|
||||||
"type": "normal",
|
"type": "normal",
|
||||||
"initial_position": [-1.45, 0.15, -8.6]
|
"initial_position": [-1.45, -0.15, -8.6]
|
||||||
},
|
},
|
||||||
"boring": {
|
"boring": {
|
||||||
"position": [0.48, 0.174, -8.6],
|
"position": [0.48, 0.174, -8.6],
|
||||||
|
|
Loading…
Reference in a new issue