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:
ad044
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">
|
||||
{/* {moveToGame ? <Game /> : <Intro setMoveToGame={setMoveToGame} />} */}
|
||||
{/* <Intro /> */}
|
||||
<Game />
|
||||
<Game />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,11 +1,5 @@
|
|||
import React, {
|
||||
useState,
|
||||
Suspense,
|
||||
useCallback,
|
||||
useEffect,
|
||||
useLayoutEffect,
|
||||
} from "react";
|
||||
import { Canvas, useLoader, useThree } from "react-three-fiber";
|
||||
import React, { useState, Suspense, useCallback, useEffect } from "react";
|
||||
import { Canvas } from "react-three-fiber";
|
||||
import Lain, {
|
||||
LainIntro,
|
||||
LainMoveDown,
|
||||
|
|
@ -20,13 +14,10 @@ import { OrbitControls, PerspectiveCamera } from "drei";
|
|||
import Lights from "./Lights";
|
||||
import OrthoCamera from "./OrthoCamera";
|
||||
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 lain_animations from "../resources/lain_animations.json";
|
||||
import level_sprite_huds from "../resources/level_sprite_huds.json";
|
||||
import * as THREE from "three";
|
||||
import Preloader from "./Preloader";
|
||||
|
||||
type KeyCodeAssociations = {
|
||||
[keyCode: number]: string;
|
||||
|
|
@ -47,9 +38,6 @@ type LainAnimations = {
|
|||
|
||||
const Game = () => {
|
||||
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 [lainPosY, setLainPosY] = useState(-0.2);
|
||||
|
||||
|
|
@ -212,50 +200,37 @@ const Game = () => {
|
|||
|
||||
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 (
|
||||
<>
|
||||
<Canvas concurrent>
|
||||
<PerspectiveCamera
|
||||
position={[0, cameraPosY, 3]}
|
||||
rotation={[0, cameraRotationY, 0]}
|
||||
>
|
||||
<Suspense fallback={null}>
|
||||
<OrbitControls />
|
||||
<Preload />
|
||||
<Lain
|
||||
isLainMoving={isLainMoving}
|
||||
lainMoveState={lainMoveState}
|
||||
lainPosY={lainPosY}
|
||||
/>
|
||||
<Hub currentSprite={currentSprite} />
|
||||
<Lights />
|
||||
<OrthoCamera
|
||||
bigHudPosition={bigHudPosition!}
|
||||
boringHudPosition={boringHudPosition!}
|
||||
longHudPosition={longHudPosition!}
|
||||
longHudType={getHudData(currentSprite)["long"]["type"]}
|
||||
boringHudType={getHudData(currentSprite)["boring"]["type"]}
|
||||
bigHudType={getHudData(currentSprite)["big"]["type"]}
|
||||
longHudScale={getHudData(currentSprite)["long"]["scale"]}
|
||||
boringHudScale={getHudData(currentSprite)["boring"]["scale"]}
|
||||
bigHudScale={getHudData(currentSprite)["big"]["scale"]}
|
||||
id={getHudData(currentSprite)["id"]}
|
||||
/>
|
||||
</Suspense>
|
||||
</PerspectiveCamera>
|
||||
</Canvas>
|
||||
</>
|
||||
<Canvas concurrent>
|
||||
<PerspectiveCamera
|
||||
position={[0, cameraPosY, 3]}
|
||||
rotation={[0, cameraRotationY, 0]}
|
||||
>
|
||||
<Suspense fallback={null}>
|
||||
<OrbitControls />
|
||||
<Preloader />
|
||||
<Lain
|
||||
isLainMoving={isLainMoving}
|
||||
lainMoveState={lainMoveState}
|
||||
lainPosY={lainPosY}
|
||||
/>
|
||||
<Hub currentSprite={currentSprite} />
|
||||
<Lights />
|
||||
<OrthoCamera
|
||||
bigHudPosition={bigHudPosition!}
|
||||
boringHudPosition={boringHudPosition!}
|
||||
longHudPosition={longHudPosition!}
|
||||
longHudType={getHudData(currentSprite)["long"]["type"]}
|
||||
boringHudType={getHudData(currentSprite)["boring"]["type"]}
|
||||
bigHudType={getHudData(currentSprite)["big"]["type"]}
|
||||
longHudScale={getHudData(currentSprite)["long"]["scale"]}
|
||||
boringHudScale={getHudData(currentSprite)["boring"]["scale"]}
|
||||
bigHudScale={getHudData(currentSprite)["big"]["scale"]}
|
||||
id={getHudData(currentSprite)["id"]}
|
||||
/>
|
||||
</Suspense>
|
||||
</PerspectiveCamera>
|
||||
</Canvas>
|
||||
);
|
||||
};
|
||||
export default Game;
|
||||
|
|
|
|||
|
|
@ -1,10 +1,4 @@
|
|||
import React, {
|
||||
useCallback,
|
||||
Suspense,
|
||||
useEffect,
|
||||
useState,
|
||||
useLayoutEffect,
|
||||
} from "react";
|
||||
import React, { Suspense, useState } from "react";
|
||||
import { useFrame, useLoader, useThree } from "react-three-fiber";
|
||||
import * as THREE from "three";
|
||||
import introSpriteSheet from "../static/sprites/intro.png";
|
||||
|
|
@ -88,8 +82,8 @@ export const LainMoveLeft = () => {
|
|||
<LainConstructor
|
||||
sprite={moveLeftSpriteSheet}
|
||||
frameCount={47}
|
||||
framesVertical={6}
|
||||
framesHorizontal={8}
|
||||
framesVertical={6}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -73,32 +73,18 @@ const LevelSprite = (props: LevelSpriteConstructorProps) => {
|
|||
void main() {
|
||||
vec4 t1 = texture2D(tex1,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);
|
||||
}
|
||||
`;
|
||||
|
||||
useFrame(() => {
|
||||
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 (
|
||||
<mesh
|
||||
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