Export Python pygame Game to Web with WebAssembly (pygbag tutorial)

[@Tims_Projects]

Thank you Nick, that was new to me, it's amazing what todays web browsers can handle these days, soon all apps will be web based.

[@programmingwithnick]

You're welcome! I'm glad to hear that you found the information useful and that it was new to you. It's true that web browsers have come a long way and can handle more and more advanced features. I think it's exciting to see how web-based apps are becoming more and more prevalent in the industry. Thanks for your comment!

[@edua1343]

I still can't believe this, this is an incredible invention

[@adammohamedkamel6826]

it isn't working!!!!!

[@GANHEDDO]

Exporting pygame games to wasm is new for me! Thanks for the detailed video. Great work :)

[@ascoded-xr2sx]

Best video I could found about this. Thank you!!

[@delicious_Pinguin]

the image is black clompledly black, do I need to upload my background too?

[@MrPennywise1540]

My html file created by pygbag is full of errors. I could fix them. But, even the, the game doesn't work for me after the emerging banner Pygame. After that, it only appear a black box. Could be possible if anybody share a succesfull generated .html file?

[@rentonl]

does it only work when your entire game is in a single file? Been stuck on "Setting [src] up" where 'src' is the name of my directory.

[@polycarpdev]

am getting the following error: "WARNING: wasm mimetype unsupported on that system, trying to correct Not using SSL" could not find a solution anywhere

[@prajwalshetti3655]

did u find the solution?

[@AceYT69]

he got the same thing and it still ran

[@RickPython-x5r]

I got more information form a 2 hour video for this 10min video! crazy keep it up

[@MrPennywise1540]

I have a programe to edit images. It use Tkinter for the GUI. And PIL library. In this case, PyBag don't include these libraries. What can I do to achieve a similar result? Pyscript neither do. Maybe use a remote server to run it would be the unique solution?

[@tanaythelegend1268]

The browser shows blank screen after ready to start button, The game has no error while running normally what could be possible cause?

[@prajwalshetti3655]

same thing is happening with me did u find the solution for it?

[@dmdotpy]

Not sure if you guys are still looking for a solution, but in order to fix the black screen you need to: 1. Make sure that all of the functions in your code that have infinite loops (while True for example) have the "async" keyword in front of them 2. Put "await asyncio.sleep(0)" at the end of each infinite loop 3. Put the "await" keyword on all asynchronous function calls

[@julianbullmagic]

what if the game loop is part of the main game class?

[@Jacknoham]

adding the asyncio stuff makes my code stop working

[@Jacknoham]

it won't loop and just shuts the window imediately

[@rickyasbury1878]

Question I have multiple Python files (one that handles assets and one that handles physics and the main game). How do I handle that with pygback?

[@thecontextual]

Im trying to do this on a raspi over a LAN connection. Ive done this and it works on localhost however, id like to be able to display it on some page like you have in the end. Ive got apache on the pi to work, but how can i run the game this way? Does the python file need to be an APK? I cannot find anything online explaining how to do this

[@vmartme]

Thank you Nick!

[@Bilal-_-]

i successfully completed the instruction but as soon as i interact with my game, there seems to be a light blue overlay pver my game (similar to how it looks like when you select and image/ or text) how can i fix this?

[@RndmGuy98]

It (as well as pyinstaller if I don’t put It into the directory layer above the rest of the game) seemingly can’t find the font I’m importing. Why do all compiling programs struggle with fonts so much?

[@idkaname1539]

What if my game has 3 main definitions, play, main menu and tutorial?? how do I include async with it ? When i try to do async def with tutorial function, I cant change to any of the other screens anymore.

[@johnstarfire]

my screen is black after I click start, any suggestion?

[@programmingwithnick]

There are many things that can go wrong. First you could try the debug mode to see what's wrong using localhost:8000#debug instead of just localhost:8000 it will show you the REPL with any message/trace python could send.

[@johnstarfire]

@@programmingwithnick I substituted the mp3 files with ogg and now it works

[@ExpansionEsmeralda]

Thank you!!

[@GonzaGuitar]

Tanks bro, you're the best!

[@Shadoww0]

when i open the game in the browser it doesn't start and screen is black

[@prajwalshetti3655]

same thing is happening with me did u get the solution?

[@ocaiohen1364]

Same

[@JeremiKress]

You sound Spanish or Greek 🤔 Great tutorial, man. Thank you!

[@programmingwithnick]

FAQ 1: All I get is a black screen after converting the game. Please load the game like this: localhost:8000/#debug This way you can see the error that prevents the game from loading. FAQ2: Can I use .mp3 files? Yes, but don't. Using .mp3 files is buggy. Convert your .mp3 sound to .ogg.

[@__________Troll__________]

*Should I assume playing videos is also not a good idea?*

[@amirhm6459]

It is showing black screen on me, anybody know the issue? I try with the snake example and also try on my game. the background music is played but the graphics, input, and sfx is not. just black screen

[@edadryani]

same here.. did u find somthing !

[@תומרגדליהו-ה1צ]

Great explanation, I manage to load the game in the browser, but only when the command prompt is open, after I close the command prompt and double click on the browser icon in the build, the browser fails to load the game

