mirror of
https://github.com/ad044/lainTSX.git
synced 2024-10-22 23:19:06 +00:00
shading fix and working on animation flicker
This commit is contained in:
parent
664756eea7
commit
f4d8cf166c
5 changed files with 62 additions and 84 deletions
|
@ -19,7 +19,7 @@ const App = () => {
|
||||||
<div id="game-root" className="game">
|
<div id="game-root" className="game">
|
||||||
{/* {moveToGame ? <Game /> : <Intro setMoveToGame={setMoveToGame} />} */}
|
{/* {moveToGame ? <Game /> : <Intro setMoveToGame={setMoveToGame} />} */}
|
||||||
{/* <Intro /> */}
|
{/* <Intro /> */}
|
||||||
<Game />
|
<Game />
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
|
@ -1,11 +1,5 @@
|
||||||
import React, {
|
import React, { useState, Suspense, useCallback, useEffect } from "react";
|
||||||
useState,
|
import { Canvas } from "react-three-fiber";
|
||||||
Suspense,
|
|
||||||
useCallback,
|
|
||||||
useEffect,
|
|
||||||
useLayoutEffect,
|
|
||||||
} from "react";
|
|
||||||
import { Canvas, useLoader, useThree } from "react-three-fiber";
|
|
||||||
import Lain, {
|
import Lain, {
|
||||||
LainIntro,
|
LainIntro,
|
||||||
LainMoveDown,
|
LainMoveDown,
|
||||||
|
@ -20,13 +14,10 @@ import { OrbitControls, PerspectiveCamera } from "drei";
|
||||||
import Lights from "./Lights";
|
import Lights from "./Lights";
|
||||||
import OrthoCamera from "./OrthoCamera";
|
import OrthoCamera from "./OrthoCamera";
|
||||||
import TWEEN from "@tweenjs/tween.js";
|
import TWEEN from "@tweenjs/tween.js";
|
||||||
import moveDownSpriteSheet from "../static/sprites/jump_down.png";
|
|
||||||
import moveUpSpriteSheet from "../static/sprites/jump_up.png";
|
|
||||||
|
|
||||||
import level_sprite_directions from "../resources/level_sprite_directions.json";
|
import level_sprite_directions from "../resources/level_sprite_directions.json";
|
||||||
import lain_animations from "../resources/lain_animations.json";
|
import lain_animations from "../resources/lain_animations.json";
|
||||||
import level_sprite_huds from "../resources/level_sprite_huds.json";
|
import level_sprite_huds from "../resources/level_sprite_huds.json";
|
||||||
import * as THREE from "three";
|
import Preloader from "./Preloader";
|
||||||
|
|
||||||
type KeyCodeAssociations = {
|
type KeyCodeAssociations = {
|
||||||
[keyCode: number]: string;
|
[keyCode: number]: string;
|
||||||
|
@ -47,9 +38,6 @@ type LainAnimations = {
|
||||||
|
|
||||||
const Game = () => {
|
const Game = () => {
|
||||||
const [isLainMoving, setLainMoving] = useState(false);
|
const [isLainMoving, setLainMoving] = useState(false);
|
||||||
const [lainIntro, setLainIntro] = useState(false);
|
|
||||||
const [lainMoveUp, setLainMoveUp] = useState(false);
|
|
||||||
const [lainMoveDown, setLainMoveDown] = useState(false);
|
|
||||||
const [lainMoveState, setLainMoveState] = useState(<LainStanding />);
|
const [lainMoveState, setLainMoveState] = useState(<LainStanding />);
|
||||||
const [lainPosY, setLainPosY] = useState(-0.2);
|
const [lainPosY, setLainPosY] = useState(-0.2);
|
||||||
|
|
||||||
|
@ -212,50 +200,37 @@ const Game = () => {
|
||||||
|
|
||||||
useEffect(animateSpriteHUDIn, []);
|
useEffect(animateSpriteHUDIn, []);
|
||||||
|
|
||||||
function Preload() {
|
|
||||||
const moveDown = useLoader(THREE.TextureLoader, moveDownSpriteSheet);
|
|
||||||
const moveUp = useLoader(THREE.TextureLoader, moveUpSpriteSheet);
|
|
||||||
const { gl } = useThree();
|
|
||||||
useLayoutEffect(() => {
|
|
||||||
gl.initTexture(moveDown);
|
|
||||||
gl.initTexture(moveUp);
|
|
||||||
}, [moveDown, moveUp]);
|
|
||||||
return null;
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<Canvas concurrent>
|
||||||
<Canvas concurrent>
|
<PerspectiveCamera
|
||||||
<PerspectiveCamera
|
position={[0, cameraPosY, 3]}
|
||||||
position={[0, cameraPosY, 3]}
|
rotation={[0, cameraRotationY, 0]}
|
||||||
rotation={[0, cameraRotationY, 0]}
|
>
|
||||||
>
|
<Suspense fallback={null}>
|
||||||
<Suspense fallback={null}>
|
<OrbitControls />
|
||||||
<OrbitControls />
|
<Preloader />
|
||||||
<Preload />
|
<Lain
|
||||||
<Lain
|
isLainMoving={isLainMoving}
|
||||||
isLainMoving={isLainMoving}
|
lainMoveState={lainMoveState}
|
||||||
lainMoveState={lainMoveState}
|
lainPosY={lainPosY}
|
||||||
lainPosY={lainPosY}
|
/>
|
||||||
/>
|
<Hub currentSprite={currentSprite} />
|
||||||
<Hub currentSprite={currentSprite} />
|
<Lights />
|
||||||
<Lights />
|
<OrthoCamera
|
||||||
<OrthoCamera
|
bigHudPosition={bigHudPosition!}
|
||||||
bigHudPosition={bigHudPosition!}
|
boringHudPosition={boringHudPosition!}
|
||||||
boringHudPosition={boringHudPosition!}
|
longHudPosition={longHudPosition!}
|
||||||
longHudPosition={longHudPosition!}
|
longHudType={getHudData(currentSprite)["long"]["type"]}
|
||||||
longHudType={getHudData(currentSprite)["long"]["type"]}
|
boringHudType={getHudData(currentSprite)["boring"]["type"]}
|
||||||
boringHudType={getHudData(currentSprite)["boring"]["type"]}
|
bigHudType={getHudData(currentSprite)["big"]["type"]}
|
||||||
bigHudType={getHudData(currentSprite)["big"]["type"]}
|
longHudScale={getHudData(currentSprite)["long"]["scale"]}
|
||||||
longHudScale={getHudData(currentSprite)["long"]["scale"]}
|
boringHudScale={getHudData(currentSprite)["boring"]["scale"]}
|
||||||
boringHudScale={getHudData(currentSprite)["boring"]["scale"]}
|
bigHudScale={getHudData(currentSprite)["big"]["scale"]}
|
||||||
bigHudScale={getHudData(currentSprite)["big"]["scale"]}
|
id={getHudData(currentSprite)["id"]}
|
||||||
id={getHudData(currentSprite)["id"]}
|
/>
|
||||||
/>
|
</Suspense>
|
||||||
</Suspense>
|
</PerspectiveCamera>
|
||||||
</PerspectiveCamera>
|
</Canvas>
|
||||||
</Canvas>
|
|
||||||
</>
|
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
export default Game;
|
export default Game;
|
||||||
|
|
|
@ -1,10 +1,4 @@
|
||||||
import React, {
|
import React, { Suspense, useState } from "react";
|
||||||
useCallback,
|
|
||||||
Suspense,
|
|
||||||
useEffect,
|
|
||||||
useState,
|
|
||||||
useLayoutEffect,
|
|
||||||
} from "react";
|
|
||||||
import { useFrame, useLoader, useThree } from "react-three-fiber";
|
import { useFrame, useLoader, useThree } from "react-three-fiber";
|
||||||
import * as THREE from "three";
|
import * as THREE from "three";
|
||||||
import introSpriteSheet from "../static/sprites/intro.png";
|
import introSpriteSheet from "../static/sprites/intro.png";
|
||||||
|
@ -88,8 +82,8 @@ export const LainMoveLeft = () => {
|
||||||
<LainConstructor
|
<LainConstructor
|
||||||
sprite={moveLeftSpriteSheet}
|
sprite={moveLeftSpriteSheet}
|
||||||
frameCount={47}
|
frameCount={47}
|
||||||
framesVertical={6}
|
|
||||||
framesHorizontal={8}
|
framesHorizontal={8}
|
||||||
|
framesVertical={6}
|
||||||
/>
|
/>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
|
@ -73,32 +73,18 @@ const LevelSprite = (props: LevelSpriteConstructorProps) => {
|
||||||
void main() {
|
void main() {
|
||||||
vec4 t1 = texture2D(tex1,vUv);
|
vec4 t1 = texture2D(tex1,vUv);
|
||||||
vec4 t2 = texture2D(tex2,vUv);
|
vec4 t2 = texture2D(tex2,vUv);
|
||||||
float bias = abs(sin(timeMSeconds));
|
float bias = abs(sin(timeMSeconds / (1.6 / M_PI)));
|
||||||
gl_FragColor = mix(t1, t2, bias);
|
gl_FragColor = mix(t1, t2, bias);
|
||||||
}
|
}
|
||||||
`;
|
`;
|
||||||
|
|
||||||
useFrame(() => {
|
useFrame(() => {
|
||||||
if (materialRef.current) {
|
if (materialRef.current) {
|
||||||
(materialRef.current! as any).uniforms.timeMSeconds.value = 1.5;
|
(materialRef.current! as any).uniforms.timeMSeconds.value =
|
||||||
|
(Date.now() % (Math.PI * 2000)) / 1000.0;
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
// useEffect(() => {
|
|
||||||
// setInterval(() => {
|
|
||||||
// if (materialRef.current) {
|
|
||||||
// const currentRef = materialRef.current! as any;
|
|
||||||
// if (currentRef.uniforms.alpha.value > 0.1) {
|
|
||||||
// currentRef.uniforms.alpha.value = (
|
|
||||||
// currentRef.uniforms.alpha.value - 0.1
|
|
||||||
// ).toPrecision(1);
|
|
||||||
// } else {
|
|
||||||
// currentRef.uniforms.alpha.value = 1.0;
|
|
||||||
// }
|
|
||||||
// }
|
|
||||||
// }, 125);
|
|
||||||
// }, []);
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<mesh
|
<mesh
|
||||||
position={props.position}
|
position={props.position}
|
||||||
|
|
23
src/components/Preloader.tsx
Normal file
23
src/components/Preloader.tsx
Normal file
|
@ -0,0 +1,23 @@
|
||||||
|
import moveDownSpriteSheet from "../static/sprites/jump_down.png";
|
||||||
|
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 * as THREE from "three";
|
||||||
|
import { useLoader, useThree } from "react-three-fiber";
|
||||||
|
import { useLayoutEffect } from "react";
|
||||||
|
|
||||||
|
const Preloader = () => {
|
||||||
|
const moveDown = useLoader(THREE.TextureLoader, moveDownSpriteSheet);
|
||||||
|
const moveUp = useLoader(THREE.TextureLoader, moveUpSpriteSheet);
|
||||||
|
const moveLeft = useLoader(THREE.TextureLoader, moveLeftSpriteSheet);
|
||||||
|
const moveRight = useLoader(THREE.TextureLoader, moveRightSpriteSheet);
|
||||||
|
const { gl } = useThree();
|
||||||
|
useLayoutEffect(() => {
|
||||||
|
gl.initTexture(moveDown);
|
||||||
|
gl.initTexture(moveUp);
|
||||||
|
}, [moveDown, moveUp, moveLeft, standingSpriteSheet, moveRight]);
|
||||||
|
return null;
|
||||||
|
};
|
||||||
|
|
||||||
|
export default Preloader;
|
Loading…
Reference in a new issue