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

pause scene squares partly added

Browse source
This commit is contained in:
ad044 2020-12-01 23:03:18 +04:00
parent db396e62ee
commit 00ffcdc710
5 changed files with 203 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

182
src/components/MainScene/Pause.tsx Normal file
View file

@ -0,0 +1,182 @@
import React, { useCallback, useMemo, useRef, useState } from "react";
import pauseGrayBoxes from "../../static/sprite/pause_gray_boxes.png";
import * as THREE from "three";
import { useFrame, useLoader } from "react-three-fiber";
import BigLetter from "../TextRenderer/BigLetter";
const Pause = () => {
const grayBoxesTex = useLoader(THREE.TextureLoader, pauseGrayBoxes);
const generateSqaureGeom = useCallback((row: number, square: number) => {
const geometry = new THREE.PlaneBufferGeometry();
const uvAttribute = geometry.attributes.uv;
for (let i = 0; i < uvAttribute.count; i++) {
let u = uvAttribute.getX(i);
let v = uvAttribute.getY(i);
u = (u * 16) / 256 + (row * 64) / 256 + (square * 16) / 256;
uvAttribute.setXY(i, u, v);
}
return geometry;
}, []);
const squareGeoms = useMemo(
() =>
[0, 1, 2, 3].map((row: number) =>
[0, 1, 2, 3, 2, 1, 0].map((col: number) => generateSqaureGeom(row, col))
),
[generateSqaureGeom]
);
return (
<group position={[-1, -0.8, 0]} scale={[0.9, 0.9, 0]}>
{[0, 1, 2, 3, 2, 1, 0].map((row: number, rowIdx: number) =>
[0, 1, 2, 3, 4, 5, 6].map((col: number) => {
if (rowIdx === 5 && col > 0) {
return col === 1 ? (
<>
<group scale={[0.2, 0.2, 0]} position={[0.1, 1.8, 0]}>
<BigLetter
color={"white"}
letter={"L"}
letterIdx={col}
yellowTextOffsetXCoeff={col / 7}
key={col}
/>
</group>
)
</>
) : (
<mesh
geometry={squareGeoms[row][col]}
position={[col / 2.8, rowIdx / 2.8, 0]}
scale={[col > 3 ? -0.25 : 0.25, rowIdx <= 3 ? -0.25 : 0.25, 0]}
key={col}
>
<meshBasicMaterial
attach="material"
map={grayBoxesTex}
side={
(col > 3 && rowIdx <= 3) || (col <= 3 && rowIdx > 3)
? THREE.FrontSide
: THREE.BackSide
}
/>
</mesh>
);
} else if (rowIdx === 4 && col === 4) {
return (
<>
<group scale={[0.2, 0.2, 0]} position={[0.1, 1.45, 0]}>
<BigLetter
color={"white"}
letter={"A"}
letterIdx={col}
yellowTextOffsetXCoeff={col / 7}
key={col}
/>
</group>
</>
);
} else if (rowIdx === 3 && col === 3) {
return (
<>
<group scale={[0.2, 0.2, 0]} position={[0.12, 1.05, 0]}>
<BigLetter
color={"white"}
letter={"C"}
letterIdx={col}
yellowTextOffsetXCoeff={col / 7}
key={col}
/>
</group>
</>
);
} else {
return (
<mesh
geometry={squareGeoms[row][col]}
position={[col / 2.8, rowIdx / 2.8, 0]}
scale={[col > 3 ? -0.25 : 0.25, rowIdx <= 3 ? -0.25 : 0.25, 0]}
key={col}
>
<meshBasicMaterial
attach="material"
map={grayBoxesTex}
side={
(col > 3 && rowIdx <= 3) || (col <= 3 && rowIdx > 3)
? THREE.FrontSide
: THREE.BackSide
}
/>
</mesh>
);
}
})
)}
{/*{"Load".split("").map((letter, idx) => (*/}
{/* <group scale={[0.2, 0.2, 0]} position={[0.35 + idx / 8, 1.8, 0]}>*/}
{/* <BigLetter*/}
{/* color={idx > 0 ? "yellow" : "orange"}*/}
{/* letter={letter}*/}
{/* letterIdx={idx}*/}
{/* yellowTextOffsetXCoeff={0}*/}
{/* key={idx}*/}
{/* />*/}
{/* </group>*/}
{/*))}*/}
{/*{"About".split("").map((letter, idx) => (*/}
{/* <group scale={[0.2, 0.2, 0]} position={[1.4 + idx / 8, 1.45, 0]}>*/}
{/* <BigLetter*/}
{/* color={idx > 0 ? "yellow" : "orange"}*/}
{/* letter={letter}*/}
{/* letterIdx={idx}*/}
{/* yellowTextOffsetXCoeff={0}*/}
{/* key={idx}*/}
{/* />*/}
{/* </group>*/}
{/*))}*/}
{/*{"Change".split("").map((letter, idx) => (*/}
{/* <group scale={[0.2, 0.2, 0]} position={[1 + idx / 6, 1.05, 0]}>*/}
{/* <BigLetter*/}
{/* color={idx > 0 ? "yellow" : "orange"}*/}
{/* letter={letter}*/}
{/* letterIdx={idx}*/}
{/* yellowTextOffsetXCoeff={0}*/}
{/* key={idx}*/}
{/* />*/}
{/* </group>*/}
{/*))}*/}
{/*{"Save".split("").map((letter, idx) => (*/}
{/* <group scale={[0.2, 0.2, 0]} position={[0.3 + idx / 7, 0.35, 0]}>*/}
{/* <BigLetter*/}
{/* color={idx > 0 ? "yellow" : "orange"}*/}
{/* letter={letter}*/}
{/* letterIdx={idx}*/}
{/* yellowTextOffsetXCoeff={0}*/}
{/* key={idx}*/}
{/* />*/}
{/* </group>*/}
{/*))}*/}
{/*{"Exit".split("").map((letter, idx) => (*/}
{/* <group scale={[0.2, 0.2, 0]} position={[1.75 + idx / 8, 0, 0]}>*/}
{/* <BigLetter*/}
{/* color={idx > 0 ? "yellow" : "orange"}*/}
{/* letter={letter}*/}
{/* letterIdx={idx}*/}
{/* yellowTextOffsetXCoeff={0}*/}
{/* key={idx}*/}
{/* />*/}
{/* </group>*/}
{/*))}*/}
</group>
);
};
export default Pause;

