[SOLVED]Making a Dress Up Game... Have a Question!

[meiows]

So I'm working on a drag and drop dress up game for a gamejam and this is my very first project in LOVE AND lua. I have a question about dragging and dropping... so far I've worked out a lot of the issues on my own but I can't seem to figure this one out. I need to have multiple clothing on the side so I can drag and drop them onto the static base. However, when I try to pick up one object, it thinks I'm clicking both and drags both. It's because even though I'm clicking the RED socks, I'm still in the bounding box of the BLACK socks. I still need the clothes to be kind of close to one another because I want to have many!

Is there any way I can differentiate between the bounding boxes? And is there an easier and more time-efficient way of loading all of these draggable clothes in rather than doing each object one by one?

Here's my entire love file.

[veethree]

I have no experience with something like this, But i'd probably implement a layer system of some kind. When you click, you loop through all the objects you clicked, and select the one on top.


Here's a quickly thrown together example. You'd probably want to implement it in a more elegant way.

Code: Select all

function love.load()
	obj = {
		{color = {0, 125, 125}, x = 10, y = 10, layer = 1},
		{color = {125, 125, 0}, x = 20, y = 20, layer = 2},
	}
	selected = false
	xoffset = 0
	yoffset = 0
end

function love.update(dt)
	if selected then
		obj[selected].x = love.mouse.getX() + xoffset
		obj[selected].y = love.mouse.getY() + yoffset
	end
end

function love.draw()
	for i,v in ipairs(obj) do
		love.graphics.setColor(v.color)
		love.graphics.rectangle("fill", v.x, v.y, 64, 64)
	end
end

function love.keypressed(key)
	if key == "escape" then love.event.push("quit") end
end

