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

shading fix and working on animation flicker

Browse source
This commit is contained in:
ad044 2020-08-29 22:07:48 +04:00
parent 664756eea7
commit f4d8cf166c
5 changed files with 62 additions and 84 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/App.tsx
View file

@ -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>
); );
}; };

91
src/components/Game.tsx
View file

@ -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;

10
src/components/Lain.tsx
View file

@ -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}
/> />
); );
}; };

20
src/components/LevelSprite.tsx
View file

@ -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
View 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;