7
src/components/TextRenderer/BigLetter.tsx
View file

@ -1,5 +1,6 @@
import orangeFont from "../../static/sprite/orange_font_texture.png";
import yellowFont from "../../static/sprite/yellow_font_texture.png";
import whiteFont from "../../static/sprite/white_and_green_texture.png";
import * as THREE from "three";
import { useLoader } from "react-three-fiber";
import orange_font_json from "../../resources/font_data/big_font.json";
@ -13,7 +14,11 @@ const BigLetter = (props: {
yellowTextOffsetXCoeff: number;
}) => {
const colorToTexture = (color: string) => {
const colorTexture = { orange: orangeFont, yellow: yellowFont };
const colorTexture = {
orange: orangeFont,
yellow: yellowFont,
white: whiteFont,
};
return colorTexture[color as keyof typeof colorTexture];
};

2
src/resources/font_data/big_font.json
View file

@ -45,7 +45,7 @@
"d": [64, 34, 11, 14, 0],
"e": [76, 34, 12, 14, 0],
"f": [90, 34, 9, 14, 3],
"g": [100, 34, 11, 17, 0],
"g": [100, 34, 11, 14, 4],
"h": [112, 34, 11, 14, 0],
"i": [123, 34, 7, 14, 0],
"j": [132, 34, 7, 17, 3],

22
src/scenes/MainScene.tsx
View file

@ -15,6 +15,7 @@ import YellowOrb from "../components/MainScene/YellowOrb";
import ActiveLevelNodes from "../components/MainScene/ActiveLevelNodes";
import YellowTextRenderer from "../components/TextRenderer/YellowTextRenderer";
import LevelSelection from "../components/MainScene/LevelSelection";
import Pause from "../components/MainScene/Pause";
const MainScene = () => {
const currentSubscene = useMainSceneStore((state) => state.subscene);
@ -34,24 +35,25 @@ const MainScene = () => {
<Suspense fallback={null}>
<MainSceneIntro />
<a.group>
<Preloader />
<Site />
{/*<Preloader />*/}
{/*<Site />*/}
{/*<ActiveLevelNodes />*/}
<HUD visible={!isPaused} />
<GreenTextRenderer visible={!isPaused} />
<YellowTextRenderer visible={!isPaused} />
<YellowOrb visible={!isPaused} />
{/*<HUD visible={!isPaused} />*/}
{/*<GreenTextRenderer visible={!isPaused} />*/}
{/*<YellowTextRenderer visible={!isPaused} />*/}
{/*<YellowOrb visible={!isPaused} />*/}
{/*<Starfield />*/}
<GrayPlanes visible={!isPaused} />
<MiddleRing />
<LevelSelection />
{/*<GrayPlanes visible={!isPaused} />*/}
{/*<MiddleRing />*/}
{/*<LevelSelection />*/}
{/*<OrbitControls />*/}
<pointLight color={0xffffff} position={[0, 0, 7]} intensity={1} />
<pointLight color={0x7f7f7f} position={[0, 10, 0]} intensity={1.5} />
<pointLight color={0xffffff} position={[8, 0, 0]} intensity={0.2} />
<pointLight color={0xffffff} position={[-8, 0, 0]} intensity={0.2} />
<Pause />
</a.group>
<Lain />
{/*<Lain />*/}
</Suspense>
</perspectiveCamera>
);

2
src/store.ts
View file

@ -469,3 +469,5 @@ export const useLevelSelectionStore = create<LevelSelectionState>((set) => ({
levelSelectionToggled: Number(!state.levelSelectionToggled),
})),
}));
export const usePauseStore = create<any>((set) => ({}));