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

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
User avatar
meiows
Prole
Posts: 6
Joined: Sun Aug 23, 2015 8:15 pm

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

Post by 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. :cry: 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.
Attachments
Dress Up.love
(242.17 KiB) Downloaded 192 times
Last edited by meiows on Mon Aug 24, 2015 11:04 pm, edited 1 time in total.
:emo:
User avatar
veethree
Inner party member
Posts: 875
Joined: Sat Dec 10, 2011 7:18 pm

Re: Making a Dress Up Game... Have a Question!

Post by 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
User avatar
meiows
Prole
Posts: 6
Joined: Sun Aug 23, 2015 8:15 pm

Re: Making a Dress Up Game... Have a Question!

Post by meiows »

veethree wrote: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?
:emo:
User avatar
Nixola
Inner party member
Posts: 1949
Joined: Tue Dec 06, 2011 7:11 pm
Location: Italy

Re: Making a Dress Up Game... Have a Question!

Post by 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.
lf = love.filesystem
ls = love.sound
la = love.audio
lp = love.physics
lt = love.thread
li = love.image
lg = love.graphics
User avatar
meiows
Prole
Posts: 6
Joined: Sun Aug 23, 2015 8:15 pm

Re: Making a Dress Up Game... Have a Question!

Post by 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. :o:
User avatar
DaedalusYoung
Party member
Posts: 407
Joined: Sun Jul 14, 2013 8:04 pm

Re: Making a Dress Up Game... Have a Question!

Post by 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?
User avatar
meiows
Prole
Posts: 6
Joined: Sun Aug 23, 2015 8:15 pm

Re: Making a Dress Up Game... Have a Question!

Post by meiows »

DaedalusYoung wrote: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
:emo:
User avatar
DaedalusYoung
Party member
Posts: 407
Joined: Sun Jul 14, 2013 8:04 pm

Re: Making a Dress Up Game... Have a Question!

Post by 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
User avatar
meiows
Prole
Posts: 6
Joined: Sun Aug 23, 2015 8:15 pm

Re: Making a Dress Up Game... Have a Question!

Post by meiows »

DaedalusYoung wrote: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!
:emo:
Post Reply

Who is online

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