mirror of
https://github.com/ad044/lainTSX.git
synced 2024-10-22 23:19:06 +00:00
ported all animations to use react-spring
This commit is contained in:
parent
7c13b05043
commit
11b5b8fed4
7 changed files with 254 additions and 120 deletions
64
package-lock.json
generated
64
package-lock.json
generated
|
@ -4,6 +4,11 @@
|
||||||
"lockfileVersion": 1,
|
"lockfileVersion": 1,
|
||||||
"requires": true,
|
"requires": true,
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
|
"@alloc/types": {
|
||||||
|
"version": "1.3.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/@alloc/types/-/types-1.3.0.tgz",
|
||||||
|
"integrity": "sha512-mH7LiFiq9g6rX2tvt1LtwsclfG5hnsmtIfkZiauAGrm1AwXhoRS0sF2WrN9JGN7eV5vFXqNaB0eXZ3IvMsVi9g=="
|
||||||
|
},
|
||||||
"@babel/code-frame": {
|
"@babel/code-frame": {
|
||||||
"version": "7.10.4",
|
"version": "7.10.4",
|
||||||
"resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.10.4.tgz",
|
"resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.10.4.tgz",
|
||||||
|
@ -1405,6 +1410,50 @@
|
||||||
"resolved": "https://registry.npmjs.org/@nodelib/fs.stat/-/fs.stat-1.1.3.tgz",
|
"resolved": "https://registry.npmjs.org/@nodelib/fs.stat/-/fs.stat-1.1.3.tgz",
|
||||||
"integrity": "sha512-shAmDyaQC4H92APFoIaVDHCx5bStIocgvbwQyxPRrbUY20V1EYTbSDchWbuwlMG3V17cprZhA6+78JfB+3DTPw=="
|
"integrity": "sha512-shAmDyaQC4H92APFoIaVDHCx5bStIocgvbwQyxPRrbUY20V1EYTbSDchWbuwlMG3V17cprZhA6+78JfB+3DTPw=="
|
||||||
},
|
},
|
||||||
|
"@react-spring/animated": {
|
||||||
|
"version": "9.0.0-rc.3",
|
||||||
|
"resolved": "https://registry.npmjs.org/@react-spring/animated/-/animated-9.0.0-rc.3.tgz",
|
||||||
|
"integrity": "sha512-dAvgtKhkYpzzr+EkmZ4ZuJ5CujxCW0LaT109DvO/2MQNk3EWIxcgl+ik4tSulSbgau1GN8RlkRKyDp0wISdQ3Q==",
|
||||||
|
"requires": {
|
||||||
|
"@babel/runtime": "^7.3.1",
|
||||||
|
"@react-spring/shared": "9.0.0-rc.3",
|
||||||
|
"react-layout-effect": "^1.0.1"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"@react-spring/core": {
|
||||||
|
"version": "9.0.0-rc.3",
|
||||||
|
"resolved": "https://registry.npmjs.org/@react-spring/core/-/core-9.0.0-rc.3.tgz",
|
||||||
|
"integrity": "sha512-3OzsVFxpfMJNkkQj8TwAH3NhUAX76AXu6WkslQF4EgBeEoG5eY3m+VvM9RsAsGWDuBKpscZ/wBpFt5Ih6KdGHA==",
|
||||||
|
"requires": {
|
||||||
|
"@babel/runtime": "^7.3.1",
|
||||||
|
"@react-spring/animated": "9.0.0-rc.3",
|
||||||
|
"@react-spring/shared": "9.0.0-rc.3",
|
||||||
|
"react-layout-effect": "^1.0.1",
|
||||||
|
"use-memo-one": "^1.1.0"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"@react-spring/shared": {
|
||||||
|
"version": "9.0.0-rc.3",
|
||||||
|
"resolved": "https://registry.npmjs.org/@react-spring/shared/-/shared-9.0.0-rc.3.tgz",
|
||||||
|
"integrity": "sha512-dd50TxwwMWd+dSB0InjndUN9w17cbnMCPy+0sag6zRxxKIo7eOyWSliOtLKxvufgmdC8Prm4M3GT5dmB1yxKEQ==",
|
||||||
|
"requires": {
|
||||||
|
"@alloc/types": "^1.2.1",
|
||||||
|
"@babel/runtime": "^7.3.1",
|
||||||
|
"fluids": "^0.1.6",
|
||||||
|
"tslib": "^1.11.1"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"@react-spring/three": {
|
||||||
|
"version": "9.0.0-rc.3",
|
||||||
|
"resolved": "https://registry.npmjs.org/@react-spring/three/-/three-9.0.0-rc.3.tgz",
|
||||||
|
"integrity": "sha512-H55T+Dnck+hsJ8WgE+tb89ngX1E1lDOpMBG4mGzNLGok6XgGqN0VBsHRN3QDl+aPfmJI1BPFPR6b6WbhwqRNbw==",
|
||||||
|
"requires": {
|
||||||
|
"@babel/runtime": "^7.3.1",
|
||||||
|
"@react-spring/animated": "9.0.0-rc.3",
|
||||||
|
"@react-spring/core": "9.0.0-rc.3",
|
||||||
|
"@react-spring/shared": "9.0.0-rc.3"
|
||||||
|
}
|
||||||
|
},
|
||||||
"@sheerun/mutationobserver-shim": {
|
"@sheerun/mutationobserver-shim": {
|
||||||
"version": "0.3.3",
|
"version": "0.3.3",
|
||||||
"resolved": "https://registry.npmjs.org/@sheerun/mutationobserver-shim/-/mutationobserver-shim-0.3.3.tgz",
|
"resolved": "https://registry.npmjs.org/@sheerun/mutationobserver-shim/-/mutationobserver-shim-0.3.3.tgz",
|
||||||
|
@ -5858,6 +5907,11 @@
|
||||||
"resolved": "https://registry.npmjs.org/flatten/-/flatten-1.0.3.tgz",
|
"resolved": "https://registry.npmjs.org/flatten/-/flatten-1.0.3.tgz",
|
||||||
"integrity": "sha512-dVsPA/UwQ8+2uoFe5GHtiBMu48dWLTdsuEd7CKGlZlD78r1TTWBvDuFaFGKCo/ZfEr95Uk56vZoX86OsHkUeIg=="
|
"integrity": "sha512-dVsPA/UwQ8+2uoFe5GHtiBMu48dWLTdsuEd7CKGlZlD78r1TTWBvDuFaFGKCo/ZfEr95Uk56vZoX86OsHkUeIg=="
|
||||||
},
|
},
|
||||||
|
"fluids": {
|
||||||
|
"version": "0.1.9",
|
||||||
|
"resolved": "https://registry.npmjs.org/fluids/-/fluids-0.1.9.tgz",
|
||||||
|
"integrity": "sha512-cA5WHsJZNjsMXzAp/lxl6KLAiOgXFTOwQ+QVf39LfCcoBgih8sqkRadtjN+6UTU6KoF0h0HdYJKI3GWuqRVdBw=="
|
||||||
|
},
|
||||||
"flush-write-stream": {
|
"flush-write-stream": {
|
||||||
"version": "1.1.1",
|
"version": "1.1.1",
|
||||||
"resolved": "https://registry.npmjs.org/flush-write-stream/-/flush-write-stream-1.1.1.tgz",
|
"resolved": "https://registry.npmjs.org/flush-write-stream/-/flush-write-stream-1.1.1.tgz",
|
||||||
|
@ -10607,6 +10661,11 @@
|
||||||
"resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
|
"resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
|
||||||
"integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
|
"integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
|
||||||
},
|
},
|
||||||
|
"react-layout-effect": {
|
||||||
|
"version": "1.0.5",
|
||||||
|
"resolved": "https://registry.npmjs.org/react-layout-effect/-/react-layout-effect-1.0.5.tgz",
|
||||||
|
"integrity": "sha512-zdRXHuch+OBHU6bvjTelOGUCM+UDr/iCY+c0wXLEAc+G4/FlcJruD/hUOzlKH5XgO90Y/BUJPNhI/g9kl+VAsA=="
|
||||||
|
},
|
||||||
"react-merge-refs": {
|
"react-merge-refs": {
|
||||||
"version": "1.1.0",
|
"version": "1.1.0",
|
||||||
"resolved": "https://registry.npmjs.org/react-merge-refs/-/react-merge-refs-1.1.0.tgz",
|
"resolved": "https://registry.npmjs.org/react-merge-refs/-/react-merge-refs-1.1.0.tgz",
|
||||||
|
@ -12855,6 +12914,11 @@
|
||||||
"resolved": "https://registry.npmjs.org/use/-/use-3.1.1.tgz",
|
"resolved": "https://registry.npmjs.org/use/-/use-3.1.1.tgz",
|
||||||
"integrity": "sha512-cwESVXlO3url9YWlFW/TA9cshCEhtu7IKJ/p5soJ/gGpj7vbvFrAY/eIioQ6Dw23KjZhYgiIo8HOs1nQ2vr/oQ=="
|
"integrity": "sha512-cwESVXlO3url9YWlFW/TA9cshCEhtu7IKJ/p5soJ/gGpj7vbvFrAY/eIioQ6Dw23KjZhYgiIo8HOs1nQ2vr/oQ=="
|
||||||
},
|
},
|
||||||
|
"use-memo-one": {
|
||||||
|
"version": "1.1.1",
|
||||||
|
"resolved": "https://registry.npmjs.org/use-memo-one/-/use-memo-one-1.1.1.tgz",
|
||||||
|
"integrity": "sha512-oFfsyun+bP7RX8X2AskHNTxu+R3QdE/RC5IefMbqptmACAA/gfol1KDD5KRzPsGMa62sWxGZw+Ui43u6x4ddoQ=="
|
||||||
|
},
|
||||||
"util": {
|
"util": {
|
||||||
"version": "0.10.3",
|
"version": "0.10.3",
|
||||||
"resolved": "https://registry.npmjs.org/util/-/util-0.10.3.tgz",
|
"resolved": "https://registry.npmjs.org/util/-/util-0.10.3.tgz",
|
||||||
|
|
|
@ -3,6 +3,7 @@
|
||||||
"version": "0.1.0",
|
"version": "0.1.0",
|
||||||
"private": true,
|
"private": true,
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
|
"@react-spring/three": "^9.0.0-rc.3",
|
||||||
"@testing-library/jest-dom": "^4.2.4",
|
"@testing-library/jest-dom": "^4.2.4",
|
||||||
"@testing-library/react": "^9.5.0",
|
"@testing-library/react": "^9.5.0",
|
||||||
"@testing-library/user-event": "^7.2.1",
|
"@testing-library/user-event": "^7.2.1",
|
||||||
|
|
|
@ -1,22 +1,21 @@
|
||||||
import React, { useState, Suspense, useCallback, useEffect } from "react";
|
import { a, useSpring } from "@react-spring/three";
|
||||||
|
//import Orb from "./Orb";
|
||||||
|
import { OrbitControls } from "drei";
|
||||||
|
import React, { Suspense, useCallback, useEffect, useState } from "react";
|
||||||
import { Canvas } from "react-three-fiber";
|
import { Canvas } from "react-three-fiber";
|
||||||
|
import lain_animations from "../resources/lain_animations.json";
|
||||||
|
import level_sprite_directions from "../resources/level_sprite_directions.json";
|
||||||
|
import level_sprite_huds from "../resources/level_sprite_huds.json";
|
||||||
|
import Hub, { PositionAndScaleProps } from "./Hub";
|
||||||
import Lain, {
|
import Lain, {
|
||||||
LainIntro,
|
|
||||||
LainMoveDown,
|
LainMoveDown,
|
||||||
LainMoveLeft,
|
LainMoveLeft,
|
||||||
LainMoveRight,
|
LainMoveRight,
|
||||||
LainMoveUp,
|
LainMoveUp,
|
||||||
LainStanding,
|
LainStanding,
|
||||||
} from "./Lain";
|
} from "./Lain";
|
||||||
import Hub, { PositionAndScaleProps } from "./Hub";
|
|
||||||
//import Orb from "./Orb";
|
|
||||||
import { OrbitControls, PerspectiveCamera } from "drei";
|
|
||||||
import Lights from "./Lights";
|
import Lights from "./Lights";
|
||||||
import OrthoCamera from "./OrthoCamera";
|
import OrthoCamera from "./OrthoCamera";
|
||||||
import TWEEN from "@tweenjs/tween.js";
|
|
||||||
import level_sprite_directions from "../resources/level_sprite_directions.json";
|
|
||||||
import lain_animations from "../resources/lain_animations.json";
|
|
||||||
import level_sprite_huds from "../resources/level_sprite_huds.json";
|
|
||||||
import Preloader from "./Preloader";
|
import Preloader from "./Preloader";
|
||||||
|
|
||||||
type KeyCodeAssociations = {
|
type KeyCodeAssociations = {
|
||||||
|
@ -29,7 +28,7 @@ type SpriteDirections = {
|
||||||
|
|
||||||
// will fix the typing on this later
|
// will fix the typing on this later
|
||||||
type SpriteHuds = {
|
type SpriteHuds = {
|
||||||
[key: string]: Record<string, any>;
|
[key: string]: Record<string, any> | any;
|
||||||
};
|
};
|
||||||
|
|
||||||
type LainAnimations = {
|
type LainAnimations = {
|
||||||
|
@ -39,17 +38,16 @@ type LainAnimations = {
|
||||||
const Game = () => {
|
const Game = () => {
|
||||||
const [isLainMoving, setLainMoving] = useState(false);
|
const [isLainMoving, setLainMoving] = useState(false);
|
||||||
const [lainMoveState, setLainMoveState] = useState(<LainStanding />);
|
const [lainMoveState, setLainMoveState] = useState(<LainStanding />);
|
||||||
const [lainPosY, setLainPosY] = useState(-0.2);
|
|
||||||
|
|
||||||
const [cameraPosY, setCameraPosY] = useState(0);
|
|
||||||
const [cameraRotationY, setCameraRotationY] = useState(0);
|
|
||||||
|
|
||||||
const [currentSprite, setCurrentSprite] = useState("043");
|
const [currentSprite, setCurrentSprite] = useState("043");
|
||||||
|
const [currentSpriteHUD, setCurrentSpriteHUD] = useState<SpriteHuds>(
|
||||||
|
(level_sprite_huds as SpriteHuds)[currentSprite]
|
||||||
|
);
|
||||||
|
|
||||||
// we separate positions of the hud sprites into the state since we need to animate thme
|
// we separate positions of the hud sprites into the state since we need to animate thme
|
||||||
const [longHudPosition, setLongHudPosition] = useState<
|
const [longHudPosX, setLongHudPosX] = useState(
|
||||||
PositionAndScaleProps
|
currentSpriteHUD["long"]["position"][0]
|
||||||
>();
|
);
|
||||||
const [boringHudPosition, setBoringHudPosition] = useState<
|
const [boringHudPosition, setBoringHudPosition] = useState<
|
||||||
PositionAndScaleProps
|
PositionAndScaleProps
|
||||||
>();
|
>();
|
||||||
|
@ -59,30 +57,69 @@ const Game = () => {
|
||||||
return (level_sprite_directions as SpriteDirections)[currentLoc][key];
|
return (level_sprite_directions as SpriteDirections)[currentLoc][key];
|
||||||
};
|
};
|
||||||
|
|
||||||
const getHudData = (sprite: string) => {
|
const [{ cameraRotationY }, setCameraRotationY] = useSpring(
|
||||||
return (level_sprite_huds as SpriteHuds)[sprite];
|
() => ({
|
||||||
};
|
cameraRotationY: 0,
|
||||||
|
config: { precision: 0.0001, duration: 1600 },
|
||||||
|
}),
|
||||||
|
[]
|
||||||
|
);
|
||||||
|
|
||||||
const moveCamera = (value: number, duration: number) => {
|
const [{ cameraPositionY }, setCameraPositionY] = useSpring(
|
||||||
const moveInterval = setInterval(() => {
|
() => ({
|
||||||
setCameraPosY((prev: number) => prev + value);
|
cameraPositionY: 0,
|
||||||
setLainPosY((prev: number) => prev - value);
|
config: { precision: 0.0001, duration: 1200 },
|
||||||
});
|
}),
|
||||||
|
[]
|
||||||
|
);
|
||||||
|
|
||||||
setTimeout(() => {
|
const [{ lainPositionY }, setLainPositionY] = useSpring(
|
||||||
clearInterval(moveInterval);
|
() => ({
|
||||||
}, duration);
|
lainPositionY: -0.06,
|
||||||
};
|
config: { precision: 0.0001, duration: 1200 },
|
||||||
|
}),
|
||||||
|
[]
|
||||||
|
);
|
||||||
|
|
||||||
const rotateCamera = (value: number, duration: number) => {
|
const moveCamera = useCallback(
|
||||||
const rotationInterval = setInterval(() => {
|
(val: number) =>
|
||||||
setCameraRotationY((prev: number) => prev + value);
|
void setTimeout(
|
||||||
});
|
() =>
|
||||||
|
setCameraPositionY(() => ({
|
||||||
|
cameraPositionY: cameraPositionY.get() + val,
|
||||||
|
})),
|
||||||
|
1300
|
||||||
|
),
|
||||||
|
[cameraPositionY, setCameraPositionY]
|
||||||
|
);
|
||||||
|
|
||||||
setTimeout(() => {
|
const moveLain = useCallback(
|
||||||
clearInterval(rotationInterval);
|
(val: number) =>
|
||||||
}, duration);
|
void setTimeout(
|
||||||
};
|
() =>
|
||||||
|
setLainPositionY(() => ({
|
||||||
|
lainPositionY: lainPositionY.get() + val,
|
||||||
|
})),
|
||||||
|
1300
|
||||||
|
),
|
||||||
|
[setLainPositionY, lainPositionY]
|
||||||
|
);
|
||||||
|
|
||||||
|
const rotateCamera = useCallback(
|
||||||
|
(val: number) =>
|
||||||
|
void setTimeout(
|
||||||
|
() =>
|
||||||
|
setCameraRotationY(() => ({
|
||||||
|
cameraRotationY: cameraRotationY.get() + val,
|
||||||
|
})),
|
||||||
|
1100
|
||||||
|
),
|
||||||
|
[setCameraRotationY, cameraRotationY]
|
||||||
|
);
|
||||||
|
|
||||||
|
const camRotY = cameraRotationY.to([0, 1], [0, Math.PI]);
|
||||||
|
const camPosY = cameraPositionY.to([0, 1], [0, Math.PI]);
|
||||||
|
const lainPosY = lainPositionY.to([0, 1], [0, Math.PI]);
|
||||||
|
|
||||||
const getKeyCodeAssociation = (keyCode: number): string => {
|
const getKeyCodeAssociation = (keyCode: number): string => {
|
||||||
return ({
|
return ({
|
||||||
|
@ -95,28 +132,23 @@ const Game = () => {
|
||||||
|
|
||||||
const setAnimationState = useCallback(
|
const setAnimationState = useCallback(
|
||||||
(key: string) => {
|
(key: string) => {
|
||||||
const move = getMove(currentSprite, key);
|
|
||||||
|
|
||||||
switch (key) {
|
switch (key) {
|
||||||
case "down":
|
case "down":
|
||||||
// "+" in the json denotes that the sprite chosen by getMove is not currently on screen,
|
moveCamera(0.3);
|
||||||
// therefore lain should first do a move (up/down/left/right) and then that sprite
|
moveLain(-0.3);
|
||||||
// will be chosen.
|
setLainMoveState(<LainMoveDown />);
|
||||||
if (move[0] !== "+") setCurrentSprite(move);
|
|
||||||
else {
|
|
||||||
setLainMoveState(<LainMoveDown />);
|
|
||||||
setTimeout(() => {
|
|
||||||
setCurrentSprite(move);
|
|
||||||
}, (lain_animations as LainAnimations)[key]["duration"] + 200);
|
|
||||||
}
|
|
||||||
break;
|
break;
|
||||||
case "left":
|
case "left":
|
||||||
|
rotateCamera(0.1);
|
||||||
setLainMoveState(<LainMoveLeft />);
|
setLainMoveState(<LainMoveLeft />);
|
||||||
break;
|
break;
|
||||||
case "up":
|
case "up":
|
||||||
|
moveCamera(-0.3);
|
||||||
|
moveLain(0.3);
|
||||||
setLainMoveState(<LainMoveUp />);
|
setLainMoveState(<LainMoveUp />);
|
||||||
break;
|
break;
|
||||||
case "right":
|
case "right":
|
||||||
|
rotateCamera(-0.1);
|
||||||
setLainMoveState(<LainMoveRight />);
|
setLainMoveState(<LainMoveRight />);
|
||||||
break;
|
break;
|
||||||
default:
|
default:
|
||||||
|
@ -133,78 +165,85 @@ const Game = () => {
|
||||||
setLainMoveState(<LainStanding />);
|
setLainMoveState(<LainStanding />);
|
||||||
}, (lain_animations as LainAnimations)[key]["duration"]);
|
}, (lain_animations as LainAnimations)[key]["duration"]);
|
||||||
},
|
},
|
||||||
[currentSprite]
|
[moveCamera, moveLain, rotateCamera]
|
||||||
);
|
);
|
||||||
|
|
||||||
const handleUserKeyPress = useCallback(
|
const animateSpriteHUDIn = useCallback(
|
||||||
|
(spriteHUD: SpriteHuds) => {
|
||||||
|
const [longPos, boringPos, bigPos] = [
|
||||||
|
spriteHUD["long"]["position"],
|
||||||
|
spriteHUD["boring"]["position"],
|
||||||
|
spriteHUD["big"]["position"],
|
||||||
|
];
|
||||||
|
const [initialLongPos, initialBoringPos, initialBigPos] = [
|
||||||
|
spriteHUD["long"]["initial_position"],
|
||||||
|
spriteHUD["boring"]["initial_position"],
|
||||||
|
spriteHUD["big"]["initial_position"],
|
||||||
|
];
|
||||||
|
},
|
||||||
|
[longHudPosX]
|
||||||
|
);
|
||||||
|
|
||||||
|
const moveDispatcher = useCallback(
|
||||||
|
(move: string, key: string) => {
|
||||||
|
switch (move[0]) {
|
||||||
|
// do nothing / cant move
|
||||||
|
case "":
|
||||||
|
break;
|
||||||
|
// "+" in the json denotes that the sprite chosen by getMove is not currently on screen,
|
||||||
|
// therefore lain should first do a move (up/down/left/right) and then that sprite
|
||||||
|
// will be chosen.
|
||||||
|
case "+":
|
||||||
|
setAnimationState(key);
|
||||||
|
setTimeout(() => {
|
||||||
|
setCurrentSprite(move);
|
||||||
|
setCurrentSpriteHUD((level_sprite_huds as SpriteHuds)[move]);
|
||||||
|
}, (lain_animations as LainAnimations)[key]["duration"] + 200);
|
||||||
|
break;
|
||||||
|
// only change sprite focus
|
||||||
|
default:
|
||||||
|
setCurrentSprite(move);
|
||||||
|
setCurrentSpriteHUD((level_sprite_huds as SpriteHuds)[move]);
|
||||||
|
animateSpriteHUDIn(currentSpriteHUD);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
[setAnimationState, animateSpriteHUDIn, currentSpriteHUD]
|
||||||
|
);
|
||||||
|
|
||||||
|
const handleKeyPress = useCallback(
|
||||||
(event) => {
|
(event) => {
|
||||||
const { keyCode } = event;
|
const { keyCode } = event;
|
||||||
|
|
||||||
const key = getKeyCodeAssociation(keyCode);
|
const key = getKeyCodeAssociation(keyCode);
|
||||||
|
|
||||||
|
const move = getMove(currentSprite, key);
|
||||||
|
|
||||||
console.log(key);
|
console.log(key);
|
||||||
|
|
||||||
if (!isLainMoving && key) {
|
if (!isLainMoving && key) {
|
||||||
setAnimationState(key);
|
moveDispatcher(move, key);
|
||||||
switch (key) {
|
|
||||||
case "left":
|
|
||||||
setTimeout(() => {
|
|
||||||
rotateCamera(0.001, 1600);
|
|
||||||
}, 1100);
|
|
||||||
break;
|
|
||||||
case "right":
|
|
||||||
setTimeout(() => {
|
|
||||||
rotateCamera(-0.001, 1600);
|
|
||||||
}, 1100);
|
|
||||||
break;
|
|
||||||
case "up":
|
|
||||||
setTimeout(() => {
|
|
||||||
moveCamera(-0.005, 1200);
|
|
||||||
}, 1300);
|
|
||||||
break;
|
|
||||||
case "down":
|
|
||||||
setTimeout(() => {
|
|
||||||
moveCamera(0.005, 1200);
|
|
||||||
}, 1300);
|
|
||||||
break;
|
|
||||||
default:
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
[isLainMoving, setAnimationState]
|
[isLainMoving, currentSprite, moveDispatcher]
|
||||||
);
|
);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
window.addEventListener("keydown", handleUserKeyPress);
|
window.addEventListener("keydown", handleKeyPress);
|
||||||
|
|
||||||
document.getElementsByTagName("canvas")[0].className = "hub-background";
|
document.getElementsByTagName("canvas")[0].className = "hub-background";
|
||||||
|
|
||||||
return () => {
|
return () => {
|
||||||
window.removeEventListener("keydown", handleUserKeyPress);
|
window.removeEventListener("keydown", handleKeyPress);
|
||||||
document.getElementsByTagName("body")[0].className = "";
|
document.getElementsByTagName("body")[0].className = "";
|
||||||
};
|
};
|
||||||
}, [handleUserKeyPress]);
|
}, [handleKeyPress]);
|
||||||
|
|
||||||
const animateSpriteHUDIn = () => {
|
|
||||||
//wip
|
|
||||||
const initialLongPos = getHudData(currentSprite)["long"]["initial"];
|
|
||||||
const finalLongPos = getHudData(currentSprite)["long"]["initial"];
|
|
||||||
const pos = getHudData(currentSprite)["long"]["position"];
|
|
||||||
const pos1 = getHudData(currentSprite)["big"]["position"];
|
|
||||||
const pos2 = getHudData(currentSprite)["boring"]["position"];
|
|
||||||
setBigHudPosition(pos1);
|
|
||||||
setLongHudPosition(pos);
|
|
||||||
setBoringHudPosition(pos2);
|
|
||||||
};
|
|
||||||
|
|
||||||
useEffect(animateSpriteHUDIn, []);
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Canvas concurrent>
|
<Canvas concurrent>
|
||||||
<PerspectiveCamera
|
<a.perspectiveCamera
|
||||||
position={[0, cameraPosY, 3]}
|
position-z={3}
|
||||||
rotation={[0, cameraRotationY, 0]}
|
position-y={camPosY}
|
||||||
|
rotation-y={camRotY}
|
||||||
>
|
>
|
||||||
<Suspense fallback={null}>
|
<Suspense fallback={null}>
|
||||||
<OrbitControls />
|
<OrbitControls />
|
||||||
|
@ -219,17 +258,21 @@ const Game = () => {
|
||||||
<OrthoCamera
|
<OrthoCamera
|
||||||
bigHudPosition={bigHudPosition!}
|
bigHudPosition={bigHudPosition!}
|
||||||
boringHudPosition={boringHudPosition!}
|
boringHudPosition={boringHudPosition!}
|
||||||
longHudPosition={longHudPosition!}
|
longHudPosition={[
|
||||||
longHudType={getHudData(currentSprite)["long"]["type"]}
|
longHudPosX,
|
||||||
boringHudType={getHudData(currentSprite)["boring"]["type"]}
|
currentSpriteHUD!["long"]["position"][1],
|
||||||
bigHudType={getHudData(currentSprite)["big"]["type"]}
|
currentSpriteHUD!["long"]["position"][2],
|
||||||
longHudScale={getHudData(currentSprite)["long"]["scale"]}
|
]}
|
||||||
boringHudScale={getHudData(currentSprite)["boring"]["scale"]}
|
longHudType={currentSpriteHUD!["long"]["type"]}
|
||||||
bigHudScale={getHudData(currentSprite)["big"]["scale"]}
|
boringHudType={currentSpriteHUD!["boring"]["type"]}
|
||||||
id={getHudData(currentSprite)["id"]}
|
bigHudType={currentSpriteHUD!["big"]["type"]}
|
||||||
|
longHudScale={currentSpriteHUD!["long"]["scale"]}
|
||||||
|
boringHudScale={currentSpriteHUD!["boring"]["scale"]}
|
||||||
|
bigHudScale={currentSpriteHUD!["big"]["scale"]}
|
||||||
|
id={currentSpriteHUD!["id"]}
|
||||||
/>
|
/>
|
||||||
</Suspense>
|
</Suspense>
|
||||||
</PerspectiveCamera>
|
</a.perspectiveCamera>
|
||||||
</Canvas>
|
</Canvas>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
|
@ -8,11 +8,12 @@ import moveLeftSpriteSheet from "../static/sprites/move_left.png";
|
||||||
import moveRightSpriteSheet from "../static/sprites/move_right.png";
|
import moveRightSpriteSheet from "../static/sprites/move_right.png";
|
||||||
import moveUpSpriteSheet from "../static/sprites/jump_up.png";
|
import moveUpSpriteSheet from "../static/sprites/jump_up.png";
|
||||||
import { PlainSingularAnimator } from "three-plain-animator/lib/plain-singular-animator";
|
import { PlainSingularAnimator } from "three-plain-animator/lib/plain-singular-animator";
|
||||||
|
import { a, Interpolation, useSpring } from "@react-spring/three";
|
||||||
|
|
||||||
type LainProps = {
|
type LainProps = {
|
||||||
isLainMoving: boolean;
|
isLainMoving: boolean;
|
||||||
lainMoveState: JSX.Element;
|
lainMoveState: JSX.Element;
|
||||||
lainPosY: number;
|
lainPosY: Interpolation<number, number>;
|
||||||
};
|
};
|
||||||
|
|
||||||
type LainConstructorProps = {
|
type LainConstructorProps = {
|
||||||
|
@ -113,9 +114,13 @@ export const LainMoveUp = () => {
|
||||||
const Lain = (props: LainProps) => {
|
const Lain = (props: LainProps) => {
|
||||||
return (
|
return (
|
||||||
<Suspense fallback={<>loading...</>}>
|
<Suspense fallback={<>loading...</>}>
|
||||||
<sprite position={[0.1, props.lainPosY, 0]} scale={[4.9, 4.9, 4.9]}>
|
<a.sprite
|
||||||
|
position-x={0.1}
|
||||||
|
position-y={props.lainPosY}
|
||||||
|
scale={[4.9, 4.9, 4.9]}
|
||||||
|
>
|
||||||
{props.isLainMoving ? props.lainMoveState : <LainStanding />}
|
{props.isLainMoving ? props.lainMoveState : <LainStanding />}
|
||||||
</sprite>
|
</a.sprite>
|
||||||
</Suspense>
|
</Suspense>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
|
@ -7,6 +7,8 @@ import * as THREE from "three";
|
||||||
import { useLoader, useThree } from "react-three-fiber";
|
import { useLoader, useThree } from "react-three-fiber";
|
||||||
import { useLayoutEffect } from "react";
|
import { useLayoutEffect } from "react";
|
||||||
|
|
||||||
|
// this function just preloads lain's spritesheets cuz they're big and lazy loading them
|
||||||
|
// used to make the suspense run for a couple milliseconds, resulting in flickering
|
||||||
const Preloader = () => {
|
const Preloader = () => {
|
||||||
const moveDown = useLoader(THREE.TextureLoader, moveDownSpriteSheet);
|
const moveDown = useLoader(THREE.TextureLoader, moveDownSpriteSheet);
|
||||||
const moveUp = useLoader(THREE.TextureLoader, moveUpSpriteSheet);
|
const moveUp = useLoader(THREE.TextureLoader, moveUpSpriteSheet);
|
||||||
|
|
|
@ -1,8 +1,9 @@
|
||||||
import * as THREE from "three";
|
import * as THREE from "three";
|
||||||
import React, { useRef, useState, useEffect } from "react";
|
import React, { useRef, useState, useEffect } from "react";
|
||||||
import { useLoader } from "react-three-fiber";
|
import { useLoader, useFrame } from "react-three-fiber";
|
||||||
import { GLTFLoader, GLTF } from "three/examples/jsm/loaders/GLTFLoader";
|
import { GLTFLoader, GLTF } from "three/examples/jsm/loaders/GLTFLoader";
|
||||||
import { draco } from "drei";
|
import { draco } from "drei";
|
||||||
|
import { useSpring, a } from "@react-spring/three";
|
||||||
|
|
||||||
type GLTFResult = GLTF & {
|
type GLTFResult = GLTF & {
|
||||||
nodes: {
|
nodes: {
|
||||||
|
@ -12,7 +13,13 @@ type GLTFResult = GLTF & {
|
||||||
};
|
};
|
||||||
|
|
||||||
const PurpleRing = (props: JSX.IntrinsicElements["group"]) => {
|
const PurpleRing = (props: JSX.IntrinsicElements["group"]) => {
|
||||||
const [higherRingRotation, setHigherRingRotation] = useState(0);
|
const [{ purpleRingRotationY }, setPurpleRingRotationY] = useSpring(
|
||||||
|
() => ({
|
||||||
|
purpleRingRotationY: 0,
|
||||||
|
config: { precision: 0.0001, duration: 1200 },
|
||||||
|
}),
|
||||||
|
[]
|
||||||
|
);
|
||||||
|
|
||||||
const { nodes, materials } = useLoader<GLTFResult>(
|
const { nodes, materials } = useLoader<GLTFResult>(
|
||||||
GLTFLoader,
|
GLTFLoader,
|
||||||
|
@ -20,18 +27,18 @@ const PurpleRing = (props: JSX.IntrinsicElements["group"]) => {
|
||||||
draco("/draco-gltf/")
|
draco("/draco-gltf/")
|
||||||
);
|
);
|
||||||
|
|
||||||
const purpleRingPermaRotation = () => {
|
useFrame(() => {
|
||||||
setHigherRingRotation((prev) => prev + 0.002);
|
setPurpleRingRotationY(() => ({
|
||||||
};
|
purpleRingRotationY: purpleRingRotationY.get() + 0.04,
|
||||||
|
}));
|
||||||
|
});
|
||||||
|
|
||||||
useEffect(() => {
|
const purpleRingRotY = purpleRingRotationY.to([0, 1], [0, Math.PI]);
|
||||||
setInterval(purpleRingPermaRotation, 1);
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<group
|
<a.group
|
||||||
position={[0, 0.4, 0]}
|
position={[0, 0.4, 0]}
|
||||||
rotation={[0, higherRingRotation, 0]}
|
rotation-y={purpleRingRotY}
|
||||||
scale={[1.3, 1.3, 1.3]}
|
scale={[1.3, 1.3, 1.3]}
|
||||||
dispose={null}
|
dispose={null}
|
||||||
>
|
>
|
||||||
|
@ -42,7 +49,7 @@ const PurpleRing = (props: JSX.IntrinsicElements["group"]) => {
|
||||||
side={THREE.DoubleSide}
|
side={THREE.DoubleSide}
|
||||||
/>
|
/>
|
||||||
</mesh>
|
</mesh>
|
||||||
</group>
|
</a.group>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
|
@ -4,5 +4,17 @@
|
||||||
"down": "042",
|
"down": "042",
|
||||||
"left": "+",
|
"left": "+",
|
||||||
"right": ""
|
"right": ""
|
||||||
|
},
|
||||||
|
"042": {
|
||||||
|
"up": "043",
|
||||||
|
"down": "",
|
||||||
|
"left": "",
|
||||||
|
"right": "041"
|
||||||
|
},
|
||||||
|
"041": {
|
||||||
|
"up": "043",
|
||||||
|
"down": "",
|
||||||
|
"left": "",
|
||||||
|
"right": "041"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in a new issue