mirror of
https://github.com/ad044/lainTSX.git
synced 2024-10-22 23:19:06 +00:00
gate scene done
This commit is contained in:
parent
e42b79f6df
commit
f5b214b79d
9 changed files with 89 additions and 33 deletions
Binary file not shown.
|
@ -1,13 +1,12 @@
|
||||||
import React from "react";
|
import React, { useEffect, useMemo, useRef, useState } from "react";
|
||||||
import gateText from "../../static/sprite/gate_pass.png";
|
import gateText from "../../static/sprite/gate_pass.png";
|
||||||
import gateTextUnderline from "../../static/sprite/gate_pass_underline.png";
|
import gateTextUnderline from "../../static/sprite/gate_pass_underline.png";
|
||||||
import gateTextAccessPass from "../../static/sprite/you_got_an_access_pass.png";
|
import gateTextAccessPass from "../../static/sprite/you_got_an_access_pass.png";
|
||||||
import changeSiteEnable from "../../static/sprite/change_site_enable.png";
|
import changeSiteEnable from "../../static/sprite/change_site_enable.png";
|
||||||
import gateLeftThing from "../../static/sprite/left_gate_thing.png";
|
import gateLeftThing from "../../static/sprite/left_gate_thing.png";
|
||||||
import gateRightThing from "../../static/sprite/right_gate_thing.png";
|
import gateRightThing from "../../static/sprite/right_gate_thing.png";
|
||||||
import { useLoader } from "react-three-fiber";
|
import { useFrame, useLoader } from "react-three-fiber";
|
||||||
import * as THREE from "three";
|
import * as THREE from "three";
|
||||||
import GateMiddleObject from "./GateMiddleObject";
|
|
||||||
|
|
||||||
type GateMiddleProps = {
|
type GateMiddleProps = {
|
||||||
intro: boolean;
|
intro: boolean;
|
||||||
|
@ -15,6 +14,15 @@ type GateMiddleProps = {
|
||||||
};
|
};
|
||||||
|
|
||||||
const GateHUD = (props: GateMiddleProps) => {
|
const GateHUD = (props: GateMiddleProps) => {
|
||||||
|
const wordFont = useLoader(THREE.FontLoader, "/3d_fonts/MediaWord.blob");
|
||||||
|
const config = useMemo(
|
||||||
|
() => ({
|
||||||
|
font: wordFont,
|
||||||
|
size: 1,
|
||||||
|
}),
|
||||||
|
[wordFont]
|
||||||
|
);
|
||||||
|
|
||||||
const gatePassTexture = useLoader(THREE.TextureLoader, gateText);
|
const gatePassTexture = useLoader(THREE.TextureLoader, gateText);
|
||||||
const gatePassUnderline = useLoader(THREE.TextureLoader, gateTextUnderline);
|
const gatePassUnderline = useLoader(THREE.TextureLoader, gateTextUnderline);
|
||||||
const gateAccessPassTexture = useLoader(
|
const gateAccessPassTexture = useLoader(
|
||||||
|
@ -29,6 +37,16 @@ const GateHUD = (props: GateMiddleProps) => {
|
||||||
const gateLeftThingTexture = useLoader(THREE.TextureLoader, gateLeftThing);
|
const gateLeftThingTexture = useLoader(THREE.TextureLoader, gateLeftThing);
|
||||||
const gateRightThingTexture = useLoader(THREE.TextureLoader, gateRightThing);
|
const gateRightThingTexture = useLoader(THREE.TextureLoader, gateRightThing);
|
||||||
|
|
||||||
|
const pressAnyRef = useRef<THREE.Object3D>();
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
setInterval(() => {
|
||||||
|
if (pressAnyRef.current && !props.intro) {
|
||||||
|
pressAnyRef.current.visible = !pressAnyRef.current.visible;
|
||||||
|
}
|
||||||
|
}, 500);
|
||||||
|
}, [props.intro]);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<sprite scale={[1.5, 0.24, 0]} position={[0, 1.1, 0.07]} renderOrder={3}>
|
<sprite scale={[1.5, 0.24, 0]} position={[0, 1.1, 0.07]} renderOrder={3}>
|
||||||
|
@ -110,6 +128,35 @@ const GateHUD = (props: GateMiddleProps) => {
|
||||||
visible={!props.intro && props.gateLvl === 4}
|
visible={!props.intro && props.gateLvl === 4}
|
||||||
/>
|
/>
|
||||||
</sprite>
|
</sprite>
|
||||||
|
|
||||||
|
<group ref={pressAnyRef} visible={false}>
|
||||||
|
<mesh
|
||||||
|
scale={[0.17, 0.14, 0]}
|
||||||
|
position={[-0.8, -1.3, 0]}
|
||||||
|
renderOrder={5}
|
||||||
|
>
|
||||||
|
<textGeometry attach="geometry" args={["press ANY button", config]} />
|
||||||
|
<meshBasicMaterial
|
||||||
|
attach="material"
|
||||||
|
color={0xdb9200}
|
||||||
|
transparent={true}
|
||||||
|
depthTest={false}
|
||||||
|
/>
|
||||||
|
</mesh>
|
||||||
|
<mesh
|
||||||
|
scale={[0.17, 0.14, 0]}
|
||||||
|
position={[-0.793, -1.308, 0]}
|
||||||
|
renderOrder={4}
|
||||||
|
>
|
||||||
|
<textGeometry attach="geometry" args={["press ANY button", config]} />
|
||||||
|
<meshBasicMaterial
|
||||||
|
attach="material"
|
||||||
|
color={0xad7400}
|
||||||
|
transparent={true}
|
||||||
|
depthTest={false}
|
||||||
|
/>
|
||||||
|
</mesh>
|
||||||
|
</group>
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
|
@ -36,7 +36,7 @@ const Mirror = (props: MirrorProps) => {
|
||||||
mirrorGroupRef.current.rotation.y -= 0.03;
|
mirrorGroupRef.current.rotation.y -= 0.03;
|
||||||
}
|
}
|
||||||
if (materialRef.current) {
|
if (materialRef.current) {
|
||||||
tex.offset.y -= 0.01;
|
tex.offset.x -= 0.0025;
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
|
@ -1,4 +1,4 @@
|
||||||
import React, { useMemo, useRef } from "react";
|
import React, { useEffect, useMemo, useRef } from "react";
|
||||||
import blueBinary from "../../static/sprite/blue_binary.png";
|
import blueBinary from "../../static/sprite/blue_binary.png";
|
||||||
import { useFrame, useLoader } from "react-three-fiber";
|
import { useFrame, useLoader } from "react-three-fiber";
|
||||||
import * as THREE from "three";
|
import * as THREE from "three";
|
||||||
|
@ -15,11 +15,13 @@ const GateSide = () => {
|
||||||
return blueBinaryTex;
|
return blueBinaryTex;
|
||||||
}, [blueBinaryTex]);
|
}, [blueBinaryTex]);
|
||||||
|
|
||||||
useFrame(() => {
|
useEffect(() => {
|
||||||
if (Date.now() % 2 === 0 && matRef.current) {
|
setInterval(() => {
|
||||||
matRef.current.uniforms.offset.value += 0.5;
|
if (matRef.current) {
|
||||||
}
|
matRef.current.uniforms.offset.value += 0.5;
|
||||||
});
|
}
|
||||||
|
}, 50);
|
||||||
|
}, []);
|
||||||
|
|
||||||
const matRef = useRef<THREE.ShaderMaterial>();
|
const matRef = useRef<THREE.ShaderMaterial>();
|
||||||
|
|
||||||
|
@ -48,11 +50,11 @@ const GateSide = () => {
|
||||||
varying vec2 vUv;
|
varying vec2 vUv;
|
||||||
|
|
||||||
void main() {
|
void main() {
|
||||||
float alpha = smoothstep(0.7, 1.0, vUv.x);
|
float alpha = smoothstep(0.9, 1.0, vUv.x);
|
||||||
|
|
||||||
vec4 t1 = texture2D(tex1,vUv * 5.0 + offset);
|
vec4 t1 = texture2D(tex1,vUv * 5.0 + offset);
|
||||||
|
|
||||||
gl_FragColor = mix(t1, vec4(0,0,0,0), alpha);
|
gl_FragColor = mix(t1, vec4(0,0,0,0), alpha) * 0.8;
|
||||||
}
|
}
|
||||||
`;
|
`;
|
||||||
|
|
||||||
|
@ -64,21 +66,21 @@ const GateSide = () => {
|
||||||
varying vec2 vUv;
|
varying vec2 vUv;
|
||||||
|
|
||||||
void main() {
|
void main() {
|
||||||
float alpha = smoothstep(0.3, 1.0, vUv.x);
|
float alpha = smoothstep(1.0, 0.9, vUv.x);
|
||||||
|
|
||||||
vec4 t1 = texture2D(tex1,vUv * 5.0 + offset);
|
vec4 t1 = texture2D(tex1,vUv * 5.0 + offset);
|
||||||
|
|
||||||
gl_FragColor = mix(vec4(0,0,0,0), t1, alpha) * 1.4;
|
gl_FragColor = mix(vec4(0,0,0,0), t1, alpha) * 0.8;
|
||||||
}
|
}
|
||||||
`;
|
`;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<OrbitControls />
|
|
||||||
<mesh
|
<mesh
|
||||||
rotation={[0, 0.2, 0]}
|
rotation={[0, 0.2, 0]}
|
||||||
position={[-1.4, 0, 1.5]}
|
position={[-1.7, 0, 1.5]}
|
||||||
scale={[3, 1.5, 0]}
|
scale={[3, 1.5, 0]}
|
||||||
|
renderOrder={1}
|
||||||
>
|
>
|
||||||
<planeBufferGeometry attach="geometry"></planeBufferGeometry>
|
<planeBufferGeometry attach="geometry"></planeBufferGeometry>
|
||||||
<shaderMaterial
|
<shaderMaterial
|
||||||
|
@ -92,8 +94,9 @@ const GateSide = () => {
|
||||||
</mesh>
|
</mesh>
|
||||||
<mesh
|
<mesh
|
||||||
rotation={[0, -0.2, 0]}
|
rotation={[0, -0.2, 0]}
|
||||||
position={[0.05, 0, 1.3]}
|
position={[1.7, 0, 1.5]}
|
||||||
scale={[3, 1.5, 0]}
|
scale={[-3, 1.5, 0]}
|
||||||
|
renderOrder={1}
|
||||||
>
|
>
|
||||||
<planeBufferGeometry attach="geometry"></planeBufferGeometry>
|
<planeBufferGeometry attach="geometry"></planeBufferGeometry>
|
||||||
<shaderMaterial
|
<shaderMaterial
|
||||||
|
@ -103,6 +106,7 @@ const GateSide = () => {
|
||||||
fragmentShader={fragmentShaderRight}
|
fragmentShader={fragmentShaderRight}
|
||||||
transparent={true}
|
transparent={true}
|
||||||
ref={matRef}
|
ref={matRef}
|
||||||
|
side={THREE.DoubleSide}
|
||||||
/>
|
/>
|
||||||
</mesh>
|
</mesh>
|
||||||
</>
|
</>
|
||||||
|
|
|
@ -81,23 +81,23 @@ const MediaComponentManager = (props: StateManagerProps) => {
|
||||||
action: setActiveMediaComponent,
|
action: setActiveMediaComponent,
|
||||||
value: "play",
|
value: "play",
|
||||||
},
|
},
|
||||||
switch_to_right_side_from_play: {
|
play_right: {
|
||||||
action: switchToRightSide,
|
action: switchToRightSide,
|
||||||
value: "play",
|
value: "play",
|
||||||
},
|
},
|
||||||
switch_to_right_side_from_exit: {
|
exit_right: {
|
||||||
action: switchToRightSide,
|
action: switchToRightSide,
|
||||||
value: "exit",
|
value: "exit",
|
||||||
},
|
},
|
||||||
switch_to_left_side_from_fstWord: {
|
fstWord_left: {
|
||||||
action: switchToLeftSide,
|
action: switchToLeftSide,
|
||||||
value: "fstWord",
|
value: "fstWord",
|
||||||
},
|
},
|
||||||
switch_to_left_side_from_sndWord: {
|
sndWord_left: {
|
||||||
action: switchToLeftSide,
|
action: switchToLeftSide,
|
||||||
value: "sndWord",
|
value: "sndWord",
|
||||||
},
|
},
|
||||||
switch_to_left_side_from_thirdWord: {
|
thirdWord_left: {
|
||||||
action: switchToLeftSide,
|
action: switchToLeftSide,
|
||||||
value: "thirdWord",
|
value: "thirdWord",
|
||||||
},
|
},
|
||||||
|
|
|
@ -20,7 +20,12 @@ const SceneManager = (props: StateManagerProps) => {
|
||||||
},
|
},
|
||||||
exit_select: {
|
exit_select: {
|
||||||
action: setScene,
|
action: setScene,
|
||||||
value: newScene,
|
value: "main",
|
||||||
|
delay: 0,
|
||||||
|
},
|
||||||
|
exit_gate: {
|
||||||
|
action: setScene,
|
||||||
|
value: "main",
|
||||||
delay: 0,
|
delay: 0,
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
|
|
|
@ -2,6 +2,7 @@ import { GameContext } from "./StateManagers/EventManager";
|
||||||
import handleMainSceneEvent from "./mainSceneEventHandler";
|
import handleMainSceneEvent from "./mainSceneEventHandler";
|
||||||
import handleMediaSceneEvent from "./mediaSceneEventHandler";
|
import handleMediaSceneEvent from "./mediaSceneEventHandler";
|
||||||
import handleBootMainMenuEvent from "./bootEventHandler";
|
import handleBootMainMenuEvent from "./bootEventHandler";
|
||||||
|
import handleGateSceneEvent from "./gateSceneEventHandler";
|
||||||
|
|
||||||
const computeAction = (gameContext: GameContext) => {
|
const computeAction = (gameContext: GameContext) => {
|
||||||
switch (gameContext.scene) {
|
switch (gameContext.scene) {
|
||||||
|
@ -11,6 +12,8 @@ const computeAction = (gameContext: GameContext) => {
|
||||||
return handleMediaSceneEvent(gameContext);
|
return handleMediaSceneEvent(gameContext);
|
||||||
case "boot":
|
case "boot":
|
||||||
return handleBootMainMenuEvent(gameContext);
|
return handleBootMainMenuEvent(gameContext);
|
||||||
|
case "gate":
|
||||||
|
return handleGateSceneEvent();
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
5
src/core/gateSceneEventHandler.ts
Normal file
5
src/core/gateSceneEventHandler.ts
Normal file
|
@ -0,0 +1,5 @@
|
||||||
|
import { GameContext } from "./StateManagers/EventManager";
|
||||||
|
|
||||||
|
const handleGateSceneEvent = () => ({ event: "exit_gate" });
|
||||||
|
|
||||||
|
export default handleGateSceneEvent;
|
|
@ -2,16 +2,8 @@ import { GameContext } from "./StateManagers/EventManager";
|
||||||
|
|
||||||
const handleMediaSceneEvent = (gameContext: GameContext) => {
|
const handleMediaSceneEvent = (gameContext: GameContext) => {
|
||||||
const keyPress = gameContext.keyPress;
|
const keyPress = gameContext.keyPress;
|
||||||
|
|
||||||
const activeMediaComponent = gameContext.activeMediaComponent;
|
const activeMediaComponent = gameContext.activeMediaComponent;
|
||||||
switch (keyPress) {
|
return { event: `${activeMediaComponent}_${keyPress}` };
|
||||||
case "right":
|
|
||||||
return { event: `switch_to_right_side_from_${activeMediaComponent}` };
|
|
||||||
case "left":
|
|
||||||
return { event: `switch_to_left_side_from_${activeMediaComponent}` };
|
|
||||||
default:
|
|
||||||
return { event: `${activeMediaComponent}_${keyPress}`, newScene: "main" };
|
|
||||||
}
|
|
||||||
};
|
};
|
||||||
|
|
||||||
export default handleMediaSceneEvent;
|
export default handleMediaSceneEvent;
|
||||||
|
|
Loading…
Reference in a new issue