mirror of
https://github.com/ad044/lainTSX.git
synced 2024-10-22 15:09:05 +00:00
added poly tan
This commit is contained in:
ad044
parent
2f5153fd2b
commit
339962fec4
8 changed files with 271 additions and 11 deletions
|
|
@ -10,6 +10,7 @@ import { useSceneStore } from "./store";
|
|||
import GateScene from "./scenes/GateScene";
|
||||
import BootScene from "./scenes/BootScene";
|
||||
import SSknScene from "./scenes/SSknScene";
|
||||
import PolytanScene from "./scenes/PolytanScene";
|
||||
|
||||
const App = () => {
|
||||
const currentScene = useSceneStore((state) => state.currentScene);
|
||||
|
|
@ -28,6 +29,7 @@ const App = () => {
|
|||
gate: <GateScene />,
|
||||
boot: <BootScene />,
|
||||
sskn: <SSknScene />,
|
||||
polytan: <PolytanScene />,
|
||||
};
|
||||
}, []);
|
||||
|
||||
|
|
|
|||
|
|
@ -42,7 +42,7 @@ const BootAuthorizeUser = (props: BootAuthorizeUserProps) => {
|
|||
authorizeActiveLetters
|
||||
);
|
||||
|
||||
const backgroundLettersPos = useBootStore((state) => state.lettersPos);
|
||||
const backgroundLettersPos = useBootStore((state) => state.bgLettersPos);
|
||||
const activeLetterTextureOffset = useBootStore(
|
||||
(state) => state.activeLetterTextureOffset
|
||||
);
|
||||
|
|
@ -57,6 +57,10 @@ const BootAuthorizeUser = (props: BootAuthorizeUserProps) => {
|
|||
return authorizeActiveLettersTex;
|
||||
}, [activeLetterTextureOffset, authorizeActiveLettersTex]);
|
||||
|
||||
const t = useBootStore(
|
||||
(state) => state.componentMatrixIndices.authorize_user
|
||||
);
|
||||
|
||||
return (
|
||||
<>
|
||||
<OrbitControls />
|
||||
|
|
|
|||
|
|
@ -1,11 +1,11 @@
|
|||
import React, { useEffect, useMemo, useRef, useState } from "react";
|
||||
import React, { useEffect, useMemo, useRef } from "react";
|
||||
import gateText from "../../static/sprite/gate_pass.png";
|
||||
import gateTextUnderline from "../../static/sprite/gate_pass_underline.png";
|
||||
import gateTextAccessPass from "../../static/sprite/you_got_an_access_pass.png";
|
||||
import changeSiteEnable from "../../static/sprite/change_site_enable.png";
|
||||
import gateLeftThing from "../../static/sprite/left_gate_thing.png";
|
||||
import gateRightThing from "../../static/sprite/right_gate_thing.png";
|
||||
import { useFrame, useLoader } from "react-three-fiber";
|
||||
import { useLoader } from "react-three-fiber";
|
||||
import * as THREE from "three";
|
||||
|
||||
type GateMiddleProps = {
|
||||
|
|
|
|||
103
src/components/PolytanScene/PolytanBackground.tsx
Normal file
103
src/components/PolytanScene/PolytanBackground.tsx
Normal file
|
|
@ -0,0 +1,103 @@
|
|||
import React, { useEffect, useMemo, useRef } from "react";
|
||||
import header from "../../static/sprite/polytan_header.png";
|
||||
import background from "../../static/sprite/polytan_background.png";
|
||||
import leftArmHud from "../../static/sprite/poly_larm_hud.png";
|
||||
import rightArmHud from "../../static/sprite/poly_rarm_hud.png";
|
||||
import rightLegHud from "../../static/sprite/poly_rleg_hud.png";
|
||||
import leftLegHud from "../../static/sprite/poly_lleg_hud.png";
|
||||
import headHud from "../../static/sprite/poly_head_hud.png";
|
||||
import bodyHud from "../../static/sprite/poly_body_hud.png";
|
||||
|
||||
import { useLoader } from "react-three-fiber";
|
||||
import * as THREE from "three";
|
||||
|
||||
const PolytanBackground = () => {
|
||||
const headerTex = useLoader(THREE.TextureLoader, header);
|
||||
const backgroundTex = useLoader(THREE.TextureLoader, background);
|
||||
const leftArmHudTex = useLoader(THREE.TextureLoader, leftArmHud);
|
||||
const rightArmHudTex = useLoader(THREE.TextureLoader, rightArmHud);
|
||||
const rightLegHudTex = useLoader(THREE.TextureLoader, rightLegHud);
|
||||
const leftLegHudTex = useLoader(THREE.TextureLoader, leftLegHud);
|
||||
const headHudTex = useLoader(THREE.TextureLoader, headHud);
|
||||
const bodyHudTex = useLoader(THREE.TextureLoader, bodyHud);
|
||||
|
||||
const wordFont = useLoader(THREE.FontLoader, "/3d_fonts/MediaWord.blob");
|
||||
|
||||
const config = useMemo(
|
||||
() => ({
|
||||
font: wordFont,
|
||||
size: 2.5,
|
||||
}),
|
||||
[wordFont]
|
||||
);
|
||||
|
||||
const pressAnyRef = useRef<THREE.Object3D>();
|
||||
|
||||
useEffect(() => {
|
||||
setInterval(() => {
|
||||
if (pressAnyRef.current) {
|
||||
pressAnyRef.current.visible = !pressAnyRef.current.visible;
|
||||
}
|
||||
}, 500);
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<>
|
||||
<sprite scale={[4, 4, 0]} position={[3.5, 2, 0]} renderOrder={-1}>
|
||||
<spriteMaterial attach="material" map={headerTex} />
|
||||
</sprite>
|
||||
<sprite scale={[4, 4, 0]} position={[-3.5, -2, 0]} renderOrder={-1}>
|
||||
<spriteMaterial attach="material" map={backgroundTex} />
|
||||
</sprite>
|
||||
<sprite scale={[3.5, 1, 0]} position={[2.8, 0.5, 0]} renderOrder={2}>
|
||||
<spriteMaterial attach="material" map={leftArmHudTex} />
|
||||
</sprite>
|
||||
<sprite scale={[3.5, 1.5, 0]} position={[-3, -0.8, 0]} renderOrder={2}>
|
||||
<spriteMaterial attach="material" map={rightArmHudTex} />
|
||||
</sprite>
|
||||
<sprite scale={[3.5, 1.5, 0]} position={[2.4, -1.4, 0]} renderOrder={2}>
|
||||
<spriteMaterial attach="material" map={leftLegHudTex} />
|
||||
</sprite>
|
||||
<sprite scale={[3, 0.8, 0]} position={[-3, -2.8, 0]} renderOrder={2}>
|
||||
<spriteMaterial attach="material" map={rightLegHudTex} />
|
||||
</sprite>
|
||||
<sprite scale={[3.4, 1, 0]} position={[-1.5, 2.3, 0]} renderOrder={2}>
|
||||
<spriteMaterial attach="material" map={headHudTex} />
|
||||
</sprite>
|
||||
<sprite scale={[3.4, 1, 0]} position={[1.5, -2.2, 0]} renderOrder={2}>
|
||||
<spriteMaterial attach="material" map={bodyHudTex} />
|
||||
</sprite>
|
||||
|
||||
<group ref={pressAnyRef} visible={false} position={[-1.2, -1.8, 0]}>
|
||||
<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={0x00ba7c}
|
||||
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={0x000000}
|
||||
transparent={true}
|
||||
depthTest={false}
|
||||
/>
|
||||
</mesh>
|
||||
</group>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default PolytanBackground;
|
||||
85
src/components/PolytanScene/PolytanBear.tsx
Normal file
85
src/components/PolytanScene/PolytanBear.tsx
Normal file
|
|
@ -0,0 +1,85 @@
|
|||
import React from "react";
|
||||
import body from "../../static/sprite/body.png";
|
||||
import head from "../../static/sprite/head.png";
|
||||
import leftLeg from "../../static/sprite/left_leg.png";
|
||||
import leftArm from "../../static/sprite/left_arm.png";
|
||||
import rightArm from "../../static/sprite/right_arm.png";
|
||||
import rightLeg from "../../static/sprite/right_leg.png";
|
||||
import skeleton from "../../static/sprite/polytan_skeleton.png";
|
||||
import { useLoader } from "react-three-fiber";
|
||||
import * as THREE from "three";
|
||||
|
||||
type PolytanBearProps = {
|
||||
unlockedParts: {
|
||||
body: boolean;
|
||||
head: boolean;
|
||||
leftArm: boolean;
|
||||
rightArm: boolean;
|
||||
leftLeg: boolean;
|
||||
rightLeg: boolean;
|
||||
};
|
||||
};
|
||||
|
||||
const PolytanBear = (props: PolytanBearProps) => {
|
||||
const skeletonTex = useLoader(THREE.TextureLoader, skeleton);
|
||||
const headTex = useLoader(THREE.TextureLoader, head);
|
||||
const bodyTex = useLoader(THREE.TextureLoader, body);
|
||||
const leftArmTex = useLoader(THREE.TextureLoader, leftArm);
|
||||
const leftLegTex = useLoader(THREE.TextureLoader, leftLeg);
|
||||
const rightArmTex = useLoader(THREE.TextureLoader, rightArm);
|
||||
const rightLegTex = useLoader(THREE.TextureLoader, rightLeg);
|
||||
|
||||
return (
|
||||
<>
|
||||
<sprite scale={[4, 5, 0]} position={[0, -0.4, 0]}>
|
||||
<spriteMaterial attach="material" map={skeletonTex} />
|
||||
</sprite>
|
||||
|
||||
<sprite scale={[2.1, 1.9, 0]} position={[-0.05, -1, 0]}>
|
||||
<spriteMaterial
|
||||
attach="material"
|
||||
map={bodyTex}
|
||||
visible={props.unlockedParts.body}
|
||||
/>
|
||||
</sprite>
|
||||
|
||||
<sprite scale={[2.5, 2.5, 0]} position={[-0.05, 0.8, 0]}>
|
||||
<spriteMaterial
|
||||
attach="material"
|
||||
map={headTex}
|
||||
visible={props.unlockedParts.head}
|
||||
/>
|
||||
</sprite>
|
||||
<sprite scale={[1.9, 1, 0]} position={[1, -2.2, 0]}>
|
||||
<spriteMaterial
|
||||
attach="material"
|
||||
map={leftLegTex}
|
||||
visible={props.unlockedParts.leftLeg}
|
||||
/>
|
||||
</sprite>
|
||||
<sprite scale={[1.5, 1.9, 0]} position={[1.2, -0.4, 0]}>
|
||||
<spriteMaterial
|
||||
attach="material"
|
||||
map={leftArmTex}
|
||||
visible={props.unlockedParts.leftArm}
|
||||
/>
|
||||
</sprite>
|
||||
<sprite scale={[1.6, 2, 0]} position={[-1.2, -1.2, 0]}>
|
||||
<spriteMaterial
|
||||
attach="material"
|
||||
map={rightArmTex}
|
||||
visible={props.unlockedParts.rightArm}
|
||||
/>
|
||||
</sprite>
|
||||
<sprite scale={[1.9, 1, 0]} position={[-1, -2.2, 0]}>
|
||||
<spriteMaterial
|
||||
attach="material"
|
||||
map={rightLegTex}
|
||||
visible={props.unlockedParts.rightLeg}
|
||||
/>
|
||||
</sprite>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default PolytanBear;
|
||||
|
|
@ -14,6 +14,10 @@ const handleBootEvent = (gameContext: GameContext) => {
|
|||
case "back":
|
||||
return { event: `${currentSubscene}_${keyPress}` };
|
||||
case "select":
|
||||
switch(currentSubscene){
|
||||
case "authorize_user":
|
||||
|
||||
}
|
||||
return { event: `${activeBootElement}_${keyPress}` };
|
||||
}
|
||||
};
|
||||
|
|
|
|||
17
src/scenes/PolytanScene.tsx
Normal file
17
src/scenes/PolytanScene.tsx
Normal file
|
|
@ -0,0 +1,17 @@
|
|||
import React from "react";
|
||||
import PolytanBear from "../components/PolytanScene/PolytanBear";
|
||||
import PolytanBackground from "../components/PolytanScene/PolytanBackground";
|
||||
import { usePolytanStore } from "../store";
|
||||
|
||||
const PolytanScene = () => {
|
||||
const unlockedParts = usePolytanStore((state) => state.unlockedParts);
|
||||
|
||||
return (
|
||||
<perspectiveCamera>
|
||||
<PolytanBear unlockedParts={unlockedParts} />
|
||||
<PolytanBackground />
|
||||
</perspectiveCamera>
|
||||
);
|
||||
};
|
||||
|
||||
export default PolytanScene;
|
||||
61
src/store.ts
61
src/store.ts
|
|
@ -442,7 +442,7 @@ export const useSSknStore = create<SSknState>((set) => ({
|
|||
}));
|
||||
|
||||
export const useSceneStore = create<SceneState>((set) => ({
|
||||
currentScene: "boot",
|
||||
currentScene: "polytan",
|
||||
setScene: (to) => set(() => ({ currentScene: to })),
|
||||
}));
|
||||
|
||||
|
|
@ -452,9 +452,15 @@ export const useBootStore = create(
|
|||
componentMatrix: {
|
||||
main_menu: ["authorize_user", "load_data"],
|
||||
load_data: ["load_data_yes", "load_data_no"],
|
||||
authorize_user: ["authorize_user_letters"],
|
||||
authorize_user: [
|
||||
[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13],
|
||||
[14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26],
|
||||
[27, 28, 29, 30, 31, 32, 33, 34, 35, 36, 37, 38, 39],
|
||||
[39, 40, 41, 42, 43, 44, 45, 46, 47, 48, 49, 50, 51],
|
||||
[51, 52, 53, 54, 55, 56, 57, 58, 59, 60, 61, 62, 63],
|
||||
],
|
||||
},
|
||||
lettersPos: {
|
||||
bgLettersPos: {
|
||||
x: 3.35,
|
||||
y: -0.7,
|
||||
},
|
||||
|
|
@ -467,8 +473,10 @@ export const useBootStore = create(
|
|||
main_menu: 0,
|
||||
// 0 or 1
|
||||
load_data: 0,
|
||||
// only 0 (depends on external dataset)
|
||||
authorize_user: 0,
|
||||
authorize_user: {
|
||||
row: 0,
|
||||
col: 0,
|
||||
},
|
||||
},
|
||||
// main_menu, load_data or authorize_user
|
||||
subscene: "authorize_user",
|
||||
|
|
@ -484,68 +492,94 @@ export const useBootStore = create(
|
|||
setSubscene: (to: string) => set(() => ({ subscene: to })),
|
||||
moveAuthorizeUserLetters: (direction: string) =>
|
||||
set((state) => {
|
||||
let initialPos = state.lettersPos;
|
||||
let initialPos = state.bgLettersPos;
|
||||
let initialActiveLetterTextureOffset =
|
||||
state.activeLetterTextureOffset;
|
||||
let initialLetterRowIdx =
|
||||
state.componentMatrixIndices.authorize_user.row;
|
||||
let initialLetterColIdx =
|
||||
state.componentMatrixIndices.authorize_user.col;
|
||||
|
||||
let axis: string;
|
||||
let finalPosVal: number;
|
||||
let finalTextureOffsetVal: number;
|
||||
let finalLetterRowIdx: number;
|
||||
let finalLetterColIdx: number;
|
||||
|
||||
switch (direction) {
|
||||
case "right":
|
||||
axis = "x";
|
||||
if (initialPos.x - 0.3 < -0.25) {
|
||||
finalPosVal = -0.25;
|
||||
finalLetterRowIdx = 12;
|
||||
finalTextureOffsetVal = 0.93;
|
||||
} else {
|
||||
finalPosVal = initialPos.x - 0.3;
|
||||
finalLetterRowIdx = initialLetterRowIdx + 1;
|
||||
finalTextureOffsetVal =
|
||||
initialActiveLetterTextureOffset.x + 0.0775;
|
||||
}
|
||||
finalLetterColIdx = initialLetterColIdx;
|
||||
break;
|
||||
case "left":
|
||||
axis = "x";
|
||||
if (initialPos.x + 0.3 > 3.35) {
|
||||
finalPosVal = 3.35;
|
||||
finalLetterRowIdx = 0;
|
||||
finalTextureOffsetVal = 0;
|
||||
} else {
|
||||
finalPosVal = initialPos.x + 0.3;
|
||||
finalTextureOffsetVal =
|
||||
initialActiveLetterTextureOffset.x - 0.0775;
|
||||
finalLetterRowIdx = initialLetterRowIdx - 1;
|
||||
}
|
||||
finalLetterColIdx = initialLetterColIdx;
|
||||
break;
|
||||
case "up":
|
||||
axis = "y";
|
||||
if (initialPos.y - 0.25 < -0.7) {
|
||||
finalPosVal = -0.7;
|
||||
finalLetterColIdx = 0;
|
||||
finalTextureOffsetVal = -0.2;
|
||||
} else {
|
||||
finalPosVal = initialPos.y - 0.25;
|
||||
finalTextureOffsetVal =
|
||||
initialActiveLetterTextureOffset.y + 0.2;
|
||||
finalLetterColIdx = initialLetterColIdx - 1;
|
||||
}
|
||||
finalLetterRowIdx = initialLetterRowIdx;
|
||||
break;
|
||||
case "down":
|
||||
axis = "y";
|
||||
if (initialPos.y + 0.25 > 0.3) {
|
||||
finalPosVal = 0.3;
|
||||
finalLetterColIdx = 4;
|
||||
finalTextureOffsetVal = -1;
|
||||
} else {
|
||||
finalPosVal = initialPos.y + 0.25;
|
||||
finalTextureOffsetVal =
|
||||
initialActiveLetterTextureOffset.y - 0.2;
|
||||
finalLetterColIdx = initialLetterColIdx + 1;
|
||||
}
|
||||
finalLetterRowIdx = initialLetterRowIdx;
|
||||
break;
|
||||
}
|
||||
return {
|
||||
lettersPos: {
|
||||
...state.lettersPos,
|
||||
bgLettersPos: {
|
||||
...state.bgLettersPos,
|
||||
[axis!]: finalPosVal!,
|
||||
},
|
||||
activeLetterTextureOffset: {
|
||||
...state.activeLetterTextureOffset,
|
||||
[axis!]: finalTextureOffsetVal!,
|
||||
},
|
||||
componentMatrixIndices: {
|
||||
...state.componentMatrixIndices,
|
||||
authorize_user: {
|
||||
row: finalLetterRowIdx!,
|
||||
col: finalLetterColIdx!,
|
||||
},
|
||||
},
|
||||
};
|
||||
}),
|
||||
})
|
||||
|
|
@ -564,6 +598,17 @@ export const useImageStore = create(
|
|||
)
|
||||
);
|
||||
|
||||
export const usePolytanStore = create<any>((set) => ({
|
||||
unlockedParts: {
|
||||
body: true,
|
||||
head: false,
|
||||
leftArm: false,
|
||||
rightArm: false,
|
||||
leftLeg: false,
|
||||
rightLeg: false,
|
||||
},
|
||||
}));
|
||||
|
||||
export const useGateStore = create<GateState>((set) => ({
|
||||
gateLvl: 4,
|
||||
incrementGateLvl: () => set((state) => ({ gateLvl: state.gateLvl + 1 })),
|
||||
|
|
|
|||
Loading…
Reference in a new issue