mirror of
https://github.com/ad044/lainTSX.git
synced 2024-10-22 15:09:05 +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(() => {
|
||||
setSpriteUpdateCooldown(false);
|
||||
}, 1000);
|
||||
break;
|
||||
}
|
||||
break;
|
||||
// only change sprite focus
|
||||
default:
|
||||
if (!spriteUpdateCooldown) {
|
||||
|
|
|
@ -1,8 +1,8 @@
|
|||
import React, { Suspense, memo} from "react";
|
||||
import GrayRing from "./GrayRing";
|
||||
import PurpleRing from "./PurpleRing";
|
||||
import LevelSprite from "./LevelSprite";
|
||||
import React, { Suspense } from "react";
|
||||
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 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 { useUpdate, useThree, useFrame, useLoader } from "react-three-fiber";
|
||||
import orbSprite from "../static/sprites/orb.png";
|
||||
|
||||
const curve = 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)
|
||||
);
|
||||
|
||||
const points = curve.getPoints(100);
|
||||
|
||||
// initialize outside the component otherwise it gets overwritten when it rerenders
|
||||
let orbIdx = 0;
|
||||
let orbDirectionChangeCount = 0;
|
||||
|
||||
const Orb = memo(() => {
|
||||
const orbRef = useRef();
|
||||
const [orbDirection, setOrbDirection] = useState("left");
|
||||
const ref = useUpdate((geometry: any) => {
|
||||
geometry.setFromPoints(points);
|
||||
}, []);
|
||||
const [currentCurve, setCurrentCurve] = useState("first");
|
||||
|
||||
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(() => {
|
||||
var orbPos = curve.getPoint(orbIdx / 250);
|
||||
if (orbPos.x < -1.4) setOrbDirection("right");
|
||||
if (orbPos.x > 1.4) setOrbDirection("left");
|
||||
if (orbDirection === "left") {
|
||||
orbIdx++;
|
||||
} else {
|
||||
orbIdx--;
|
||||
let orbPosFirst = firstCurve.getPoint(orbIdx / 250);
|
||||
let orbPosSecond = secondCurve.getPoint(orbIdx / 250);
|
||||
|
||||
if (orbPosFirst.x < -1.4) {
|
||||
switch (currentCurve) {
|
||||
case "first":
|
||||
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 (
|
||||
<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} />
|
||||
</sprite>
|
||||
{/* <line>
|
||||
<bufferGeometry attach="geometry" ref={ref} />
|
||||
<lineBasicMaterial
|
||||
attach="material"
|
||||
color="blue"
|
||||
linewidth={7}
|
||||
transparent={false}
|
||||
/>
|
||||
</line> */}
|
||||
</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 { useFrame } from "react-three-fiber";
|
||||
import * as THREE from "three";
|
||||
|
@ -157,7 +157,7 @@ const Starfield = memo((props: StarfieldProps) => {
|
|||
});
|
||||
|
||||
return (
|
||||
<a.group position={[-0.7, -1.5, -4]} >
|
||||
<group position={[-0.7, -1.5, -4]} >
|
||||
{posesBlueFromRight.map((pos: any, idx: number) => {
|
||||
return (
|
||||
<mesh
|
||||
|
@ -273,7 +273,7 @@ const Starfield = memo((props: StarfieldProps) => {
|
|||
</mesh>
|
||||
);
|
||||
})}
|
||||
</a.group>
|
||||
</group>
|
||||
);
|
||||
});
|
||||
|
||||
|
|
Loading…
Reference in a new issue