Deploy pygames to GitHub Pages with WebAssembly - PWA ready!

I'm a late comer to this hackathon!!

What I built

GitHub Action to deploy any of your games build with pygames to GitHub pages - mobile friendly and PWA read from word go!

This is my first GitHub Action.

Image Credits: Wikimedia

Category Submission:

Phone Friendly

👨‍💻For people who say, I just wanna see it live, Link

🎬For people who say, enough of talk - YouTube Demo Link

🕵️‍♂️For people who say, just show what you've built - GitHub Repo Link

Gameplay

Mobile

Tested with Samsung S22

PC

Screenshots

Home Screen

Supports all device types which run a browser that has WebAssemly support (most modern browsers do)!

Devices Tested

• Acer Monitor 34"
• Hp Omen 15"
• Microsoft Surface Go 2 10"
• Samsung Smartphone 6"

GitHub Actions

Description

Replicated the Legendary Arcade Space Invaders from 1978 which is a shoot'em up arcade game developed by Tomohiro Nishikado.

The game can be played via any web browser which supports WebAssembly.

Commands to use

• Left Arrow - move the ship to the left
• Right Arrow - move the ship to the right
• Space - shoot a single shot

Difficulty level can be increased with the DIFFICULTY_LEVEL variable, a value between 1 to 10, number of enemy bullets fired at the ship.

Tried integrating a special command rapid Fire that shoots 100 continuous shots at the enemies - none escapes this attack.

GitHub Source Code Link

https://github.com/Santhoshkumard11/deploy-pygame

deploy-pygame.yml

Replace /space_invaders/ path in your repo with your game name

name: Build Space Invaders with Pygbag
on:
  push:
    branches:
      - main
  workflow_dispatch:

jobs:
  build-pygbag:
    name: Sandy Inspires - Space Invaders Game
    runs-on: ubuntu-latest

    steps:
    - uses: actions/checkout@v2
    - name: Checkout
      run: |
            echo "Attempting to install pygbag"
            python -m pip install pygbag
            echo "Successfully installed pygbag"
            echo "Attempting to build the game"
            python -m pygbag --build $GITHUB_WORKSPACE/space_invaders/main.py
            echo "Successfully build the game and complied to WebAssembly"

    - name : "Upload to GitHub pages branch gh-pages"
      uses: JamesIves/github-pages-deploy-action@4.1.7
      with:
        branch: gh-pages
        folder: space_invaders/build/web

Permissive License

MIT license

Common Mistakes

Sharing some mistakes I did and found the fix the hard way.

1) Setting the Workflow permissions right

• for a flow to write to your repo (creating branch or pushing code) you need to enable read and write permissions. Steps: 1) Go to your repo Settings 2) Click on the Actions ** tab on the left-hand side sidebar 3) Click on **General 4) Scroll all the way down to find Workflow permissions, check Read and write permissions and click Save.

2) use $GITHUB_WORKSPACE variable if you're not sure from where you're fetching the files or folders from.

Will add more in the future as I encounter more of them.

Background

I always wanted to make games but has no idea on game design, but I was good with Python scripting and database. Recently I kind of redesigned Space Invaders 🧑‍🚀🚀 and posted it online, but many said they wanted to try it out so I asked them to follow the instructions in README.md file. Still, it's difficult for many to do that so I wanted to deploy it in web so it's accessible for anyone who wants to play it and give feedback. I saw this hackathon and was thinking if it's possible to deploy it via GitHub Actions. To my surprise there is a simple deployment way to build and deploy the game - GitHub Pages came to my rescue.

How I built it

GitHub Actions has been the go-to CI/CD for developers who don't want to get into complex Jenkins pipelines, deploying and managing stuffs around. But who needs a simple CI/CD that just works every single time. I've used GitHub Actions for deploying Azure Functions, App Services, and other services of Azure but this time I want to simplify the process even further. I wanted to write my own flow, so I just tried one and it worked out - just like magic. You don't really know what's happening, but it deploys, and it just works.

I had a fair idea of how things work with GitHub pages but haven't explored it a lot, but now since I wanted to deploy the game as a web application, I was looking at GitHub Pages to see if it can support a game to be deployed and not just a simple web application.

To my surprise again, as long as you have an index.html file with all the code inside it, you can deploy web applications (not to be used for production) to it. I initially had to deploy it to Azure Function, which is good and my go to deployments for APIs and simple web apps, but I always wanted to simplify things.

And I didn't think it would work, but it just did, I complied the Python script to WebAssembly and it created an index.html which I pushed it to gh-pages branch and it was able to render the game smoothly and gameplay it awesome - no lag (good FPS), it's slow only when it loads the game.

Used the following resources to build this

Pygame - Link
WebAssembly - Link
pygbag - Link