To make my life easier, I came up with the idea of creating the levels for my Idle-Breakout from pixel art images, and the craziest part is that it actually works!
It all started from a tutorial I published on my youtube channel about how to create a very basic Breakout game. At the end of the video, I encouraged viewers to customize it as a way to deepen their learning, but I received a few comments from people who simply lacked ideas to experiment with.
So I decided to lead by example.
The idea came to me pretty quickly : modernize classic arcade Breakout with a versus mode and remove the paddle to turn it into an idle game!
It was only supposed to be a small creative exercise, material for a new video. But I wanted a visually appealing level, and the way levels were created in this simplified version was incredibly tedious... A huge 2D array of integers that had to be filled manually, where each integer represented a specific color. Not only was it time-consuming to create, but it was also extremely difficult to visualize the final result, if not outright impossible once the level reached a certain size.
"It would be so much easier to draw my image in pixel art and interpret it as a level."
An idea mostly born from laziness, I have to admit. But in the end, I absolutely love the result!
Wondering how it works? It's actually pretty simple. I have two pixel art images : one for the background and one for the foreground. The code loads both images and creates a brick for every pixel in the image. If a pixel is transparent, it gets ignored. Pixels located along the edges of the foreground generate indestructible blocks.
With SRP optimization, it works flawlessly for a level like this one, which contains roughly 3,000 cubes. A steady 120 FPS, even though each cube has a different color applied using material.SetColor().
But I quickly came back down to earth when I tried building a larger level. At around 5,000 cubes, I was already down to 30 FPS. And that's without any gameplay at all, just rendering the cubes.
Using a Material Property Block? Bad idea, the result was even worse... 9 FPS. Vertex colors? Well, I'll spare you the days of trial and error... Eventually, out of options, I made a post on Reddit and someone suggested using RSUV combined with GPU Instancing. Completely new territory for me, I had never even heard of it before. After a bit of reading, a few lines of code, and a brand-new shader with RSUV support, I suddenly had a completely new way of changing the colors of my bricks!
Boom ! 25,000 bricks, still running at 120 FPS. Wonderful. That's my solution. More than enough to create levels up to 128x128 pixels, although I doubt I'll ever go beyond 64x64 anyway, so there's no need to optimize further than that.
But... I ran into another small problem... My visual feedback tool, Feel Craft, the one I use to create all the little animations you can see in my videos, didn't yet support color animations driven by RSUV... No matter, I pushed an update to my tool right away!
The current designs are cute, but I don't think they're particularly satisfying to play. I'll need to find an aesthetic that allows the ball to bounce around and enter bounce tunnels... I'll give it some thought over the next few days!
In the meantime, I hope you enjoyed the read :)