function love.mousepressed(x, y, key)
	if key == "l" then
		local o = {}
		for i,v in ipairs(obj) do
			if x > v.x and x < v.x + 64 and y > v.y and y < v.y + 64 then
				o[#o + 1] = {id = i, layer = v.layer}
			end
		end

		if #o > 0 then
			table.sort(o, function(a, b) return a.layer > b.layer end)
			selected = o[1].id
			xoffset = obj[selected].x - x
			yoffset = obj[selected].y - y
		end
	end
end

function love.mousereleased(x, y, key)
	selected = false
end

[meiows]

I have no experience with something like this, But i'd probably implement a layer system of some kind. When you click, you loop through all the objects you clicked, and select the one on top.


Here's a quickly thrown together example. You'd probably want to implement it in a more elegant way.

Code: Select all

function love.load()
	obj = {
		{color = {0, 125, 125}, x = 10, y = 10, layer = 1},
		{color = {125, 125, 0}, x = 20, y = 20, layer = 2},
	}
	selected = false
	xoffset = 0
	yoffset = 0
end

function love.update(dt)
	if selected then
		obj[selected].x = love.mouse.getX() + xoffset
		obj[selected].y = love.mouse.getY() + yoffset
	end
end

function love.draw()
	for i,v in ipairs(obj) do
		love.graphics.setColor(v.color)
		love.graphics.rectangle("fill", v.x, v.y, 64, 64)
	end
end

function love.keypressed(key)
	if key == "escape" then love.event.push("quit") end
end

function love.mousepressed(x, y, key)
	if key == "l" then
		local o = {}
		for i,v in ipairs(obj) do
			if x > v.x and x < v.x + 64 and y > v.y and y < v.y + 64 then
				o[#o + 1] = {id = i, layer = v.layer}
			end
		end

		if #o > 0 then
			table.sort(o, function(a, b) return a.layer > b.layer end)
			selected = o[1].id
			xoffset = obj[selected].x - x
			yoffset = obj[selected].y - y
		end
	end
end

function love.mousereleased(x, y, key)
	selected = false
end

This is perfect, thank you! Just one thing though, how would I implement this with .pngs in my game folder instead of shapes that are being drawn right there?

[Nixola]

Shortly, you need to load the images with [wiki]love.graphics.newImage[/wiki] and put them in a table, and then draw them with love.graphics.draw.

[meiows]

I cannot for the life of me figure out how to replace these rectangles with my images... I load them using .newImage & i draw them using .draw yet it's saying it's expecting a drawable and not getting one.

[DaedalusYoung]

You're possibly not calling them by the correct name. How are you loading the images and how are you trying to draw them, precisely? Can you post your code?

[meiows]

You're possibly not calling them by the correct name. How are you loading the images and how are you trying to draw them, precisely? Can you post your code?

Everything is now loading with no error, the static base image is there. However, the draggable images in the table are invisible. It's like they're not being called.

Code: Select all

function love.load()
  love.window.setTitle("Cye Dress Up")
  love.window.setMode(1280, 720)
  love.graphics.setBackgroundColor(255,243,249)
  base = love.graphics.newImage("base.png")
    clothesImages = {
      --socks
      blks = { love.graphics.newImage("clothes/socks/blacks.png"), x = -10, y = 435, layer = 1},
      mars = { love.graphics.newImage("clothes/socks/maroons.png"), x = 5, y = 440, layer = 2},
      whites = { love.graphics.newImage("clothes/socks/whites.png"), x = 20, y = 445, layer = 3}
    }

   selected = false
   xoffset = 0
   yoffset = 0
end

function love.update(dt)
   if selected then
      clothesImages[selected].x = love.mouse.getX() + xoffset
      clothesImages[selected].y = love.mouse.getY() + yoffset
   end
end

function love.draw()
  love.graphics.draw(base, love.graphics.getWidth()/2 - base:getWidth()/2, love.graphics.getHeight()/2 - base:getHeight()/2)
   for i,v in ipairs(clothesImages) do
      love.graphics.draw(clothesImages, v.x, v.y)
   end
end

function love.mousepressed(x, y, key)
   if key == "l" then
      local o = {}
      for i,v in ipairs(clothesImages) do
         if x > v.x and x < v.x + 64 and y > v.y and y < v.y + 64 then
            o[#o + 1] = {id = i, layer = v.layer}
         end
      end

      if #o > 0 then
         table.sort(o, function(a, b) return a.layer > b.layer end)
         selected = o[1].id
         xoffset = clothesImages[selected].x - x
         yoffset = clothesImages[selected].y - y
      end
   end
end

function love.mousereleased(x, y, key)
   selected = false
end

[DaedalusYoung]

Ok, here:

Code: Select all

   for i,v in ipairs(clothesImages) do
      love.graphics.draw(clothesImages, v.x, v.y)
   end

clothesImages is a table, containing the various images. You can go through this table in order and draw each image. You're sort of doing that, it just needs a minor adjustment.

You iterate the table using for i,v in ipairs(clothesImages). What this does is, it temporarily stores each entry in the clothesImages table in the v variable. So now, you can easily do stuff for each image, such as draw something on every image's x and y coordinates, using v.x and v.y.

But what are you drawing? Right now, you're just giving the entire table again, but Lua doesn't know where in that table is your image, you need to tell it explicitly. So where's your image? It's actually the first entry in each table, so you need to tell Lua to look for the image at that position:

(Note: I changed ipairs to pairs, since your table is not indexed by number, but that's another story)

Code: Select all

   for k,v in pairs(clothesImages) do
      love.graphics.draw(v[1], v.x, v.y) -- This calls to draw the image stored at position [1] in the table at coordinates x, y
   end

If you want that to be a bit easier to read, you can give the image a name:

Code: Select all

    clothesImages = {
      --socks
      blks = { img = love.graphics.newImage("clothes/socks/blacks.png"), x = -10, y = 435, layer = 1},
      mars = { img = love.graphics.newImage("clothes/socks/maroons.png"), x = 5, y = 440, layer = 2},
      whites = { img = love.graphics.newImage("clothes/socks/whites.png"), x = 20, y = 445, layer = 3}
    }

And then the draw code becomes:

Code: Select all

   for k,v in pairs(clothesImages) do
      love.graphics.draw(v.img, v.x, v.y)
   end

[meiows]

Ok, here:

Code: Select all

   for i,v in ipairs(clothesImages) do
      love.graphics.draw(clothesImages, v.x, v.y)
   end

clothesImages is a table, containing the various images. You can go through this table in order and draw each image. You're sort of doing that, it just needs a minor adjustment.

You iterate the table using for i,v in ipairs(clothesImages). What this does is, it temporarily stores each entry in the clothesImages table in the v variable. So now, you can easily do stuff for each image, such as draw something on every image's x and y coordinates, using v.x and v.y.

But what are you drawing? Right now, you're just giving the entire table again, but Lua doesn't know where in that table is your image, you need to tell it explicitly. So where's your image? It's actually the first entry in each table, so you need to tell Lua to look for the image at that position:

(Note: I changed ipairs to pairs, since your table is not indexed by number, but that's another story)

Code: Select all

   for k,v in pairs(clothesImages) do
      love.graphics.draw(v[1], v.x, v.y) -- This calls to draw the image stored at position [1] in the table at coordinates x, y
   end

If you want that to be a bit easier to read, you can give the image a name:

Code: Select all

    clothesImages = {
      --socks
      blks = { img = love.graphics.newImage("clothes/socks/blacks.png"), x = -10, y = 435, layer = 1},
      mars = { img = love.graphics.newImage("clothes/socks/maroons.png"), x = 5, y = 440, layer = 2},
      whites = { img = love.graphics.newImage("clothes/socks/whites.png"), x = 20, y = 445, layer = 3}
    }

And then the draw code becomes:

Code: Select all

   for k,v in pairs(clothesImages) do
      love.graphics.draw(v.img, v.x, v.y)
   end

Thank you SO much! I got everything working... now I'm just ironing out some image layering/draw order bugs. Thank you for the help!