How to zoom and move the orthographic camera with a mouse?

Questions
#1

I’m trying to figure out how to use the orthographic camera for a 2D game so that I can click and drag with the mouse to move the camera around and so that I can zoom in and out with the scroll wheel. I’m eventually going to need to make these touch controls, but I’m trying to figure out how to do it with the mouse first.

I have these dependencies:

I’ve also taken a look at this:

I was able to do the drag to scroll with the normal camera, but how do I incorporate that into the orthographic camera? I’ve also been completely unsuccessful with trying to figure out how to zoom. Also, I’m not using a tilemap for the background if that’s relevant.

Additionally, are there any tutorials on how to use the orthographic camera for things like this? I know the github page explains it a little bit, but I prefer tutorials if that’s a thing that exists.

(P.S. My camera.script isn’t saving anymore and I don’t know why. Every other file saves fine though.)

#2

If you download the Orthographic camera project from GitHub and open it in Defold you’ll find a bunch of examples, among them is a drag-to-scroll and zoom example:

Open the project and build and run it. There will be a menu where you can chose from the different examples.

4 Likes
#3

Thank you, that helped me a lot. I was able to successfully implement the click and drag system, however I’m still having trouble with the zoom mechanic. I see that the dragtoscroll script also includes zoom, but I’ve found that, instead of zooming in or out, it changes the speed of the dragging. There aren’t any errors and I can see that it’s changing the zoom value, so do you think this is a problem with my map image or the camera object itself?

Here are the settings of the camera if that’s relevant:

Screenshot 2024-06-09 195545
Screenshot 2024-06-09 195545308×661 9.5 KB

I didn’t really change anything about the code. I also tried using the separate zoom code but it was giving me an error saying it couldn’t find “zoom” so I just kept it like this:

function on_input(self, action_id, action)
	-- print(msg.url())
	if action_id == hash("touch") then
		-- store the position where the pressed action happened
		-- also store the camera position at that time
		if action.pressed then
			self.pressed_pos = vmath.vector3(action.x, action.y, 0)
			self.camera_pos = go.get_position(CAMERA_ID)
		elseif action.released then
			self.pressed_pos = nil
		end
	elseif action_id == hash("zoom_in") then
		local zoom = camera.get_zoom(CAMERA_ID)
		zoom = math.min(4, zoom + 0.05)
		camera.set_zoom(CAMERA_ID, zoom)
		print(zoom)
	elseif action_id == hash("zoom_out") then
		local zoom = camera.get_zoom(CAMERA_ID)
		zoom = math.max(0.2, zoom - 0.05)
		camera.set_zoom(CAMERA_ID, zoom)
	elseif action_id == nil and self.pressed_pos then
		-- drag the camera
		-- base all calculations on the current mouse/touch position
		-- relative to the position when the pressed action happens
		-- also take the zoom into account
		local zoom = camera.get_zoom(CAMERA_ID)
		local action_pos = vmath.vector3(action.x, action.y, 0)
		local camera_pos = self.camera_pos + (self.pressed_pos - action_pos) / zoom
		go.set_position(camera_pos, CAMERA_ID)
	end
end
#4

That’s the built-in Defold camera component, not the camera from the Orthographic library.

#5

What I did was I copied the the orthographic code and created a new code file, are you saying I’m not supposed to attach it to a camera component? It doesn’t let me change the default orthographic code.

#6

The Quick Start instructions state that you should add the orthographic/camera.go to your collection. This game object contains the camera.script with configuration settings for the camera.

Note that Defold-Orthographic is a script based replacement for the Defold native Camera component. It does not use a Camera component.

2 Likes
#7

Ah, I see. Does this look right, then?

image
image305×1251 15.6 KB

It’s still changing drag speed instead of zooming though. The only thing that’s different from before is that it’s starting at a different place.

#8

Are you using the render script provided with Defold-Orthographic?

#9

You should be using the camera object directly from Orthographic rather than making a copy like you seem to have done here.

#10

Are you saying to do this? Because it doesn’t let me save changes in the default camera.script under orthographic. Or are you saying to use the orthographic object but make a separate script?

image

And I am using the orthographic render script.

#11

You can’t change files that are part of read only dependencies. What kind of changes do you need to make?

#12

I was just a bit confused as to what Potota is saying because I need to have a separate script component in order to change the camera’s controls. Are there specific calls to other scripts/objects that I might be forgetting to make that could be causing my issue?

#13

I don’t really understand this by the way. Could you try to explain it some more?

#14

In the link you provided earlier, there are two different examples for dragtoscroll and zoom but the dragtoscroll example includes some zoom code. Is it enough to just use what’s in the dragtoscroll example or am I supposed to combine them in some way?

If I just use what’s provided in the dragtoscroll example, scrolling the mouse wheel in doesn’t change the zoom but rather makes it so that when I click to drag the screen, it moves slower. When I scroll out, instead of zooming out, it makes it so that the dragging is faster.

If I try to use the code from the zoom example, it says that there is a problem with this line and that it can’t find “zoom” anywhere.
go.set_position(action_world_pos, "zoom")

#15

If this is enough indeed, you can go with it :wink:

Do you have your game object named “zoom” with script component “zoom.script”?

1 Like
#16

I gave up on trying to use the orthographic camera and found a way to do it with the normal camera and the 3D render script from the Perspective Parallax example. It still needs a bit of tweaking but it at least kind of works.

1 Like