Gui.set_scale origin

Questions
1

I am creating a giant map and am trying to make sure the zooming via set_scale is focused around the center of the visible map.

My GUI structure looks like this:

- map_container
    - map_contents

I have a position, and a scale. I move the map_contents according to a scaled position, and apply a scale to the map container. I expect to what I set out to achieve, but unfortunately I am still seeing the zoom focus directly on 0,0 on the map contents.

function(position,scale)		
		local scaledPosition = position * (1/scale)
		gui.set_scale(map_container, vmath.vector3(scale))
		gui.set_position(map_contents, scaledPosition)				
	end

If I do the same thing in the editor, it has the visual effect I am looking for.

1 Like
2

Can you create a minimal example and share it?

2 Likes
3

Do you want to see the code or the effect?

I can try to create a minimal code example but it might take some time to isolate everything. I have a lot of logic, panning/zoom velocities, procedural generation etc. I’ll get to it! :smiley:

4

zoom_example.zip (201.8 KB)

1 Like
5

I’ll take a look this evening or tomorrow morning.

1 Like
6

OK cool, thanks. Let me know if something is wrong with my example or anything doesn’t make sense.

Cheers

7

Why are you scaling the position? Scaling the position seems to counter-act the zoom and gives you the wrong result. If I use the position directly I get the correct result:

	local scaledPosition = position * (1/scale)
	gui.set_scale(map_container, vmath.vector3(scale))
	gui.set_position(map_contents, position)	-- use position here instead of scaledPosition
8

I scale the position because I am moving the contents of the map that are inside the container. If I don’t scale the position, the pan effect will be much much slower because of the scale.

I do not know what you mean you get the correct result, the issue I have isn’t with the panning but the zooming - more specifically, that the origin of the scale doesn’t seem to be the center of the contents.

Hope this video clears it up.

9

Just to add more information here that may clarify my issue.

In this first screenshot, in the editor I have manually positioned the map contents node.

16
163156×2128 623 KB

Now when I scale the map container, pay attention to the node that was in the center of the screen.

Spoiler alert, its perfect… it remains in the center - which is exactly what I am after.

50
503244×2216 731 KB

However if I do the same programatically, when the map container is scaled, the result is different, it still seems to scale toward the center of the map contents.

I could be missing something entirely here - but to me this approach should work (using two layers, moving the contents, scaling the parent) - any additional help would be massively appreciated.

Cheers!

10

I understand what the problem is and by not applying the scale to the position I get the correct results:

zoom

The problem with applying the scale to map content position is that the map content will move around as you zoom. The map content should stay in the current position while zooming. I think maybe you need to separate the two actions panning and zooming. You can apply the scale to the position while panning, but not while zooming.

5 Likes
11

Ah yes this makes sense! Cheers. Will try it out.

12

Damn I feel stupid, thanks for the heads up there though - it was driving me crazy.

The solution:

Rx.Observable.zip(map_controls.mapPosition(), map_controls.mapScale())	
	:tap(function(position,scale)		
		local scaledPosition = position * (1/scale)		
		gui.set_position(map_contents, scaledPosition)
	end)
	:subscribe()

	map_controls.mapScale()
	:tap(function(scale)				
		gui.set_scale(map_container, vmath.vector3(scale))		
	end)
	:subscribe()

Have some work to do to make panning feel right now - but the scaling works as intended. Thanks.

Edit: Will share the full solution in the form of an example tomorrow. Essentially what I needed to do was to scale the inputs and pan the map absolutely. Thanks @britzl for the fresh set of eyes.

4 Likes