[@programmingwithnick]

Yes, that's normal behavior. The command promt has created a game server to load the game. If you close the command prompt, the server is no longer active so the game won't load. If you upload the game to your own web server it will work fine, this issue happens only if you run the game locally.

[@Reddysupreme]

mine is have a define so what should I do

[@GuteuYT]

hey nick, some people are having some dificulties, can you make and pin a comment listing some problems and how to solve them? will help a lot

[@JAGuy]

All I see on screen after the green loading bar is a black screen and I can hear audio. Also it’s not the whole screen just the game tab. How do I fix this

[@prajwalshetti3655]

same did u find the solution

[@JAGuy]

@@prajwalshetti3655 I’m pretty sure I did but I don’t remember.

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

[@programmingwithnick]

What is your music format? MP3 or something else? I had the same problem when using .mp3 files. When I converted them to .ogg everything works fine. Try it and tell me how it goes.

[@stickpal]

@@programmingwithnick Hey, I did fix it after all, Basically the sound files weren't converted properly to .ogg, hence why the game wouldn't boot. and I have also forgotten to add a await asyncio.sleep(0) after every while true loop.

[@elainegou]

Hey, I have installed pygbag, but when I run "pygbag [Folder]," I get an error message that says pygbag is not an executable internal or external exam.

[@D-ingus]

im having the exact same issue. i have no idea how to fix it.

[@elainegou]

@@D-ingus I think i found the solution. Try running python -m pygbag [Folder]

[@ZERKAI_WARRIORZ]

Thanks Dude U help me alot @@elainegou

[@mgames3209]

I had the exact same issue, pybag has hidden some where in your Python package area

[@foofoo17]

Nick the GOAT

[@logicloop_dev]

Thank you I can now participate in Pirate Software - Game Jam 15 😁 edit: My screen is now black with no game play why?

[@Reddysupreme]

Me 2

[@Gawain-hi5pd]

does this work with numpy and numba?

[@activaty3837]

I love your voice

[@plushloler]

Thanks it's a good tutorial

[@usuariodefectuoso4046]

when running the game i get the error: Unexpected reserved word

[@innstenar]

ty🙏

[@manuelgarciagarcia2501]

Do you know how to use c++20 modules with raylib

[@gabopython]

thanks so much

[@محمود-ك9ي1غ]

pygbag snake not working with giving me an erorr

[@amj.composer]

I have installed pygbag but I'm still getting: C:\Users\aryam\Desktop>pygbag snake 'pygbag' is not recognized as an internal or external command, operable program or batch file. What do I do?

[@cypherecon5989]

have the same problem

[@aryanrana-o6n]

@@cypherecon5989 python -m pygbag file_name use this command and error will resolve

[@newtocamelot]

Is there a way this can work on iPhones? When I try the link I get the screen with the green button that says “Ready to Start!” but it does nothing when I tap on it.

[@programmingwithnick]

Yes, this happens if the game you have created requires a keyboard to work. Since there is no physical keyboard on the iphone this approach won't work. You have to modify your original code to include mouse controls or touch controls as well.

[@newtocamelot]

@@programmingwithnick thank you!

[@prajwalshetti3655]

Iam getting a black screen I got the ready button but its not going further what could be the problem?

[@calendollens9982]

Hi, I had the same problem and then realized I put the await asyncio.sleep(0) at the end of the main() function and not inside the while loop... I hope this helps you out. Now I just need to figure out how to upload it to my website

[@prajwalshetti3655]

@@calendollens9982 Thank you so much for ur help. I got the output :)

[@DusunenVarlik55]

Freezes at Downloading on localhost

[@polycarpdev]

same problem, doesn't display the program on the web browser, rather shows a black screen

[@programmingwithnick]

Try loading the game like this: localhost:8000/#debug to see what goes wrong.

[@SalocinRevenge]

I have a issue of the game just showing previous images. The game runs but in a totally crazy way. any ideas?

[@SalocinRevenge]

Solved. It happened because I was calling the run async method by inside a __init__() function of a class. Do not do that. I create a class and than called its run method from out of the init function

[@prajwalshetti3655]

@@SalocinRevenge Iam getting a black screen I got the ready button but its not going further what could be the problem? Iam calling the async normally

[@perelmanych]

I really would appreciate if you can do a similar tutorial but for C++ with Raylib.

[@programmingwithnick]

Added to the list. Thanks!

[@Technologyer90]

I thinks its good

[@elincreiblemundodenicomedia]

awesome

[@zaki_who]

Please nick can you make more tutorials about raylib

[@programmingwithnick]

Yes, I will make more raylib tutorials, but please be patient. Long format tutorials require a lot of time to be produced!

[@zaki_who]

@@programmingwithnick sure but we need it the documentation is just a cheat she

[@programmingwithnick]

Thank you very much for the feedback. I noted it down. I will prepare a lot of tutorials about raylib since you guys want it! Stay tuned!

[@zaki_who]

@@programmingwithnick trust me Nick..... you gonna blow up in no time

[@password6975]

😊

[@ITalkBall13]

I keep seeing a black screen on the website. How do I fix this?