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