I was recently tasked with embedding a game into indie-plaza.eu, a website dedicated to the gaming industry. Specifically, I was asked to integrate a story-driven game created with the Ren’Py engine by Mr. Stéphane Rappeneau a Financing expert and gaming enthusiast with the desire to support the indies in business and financing related. Ren’Py is a tool that excels in creating visual novels and interactive narratives. The game simulates a conversation between a gaming studio and a publisher, offering a unique experience for users interested in the business side of game development.

As Full Stack Developer At Norma, we explore several different approaches for each task we face for better performance and better user experience. So for the approaches we explored:

• Using an iframe to connect directly to the game hosted on platforms like itch.io, which is a popular choice for indie developers.
• Link the game from alternative websites and use a hyperlink to redirect from Indie Plaza.
• deploying the game separately and use iFrame to embedding it as a static HTML into Indie Plaza.

This project would offer the most seamless integration and the best user experience. This approach would ensure that the game is fully integrated into the site’s ecosystem, maintaining the visual and functional consistency that Indie Plaza strives for.

- Overview of Game Engines:

In the world of game development, many engines like Ren’Py, Unity, and Godot offer the capability to export games as HTML5 projects. This feature is incredibly powerful, as it allows developers to embed their games directly into websites, making them easily accessible to a wide audience. The ability to play a game within a web browser without needing to download or install anything is a significant advantage, especially in today’s fast-paced, on-the-go digital landscape.

- Objective:

In this article, I will walk you through the steps of creating a game, exporting it for the web, uploading it to GitHub, deploying it as a static HTML project, and setting up an automated CI/CD pipeline using GitHub Actions. This process ensures that any updates to the game can be seamlessly integrated into the website, providing users with the latest version every time they visit.

Step 1: Create Your Game

- Start by developing your game using your preferred engine. This could be Ren’Py, Unity, Godot, or any other engine that supports HTML5 export. Design your gameplay, create assets, and implement game mechanics.

Step 2: Export Your Game as HTML5

- Once your game is ready, export it as an HTML5 project. Most game engines offer a straightforward way to do this, often through a “Build” or “Export” option in the project settings. This will generate the necessary files to run your game in a web browser.

Step 3: Upload the Project to GitHub

- Initialize a GitHub Repository:

Create a new repository on GitHub. After exporting your game, navigate to your project directory and initialize a Git repository with the following commands:

git init
git add .
git commit -m "Initial commit of game project"
git branch -M main
git remote add origin https://github.com/your-username/your-repository-name.git
git push -u origin main``

This will upload your game files to GitHub, making it easier to manage your code and deploy updates.

Step 4: Deploy via Firebase or Alternatives

- Choose a Hosting Service:

After uploading your project to GitHub, select a hosting service like Firebase, GitHub Pages, or Netlify for deployment.

- Deploying as an HTML Project:
Follow the hosting service’s instructions to deploy your game. For instance, with Firebase, you can initialize the project and deploy it by running the

firebase init
firebase deploy

command in your terminal.

Step 5: Set Up the Workflow as Static HTML

- GitHub Actions Setup:

When it comes to automating deployments with GitHub Actions, the typical approach often involves using a Node.js workflow. However, since your project consists of static HTML files, you can streamline the process by setting up a workflow specifically tailored to handle static content.

1. First, head over to the “Actions” tab in your GitHub repository. GitHub offers a variety of templates, but for our purpose, we’ll select the Static HTML workflow. This template is perfect for projects like ours, where the content doesn’t require any build steps or dependencies.
2. After selecting the template, you’ll see a YAML file that outlines the steps GitHub Actions will take every time you push changes to the repository. The file might look something like the code below.
3. Let me walk you through what’s happening here. First, we’re telling GitHub to watch for any changes pushed to the main branch. When that happens, it will automatically trigger this workflow. The first step checks out your code, and then we install the Firebase CLI, which is necessary for deployment.
4. The final step is where the magic happens. The workflow uses your Firebase token (which you’ll need to store as a secret in your GitHub repository) to deploy the latest version of your game directly to Firebase Hosting.
5. Once you’ve reviewed and customized this workflow, commit and push it to your repository. From there, GitHub Actions will take over, deploying your game to Firebase Hosting whenever you make updates. It’s a seamless way to ensure your game is always up-to-date without manual intervention.

name: Deploy to Firebase Hosting

on:
  push:
    branches:
      - main

jobs:
  deploy:
    runs-on: ubuntu-latest

    steps:
      - name: Checkout repository
        uses: actions/checkout@v2

      - name: Set up Node.js environment
        uses: actions/setup-node@v2
        with:
          node-version: '18'

      - name: Install Firebase CLI
        run: npm install -g firebase-tools

      - name: Deploy to Firebase
        env:
          FIREBASE_TOKEN: ${{ secrets.FIREBASE_TOKEN }}
        run: firebase deploy --only hosting

Step 6: Test the Workflow

With your deployment workflow now fully set up, the next step is to ensure everything is working perfectly on your live site.

• Visit Your Website:
  Navigate to your website’s URL, where your game is now live. Seeing your game embedded and functioning on the web is a great milestone.
• Play Through the Game:
  Take the time to play through the game directly on your site. Pay close attention to how it loads and operates. This is your opportunity to confirm that everything — from visuals to interactivity — runs smoothly and as intended.
• Check for Issues:
  As you test, keep an eye out for any issues. This could be anything from slow loading times to media not displaying correctly, or buttons not working as they should. It’s also important to check how the game performs across different browsers and devices. You want to make sure your game is accessible and functional for all users.
• Fix and Push to GitHub:
  If you encounter any issues, the solution is straightforward. Simply fix the problems in your code, and then push the updated files to your GitHub repository. Thanks to the workflow you set up earlier, GitHub Actions will automatically redeploy your game with the latest changes. This makes it incredibly easy to keep your game up-to-date and running smoothly.

Conclusion:

• Bringing It All Together:
  In this article, we walked through the entire process of creating a game, exporting it as an HTML5 project, and deploying it on your website. We also set up an automated deployment process using GitHub Actions, which takes the hassle out of keeping your game up-to-date. This streamlined approach allows you to focus more on developing and improving your game, while the deployment happens automatically in the background.
• Looking Forward:
  Whether you’re working with Ren’Py, Unity, or any other engine that supports HTML5, embedding your game directly into your personal website and setting up automated deployment is a game-changer. It not only enhances the user experience but also ensures that your content is always fresh and accessible. So, why not give it a shot? Elevate your web presence with engaging, interactive content and enjoy the benefits of a seamless, automated workflow.