The Situation
A live slot game with an existing player base was receiving complaints about poor performance on budget Android phones. The game ran well on desktop but suffered frame drops, jank, and occasional crashes on mobile. The operator could not afford a full rewrite.
Diagnosis
I started with SpectorJS to capture a WebGL frame and count draw calls. The result was alarming: 94 draw calls per frame for a relatively simple reel scene.
The culprits, identified by the capture:
- Every symbol was a standalone
PIXI.Sprite loaded from individual PNG files — no texture atlas.
- Background layers, decorative elements, and particles all used different textures, breaking PixiJS's auto-batching on every switch.
- The background animation loop was running 30+ individual
requestAnimationFrame callbacks simultaneously.
Fixing the Rendering Pipeline
Texture Atlas Consolidation
I ran all game assets through TexturePacker to generate two atlases: symbols.atlas and ui.atlas. This alone dropped draw calls from 94 to 22.
Particle System Migration
The win-burst effects were using PIXI.Container with individual sprite children. Migrating them to PIXI.ParticleContainer with pre-allocated capacity cut particle-related draw calls to 1 and eliminated GC pauses during big-win animations.
Background & Idle Layers
Background scroll layers were converted to PIXI.TilingSprite, eliminating the need for multiple sprites and reducing draw calls for the background to 2.
After all rendering fixes: 8 draw calls per frame.
Memory Leak Hunt
Chrome DevTools heap snapshots revealed that the bonus round screen was creating new PIXI.Text objects on every trigger without destroying the old ones. The fix was straightforward: a text object pool with a getText() / returnText() API.
A similar issue existed in the sound manager — Howler.js instances were being created without unloading, consuming growing amounts of audio buffer memory.
Result
Stable 60 FPS on the target device. Memory footprint reduced by 40%. Player complaints dropped to zero within two weeks of the patch going live. The profiling and fix methodology is now part of the team's internal QA checklist.
Doodle concept visual
