## [HELP] Making a Save button

General discussion about LÖVE, Lua, game development, puns, and unicorns.
nice
Party member
Posts: 188
Joined: Sun Sep 15, 2013 12:17 am
Location: Sweden

### [HELP] Making a Save button

Hello boys and girls!
I need some help with making a save button for my MS paint clone project, because I don't know where to start with this thing:

1. I have a image (SaveIcon.png) that I'll need to be clickable.
2. The save function needs to "screenshot"/save where you have drawn your image on your "canvas" (800x480).
3. I want the save icon to be placed to the right of the UI because on the left I have a box that sows colours that you're using.
4. I also want to be able to name the file before saving the image.

I really need some help with this because I don't really know if I can do it myself..

Code: Select all

function love.load()

squares = {}
Lines = {}
currentLine = {0, 0, 0, 0}
lineSize = 16
mouseIsDown = false

-- Colors
daColors =
--[[White]]--
{{255, 255, 255},

--[[Blue]]--
{50, 130, 185},

--[[Brown]]--
{143, 114, 30},

--[[Green]]--
{50, 158, 30},

--[[Orange]]--
{199, 129, 68},

--[[Pink]]--
{226, 131, 239},

--[[Purple]]--
{143, 83, 185},

--[[Red]]--
{171, 91, 75},

--[[Turquoise]]--
{50, 137, 151},

--[[Black]]--
{0, 0, 0}}
curColor = 1

-- User Interface
ui = love.graphics.newImage("heliumUI.png")

-- White Background
love.graphics.setBackgroundColor(255, 255, 255)

end

function love.update( dt )
-- The Brush
local x, y = love.mouse.getPosition()

if love.mouse.isDown( "l" ) and not love.keyboard.isDown("lshift") then
local newPosition = {}
newPosition.x = x - 8
newPosition.y = y - 8
newPosition.color = daColors[curColor]
table.insert( squares, newPosition )
end

if mouseIsDown then
currentLine.x2 = x
currentLine.y2 = y
end

end

-- Draws All The Graphics --
function love.draw()
local x, y = love.mouse.getPosition()

love.graphics.setLineWidth(1)
for key, square in ipairs( squares ) do
love.graphics.setColor(square.color)
love.graphics.rectangle( "fill", square.x, square.y, 16, 16 )
end

-- Draws Current Colour
love.graphics.setColor(daColors[curColor])
love.graphics.rectangle("fill", 47, 515, 100, 50)

-- Draws A 16x16 Square That Follows The Mouse
love.graphics.rectangle("line", x - 8, y - 8, 16, 16)

love.graphics.setLineWidth(lineSize)
for i = 1, #Lines do
love.graphics.setColor(Lines[i].color)
love.graphics.line(Lines[i].x1, Lines[i].y1, Lines[i].x2, Lines[i].y2)
end

love.graphics.setColor(daColors[curColor])
love.graphics.line(currentLine.x1, currentLine.y1, currentLine.x2, currentLine.y2)

-- User Interface
love.graphics.setColor(255, 255, 255)
love.graphics.draw(ui, 0, 480)

end

function love.mousepressed(x, y, button)

-- Drop Tool -- I'll leave this here in case you ever need it.
--   if button == "l" and love.keyboard.isDown("lshift") then
--      local screenshot = love.graphics.newScreenshot()
--      local r, g, b = screenshot: getPixel(x - 1, y - 1)
--      daColors[curColor] = {r, g, b}
--   end

if button == "r" then
mouseIsDown = true
currentLine = {x1 = x, y1 = y, x2 = x, y2 = y}
end

end

function love.mousereleased(x, y, button)
if button == "r" and mouseIsDown then
mouseIsDown = false
currentLine.color = daColors[curColor]
table.insert(Lines, currentLine)
currentLine = {0, 0, 0, 0}
end
end

function love.keypressed(key)
-- Select Your Color By Pressing The Number Keys (1 to 0)
if key == "1" then
curColor = 1 -- White
elseif key == "2" then
curColor = 2 -- Blue
elseif key == "3" then
curColor = 3 -- Brown
elseif key == "4" then
curColor = 4 -- Green
elseif key == "5" then
curColor = 5 -- Orange
elseif key == "6" then
curColor = 6 -- Pink
elseif key == "7" then
curColor = 7 -- Purple
elseif key == "8" then
curColor = 8 -- Red
elseif key == "9" then
curColor = 9 -- Turquoise
elseif key == "0" then
curColor = 10 -- Black
elseif key == "f" then
squares = {}
Lines = {}
love.graphics.setBackgroundColor(daColors[curColor])
end
end
Attachments
Save icon (the image is white so you might not be able to see it)
SaveIcon.png (665 Bytes) Viewed 3291 times
User Interface
heliumUI.png (2.9 KiB) Viewed 3291 times
Have a good day!

