Increasing Touch Detection Area using Containers

Solar2D Advanced Graphics
#1

Hi all,

first time poster!

I have a question regarding Containers in Corona and was hoping someone would be able to help out!

I am developing a game in which I have several display objects (Images) that respond to user touch via touch listeners. It works great, the only issue is that I would like to increase the area in which the touch listener responds, making it greater than the bounds of the image. 

I figured I would do this with containers, making a separate container for each image with bounds exceeding those of the image, please see the below code for clarification.

First I initialize both the image display object and its associated container, notice that I increase the bounds when creating the container:

[lua]self.image = display.newImageRect(image, width, height) --this is the display object that will appear on screen
self.container = display.newContainer( level_parent:get_group(), width + 100, height + 100 ) --create container to extend accuracy of bounds
[/lua]

I then add the necessary touch listener to the container:

[lua]self.container:addEventListener(“touch”, touchListener) – touch event listeners[/lua]

Here is the external code which calls this creation, as well as inserting the image as a child of the container and setting the necessary transforms:

[lua]block_obj = block.new(level_init, image, data[i][j], x, y,theta, i, j, r, rotation, is_block, width, height) – create new block object
block_container = block_obj:get_container()
block_image = block_obj:get_image()
block_container.x = x; block_container.y = y
block_container.rotation = rotation
block_container:insert(block_image, true)
level_group:insert(block_container)
[/lua]

When I run the code, these changes are not reflected; the user touch still only works within the bounds of the display image.

Thank you for any information you can provide.

Regards,

Augustino

#2

It appears when I pasted the code, it did not show up very well lol here is clearer code:

[lua]self.image = display.newImageRect(image, width, height) --this is the display object that will appear on screens[/lua]

[lua]self.container = display.newContainer( level_parent:get_group(), width + 100, height + 100 ) --create container to extend accuracy of bounds[/lua]

[lua]self.container:addEventListener(“touch”, touchListener) – touch event listeners[/lua]

[lua]block_obj = block.new(level_init, image, data[i][j], x, y,theta, i, j, r, rotation, is_block, width, height) – create new block object[/lua]

[lua]block_container = block_obj:get_container()[/lua]

[lua]block_image = block_obj:get_image()[/lua]

[lua]block_container.x = x; block_container.y = y[/lua]

[lua]block_container.rotation = rotation[/lua]

[lua]block_container:insert(block_image, true)[/lua]

[lua]level_group:insert(block_container)[/lua]

#3

You will need to place another object in the container.  Place an object in the container that is the size you need and set its alpha to zero.  Because the object is zero alpha you will need to change its .isHitTestable parameter to true.  

[lua]

object.alpha = 0

object.isHitTestable = true

[/lua]

You might need to place the event listener on the invisible object - try it both ways.

#4

Or simply use a larger png with a larger transparency area.

#5

In general, I avoid active transparencies in graphics files (for hit/touch purposes) because I prefer to make size/aspect ratio alterations with numbers and code rather than restructuring them in graphics programs.

#6

It appears when I pasted the code, it did not show up very well lol here is clearer code:

[lua]self.image = display.newImageRect(image, width, height) --this is the display object that will appear on screens[/lua]

[lua]self.container = display.newContainer( level_parent:get_group(), width + 100, height + 100 ) --create container to extend accuracy of bounds[/lua]

[lua]self.container:addEventListener(“touch”, touchListener) – touch event listeners[/lua]

[lua]block_obj = block.new(level_init, image, data[i][j], x, y,theta, i, j, r, rotation, is_block, width, height) – create new block object[/lua]

[lua]block_container = block_obj:get_container()[/lua]

[lua]block_image = block_obj:get_image()[/lua]

[lua]block_container.x = x; block_container.y = y[/lua]

[lua]block_container.rotation = rotation[/lua]

[lua]block_container:insert(block_image, true)[/lua]

[lua]level_group:insert(block_container)[/lua]

#7

You will need to place another object in the container.  Place an object in the container that is the size you need and set its alpha to zero.  Because the object is zero alpha you will need to change its .isHitTestable parameter to true.  

[lua]

object.alpha = 0

object.isHitTestable = true

[/lua]

You might need to place the event listener on the invisible object - try it both ways.

#8

Or simply use a larger png with a larger transparency area.

#9

In general, I avoid active transparencies in graphics files (for hit/touch purposes) because I prefer to make size/aspect ratio alterations with numbers and code rather than restructuring them in graphics programs.