feat(VFX): Added skidmarks
parent
7665cd70fa
commit
c93290cd6d
|
@ -88,9 +88,16 @@ export const PlayerControllerGamepad = ({
|
|||
const slowDownDuration = useRef(1500);
|
||||
const { buttonA, buttonB, RB, LB, joystick, select, start } = useGamepad();
|
||||
|
||||
const skidRotation = useRef(0);
|
||||
|
||||
const rightWheel = useRef();
|
||||
const leftWheel = useRef();
|
||||
const isDrifting = useRef(false);
|
||||
useEffect(() => {
|
||||
if(kart.current) {
|
||||
actions.setBody(body.current);
|
||||
if(leftWheel.current && rightWheel.current && body.current) {
|
||||
actions.setLeftWheel(leftWheel.current);
|
||||
actions.setRightWheel(rightWheel.current);
|
||||
actions.setIsDrifting(isDrifting.current);
|
||||
}
|
||||
}, [body.current]);
|
||||
|
||||
|
@ -100,6 +107,7 @@ export const PlayerControllerGamepad = ({
|
|||
if (player.id !== id) return;
|
||||
const time = clock.getElapsedTime();
|
||||
if (!body.current && !mario.current) return;
|
||||
isDrifting.current = driftLeft.current || driftRight.current;
|
||||
engineSound.current.setVolume(currentSpeed / 300 + 0.2);
|
||||
engineSound.current.setPlaybackRate(currentSpeed / 10 + 0.1);
|
||||
jumpSound.current.setPlaybackRate(1.5);
|
||||
|
@ -122,8 +130,6 @@ export const PlayerControllerGamepad = ({
|
|||
actions.setGameStarted(false);
|
||||
}
|
||||
|
||||
// mouse steering
|
||||
|
||||
if (!driftLeft.current && !driftRight.current) {
|
||||
steeringAngle = currentSteeringSpeed * -joystick[0];
|
||||
targetXPosition = -camMaxOffset * -joystick[0];
|
||||
|
@ -475,6 +481,8 @@ export const PlayerControllerGamepad = ({
|
|||
player.setState("turboColor", turboColor);
|
||||
player.setState("scale", scale);
|
||||
player.setState("bananas", bananas);
|
||||
|
||||
skidRotation.current = kartRotation + mario.current.rotation.y;
|
||||
});
|
||||
|
||||
return player.id === id ? (
|
||||
|
@ -513,7 +521,7 @@ export const PlayerControllerGamepad = ({
|
|||
/>
|
||||
<CoinParticles coins={coins} />
|
||||
<ItemParticles item={item} />
|
||||
<mesh position={[0.6, 0.05, 0.5]} scale={scale}>
|
||||
<mesh position={[0.6, 0.05, 0.5]} scale={scale} ref={rightWheel}>
|
||||
<sphereGeometry args={[0.05, 16, 16]} />
|
||||
<meshStandardMaterial
|
||||
emissive={turboColor}
|
||||
|
@ -542,6 +550,8 @@ export const PlayerControllerGamepad = ({
|
|||
opacity={0.4}
|
||||
/>
|
||||
</mesh>
|
||||
<mesh position={[-0.46, 0.05, 0.3]} ref={leftWheel}>
|
||||
</mesh>
|
||||
<mesh position={[-0.6, 0.05, 0.5]} scale={scale * 10}>
|
||||
<sphereGeometry args={[0.05, 16, 16]} />
|
||||
<FakeGlowMaterial
|
||||
|
@ -551,6 +561,8 @@ export const PlayerControllerGamepad = ({
|
|||
glowSharpness={1}
|
||||
/>
|
||||
</mesh>
|
||||
<mesh position={[0.46, 0.05, 0.3]} ref={rightWheel}>
|
||||
</mesh>
|
||||
{/* <FlameParticles isBoosting={isBoosting} /> */}
|
||||
<DriftParticlesLeft turboColor={turboColor} scale={scale} />
|
||||
<DriftParticlesRight turboColor={turboColor} scale={scale} />
|
||||
|
|
|
@ -14,13 +14,17 @@ const v = new Vector3()
|
|||
|
||||
|
||||
|
||||
export function Skid({ count = 500, opacity = 1, size = 2 }) {
|
||||
export function Skid({ count = 500, opacity = 0.5, size = 0.3 }) {
|
||||
const ref = useRef(null);
|
||||
const { body } = useStore();
|
||||
const { leftWheel, rightWheel } = useStore();
|
||||
let index = 0
|
||||
useFrame(() => {
|
||||
if (body && ref.current) {
|
||||
setItemAt(ref.current, e, body, index++)
|
||||
const isDrifting = useStore.getState()
|
||||
console.log(isDrifting)
|
||||
if (leftWheel && rightWheel && ref.current && isDrifting) {
|
||||
setItemAt(ref.current, leftWheel.rotation, leftWheel, index++);
|
||||
setItemAt(ref.current, rightWheel.rotation, rightWheel, index++);
|
||||
|
||||
if (index === count) index = 0
|
||||
}
|
||||
})
|
||||
|
@ -35,15 +39,15 @@ export function Skid({ count = 500, opacity = 1, size = 2 }) {
|
|||
})
|
||||
|
||||
return (
|
||||
<instancedMesh ref={ref} args={[undefined, undefined, count]}>
|
||||
<planeGeometry args={[size, size * 2]} />
|
||||
<meshBasicMaterial color="black" side={DoubleSide} />
|
||||
<instancedMesh frustumCulled={false} ref={ref} args={[undefined, undefined, count]}>
|
||||
<planeGeometry args={[size, size]} />
|
||||
<meshBasicMaterial color="black" side={DoubleSide} transparent opacity={opacity} />
|
||||
</instancedMesh>
|
||||
)
|
||||
}
|
||||
|
||||
function setItemAt(instances, rotation, body, index) {
|
||||
o.position.copy(vec3(body.translation()))
|
||||
o.position.copy(body.getWorldPosition(v));
|
||||
o.rotation.copy(rotation)
|
||||
o.scale.setScalar(1)
|
||||
o.updateMatrix()
|
||||
|
|
|
@ -17,8 +17,9 @@ export const useStore = create((set, get) => ({
|
|||
controls: "gamepad",
|
||||
particles1: [],
|
||||
particles2: [],
|
||||
bodyPosition: [0, 0, 0],
|
||||
bodyRotation: [0, 0, 0],
|
||||
leftWheel: null,
|
||||
rightWheel: null,
|
||||
bodyRotation: null,
|
||||
pastPositions: [],
|
||||
shouldSlowdown: false,
|
||||
bananas: [],
|
||||
|
@ -34,6 +35,7 @@ export const useStore = create((set, get) => ({
|
|||
driftButton: false,
|
||||
itemButton: false,
|
||||
menuButton: false,
|
||||
isDrifting: false,
|
||||
addPastPosition: (position) => {
|
||||
set((state) => ({
|
||||
pastPositions: [position, ...state.pastPositions.slice(0, 499)],
|
||||
|
@ -64,7 +66,7 @@ export const useStore = create((set, get) => ({
|
|||
set({ bodyPosition: position });
|
||||
},
|
||||
setBodyRotation: (rotation) => {
|
||||
set({ bodyRotation: rotation });
|
||||
set({ rotation });
|
||||
},
|
||||
getBodyPosition: () => {
|
||||
return get().bodyPosition;
|
||||
|
@ -168,6 +170,18 @@ export const useStore = create((set, get) => ({
|
|||
setBody: (body) => {
|
||||
set({ body });
|
||||
},
|
||||
setLeftWheel: (leftWheel) => {
|
||||
set({ leftWheel });
|
||||
},
|
||||
setRightWheel: (rightWheel) => {
|
||||
set({ rightWheel });
|
||||
},
|
||||
setIsDrifting: (isDrifting) => {
|
||||
set({ isDrifting });
|
||||
},
|
||||
getIsDrifting: () => {
|
||||
return get().isDrifting;
|
||||
},
|
||||
},
|
||||
|
||||
}));
|
||||
|
|
Loading…
Reference in New Issue