Compile C/C++ raylib game Into WebAssembly

Raylib WebAssembly Tutorial: How to Convert Your C/C++ Game into WebAssembly for Online Play. Learn how to compile your raylib game into WebAssembly and make it playable directly in a web browser with this step-by-step tutorial. No prior WebAssembly experience required!
🔗C++ Snake Project: github.com/edu...
🔗C Snake Project: github.com/ray...
⌨️Command for C++ Project: emcc -o snake.html main.cpp -Wall -std=c++14 -D_DEFAULT_SOURCE -Wno-missing-braces -Wunused-result -Os -I. -I C:/raylib/raylib/src -I C:/raylib/raylib/src/external -L. -L C:/raylib/raylib/src -s USE_GLFW=3 -s ASYNCIFY -s TOTAL_MEMORY=67108864 -s FORCE_FILESYSTEM=1 --preload-file Graphics --preload-file Sounds --shell-file C:/raylib/raylib/src/shell.html C:/raylib/raylib/src/web/libraylib.a -DPLATFORM_WEB -s 'EXPORTED_FUNCTIONS=["_free","_malloc","_main"]'-s EXPORTED_RUNTIME_METHODS=ccall
⌨️Command for C Project: emcc -o snake_c.html main.c -Wall -std=c99 -D_DEFAULT_SOURCE -Wno-missing-braces -Wunused-result -Os -I. -I C:/raylib/raylib/src -I C:/raylib/raylib/src/external -L. -L C:/raylib/raylib/src -s USE_GLFW=3 -s ASYNCIFY -s TOTAL_MEMORY=67108864 -s FORCE_FILESYSTEM=1 --shell-file C:/raylib/raylib/src/shell.html C:/raylib/raylib/src/web/libraylib.a -DPLATFORM_WEB -s 'EXPORTED_FUNCTIONS=["_free","_malloc","_main"]'-s EXPORTED_RUNTIME_METHODS=ccall
0:00 Intro
0:26 How to share your game
1:22 Convert to WebAssebly
2:44 Conversion process
3:57 Installing Python
4:27 Installing Emscripten
6:49 Compiling raylib with Emscripten
10:05 Compiling a C++ game for the web
13:51 Compiling a C game for the web

[@programmingwithnick]

If you are having trouble with make add this to yout PATH enviroment variable: C: aylib\w64devkit\bin to PATH PS: I'm creating an OOP course! Sign up at programmingwithnick.com/course for early access and a 50% launch discount.

[@raylibtech]

Very nice tutorial! Thank you very much! 👍😄

[@programmingwithnick]

Thank you Ray, for your awesome library and tools.

[@TahirPalali]

Another great tutorial. Thank you!

[@R2Sam]

Never knew I needed this, great tutorial

[@kubiz198]

The tutorial was very easy to follow, thank you!

[@panos21sonic]

This video troubled me quite a bit: When running the makefile to compile raylib, i got the error: Make:emcc: No such file or directory exists To resolve this, I went to where CC and AR are defined in the makefile, and replaced emcc and emar with the respective locations to the bat files

[@bethleemCode]

That´s a great tutorial! Thx a lot! Now we need a raylib to android video just like this! 😀

[@programmingwithnick]

Challenge accepted!

[@rishikumartiwari7473]

@@programmingwithnick Hi Nick, Any update on raylib web assembly on Andriod?

[@maiconc9389]

@@programmingwithnick Looks like Emscripten could work with any LLVM compiler. So, maybe, we could use fortran-raylib with LFortran or Flang to get Fortran on Web. I tried this, but it does not work here. If you could figure out how to make this work, it would be really amazing.

[@abls-kn6kj]

What a nice video budd. I had some problems, because I use raylib in Visual Studio.

[@bradmartin333]

Thank you for making this! Great tutorial. Only snag for me was that I needed to add C: aylib\w64devkit\bin to PATH.

[@programmingwithnick]

Thanks for sharing! Good to know.

[@bradmartin333]

If anyone ends up running into loading resources, append this to the build command: `--preload-file {resource dir respective to cwd}@{resource dir as written in raylib program}` example: `--preload-file src/resources/@resources/` can also specify specific files instead of a directory

[@TheIllusivePanda]

@@bradmartin333 Thank you, I just spent a while trying to figure this out & this worked!

[@perelmanych]

Thank you very much for this great video! My game uses several libraries, so it looks like it will be that quest))

[@akevan3556]

make : The term 'make' is not recognized as the name of a cmdlet, function, script file, or operable program. Check the spelling of the name, or if a path was included, verify that the path is correct and try again. At line:1 char:1 + make -e PLATFORM=PLATFORM_WEB -B + ~~~~ + CategoryInfo : ObjectNotFound: (make:String) [], CommandNotFoundException + FullyQualifiedErrorId : CommandNotFoundException

