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 [import]uid: 16142 topic_id: 21125 reply_id: 321125[/import]
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 [import]uid: 13553 topic_id: 21125 reply_id: 83571[/import]
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.
[import]uid: 108660 topic_id: 21125 reply_id: 83576[/import]
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.
[import]uid: 13553 topic_id: 21125 reply_id: 83579[/import]
i think its good enough approach for masking every part separately
thanks for help)
too bad i cant outline all this in one image [import]uid: 16142 topic_id: 21125 reply_id: 83582[/import]
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 [import]uid: 13553 topic_id: 21125 reply_id: 83584[/import]
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.
[import]uid: 103182 topic_id: 21125 reply_id: 83591[/import]
+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. 
[import]uid: 9747 topic_id: 21125 reply_id: 83596[/import]
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 [import]uid: 13553 topic_id: 21125 reply_id: 83602[/import]
That might be a lot of individual white pieces, plus what would be the best way to position them precisely? [import]uid: 8780 topic_id: 21125 reply_id: 83617[/import]