[SOLVED] Drawing an image on screen

[nice]

Hello boys and girls!

I need some help and it's kinda embarrassing for me to ask about too.
I have a .png image called "heliumUI.png" that I want to draw on the screen but surprise surprise I can't, I haven't worked with .png images for a while so I hope you understand why it's embarrassing for me to ask.

I have the .png image (800x480) in my project folder (called helium) inside the "Documents" folder and the image isn't in a separate folder either.
I'm calling out the image in love.load and I'm trying to call it in love.draw too and when I save the changes I run the code to see if it works but of course it doesn't.

My theory to why it doesn't work is that something is interfering with it, maybe because of setBackgroundColor function or there's something that I don't see and have forgotten.

I'm sorry for taking up your time with something that seem trivial to you.

Code: Select all

function love.load()

squares = {}

-- 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
end


-- Draws All The Graphics --
function love.draw()
   local x, y = love.mouse.getPosition()
   
   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", 100, 16, 100, 50)
   
   -- Draws A 16x16 Square That Follows The Mouse 
   love.graphics.rectangle("line", x - 8, y - 8, 16, 16)
   
   
   --Makes A Grey Border Around The Selected Colour Box. (In case you selected white.)
   love.graphics.setColor(100, 100, 100)
   love.graphics.rectangle("line", 100, 16, 100, 50)

   -- UI: Banner Grey (temporarily disabled)
   love.graphics.draw(ui, 480, 800)
  -- love.graphics.rectangle("fill", 0, 480, 800, 120)
end

function love.mousepressed(x, y, button)
   
   -- Drop Tool
   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

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
   end   
end

[Fenrir]

Are you setting the window size in your conf.lua file? The current problem here is that if you don't, as the default window size is 800x600, your image will be outside:

Code: Select all

love.graphics.draw(ui, 480, 800)

Parameters 2 and 3 are the position from the upper left corner, try something like 0, 0 instead and you'll see your image.

As a side note, please prefer the support forum for this kind of technical problems.
Cheers,

[nice]

Are you setting the window size in your conf.lua file? The current problem here is that if you don't, as the default window size is 800x600, your image will be outside:

Code: Select all

love.graphics.draw(ui, 480, 800)

Parameters 2 and 3 are the position from the upper left corner, try something like 0, 0 instead and you'll see your image.

As a side note, please prefer the support forum for this kind of technical problems.
Cheers,

You were right, I had no idea that it was that.
As for the support forum, I didn't know that this should be there so thanks!

[EDIT]
Now I realised what I did wrong:
I pretty much copied and pasted the numbers when I drew a temporary grey rectangle that was acting as UI, the rectangle was 800x480 big

Code: Select all

  love.graphics.draw(ui, 0, 480)
-- See the difference between these two?
   love.graphics.rectangle("fill", 0, 480, 800, 120)

o without thinking I added those numbers as positions for my new ui, I had the correct value for the Y but my X value where way off, my window is 800x600 big and by using 800 as my X coordinate it appeared off screen to the right.

But now I have another small issue, in my original picture the .png is another color than I have right now (which is in a darker tone) and that's no good.
I'm pretty sure it has something to do with the alpha and I'm trying to get to it where it gets drawn but it screws up the image.
I have been through this before but unfortunately I can't manage to remember..

I'm sorry for taking up your time.

[SECOND EDIT]
Now I know what's wrong I had a function that set the color to grey for a border that I had:

Code: Select all

   love.graphics.setColor(100, 100, 100)
   love.graphics.rectangle("line", 100, 16, 100, 50)

I deleted that code and it worked but instead the UI changes color when I press any of the num keys (1 to 0) and I'll admit that it's a bit funky but it isn't what the desired effect that I want.
I'll need to prevent the UI from changing color to be "normal", so there should be a line of code that fixes that problem and I would hope if there's someone that could help me with that.

Here's the updated code:

Code: Select all

function love.load()

squares = {}

-- 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
end


-- Draws All The Graphics --
function love.draw()
   local x, y = love.mouse.getPosition()
   
   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)
   -- User Interface
   love.graphics.draw(ui, 0, 480)
 
end

function love.mousepressed(x, y, button)
   
   -- Drop Tool
   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

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
   end   
end

[Fenrir]

Before drawing you image, just call:

Code: Select all

love.graphics.setColor(255, 255, 255)

And your image color will be fine.

Colors from images are actually blended with the current love color, so for instance if your image is totally white (255 everywhere), and the current setColor is (255, 0, 0), you'll get a red image instead of a white one.

[nice]

Before drawing you image, just call:

Code: Select all

love.graphics.setColor(255, 255, 255)

And your image color will be fine.

Colors from images are actually blended with the current love color, so for instance if your image is totally white (255 everywhere), and the current setColor is (255, 0, 0), you'll get a red image instead of a white one.

Thanks for the help, I surprisingly learned a lot from this!