Showcase
Game Flow
Project Context
BUBBO BUBBO was created to help developers learn how a professional PixiJS game can be structured. The aim was to provide a clear, practical example of game development using PixiJS, while still making something that could be removed from the developer context and played as a normal game.
The project was designed as a compact but complete reference point for common browser-game concerns: state management, systems, game loops, rendering structure, user input, asset handling and UI. The code needed to be understandable enough to learn from, but not simplified to the point where it stopped reflecting real project structure.
It was built by two people, myself and an artist, in less than four weeks. That timeframe included pre-design, development, quality assurance and minor post-release work.
Object-Oriented And ECS Architecture
The game uses object-oriented programming alongside an entity-component-system style architecture. This allowed reusable pieces of behaviour to be composed into more complex game systems while keeping gameplay logic, rendering concerns and application structure reasonably separated.
That separation was important for the project’s teaching goal. Developers looking through the code could follow how state, entities, components and rendering updates relate to one another without everything collapsing into a single gameplay file.
PixiJS Ecosystem Libraries
BUBBO BUBBO uses several PixiJS ecosystem libraries, including Pixi Sound, Pixi UI and AssetPack.
Pixi Sound provides WebAudio-backed playback and filters. Pixi UI helps with common interface components inside a PixiJS-rendered application. AssetPack supports asset optimisation for the web, helping keep the game practical across different browser and device conditions.
Roulette Wheel Selection
The bubble types for the procedurally generated board are selected using a roulette wheel selection algorithm. This gives the game a controlled way to choose bubble types based on weighted probability, helping it feel challenging without becoming unfair.
Procedural Background Visuals
The background visuals, including satellites and planets, are procedurally generated to fill the unused space around the main gameplay area. Their positions, rotations and counts are influenced by the available screen space and device type.
Planet presentation, moon count and moon orbit speed are also varied so the scene feels more alive without adding unnecessary authored content.
Technical Aspects
- Object-oriented and entity-component-system architecture
- Separated rendering, gameplay and application logic
- PixiJS Sound, UI and AssetPack integration
- Roulette wheel selection for bubble type generation
- Procedurally generated background visuals
- Maintainable PixiJS project structure
Challenges
- Balancing the project as both a teaching resource for developers and a complete game for normal players.
- Keeping the codebase approachable while still demonstrating professional architecture and production structure.
- Creating the game with a two-person team in under four weeks, including design, development, QA and minor post-release work.
Contributions
- Led development alongside an artist and built the game architecture end to end.
- Structured gameplay, rendering and application logic so the project could be understood and extended by other developers.
- Implemented the core systems, game loop, state management and user input flows.
- Integrated PixiJS ecosystem libraries for audio, UI and asset optimisation.
- Built procedural background visuals and bubble-selection behaviour for the generated board.