object movement [newbie, theory]

[xjermx]

Hi folks. I'm brand new to lua and Love, and have been doing hobbyist PHP for a while before I realized that I wanted a 2d environment.

Apologies if this is clearly covered somewhere - I've been through the tutorials and dug through documentation and forums.. I'm still super early in the learning process.

I'm trying to figure out how to make something "move". I played a lot with the mouse dragging tutorial, and that got me started. I modified it to make it so that the rectangle simply jumps to wherever I click the mouse, but then I wanted to have it move from one location to the other in a perceptible way, as opposed to the "teleportation" method of simply being redrawn at its destination.

So - how is this kind of thing done in this environment? Being from a PHP background, I imagined that you might have some sort of loop that updates its x/y coords for origin and destination, and draws it; then updates its coords and draws it, etc. I fooled around with this approach, but I can't figure out how to get a loop to iterate slow enough to be perceptible.

Thanks!

[Robin]

Welcome!

Forget about loops -- LÖVE works differently. love.update(dt) and love.draw() are both run once a frame. They both got a small window of time to do what they have to do before they start slowing things down. As long as you are in love.update(dt) and love.draw(), the game is "stuck" and doesn't move.

So how do you let an object move?

Here's one way:

Code: Select all

function love.update(dt)
   xposition = xposition + xspeed * dt
   yposition = yposition + yspeed * dt
end

(I hope you can fill in the rest.)

If you like to move your rectangle to a specific location, say (xnew, ynew), you do something like this:

Code: Select all

function love.update(dt)
   xposition = xposition * 0.99 + xnew * 0.01
   yposition = yposition * 0.99 + ynew * 0.01
end

Try playing with these example until you get a feel for how everything works.

You can always ask more questions if something's not clear.

[xjermx]

Awesome, thanks.

Here's the code that I came up with (much of it cribbed from the previously mentioned tutorial)

Code: Select all

-- simplemovement

function love.load()
  
  rect = {
    x = 100,
    y = 100,
    width = 100,
    height = 100,
	targetX = 700,
	targetY = 500,
    dragging = { active = false, diffX = 0, diffY = 0 }
  }
end

function love.update(dt)
  if rect.dragging.active then
	rect.x = rect.x * 0.99 + rect.targetX * 0.01
    rect.y = rect.y * 0.99 + rect.targetY * 0.01
	--rect.x = rect.x * 1.01
	--rect.y = rect.y * 1.01
  end
end

function love.draw()
love.graphics.print('Hello World!', 400, 300)
local e, f = love.mouse.getPosition()
love.graphics.print("The mouse is at (" .. e .. "," .. f .. ")", 50, 50)
love.graphics.print("The box is at (" .. rect.x .. "," .. rect.y .. ")", 100, 100)
  love.graphics.rectangle("fill", rect.x, rect.y, rect.width, rect.height)
end

function love.mousepressed(x, y, button)
  if button == "l" -- if left button is pressed
  
  then
    rect.dragging.active = true
    rect.dragging.diffX = x - rect.x
    rect.dragging.diffY = y - rect.y
	rect.targetX = x
	rect.targetY = y
  end
end

function love.mousereleased(x, y, button)
  if button == "l" then rect.dragging.active = false end
end

[Roland_Yonaba]

Yeah, fine.
You should use dt in the update callback, it'll make your moves more framerate-independant.
But it's not obliged, though.

[xjermx]

I noticed that the code I posted performs differently on two systems. Perhaps this is related to processor speed difference?

Is it possible to combine these approaches? To code it so that it moves toward a target, and includes dt as well?

Can someone break down 'dt' and how it works in this code?

I tried this, but it does not work the way I want.

Code: Select all

	local e, f = love.mouse.getPosition()
	
	rect.x = rect.x * 0.990 + e * 0.005 + dt * 0.005
	rect.y = rect.y * 0.990 + f * 0.005 + dt * 0.005

[Robin]

Can someone break down 'dt' and how it works in this code?

So dt is the number of seconds since the last frame (usually quite a small number). In your code, you multiply it by 0.005 and add it to rect.x and rect.y. That means the code works almost the same as

Code: Select all

	local e, f = love.mouse.getPosition()
	
	rect.x = rect.x * 0.990 + e * 0.005
	rect.y = rect.y * 0.990 + f * 0.005

except that every 200 seconds, the rectangle is one pixel more to the right and to the bottom. Not what you want.

This is a simple thing you might want to try:

Code: Select all

	local e, f = love.mouse.getPosition()
	
	local timeleft = dt
	while timeleft > 0 do
		rect.x = rect.x * 0.995 + e * 0.005
		rect.y = rect.y * 0.995 + f * 0.005
		timeleft = timeleft - 0.01
	end

Because the loop is time based in the sense that the larger dt is, the more often it is run, it should do roughly the same on different computers (namely,adjust the rectangle position slightly 100 times per second).

I haven't tested this, tell us how and if it works.