Running PyGame in the web browser with Pygbag! mini Python tutorial Wasm WebAssembly

Pygbag is a library that packages PyGame games made in Python to run in the browser using CPython wasm webassembly. It is really easy to use and deploy your games on the web, for example, on itch!
"It uses a CPython interpreter built on webassembly, and a static build of pygame on webassembly, using SDL and SDL_image and things on webassembly
Pygame’s dependencies already supported emscripten/webassembly
CPython 3.11 (upcoming) can be built for the web without needing patches, thanks to some core developer work"
Relevant links:
pypi.org/proje...
pygame-web.git...
itch.io/c/2563...
/ discord

[@psxalx128]

Thank you, straight to the point and easy to follow. Worked for my project straight away

[@AltunKARIMLI]

Short and precise. Thank you. If you have pygame/pygbag game, go ahead and use this video.

[@Ka05aR]

This Specific Video helps me a million...

[@Oxxyjoe]

This is great stuff!!! I discovered this today and am really excited. I can't upload my web game yet, because judging is still going on for the game jam I entered in, and, putting a web version of the game up would potentially be like updating it beyond the deadline. So it will have to wait until next week but man, it's so cool that pygbag exists.

[@frazebean5117]

Thanks for the tutorial!

[@Multiverseofcoding2129]

This is just OP

[@n4p3r0]

This is so cool thanks :) Bot for some reason it made it so that all my random values turned into set values

[@FinFET]

this is by design I think, to make testing easier, you can circumvent this by calling random.seed() with something like mouse position or time

[@awesomefacts101]

This is super cool and easy to use so ty for making this vid. Saw some webassembly for c++, but python is like 10x easier in pretty much every aspect so this is really helpful all in all tytytytytytytytytytytyty tytytytytyt tytytytyty tytytyty tyty tyt ytyt ytyty tyt ytyt y

[@guy-]

Ytyyttytty

[@safehaven2022]

This was helpful. Thanks a lot

[@apex-hybrid]

for some reason my always says last argument must be app level directory. I have followed your example but isnt working sadly

[@SudhaRani-or1pm]

Yeah mine too can anyone help w that

[@NightSquadShorts]

I am stuck on a black screen maybe because my game has multiple functions for screens like, home_screen, welcome_screen, game_screen. Can you help me?

[@dmdotpy]

I am also stuck on a black screen, have you found a fix?

[@audevstin]

Dosen't work for me, when I run the pygbag command it says: WARNING: wasm mimetype unsupported on that system, trying to correct

[@FinFET]

Not sure, maybe you are using some unsupported function in wasm, try asking on the discord channel: discord.com/channels/772505616680878080/971360806287577098

[@cycl0ne154]

I think the difference between your local FPS and the one in WASM is the browser. Browser limits everything to 60 FPS.

[@exe4660]

can i use pygbag to import the package "pygame widgets" ?

[@oroshi858]

thank you ! very usefull

[@arcade-fighter]

Many thanks for the tutorial! Does this virtual machine have network support ?

[@alexandertownsend5079]

My game doesn't have a main() function. I can play it on my computer just fine so I know the code works in that context, but will that make a difference when I upload it? Basically, how I wrote my game was I imported pygame. I did pygame.init().Then I defined all my game variables. Then all the relevant functions telling the computer how to draw assets and play sounds. Lastly I called all of the functions in the while loop and wrote some code in the event handler. Do I need a main function? Also what does async refer to? I am not familiar with Javascript. I only Python and I am relatively new to it.

[@АнтонПод]

Thanks for the cool video! Everything works fine, but if I use not the built-in pygame surfaces, but images - a black screen. Where is it worth a look?

[@stoufa]

my game works fine locally but I can't get its web export to work (I'm getting a black screen), have any of you faced this problem before?!

[@FinFET]

You can try adding #debug to the end of the address to see if there is any error msg. You can also get great help on discord discord.com/channels/772505616680878080/971360806287577098

[@shantelwilliams1822]

I got mines to run but it only plays the music and doesn't show any of my graphics. I have to figure it out.

[@baharkarimi2040]

Can I send a pygame to an API in real-time?

[@miguelxd4133]

hello! im using a state changer with multiple functions, not a class, just multiple functions, and the functions dont seem to be getting called for some reason, it just stays on the menu

[@FinFET]

the functions that have an infinite loop have to be async and be awaited, but hard to say without taking a look at the code. You can get better help on discorf discord.com/channels/772505616680878080/971360806287577098

[@mohiuddinsyed1684]

The discord link in your description and about has expires Use a non-expiring one I have a problem with building my code to web, I need help

[@FinFET]

sorry, I'm new to discord, here is a non expiring link discord.gg/h7gVZZEKW3

[@randomguy6150]

thank you

