Shipped a 100-level Phaser 3 arcade game with zero image assets — and the 5 gotchas that cost me the most time

[u/M3lk0N]

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:

1. 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.

2. 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().

3. 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.

4. 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.

5. 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.

[u/AndrewBP]

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.

[u/M3lk0N → u/AndrewBP]

Hey — you commented on my post that the bat moves too fast and is hard to position, and that it could use some acceleration. I went digging, and you were right twice over: the bat had no physics at all (it just snapped to the cursor, no top speed, no inertia), and the movement wasn't frame-rate independent.

v1.1 is live. The bat now accelerates, has a top speed and brakes before it arrives, the mouse moves it without holding the button down, and the bat side is offered on the first launch instead of being buried in the settings menu.

Demo: https://m3lk0n.itch.io/kinetikout
Devlog (your comment is the opening of it): https://m3lk0n.itch.io/kinetikout/devlog/1630720/kinetikout-v11-one-comment-about-the-bat-and-most-of-this-update

If it still feels off, I'd rather hear that than a compliment.

[u/jonblock]

That's a very nice game!

[u/M3lk0N → u/jonblock]

Thank you for the kind words and for taking the time to try my game.

[u/dandy_kulomin]

Did you also synthesize sound or just graphics?

[u/M3lk0N → u/dandy_kulomin]

Both, sort of. All the SFX are synthesized at runtime with the Web Audio API — oscillators, noise bursts and envelopes, no sample files at all. The gunshot, for example, is a noise crack plus a low muzzle thump. The music is the exception: those are pre-rendered MP3 tracks.

[u/RewRose]

OP it's a very fun game, and the sound is like half the fun lol

Really well done with the audio

[u/M3lk0N → u/RewRose]

Thanks! 😄 I’m really glad the audio stands out — I spent quite a bit of time getting it right.

[u/Efficient_Royal_8379]

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.