Efficient way of rendering pixels to reduce lag

I’m creating a game involving pixel art, the players can draw on their physical canvases (made out of parts, 3D) with different resolutions. I’ll take 16x16 since it is a pretty simple example. Players should be able to see what they have drawn on their UI if they want to in order to save the drawings, rename, see other players drawings etc… I was wondering if it was possible to create a rendering system where pixels that are next to each other or of the same color are “merged”. You see, if I made a frame in the UI for each individual pixel, that would be 256 frames. And the amount of pixel’s I’d have to render would increase drastically by resolution. Could there be a way to reduce this number by merging sections? Here is a visual representation of what I am trying to achieve:


By sectioning and merging the pixels, a LOT of performance will be saved. From 256 frames, we have made that number to 20-30. And this will be even more efficient at bigger resolutions such as 64x64, 128x128.

This is a problem I have been thinking for a while now. Thanks in advance <3

Instead of a GUI for drawing pixel arts, why don’t you use parts instead?

I’ve tried to make something similar to having many pixel GUIs like that, but it lagged a lot, so I scraped it.

Hello there. I’m already using parts for drawing. However, for rendering I’ll have to use frames cause I want players to be able to view their drawings on the UI. 16x16, 32x32, 64x64 doesn’t seem to lag. When you get to 128x128 the game freezes for a second to render all 16k pixels and I don’t think it is a good practice in general.

What you’re looking for would be the greedy meshing algorithm: Meshing in a Minecraft Game – 0 FPS

1 Like

Hey, thanks for your reply. What you linked me is really interesting and useful but complex. I googled of anything 2D related of a greedy algorithm and there were barely any results and the wikipedia on the algorithm was pretty vague. Do you think you know of any useful article which can breakdown the concept in simple terms? Most of the articles seemed to be using money as an example too which kinda confused me.

You’d be in luck then! Someone made a tutorial on it on DevForum: Consume everything - how greedy meshing works

2 Likes