Are loading screens/bars possible in tier 1?

Author

Message

NoUJoe

10

Years of Service

User Offline

Joined: 8th Jul 2013

Location:

Posted: 18th Sep 2013 05:17

Link

So I have Hands On AppGameKit Basic and I've had a look through to see if there was anything on loading screens and what not. I couldn't find anything and I've search these forums and couldn't find anything either. Is there any specific way to do this in tier 1? Is it even possible? Do games made on AppGameKit even require one? I was thinking about possible ways to do it and all I could think of was when someone clicks on new game or whatever, the game would show a standard loading screen whilst it calls functions that load the images/sound and set up the game, and each function would return a variable once it's completed, once all the variables = 1 then it would remove the loading screen and start the game.

Not sure if I'm even on the right track here but feedback would be appreciated.

Back to top

Profile PM

Van B

Moderator

21

Years of Service

User Offline

Joined: 8th Oct 2002

Location: Sunnyvale

Posted: 18th Sep 2013 09:59

Link

Well, what I tend to do is just make a function - maybe I'd pass a value to it to signify the progress. Like, if you made a function called Loading_Screen(p), and increased P and called the function before each major loading stage.

Loading_Screen(0)
//Load images
Loading_Screen(1)
//Load more images
Loading_Screen(2)
//Load music
Loading_Screen(3)
//Load media etc etc etc

Then, when you have peppered your initiation with loading screen updates, you know how many you have (P), and can adjust the loading screen function to show the progress.

Let's assume you have 10 calls, P being 0 to 9...