[@videomenish]

Is it possible to add a game to your own website so that it runs there? And not only worked on the local server.

[@FinFET]

Not sure how to do something like that, but probably you would have a bit of lag

[@mac0cheese763]

So if my pygame game uses libraries such as openAI gym Pygbag wouldn't work?

[@FinFET]

probably not, maybe in the future

[@sushovanpal538]

sa,e bro tNice tutorials is fire

[@SkyFly19853]

Pybag? Like in the bag?... 🤔😏

[@FinFET]

Yeah, I found the name funny too 😂

[@SkyFly19853]

@@FinFET How about they call it Pyweb?... why not?... 🤔😏

[@usuariodefectuoso4046]

i get this error message when running on the browser: Error occurred: Unexpected reserved word. Can someone help me pls?

[@FinFET]

never seen this one, maybe someone on discord could help

[@Reddysupreme]

My project using def to run GUI! What should I do?

[@FinFET]

Not sure, you could try asking on the discord channel: discord.com/channels/772505616680878080/971360806287577098

[@Reddysupreme]

@@FinFET i got it before! But thanks for your help

[@stickpal]

Hey, I tried doing this with my own flappy bird clone, For some reason pygbag kept showing black screens, only the background music loads, I've also tried using the debug tool that comes with pygbag but it only showed errors that didn't really make sense cause they worked in pygame. Do you have any idea how I could fix this? Thanks.

[@FinFET]

Hard to say without taking a look at the code, maibe you forgot to await asyncio.sleep(0) after updating the screen? In discord you can get better help: discord.com/channels/772505616680878080/971360806287577098

[@stickpal]

@@FinFET The main error was this line: Task exception was never retrieved future: Traceback (most recent call last): File "", line 230, in main pygame.error: Surface doesn't have a colorkey. when taking a look at line 230 it's related to a sound file for when the player makes collision with a pipe.

[@FinFET]

@@stickpal are you using .ogg files? newer versions of pygbag only support ogg for now

[@stickpal]

@@FinFET I'am using .mp3. thanks for the help, ill see if it fixes it.

[@stickpal]

update, I did try switching to .ogg, pygame didn't work at all, and no even the background music would play when i try running pygbag.

[@drm8164]

Please help: i have a game done with computer vision with Pycharm, how to upload it in my web-site? Thanks in advance.

[@FinFET]

I'm not sure if that is possible yet, you probably rely on a library like opencv which isn't supported by pygbag at the moment

[@drm8164]

@@FinFET thank you for you answer :)

[@alperklc7782]

thaks

[@hardikbabbar73]

Does pygbag work with GPIO pins on the raspberrypi?

[@KyleHiers-p6p]

I am getting a grey screen and the following message: WARNING: wasm mimetype unsupported on that system, trying to correct Not using SSL can anyone fix this?

[@esrasoner9319]

Great tutorial thanks a lot but im getting this error. Does someone has an idea? Traceback (most recent call last): File "", line 25, in pygame.error: Surface doesn't have a colorkey

[@jamespineiro736]

I have that error too! Did u ever get it fixed?

[@Equilibrier]

Thank you, I was searching for something like this. Wonder if this would also work with dearpygui.

[@rubylikessonic2]

It works for me but it's a lot slower than when I run it normally, is there any fix or reason for it?

[@FinFET]

for me it is usually about 3 to 5x slower, make sure to not have any prints or logs enabled, also, it is limited to your monitor refresh rate

[@Anomalous-ye3hi]

Is it possible to play the games on a self hosted domain??

[@amj.composer]

wait....I don't even have a main function! I just have the game loop and a couple classes before that! WDID?

[@bennettmarshall9525]

Little late but put your game loop in a main function and call the main function

[@aintNexus]

I still didn't see the whole vid, but i bet It Will be Amazing!

[@FinFET]

The possibility to run my games made with pygame directly in the browser is amazing for me =)

[@aintNexus]

@@FinFET Nice, but for me... I think It could explode

[@FinFET]

I also think so, it is way more convenient for sharing

[@aintNexus]

@@FinFET Yep!

[@kimgeraghty8873]

Hi! thanks for the awesome video! this was a literal game changer. Do you have any advice for how to get the game to work on iphone too? I selected mobile friendly in the frame options but is there something else that should be done? I have it working in the browser on the computer but not on my iphone. It says: compileError: webAssembly.Module doesn't parse at byte 753386: references are not enabled. Appreciate any insights you can share!

[@FinFET]

Never tried it on an Iphone, not sure what the error means. You can get bette help on the pygame-web channel on discord: discord.com/invite/h7gVZZEKW3

[@EliasXD2009]

how did you transform the python file to apk for the play store?

[@FinFET]

That was with buildozer, check out my newest video

[@EliasXD2009]

