Camera Zoom to Mouse

Questions about the LÖVE API, installing LÖVE and other support related questions go here.
Forum rules
Before you make a thread asking for help, read this.
Post Reply
User avatar
grizzlyenglish
Prole
Posts: 2
Joined: Sun Aug 12, 2018 10:51 pm

Camera Zoom to Mouse

Post by grizzlyenglish » Sun Aug 12, 2018 11:01 pm

Hello,

I am trying to make a camera that can zoom in and out; but, when zooming in it zooms towards the mouse, so that you can pan the world map and zoom into the place you want to look at easily. Unfortunately, I can't quite seem to grasp how this would work. I finally was able to get the out to zoom in the center point, but if I attempt to adjust this I just the camera to spasm all over the place.

Code: Select all

function CameraSystem:set()
  local camera = self:findComponent('Camera')
  local w,h = love.graphics.getWidth(), love.graphics.getHeight()
  local dx, dy = w/2 * (camera.Scale-1), h/2 * (camera.Scale-1)
  
  love.graphics.print("Camera X: "..camera.Pos.X.." Y: "..camera.Pos.Y, 10, 25)  
  love.graphics.print("Camera Scale: "..camera.Scale, 10, 40)
  
  love.graphics.setScissor(0, 0, w, h)
  
  --Camera draw logic
  love.graphics.push()
  --love.graphics.translate(camera.Offset.X, camera.Offset.Y) --This offset is the mouse position when zooming in, otherwise 0,0 when added it spasms
  love.graphics.scale(1 / camera.Scale)
  love.graphics.rotate(-camera.Rotation)
  love.graphics.translate(-camera.Pos.X+dx, -camera.Pos.Y+dy)
  
  --Box of zoomed viewport
  love.graphics.rectangle("line", camera.Pos.X, camera.Pos.Y, w, h)
end
Maybe I don't understand; but I feel like I need to translate the camera before I scale it based on the position of the mouse, right?

Thanks for any help!

--EDIT--
Forgot to attach a .love, and had to wait for an approval since I am new here.
Attachments
game.love
(2.77 MiB) Downloaded 7 times
Last edited by grizzlyenglish on Mon Aug 13, 2018 10:07 pm, edited 1 time in total.

User avatar
mr_happy
Citizen
Posts: 83
Joined: Fri Mar 18, 2016 8:57 pm

Re: Camera Zoom to Mouse

Post by mr_happy » Mon Aug 13, 2018 8:34 pm

Can you clarify this a bit? When you zoom in, do you want the view to be automatically repositioned (or at least moved towards) to the centre of the screen as well? If not, some points around the zoom centre might disappear from view altogether. For example, if your window is 800x600 and the mouse is at 790,10 when you zoom in, whatever is to the right or above that point may disappear - possibly not what you want?

User avatar
grizzlyenglish
Prole
Posts: 2
Joined: Sun Aug 12, 2018 10:51 pm

Re: Camera Zoom to Mouse

Post by grizzlyenglish » Mon Aug 13, 2018 10:11 pm

Thanks for the reply! Yeah I would want the camera to zoom towards the place the mouse is at, so that when you zoom in it shows the portion of the map the mouse was hovering over. I found this https://www.youtube.com/watch?v=qg_z-pI ... be&t=9m37s which illustrates the idea.

Hopefully I'm explaining myself enough.

User avatar
mr_happy
Citizen
Posts: 83
Joined: Fri Mar 18, 2016 8:57 pm

Re: Camera Zoom to Mouse

Post by mr_happy » Tue Aug 14, 2018 9:59 am

Well I've never used a camera library but this code does what you want (I think - test it by adding some more images) and is pretty self-explanatory. If you're committed to using a library I'm afraid I won't be able to help further.
supcom.jpeg
supcom.jpeg (9.68 KiB) Viewed 230 times

Code: Select all

function love.load(arg)

  love.graphics.setBackgroundColor(0, 0, 0, 255)
  supcom = love.graphics.newImage('supcom.jpeg')

  --zoom factor
  zoom = 1.0

  -- origin and camera at centre of screen
  oX = love.graphics.getWidth()/2
  oY = love.graphics.getHeight()/2
  cX = oX
  cY = oY
  
  -- image position - relative to centre of screen/world
  iX, iY = -300, -300

end

function love.draw()

  -- calculate draw position of image
  local dX = oX + (oX-cX) + iX
  local dY = oY + (oY-cY) + iY
  
  -- draw with zoom factor (origin at centre of image)
  love.graphics.draw(supcom, dX, dY, 0, zoom, zoom, supcom:getWidth()/2, supcom:getHeight()/2)

end

function love.update(dt)
  
  -- move camera to mouse position
  cX, cY = love.mouse.getPosition()
  
end

function love.wheelmoved(x, y)
  
  if y > 0 then
    zoom = zoom + 0.1
  elseif y < 0 and zoom > 1.0 then
    zoom = zoom - 0.1
  end  
  
end

User avatar
mr_happy
Citizen
Posts: 83
Joined: Fri Mar 18, 2016 8:57 pm

Re: Camera Zoom to Mouse

Post by mr_happy » Tue Aug 14, 2018 10:03 am

Actually, I've just realised that doesn't do quite what you want! You don't want any movement of the camera until the mousewheel is scrolled - shouldn't be too hard to fix that though :D

Post Reply

Who is online

Users browsing this forum: mejonat and 4 guests