Hi community

Does anyone know how to do coloring book gameplay? Theres a picture and parts of it needs to be filled with a chosen color
seems easy ok, but how can i fill only white parts and restrict lines from being filled?

Or i need to place all little things on a screen separately and create image from them?

any help is appreciated

Hey Darkconsoles.

You can try to do it with masks. use the approach demonstrated by John Beebe here -
http://developer.anscamobile.com/code/puzzleapp

Basically, create the outlines of the drawings you want to "color" in them as a mask images and when the user taps the part, fill it with the necessary color and mask it with an image.

I don't think you can do it in any other way if you don't want to stick to rectangles and circles only.

BR,
Shahar Zrihen
iDevelop - creative technology

I havent spotted any useful image manipulation libraries in Corona, because it doesnt make use of some of the external libraries you can get for Lua.
Things like flood fill and 2D graphics arent available.

But coloring books are essentially simplistic shapes.

I'm hazy on tap detection on irregular shapes, but if Corona respects the shape of a masked image, you could create a bunch of shapes representing the inner white area of the pictures, and change the fillcolor on Tap events.

This limits the pages to those you prepare in advance, unlike some apps which have full access to gfx , and can make use of any solidly bordered black and white images.

Another option to consider is using physics in order to detect the touching.

It's explained in many places around the forums and in the "share your code" area of the site.
you give physics attributes to the pieces your draw on and then you can relate to non-regular shaped pieces.

i think its good enough approach for masking every part separately
thanks for help)
too bad i cant outline all this in one image

Well, you can do it with one big image and hide shapes behind it in the empty places.

When the user clicks on a section, paint the shape behind it and the mask will still apply and hide the rest of it.

Shahar

Hi!
I would not use a bitmap mask, just because it's not that userfriendly to work with in my opinion.

The easiest way would be to do the following :

* Create all pieces of the figure and make them completely white ( images )

* then you can color each peace by using :setFillColor function ( works on images )

* And finaly have a overlay image that defines the drawing areas, outlines.

+1 on marceloblanco's suggestion. Masks are a huge nuisance and possibly not even "proven" to work properly on all devices. Construct your figure from individual white pieces. Each piece will have a tap listener. When tapped, "piece:setFillColor(R,G,B)" fills that piece in to whatever color you want. The user could even choose from a palette of colors before tapping on a piece, to paint the figure creatively. :)

I didn't know that images can be filled with color.

Since that is possible, I would go with marcelblanco's method as well.
Image masks are a huge nuisance and should be used only when completely necessary.

so, +1 marceloblanco :-)

That might be a lot of individual white pieces, plus what would be the best way to position them precisely?