mirror_maker/lainTSX
1
0
Fork 0
mirror of https://github.com/ad044/lainTSX.git synced 2024-10-22 23:19:06 +00:00
Code Issues Projects Releases Packages Wiki Activity

added huds for all 4 current sprites, cleaned up some code

Browse source
This commit is contained in:
ad044 2020-09-01 01:39:25 +04:00
parent 9d7e17bf8f
commit 01a62a05d0
10 changed files with 253 additions and 100 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

74
src/components/Game.tsx
View file

@ -1,24 +1,23 @@
import { a, useSpring, update } from "@react-spring/three";
import { a, useSpring } from "@react-spring/three";
//import Orb from "./Orb";
import { OrbitControls } from "drei";
import React, {
Suspense,
useCallback,
useEffect,
useState,
useRef,
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";
import level_sprite_huds from "../resources/level_sprite_huds.json";
import Hub, { PositionAndScaleProps } from "./Hub";
import Hub from "./Hub";
import Lain, {
LainMoveDown,
LainMoveLeft,
LainMoveRight,
LainMoveUp,
LainStanding,
LainStanding
} from "./Lain";
import Lights from "./Lights";
import OrthoCamera from "./OrthoCamera";
@ -45,18 +44,44 @@ const Game = () => {
const [isLainMoving, setLainMoving] = useState(false);
const [lainMoveState, setLainMoveState] = useState(<LainStanding />);
const [currentSprite, setCurrentSprite] = useState("043");
const [currentSprite, setCurrentSprite] = useState("0422");
const [currentSpriteHUD, setCurrentSpriteHUD] = useState<SpriteHuds>(
(level_sprite_huds as SpriteHuds)[currentSprite]
);
const [longHUDActive, setLongHUDActive] = useState(1);
const [HUDActive, setHUDActive] = useState(1);
const { longHUDPositionX } = useSpring({
longHUDPositionX: longHUDActive,
const { bigHUDPositionX } = useSpring({
bigHUDPositionX: HUDActive,
config: { duration: 500 },
});
const { longHUDPositionX } = useSpring({
longHUDPositionX: HUDActive,
config: { duration: 500 },
});
const { boringHUDPositionX } = useSpring({
boringHUDPositionX: HUDActive,
config: { duration: 500 },
});
const bigHUDPosX = bigHUDPositionX.to(
[0, 1],
[
currentSpriteHUD["big"]["initial_position"][0],
currentSpriteHUD["big"]["position"][0],
]
);
const boringHUDPosX = boringHUDPositionX.to(
[0, 1],
[
currentSpriteHUD["boring"]["initial_position"][0],
currentSpriteHUD["boring"]["position"][0],
]
);
const longHUDPosX = longHUDPositionX.to(
[0, 1],
[
@ -181,8 +206,8 @@ const Game = () => {
);
const updateHUD = useCallback(() => {
setLongHUDActive((prev: number) => Number(!prev));
}, [setLongHUDActive]);
setHUDActive((prev: number) => Number(!prev));
}, [setHUDActive]);
const moveDispatcher = useCallback(
(move: string, key: string) => {
@ -262,20 +287,27 @@ const Game = () => {
<Hub currentSprite={currentSprite} />
<Lights />
<OrthoCamera
// bigHudPosition={bigHudPosition!}
// boringHudPosition={boringHudPosition!}
longHUDPosX={longHUDPosX}
longHudPosition={[
currentSpriteHUD!["long"]["position"][0],
bigHUDPosX={bigHUDPosX}
boringHUDPosX={boringHUDPosX}
longHUDPosYZ={[
currentSpriteHUD!["long"]["position"][1],
currentSpriteHUD!["long"]["position"][2],
]}
longHudType={currentSpriteHUD!["long"]["type"]}
boringHudType={currentSpriteHUD!["boring"]["type"]}
bigHudType={currentSpriteHUD!["big"]["type"]}
longHudScale={currentSpriteHUD!["long"]["scale"]}
boringHudScale={currentSpriteHUD!["boring"]["scale"]}
bigHudScale={currentSpriteHUD!["big"]["scale"]}
boringHUDPosYZ={[
currentSpriteHUD!["boring"]["position"][1],
currentSpriteHUD!["boring"]["position"][2],
]}
bigHUDPosYZ={[
currentSpriteHUD!["big"]["position"][1],
currentSpriteHUD!["big"]["position"][2],
]}
longHUDType={currentSpriteHUD!["long"]["type"]}
boringHUDType={currentSpriteHUD!["boring"]["type"]}
bigHUDType={currentSpriteHUD!["big"]["type"]}
longHUDScale={currentSpriteHUD!["long"]["scale"]}
boringHUDScale={currentSpriteHUD!["boring"]["scale"]}
bigHUDScale={currentSpriteHUD!["big"]["scale"]}
id={currentSpriteHUD!["id"]}
/>
</Suspense>

60
src/components/HUDElement.tsx
View file

@ -2,25 +2,32 @@ import React from "react";
import { useLoader } from "react-three-fiber";
import * as THREE from "three";
import bigHud from "../static/sprites/big_hud.png";
import bigHudMirrored from "../static/sprites/big_hud_mirrored.png";
import longHud from "../static/sprites/long_hud.png";
import longHudMirrored from "../static/sprites/long_hud_mirrored.png";
import boringHud from "../static/sprites/long_hud_boring.png";
import boringHudMirrored from "../static/sprites/long_hud_boring_mirrored.png";
import { PositionAndScaleProps } from "./Hub";
import { a, Interpolation } from "@react-spring/three";
export type HUDElementProps = {
longHudType: string;
boringHudType: string;
bigHudType: string;
longHUDType: string;
boringHUDType: string;
bigHUDType: string;
longHudPosition: PositionAndScaleProps;
longHUDPosYZ: [number, number];
longHUDPosX: Interpolation<number, any>;
longHudScale: PositionAndScaleProps;
longHUDScale: PositionAndScaleProps;
// boringHudPosition: PositionAndScaleProps;
boringHudScale: PositionAndScaleProps;
boringHUDPosX: Interpolation<number, any>;
boringHUDPosYZ: [number, number];
boringHUDScale: PositionAndScaleProps;
// bigHudPosition: PositionAndScaleProps;
bigHudScale: PositionAndScaleProps;
bigHUDPosX: Interpolation<number, any>;
bigHUDPosYZ: [number, number];
bigHUDScale: PositionAndScaleProps;
};
const HUDElement = (props: HUDElementProps) => {
@ -38,30 +45,41 @@ const HUDElement = (props: HUDElementProps) => {
case "big":
return bigHud;
}
break;
case "mirrored":
switch (hudElement) {
case "big":
return bigHudMirrored;
case "long":
return longHudMirrored;
case "boring":
return boringHudMirrored;
}
}
};
const longHudTexture: any = useLoader(
THREE.TextureLoader,
spriteTypeToSprite(props.longHudType, "long")!
spriteTypeToSprite(props.longHUDType, "long")!
);
const longHudBoringTexture: any = useLoader(
THREE.TextureLoader,
spriteTypeToSprite(props.boringHudType, "boring")!
spriteTypeToSprite(props.boringHUDType, "boring")!
);
const bigHudTexture: any = useLoader(
THREE.TextureLoader,
spriteTypeToSprite(props.bigHudType, "big")!
spriteTypeToSprite(props.bigHUDType, "big")!
);
return (
<>
<a.sprite
position={props.longHudPosition}
position-y={props.longHUDPosYZ[0]}
position-z={props.longHUDPosYZ[1]}
position-x={props.longHUDPosX}
scale={props.longHudScale}
scale={props.longHUDScale}
>
<spriteMaterial
attach="material"
@ -69,20 +87,30 @@ const HUDElement = (props: HUDElementProps) => {
transparent={true}
/>
</a.sprite>
{/* <sprite position={props.boringHudPosition} scale={props.boringHudScale}>
<a.sprite
position-x={props.boringHUDPosX}
position-y={props.boringHUDPosYZ[0]}
position-z={props.boringHUDPosYZ[1]}
scale={props.boringHUDScale}
>
<spriteMaterial
attach="material"
map={longHudBoringTexture}
transparent={true}
/>
</sprite>
<sprite position={props.bigHudPosition} scale={props.bigHudScale}>
</a.sprite>
<a.sprite
position-x={props.bigHUDPosX}
position-y={props.bigHUDPosYZ[0]}
position-z={props.bigHUDPosYZ[1]}
scale={props.bigHUDScale}
>
<spriteMaterial
attach="material"
map={bigHudTexture}
transparent={true}
/>
</sprite> */}
</a.sprite>
</>
);
};

2
src/components/Hub.tsx
View file

@ -13,7 +13,7 @@ const Hub = (props: any) => {
<Suspense fallback={<>loading...</>}>
<PurpleRing />
<GrayRing />
{Object.values(level_sprites.level04).map((sprite) => {
{Object.values(level_sprites).map((sprite) => {
return (
<LevelSprite
position={sprite.position as PositionAndScaleProps}

4
src/components/LevelSprite.tsx
View file

@ -48,9 +48,9 @@ const LevelSprite = (props: LevelSpriteConstructorProps) => {
() => ({
tex1: { type: "t", value: nonActiveTexture },
tex2: { type: "t", value: activeTexture },
timeMSeconds: { value: Date.now() },
timeMSeconds: { value: (Date.now() % (Math.PI * 2000)) / 1000.0 },
}),
[]
[nonActiveTexture, activeTexture]
);
const vertexShader = `

20
src/components/OrthoCamera.tsx
View file

@ -29,16 +29,18 @@ const OrthoCamera = (props: OrthoCameraProps) => {
position={[0, 0, 10]}
>
<HUDElement
longHudType={props.longHudType}
boringHudType={props.boringHudType}
bigHudType={props.bigHudType}
longHudPosition={props.longHudPosition}
longHUDType={props.longHUDType}
boringHUDType={props.boringHUDType}
bigHUDType={props.bigHUDType}
longHUDPosYZ={props.longHUDPosYZ}
longHUDPosX={props.longHUDPosX}
longHudScale={props.longHudScale}
// boringHudPosition={props.boringHudPosition}
boringHudScale={props.boringHudScale}
// bigHudPosition={props.bigHudPosition}
bigHudScale={props.bigHudScale}
longHUDScale={props.longHUDScale}
boringHUDPosYZ={props.boringHUDPosYZ}
boringHUDPosX={props.boringHUDPosX}
boringHUDScale={props.boringHUDScale}
bigHUDPosYZ={props.bigHUDPosYZ}
bigHUDPosX={props.bigHUDPosX}
bigHUDScale={props.bigHUDScale}
key={props.id}
/>
</OrthographicCamera>

45
src/components/Preloader.tsx
View file

@ -3,11 +3,17 @@ import moveUpSpriteSheet from "../static/sprites/jump_up.png";
import standingSpriteSheet from "../static/sprites/standing.png";
import moveLeftSpriteSheet from "../static/sprites/move_left.png";
import moveRightSpriteSheet from "../static/sprites/move_right.png";
import bigHudSpriteSheet from "../static/sprites/big_hud.png";
import bigHudMirroredSpriteSheet from "../static/sprites/big_hud_mirrored.png";
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 * as THREE from "three";
import { useLoader, useThree } from "react-three-fiber";
import { useLayoutEffect } from "react";
// this function just preloads lain's spritesheets cuz they're big and lazy loading them
// this function just preloads lain's spritesheets and other assets cuz they're big and lazy loading them
// used to make the suspense run for a couple milliseconds, resulting in flickering
const Preloader = () => {
const moveDown = useLoader(THREE.TextureLoader, moveDownSpriteSheet);
@ -15,6 +21,22 @@ const Preloader = () => {
const moveLeft = useLoader(THREE.TextureLoader, moveLeftSpriteSheet);
const moveRight = useLoader(THREE.TextureLoader, moveRightSpriteSheet);
const stand = useLoader(THREE.TextureLoader, standingSpriteSheet);
const bigHud = useLoader(THREE.TextureLoader, bigHudSpriteSheet);
const bigHudMirrored = useLoader(
THREE.TextureLoader,
bigHudMirroredSpriteSheet
);
const longHud = useLoader(THREE.TextureLoader, longHudSpriteSheet);
const longHudMirrored = useLoader(
THREE.TextureLoader,
longHudMirroredSpriteSheet
);
const boringHud = useLoader(THREE.TextureLoader, boringHudSpriteSheet);
const boringHudMirrored = useLoader(
THREE.TextureLoader,
boringHudMirroredSpriteSheet
);
const { gl } = useThree();
useLayoutEffect(() => {
gl.initTexture(moveDown);
@ -22,7 +44,26 @@ const Preloader = () => {
gl.initTexture(moveLeft);
gl.initTexture(moveRight);
gl.initTexture(stand);
}, [moveDown, moveUp, moveLeft, moveRight, stand, gl]);
gl.initTexture(longHud);
gl.initTexture(bigHud);
gl.initTexture(bigHudMirrored);
gl.initTexture(longHudMirrored);
gl.initTexture(boringHud);
gl.initTexture(boringHudMirrored);
}, [
moveDown,
moveUp,
moveLeft,
moveRight,
stand,
gl,
bigHud,
bigHudMirrored,
boringHud,
boringHudMirrored,
longHud,
longHudMirrored,
]);
return null;
};

2
src/components/PurpleRing.tsx
View file

@ -29,7 +29,7 @@ const PurpleRing = (props: JSX.IntrinsicElements["group"]) => {
useFrame(() => {
setPurpleRingRotationY(() => ({
purpleRingRotationY: purpleRingRotationY.get() + 0.04,
purpleRingRotationY: purpleRingRotationY.get() + 0.15,
}));
});

20
src/resources/level_sprite_directions.json
View file

@ -1,20 +1,26 @@
{
"043": {
"0422": {
"up": "+",
"down": "042",
"down": "0414",
"left": "+",
"right": ""
},
"042": {
"up": "043",
"0414": {
"up": "0422",
"down": "",
"left": "",
"right": "0413"
},
"0413": {
"up": "0422",
"down": "0405",
"left": "0414",
"right": "041"
},
"041": {
"up": "043",
"0405": {
"up": "0413",
"down": "",
"left": "042",
"left": "0414",
"right": "041"
}
}

70
src/resources/level_sprite_huds.json
View file

@ -1,6 +1,6 @@
{
"043": {
"id": "043hud",
"0422": {
"id": "0422hud",
"long": {
"position": [-0.45, 0.15, -8.6],
"scale": [1, 0.03, 1],
@ -10,31 +10,77 @@
"boring": {
"position": [0.48, 0.174, -8.6],
"scale": [1, 0.03, 1],
"type": "normal"
"type": "normal",
"initial_position": [1.48, 0.174, -8.6]
},
"big": {
"position": [0.36, 0.13, -8.6],
"scale": [0.5, 0.06, 1],
"type": "normal"
"type": "normal",
"initial_position": [1.36, 0.13, -8.6]
}
},
"042": {
"id": "042hud",
"0414": {
"id": "0414hud",
"long": {
"position": [-0.45, -0.15, -8.6],
"position": [-0.45, -0.09, -8.6],
"scale": [1, 0.03, 1],
"type": "normal",
"initial_position": [-1.45, -0.15, -8.6]
"initial_position": [-1.45, -0.09, -8.6]
},
"boring": {
"position": [0.48, 0.174, -8.6],
"position": [0.5, -0.07, -8.6],
"scale": [1, 0.03, 1],
"type": "normal"
"type": "normal",
"initial_position": [1.48, -0.07, -8.6]
},
"big": {
"position": [0.36, 0.13, -8.6],
"position": [0.35, -0.12, -8.6],
"scale": [0.5, 0.06, 1],
"type": "normal"
"type": "normal",
"initial_position": [1.36, -0.12, -8.6]
}
},
"0413": {
"id": "0413hud",
"long": {
"position": [0.85, -0.09, -8.6],
"scale": [1, 0.03, 1],
"type": "mirrored",
"initial_position": [1.45, -0.09, -8.6]
},
"boring": {
"position": [-0.11, -0.07, -8.6],
"scale": [1, 0.03, 1],
"type": "mirrored",
"initial_position": [-1.48, -0.07, -8.6]
},
"big": {
"position": [-0.35, -0.12, -8.6],
"scale": [0.5, 0.06, 1],
"type": "mirrored",
"initial_position": [-1.48, -0.12, -8.6]
}
},
"0405": {
"id": "0405hud",
"long": {
"position": [0.85, -0.32, -8.6],
"scale": [1, 0.03, 1],
"type": "mirrored",
"initial_position": [1.45, -0.3, -8.6]
},
"boring": {
"position": [-0.11, -0.30, -8.6],
"scale": [1, 0.03, 1],
"type": "mirrored",
"initial_position": [-1.48, -0.30, -8.6]
},
"big": {
"position": [-0.25, -0.28, -8.6],
"scale": [0.5, 0.06, 1],
"type": "mirrored",
"initial_position": [-1.48, -0.12, -8.6]
}
}
}

56
src/resources/level_sprites.json
View file

@ -1,32 +1,30 @@
{
"level04": {
"0": {
"position": [0.4, -0.25, 1.3],
"scale": [0.25, 0.15, 0.25],
"rotation": [0, 0.2, 0],
"sprite": "movie",
"id": "040"
},
"1": {
"position": [0.4, 0, 1.3],
"scale": [0.25, 0.15, 0.25],
"rotation": [0, 0.09, 0],
"sprite": "s",
"id": "041"
},
"2": {
"position": [-0.35, 0, 1.3],
"scale": [0.25, 0.15, 0.25],
"rotation": [0, -0.1, 0],
"sprite": "copland",
"id": "042"
},
"3": {
"position": [-0.35, 0.25, 1.3],
"scale": [0.25, 0.15, 0.25],
"rotation": [0, -0.1, 0],
"sprite": "touko",
"id": "043"
}
"0": {
"position": [0.4, -0.25, 1.3],
"scale": [0.25, 0.15, 0.25],
"rotation": [0, 0.2, 0],
"sprite": "movie",
"id": "0405"
},
"1": {
"position": [0.4, 0, 1.3],
"scale": [0.25, 0.15, 0.25],
"rotation": [0, 0.09, 0],
"sprite": "s",
"id": "0413"
},
"2": {
"position": [-0.35, 0, 1.3],
"scale": [0.25, 0.15, 0.25],
"rotation": [0, -0.1, 0],
"sprite": "copland",
"id": "0414"
},
"3": {
"position": [-0.35, 0.25, 1.3],
"scale": [0.25, 0.15, 0.25],
"rotation": [0, -0.1, 0],
"sprite": "touko",
"id": "0422"
}
}