Build a 3D Multiplayer Mobile Shooter Game with Playroom and React Three Fiber

2024 ж. 10 Мам.

8 794 Рет қаралды

Let's learn how to build a 3D Multiplayer Mobile Shooter Game easily with Playroom (@joinplayroom) and React Three Fiber
In this video we will use Playroom toolkit to enable multiplayer features into a React Three Fiber game we will build together.
Try Playroom SDK for Free 👉 joinplayroom.com/?=wawasensei
Play the game 👉 r3f-playroom-multiplayer-u4.v...
To understand how physics system work, watch my dedicated video 👉 • React Three Fiber Tuto...
Final code 🔗
github.com/wass08/r3f-playroo...
Starter pack 🔗
github.com/wass08/r3f-vite-st...
#threejs #multiplayer #gamedev
▬▬▬▬▬▬ Useful L I N K S 🔗 ▬▬▬▬▬▬
🚀 Learn React Three Fiber with my complete course ✨
lessons.wawasensei.dev/course...
Playroom Doc
docs.joinplayroom.com/
Quaternius Pack
quaternius.com/packs/toonshoo...
DirectionalLightShadow
threejs.org/docs/#api/en/ligh...
React Three Rapier
github.com/pmndrs/react-three...
Tailwind CSS
tailwindcss.com/docs/guides/vite
ReactJam
reactjam.com/
AxieJam
hub.skymavis.com/axie-game-ja...
▬▬▬▬▬▬ T I M E S T A M P S ⏰ ▬▬▬▬▬▬
00:00 - Intro
01:16 - Starter project
02:31 - Map
04:41 - Enabling multiplayer with Playroom
07:14 - Soldiers
11:49 - Physics with Rapier
13:42 - Multiplayer player movement
20:10 - Firing bullets
28:11 - Bloom Postprocessing
29:10 - Syncing bullets
30:41 - Player hit
34:43 - Leaderboard
36:57 - Bullet impact
39:42 - Test on mobile
40:05 - Thank you!
▬▬▬▬▬▬ Support the channel 🙏 ▬▬▬▬▬▬
Become a member to get access to awesome perks:
/ @wawasensei
▬▬▬▬▬▬ Connect with me 👋 ▬▬▬▬▬▬
💻 The Discord Community
/ discord
📸 Instagram :
/ wawa.sensei
🎎 Facebook :
/ wawasenseiyt
🐦Twitter :
/ wawasensei
🐦TikTok :
/ wawasensei08
💻 My website :
www.wawasensei.dev

Пікірлер

I attribute my entire engineering knowledge and future engineering career right now to this man’s content. Wawa truly is a special person helping us get to our dream projects. Bought his course just to support him.
@genshian6 ай бұрын
- bro same! Sensei without you I would be homeless by now! Thanks
  @Ibrahim-oc5ql6 ай бұрын
- guys, thanks a lot, I will do my best to make learning 3d web development accessible & fun 🔥
  @WawaSensei6 ай бұрын
You are killing it right now, thank you Sensei
@heagandev6 ай бұрын
- Thank you so muuuuch 🙌
  @WawaSensei6 ай бұрын
your content is something else man!
@mehmetakyuz52906 ай бұрын
- 💜💜💜
  @WawaSensei6 ай бұрын
Awesome work bro you are the Best ❤❤
@julianvelez65636 ай бұрын
- You are the best, really! Your support to my content is a huge factor of motivation 🙌
  @WawaSensei6 ай бұрын
Wow, man, you are awesome!
@mykhailochernov12226 ай бұрын
- Your support is awesome man!
  @WawaSensei6 ай бұрын
great tutorial!
@user-nv2yl5vn3k4 ай бұрын
I'm a new follower and admirer, wish I had found this channel forever ago :)
@heathers.bailey72076 ай бұрын
- Welcome aboard! So happy to read it, thank you! Wish you a great learning journey 🙌
  @WawaSensei6 ай бұрын
I really love this game type of video❤
@Venkatesh-vm4ll6 ай бұрын
- 🙌 glad you like it, it's always a pleasure to make games!
  @WawaSensei6 ай бұрын
wow that's INSANE!!
@pandawoan6 ай бұрын
- ❤️ Thank youuuu, wish you are fine!
  @WawaSensei6 ай бұрын
- Totally am! Thanks for asking!@@WawaSensei
  @pandawoan6 ай бұрын
wow, amazing game, thanks for sharing
@HuynhLuong2276 ай бұрын
- Thanks to you 🙏🙏🙏
  @WawaSensei6 ай бұрын
Amazing content. You just gained a lifetime subscriber! I'm curious to know if adding batching (e.g. reducer?) for the bullets & networkBullets would have a positive effect on latency, as you don't need to wait for the bullets state to be updated and for the useEffect to kick in.
@filipesommer82536 ай бұрын
- Welcome aboard! Thank you very much! Indeed, that could help! Note that Playroom is working on the possibility to add events in addition to sharing state, that could make it even easier 🔥
  @WawaSensei6 ай бұрын
