Post

I recently built playable game ads at work, and I fell in love with the challenge of creating a polished slice of a game that fits under 5 MB. Here are my tips for a completely free 2D workflow, whether you are making a playable ad or HTML5 game. 🧵 1/9

Use Phaser 4.x. It is a mature web game engine with built-in physics, particle, tween, and post-processing systems, so you can accomplish a lot without adding heavy dependencies. 2/9

Use bitmap fonts made from your favorite free Google Fonts. SnowB.org can convert them for you. Include the Latin Extended character set if you need broader language support, and use one font throughout the project to keep things small and visually consistent. 3/9

Use WebP instead of PNG for textures. WebP files are generally smaller, have broad browser support, and every kilobyte matters when the entire game must fit under 5 MB. 4/9

Get comfortable with command-line tools such as free-tex-packer and ImageMagick. I use a script that converts and packs each texture folder into its own atlas. Automation keeps the workflow fast and repeatable. Powers of 2 not necessary. 5/9

Affinity is a great free alternative to Photoshop and Illustrator. I gave GIMP a serious try, but it was not for me. And unlike Adobe, I especially like being able to switch between vector and pixel workflows in the same application. 6/9

Generate sound effects instead of storing lots of audio clips. Procedural audio can save a surprising amount of space. For music, I use mono OGG Opus at 56 kbps. 7/9 🖖

My technical stack is TypeScript, Vite, and Phaser. And Node.js to bundle to a single HTML file. I also use a GitHub Action to deploy automatically to itch.io, which makes sharing and playtesting new builds quick and painless. 8/9