Scale camera using the mouse cursor as an origin

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
8bit
Prole
Posts: 3
Joined: Fri Jan 05, 2018 10:49 pm

Scale camera using the mouse cursor as an origin

Post by 8bit »

Here is my code: https://pastebin.com/raw/nN3p2GSp
I can't figure out a way to zoom in, using the mouse position as the origin instead of (0,0).
I've been trying to add/subtract mouse values from the transform, as suggested by other people, but nothing seems to work properly.

Can someone that has experience doing this help me? Thanks!

PS the zoom code starts at line 40-51
game.love
(2.61 KiB) Downloaded 160 times
User avatar
jojomickymack
Prole
Posts: 45
Joined: Tue Dec 26, 2017 4:52 pm

Re: Scale camera using the mouse cursor as an origin

Post by jojomickymack »

Hi,
Your code has issues, zooming in on a the mouse position is made more complex because you're translating around the circle, not actually changing it's position. Also, there's a black background, so it's very difficult to actually see what's happening. Also, you have semicolons on half of the lines and the indentation is all over the place.

I'd be happy to try to better apply what I put in the .love file here to your camera system here, but take a look at this and see if it might help clear up the confusion. The position of the circle is an x, y position that is changed by using the arrow keys. The scale level is controlled by 'z' and 'x'. The position of the circle has nothing to do with the calls to scale and translate.

Code: Select all

    dx = (love.graphics.getWidth() / 2) - (love.graphics.getWidth() / 2) / scale
    dy = (love.graphics.getHeight() / 2) - (love.graphics.getHeight() / 2) / scale
    --dx = (love.mouse.getX()) - (love.graphics.getWidth() / 2) / scale
    --dy = (love.mouse.getY()) - (love.graphics.getHeight() / 2) / scale

    love.graphics.scale(scale)
    love.graphics.translate(-dx, -dy)
To make things easier to understand, the scaling point is in the center of the window. Comment that out and uncomment the lines with the mouse position to set that as the scaling point. See if you can take the concepts in this demo and apply it to what you're doing with a camera, or maybe just don't use a camera at all.
zoom_to_center.gif
zoom_to_center.gif (433.72 KiB) Viewed 4984 times
Attachments
zoom_to_point.love
(465.95 KiB) Downloaded 175 times
8bit
Prole
Posts: 3
Joined: Fri Jan 05, 2018 10:49 pm

Re: Scale camera using the mouse cursor as an origin

Post by 8bit »

This cleared my confusion, but I still can't get it to work.
Can you help me apply it to my camera module, I don't want my main filling up so fast.
Yes, after I get the zoom fixed I will clean up my code. I just wanted to get something working to start from. Also, I prefer to keep the camera moving and not the objects if possible.
User avatar
jojomickymack
Prole
Posts: 45
Joined: Tue Dec 26, 2017 4:52 pm

Re: Scale camera using the mouse cursor as an origin

Post by jojomickymack »

Here is the camera.lua file with the logic applied from the example - the dx, dy calculations involving the mouse positions are in the love.wheelmoved function and the scaling and translating is at end of the camera:cmove function.

One thing you should correct in your main is the love.update function - it's supposed to be like this:
function love.update(dt)

I'm curious how your project will evolve, make sure to upload it again as you continue working on it!
Attachments
camera.lua
(2.19 KiB) Downloaded 218 times
8bit
Prole
Posts: 3
Joined: Fri Jan 05, 2018 10:49 pm

Re: Scale camera using the mouse cursor as an origin

Post by 8bit »

Thanks for your time, I got it working.
I will post as my project evolves, thanks again!
Post Reply

Who is online

Users browsing this forum: Google [Bot] and 5 guests