I built a re-skinned version of the classic Flappy Bird game called Flippy Spaceship, with a space theme, using Pixi-React v8 beta. The goal was to explore Pixi-React as a game engine without adding new game mechanics.

What I Built

Flippy Spaceship is a space-themed reimagining of the classic Flappy Bird game. While retaining the original game’s mechanics, this version gives it a fresh space adventure vibe. Additionally, it serves as a platform to experiment with Pixi-React v8 beta, which is still in development.

This project was submitted to Dev.to’s Web Game Challenge, Build a Game: Alien Edition.

Inspired by and translated from the original Flappy Bird Game (Vue3 and PixiJS). I ported the codebase to React and leveraged the Pixi-React library to showcase its capabilities.

Live Demo

You can try it out here: Live Demo. Use mouse clicks or the 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.
• 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
• 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.
• 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 an 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.