Compile C/C++ raylib game Into WebAssembly

[@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

[@abls-kn6kj]

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

[@kubiz198]

The tutorial was very easy to follow, thank you!

[@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!

[@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?

[@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

[@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

[@manuelgarciagarcia2501]

Thank you very much for a new video. :)

[@samdavepollard]

very nice subbed many thanks for sharing your knowledge

[@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😆

[@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

[@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?

[@distant6606]

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

[@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?

[@abiiranathan]

You are a God!

[@foofoo17]

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

[@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

[@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

[@aedanwan3620]

How would this work on Linux?

[@shadowelite-sec]

Which distro ?

[@ValveDevGames]

@@shadowelite-sec ubuntu?

[@c.ashcraft9607]

Mine isnt Installing the python tool.

[@frankstercodestuff]

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

[@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

[@foofoo17]

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

[@ihsankurniawan3591]

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

[@PurpleKnightmare]

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

[@Kapendev]

👍👍👍

[@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.

[@luispieri640]

Great video and tutorial! Thanks!