Draw a route on the map

Questions
#1

Hi,

I want to implement a simple mechanic to draw a route while user holding left mouse button or tapping on the screen. To illustrate what I mean - here is the image.

map
map.png300×830 377 KB

The user should be able to draw only on roads areas, and not everywhere.
I am not sure what the right approach to implement it, I guess I need to create a mask for the map so the input will be only available on the roads location or something. I’ve implemented a simple route drawing via factory spawning of “path pellet” game object on mouse click and hold, so it kind of draw a path but I don’t know how to restrict object spawn area so I can spawn (draw) “path pellet” objects only on the road areas?

here is how I can draw on the map now
route_path

#2

I’m not really on top of touch input, but I’d do something like this:

Add several physics objects in a special Group, say “Road”, and then every time user input is detected, you create/move a physics object at/to the position of the input (on-screen). This physics object should have mask “Road”. After that, it’s immediate - if collision is detected, then draw the square. Otherwise, don’t. Furthermore, this allows you a great deal of control for, say, having the squares always appear at the center of the nearest road, rather than at the exact position of where you touch, which might or might not be preferable.

#3

You’d want to fill along the roads so you should probably not map input to drawing 1:1 at all. A quite simple approach that may work for you depending on how exact you want this to be is to create image pieces corresponding to the road segments. Divide the road snippets into 3, for instance, and put these in separate nodes (or sprites). Then disable and enable them as the player draws. With 3 images per the 18 road snippet you’ll get 54 small images. You can fade the images in to make it look smoother, and use smaller segments if you want to allow for greater visual precision.

c8d8f916a0514f0232a99614ef74d28e65a92e93

You could also do an advanced solution with 18 pre-drawn segments and a special shader that takes a “length” scalar and “orientation” vector as uniforms (should work as long as the road segments are pretty straight) and renders a road that responds on the pixel level.

1 Like
#4

Thanks, I like this approach, so I don’t need to use physics and collisions here at all? And I need to implement something like https://github.com/britzl/publicexamples/tree/master/examples/click_game_object to detect that user clicks on the particular segment of the road to show it, right?

btw the example above works when I click on the image but not in the situation when I keep left mouse button pressed (or probably when I use touch and drag with a finger?) and hover over the object, how to handle this kind of event?

#5

I think I figured out how to detect mouse “hover-over” object event, I use something like this in my input function

if action_id == hash("touch") and action.repeated then
    local pos = go.get_position("seg1") -- one of the road segments on the map
    local distance = vmath.length(vmath.vector3(action.screen_x, action.screen_y, pos.z) - pos )
    if distance < 10 then msg.post("seg1", "enable") end
end

thanks all for your help!

#6

Great! Yes, that works fine as long as you don’t move the camera.