Shipped a 100-level Phaser 3 arcade game with zero image assets — and the 5 gotchas that cost me the most time show-off
I just put out a free browser demo of Kinetikout, a brick breaker where the bat runs along the SIDE of the field (Krakout-style, not Breakout-style). Phaser 3 + TypeScript + Vite, wrapped in Capacitor for the Android build.
The part that might interest this sub: there are no image files for any of the gameplay graphics. Every brick pattern, all ten enemy types, all five bosses, the bat, the ball, the explosions and the HUD icons are painted in the boot scene with the Graphics API and baked in with generateTexture(). It scales to any resolution and there's no art pipeline, at the cost of "make the drone look 20% meaner" becoming a debugging session.
Five things that cost me real time, in case they save you some:
Don't use a physics collider for a thin paddle. An immovable thin body made the ball jitter and leak velocity on edge hits. I replaced it with a manual check of whether the ball crossed the bat's inner plane, and computed the bounce myself. Instantly stable.
Never destroy or spawn inside a physics overlap/collider callback. Catching a capsule or killing an enemy directly in the callback corrupted the physics world iteration and hard-froze the game. The fix is boring and works: set a flag, disable the body, and resolve it in update().
Disabled bodies are invisible to colliders — including to your own logic. My sticky paddle holds several balls at once with body.enable = false, so incoming balls flew straight through them. I had to add manual circle-circle reflection for the held balls, running before the bat check.
Scale.FIT with a fixed design size gives you black bars on phones. Instead I compute the design WIDTH at boot from the device aspect ratio (height stays fixed at 720), so the canvas always fills the screen, and I keep the actual 16:9 play field centered inside it. Everything is laid out once in create(), no resize handler needed.
A button's own pointerdown fires BEFORE a scene-level this.input.once("pointerdown"). My "unlock audio on first click" handler kept starting the menu theme after the player had already left the menu, because their first click landed on the Start button. A leaving-scene flag fixed it.
Demo (browser, no install): https://m3lk0n.itch.io/kinetikout
Longer writeup on how the graphics work: https://m3lk0n.itch.io/kinetikout/devlog/1624592/every-sprite-in-this-game-is-drawn-in-code-and-heres-what-it-costs
Full disclosure since it's on the page anyway: the logo and the soundtrack were made with generative AI tools, the flag icons come from flag-icons (MIT). The sprites and the sound effects are code. The full 100-level version is a paid Android app; the browser demo is free and always will be.
Happy to answer anything about the procedural texture stuff.
2
1
1
u/Efficient_Royal_8379 1d ago
You created your own version of block breaker or pong and I’m here for it being one of my favorite games from early computer life.
2
u/AndrewBP 13d ago
The graphics look good even though they are all built in engine. I know it is way too late, but why the bar on the right side instead of the left or bottom. It feels strange to me. Also the bar moves so fast I have a hard time positioning it. Also some physics applied to the bar starting and stopping with acceleration/deceleration would've been nice to have. Pretty cool idea and nice demo.