[@AnimeshTripathy-t7y]

try mingw32-make

[@samg5183]

@@AnimeshTripathy-t7y me still i have that problem...

[@THEDuWolf]

@@AnimeshTripathy-t7y thanks man, that works

[@wildlifeofgreece]

You have to add this to yout PATH enviroment variable: C: aylib\w64devkit\bin

[@manuelgarciagarcia2501]

Thank you very much for a new video. :)

[@samdavepollard]

very nice subbed many thanks for sharing your knowledge

[@PrithviShrestha-f6g]

when i did open with terminal and the install latest it did not worked and gave me errors

[@j0of]

i use visual studio and vcpkg to link raylib to my project. is there any way i can do this?

[@Tims_Projects]

Thankyou Nick. Another grate video. 👍 May I ask which version of windows you have? If it is Windows 11 (I don't have), then I believe "Windows Terminal" is installed by default now. I have Windows 10. If you have Windows 10, then "Windows Terminal" needs to be downloaded from Windows Store (free). To get it to appear in the Right-Click Menu, you have to alter the registry. There are scripts which you can download to alter the registry. (after installing "Windows Terminal") I thought I would mention it, just in case there are others with Windows 10, that don't know why they don't see it when they right-click. Your video prompted me to get around to installing it myself, ha-ha.

[@programmingwithnick]

Tim, I have windows 11. In windows 10 you need to hold shift+right click

[@Tims_Projects]

@@programmingwithnick Oh, ha-ha, I cant check that now, I have done all the above😆

[@federicosalvetti4286]

Hi Nick, this was incredibly useful. However, I am having troubles with the --preload-file command. I am including the correcth path of my resources, double checked inside the project and in the folders, but when playing the game in the localhost i get the error messages that it cannot upload the resources. Currently checking various sources, if you have any idea on the process to debug such things it would be greatly appreciated! Keep up the good work,, I'm learning so much from your videos!!

[@federicosalvetti4286]

I did the same with another project and it fails to load that as well, I also tried to embed with the specific command from the documentation but when in localhost 8000 won't load the resources files.

[@titan8788]

im having the same problem, it says "graphics does not exist" when compiling into wasm

[@krzyszt0fus]

This content is great!

[@FriedMonkey362]

hello, i used your tutorial and so i use visual studio and vcpkg to include raylib (#include ) this means the raylib source isnt really availiby and modifying the build in the vcpkg directory would mess up all of my projects how can i build my raylib game to web using visual studio and vcpkg? so i can just do smth like #include //#include and then in the visual studio terminal just call web-build.bat or some batch file which will call the emscipten compiler and do all that is there a way to achive this? if so i would greatly aprechiate if you were to make a tutorial on this, kind regards

[@reengineer2497]

thank you so much ! had to download mingw32-make package to do this on windows.

[@LotsOfFunyoutubechannel]

Hello, The game is working nicely but the game out of the two game sounds ony one of them is working, the other sound does not work. Why is it so?

[@jasonmoon2650]

How to solve error regarding 'make' command? make: command not found

[@wildlifeofgreece]

You have to add this to yout PATH enviroment variable: C: aylib\w64devkit\bin

[@foofoo17]

Does the audio files still work for you guys after the game becomes a web app?

[@aedanwan3620]

How would this work on Linux?

[@shadowelite-sec]

Which distro ?

[@ValveDevGames]

@@shadowelite-sec ubuntu?

[@jakubhlavaty3414]

I was following your space invaders course. I tried to compile it to web, but I got this error: wasm-ld: error: C:\Users\----\AppData\Local\Temp\emscripten_temp_1b0xi9la\main_0.o: undefined symbol: Game::Game(). Do you know how could I fix it? Thank you

[@hoangpham9613]

Did you figure it out? I had the same error and been fixing its for days.

[@jakubhlavaty3414]

@@hoangpham9613 I did. It was honestly pretty difficult to figure it out. This error message means, that the game.cpp file wasn't mentioned in the compile message. So for me the correct cmd was: emcc -o game-jam/game-jam.html src/player.cpp src/main.cpp src/laser.cpp src/game.cpp src/enemy_wave.cpp src/asteroid.cpp -Wall -std=c++14 -D_DEFAULT_SOURCE -Wno-missing-braces -Wunused-result -Os -I. -I C:/raylib/raylib/src -I C:/raylib/raylib/src/external -L. -L C:/raylib/raylib/src -s USE_GLFW=3 -s ASYNCIFY -s TOTAL_MEMORY=67108864 -s FORCE_FILESYSTEM=1 --preload-file Graphics --preload-file Sounds --preload-file Font --shell-file C:/raylib/raylib/src/shell.html C:/raylib/raylib/src/web/libraylib.a -DPLATFORM_WEB -s 'EXPORTED_FUNCTIONS=["_free","_malloc","_main"]'-s EXPORTED_RUNTIME_METHODS=ccall -s FULL_ES2=1 I have the raylib source paths there, at the beginning I am typing the relative path of every .cpp file I am using. I recommend just throwing the message into chatGPT and it will explain it better than I ever could XD

[@alagDev]

I have this exact problem. Did you guys find a solution?

[@abiiranathan]

You are a God!

[@frankstercodestuff]

Is there a way to turn this into an exe or no?

[@foofoo17]

Thanks Ray, how on earth did you figure this out??

[@distant6606]

E re file pos katalabaineis ellina apo xiliometra mono apo profora 😄Xairetismata niko thnx for the tutorial 😉

[@c.ashcraft9607]

Mine isnt Installing the python tool.

[@ihsankurniawan3591]

is there any docker image that does this? great video btw

[@Kapendev]

👍👍👍

[@PurpleKnightmare]

They switched from master to main, really messes things up.

[@akshithabajjuri1163]

I am getting this error when I ran the snake code emcc: error: '--shell-file': file not found: 'C:/raylib/raylib/src/shell.html' Someone please tell how can I solve this.

[@TiTan-gr3pv]

check where exactly you installed the raylib files , since that error can occur if you extracted the zip in a different location than whats shown

[@sarthaknawaria]

hi i am getting multiple erorrs at this command : ./emsdk activate latest --permanent . errors are Failed to read environment variable EMSDK: 'EMSDK' EMSDK = C:/emsdk Failed to read environment variable EMSDK_NODE: 'EMSDK_NODE' EMSDK_NODE = C:\emsdk ode\16.20.0_64bit\bin ode.exe Failed to read environment variable EMSDK_PYTHON: 'EMSDK_PYTHON' EMSDK_PYTHON = C:\emsdk\python\3.9.2-nuget_64bit\python.exe Failed to read environment variable JAVA_HOME: 'JAVA_HOME' any solution to these ?

[@LotsOfFunyoutubechannel]

I thinkt the path doesnot include the node.exe only upto \bin, same for python

[@akimpus]

i get an error after entering the command: emcc -o snake_c.html main.c -Wall -std=c99 -D_DEFAULT_SOURCE -Wno-missing-braces -Wunused-result -Os -I. -I D:/libs/raylib-4.5.0/src -I D:/libs/raylib-4.5.0/src/external -L. -L D:/libs/raylib-4.5.0/src -s USE_GLFW=3 -s ASYNCIFY -s TOTAL_MEMORY=67108864 -s FORCE_FILESYSTEM=1 --shell-file D:/libs/raylib-4.5.0/src/shell.html D:/libs/raylib-4.5.0/src/web/libraylib.a -DPLATFORM_WEB -s 'EXPORTED_FUNCTIONS=["_free","_malloc","_main"]'-s EXPORTED_RUNTIME_METHODS=ccall error is: emcc: error: 'EXPORTED_FUNCTIONS=[_free,_malloc,_main]'-s: No such file or directory ("'EXPORTED_FUNCTIONS=[_free,_malloc,_main]'-s" was expected to be an input file, based on the commandline arguments provided) How to fix it? Can someone help please?

[@akimpus]

And so, it worked for me only with this command: emcc -o snake_c.html main.c -Wall -std=c99 -D_DEFAULT_SOURCE -Wno-missing-braces -Wunused-result -Os -I. -I D:/libs/raylib-4.5.0/src -I D:/libs/raylib-4.5.0/src/external -L. -L D:/libs/raylib-4.5.0/src -s USE_GLFW=3 -s ASYNCIFY -s TOTAL_MEMORY=67108864 -s FORCE_FILESYSTEM=1 -shell-file D:/libs/raylib-4.5.0/src/shell.html D:/libs/raylib-4.5.0/src/web/libraylib.a -DPLATFORM_WEB -s EXPORTED_RUNTIME_METHODS=ccall

[@mfalk6263]

I had the same issue... Turning: 'EXPORTED_FUNCTIONS=["_free","_malloc","_main"]' into: EXPORTED_FUNCTIONS=["_free","_malloc","_main"] removing the ' on both sides made things work for me.

[@handfoamsanitiser]

@@mfalk6263 Thanks bro it worked

[@luispieri640]

Great video and tutorial! Thanks!