@@FinFET Thank you very much!!!

[@jonathanjonathansson3695]

How do i set up the environment variable for pygbag? I'm just trying to make the basic example on gitlab work and I can't get past the "'pygbag' is not recognized as an internal or external command, operable program or batch file."-error :(

[@FinFET]

try using: python -m pygbag foldername

[@jonathanjonathansson3695]

@@FinFET Firstly, thanks for replying! Secoundly, unfortunately this prompts me with "No module named pygbag", but I have installed pygbag. This is what I've done: 1) pip install pygbag 2) pip3 install pygbag --user --upgrade 3a) pygbag foldername "The term 'pygbag' is not recognized as the name of a cmdlet" 3b) python -m pygbag foldername "No module named pygbag" should this work or am I missing some step?

[@FinFET]

@@jonathanjonathansson3695 you could try finding the folder where pygbag was installed, but honestly, I think it might be easier to reinstall python making sure to check the option to add python to the path, then reinstall the libraries you need

[@FinFET]

@@jonathanjonathansson3695 no module named pygbag? thats weird, have you more that one version of python installed? maybe a misspell like pybag instead of pygbag...

[@michelleblackrose]

Hi great video i was hopping someone could help me when i launch the server I only get a black screen after download if I post my code could someone look at it as I am a complete newbie to Python and programing Thanks

[@FinFET]

Hi Michelle, try adding #debug to the address in the browser, maybe there is an error loading a module or a file You can get better help on discord: discord.com/channels/772505616680878080/971360806287577098

[@maximusachoo]

pybag not found?

[@FinFET]

try "pygbag" instead 😉

[@hell_for_hell]

where are you coding this?

[@GLAWKG0D]

I love you more and more

[@hyperdusstuff5874]

mine is stuck on 'downloading', any help?

[@FinFET]

try adding #debug tho the end of the address to see if there is any error msg, you can get more help on discord too discord.gg/h7gVZZEKW3

[@hyperdusstuff5874]

@@FinFET all fixed (mostly) i have the game running on itch, but my threaded functions aren't threading at all. does threading work at all in pygbag ?

[@FinFET]

@@hyperdusstuff5874 I think it should, but I'm no expert, you have make it all async if I'm not mistaken, Paul, the creator of pygbag, can help you with that on discord

[@Toda_Ciencia]

Does it works in macOS?

[@FinFET]

Should work in any modern browser

[@kizsuko]

I an I understand it when he's sayin it but i can't do it myself

[@FinFET]

come to the discord server, there are more experienced people that can help to sort things out

[@FinFET]

discord.gg/W2QpxF4N

[@annuayXD]

Can i Get this website's Templete Code

[@FinFET]

Like this one? github.com/FinFetChannel/yarc

[@goosew3266]

I am getting ModuleNotFoundError: No module named 'sqlite3'

[@FinFET]

Try installing it with pip

[@goosew3266]

@@FinFET yeah it's a tricky one ay. sqlite is actually an inbuilt library in python. it has been since python 2.7 and something. i have tried installing with pip, but says already installed. the program works if i just run it in python, but as soon as I use pygbag, and it runs it on my local host, I get this error when checking the debug on the browser

[@FinFET]

@@goosew3266 humm, so you are using it inside your game? maybe the guys at discord can help, not sure if possible yet discord.gg/pygame

[@goosew3266]

@@FinFET thanks for your help man :)

[@goosew3266]

I got it working. I needed to use the binary module. So all i had to change was: import sqlite to: import _sqlite

[@bossgd100]

Its fast or not ?

[@FinFET]

In my testing it is about 5 times slower than regular pygame, but in the future it might become faster by better utilizing webassembly and javascript features

[@bossgd100]

@@FinFET great thank you for the precision

[@teehamster0099]

bro

[@_black_stack_9914]

DON'T WORK! DISLIKE!

[@bruhwantedboosiefade69]

My program stops at 2:38 and I have been waiting for 20 minutes. help

[@FinFET]

have you tried using the debug page? localhost:8000/#debug You can get better help on the pygame-web channel on discord: discord.com/invite/h7gVZZEKW3

[@minecrafmasterpl]

I get the "no such file or directory" error while launching in pygbag localhost. When i run the script in pygame window locally everything works fine. Do you know that the issue is caused by?

[@FinFET]

try: "python -m pygbag gamefolder" instead

[@minecrafmasterpl]

@@FinFETI already did that. The Game launches for localhost, but the error is displayed when i go to localhost:8000#debug i can see that the issue displayed is "no such file or directory"

[@FinFET]

@@minecrafmasterpl I see, try loading all assets inside the main script, also sometimes inverting the \ to / in the file path string you can get better help on the pygame-web channel on discord: discord.com/invite/h7gVZZEKW3