mirror of
https://github.com/ad044/lainTSX.git
synced 2024-10-22 23:19:06 +00:00
added tak scene
This commit is contained in:
parent
02f0823a24
commit
07cc48ae49
11 changed files with 153 additions and 13 deletions
|
@ -11,6 +11,7 @@ import GateScene from "./scenes/GateScene";
|
|||
import BootScene from "./scenes/BootScene";
|
||||
import SSknScene from "./scenes/SSknScene";
|
||||
import PolytanScene from "./scenes/PolytanScene";
|
||||
import TaKScene from "./scenes/TaKScene";
|
||||
|
||||
const App = () => {
|
||||
const currentScene = useSceneStore((state) => state.currentScene);
|
||||
|
@ -30,6 +31,7 @@ const App = () => {
|
|||
boot: <BootScene />,
|
||||
sskn: <SSknScene />,
|
||||
polytan: <PolytanScene />,
|
||||
tak: <TaKScene />,
|
||||
};
|
||||
}, []);
|
||||
|
||||
|
|
|
@ -18,7 +18,7 @@ type LainConstructorProps = {
|
|||
framesHorizontal: number;
|
||||
};
|
||||
|
||||
const LainConstructor = (props: LainConstructorProps) => {
|
||||
export const LainConstructor = (props: LainConstructorProps) => {
|
||||
// any here temporarily
|
||||
const lainSpriteTexture: any = useLoader(THREE.TextureLoader, props.sprite);
|
||||
|
||||
|
|
|
@ -40,6 +40,9 @@ const MediaPlayer = () => {
|
|||
|
||||
if (percentageElapsed % 5 === 0) {
|
||||
setPercentageElapsed(percentageElapsed);
|
||||
if (percentageElapsed === 100) {
|
||||
videoRef.current.pause();
|
||||
}
|
||||
}
|
||||
}
|
||||
}, [setPercentageElapsed, videoRef]);
|
||||
|
@ -51,7 +54,7 @@ const MediaPlayer = () => {
|
|||
}, [updateTime]);
|
||||
|
||||
useEffect(() => {
|
||||
if (currentScene === "media") {
|
||||
if (currentScene === "media" || currentScene === "tak") {
|
||||
const nodeMedia = (site_a as SiteType)[activeLevel][activeNodeId]
|
||||
.media_file;
|
||||
if (nodeMedia.includes("XA")) {
|
||||
|
@ -65,11 +68,7 @@ const MediaPlayer = () => {
|
|||
});
|
||||
} else {
|
||||
import(
|
||||
"../../static/movie/" +
|
||||
currentSite +
|
||||
"/" +
|
||||
nodeMedia +
|
||||
"[0].webm"
|
||||
"../../static/movie/" + currentSite + "/" + nodeMedia + "[0].webm"
|
||||
).then((media) => {
|
||||
setMediaSource(media.default);
|
||||
if (videoRef.current) {
|
||||
|
|
89
src/components/TaKScene/LainTaK.tsx
Normal file
89
src/components/TaKScene/LainTaK.tsx
Normal file
|
@ -0,0 +1,89 @@
|
|||
import React, { useMemo, useRef } from "react";
|
||||
import { useFrame, useLoader } from "react-three-fiber";
|
||||
import * as THREE from "three";
|
||||
import takIntro from "../../static/sprite/tak_intro.png";
|
||||
import takOutro from "../../static/sprite/tak_outro.png";
|
||||
import mouth1 from "../../static/sprite/mouth_1.png";
|
||||
import mouth2 from "../../static/sprite/mouth_2.png";
|
||||
import mouth3 from "../../static/sprite/mouth_3.png";
|
||||
import mouth4 from "../../static/sprite/mouth_4.png";
|
||||
import { useMediaStore } from "../../store";
|
||||
import { LainConstructor } from "../MainScene/Lain";
|
||||
|
||||
type LainTaKProps = {
|
||||
intro: boolean;
|
||||
outro: boolean;
|
||||
};
|
||||
|
||||
const LainTaK = (props: LainTaKProps) => {
|
||||
const mouth1Tex = useLoader(THREE.TextureLoader, mouth1);
|
||||
const mouth2Tex = useLoader(THREE.TextureLoader, mouth2);
|
||||
const mouth3Tex = useLoader(THREE.TextureLoader, mouth3);
|
||||
const mouth4Tex = useLoader(THREE.TextureLoader, mouth4);
|
||||
|
||||
const Intro = () => (
|
||||
<LainConstructor
|
||||
sprite={takIntro}
|
||||
frameCount={31}
|
||||
framesHorizontal={6}
|
||||
framesVertical={6}
|
||||
/>
|
||||
);
|
||||
|
||||
const Outro = () => (
|
||||
<LainConstructor
|
||||
sprite={takOutro}
|
||||
frameCount={39}
|
||||
framesHorizontal={7}
|
||||
framesVertical={6}
|
||||
/>
|
||||
);
|
||||
|
||||
const analyser = useMediaStore((state) => state.audioAnalyser);
|
||||
|
||||
const mouthRef = useRef<THREE.SpriteMaterial>();
|
||||
useFrame(() => {
|
||||
if (analyser) {
|
||||
const freq = parseInt(analyser.getAverageFrequency());
|
||||
|
||||
if (mouthRef.current) {
|
||||
if (freq >= 50) {
|
||||
mouthRef.current.map = mouth4Tex;
|
||||
} else if (freq >= 40 && freq <= 50) {
|
||||
mouthRef.current.map = mouth3Tex;
|
||||
} else if (freq >= 30 && freq <= 40) {
|
||||
mouthRef.current.map = mouth2Tex;
|
||||
} else {
|
||||
mouthRef.current.map = mouth1Tex;
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
const animationDispatch = useMemo(() => {
|
||||
if (props.intro) return <Intro />;
|
||||
else if (props.outro) return <Outro />;
|
||||
}, [props.intro, props.outro]);
|
||||
|
||||
return (
|
||||
<>
|
||||
<sprite scale={[11, 7.7, 0]} visible={props.intro || props.outro}>
|
||||
{animationDispatch}
|
||||
</sprite>
|
||||
<sprite
|
||||
scale={[11, 7.7, 0]}
|
||||
renderOrder={2}
|
||||
visible={!props.intro && !props.outro}
|
||||
>
|
||||
<spriteMaterial
|
||||
attach="material"
|
||||
map={mouth4Tex}
|
||||
alphaTest={0.01}
|
||||
ref={mouthRef}
|
||||
/>
|
||||
</sprite>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default LainTaK;
|
|
@ -22,10 +22,11 @@ const LainManager = (props: StateManagerProps) => {
|
|||
case "throw_node_media":
|
||||
case "throw_node_gate":
|
||||
case "throw_node_sskn":
|
||||
case "throw_node_tak":
|
||||
return {
|
||||
action: setLainMoveState,
|
||||
value: "throw_node",
|
||||
duration: 3904.704,
|
||||
duration: 3900,
|
||||
};
|
||||
}
|
||||
},
|
||||
|
|
|
@ -24,9 +24,7 @@ const MediaComponentManager = (props: StateManagerProps) => {
|
|||
const listener = new THREE.AudioListener();
|
||||
const audio = new THREE.Audio(listener);
|
||||
|
||||
audio.setMediaElementSource(
|
||||
document.getElementById("media") as HTMLMediaElement
|
||||
);
|
||||
audio.setMediaElementSource(mediaElement);
|
||||
|
||||
setAudioAnalyser(new THREE.AudioAnalyser(audio, 2048));
|
||||
|
||||
|
|
|
@ -100,6 +100,7 @@ const NodeManager = (props: StateManagerProps) => {
|
|||
case "throw_node_media":
|
||||
case "throw_node_gate":
|
||||
case "throw_node_sskn":
|
||||
case "throw_node_tak":
|
||||
return {
|
||||
action: animateActiveNodeThrow,
|
||||
value: [newSiteRotY],
|
||||
|
|
|
@ -11,6 +11,7 @@ const SceneManager = (props: StateManagerProps) => {
|
|||
case "throw_node_media":
|
||||
case "throw_node_gate":
|
||||
case "throw_node_sskn":
|
||||
case "throw_node_tak":
|
||||
return {
|
||||
action: setScene,
|
||||
value: newScene,
|
||||
|
|
|
@ -51,7 +51,6 @@ const handleMainSceneEvent = (gameContext: any) => {
|
|||
newSitePosY = selectedNodeData.newSitePosY;
|
||||
newLevel = selectedNodeData.newLevel;
|
||||
newActiveHudId = selectedNodeData.newActiveHudId;
|
||||
|
||||
}
|
||||
|
||||
break;
|
||||
|
@ -76,6 +75,10 @@ const handleMainSceneEvent = (gameContext: any) => {
|
|||
event = eventAnimation + "media";
|
||||
newScene = "media";
|
||||
break;
|
||||
case 6:
|
||||
event = eventAnimation + "tak";
|
||||
newScene = "tak";
|
||||
break;
|
||||
case 8:
|
||||
event = eventAnimation + "gate";
|
||||
newScene = "gate";
|
||||
|
|
|
@ -55,7 +55,6 @@ export const getNodeHudId = (nodeMatrixIndices: {
|
|||
];
|
||||
|
||||
export const isNodeVisible = (nodeId: string, gameProgress: typeof unlocked_nodes) => {
|
||||
console.log(nodeId)
|
||||
const nodeLevel = nodeId.substr(0, 2);
|
||||
const nodeData = (site_a as SiteType)[nodeLevel][nodeId];
|
||||
if (nodeData) {
|
||||
|
|
47
src/scenes/TaKScene.tsx
Normal file
47
src/scenes/TaKScene.tsx
Normal file
|
@ -0,0 +1,47 @@
|
|||
import React, { useEffect, useState } from "react";
|
||||
import LainTaK from "../components/TaKScene/LainTaK";
|
||||
import * as THREE from "three";
|
||||
import { useMediaStore, useSceneStore } from "../store";
|
||||
|
||||
const TaKScene = () => {
|
||||
const setAudioAnalyser = useMediaStore((state) => state.setAudioAnalyser);
|
||||
const setScene = useSceneStore((state) => state.setScene);
|
||||
|
||||
const [isIntro, setIntro] = useState(true);
|
||||
const [isOutro, setIsOutro] = useState(false);
|
||||
|
||||
const percentageElapsed = useMediaStore(
|
||||
(state) => state.mediaPercentageElapsed
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
if (percentageElapsed === 100) {
|
||||
setIsOutro(true);
|
||||
setTimeout(() => {
|
||||
setScene("main");
|
||||
}, 4600);
|
||||
}
|
||||
}, [percentageElapsed, setScene]);
|
||||
|
||||
useEffect(() => {
|
||||
setTimeout(() => {
|
||||
const mediaElement = document.getElementById("media") as HTMLMediaElement;
|
||||
|
||||
const listener = new THREE.AudioListener();
|
||||
const audio = new THREE.Audio(listener);
|
||||
|
||||
audio.setMediaElementSource(mediaElement);
|
||||
|
||||
setAudioAnalyser(new THREE.AudioAnalyser(audio, 2048));
|
||||
|
||||
if (mediaElement) {
|
||||
mediaElement.play();
|
||||
setIntro(false);
|
||||
}
|
||||
}, 3800);
|
||||
}, [setAudioAnalyser]);
|
||||
|
||||
return <LainTaK intro={isIntro} outro={isOutro} />;
|
||||
};
|
||||
|
||||
export default TaKScene;
|
Loading…
Reference in a new issue