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 BootScene from "./scenes/BootScene";
|
||||||
import SSknScene from "./scenes/SSknScene";
|
import SSknScene from "./scenes/SSknScene";
|
||||||
import PolytanScene from "./scenes/PolytanScene";
|
import PolytanScene from "./scenes/PolytanScene";
|
||||||
|
import TaKScene from "./scenes/TaKScene";
|
||||||
|
|
||||||
const App = () => {
|
const App = () => {
|
||||||
const currentScene = useSceneStore((state) => state.currentScene);
|
const currentScene = useSceneStore((state) => state.currentScene);
|
||||||
|
@ -30,6 +31,7 @@ const App = () => {
|
||||||
boot: <BootScene />,
|
boot: <BootScene />,
|
||||||
sskn: <SSknScene />,
|
sskn: <SSknScene />,
|
||||||
polytan: <PolytanScene />,
|
polytan: <PolytanScene />,
|
||||||
|
tak: <TaKScene />,
|
||||||
};
|
};
|
||||||
}, []);
|
}, []);
|
||||||
|
|
||||||
|
|
|
@ -18,7 +18,7 @@ type LainConstructorProps = {
|
||||||
framesHorizontal: number;
|
framesHorizontal: number;
|
||||||
};
|
};
|
||||||
|
|
||||||
const LainConstructor = (props: LainConstructorProps) => {
|
export const LainConstructor = (props: LainConstructorProps) => {
|
||||||
// any here temporarily
|
// any here temporarily
|
||||||
const lainSpriteTexture: any = useLoader(THREE.TextureLoader, props.sprite);
|
const lainSpriteTexture: any = useLoader(THREE.TextureLoader, props.sprite);
|
||||||
|
|
||||||
|
|
|
@ -40,6 +40,9 @@ const MediaPlayer = () => {
|
||||||
|
|
||||||
if (percentageElapsed % 5 === 0) {
|
if (percentageElapsed % 5 === 0) {
|
||||||
setPercentageElapsed(percentageElapsed);
|
setPercentageElapsed(percentageElapsed);
|
||||||
|
if (percentageElapsed === 100) {
|
||||||
|
videoRef.current.pause();
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}, [setPercentageElapsed, videoRef]);
|
}, [setPercentageElapsed, videoRef]);
|
||||||
|
@ -51,7 +54,7 @@ const MediaPlayer = () => {
|
||||||
}, [updateTime]);
|
}, [updateTime]);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (currentScene === "media") {
|
if (currentScene === "media" || currentScene === "tak") {
|
||||||
const nodeMedia = (site_a as SiteType)[activeLevel][activeNodeId]
|
const nodeMedia = (site_a as SiteType)[activeLevel][activeNodeId]
|
||||||
.media_file;
|
.media_file;
|
||||||
if (nodeMedia.includes("XA")) {
|
if (nodeMedia.includes("XA")) {
|
||||||
|
@ -65,11 +68,7 @@ const MediaPlayer = () => {
|
||||||
});
|
});
|
||||||
} else {
|
} else {
|
||||||
import(
|
import(
|
||||||
"../../static/movie/" +
|
"../../static/movie/" + currentSite + "/" + nodeMedia + "[0].webm"
|
||||||
currentSite +
|
|
||||||
"/" +
|
|
||||||
nodeMedia +
|
|
||||||
"[0].webm"
|
|
||||||
).then((media) => {
|
).then((media) => {
|
||||||
setMediaSource(media.default);
|
setMediaSource(media.default);
|
||||||
if (videoRef.current) {
|
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_media":
|
||||||
case "throw_node_gate":
|
case "throw_node_gate":
|
||||||
case "throw_node_sskn":
|
case "throw_node_sskn":
|
||||||
|
case "throw_node_tak":
|
||||||
return {
|
return {
|
||||||
action: setLainMoveState,
|
action: setLainMoveState,
|
||||||
value: "throw_node",
|
value: "throw_node",
|
||||||
duration: 3904.704,
|
duration: 3900,
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
|
@ -24,9 +24,7 @@ const MediaComponentManager = (props: StateManagerProps) => {
|
||||||
const listener = new THREE.AudioListener();
|
const listener = new THREE.AudioListener();
|
||||||
const audio = new THREE.Audio(listener);
|
const audio = new THREE.Audio(listener);
|
||||||
|
|
||||||
audio.setMediaElementSource(
|
audio.setMediaElementSource(mediaElement);
|
||||||
document.getElementById("media") as HTMLMediaElement
|
|
||||||
);
|
|
||||||
|
|
||||||
setAudioAnalyser(new THREE.AudioAnalyser(audio, 2048));
|
setAudioAnalyser(new THREE.AudioAnalyser(audio, 2048));
|
||||||
|
|
||||||
|
|
|
@ -100,6 +100,7 @@ const NodeManager = (props: StateManagerProps) => {
|
||||||
case "throw_node_media":
|
case "throw_node_media":
|
||||||
case "throw_node_gate":
|
case "throw_node_gate":
|
||||||
case "throw_node_sskn":
|
case "throw_node_sskn":
|
||||||
|
case "throw_node_tak":
|
||||||
return {
|
return {
|
||||||
action: animateActiveNodeThrow,
|
action: animateActiveNodeThrow,
|
||||||
value: [newSiteRotY],
|
value: [newSiteRotY],
|
||||||
|
|
|
@ -11,6 +11,7 @@ const SceneManager = (props: StateManagerProps) => {
|
||||||
case "throw_node_media":
|
case "throw_node_media":
|
||||||
case "throw_node_gate":
|
case "throw_node_gate":
|
||||||
case "throw_node_sskn":
|
case "throw_node_sskn":
|
||||||
|
case "throw_node_tak":
|
||||||
return {
|
return {
|
||||||
action: setScene,
|
action: setScene,
|
||||||
value: newScene,
|
value: newScene,
|
||||||
|
|
|
@ -51,7 +51,6 @@ const handleMainSceneEvent = (gameContext: any) => {
|
||||||
newSitePosY = selectedNodeData.newSitePosY;
|
newSitePosY = selectedNodeData.newSitePosY;
|
||||||
newLevel = selectedNodeData.newLevel;
|
newLevel = selectedNodeData.newLevel;
|
||||||
newActiveHudId = selectedNodeData.newActiveHudId;
|
newActiveHudId = selectedNodeData.newActiveHudId;
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
break;
|
break;
|
||||||
|
@ -76,6 +75,10 @@ const handleMainSceneEvent = (gameContext: any) => {
|
||||||
event = eventAnimation + "media";
|
event = eventAnimation + "media";
|
||||||
newScene = "media";
|
newScene = "media";
|
||||||
break;
|
break;
|
||||||
|
case 6:
|
||||||
|
event = eventAnimation + "tak";
|
||||||
|
newScene = "tak";
|
||||||
|
break;
|
||||||
case 8:
|
case 8:
|
||||||
event = eventAnimation + "gate";
|
event = eventAnimation + "gate";
|
||||||
newScene = "gate";
|
newScene = "gate";
|
||||||
|
|
|
@ -55,7 +55,6 @@ export const getNodeHudId = (nodeMatrixIndices: {
|
||||||
];
|
];
|
||||||
|
|
||||||
export const isNodeVisible = (nodeId: string, gameProgress: typeof unlocked_nodes) => {
|
export const isNodeVisible = (nodeId: string, gameProgress: typeof unlocked_nodes) => {
|
||||||
console.log(nodeId)
|
|
||||||
const nodeLevel = nodeId.substr(0, 2);
|
const nodeLevel = nodeId.substr(0, 2);
|
||||||
const nodeData = (site_a as SiteType)[nodeLevel][nodeId];
|
const nodeData = (site_a as SiteType)[nodeLevel][nodeId];
|
||||||
if (nodeData) {
|
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