Pixel coloring problem

Solar2D Android
#1

Hi, guys! I want to develop my pixel coloring on the Corona SDK.

I want to do something similar - https://play.google.com/store/apps/details?id=com.appcraft.unicorn

As pixels I think to use squares, when clicked, they will change color.

I need to use relatively large images, for example 300x300 pixels. I will have to create 90,000 squares, with which the engine will not cope.

In the future, I want to make a zoom for my image, consisting of pixels (squares).

Since the engine can not cope with so many squares on the screen, advise the best solution. I came up with just such an idea. Thank you in advance.

P.S. For example, i can enlarge the squares and draw only 50 squares on the screen. But then I lose the possibility of zoom with a pinch.

#2

This app would be easy to do with Corona - but there are already hundreds of similar apps already.

You can pixelate an image to say 50x50 and have 2,500 rects that you simply fill with a colour.

#3

I have to correct you right there. Creating 90,000 rects is nothing.

For example,

local newRect = display.newRect local pixel = {} local pixelSize = 2 local startX, startY = 20, 20 for i = 1, 300 do for j = 1, 300 do pixel[#pixel+1] = newRect( startX+i\*pixelSize, startY+j\*pixelSize, pixelSize, pixelSize ) pixel[#pixel]:setFillColor(1) end end

Adding zoom or something else on top of that isn’t that hard either.
 

#4

90000 squares on the screen at the same time plant FPS to 8-10. This is very bad. To move such a group with pixels is impossible, terribly slow.

I want all these squares to move left and right, as they will be scaled, and not all of them will be visible on the screen.

#5

in this case the detailing will suffer. 50x50 image is processed by the engine normally. but 300x300 gives FPS drawdown to 8-10.

#6

Hardware is fast these days but you really don’t want to replace each pixel on a bitmap/texture with a full display object :slight_smile:

This is what you need/want

https://marketplace.coronalabs.com/corona-plugins/memory-bitmap

https://docs.coronalabs.com/plugin/memoryBitmap/index.html

#7

Hi,

You only need to create the amount of rectangles that are visible on the screen, much like a tiled game.

When you slide your image to the left, the column of pixels / rectangles that falls outside of the screen area is moved to the right side off the screen and updated to the right colors for these pixels (by reading the color values from an array that holds all pixel colors).

Same for the other screen bounds.

#8

By the way, replacing each pixel with a full display object is okay, as long as you keep the number of pixels visible on the screen under 2000, tested on a 3 year old iPhone SE and 5 year old iPad.

#9

At the moment, these are the plugins that I use. Alas, despite the good harware, the engine can not cope with a large number of objects on the screen. For example, the Corona SDK cannot cope with drawing 3,500 objects, even if these objects are bitmaps. It will slow down and sink the FPS from each player’s action.

#10

Thank you very much. Apparently this is the only working option.

#11

https://marketplace.coronalabs.com/corona-plugins/memory-bitmap

This plugin creates squares and passes them by pixels, so it does not solve the performance problem in any way.

#12

First of all: wow! I didn’t know Corona has gotten getPixel/setPixel functionality! When did this happen??? :slight_smile:

Second: but then the problem is solved, no? If you use this plugin then you only display one single bitmap with 90000 pixels, and not 90000 image with a single color each.

#13

Are you 100% sure about that? Because from what see and read in the docs, it behaves the other getPixel/setPixel methods I’ve used in other software for the past 20 years - designed specifically to not create displayObjects but instead paint pixels in an existing texture.

#14

You create 1 memory bitmap based display object of the required dimensions and then just set/modify the pixels you want to change.

#15

Yep, that’s what I thought. That should be blazingly fast - unless the afterlying code is extremely poorly programmed.

#16

Quick chime in.  You can absolutely make an app like that with Corona and it will run fine.

Those apps very likely do not render off-screen selectable/paintable blocks.  Your game should not either.  Once you cull off-screen content there will be no issue with performance.

I think the real question here is, “What techniques should be applied to implement this?”  I’m seeing good responses above that all seem on track.

Best of luck on this.  Be sure to share in-progress  updates with us.

Also, if you get stuck, the best way to get help is to make a demo that shows the issue you’re encountering, zip it up, and share it here.  Folks will be more included to run and examine it that dig into partial code posts or just provide their own example.  i.e. It is nicer to look at and help with existing samples as long as they are small and focused.

#17

Memory Bitmap plugin does not solve the problem. Because if you make setPixel 5000 times for example, then performance will drop. Similar loss of FPS with 5000 squares on the screen and using setPixel.

#18

Thank you all for the answers! The best option is to draw one picture in parts, 1500 squares on the screen.

The Memory Bitmap plugin will most likely work in the same way, using the principle of creating squares. Because of this, performance drops. So the setPixel method is not justified.

#19

Hi Buster,

Ah, it’s a shame that the setPixel function is too slow then.

In that case I would go for only drawing the visible on-screen pixels and my wrap-around idea mentioned above. Let me know if you have any problems with that.

#20

We are doing a similar app (still a prototype). We create squares to represent the pixels and so far performance seems to be ok.

Short simple video
https://www.youtube.com/watch?v=3cwvQD6UmhM

The app also has zooming etc. but not visible in the video (recorded on simulator).