mirror of
https://github.com/ad044/lainTSX.git
synced 2024-10-22 23:19:06 +00:00
custom shaders support webgl1 now, deleted swipe input handlers.
This commit is contained in:
parent
1ae8082076
commit
a2ebca2e53
8 changed files with 37 additions and 212 deletions
5
package-lock.json
generated
5
package-lock.json
generated
|
@ -12474,11 +12474,6 @@
|
|||
"utility-types": "^3.10.0"
|
||||
}
|
||||
},
|
||||
"react-use-gesture": {
|
||||
"version": "9.1.2",
|
||||
"resolved": "https://registry.npmjs.org/react-use-gesture/-/react-use-gesture-9.1.2.tgz",
|
||||
"integrity": "sha512-C+h7l/S3TooZ11MF65Iqmnh59i+qWnnbwOlAxHW47SbSmEsFUyxQnmRh/Qq9DOKZLsxC4uZjWpoinMP5nSG9Xw=="
|
||||
},
|
||||
"react-use-measure": {
|
||||
"version": "2.0.3",
|
||||
"resolved": "https://registry.npmjs.org/react-use-measure/-/react-use-measure-2.0.3.tgz",
|
||||
|
|
|
@ -18,7 +18,6 @@
|
|||
"react-router-dom": "^5.2.0",
|
||||
"react-scripts": "^4.0.0",
|
||||
"react-three-fiber": "^4.2.20",
|
||||
"react-use-gesture": "^9.0.4",
|
||||
"three": "^0.125.0",
|
||||
"three-plain-animator": "^1.0.6",
|
||||
"typescript": "^3.7.5",
|
||||
|
|
|
@ -1,4 +1,4 @@
|
|||
import React, { useCallback, useEffect, useRef } from "react";
|
||||
import React, { useCallback, useEffect, useRef, memo } from "react";
|
||||
import {
|
||||
getBootSceneContext,
|
||||
getEndSceneContext,
|
||||
|
@ -15,30 +15,12 @@ import handleBootSceneInput from "../core/input-handlers/handleBootSceneInput";
|
|||
import handleEndSceneInput from "../core/input-handlers/handleEndSceneInput";
|
||||
import handleEvent from "../core/handleEvent";
|
||||
import { GameEvent } from "../types/types";
|
||||
import { MouseEvent, useLoader } from "react-three-fiber";
|
||||
import circleButton from "../static/sprites/controller/circle.png";
|
||||
import triangleButton from "../static/sprites/controller/triangle.png";
|
||||
import crossButton from "../static/sprites/controller/cross.png";
|
||||
import startButton from "../static/sprites/controller/start.png";
|
||||
import l2Button from "../static/sprites/controller/l2.png";
|
||||
import * as THREE from "three";
|
||||
import { useGesture } from "react-use-gesture";
|
||||
import IdleManager from "./IdleManager";
|
||||
|
||||
type InputHandlerProps = {
|
||||
isMobile: boolean;
|
||||
};
|
||||
|
||||
const InputHandler = (props: InputHandlerProps) => {
|
||||
const InputHandler = memo(() => {
|
||||
const scene = useStore((state) => state.currentScene);
|
||||
const inputCooldown = useStore((state) => state.inputCooldown);
|
||||
|
||||
const circleButtonTex = useLoader(THREE.TextureLoader, circleButton);
|
||||
const crossButtonTex = useLoader(THREE.TextureLoader, crossButton);
|
||||
const triangleButtonTex = useLoader(THREE.TextureLoader, triangleButton);
|
||||
const startButtonTex = useLoader(THREE.TextureLoader, startButton);
|
||||
const l2ButtonTex = useLoader(THREE.TextureLoader, l2Button);
|
||||
|
||||
const timeSinceLastKeyPress = useRef(-1);
|
||||
|
||||
const lainIdleTimerRef = useRef(-1);
|
||||
|
@ -115,21 +97,6 @@ const InputHandler = (props: InputHandlerProps) => {
|
|||
[inputCooldown, scene]
|
||||
);
|
||||
|
||||
const bind = useGesture(
|
||||
{
|
||||
onDragEnd: ({ axis, direction: xy }) => {
|
||||
if (axis === "x") {
|
||||
if (xy[0] > 0) handleKeyPress("RIGHT");
|
||||
else handleKeyPress("LEFT");
|
||||
} else {
|
||||
if (xy[1] > 0) handleKeyPress("DOWN");
|
||||
else handleKeyPress("UP");
|
||||
}
|
||||
},
|
||||
},
|
||||
{ drag: { delay: true } }
|
||||
);
|
||||
|
||||
const firedRef = useRef(false);
|
||||
|
||||
const handleKeyBoardEvent = useCallback(
|
||||
|
@ -144,13 +111,6 @@ const InputHandler = (props: InputHandlerProps) => {
|
|||
[handleKeyPress]
|
||||
);
|
||||
|
||||
const handleVirtualButtonPress = useCallback(
|
||||
(event: MouseEvent) => {
|
||||
handleKeyPress(event.object.name);
|
||||
},
|
||||
[handleKeyPress]
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
window.addEventListener("keydown", handleKeyBoardEvent);
|
||||
|
||||
|
@ -167,96 +127,11 @@ const InputHandler = (props: InputHandlerProps) => {
|
|||
}, [handleKeyBoardEvent]);
|
||||
|
||||
return (
|
||||
<>
|
||||
{props.isMobile && (
|
||||
<>
|
||||
<sprite scale={[10, 10, 0]} renderOrder={99999} {...bind()}>
|
||||
<spriteMaterial attach="material" opacity={0} depthTest={false} />
|
||||
</sprite>
|
||||
|
||||
<sprite
|
||||
scale={[1.5, 1.5, 0]}
|
||||
position={[-4, 3, 0]}
|
||||
renderOrder={99999}
|
||||
onClick={handleVirtualButtonPress}
|
||||
name={"L2"}
|
||||
>
|
||||
<spriteMaterial
|
||||
attach="material"
|
||||
map={l2ButtonTex}
|
||||
depthTest={false}
|
||||
opacity={0.8}
|
||||
/>
|
||||
</sprite>
|
||||
|
||||
<sprite
|
||||
scale={[1.5, 1.5, 0]}
|
||||
position={[4, 3, 0]}
|
||||
renderOrder={99999}
|
||||
onClick={handleVirtualButtonPress}
|
||||
name={"START"}
|
||||
>
|
||||
<spriteMaterial
|
||||
attach="material"
|
||||
map={startButtonTex}
|
||||
depthTest={false}
|
||||
opacity={0.8}
|
||||
/>
|
||||
</sprite>
|
||||
|
||||
<group
|
||||
scale={[0.8, 0.8, 0]}
|
||||
position={[3.5, -2.3, 0]}
|
||||
renderOrder={9999}
|
||||
>
|
||||
<sprite
|
||||
scale={[1.5, 1.5, 0]}
|
||||
position={[1, 0, 0]}
|
||||
onClick={handleVirtualButtonPress}
|
||||
name={"CIRCLE"}
|
||||
>
|
||||
<spriteMaterial
|
||||
attach="material"
|
||||
map={circleButtonTex}
|
||||
depthTest={false}
|
||||
opacity={0.8}
|
||||
/>
|
||||
</sprite>
|
||||
<sprite
|
||||
scale={[1.5, 1.5, 0]}
|
||||
position={[0, -1, 0]}
|
||||
onClick={handleVirtualButtonPress}
|
||||
name={"CROSS"}
|
||||
>
|
||||
<spriteMaterial
|
||||
attach="material"
|
||||
map={crossButtonTex}
|
||||
depthTest={false}
|
||||
opacity={0.8}
|
||||
/>
|
||||
</sprite>
|
||||
<sprite
|
||||
scale={[1.5, 1.5, 0]}
|
||||
position={[0, 1, 0]}
|
||||
onClick={handleVirtualButtonPress}
|
||||
name={"TRIANGLE"}
|
||||
>
|
||||
<spriteMaterial
|
||||
attach="material"
|
||||
map={triangleButtonTex}
|
||||
depthTest={false}
|
||||
opacity={0.8}
|
||||
/>
|
||||
</sprite>
|
||||
</group>
|
||||
</>
|
||||
)}
|
||||
<IdleManager
|
||||
lainIdleTimerRef={lainIdleTimerRef}
|
||||
idleSceneTimerRef={idleSceneTimerRef}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
};
|
||||
});
|
||||
|
||||
export default InputHandler;
|
||||
|
|
|
@ -124,7 +124,7 @@ const MiddleRing = () => {
|
|||
vUv = uv;
|
||||
|
||||
// offset of the wobble when jumping
|
||||
const float angleOffset = -0.8f;
|
||||
const float angleOffset = -0.8;
|
||||
|
||||
// compute world position of the vertex
|
||||
// (ie, position after model rotation and translation)
|
||||
|
|
|
@ -78,7 +78,7 @@ const GrayRing = memo((props: GrayRingProps) => {
|
|||
vec4 color(vec2 vUv, int quadnum, bool textureexists, int thinperiod, int quadlen, float step) {
|
||||
if (!textureexists) {
|
||||
return vec4(0.259,0.259,0.322, 1);
|
||||
} else if (uint(quadnum) % uint(2) == uint(1)) {
|
||||
} else if (mod(float(quadnum), 2.0) == 1.0) {
|
||||
return texture2D(hole, vec2(tolocal(vUv.x, quadlen-thinperiod, step), vUv.y));
|
||||
// return vec4(tolocal(vUv.x, quadlen-thinperiod, step), 0, 0, 1);
|
||||
} else if (quadnum == 0) {
|
||||
|
@ -118,18 +118,18 @@ const GrayRing = memo((props: GrayRingProps) => {
|
|||
int quadlen = int(step)/4;
|
||||
|
||||
// segment within circle's quad
|
||||
uint quadel = uint(segment) % uint(quadlen);
|
||||
int quadel = int(mod(float(segment), float(quadlen)));
|
||||
|
||||
// which quad
|
||||
int quadnum = int(uint(segment) / uint(quadlen));
|
||||
int quadnum = int(int(segment) / int(quadlen));
|
||||
|
||||
// how big thin part is
|
||||
int thinperiod = 8;
|
||||
|
||||
if (quadel < uint(thinperiod) && isheight(vUv.y, thin)) {
|
||||
if (quadel < thinperiod && isheight(vUv.y, thin)) {
|
||||
// thin line
|
||||
gl_FragColor = color(vUv, quadnum, false, thinperiod, quadlen, step) * addedLights;
|
||||
} else if (quadel == uint(thinperiod)) {
|
||||
} else if (quadel == thinperiod) {
|
||||
// slope up
|
||||
float dist = tolocal(vUv.x, 1, step);
|
||||
if (vUv.y > slope(1.0-dist, thin) && vUv.y < 1.0-slope(1.0-dist, thin)) {
|
||||
|
@ -137,7 +137,7 @@ const GrayRing = memo((props: GrayRingProps) => {
|
|||
} else {
|
||||
gl_FragColor = vec4(0, 0, 0, 0);
|
||||
}
|
||||
} else if (quadel == uint(quadlen-1)) {
|
||||
} else if (quadel == quadlen-1) {
|
||||
// slope down
|
||||
float dist = tolocal(vUv.x, 1, step);
|
||||
if (vUv.y > slope(dist, thin) && vUv.y < 1.0-slope(dist, thin)) {
|
||||
|
@ -145,7 +145,7 @@ const GrayRing = memo((props: GrayRingProps) => {
|
|||
} else {
|
||||
gl_FragColor = vec4(0, 0, 0, 0);
|
||||
}
|
||||
} else if (quadel > uint(thinperiod)) {
|
||||
} else if (quadel > thinperiod) {
|
||||
gl_FragColor = color(vUv, quadnum, true, thinperiod, quadlen, step) * addedLights;
|
||||
} else {
|
||||
// transparent
|
||||
|
|
|
@ -146,18 +146,18 @@ const PurpleRing = memo((props: PurpleRingProps) => {
|
|||
float thick = 1.0;
|
||||
float slopefactor = 2.0;
|
||||
|
||||
uint halfc = uint(step)/uint(2);
|
||||
int halfc = int(step)/2;
|
||||
|
||||
// segment within circle
|
||||
uint segment = uint(floor(vUv.x * step));
|
||||
uint thinperiod = halfc-uint(16);
|
||||
int segment = int(floor(vUv.x * step));
|
||||
int thinperiod = halfc-16;
|
||||
|
||||
uint halfel = segment % halfc;
|
||||
int halfel = int(mod(float(segment), float(halfc)));
|
||||
|
||||
if (halfel < thinperiod-uint(1) && istop(vUv.y, thin)) {
|
||||
if (halfel < thinperiod-1 && istop(vUv.y, thin)) {
|
||||
// thin line top
|
||||
gl_FragColor = color(vUv, step, false) * addedLights;
|
||||
} else if (halfel == thinperiod - uint(1)) {
|
||||
} else if (halfel == thinperiod - 1) {
|
||||
// thin line and corner
|
||||
float dist = tolocal(vUv.x, 1, step);
|
||||
float val = 1.0-slope(1.0-dist, thin);
|
||||
|
@ -166,7 +166,7 @@ const PurpleRing = memo((props: PurpleRingProps) => {
|
|||
} else {
|
||||
gl_FragColor = vec4(0, 0, 0, 0);
|
||||
}
|
||||
} else if (halfel > thinperiod-uint(2) && halfel < thinperiod+uint(1)) {
|
||||
} else if (halfel > thinperiod-2 && halfel < thinperiod+1) {
|
||||
// slope down
|
||||
float dist = tolocal(vUv.x, 1, step);
|
||||
float val = 1.0-slope(dist, thin);
|
||||
|
@ -175,10 +175,10 @@ const PurpleRing = memo((props: PurpleRingProps) => {
|
|||
} else {
|
||||
gl_FragColor = vec4(0, 0, 0, 0);
|
||||
}
|
||||
} else if (halfel > thinperiod && halfel < thinperiod+uint(4) && isbottom(vUv.y, thin)) {
|
||||
} else if (halfel > thinperiod && halfel < thinperiod+4 && isbottom(vUv.y, thin)) {
|
||||
// thin line bottom
|
||||
gl_FragColor = vec4(0.325,0.325,0.698, 1) * addedLights;
|
||||
} else if (halfel > thinperiod + uint(3) && halfel < thinperiod + uint(6)) {
|
||||
} else if (halfel > thinperiod + 3 && halfel < thinperiod + 6) {
|
||||
// slope up
|
||||
float dist = tolocal(vUv.x, 2, step);
|
||||
float val = 1.0-slope(1.0-dist, thin);
|
||||
|
@ -187,18 +187,18 @@ const PurpleRing = memo((props: PurpleRingProps) => {
|
|||
} else {
|
||||
gl_FragColor = vec4(0, 0, 0, 0);
|
||||
}
|
||||
} else if (halfel > thinperiod + uint(5) && halfel < thinperiod+uint(12)) {
|
||||
} else if (halfel > thinperiod + 5 && halfel < thinperiod+12) {
|
||||
// thick part
|
||||
gl_FragColor = color(vUv, step, true) * addedLights;
|
||||
} else if (halfel == thinperiod + uint(12)){
|
||||
} else if (halfel == thinperiod + 12){
|
||||
// level first char texture
|
||||
float dist = 1.0-tolocal(0.5 - mod(vUv.x-siteLevelFirstCharacterOffset +0.004, 0.5), 11, step);
|
||||
gl_FragColor = texture2D(siteLevels, vec2(dist, vUv.y)) * addedLights;
|
||||
} else if (halfel == thinperiod + uint(13)){
|
||||
} else if (halfel == thinperiod + 13){
|
||||
// level second char texture
|
||||
float dist = 1.0-tolocal(0.5 - mod(vUv.x-siteLevelSecondCharacterOffset, 0.5), 11, step);
|
||||
gl_FragColor = texture2D(siteLevels, vec2(dist, vUv.y)) * addedLights;
|
||||
} else if (halfel > thinperiod + uint(13) && halfel < thinperiod + uint(16)) {
|
||||
} else if (halfel > thinperiod + 13 && halfel < thinperiod + 16) {
|
||||
// slope up
|
||||
float dist = tolocal(vUv.x, 2, step);
|
||||
float val = slope(dist, thin);
|
||||
|
|
|
@ -16,7 +16,6 @@ import PolytanScene from "../scenes/PolytanScene";
|
|||
import TaKScene from "../scenes/TaKScene";
|
||||
import ChangeDiscScene from "../scenes/ChangeDiscScene";
|
||||
import EndScene from "../scenes/EndScene";
|
||||
import mobileAndTabletCheck from "../utils/mobileAndTabletCheck";
|
||||
import { Canvas } from "react-three-fiber";
|
||||
import Preloader from "../components/Preloader";
|
||||
import InputHandler from "../components/InputHandler";
|
||||
|
@ -49,8 +48,6 @@ const Game = () => {
|
|||
const [width, setWidth] = useState((window.screen.height / 1.8) * 1.3);
|
||||
const [height, setHeight] = useState(window.screen.height / 1.8);
|
||||
|
||||
const [isMobile, setIsMobile] = useState(false);
|
||||
|
||||
const handleGameResize = useCallback((event) => {
|
||||
switch (event.key) {
|
||||
case "k":
|
||||
|
@ -63,26 +60,13 @@ const Game = () => {
|
|||
}
|
||||
}, []);
|
||||
|
||||
const handleScreenResize = useCallback(() => {
|
||||
const isMobile = mobileAndTabletCheck();
|
||||
if (isMobile) {
|
||||
const h = window.screen.height / 1.05;
|
||||
setHeight(h);
|
||||
setWidth(h * 1.3);
|
||||
setIsMobile(true);
|
||||
}
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
if (!isMobile) window.addEventListener("keydown", handleGameResize);
|
||||
|
||||
window.addEventListener("resize", handleScreenResize);
|
||||
window.addEventListener("keydown", handleGameResize);
|
||||
|
||||
return () => {
|
||||
window.removeEventListener("keydown", handleGameResize);
|
||||
window.removeEventListener("resize", handleScreenResize);
|
||||
};
|
||||
}, [handleGameResize, handleScreenResize, isMobile]);
|
||||
}, [handleGameResize]);
|
||||
|
||||
return (
|
||||
<div
|
||||
|
@ -98,7 +82,7 @@ const Game = () => {
|
|||
<Suspense fallback={null}>
|
||||
<Preloader />
|
||||
{dispatchScene[currentScene as keyof typeof dispatchScene]}
|
||||
<InputHandler isMobile={isMobile} />
|
||||
<InputHandler />
|
||||
</Suspense>
|
||||
</Canvas>
|
||||
{["media", "idle_media", "tak", "end"].includes(currentScene) && (
|
||||
|
|
|
@ -43,7 +43,12 @@ const Notes = () => {
|
|||
. If it's not supported, this is most likely due to your
|
||||
browser. Try another one, preferably chromium/firefox-based,
|
||||
keeping in mind the notes written inside Performance. This could
|
||||
also be caused by your drivers being outdated.
|
||||
also be caused by your drivers being outdated. <br />
|
||||
<br />
|
||||
The game still runs on a setup with WebGL1, but some textures
|
||||
will look extremely low-quality. This is because WebGL1 can't
|
||||
generate mipmaps with non-POT (power of two) textures, so it has
|
||||
to downscale each texture to be POT.
|
||||
</p>
|
||||
</td>
|
||||
</tr>
|
||||
|
@ -144,39 +149,6 @@ const Notes = () => {
|
|||
</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>
|
||||
<p>Mobile/Tablet Controls</p>
|
||||
</td>
|
||||
<td>
|
||||
<table className="control-table">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Swipe Down</td>
|
||||
<td>↓</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Swipe Left</td>
|
||||
<td>←</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Swipe Up</td>
|
||||
<td>↑</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Swipe Right</td>
|
||||
<td>→</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<p>
|
||||
The rest of the buttons are layed out on the game screen itself.
|
||||
<br />
|
||||
Also, please rotate the phone horizontally when playing, I don't
|
||||
want feature creep because of psychopaths.
|
||||
</p>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<p>Saving Progress</p>
|
||||
|
|
Loading…
Reference in a new issue