[Question] How do i implement Edge Scrolling?

[Rishavs]

Hi

I am trying to implement an rts style camera. when the mouse cursor is moved to the edge of the screen, i want to move the map.

Currently i am using the HUMP libs to move the map.

How do i recognize that the mouse is at the screen edges?

[zorg]

If the mouse coordinates in "screen/camera" space are:
- between the left edge and that plus some arbitrary constant, and
- between the right edge and that minus some arbitrary constant, and
- between the top edge and that plus some arbitrary constant, and
- between the bottom edge and that minus some arbitrary constant,
then you move the camera by some other constant over time, depending on which of the above criteria are met.

hints:
- the above stuff does not imply one "then" block only, i just wrote it like that for compactness' sake.
- the above code will work on edges too (like, moving the map both up and left)
- look into lg.getDimensions for the values of the edges, and if the camera is moving in the opposite direction, then just change signs. (since i don't remember whether hump's camera positioning moves towards or away from a direction, whatever values you give it)

If you still need help figuring out, i will give code then, but do try to code it yourself; that's where the magic lies!

[Rishavs]

Well, that turned out to be surprisingly easy.

Code: Select all

function _state_Game:update(dt)
    self.map:update(dt)

    local mouseX, mouseY = love.mouse.getPosition( )
    if mouseY >= windowHeight *0.95 then 
        self.cam:move(0, camSpeed * dt)
    elseif mouseY <= windowHeight *0.05 then 
        self.cam:move(0, -camSpeed * dt)    
    elseif mouseX >= windowWidth *0.95 then 
        self.cam:move(camSpeed * dt, 0)    
    elseif mouseX <= windowWidth *0.05 then 
        self.cam:move(-camSpeed * dt, 0)
    end
end

Thanks for the help.

Edit: I have a followup question. this might be maths related.
I want the scrolling to be faster the nearer the cursor is to the screen edge. ie. add an acceleration component.
Any idea what kind of mathematical relation i should use?

[Evine]

"Drags some code out of an old project"

Code: Select all

if love.mouse.getX() < 150 then
	yourValueX = yourValueX - dt * (150-love.mouse.getX()) * 5
end
if love.mouse.getX() > love.graphics.getWidth() - 150 then
	yourValueX = yourValueX + dt * (love.mouse.getX() - (love.graphics.getWidth()-150)) * 5
end

Now this is pixel based rather than percentage based, but the principle is the same. At 150px from the side of the screen the (150-love.mouse.getX()) evaluates to 0 and when you get closer to the egde the number grows to 150.

[Rishavs]

thanks!