Hi
I want to create a coloring book that color an area once clicked
how can I define clickable area, I’m new to corona but I used to do it in flash by creating a button with a sliced area of the image then define the clickable area and add event to change its color once selected
example
If you’re using a single image to represent the user interface and not separating it into individual display objects that could be triggered for touch, you can create nearly invisible display objects as zones.
local buttonGreen = display.newImageRect( 0,0, 50,50 ) -- create a 50x50 rectangle buttonGreen.alpha = 0.01 -- make it nearly invisible but still touchable function buttonGreen:tapAction( event ) print( "Green zone was tapped!" ) end buttonGreen:addEventListener( "tap", tapAction )
The only downside to doing it this way is that you prevent the buttons from animating or changing a color because you’re simply defining a zone on a static graphic image.
I’ve done this in the past by making each zone a physics object. I used physics editor to get the outline of each zone.
Then when you tap that zone have another physics object created at your tap event.x and event.y creating a collision between the two.
You can then get the id of the zone tapped and fill its colour accordingly.
The only downside to this is that you will need to create many images for each zone and place them correctly in the scene rather than one main image.
You could also use masks for each zone and once tapped on that masked image fill it with colour.
I tried both ways and preferred the first as it gave better overall performance.
Hope this helps.
If you’re using a single image to represent the user interface and not separating it into individual display objects that could be triggered for touch, you can create nearly invisible display objects as zones.
local buttonGreen = display.newImageRect( 0,0, 50,50 ) -- create a 50x50 rectangle buttonGreen.alpha = 0.01 -- make it nearly invisible but still touchable function buttonGreen:tapAction( event ) print( "Green zone was tapped!" ) end buttonGreen:addEventListener( "tap", tapAction )
The only downside to doing it this way is that you prevent the buttons from animating or changing a color because you’re simply defining a zone on a static graphic image.
I’ve done this in the past by making each zone a physics object. I used physics editor to get the outline of each zone.
Then when you tap that zone have another physics object created at your tap event.x and event.y creating a collision between the two.
You can then get the id of the zone tapped and fill its colour accordingly.
The only downside to this is that you will need to create many images for each zone and place them correctly in the scene rather than one main image.
You could also use masks for each zone and once tapped on that masked image fill it with colour.
I tried both ways and preferred the first as it gave better overall performance.
Hope this helps.