explicitClick to confirm you are 18+

How To Deploy Panda3D Game To The Web

Meet EliMar 31, 2024, 8:00:34 AM
thumb_upthumb_downmore_vert

Hello reader and welcome. So you have a game you made with Panda3D engine. That's all nice and sweet but you don't want to just play it yourself locally on your machine. You want others enjoy the game and perhaps provide feedback. I've put together this article because it's not as straightforward as with putting a website online. So without a further ado let's learn how to deploy Panda3D game to the web.

 

Pygbag to the scene


We'll be deploying the short game I made here. If you need the source code you can download it here. In this article I'll assume you're on Ubuntu though the steps will be pretty similar if not same on Windows too.

We'll use Pygbag library which is a Python WebAssembly packager with built-in server for deploying. Pygbag can be used to deploy a game made with Pygame as well as Panda3D. For this to work I recommend using Python version < 3.12 . It supposed to work with Python 3.12 as well but I had issues. The wheels supporting Python 3.12 are still experimental. I've tested it with Python 3.8 as well as Python 3.10 and worked fine. So let's make sure both libraries are installed within our virtual environment:


Next let's make sure the game's entrypoint is named main.py . That's important to Pygbag. Next up, include few lines of code Pygbag will be looking for in the main.py file above the imports :

 

The first line tells the operating system ran on the machine to use default Python 3 interpreter. Lines 2 to 6 represent special script Pygbag is looking for. Python list with dependencies. For our purposes we need to include just Panda3D. Apparently this script won't be necessary in the future but it is as of March 2024.

With this out of the way next we need to execute pygbag command that packages our game:

(venv) $ python3 -m pygbag --archive --template noctx.tmpl --ume_block 0 main.py

 

The command creates the build directory within the project root and fills it up with files it found in your directory but optimised for the web. The command pulls a template with basic HTML skeleton and styling and makes sure asyncio is doing all the legwork behind the scenes.

With build directory created, next we need to create a free account on itch.io . Itch allows to us to serve the game within the browser and also allows embedding the gameplay into your own website.

 

 

Fill out all necessary information. After verifying your email it takes you to your dashboard. You'll see a blank project page. Click "Create new project".

 

Fill out the fields as you see fit. Scroll down to "Kind of project" and pick HTML. Next scroll down to get to the upload button.

 

Pick the web.zip file residing in your build directory you created earlier and check the box reading "This file will be played in the browser".

 

You may fill out the description, genre etc. After scrolling further down you can adjust window size for the game, whether or not start the game after page load, making the interface mobile-friendly and other options.

The important section is the visibility.


It's pretty self-explanatory so pick as you see fit. After clicking on Save and View Project you'll be presented with the "Run Game" button (unless you checked the box to start the game automatically with page load).

Click it and after few seconds your Panda game should start with music:


Wonderful ! ! !

Your game can now be shared with the world and for free !

Now let's cover how we can embed the gameplay into our own website. Click back to the edit.

... then click on Distribute ...

 

and now click on Embed Game ...


... copy-paste the code into your HTML skeleton on your website and that's it folks. Yadiyada !

What interests me next is how Panda game can be deployed on AWS GameLift service. I may share it in my next posts.
Hope you enjoyed this post and if you have any thoughts or would like to just say hi send me a message here.


Hope you enjoyed this walkthrough and if you have any comments or feedback leave them below.