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

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

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.
Attachments
Dress Up.love
Last edited by meiows on Mon Aug 24, 2015 11:04 pm, edited 1 time in total.
veethree
Inner party member
Posts: 820
Joined: Sat Dec 10, 2011 7:18 pm

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

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

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

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?
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!

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
li = love.image
lg = love.graphics
meiows
Prole
Posts: 6
Joined: Sun Aug 23, 2015 8:15 pm

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

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
Party member
Posts: 402
Joined: Sun Jul 14, 2013 8:04 pm

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

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

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

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

DaedalusYoung
Party member
Posts: 402
Joined: Sun Jul 14, 2013 8:04 pm

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

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

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

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!

### Who is online

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