Zilarrezko
Party member
Posts: 345
Joined: Mon Dec 10, 2012 5:50 am
Location: Oregon

### Re: [HELP] Making a Save button

Alright, I couldn't sleep tonight, so I worked on it. I'm glad that I am the first to post, because I didn't want my work to go to waste.

I had to make references back to some of my code. But I tried to make it as abstract and simple as possible (Without using a whole lot of functions which would cause someone trying to learn from it to jump from file to file or something like that.).

Here it is,
_working.love
If you have any specific questions, just ask.

However, some things I'll point out...

The saved .png file is in the [insertusernamehere]/AppData/roaming/love/helium folder. At least that's where mine saves on windows 8. If you have another operating system, Check at the top of this wiki page. I checked multiple times, and it's saving for me.

It's probably misleading, but I named everything that deals with saving in the table saveIcon. saveIcon was originally the image userdata, but I decided to make it a table, and saveIcon.image is the actual saveIcon's image data.

I have no idea how to save to the directory from which the code is running from. Maybe someone will come by and educate both of us, otherwise we have to deal with the outrageous circumstances.

nice
Party member
Posts: 188
Joined: Sun Sep 15, 2013 12:17 am
Location: Sweden

### Re: [HELP] Making a Save button

Zilarrezko wrote:Alright, I couldn't sleep tonight, so I worked on it. I'm glad that I am the first to post, because I didn't want my work to go to waste.

I had to make references back to some of my code. But I tried to make it as abstract and simple as possible (Without using a whole lot of functions which would cause someone trying to learn from it to jump from file to file or something like that.).

Here it is,
_working.love
If you have any specific questions, just ask.

However, some things I'll point out...

The saved .png file is in the [insertusernamehere]/AppData/roaming/love/helium folder. At least that's where mine saves on windows 8. If you have another operating system, Check at the top of this wiki page. I checked multiple times, and it's saving for me.

It's probably misleading, but I named everything that deals with saving in the table saveIcon. saveIcon was originally the image userdata, but I decided to make it a table, and saveIcon.image is the actual saveIcon's image data.

I have no idea how to save to the directory from which the code is running from. Maybe someone will come by and educate both of us, otherwise we have to deal with the outrageous circumstances.
The computer that I'm using is a Mac so we will see what the difference will become.
I will take a look at it myself later today to see if it works and see if changes are required and I will also see if the saved image can appear on your desktop or in a folder of your choice.
Thanks for the help!

[EDIT]
If there's a lua overlord that have experience with this it would be greatly appreciated!
Have a good day!

slime
Solid Snayke
Posts: 2887
Joined: Mon Aug 23, 2010 6:45 am
Contact:

### Re: [HELP] Making a Save button

nice wrote:I will also see if the saved image can appear on your desktop or in a folder of your choice.
It can't, but you can make a hotkey or button to open a Finder/Explorer window to the folder containing the image.

Something like this:

Code: Select all

function OpenFolder()
love.system.openURL("file://"..love.filesystem.getSaveDirectory())
end


Positive07
Party member
Posts: 1006
Joined: Sun Aug 12, 2012 4:34 pm
Location: Argentina

### Re: [HELP] Making a Save button