- @@WawaSensei Cool! Btw I'm curious, if I wanted to make the player move when I click the mouse on the map, any tips on how I could achieve that?
  @filipesommer82535 ай бұрын
🔥🔥🔥🔥
@randfamous6 ай бұрын
- 🧯🧯🧯🧯 please you burnt all the comments 🤣
  @WawaSensei6 ай бұрын
Amazing
@3211235806 ай бұрын
- 🎆 thank youuu
  @WawaSensei6 ай бұрын
Very well done, the best playroom game I've seen so far!! Do you participate to the curent React Jam?
@mathieu-superpose6 ай бұрын
- Thanks a lot! 🙌 I'm considering to participate for this week video yes 💪
  @WawaSensei6 ай бұрын
Great❤❤❤
@AdityaKumar-dv9cp5 ай бұрын
- 😍
  @WawaSensei5 ай бұрын
excellent, you level up more
@inteligenciafutura6 ай бұрын
- Thank you so much for your consistent support! 🙏
  @WawaSensei6 ай бұрын
Have two two years expirience of React in prod, but still watch this video like junior, that dont understand what happening)) thank you
@Maxdr19986 ай бұрын
- Hehe, don't worry it will come! At least it keeps the excitement to know we still have a lot to learn! I also feel the same on many topics I have no idea about (even related to 3D web development 🤭)
  @WawaSensei6 ай бұрын
top thanks 💎💎💎
@bloodylupin6 ай бұрын
- 😍 Thanks to you more!
  @WawaSensei6 ай бұрын
Awesome project! The Playroom SDK seems to really facilitate development of multiplayer games, but I find it quite weird that the state updates are done in the host's client rather than on the server. Is it made to build dApps?
@sylvainschellenberger6 ай бұрын
- Thank you very much! Yes it's a pleasure to work with 🚀 I think it's made this way to simplify the life of the developer. (PS: it's also the case for Unity Relay multiplayer) By having a host client responsible of the state update instead of a "backend" server, you have everything available, the physic world, the inputs, etc. If it's done server side, you need to do a lot of calculation, if it's the best approach for "competitive" games, this add a lot of complication for other projects. (Can be used for dApps but I don't think it's the main purpose)
  @WawaSensei6 ай бұрын
who so ever is following your content will soon be a great developer
@GyaniCoderAdam6 ай бұрын
- That's my dream to be able to contribute and see you create great projects 🚀
  @WawaSensei6 ай бұрын
niceee
@sinanisler16 ай бұрын
- 😍
  @WawaSensei6 ай бұрын
Excellent! Can we add tpp or fpp player camera position?
@SunnyMehra0476 ай бұрын
- Thank you! Of course, you can adjust the camera controls position to make it easily. You'd also need to adjust the movement logic based on the angle to do it, but the rest would stay the same.
  @WawaSensei6 ай бұрын
- @@WawaSensei I hope we can see these features in the coming episodes :)
  @SunnyMehra0476 ай бұрын
What's that song? In the intro.
@sirdevknight15 күн бұрын
Have you got any game course? Thx
@541h48he2 ай бұрын
- Hey I made other game tutorials you can find on the channel but I didn't create game courses yet (while I plan to make one in the future)
  @WawaSensei2 ай бұрын
wawa, do you have a course like threejs journey?
@nicolettifps6 ай бұрын
- Indeed, it's available here lessons.wawasensei.dev/courses/react-three-fiber
  @WawaSensei6 ай бұрын
Do Something with Spline Sensei!
@amshenyesudas6 ай бұрын
- Would love to! If only I could get sponsored by them too 🤭
  @WawaSensei6 ай бұрын
Can I play game in PC with keyboard control? Please help me fix code control game in PC with keyboard
@lucky_number3 ай бұрын
- Hi! Well not using the Joystick feature but you can definitely change the code to use the keyboardControls and setState
  @WawaSensei3 ай бұрын
est ce qu'il y a un serveur discord communautaire pour playroom ?
@nexose9526 ай бұрын
- Yes! discord.gg/fJ6K66TXUe 🙌
  @WawaSensei6 ай бұрын
I want to host this locally
@geelemo6 ай бұрын
- What do you mean? To run it locally or use your computer as a remote server? 🤨
  @WawaSensei6 ай бұрын
- @@WawaSensei just locally that's all
  @geelemo6 ай бұрын
- @@geelemoyou can follow the instructions from the final code repository to do it 👉 github.com/wass08/r3f-playroom-multiplayer-shooter-game
  @WawaSensei6 ай бұрын
- @@WawaSensei oh lovely
  @geelemo6 ай бұрын