Camera Zoom to Mouse

[grizzlyenglish]

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.

[mr_happy]

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?

[grizzlyenglish]

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.

[mr_happy]

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 (9.68 KiB) Viewed 4332 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

[mr_happy]

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