mirror of
https://github.com/ad044/lainTSX.git
synced 2024-10-22 23:19:06 +00:00
finished orb animation
This commit is contained in:
parent
ba98824ad8
commit
3d6524bee2
4 changed files with 97 additions and 40 deletions
|
@ -236,8 +236,8 @@ const Game = () => {
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
setSpriteUpdateCooldown(false);
|
setSpriteUpdateCooldown(false);
|
||||||
}, 1000);
|
}, 1000);
|
||||||
break;
|
|
||||||
}
|
}
|
||||||
|
break;
|
||||||
// only change sprite focus
|
// only change sprite focus
|
||||||
default:
|
default:
|
||||||
if (!spriteUpdateCooldown) {
|
if (!spriteUpdateCooldown) {
|
||||||
|
|
|
@ -1,8 +1,8 @@
|
||||||
import React, { Suspense, memo} from "react";
|
import React, { Suspense } from "react";
|
||||||
import GrayRing from "./GrayRing";
|
|
||||||
import PurpleRing from "./PurpleRing";
|
|
||||||
import LevelSprite from "./LevelSprite";
|
|
||||||
import level_sprites from "../resources/level_sprites.json";
|
import level_sprites from "../resources/level_sprites.json";
|
||||||
|
import GrayRing from "./GrayRing";
|
||||||
|
import LevelSprite from "./LevelSprite";
|
||||||
|
import PurpleRing from "./PurpleRing";
|
||||||
|
|
||||||
export type PositionAndScaleProps = [number, number, number];
|
export type PositionAndScaleProps = [number, number, number];
|
||||||
export type RotationProps = [number, number, number, (string | undefined)?];
|
export type RotationProps = [number, number, number, (string | undefined)?];
|
||||||
|
|
|
@ -1,53 +1,110 @@
|
||||||
import React, { useRef, memo, useState } from "react";
|
import React, { memo, useRef, useState } from "react";
|
||||||
|
import { useFrame, useLoader } from "react-three-fiber";
|
||||||
import * as THREE from "three";
|
import * as THREE from "three";
|
||||||
import { useUpdate, useThree, useFrame, useLoader } from "react-three-fiber";
|
|
||||||
import orbSprite from "../static/sprites/orb.png";
|
import orbSprite from "../static/sprites/orb.png";
|
||||||
|
|
||||||
const curve = new THREE.QuadraticBezierCurve3(
|
// initialize outside the component otherwise it gets overwritten when it rerenders
|
||||||
new THREE.Vector3(1.2, 0, 0),
|
|
||||||
new THREE.Vector3(0.5, -0.8, 0),
|
|
||||||
new THREE.Vector3(-1.2, 1, 0)
|
|
||||||
);
|
|
||||||
|
|
||||||
const points = curve.getPoints(100);
|
|
||||||
|
|
||||||
let orbIdx = 0;
|
let orbIdx = 0;
|
||||||
|
let orbDirectionChangeCount = 0;
|
||||||
|
|
||||||
const Orb = memo(() => {
|
const Orb = memo(() => {
|
||||||
const orbRef = useRef();
|
const orbRef = useRef();
|
||||||
const [orbDirection, setOrbDirection] = useState("left");
|
const [orbDirection, setOrbDirection] = useState("left");
|
||||||
const ref = useUpdate((geometry: any) => {
|
const [currentCurve, setCurrentCurve] = useState("first");
|
||||||
geometry.setFromPoints(points);
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
const orbSpriteTexture: any = useLoader(THREE.TextureLoader, orbSprite);
|
const orbSpriteTexture: any = useLoader(THREE.TextureLoader, orbSprite);
|
||||||
|
|
||||||
|
// first one goes from up to down left to right
|
||||||
|
const firstCurve = new THREE.QuadraticBezierCurve3(
|
||||||
|
new THREE.Vector3(1.2, 0, 0),
|
||||||
|
new THREE.Vector3(0.5, -0.8, 0),
|
||||||
|
new THREE.Vector3(-1.2, 1, 0)
|
||||||
|
);
|
||||||
|
|
||||||
|
// second one goes from down to up left to right
|
||||||
|
const secondCurve = new THREE.QuadraticBezierCurve3(
|
||||||
|
new THREE.Vector3(-1.2, -0.8, 0),
|
||||||
|
new THREE.Vector3(-0.5, -0.1, 0),
|
||||||
|
new THREE.Vector3(1.2, 0.8, 0)
|
||||||
|
);
|
||||||
|
|
||||||
useFrame(() => {
|
useFrame(() => {
|
||||||
var orbPos = curve.getPoint(orbIdx / 250);
|
let orbPosFirst = firstCurve.getPoint(orbIdx / 250);
|
||||||
if (orbPos.x < -1.4) setOrbDirection("right");
|
let orbPosSecond = secondCurve.getPoint(orbIdx / 250);
|
||||||
if (orbPos.x > 1.4) setOrbDirection("left");
|
|
||||||
if (orbDirection === "left") {
|
if (orbPosFirst.x < -1.4) {
|
||||||
orbIdx++;
|
switch (currentCurve) {
|
||||||
} else {
|
case "first":
|
||||||
orbIdx--;
|
setOrbDirection("right");
|
||||||
|
break;
|
||||||
|
case "second":
|
||||||
|
setOrbDirection("left");
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
orbDirectionChangeCount++;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (orbPosFirst.x > 1.4) {
|
||||||
|
switch (currentCurve) {
|
||||||
|
case "first":
|
||||||
|
setOrbDirection("left");
|
||||||
|
break;
|
||||||
|
case "second":
|
||||||
|
setOrbDirection("right");
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
orbDirectionChangeCount++;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (orbDirection === "left") {
|
||||||
|
switch (currentCurve) {
|
||||||
|
case "first":
|
||||||
|
orbIdx++;
|
||||||
|
break;
|
||||||
|
case "second":
|
||||||
|
orbIdx--;
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
switch (currentCurve) {
|
||||||
|
case "first":
|
||||||
|
orbIdx--;
|
||||||
|
break;
|
||||||
|
case "second":
|
||||||
|
orbIdx++;
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
if (orbDirectionChangeCount % 6 === 0 && orbDirectionChangeCount !== 0) {
|
||||||
|
orbDirectionChangeCount = 0;
|
||||||
|
switch (currentCurve) {
|
||||||
|
case "first":
|
||||||
|
orbIdx = 250;
|
||||||
|
setCurrentCurve("second");
|
||||||
|
break;
|
||||||
|
case "second":
|
||||||
|
orbIdx = 0;
|
||||||
|
setCurrentCurve("first");
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
setOrbDirection("left");
|
||||||
|
}
|
||||||
|
|
||||||
|
if (currentCurve === "first") {
|
||||||
|
(orbRef.current as any).position.x = orbPosFirst.x;
|
||||||
|
(orbRef.current as any).position.y = orbPosFirst.y;
|
||||||
|
} else {
|
||||||
|
(orbRef.current as any).position.x = orbPosSecond.x;
|
||||||
|
(orbRef.current as any).position.y = orbPosSecond.y;
|
||||||
}
|
}
|
||||||
(orbRef.current as any).position.x = orbPos.x;
|
|
||||||
(orbRef.current as any).position.y = orbPos.y;
|
|
||||||
});
|
});
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<group position={[0, -0.1, -9]}>
|
<group position={[0, -0.1, -9]}>
|
||||||
<sprite scale={[0.3, 0.3, 0.3]} ref={orbRef}>
|
<sprite scale={[0.5, 0.5, 0.5]} ref={orbRef}>
|
||||||
<spriteMaterial attach="material" map={orbSpriteTexture} />
|
<spriteMaterial attach="material" map={orbSpriteTexture} />
|
||||||
</sprite>
|
</sprite>
|
||||||
{/* <line>
|
|
||||||
<bufferGeometry attach="geometry" ref={ref} />
|
|
||||||
<lineBasicMaterial
|
|
||||||
attach="material"
|
|
||||||
color="blue"
|
|
||||||
linewidth={7}
|
|
||||||
transparent={false}
|
|
||||||
/>
|
|
||||||
</line> */}
|
|
||||||
</group>
|
</group>
|
||||||
);
|
);
|
||||||
});
|
});
|
||||||
|
|
|
@ -1,4 +1,4 @@
|
||||||
import { a, Interpolation } from "@react-spring/three";
|
import { Interpolation } from "@react-spring/three";
|
||||||
import React, { createRef, memo, useMemo, useRef } from "react";
|
import React, { createRef, memo, useMemo, useRef } from "react";
|
||||||
import { useFrame } from "react-three-fiber";
|
import { useFrame } from "react-three-fiber";
|
||||||
import * as THREE from "three";
|
import * as THREE from "three";
|
||||||
|
@ -157,7 +157,7 @@ const Starfield = memo((props: StarfieldProps) => {
|
||||||
});
|
});
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<a.group position={[-0.7, -1.5, -4]} >
|
<group position={[-0.7, -1.5, -4]} >
|
||||||
{posesBlueFromRight.map((pos: any, idx: number) => {
|
{posesBlueFromRight.map((pos: any, idx: number) => {
|
||||||
return (
|
return (
|
||||||
<mesh
|
<mesh
|
||||||
|
@ -273,7 +273,7 @@ const Starfield = memo((props: StarfieldProps) => {
|
||||||
</mesh>
|
</mesh>
|
||||||
);
|
);
|
||||||
})}
|
})}
|
||||||
</a.group>
|
</group>
|
||||||
);
|
);
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
Loading…
Reference in a new issue