Function Loading_Screen(p)
print("Loading "+str(floor((p/10.0)*100)+"%")
sync()
Endfunction

So that function would just use P to calculate the percentage, based on 10 loading stages. It just prints the values, but of course you would have a full screen sprite being made visible. Then once the loading is done, just delete the loading screens sprite and image. It's probably best to use bitmap text as well, then it's quite easy to have say, a loading bar. You could of course have a loading bar sprite, anything really - just keep in mind that the screen only updates 10 times, not constantly, so having animation on a loading screen just increases loading times and would look jerky.

Most people have an initiation routine, that loads up media, defines the variables and constants, basically get's the game ready to play. I prefer to keep the top part of a program with just a call to the init routine then right into the main loop, with the init routine right after the main loop, and the functions after that. Bigger projects really need to be split into separate code files, for the sake of the developers sanity more than anything.

I am the one who knocks...

Back to top

Profile PM Email

=PRoF=

21

Years of Service

User Offline

Joined: 17th Mar 2003

Location: Milton Keynes, UK

Posted: 18th Sep 2013 11:35

Link

I usually write a list of files which need loading in a text file, although you could just use an array to hold this data.

My MediaLoading() function processes this list one file at a time per loop, returning the current file count; allowing me to work out a percentage and display a progress bar.

Once all the files are loaded, it's on to the next bit

Also, the easiest way I found to actually make a progress bar was to use two sprites, one for the actual "fill" of the bar, one a black "cover" which gets resized to reveal the fill bar underneath.

Hope that helps

Back to top

Profile PM Email Website

baxslash

Valued Member

Bronze Codemaster

17

Years of Service

User Offline

Joined: 26th Dec 2006

Location: Duffield

Posted: 18th Sep 2013 12:39

Link

I use something similar to VanB. I initialise it like this:

+ Code Snippet

function initLoad()
    rem set up some global parameters
    global loaded as float
    global loadTotal as float
    global loadSpr as integer
    global loadText as integer
    global loadBarWidth as float
    loadBarHeight as float
    
    rem set basic data
    loaded = 0
    loadTotal = 200
    w# = getDeviceWidth()
    h# = getDeviceHeight()
    loadBarWidth  = w#*0.3
    loadBarHeight = h#*0.025
    
    rem create loading bar
    loadSpr = createSprite(0)
    setSpriteSize(loadSpr,0,loadBarHeight)
    setSpritePosition(loadSpr,w#/2 - loadBarWidth/2,h#/2)
    
    rem create text
    loadText = createText("Loading")
    setTextSize(loadText,loadBarHeight*2)
    setTextAlignment(loadText,1)
    setTextPosition(loadText,w#/2,h#/2 - loadBarHeight*2)
endfunction

Then after each item is loaded I run this function (requires no parameters):

+ Code Snippet

function load()
    rem update load total
    loaded = loaded + 1
    p# = loaded / loadTotal
    
    rem edit size of loading bar
    w# = getDeviceWidth()
    setSpriteSize(loadSpr,p#*loadBarWidth,getSpriteHeight(loadSpr))
    
    rem update display
    sync()
endfunction

Then after loading is done run this function:

+ Code Snippet

function endLoad()
    rem delete loading objects
    deleteSprite(loadSpr)
    deleteText(loadText)
endfunction

Hope that helps!

"Everything should be made as simple as possible, but not simpler."

Back to top

Profile PM Email

JohnnyMeek

11

Years of Service

User Offline

Joined: 23rd Apr 2013

Location: Slovenia

Posted: 18th Sep 2013 13:31

Link

Or use an animated sprite, to indicate loading.

Back to top

Profile PM

baxslash

Valued Member

Bronze Codemaster

17

Years of Service

User Offline

Joined: 26th Dec 2006

Location: Duffield

Posted: 18th Sep 2013 13:40

Link

That's another good way. Personally I like to have an idea how far from complete the loading process is. Not a big deal on smaller games but when a game gets big I like to know

"Everything should be made as simple as possible, but not simpler."

Back to top

Profile PM Email

Van B

Moderator

21

Years of Service

User Offline

Joined: 8th Oct 2002

Location: Sunnyvale

Posted: 18th Sep 2013 13:44

Link

Quote: "Or use an animated sprite, to indicate loading."

The problem with that is you'd have to sync the screen to show the animated sprite, and sync'ing the screen isn't possible while loading a file, and even if you sync'd as much as possible, the animation would still be choppy and it would bloat the loading time.

In other systems, a file will tend to be loaded bit by bit while the loading screen updates periodically, like a timer interrupt that shows the percentage and updates the screen. It's not possible to do that in AppGameKit, heck, it's a tricky process in any engine, even doing it natively with full control over file loading is still tricky. Put this way, animated loading screens... I guarantee that is something that marketing departments insisted on - there's no way a programmer would choose to do that

- it's like physics, the second that you measure something, the results get skewed - the second you measure loading progress, the results get bloated due to the time it takes to update the loading screen.

I am the one who knocks...

Back to top

Profile PM Email

baxslash

Valued Member

Bronze Codemaster

17

Years of Service

User Offline

Joined: 26th Dec 2006

Location: Duffield

Posted: 18th Sep 2013 14:39

Link

I think if it takes under a certain time to load (say five seconds) just adding the word "Loading" and a single sync() before loading is fine. 5+ seconds you really need some indication something is happening to avoid people getting annoyed, whatever you do here will have some kind of overhead. I would suggest that something giving a percentage in some way is a better User Experience than something generic EI. Not showing how long is left in any way.

"Everything should be made as simple as possible, but not simpler."

Back to top

Profile PM Email

Ancient Lady

Valued Member

20

Years of Service

User Offline

Joined: 17th Mar 2004

Location: Anchorage, Alaska, USA

Posted: 18th Sep 2013 17:03

Link

The short answer to the original post is 'No, there are no built in AppGameKit functions for showing loading progress.'

I built (in Tier 2) a class that creates a nice beveled bar and fills it as commanded by calls. Something along the same ideas as baxslash. I use MemBlocks to create the image and I like the affect.

This is a process that must be programmed at this point. As everyone else has mentioned.

Cheers,
Ancient Lady
AGK Community Tester and AppGameKit Master

Back to top

Profile PM

Naphier

13

Years of Service

User Offline

Joined: 2nd Oct 2010

Location: St Petersburg, Florida

Posted: 18th Sep 2013 17:49

Link

I worked this in dFenz to be covered by an intro animation.
The code is peppered with timed Sync() calls (one only happens if sync() hasn't been called in the past 16ms).
It worked out pretty well, but was a bit of a pain.

I seem to remember DBPro handling GIF animations on a separate thread (or something that simulated it). So you could show a loading GIF animation that plays without Sync() calls. Maybe that will happen with AppGameKit v2, but the procedure of loading media little by little and calling timed syncs throughout the process isn't too tough. It also gives you fuller control of what is happening, like allowing the user to skip the into if loading is done.

I think video is handled on a separate thread, so you may want to try that route.

Napland Games Facebook Twitter

Back to top

Profile PM Email Website

Marl

12

Years of Service

User Offline

Joined: 19th Nov 2011

Location: Bradford, UK

Posted: 19th Sep 2013 01:49 Edited at: 19th Sep 2013 01:51

Link

The generic standard these days seems to be a rotating icon - no indication of progress, just a spinning thing - this could easily be done as an animation.

I suppose it gets around the windows style progress bar which always seemed to shoot through the first 95% in no time, then spend four times as long doing the last 5%

I just pop a "please wait..." or similar on screen.

Attachments

Login to view attachments

Back to top

Profile PM Email

easter bunny

11

Years of Service

User Offline

Joined: 20th Nov 2012

Playing: Dota 2

Posted: 19th Sep 2013 03:30 Edited at: 19th Sep 2013 06:52

Link

Here's the code for a progress bar, the same as I use in Neon Bunniez:
If your game is on Android, It's important to call sync() around once a second, as if you wait too long without calling it, Android comes up with an ANR (Application Not responding) error, and users may close it and give you bad bad review

loadingimg=LoadImage("SPLASH.jpg")
    loading=Createsprite(loadingimg)
    SetSpriteSize(loading,100,100)
    SetSpriteDepth(loading,2)

amountimg=LoadImage("bar.png")
    amount=Createsprite(amountimg)
    SetSpritePosition(amount,5,5)
    SetSpriteSize(amount,90,2)
    SetSpriteDepth(amount,1)
    s#=1 `Scissor

do
        if s#<5
            s#=s#+1
        else
            exit
        endif
        SetSpriteScissor(amount,0,0,s#,20)
        sync()
    loop

rem LOAD SOME IMAGES/SOUND

do
        if s#<20
            s#=s#+1
        else
            exit
        endif
        SetSpriteScissor(amount,0,0,s#,20)
        sync()
    loop

rem LOAD SOME IMAGES/SOUND

do
        if s#<50
            s#=s#+1
        else
            exit
        endif
        SetSpriteScissor(amount,0,0,s#,20)
        sync()
    loop

rem LOAD SOME IMAGES/SOUND

do
        if s#<80
            s#=s#+1
        else
            exit
        endif
        SetSpriteScissor(amount,0,0,s#,20)
        sync()
    loop

rem LOAD SOME IMAGES/SOUND

do
        if s#<100
            s#=s#+1
        else
            exit
        endif
        SetSpriteScissor(amount,0,0,s#,20)
        sync()
    loop

Deletesprite(loading)
    Deletesprite(amount)
    DeleteImage(loadingimg)
    DeleteImage(amountimg)

+ Code Snippet

    loadingimg=LoadImage("SPLASH.jpg")
    loading=Createsprite(loadingimg)
    SetSpriteSize(loading,100,100)
    SetSpriteDepth(loading,2)

    amountimg=LoadImage("bar.png")
    amount=Createsprite(amountimg)
    SetSpritePosition(amount,5,5)
    SetSpriteSize(amount,90,2)
    SetSpriteDepth(amount,1)
    s#=1 `Scissor


    do
        if s#<5
            s#=s#+1
        else
            exit
        endif
        SetSpriteScissor(amount,0,0,s#,20)
        sync()
    loop

    rem LOAD SOME IMAGES/SOUND

    do
        if s#<20
            s#=s#+1
        else
            exit
        endif
        SetSpriteScissor(amount,0,0,s#,20)
        sync()
    loop

    rem LOAD SOME IMAGES/SOUND

    do
        if s#<50
            s#=s#+1
        else
            exit
        endif
        SetSpriteScissor(amount,0,0,s#,20)
        sync()
    loop

    rem LOAD SOME IMAGES/SOUND

    do
        if s#<80
            s#=s#+1
        else
            exit
        endif
        SetSpriteScissor(amount,0,0,s#,20)
        sync()
    loop

    rem LOAD SOME IMAGES/SOUND

    do
        if s#<100
            s#=s#+1
        else
            exit
        endif
        SetSpriteScissor(amount,0,0,s#,20)
        sync()
    loop


    Deletesprite(loading)
    Deletesprite(amount)
    DeleteImage(loadingimg)
    DeleteImage(amountimg)

attached is a fully working ZIP (uncompiled though, just open Test.cbp with AppGameKit IDE)

Audacia Games

Attachments

Login to view attachments

Back to top

Profile PM Email

Marl

12

Years of Service

User Offline

Joined: 19th Nov 2011

Location: Bradford, UK

Posted: 19th Sep 2013 05:35 Edited at: 19th Sep 2013 05:37

Link

You could probably wrap those into a select statement so that you only use sync() in one place.

+ Code Snippet

s=1	`Scissor
do
	setSpriteScissor(amount,0,0,s,20)
	select s
		case 1
			rem Load Some Images / Sound
		endcase
		case 2
			rem Load Some Images / Sound
		endcase
		case 3
			rem Load Some Images / Sound
		endcase
		case default
			exit
		endcase
	endselect
	inc s
	sync()
loop

Assuming I understood the code OK, though I don't get how a couple of things work;
1) s# starts at 1, so the first loop never runs
2) when s# reaches 5 in the second loop, it is not reset so it won't do loops 3 and 4.
So I made some assumptions in my version.

Back to top

Profile PM Email

easter bunny

11

Years of Service

User Offline

Joined: 20th Nov 2012

Playing: Dota 2

Posted: 19th Sep 2013 06:49

Link

1) Correct, it's not really nessacary
2) Whoops, I copied the first statement and forgot to fix the next few, it's fixed in the attachement, I'll fix the post as well

Audacia Games

Back to top

Profile PM Email

NoUJoe

10

Years of Service

User Offline

Joined: 8th Jul 2013

Location:

Posted: 19th Sep 2013 20:11

Link

Thanks everyone for the replies. I see I was on the right track, I will test out all the code that you've suggested and go from there!!

Back to top

Profile PM

victordavion

12

Years of Service

User Offline

Joined: 3rd Jan 2012

Location:

Posted: 24th Sep 2013 06:39 Edited at: 24th Sep 2013 06:40

Link

Not sure if anyone else is interested, but I had this problem, too, because until I solve my problem with Spine support, I'm having to load a lot of images for my high-res animations. I didn't like Android thinking the app stopped responding and I wanted a more accurate feedback for how far along the loading is...

So my solution was to devise a method of background pre-loading which also serves my purpose of a progress bar.

Testing on my Nexus 4, I can load approximately 15 images per second (these are high res, so most of you should probably get better results than that). So, essentially what I do is throttle my loading by loading 1 or more images per frame and call Sync() each frame.

I load up everything I need for Level 1 on the Title Screen so any sort of delay in the user pressing "Play" will be exploited for pre-loading. If they press "Play" I kill the throttle and load at maximum rate, which kills the FPS but the only thing updating is the progress bar anyway. This is just my preference.

Transitioning levels will be an "artform" on what needs to be preloaded and what can wait so that you stay optimized on memory usage, but likely a lot of stuff will be reused from one level to the next ( ie. the player images ).

Alright, so enough about that. I've included the 'library' of functions, commented sufficiently I hope, in the post as an attachment and the following code are the code dependencies for the library to work:

+ Code Snippet

Type _Image
Image as Integer
Path as String
EndType

#include "image_registry.agc"

#constant C_NUM_IMAGES <A large enough number to cover however images you think will need to be loaded at any one time, I personally use 1024>

global dim g_Image_Registry[C_NUM_IMAGES] as _Image

The library allows you to replace EVERY call to LoadImage() with the function ImageRegistry_GetImage(Path as String). There will be no duplicate loads of the same file.

What's nice is that you can do something like:

+ Code Snippet

ImageRegistry_Add("/media/Company/Backdrop.png")
ImageRegistry_Add("/media/Company/Copyright.png")
ImageRegistry_Add("/media/Company/Logo.png")
ImageRegistry_Add("/media/Company/Presents.png")

CreateSprite(1, ImageRegistry_GetImage("/media/Company/Backdrop.png"))

CreateText(1, "Pre-Load Progress: ")

do

for I = 1 to C_NUM_IMAGES
   if ImageRegistry_Load(I) then I = C_NUM_IMAGES + 1
next I

SetTextString(1, "Pre-Load Progress: " + Left(Str(ImageRegistry_GetLoaded() / ImageRegistry_GetTotal() * 100.0), 4) + "%")

Sync()
loop

You can add a time delay to that for loop to throttle the loading a bit ( if you need more responsiveness on a menu or something. ) You have the option to force the condition for a pre-load complete before moving to your next scene, or not. The pre-load idea is just simply exploit idle time to reduce further load time the player might experience.

I'm sure there could be a more elegant solution, but this has worked for me wonderfully.

In fact, I'm pretty curious if anyone has any comments. Positive or negative. Also, if anyone ends up using it in some fashion, let me know how it's worked for you and if you made any adjustments

[b][i]

Attachments

Login to view attachments

Back to top

Profile PM

NoUJoe

10

Years of Service

User Offline

Joined: 8th Jul 2013

Location:

Posted: 1st Oct 2013 08:34

Link

Whoa!! I just skimmed through your post. It's 6:30 am so I'll have a proper look later on. From what I can gather is that you have a very similar idea to me. I like the idea of pre loading. I will run your code tomorrow and tell you what I think!!

Back to top

Profile PM

Sorry your browser is not supported!

AppGameKit Classic Chat / Are loading screens/bars possible in tier 1?

Attachments

Attachments

Attachments