Skip to main content

Indie game storeFree gamesFun gamesHorror games
Game developmentAssetsComics
SalesBundles
Jobs
TagsGame Engines

Idle Breakout Anyone ?

A topic by Coding Mojo created 27 days ago Views: 93 Replies: 2
Viewing posts 1 to 3
(1 edit)

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 :)

(1 edit)

My Idle Breakout game welcomes a second player !

Yeah, I thought it would be fun to have a versus mode. So here it is, a second player support (local).
But there is more :

1 : Power Bars

Brick destroyed now fills a power bar, once the bar is full, player can consume it to trigger it's ball special ability. For now, abilities are not integrated yet, but it's my next step !

2 : UI

Ui is my nightmare. I tried to avoid this step for a while, but now, it's time to start. BUT, thanks to this awesome youtube tutorial , it turned to be pretty simple to get started. So, because I like to work the game feel as the game goes, I had to make a few update to my Feel Craft tool so it now supports animating some UI components. Also, as the game feel gets more intensive, I had to do a performance pass on it.

This is how it looks so far.

Thanks for reading :)

I never thought balancing a scoring system could be this difficult.

In my complete innoncence, I figured giving one point per brick would be more than enough. After all, every part of the level would be worth the same amount of points. It's also incredibly simple to implement. From there, it's up to you to launch your balls well and squeeze out as many points as possible...

I was so wrong...

Idle games don't have that many player actions to begin with, so if your score only goes up one point at a time, it quickly becomes boring. Even worse, because my game is competitive, it's almost impossible to come back once you're behind. You can tell who's going to win way too early. No comeback. No suspense. You just clench your butt and wait for the match to end.

Clearly, that wasn't working.

To make things more exciting and keep the outcome less predictable, I started looking for a way to give bricks a wider range of point values. I wanted to keep the system simple and make it fit naturally with the game's pixel art aesthetic, so now each brick is worth points based on its color.

Colors are stored as four RGBA channels ranging from 0 to 255. The score is simply the sum of the first three channels.

White = 255 + 255 + 255 = 765 Black = 0 + 0 + 0 = 0

I made one exception for black so it's still worth 1 point. Ideally though, I just wouldn't use pure black in my levels. That means every brick is worth somewhere between 1 and 765 points.

The result feels so much better, both visually and emotionally. But the comeback problem isn't completely solved yet. Around halfway through a match, one player still tends to pull ahead. I'm hoping that adding random power-ups next will help keep games unpredictable until the very end.

Another issue with the previous version came from the level design itself. Pixel art makes for beautiful levels, but it also creates very few tunnels where balls can get trapped and bounce around in long chains. Personally, that's one of the most satisfying things to watch in a Breakout game.

So I added a power meter that fills up as your ball destroys bricks. Once it's full, it activates a temporary ability that lets the ball pass straight through bricks. This naturally creates new tunnels, kicks the action back into high gear, and adds another layer of unpredictability since your opponent can take advantage of those tunnels too!

Now I'm still debating one thing: should this power activate automatically, or should players decide when to use it?

What do you think?