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

Поділитися
Вставка
  • Опубліковано 17 лип 2024
  • Export your Python Game to Web with WebAssembly.
    Snake game code: github.com/educ8s/Python-Retr...
    Try it online: paixnidakia.gr/snake
    Bluehost Web Server: bit.ly/BluehostAccount
    💖 Full disclosure: The above link is an affiliate link. I get a small percentage of each sale it generates. Thank you for your support!
    0:00 Intro
    0:24 How to share your game
    1:35 Convert to WebAssebly
    2:48 Install pygbag
    3:20 Changes to the code
    4:27 Conversion
    4:59 Testing the result
    5:44 Build Folder

КОМЕНТАРІ • 82

  • @GANHEDDO
    @GANHEDDO Рік тому +1

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

  • @ascoded-xr2sx
    @ascoded-xr2sx 9 місяців тому +1

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

  • @user-fw8yw5di4z
    @user-fw8yw5di4z 10 місяців тому +1

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

  • @edua1343
    @edua1343 Рік тому +2

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

  • @Tims_Projects
    @Tims_Projects Рік тому +5

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

  • @rentonl
    @rentonl 10 місяців тому +2

    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.

  • @julianbullmagic
    @julianbullmagic Рік тому +2

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

  • @RndmGuy98
    @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?

  • @thecontextual
    @thecontextual Рік тому +1

    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
    @vmartme 11 місяців тому +1

    Thank you Nick!

  • @MrPennywise1540
    @MrPennywise1540 6 місяців тому +1

    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?

  • @MrPennywise1540
    @MrPennywise1540 6 місяців тому +3

    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?

  • @amirhm6459
    @amirhm6459 9 місяців тому +1

    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

  • @idkaname1539
    @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.

  • @delicious_Pinguin
    @delicious_Pinguin 6 місяців тому +1

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

  • @adammohamedkamel6826
    @adammohamedkamel6826 10 місяців тому +5

    it isn't working!!!!!

  • @plushloler
    @plushloler 6 місяців тому

    Thanks it's a good tutorial

  • @Gawain-hi5pd
    @Gawain-hi5pd Рік тому

    does this work with numpy and numba?

  • @manuelgarciagarcia2501
    @manuelgarciagarcia2501 Рік тому

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

  • @Bilal-_-
    @Bilal-_- 3 дні тому

    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?

  • @foofoo17
    @foofoo17 9 місяців тому

    Nick the GOAT

  • @polycarpdev
    @polycarpdev Рік тому +5

    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
      @prajwalshetti3655 4 місяці тому

      did u find the solution?

    • @AceYT69
      @AceYT69 Місяць тому

      he got the same thing and it still ran

  • @tanaythelegend1268
    @tanaythelegend1268 10 місяців тому +3

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

    • @prajwalshetti3655
      @prajwalshetti3655 4 місяці тому +1

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

  • @usuariodefectuoso4046
    @usuariodefectuoso4046 Рік тому

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

  • @JeremiKress
    @JeremiKress 6 місяців тому

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

  • @user-ei9nl5ce4e
    @user-ei9nl5ce4e Рік тому +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
      @programmingwithnick  Рік тому +3

      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.

  • @gabopython
    @gabopython Рік тому

    thanks so much

  • @stickpal
    @stickpal Рік тому +1

    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
      @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
      @stickpal Рік тому +1

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

  • @activaty3837
    @activaty3837 4 дні тому

    I love your voice

  • @user-eo4sk4tp1g
    @user-eo4sk4tp1g 4 місяці тому

    pygbag snake not working with giving me an erorr

  • @innstenar
    @innstenar 6 місяців тому

    ty🙏

  • @JAGuy
    @JAGuy Рік тому +1

    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
      @prajwalshetti3655 4 місяці тому

      same
      did u find the solution

    • @JAGuy
      @JAGuy 4 місяці тому

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

  • @elainegou
    @elainegou 10 місяців тому +1

    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
      @D-ingus 10 місяців тому

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

    • @elainegou
      @elainegou 10 місяців тому

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

    • @ZERKAI_WARRIORZ
      @ZERKAI_WARRIORZ 6 місяців тому

      Thanks Dude U help me alot
      @@elainegou

  • @logicloop_dev
    @logicloop_dev 6 днів тому +1

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

  • @johnstarfire
    @johnstarfire Рік тому +2

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

    • @programmingwithnick
      @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
      @johnstarfire Рік тому

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

  • @programmingwithnick
    @programmingwithnick  Рік тому +7

    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.

  • @newtocamelot
    @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
      @programmingwithnick  Рік тому +1

      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
      @newtocamelot Рік тому

      @@programmingwithnick thank you!

  • @SalocinRevenge
    @SalocinRevenge 7 місяців тому

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

    • @SalocinRevenge
      @SalocinRevenge 6 місяців тому

      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
      @prajwalshetti3655 4 місяці тому

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

  • @Shadoww0
    @Shadoww0 10 місяців тому +2

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

  • @elincreiblemundodenicomedia
    @elincreiblemundodenicomedia 11 місяців тому

    awesome

  • @perelmanych
    @perelmanych Рік тому +1

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

  • @prajwalshetti3655
    @prajwalshetti3655 4 місяці тому

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

    • @calendollens9982
      @calendollens9982 4 місяці тому

      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
      @prajwalshetti3655 4 місяці тому

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

  • @GuteuYT
    @GuteuYT Рік тому +2

    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

  • @amj.composer
    @amj.composer 9 місяців тому +2

    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
      @cypherecon5989 3 місяці тому +1

      have the same problem

    • @user-qm4oc8nb8e
      @user-qm4oc8nb8e Місяць тому

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

  • @DusunenVarlik55
    @DusunenVarlik55 Рік тому +3

    Freezes at Downloading on localhost

    • @polycarpdev
      @polycarpdev Рік тому +1

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

    • @programmingwithnick
      @programmingwithnick  Рік тому

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

  • @password6975
    @password6975 3 місяці тому

    😊

  • @zaki_who
    @zaki_who Рік тому +1

    Please nick can you make more tutorials about raylib

    • @programmingwithnick
      @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
      @zaki_who Рік тому

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

    • @programmingwithnick
      @programmingwithnick  Рік тому +2

      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
      @zaki_who Рік тому

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