mirror of
https://github.com/ad044/lainTSX.git
synced 2024-10-22 23:19:06 +00:00
added a bit of level 5 sprites, started formatting to procedurally generate all sprites later
This commit is contained in:
ad044
parent
01a62a05d0
commit
0c9bb90b9a
9 changed files with 117 additions and 60 deletions
|
|
@ -1,12 +1,7 @@
|
|||
import { a, useSpring } 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 } 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";
|
||||
|
|
@ -17,7 +12,7 @@ import Lain, {
|
|||
LainMoveLeft,
|
||||
LainMoveRight,
|
||||
LainMoveUp,
|
||||
LainStanding
|
||||
LainStanding,
|
||||
} from "./Lain";
|
||||
import Lights from "./Lights";
|
||||
import OrthoCamera from "./OrthoCamera";
|
||||
|
|
@ -44,9 +39,11 @@ const Game = () => {
|
|||
const [isLainMoving, setLainMoving] = useState(false);
|
||||
const [lainMoveState, setLainMoveState] = useState(<LainStanding />);
|
||||
|
||||
const [currentSprite, setCurrentSprite] = useState("0422");
|
||||
const [orthoCameraPosY, setOrthoCameraPosY] = useState(0);
|
||||
|
||||
const [currentSprite, setCurrentSprite] = useState("0506");
|
||||
const [currentSpriteHUD, setCurrentSpriteHUD] = useState<SpriteHuds>(
|
||||
(level_sprite_huds as SpriteHuds)[currentSprite]
|
||||
(level_sprite_huds as SpriteHuds)[currentSprite.substr(2)]
|
||||
);
|
||||
|
||||
const [HUDActive, setHUDActive] = useState(1);
|
||||
|
|
@ -176,12 +173,12 @@ const Game = () => {
|
|||
setLainMoveState(<LainMoveDown />);
|
||||
break;
|
||||
case "left":
|
||||
rotateCamera(0.1);
|
||||
rotateCamera(0.15);
|
||||
setLainMoveState(<LainMoveLeft />);
|
||||
break;
|
||||
case "up":
|
||||
moveCamera(-0.3);
|
||||
moveLain(0.3);
|
||||
moveCamera(-0.6);
|
||||
moveLain(0.6);
|
||||
setLainMoveState(<LainMoveUp />);
|
||||
break;
|
||||
case "right":
|
||||
|
|
@ -211,18 +208,27 @@ const Game = () => {
|
|||
|
||||
const moveDispatcher = useCallback(
|
||||
(move: string, key: string) => {
|
||||
console.log(move[0]);
|
||||
switch (move[0]) {
|
||||
// do nothing / cant move
|
||||
case "":
|
||||
case undefined:
|
||||
break;
|
||||
// "+" in the json denotes that the sprite chosen by getMove is not currently on screen,
|
||||
// therefore lain should first do a move (up/down/left/right) and then that sprite
|
||||
// will be chosen.
|
||||
case "+":
|
||||
// hide the hud
|
||||
updateHUD();
|
||||
// disable glow on current sprite
|
||||
setCurrentSprite("");
|
||||
setAnimationState(key);
|
||||
setTimeout(() => {
|
||||
setCurrentSprite(move);
|
||||
setCurrentSpriteHUD((level_sprite_huds as SpriteHuds)[move]);
|
||||
setOrthoCameraPosY(1.88);
|
||||
updateHUD();
|
||||
setCurrentSprite(move.substr(1));
|
||||
setCurrentSpriteHUD(
|
||||
(level_sprite_huds as SpriteHuds)[move.substr(3)]
|
||||
);
|
||||
}, (lain_animations as LainAnimations)[key]["duration"] + 200);
|
||||
break;
|
||||
// only change sprite focus
|
||||
|
|
@ -232,7 +238,9 @@ const Game = () => {
|
|||
updateHUD();
|
||||
setTimeout(() => {
|
||||
// change hud while its hidden
|
||||
setCurrentSpriteHUD((level_sprite_huds as SpriteHuds)[move]);
|
||||
setCurrentSpriteHUD(
|
||||
(level_sprite_huds as SpriteHuds)[move.substr(2)]
|
||||
);
|
||||
// toggle it again to be shown in the new position
|
||||
updateHUD();
|
||||
}, 500);
|
||||
|
|
@ -247,11 +255,11 @@ const Game = () => {
|
|||
|
||||
const key = getKeyCodeAssociation(keyCode);
|
||||
|
||||
const move = getMove(currentSprite, key);
|
||||
if (key && !isLainMoving) {
|
||||
const move = getMove(currentSprite, key);
|
||||
|
||||
console.log(key);
|
||||
console.log(key);
|
||||
|
||||
if (!isLainMoving && key) {
|
||||
moveDispatcher(move, key);
|
||||
}
|
||||
},
|
||||
|
|
@ -308,6 +316,7 @@ const Game = () => {
|
|||
longHUDScale={currentSpriteHUD!["long"]["scale"]}
|
||||
boringHUDScale={currentSpriteHUD!["boring"]["scale"]}
|
||||
bigHUDScale={currentSpriteHUD!["big"]["scale"]}
|
||||
orthoCameraPosY={orthoCameraPosY}
|
||||
id={currentSpriteHUD!["id"]}
|
||||
/>
|
||||
</Suspense>
|
||||
|
|
|
|||
|
|
@ -5,8 +5,7 @@ import * as THREE from "three";
|
|||
import { GLTF, GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader.js";
|
||||
|
||||
type GrayRingProps = {
|
||||
lowerRingPositionY: number;
|
||||
lowerRingRotationY: number;
|
||||
grayRingPosY: number;
|
||||
};
|
||||
|
||||
type GLTFResult = GLTF & {
|
||||
|
|
@ -16,17 +15,18 @@ type GLTFResult = GLTF & {
|
|||
materials: {};
|
||||
};
|
||||
|
||||
const GrayRing = (props: any) => {
|
||||
const GrayRing = (props: GrayRingProps) => {
|
||||
const { nodes } = useLoader<GLTFResult>(
|
||||
GLTFLoader,
|
||||
"/models/ring0.glb",
|
||||
draco("/draco-gltf/")
|
||||
);
|
||||
|
||||
// -0.27
|
||||
return (
|
||||
<group
|
||||
scale={[1.3, 1.3, 1.3]}
|
||||
position={[0, -0.27, 0]}
|
||||
position={[0, props.grayRingPosY, 0]}
|
||||
rotation={[0, 0.26, 0]}
|
||||
dispose={null}
|
||||
>
|
||||
|
|
|
|||
|
|
@ -11,8 +11,11 @@ const Hub = (props: any) => {
|
|||
return (
|
||||
<>
|
||||
<Suspense fallback={<>loading...</>}>
|
||||
<PurpleRing />
|
||||
<GrayRing />
|
||||
{/* average distance between rings from my CALCULATIONS is 1.87 in our case */}
|
||||
<PurpleRing purpleRingPosY={2.27}/>
|
||||
<GrayRing grayRingPosY={1.6} />
|
||||
<PurpleRing purpleRingPosY={0.4}/>
|
||||
<GrayRing grayRingPosY={-0.27} />
|
||||
{Object.values(level_sprites).map((sprite) => {
|
||||
return (
|
||||
<LevelSprite
|
||||
|
|
|
|||
|
|
@ -1,14 +1,14 @@
|
|||
import React, { useRef, useMemo } from "react";
|
||||
import { useFrame, useLoader } from "react-three-fiber";
|
||||
import * as THREE from "three";
|
||||
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";
|
||||
import Cou from "../static/sprites/Cou.png";
|
||||
import CouActive from "../static/sprites/Cou_active.png";
|
||||
import Dc from "../static/sprites/Dc.png";
|
||||
import DcActive from "../static/sprites/Dc_active.png";
|
||||
import SSkn from "../static/sprites/SSkn.png";
|
||||
import SSKnActive from "../static/sprites/SSkn_active.png";
|
||||
import Tda from "../static/sprites/Tda.png";
|
||||
import TdaActive from "../static/sprites/Tda_active.png";
|
||||
|
||||
type LevelSpriteConstructorProps = {
|
||||
sprite: string;
|
||||
|
|
@ -27,13 +27,12 @@ const LevelSprite = (props: LevelSpriteConstructorProps) => {
|
|||
// 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
|
||||
// (yes, imbad at naming them)
|
||||
const spriteToPath = (sprite: string) => {
|
||||
return ({
|
||||
movie: [movie, movieActive],
|
||||
touko: [touko, toukoActive],
|
||||
s: [s, sActive],
|
||||
copland: [copland, coplandActive],
|
||||
Dc: [Dc, DcActive],
|
||||
Tda: [Tda, TdaActive],
|
||||
SSkn: [SSkn, SSKnActive],
|
||||
Cou: [Cou, CouActive],
|
||||
} as SpriteToPath)[sprite];
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -7,6 +7,7 @@ import HUDElement, { HUDElementProps } from "./HUDElement";
|
|||
|
||||
interface OrthoCameraProps extends HUDElementProps {
|
||||
id: string;
|
||||
orthoCameraPosY: number;
|
||||
}
|
||||
|
||||
const OrthoCamera = (props: OrthoCameraProps) => {
|
||||
|
|
@ -22,11 +23,11 @@ const OrthoCamera = (props: OrthoCameraProps) => {
|
|||
gl.render(virtualScene, virtualCam.current!);
|
||||
}, 1);
|
||||
|
||||
//-0.6
|
||||
return (
|
||||
<OrthographicCamera
|
||||
<orthographicCamera
|
||||
ref={virtualCam}
|
||||
makeDefault={false}
|
||||
position={[0, 0, 10]}
|
||||
position={[0, props.orthoCameraPosY, 10]}
|
||||
>
|
||||
<HUDElement
|
||||
longHUDType={props.longHUDType}
|
||||
|
|
@ -43,7 +44,7 @@ const OrthoCamera = (props: OrthoCameraProps) => {
|
|||
bigHUDScale={props.bigHUDScale}
|
||||
key={props.id}
|
||||
/>
|
||||
</OrthographicCamera>
|
||||
</orthographicCamera>
|
||||
);
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -5,6 +5,10 @@ import { useFrame, useLoader } from "react-three-fiber";
|
|||
import * as THREE from "three";
|
||||
import { GLTF, GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader";
|
||||
|
||||
type PurpleRingProps = {
|
||||
purpleRingPosY: number;
|
||||
};
|
||||
|
||||
type GLTFResult = GLTF & {
|
||||
nodes: {
|
||||
Circle002: THREE.Mesh;
|
||||
|
|
@ -12,7 +16,7 @@ type GLTFResult = GLTF & {
|
|||
materials: {};
|
||||
};
|
||||
|
||||
const PurpleRing = (props: JSX.IntrinsicElements["group"]) => {
|
||||
const PurpleRing = (props: PurpleRingProps) => {
|
||||
const [{ purpleRingRotationY }, setPurpleRingRotationY] = useSpring(
|
||||
() => ({
|
||||
purpleRingRotationY: 0,
|
||||
|
|
@ -37,7 +41,7 @@ const PurpleRing = (props: JSX.IntrinsicElements["group"]) => {
|
|||
|
||||
return (
|
||||
<a.group
|
||||
position={[0, 0.4, 0]}
|
||||
position={[0, props.purpleRingPosY, 0]}
|
||||
rotation-y={purpleRingRotY}
|
||||
scale={[1.3, 1.3, 1.3]}
|
||||
dispose={null}
|
||||
|
|
|
|||
|
|
@ -1,8 +1,8 @@
|
|||
{
|
||||
"0422": {
|
||||
"up": "+",
|
||||
"up": "+0506",
|
||||
"down": "0414",
|
||||
"left": "+",
|
||||
"left": "",
|
||||
"right": ""
|
||||
},
|
||||
"0414": {
|
||||
|
|
@ -22,5 +22,11 @@
|
|||
"down": "",
|
||||
"left": "0414",
|
||||
"right": "041"
|
||||
},
|
||||
"0506": {
|
||||
"up": "0413",
|
||||
"down": "0422",
|
||||
"left": "0405",
|
||||
"right": "0513"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"0422": {
|
||||
"id": "0422hud",
|
||||
"22": {
|
||||
"id": "22hud",
|
||||
"long": {
|
||||
"position": [-0.45, 0.15, -8.6],
|
||||
"scale": [1, 0.03, 1],
|
||||
|
|
@ -20,8 +20,8 @@
|
|||
"initial_position": [1.36, 0.13, -8.6]
|
||||
}
|
||||
},
|
||||
"0414": {
|
||||
"id": "0414hud",
|
||||
"14": {
|
||||
"id": "14hud",
|
||||
"long": {
|
||||
"position": [-0.45, -0.09, -8.6],
|
||||
"scale": [1, 0.03, 1],
|
||||
|
|
@ -41,8 +41,8 @@
|
|||
"initial_position": [1.36, -0.12, -8.6]
|
||||
}
|
||||
},
|
||||
"0413": {
|
||||
"id": "0413hud",
|
||||
"13": {
|
||||
"id": "13hud",
|
||||
"long": {
|
||||
"position": [0.85, -0.09, -8.6],
|
||||
"scale": [1, 0.03, 1],
|
||||
|
|
@ -62,8 +62,8 @@
|
|||
"initial_position": [-1.48, -0.12, -8.6]
|
||||
}
|
||||
},
|
||||
"0405": {
|
||||
"id": "0405hud",
|
||||
"05": {
|
||||
"id": "05hud",
|
||||
"long": {
|
||||
"position": [0.85, -0.32, -8.6],
|
||||
"scale": [1, 0.03, 1],
|
||||
|
|
@ -71,10 +71,10 @@
|
|||
"initial_position": [1.45, -0.3, -8.6]
|
||||
},
|
||||
"boring": {
|
||||
"position": [-0.11, -0.30, -8.6],
|
||||
"position": [-0.11, -0.3, -8.6],
|
||||
"scale": [1, 0.03, 1],
|
||||
"type": "mirrored",
|
||||
"initial_position": [-1.48, -0.30, -8.6]
|
||||
"initial_position": [-1.48, -0.3, -8.6]
|
||||
},
|
||||
"big": {
|
||||
"position": [-0.25, -0.28, -8.6],
|
||||
|
|
@ -82,5 +82,26 @@
|
|||
"type": "mirrored",
|
||||
"initial_position": [-1.48, -0.12, -8.6]
|
||||
}
|
||||
},
|
||||
"06": {
|
||||
"id": "06hud",
|
||||
"long": {
|
||||
"position": [-0.43, -0.32, -8.6],
|
||||
"scale": [1, 0.03, 1],
|
||||
"type": "normal",
|
||||
"initial_position": [-1.45, -0.3, -8.6]
|
||||
},
|
||||
"boring": {
|
||||
"position": [0.51, -0.3, -8.6],
|
||||
"scale": [1, 0.03, 1],
|
||||
"type": "normal",
|
||||
"initial_position": [1.48, -0.3, -8.6]
|
||||
},
|
||||
"big": {
|
||||
"position": [0.3, -0.28, -8.6],
|
||||
"scale": [0.5, 0.06, 1],
|
||||
"type": "normal",
|
||||
"initial_position": [1.48, -0.12, -8.6]
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,28 +3,42 @@
|
|||
"position": [0.4, -0.25, 1.3],
|
||||
"scale": [0.25, 0.15, 0.25],
|
||||
"rotation": [0, 0.2, 0],
|
||||
"sprite": "movie",
|
||||
"sprite": "Dc",
|
||||
"id": "0405"
|
||||
},
|
||||
"1": {
|
||||
"position": [0.4, 0, 1.3],
|
||||
"scale": [0.25, 0.15, 0.25],
|
||||
"rotation": [0, 0.09, 0],
|
||||
"sprite": "s",
|
||||
"sprite": "SSkn",
|
||||
"id": "0413"
|
||||
},
|
||||
"2": {
|
||||
"position": [-0.35, 0, 1.3],
|
||||
"scale": [0.25, 0.15, 0.25],
|
||||
"rotation": [0, -0.1, 0],
|
||||
"sprite": "copland",
|
||||
"sprite": "Cou",
|
||||
"id": "0414"
|
||||
},
|
||||
"3": {
|
||||
"position": [-0.35, 0.25, 1.3],
|
||||
"scale": [0.25, 0.15, 0.25],
|
||||
"rotation": [0, -0.1, 0],
|
||||
"sprite": "touko",
|
||||
"sprite": "Tda",
|
||||
"id": "0422"
|
||||
},
|
||||
"4": {
|
||||
"position": [-0.35, 1.62, 1.3],
|
||||
"scale": [0.25, 0.15, 0.25],
|
||||
"rotation": [0, -0.1, 0],
|
||||
"sprite": "Tda",
|
||||
"id": "0506"
|
||||
},
|
||||
"5": {
|
||||
"position": [0.4, 1.87, 1.3],
|
||||
"scale": [0.25, 0.15, 0.25],
|
||||
"rotation": [0, 0.09, 0],
|
||||
"sprite": "Dc",
|
||||
"id": "0513"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue