Sign in to follow this  

Animated Loading Screen while Loading Game

Recommended Posts

Hi everyone! Coding question incoming...

I have a number of loading functions (asset loading, world generation, things like that) and I want to have a loading screen running while loading. Something like a loading spinner or progress bar. But here's the thing, I understand JavaScript is single-threaded. So, how do I do simultaneous visuals and loading? Is there some way to run both tasks in parallel? Can I somehow create a CSS loading spinner and overlay it onto my JS canavs? (I have no experience with CSS) 



Share this post

Link to post
Share on other sites

On paper, the easy way is to load a tiny JS script, totally decoupled from your main application, and have that power a loading screen. However, as you mentioned, the whole single-threaded thing will typically cause jank, often not too much (depending how exactly you are loading things) but sometimes an unacceptable amount.

Just search for CSS loading spinner, such as, then copy-paste one you like if you don't want to create one yourself. Unless your target market is a browser many many many years old, CSS animations get their own thread well away from JS, so they won't jank.

You can use JS to control CSS animations or transitions to do a progress bar if you want. The CSS transition that moves the element (or resizes it) will be jank-free and you won't notice when JS is blocked to control that CSS as a loading progress bar is not expected to be smooth anyway.

You can even go all fancy and stuff and dump loading in to a web worker, which kind-of gets its own thread, so your main thread can do the animation, which is pretty normal for non-JS platforms. However, depending on what you're doing, this won't always work anyway. Plus, its taking a sledgehammer to stick a tack in the wall. But, it is _an_ option.

I don't think the above answer solves your problem, apologies if I'm wrong but, having poked through the code, it looks all JS powered and will be susceptible to block-jank.

Also, be aware, your loading operations will be mostly asynchronous (unless you've really mucked things up), you might do some synchronous work to manage the asset after load, but, typically that is a tiny bit of work (edit: oh, you mention world gen, yeah, that'll block things up).

Also also, try it under typical conditions. Depending on your visual style, a little bit of jank in a loading screen is often acceptable to a user. The real trick, of course, is to work out a way you don't need that loading screen at all, and, if you can't, make it absolutely as short as it can possibly be.

A trick for world gen (again, this sounds like overkill most of the time), or any long-running task, can be to use generator functions and then bail out every 16ms of so to let stuff animating actually animate to 60fps. As crazy as this sounds, React (a popular front-end rendering library) has a scheduler now that basically does this very thing (its called Fiber and I don't think it doesn't use generators, but the architecture and theory is the same to the concept above of 'bailing' out occasionally). I've done this with line-of-sight operations, but, it quickly proved more trouble than it was worth. Still, it is _another_ option.

Share this post

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.