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.)
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.
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:
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
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.
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.
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?
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?
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")
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.
