This is a submission for the Web Game Challenge, Build a Game: Alien Edition

TL;DR: This is a re-skinned version of the Flappy Bird game, focused on exploring Pixi-React v8 beta as the game engine, without introducing new mechanics.

What I Built

Flippy Spaceship is a space-themed reimagining of the classic Flappy Bird game, built using the Pixi-React v8 Beta. While retaining the original game's mechanics, this version offers a fresh space adventure aesthetic. It also serves as a testbed for the capabilities of Pixi-React, which is still in beta.

Inspired by and translated from the original Flappy Bird Game (Vue3 and PixiJS), Flippy Spaceship shifts to React and offers a fun yet familiar experience. It’s also a great way to demonstrate what Pixi-React can do.

Demo

You can try it out here: Live Demo. Mouse click or spacebar to play.

Journey

Here are some key things I learned and encountered while building this game:

• Motivation: In my day-to-day work, I use Pixi v7 with Svelte, but I was eager to explore Pixi v8 and Pixi-React, especially since Pixi-React is still in beta. This project was the perfect opportunity to dive into it.

• Translation from Vue to React: There’s a great Pixi Flappy Bird project written in Vue, which I’m not very familiar with. With help from ChatGPT, I translated the code into React. However, since Pixi-React is in beta, I encountered issues where ChatGPT didn’t have the latest info, requiring me to debug certain problems on my own.

• Setting up the project from scratch:
  

  npx create-vite@latest --template react-ts flippy-spaceship
  cd flippy-spaceship 
  npm i pixi.js@8 @pixi/react@beta
  

• Button interaction issue: I wanted to use Pixi-UI's FancyButton, but found that the callback functionality doesn’t yet work in Pixi-React. I asked about this in a discussion thread, but haven’t received a reply yet. As a workaround, I used a full-screen click to start the game instead.

• Custom background: I created a simple space background inspired by Pixi’s Star Warp example, replacing the Sprite elements with basic Graphics for simplicity.

• Bug encountered: I ran into a bug while using Pixi-React's useAssets hook, where loading the same asset multiple times didn’t work. After the first time, the asset failed to load, meaning the rock piles after the first weren’t rendered. This issue seems to be tracked in this bug report. I ended up using the depreciated useAsset which is working perfectly fine.

• Context API limitations: Initially, I wanted to manage screen dimensions using React's createContext, but later discovered that this feature isn't fully supported in Pixi-React. I may find alternative ways later to handle screen size changes.

TODO

• Add simple spaceship animation
• Incorporate sound effects and background music
• Implement high score saving and loading
• Add a wormhole mechanic to advance the player over a set distance
• Introduce floating quantum cores as in-game currency
• Create a shop where players can buy new spaceship skins

Conclusion

While Pixi-React is still in beta and presents some challenges with newer features, it offers significant potential. Some Pixi packages, like Pixi-UI, may need updates to function properly in this environment. Hopefully, future releases of Pixi-React will include more detailed documentation and address some of these early-stage issues.

Feel free to explore the source code and license in the GitHub repository.