Not a lua overlord unfortunately, but you can use the io lua library, it allows you to read and WRITE files to wherever you want, not just the save directory... so you could:
• save your image as a png in the save directory
• open a file with io for write (in binary format so you should use "wb")
• write all the things you read from love.filesystem into the io file (it's like copying a file)
Some notes, io lets you save everywhere so the user should specify a path on his own, or you should use a known path, you must never use a path that you are not sure that exists in all the OS's so you should try to stick with the save directory, the working directory, the user directory or the appdata directory... since you can use the filesystem API to get their paths

[wiki]love.filesystem.getWorkingDirectory[/wiki]()
[wiki]love.filesystem.getUserDirectory[/wiki]()
...

I did something similar for my latest project but backwards, I copy a file from anywhere on the PC to the save directory

Or as stated above use [wiki]love.system.openURL[/wiki]() to open the save folder (I recommend you to use this)
for i, person in ipairs(everybody) do
[tab]if not person.obey then person:setObey(true) end
end
love.system.openURL(Github.com/Positive07)

nice
Party member
Posts: 188
Joined: Sun Sep 15, 2013 12:17 am
Location: Sweden

### Re: [HELP] Making a Save button

slime wrote: It can't, but you can make a hotkey or button to open a Finder/Explorer window to the folder containing the image.

Something like this:

Code: Select all

function OpenFolder()
love.system.openURL("file://"..love.filesystem.getSaveDirectory())
end

So you mean like a keypressed function?
From what I understand it will it open up the image on your browser? and after that you can save from there?
Positive07 wrote: Some notes, io lets you save everywhere so the user should specify a path on his own, or you should use a known path, you must never use a path that you are not sure that exists in all the OS's so you should try to stick with the save directory, the working directory, the user directory or the appdata directory... since you can use the filesystem API to get their paths

[wiki]love.filesystem.getWorkingDirectory[/wiki]()
[wiki]love.filesystem.getUserDirectory[/wiki]()
...
So if I were saving in the directories and this might sound a bit stupid but where do I find these directories?
Have a good day!

Positive07
Party member
Posts: 1006
Joined: Sun Aug 12, 2012 4:34 pm
Location: Argentina

### Re: [HELP] Making a Save button

Code: Select all

function OpenFolder()
love.system.openURL("file://"..love.filesystem.getSaveDirectory())
end
This opens the folder, where LÖVE saves your files, with the Explorer... it doesnt open the file... but you could

Code: Select all

function OpenFolder()
love.system.openURL("file://"..love.filesystem.getSaveDirectory()..filename)
end
The Save directory and the Appdata directory should be the same, they are where your game saves everything
The working directory is where love.exe is found, the user directory is for example "C:\Users\nice" (but it depends on the OS)

They vary depending on where love.exe is, the OS, the username and the filesystem identity so they are not always the same
for i, person in ipairs(everybody) do
[tab]if not person.obey then person:setObey(true) end
end
love.system.openURL(Github.com/Positive07)

nice
Party member
Posts: 188
Joined: Sun Sep 15, 2013 12:17 am
Location: Sweden

### Re: [HELP] Making a Save button

Positive07 wrote:

Code: Select all

function OpenFolder()
love.system.openURL("file://"..love.filesystem.getSaveDirectory())
end
This opens the folder, where LÖVE saves your files, with the Explorer... it doesnt open the file... but you could

Code: Select all

function OpenFolder()
love.system.openURL("file://"..love.filesystem.getSaveDirectory()..filename)
end
The Save directory and the Appdata directory should be the same, they are where your game saves everything
The working directory is where love.exe is found, the user directory is for example "C:\Users\nice" (but it depends on the OS)

They vary depending on where love.exe is, the OS, the username and the filesystem identity so they are not always the same
I'm currently using a mac but I do want everyone to use this and save but how should I make it so the "saving" of the image is as smooth (and pain free) as possible?
Have a good day!

Positive07
Party member
Posts: 1006
Joined: Sun Aug 12, 2012 4:34 pm
Location: Argentina

### Re: [HELP] Making a Save button

Save to the save directory... that is your best choice.

Then place other button that says something like "Open containing folder..." and when ever it is pressed trigger the command slime posted before

Mari0 did this, if you were looking at the maps and pressed "m" it would open the map folder (which was in the save directory) with the Explorer (not to be confused with Internet Explorer)
for i, person in ipairs(everybody) do
[tab]if not person.obey then person:setObey(true) end
end
love.system.openURL(Github.com/Positive07)

nice
Party member
Posts: 188
Joined: Sun Sep 15, 2013 12:17 am
Location: Sweden

### Re: [HELP] Making a Save button

Positive07 wrote:Save to the save directory... that is your best choice.

Then place other button that says something like "Open containing folder..." and when ever it is pressed trigger the command slime posted before

Mari0 did this, if you were looking at the maps and pressed "m" it would open the map folder (which was in the save directory) with the Explorer (not to be confused with Internet Explorer)
I´ll have to think about this, I had hoped on one function but if it is as you say then perhaps this will be the best way to do it.
Have a good day!

### Who is online

Users browsing this forum: No registered users and 22 guests