Live demo : https://jslegenddev.github.io/react-k...
Live demo controls :
Arrow keys to move around.
Use the space key to close the text box once it appears.
Source code : https://github.com/JSLegendDev/react-...
Get the assets + fonts here : https://github.com/JSLegendDev/react-...
RESOURCES :
How to Display an HTML Based UI on Top of a JavaScript Game Made With Kaplay : https://jslegenddev.substack.com/p/ho...
Kaplay docs : https://kaplayjs.com
React docs : https://react.dev
Jotai docs : https://jotai.org/
Framer Motion docs : https://www.framer.com/motion/
CREDITS :
Peter's X : https://x.com/petergencur
Peter's GitHub : https://github.com/imaginarny
Tileset based of : https://the-pixel-nook.itch.io/gb-stu... and https://the-pixel-nook.itch.io/gb-stu...
Gameboy font used is from : https://www.dafont.com/early-gameboy....
💼 Business Inquiries: [email protected]
CHAPTERS :
0:00 Intro
4:14 Project Setup
17:05 Implementing The Game Example
48:38 Using Jotai to Pass Data Between React and The Game
54:36 Writing CSS to Make UI Scale with Canvas
1:02:59 Building our React UI + Connecting it with Jotai
Watch video How to Use React.js for Game Development - Tutorial online without registration, duration hours minute second in high quality. This video was added by user JSLegendDev 16 October 2024, don't forget to share it with your friends and acquaintances, it has been viewed on our site 1,872 once and liked it 134 people.