US Map with each state as a unique touch region

Games
#1

This has been a bit of a conundrum for me. I understand how to pinch and zoom around a single map image. I know I can make points touchable, but how can I make each state its own “touch region”?
I good example of what I’m really trying to do is the new iPad app “270 to Win”, which is also a website - http://www.270towin.com/
I want each state to be touchable and for the color of the state to be able to change based on input from other portions of the code. So each region needs to be able to shift between at least 3 colors.

Any suggestions? Should I try a tiled map with Lime?

Thanks for any advice,
Ben [import]uid: 45104 topic_id: 18846 reply_id: 318846[/import]

#2

Off the top of my head, have 50 objects (shaped like the 50 states) and put them together like a jigsaw puzzle to make the map. Then you can touch, color, etc., each state individually.

Doesn’t sound like a particularly clever way to handle it, I know. :slight_smile:

Jay
[import]uid: 9440 topic_id: 18846 reply_id: 72601[/import]

#3

Thanks for the reply Jay! I’m worried I’m going to end up with 50 objects that don’t really want to fit together well after much moving around. Mind you, I haven’t tried it, so I can’t knock it too much.

How do I make each object the correct unique shape and not just a bunch of rectangles? I think I saw a tutorial talk about it once, but I’ve never done it.

Thanks! [import]uid: 45104 topic_id: 18846 reply_id: 72604[/import]

#4

I know you can put everything in one group and move the group to make everything move around, but not sure if that would translate to zooming in and out.

As far as not being rectangles, unless you’re talking physics objects, the display objects (each state) will only take touch events on the actual object (unless I’m thinking something weird). So if you touch outside the bend of California (on the right side) Nevada is what will actually get the touch event. Know what I mean?

I’m sure there’s got to be a cool way to do what you want – hopefully someone more clever than we will come along. :slight_smile:

Jay
[import]uid: 9440 topic_id: 18846 reply_id: 72606[/import]

#5

create all state as a separate image and apply them physics body and put together (more likely kinematic or static with the perfect shape) and on the screen’s touch event add small object (dynamic) so you can get collision event and you can know which state has been touched
:slight_smile: [import]uid: 12482 topic_id: 18846 reply_id: 72638[/import]

#6

Hey guys,
sorry to be posting in your thread but it`s about the same subject.

So @Jay I like your idea and it was the same as mine. Although I do not know if it`s a good way to go for doing something like this @benny is looking forward. But I would go like this.

@hgyvas123 would you really think it would be necessary to use physics on this kind of project? Would not have only each image that make part of the map its own name and so each one with one eventListener for “touch” or even “tap”(if we`re not interested in the stages/phases of the event) attached to it?

Thanks guys,
Rodrigo. [import]uid: 89165 topic_id: 18846 reply_id: 72712[/import]

#7

OK, so I’ve put together a working demo using PhysicsEditor (which is awesome!). Here’s a link to the lua files if anyone is interested - http://db.tt/3fTZrNaM
The states do fit together, but the touch event doesn’t work well on the borders where they overlap. Which ever image was touched last remains active until you click on the other image and outside the lines of where they overlap. I’m worried that this doesn’t solve my underlying issue of making sure each image has a unique touch region.

What am I missing here? I’m new to the physics engine so there’s probably something I’m overlooking. [import]uid: 45104 topic_id: 18846 reply_id: 72767[/import]

#8

@hgvyas123 can you expand a little more on adding this small object to track collisions? I think I see where you’re going with this. If I use that to track collisions, I will only get touch events over the regions of the physics bodies instead of the image area right? [import]uid: 45104 topic_id: 18846 reply_id: 72768[/import]

#9

@Rodrigo RSCdev

hi actually by default images are rectangular and currently there is no way to avoid transparent area of the image when there is touch event on that so it is a workaround for that as with physics you can define your custom shape there may be some other work around also
@benny.gortez

right

here’s the small example to show that replace it with your main.lua

[lua]print( “We’ve made it to the beginning” )

system.activate( “multitouch” )

display.setStatusBar( display.HiddenStatusBar )

local physics = require “physics”
physics.start()
physics.setGravity( 0, 0 )

local physicsData = (require “statePhysics”).physicsData()

local ILstate = display.newImage( “IL.png” )
ILstate.x = 326
ILstate.y = 386
ILstate.myName = “ilstate”

physics.addBody( ILstate,“static”, physicsData:get(“IL”))

local MOstate = display.newImage( “MO.png” )
MOstate.x = 230
MOstate.y = 452
MOstate.myName = “mostate”

physics.addBody( MOstate,“static”, physicsData:get(“MO”))

local circle = display.newCircle(0,0,5)
physics.addBody(circle)
local function onCollision(e)
print("touched state is "…e.other.myName)
end
circle:addEventListener(“collision”,onCollision)
local function onTouch(e)
circle.x = e.x
circle.y = e.y
end
Runtime:addEventListener(“touch”,onTouch)[/lua]
[import]uid: 12482 topic_id: 18846 reply_id: 73159[/import]

#10

@hgvyas123

Hi! Thanks for the reply. I got to understand why you`ve mentioned to use physics. :slight_smile:

PS: btw if in my app the pieces that I need are just squads or rectangles (even they`re stick to each other) it would allow me to go without using physics right?
Cheers!
Rodrigo. [import]uid: 89165 topic_id: 18846 reply_id: 73163[/import]

#11

of course for the rectangles there is no need of physics

:slight_smile: [import]uid: 12482 topic_id: 18846 reply_id: 73166[/import]

#12

Thanks! :slight_smile: [import]uid: 89165 topic_id: 18846 reply_id: 73168[/import]