[SOLVED] Limiting a slider's movement?

[iPoisonxL]

I'm currently experimenting with some dragging in LOVE2D, I currently have a button sliding from one side to the other if I drag it. I want to be able to limit that movement. To do this, I tried checking if the X of the image was smaller that 100 (the X I want it to stop at) and if it was greater than 400 (the X I also want it to stop at) and all, but when I do this, I just get a very glitchy stop. Yes, it stops, but it kinda passes the 100, then stops. I don't really understand why it does that. After that, I tried setting it to 'if (slide.x < slide.image:getWidth()/2) then' but it just had the same results. Note: Slide is the table I'm using for the sliding button.

Code: Select all

function love.load()

	slide = {}
	slide.x = 300
	slide.y = 300
	slide.image = love.graphics.newImage('buttonStart.png')
	love.graphics.setBackgroundColor(255,255,255)

end

function love.update()

	mouse = {}
	mouse.x = love.mouse.getX()
	mouse.y = love.mouse.getY()
	mouse.over = false

	if (slide.x+slide.image:getWidth()/2 < 100) then
		slide.x=100
	end

	if (slide.x+slide.image:getWidth()/2 > 400) then
		slide.x=400
	end

	if (mouse.x > slide.x and
	mouse.x < slide.x + slide.image:getWidth()) then
		mouse.over = true
	else
		mouse.over = false
	end

	if (mouse.over == true) then

		if (love.mouse.isDown('l')) then
			slide.x = mouse.x - slide.image:getWidth() / 2
		end

	end

end

function love.draw()
	love.graphics.draw(slide.image,slide.x,slide.y)
end

Currently, that's all the code I've got. I'm also going to attach the .love file here. Don't mind what the button says, I was just too lazy to make a new button.

[micha]

Code: Select all

if (slide.x+slide.image:getWidth()/2 < 100) then
  slide.x=100
end

if (slide.x+slide.image:getWidth()/2 > 400) then
  slide.x=400
end

The if statements checks for the center of the slide, while the next line sets the left corner to 100.
Try this:

Code: Select all

if (slide.x+slide.image:getWidth()/2 < 100) then
  slide.x=100-slide.image:getWidth()/2
end

or

Code: Select all

if (slide.x < 100) then
  slide.x=100
end

In any case, you should decide what the meaning of slide.x is. Is it the center of the slide or the left edge? My suggestion is making slide.x the center and then in the love.graphics.draw use the half width and height as the coordinate of the origin (ox and oy)

[iPoisonxL]

Code: Select all

if (slide.x+slide.image:getWidth()/2 < 100) then
  slide.x=100
end

if (slide.x+slide.image:getWidth()/2 > 400) then
  slide.x=400
end

The if statements checks for the center of the slide, while the next line sets the left corner to 100.
Try this:

Code: Select all

if (slide.x+slide.image:getWidth()/2 < 100) then
  slide.x=100-slide.image:getWidth()/2
end

or

Code: Select all

if (slide.x < 100) then
  slide.x=100
end

In any case, you should decide what the meaning of slide.x is. Is it the center of the slide or the left edge? My suggestion is making slide.x the center and then in the love.graphics.draw use the half width and height as the coordinate of the origin (ox and oy)

Hmm.. Well, I played around a bit with my code, and I just checked if the mouse was in the area that I want to move it in. Like

Code: Select all

mouseover=false
if (mouse.y > slide.y and
mouse.y < slide.y+slide.image:getHeight() and
mouse.x > 400 and 
mouse.x <100) then
mouseover=true
else
mouseover=false
end

Seems to have worked great, incorporated it in a game of mine.