feat:(game) added names for other players
parent
42680aa707
commit
ef9e58fa21
Binary file not shown.
|
@ -39,6 +39,7 @@ function App() {
|
||||||
actions.addPlayer(state);
|
actions.addPlayer(state);
|
||||||
console.log('player joined', state);
|
console.log('player joined', state);
|
||||||
actions.setId(state.id);
|
actions.setId(state.id);
|
||||||
|
console.log(state)
|
||||||
|
|
||||||
state.onQuit(() => {
|
state.onQuit(() => {
|
||||||
actions.removePlayer(state);
|
actions.removePlayer(state);
|
||||||
|
|
|
@ -3,13 +3,9 @@ import { BallCollider, RigidBody, useRapier, vec3 } from "@react-three/rapier";
|
||||||
import {
|
import {
|
||||||
useKeyboardControls,
|
useKeyboardControls,
|
||||||
PerspectiveCamera,
|
PerspectiveCamera,
|
||||||
ContactShadows,
|
|
||||||
Sphere,
|
|
||||||
OrbitControls,
|
|
||||||
Trail,
|
|
||||||
PositionalAudio,
|
PositionalAudio,
|
||||||
} from "@react-three/drei";
|
} from "@react-three/drei";
|
||||||
import { useFrame, useThree } from "@react-three/fiber";
|
import { useFrame, useThree, extend } from "@react-three/fiber";
|
||||||
import { useRef, useState, useEffect, useCallback } from "react";
|
import { useRef, useState, useEffect, useCallback } from "react";
|
||||||
import * as THREE from "three";
|
import * as THREE from "three";
|
||||||
|
|
||||||
|
@ -26,10 +22,17 @@ import FakeGlowMaterial from "./ShaderMaterials/FakeGlow/FakeGlowMaterial";
|
||||||
import { HitParticles } from "./Particles/hits/HitParticles";
|
import { HitParticles } from "./Particles/hits/HitParticles";
|
||||||
import { CoinParticles } from "./Particles/coins/CoinParticles";
|
import { CoinParticles } from "./Particles/coins/CoinParticles";
|
||||||
import { ItemParticles } from "./Particles/items/ItemParticles";
|
import { ItemParticles } from "./Particles/items/ItemParticles";
|
||||||
import { isHost } from "playroomkit";
|
import { geometry } from "maath";
|
||||||
|
extend(geometry);
|
||||||
export const PlayerController = ( { player, userPlayer, setNetworkBananas, setNetworkShells, networkBananas, networkShells }) => {
|
|
||||||
|
|
||||||
|
export const PlayerController = ({
|
||||||
|
player,
|
||||||
|
userPlayer,
|
||||||
|
setNetworkBananas,
|
||||||
|
setNetworkShells,
|
||||||
|
networkBananas,
|
||||||
|
networkShells,
|
||||||
|
}) => {
|
||||||
const upPressed = useKeyboardControls((state) => state[Controls.up]);
|
const upPressed = useKeyboardControls((state) => state[Controls.up]);
|
||||||
const downPressed = useKeyboardControls((state) => state[Controls.down]);
|
const downPressed = useKeyboardControls((state) => state[Controls.down]);
|
||||||
const leftPressed = useKeyboardControls((state) => state[Controls.left]);
|
const leftPressed = useKeyboardControls((state) => state[Controls.left]);
|
||||||
|
@ -85,13 +88,13 @@ export const PlayerController = ( { player, userPlayer, setNetworkBananas, setNe
|
||||||
const downDirection = new THREE.Vector3(0, -1, 0);
|
const downDirection = new THREE.Vector3(0, -1, 0);
|
||||||
const [shouldLaunch, setShouldLaunch] = useState(false);
|
const [shouldLaunch, setShouldLaunch] = useState(false);
|
||||||
const effectiveBoost = useRef(0);
|
const effectiveBoost = useRef(0);
|
||||||
|
const text = useRef();
|
||||||
|
|
||||||
|
const { actions, shouldSlowDown, item, bananas, coins, id } = useStore();
|
||||||
const { actions, shouldSlowDown, item, bananas, coins, id} = useStore();
|
|
||||||
const slowDownDuration = useRef(1500);
|
const slowDownDuration = useRef(1500);
|
||||||
|
|
||||||
useFrame(({ pointer, clock }, delta) => {
|
useFrame(({ pointer, clock }, delta) => {
|
||||||
if(player.id !== id) return;
|
if (player.id !== id) return;
|
||||||
const time = clock.getElapsedTime();
|
const time = clock.getElapsedTime();
|
||||||
if (!body.current && !mario.current) return;
|
if (!body.current && !mario.current) return;
|
||||||
engineSound.current.setVolume(currentSpeed / 300 + 0.2);
|
engineSound.current.setVolume(currentSpeed / 300 + 0.2);
|
||||||
|
@ -124,24 +127,21 @@ export const PlayerController = ( { player, userPlayer, setNetworkBananas, setNe
|
||||||
1;
|
1;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
// mouse steering
|
// mouse steering
|
||||||
|
|
||||||
if (!driftLeft.current && !driftRight.current) {
|
if (!driftLeft.current && !driftRight.current) {
|
||||||
steeringAngle = currentSteeringSpeed * -pointer.x;
|
steeringAngle = currentSteeringSpeed * -pointer.x;
|
||||||
targetXPosition = -camMaxOffset * -pointer.x;
|
targetXPosition = -camMaxOffset * -pointer.x;
|
||||||
} else if (driftLeft.current && !driftRight.current) {
|
} else if (driftLeft.current && !driftRight.current) {
|
||||||
steeringAngle = currentSteeringSpeed * -(pointer.x - 0.5);
|
steeringAngle = currentSteeringSpeed * -(pointer.x - 1);
|
||||||
targetXPosition = -camMaxOffset * -pointer.x;
|
targetXPosition = -camMaxOffset * -pointer.x;
|
||||||
} else if (driftRight.current && !driftLeft.current) {
|
} else if (driftRight.current && !driftLeft.current) {
|
||||||
steeringAngle = currentSteeringSpeed * -(pointer.x + 0.5);
|
steeringAngle = currentSteeringSpeed * -(pointer.x + 1);
|
||||||
targetXPosition = -camMaxOffset * -pointer.x;
|
targetXPosition = -camMaxOffset * -pointer.x;
|
||||||
}
|
}
|
||||||
// ACCELERATING
|
// ACCELERATING
|
||||||
const shouldSlow = actions.getShouldSlowDown();
|
const shouldSlow = actions.getShouldSlowDown();
|
||||||
|
|
||||||
|
|
||||||
if (upPressed && currentSpeed < maxSpeed) {
|
if (upPressed && currentSpeed < maxSpeed) {
|
||||||
// Accelerate the kart within the maximum speed limit
|
// Accelerate the kart within the maximum speed limit
|
||||||
setCurrentSpeed(
|
setCurrentSpeed(
|
||||||
|
@ -168,7 +168,9 @@ export const PlayerController = ( { player, userPlayer, setNetworkBananas, setNe
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
if (shouldSlow) {
|
if (shouldSlow) {
|
||||||
setCurrentSpeed(Math.max(currentSpeed - decceleration * 2 * delta * 144, 0));
|
setCurrentSpeed(
|
||||||
|
Math.max(currentSpeed - decceleration * 2 * delta * 144, 0)
|
||||||
|
);
|
||||||
setCurrentSteeringSpeed(0);
|
setCurrentSteeringSpeed(0);
|
||||||
slowDownDuration.current -= 1500 * delta;
|
slowDownDuration.current -= 1500 * delta;
|
||||||
setShouldLaunch(true);
|
setShouldLaunch(true);
|
||||||
|
@ -177,12 +179,8 @@ export const PlayerController = ( { player, userPlayer, setNetworkBananas, setNe
|
||||||
slowDownDuration.current = 1500;
|
slowDownDuration.current = 1500;
|
||||||
setShouldLaunch(false);
|
setShouldLaunch(false);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
// REVERSING
|
// REVERSING
|
||||||
if (downPressed && currentSpeed < -maxSpeed) {
|
if (downPressed && currentSpeed < -maxSpeed) {
|
||||||
setCurrentSpeed(
|
setCurrentSpeed(
|
||||||
|
@ -239,7 +237,7 @@ export const PlayerController = ( { player, userPlayer, setNetworkBananas, setNe
|
||||||
if (isOnFloor.current && jumpForce.current > 0) {
|
if (isOnFloor.current && jumpForce.current > 0) {
|
||||||
landingSound.current.play();
|
landingSound.current.play();
|
||||||
}
|
}
|
||||||
if (!isOnGround && jumpForce.current > 0 ) {
|
if (!isOnGround && jumpForce.current > 0) {
|
||||||
jumpForce.current -= 1 * delta * 144;
|
jumpForce.current -= 1 * delta * 144;
|
||||||
}
|
}
|
||||||
if (!jumpPressed) {
|
if (!jumpPressed) {
|
||||||
|
@ -286,7 +284,7 @@ export const PlayerController = ( { player, userPlayer, setNetworkBananas, setNe
|
||||||
driftForce.current = 0.4;
|
driftForce.current = 0.4;
|
||||||
mario.current.rotation.y = THREE.MathUtils.lerp(
|
mario.current.rotation.y = THREE.MathUtils.lerp(
|
||||||
mario.current.rotation.y,
|
mario.current.rotation.y,
|
||||||
steeringAngle * 50 + 0.5,
|
steeringAngle * 25 + 0.4,
|
||||||
0.05 * delta * 144
|
0.05 * delta * 144
|
||||||
);
|
);
|
||||||
accumulatedDriftPower.current += 0.1 * (steeringAngle + 1) * delta * 144;
|
accumulatedDriftPower.current += 0.1 * (steeringAngle + 1) * delta * 144;
|
||||||
|
@ -296,7 +294,7 @@ export const PlayerController = ( { player, userPlayer, setNetworkBananas, setNe
|
||||||
driftForce.current = 0.4;
|
driftForce.current = 0.4;
|
||||||
mario.current.rotation.y = THREE.MathUtils.lerp(
|
mario.current.rotation.y = THREE.MathUtils.lerp(
|
||||||
mario.current.rotation.y,
|
mario.current.rotation.y,
|
||||||
-(-steeringAngle * 50 + 0.5),
|
-(-steeringAngle * 25 + 0.4),
|
||||||
0.05 * delta * 144
|
0.05 * delta * 144
|
||||||
);
|
);
|
||||||
accumulatedDriftPower.current += 0.1 * (-steeringAngle + 1) * delta * 144;
|
accumulatedDriftPower.current += 0.1 * (-steeringAngle + 1) * delta * 144;
|
||||||
|
@ -356,7 +354,7 @@ export const PlayerController = ( { player, userPlayer, setNetworkBananas, setNe
|
||||||
setCurrentSpeed(boostSpeed);
|
setCurrentSpeed(boostSpeed);
|
||||||
effectiveBoost.current -= 1 * delta * 144;
|
effectiveBoost.current -= 1 * delta * 144;
|
||||||
targetZPosition = 10;
|
targetZPosition = 10;
|
||||||
if(!turboSound.current.isPlaying) turboSound.current.play();
|
if (!turboSound.current.isPlaying) turboSound.current.play();
|
||||||
driftTwoSound.current.play();
|
driftTwoSound.current.play();
|
||||||
driftBlueSound.current.stop();
|
driftBlueSound.current.stop();
|
||||||
driftOrangeSound.current.stop();
|
driftOrangeSound.current.stop();
|
||||||
|
@ -399,10 +397,10 @@ export const PlayerController = ( { player, userPlayer, setNetworkBananas, setNe
|
||||||
|
|
||||||
// MISC
|
// MISC
|
||||||
|
|
||||||
if(resetPressed) {
|
if (resetPressed) {
|
||||||
body.current.setTranslation({x: 8, y: 2, z: -119});
|
body.current.setTranslation({ x: 8, y: 2, z: -119 });
|
||||||
body.current.setLinvel({x: 0, y: 0, z: 0});
|
body.current.setLinvel({ x: 0, y: 0, z: 0 });
|
||||||
body.current.setAngvel({x: 0, y: 0, z: 0});
|
body.current.setAngvel({ x: 0, y: 0, z: 0 });
|
||||||
setCurrentSpeed(0);
|
setCurrentSpeed(0);
|
||||||
setCurrentSteeringSpeed(0);
|
setCurrentSteeringSpeed(0);
|
||||||
setIsBoosting(false);
|
setIsBoosting(false);
|
||||||
|
@ -413,17 +411,16 @@ export const PlayerController = ( { player, userPlayer, setNetworkBananas, setNe
|
||||||
kart.current.rotation.y = Math.PI / 2;
|
kart.current.rotation.y = Math.PI / 2;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
// ITEMS
|
// ITEMS
|
||||||
|
|
||||||
if(shootPressed && item === "banana") {
|
if (shootPressed && item === "banana") {
|
||||||
const distanceBehind = 2;
|
const distanceBehind = 2;
|
||||||
const scaledBackwardDirection = forwardDirection.multiplyScalar(distanceBehind);
|
const scaledBackwardDirection =
|
||||||
|
forwardDirection.multiplyScalar(distanceBehind);
|
||||||
|
|
||||||
const kartPosition = new THREE.Vector3(...vec3(body.current.translation()));
|
|
||||||
|
|
||||||
|
const kartPosition = new THREE.Vector3(
|
||||||
|
...vec3(body.current.translation())
|
||||||
|
);
|
||||||
|
|
||||||
const bananaPosition = kartPosition.sub(scaledBackwardDirection);
|
const bananaPosition = kartPosition.sub(scaledBackwardDirection);
|
||||||
const newBanana = {
|
const newBanana = {
|
||||||
|
@ -436,9 +433,10 @@ export const PlayerController = ( { player, userPlayer, setNetworkBananas, setNe
|
||||||
actions.useItem();
|
actions.useItem();
|
||||||
}
|
}
|
||||||
|
|
||||||
if(shootPressed && item === "shell") {
|
if (shootPressed && item === "shell") {
|
||||||
const distanceBehind = -2;
|
const distanceBehind = -2;
|
||||||
const scaledBackwardDirection = forwardDirection.multiplyScalar(distanceBehind);
|
const scaledBackwardDirection =
|
||||||
|
forwardDirection.multiplyScalar(distanceBehind);
|
||||||
|
|
||||||
const kartPosition = new THREE.Vector3(
|
const kartPosition = new THREE.Vector3(
|
||||||
body.current.translation().x,
|
body.current.translation().x,
|
||||||
|
@ -451,21 +449,18 @@ export const PlayerController = ( { player, userPlayer, setNetworkBananas, setNe
|
||||||
id: Math.random() + "-" + +new Date(),
|
id: Math.random() + "-" + +new Date(),
|
||||||
position: shellPosition,
|
position: shellPosition,
|
||||||
player: true,
|
player: true,
|
||||||
rotation: kartRotation
|
rotation: kartRotation,
|
||||||
};
|
};
|
||||||
setNetworkShells([...networkShells, newShell]);
|
setNetworkShells([...networkShells, newShell]);
|
||||||
actions.useItem();
|
actions.useItem();
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
if(shootPressed && item === "mushroom") {
|
if (shootPressed && item === "mushroom") {
|
||||||
setIsBoosting(true);
|
setIsBoosting(true);
|
||||||
effectiveBoost.current = 300;
|
effectiveBoost.current = 300;
|
||||||
actions.useItem();
|
actions.useItem();
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
player.setState("position", body.current.translation());
|
player.setState("position", body.current.translation());
|
||||||
player.setState("rotation", kartRotation + mario.current.rotation.y);
|
player.setState("rotation", kartRotation + mario.current.rotation.y);
|
||||||
player.setState("isBoosting", isBoosting);
|
player.setState("isBoosting", isBoosting);
|
||||||
|
@ -473,11 +468,9 @@ export const PlayerController = ( { player, userPlayer, setNetworkBananas, setNe
|
||||||
player.setState("turboColor", turboColor);
|
player.setState("turboColor", turboColor);
|
||||||
player.setState("scale", scale);
|
player.setState("scale", scale);
|
||||||
player.setState("bananas", bananas);
|
player.setState("bananas", bananas);
|
||||||
|
|
||||||
|
|
||||||
});
|
});
|
||||||
|
|
||||||
return player.id === id ?(
|
return player.id === id ? (
|
||||||
<group>
|
<group>
|
||||||
<RigidBody
|
<RigidBody
|
||||||
ref={body}
|
ref={body}
|
||||||
|
@ -492,15 +485,14 @@ export const PlayerController = ( { player, userPlayer, setNetworkBananas, setNe
|
||||||
<BallCollider
|
<BallCollider
|
||||||
args={[0.5]}
|
args={[0.5]}
|
||||||
mass={3}
|
mass={3}
|
||||||
onCollisionEnter={({other}) => {
|
onCollisionEnter={({ other }) => {
|
||||||
isOnFloor.current = true;
|
isOnFloor.current = true;
|
||||||
setIsOnGround(true);
|
setIsOnGround(true);
|
||||||
}}
|
}}
|
||||||
onCollisionExit={({other}) => {
|
onCollisionExit={({ other }) => {
|
||||||
isOnFloor.current = false;
|
isOnFloor.current = false;
|
||||||
setIsOnGround(false);
|
setIsOnGround(false);
|
||||||
}}
|
}}
|
||||||
|
|
||||||
/>
|
/>
|
||||||
</RigidBody>
|
</RigidBody>
|
||||||
|
|
||||||
|
@ -512,8 +504,8 @@ export const PlayerController = ( { player, userPlayer, setNetworkBananas, setNe
|
||||||
isBoosting={isBoosting}
|
isBoosting={isBoosting}
|
||||||
shouldLaunch={shouldLaunch}
|
shouldLaunch={shouldLaunch}
|
||||||
/>
|
/>
|
||||||
<CoinParticles coins={coins}/>
|
<CoinParticles coins={coins} />
|
||||||
<ItemParticles item={item}/>
|
<ItemParticles item={item} />
|
||||||
<mesh position={[0.6, 0.05, 0.5]} scale={scale}>
|
<mesh position={[0.6, 0.05, 0.5]} scale={scale}>
|
||||||
<sphereGeometry args={[0.05, 16, 16]} />
|
<sphereGeometry args={[0.05, 16, 16]} />
|
||||||
<meshStandardMaterial
|
<meshStandardMaterial
|
||||||
|
@ -552,7 +544,6 @@ export const PlayerController = ( { player, userPlayer, setNetworkBananas, setNe
|
||||||
glowSharpness={1}
|
glowSharpness={1}
|
||||||
/>
|
/>
|
||||||
</mesh>
|
</mesh>
|
||||||
|
|
||||||
{/* <FlameParticles isBoosting={isBoosting} /> */}
|
{/* <FlameParticles isBoosting={isBoosting} /> */}
|
||||||
<DriftParticlesLeft turboColor={turboColor} scale={scale} />
|
<DriftParticlesLeft turboColor={turboColor} scale={scale} />
|
||||||
<DriftParticlesRight turboColor={turboColor} scale={scale} />
|
<DriftParticlesRight turboColor={turboColor} scale={scale} />
|
||||||
|
@ -576,7 +567,7 @@ export const PlayerController = ( { player, userPlayer, setNetworkBananas, setNe
|
||||||
png="./particles/star.png"
|
png="./particles/star.png"
|
||||||
turboColor={turboColor}
|
turboColor={turboColor}
|
||||||
/>
|
/>
|
||||||
<HitParticles shouldLaunch={shouldLaunch}/>
|
<HitParticles shouldLaunch={shouldLaunch} />
|
||||||
</group>
|
</group>
|
||||||
|
|
||||||
{/* <ContactShadows frames={1} /> */}
|
{/* <ContactShadows frames={1} /> */}
|
||||||
|
|
|
@ -8,6 +8,8 @@ import {
|
||||||
OrbitControls,
|
OrbitControls,
|
||||||
Trail,
|
Trail,
|
||||||
PositionalAudio,
|
PositionalAudio,
|
||||||
|
Text,
|
||||||
|
Billboard,
|
||||||
} from "@react-three/drei";
|
} from "@react-three/drei";
|
||||||
import { useFrame, useThree } from "@react-three/fiber";
|
import { useFrame, useThree } from "@react-three/fiber";
|
||||||
import { useRef, useState, useEffect, useCallback } from "react";
|
import { useRef, useState, useEffect, useCallback } from "react";
|
||||||
|
@ -113,6 +115,9 @@ export const PlayerDummies = ( { player, userPlayer }) => {
|
||||||
|
|
||||||
return player.id != id? (
|
return player.id != id? (
|
||||||
<>
|
<>
|
||||||
|
<Billboard>
|
||||||
|
<Text font={"./fonts/HK.ttf"} ref={text} fontSize={0.4} outlineWidth={0.03} position={[0, 2, 0]}>{player.state.profile.name}</Text>
|
||||||
|
</Billboard>
|
||||||
<group>
|
<group>
|
||||||
<RigidBody
|
<RigidBody
|
||||||
type="kinematic"
|
type="kinematic"
|
||||||
|
|
|
@ -20,7 +20,7 @@ export const useStore = create((set, get) => ({
|
||||||
pastPositions: [],
|
pastPositions: [],
|
||||||
shouldSlowdown: false,
|
shouldSlowdown: false,
|
||||||
bananas: [],
|
bananas: [],
|
||||||
items: ["mushroom"],
|
items: ["mushroom", "shell", "banana"],
|
||||||
item: "",
|
item: "",
|
||||||
shells: [],
|
shells: [],
|
||||||
skids: [],
|
skids: [],
|
||||||
|
|
|
@ -110,3 +110,14 @@ body::-webkit-scrollbar {
|
||||||
transform: scale(1.2);
|
transform: scale(1.2);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.annotation{
|
||||||
|
display:flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
background:none;
|
||||||
|
backdrop-filter: blur(10px);
|
||||||
|
pointer-events: none;
|
||||||
|
|
||||||
|
}
|
Loading…
Reference in New Issue