Page 1 of 2

How can I make a loading screen?

Posted: Sun Jan 13, 2019 10:21 pm
by arthurgps2
So I would like to make a loading screen for my project at the startup, instead of that white screen. I've looked through this forum, but I couldn't find a very clear solution. I want an image written "Loading" to appear while other stuff is loading. Oh, and please explain every part of the code so I can understand,
Oh, and I also like to use the love.draw() and love.update() functions like this:

Code: Select all

function draw()
	--Code
end

function update(dt)
	--Code
end

function love.draw()
	--Maybe some other stuff
	draw()
end

function love.update(dt)
	--Maybe some other stuff
	update(dt)
end

Re: How can I make a loading screen?

Posted: Mon Jan 14, 2019 12:28 am
by pgimeno
If you only want a static image, you could get away with something like this:

Code: Select all

love.graphics.clear()
love.graphics.draw(love.graphics.newImage('Loading.png'))
love.graphics.present()
Look up the respective functions to know how they're used. Ignore the note about love.run, because you don't want the Loading screen in the main loop, which is what love.run deals with.

Re: How can I make a loading screen?

Posted: Mon Jan 14, 2019 12:39 am
by zorg
Um, you shouldn't do that? newImage is wasteful like that?
Also what note about love.run? and where's the explanation that that code looks like love.run's part, and you shouldn't even need to call clear nor present?
What's happening :V

Re: How can I make a loading screen?

Posted: Mon Jan 14, 2019 12:49 am
by pgimeno
Here's a complete main.lua :) (use any random image for the loading screen)

Code: Select all

love.graphics.clear()
love.graphics.draw(love.graphics.newImage('Loading.png'))
love.graphics.present()

love.timer.sleep(3) -- simulates 3 second load time

function love.draw()
  love.graphics.print("Loading finished")
end
The love.run note I was talking about is in love.graphics.present.

Edited to add: Ok, that was a bit too terse. Let me expand a bit.
1) love.graphics.clear() is needed because the contents of the screen are undefined without it. The main loop in love.graphics.run() normally takes care of that, but the whole intention here is being able to show something before (or within) love.load, which happens before the main loop.
2) The image won't be used for anything else. If you need the dimensions then sure, use a variable to hold it and let you get the size then draw it.
3) love.graphics.present() is what actually shows on the screen the image that was previously drawn, as the docs say.

Re: How can I make a loading screen?

Posted: Mon Jan 14, 2019 1:10 am
by zorg
Apologies, i found the context a bit lacking so i was confused about your first answer;

That said, i tested your solution, and on my end, the initial SDL window with the initialized contents (ie white, or apparently black on OSX, according to slime) won't "replace" that startup phenomenon, (and in my case, there's an added transparent window effect as well, for a split second after the initial whiteness, on win7), it'll just show the image -after- all that happens... which is probably not what OP expects as a solution.

Re: How can I make a loading screen?

Posted: Mon Jan 14, 2019 1:15 am
by pgimeno
Maybe a love.event.pump() is needed? Could you try this? (also, I've edited my post to expand a bit)

Code: Select all

love.graphics.clear()
love.graphics.draw(love.graphics.newImage('Loading.png'))
love.graphics.present()
love.event.pump()

love.timer.sleep(3) -- simulates 3 second load time

function love.draw()
  love.graphics.print("Loading finished")
end

Re: How can I make a loading screen?

Posted: Mon Jan 14, 2019 1:19 am
by zorg
Tried that, nothing different; i could try to capture a gif with licecap of how it's on my end?

Also, if this behaviour of SDL can't be mitigated, i might look into spawning the window outside the desktop area, and moving it back after 3 secs or so, so that that init thing won't show at all.

Re: How can I make a loading screen?

Posted: Mon Jan 14, 2019 1:31 am
by pgimeno
Well, if this doesn't work, then there's little else that can be done: window creation is delayed until the very last moment where it can be done, and right after that come the rest of unavoidable things.

conf.lua:

Code: Select all

function love.conf(c)
  c.window = nil
end
main.lua:

Code: Select all

do
  local img = love.image.newImageData('Loading.png')
  love.window.setMode(800, 600)
  img = love.graphics.newImage(img)
  love.graphics.clear()
  love.graphics.draw(img)
  love.graphics.present()
  love.event.pump()
end

love.timer.sleep(3)

function love.draw()
  love.graphics.print("Loading finished")
end

Re: How can I make a loading screen?

Posted: Mon Jan 14, 2019 1:57 am
by zorg
I attached the gif i captured; looks like it can't be avoided this way.

Re: How can I make a loading screen?

Posted: Mon Jan 14, 2019 2:17 am
by pgimeno
Sounds like that's initialization time and it's unavoidable. Does it then show the image for 3 seconds? It puzzles me that it doesn't happen to you with more LÖVE programs.