Вы здесь
Главная > Мой блог > Unity3d > Unity WebGL кастомизация Progress Bar

Unity WebGL кастомизация Progress Bar

When making a browser-based game, you’re asking players to be generous with their time and wait patiently while your content downloads. This means how you indicate download progress in your preloader is super important. A Unity webGL custom progress bar is essential.

The default Unity webGL progress bar is a awful.

  • It doesn’t update live, instead jumping in big chunks.
  • Doesn’t give any idea as to how large the download is.
  • When the download completes it just hangs for up to two minutes without any indication as to what’s going on!

A terrible user experience, meaning most potential players will drop off before your game even loads. Let’s look at how we can improve this.

Here’s an example of a Unity webGL game with a preloader that fixes these issues. This is what we’re going to make.

It’s best to start by basing a new template off the default one (I wrote a guide on how to set up templates here).

By default, the code that affects how our preloader works is located in TemplateData/unityProgress.js. Looking through this file you’ll see that it’s adding all the html elements to display the progress bar programmatically. This is a bit difficult to work with (and not really the way Javascript is intended to be used), so the first thing to do is move all the html into our index.html file instead.

Setting Up a Basic Unity WebGL Custom Progress Bar

Strip all the display code from unity progress.js until you’re left with:

Next we make the html + css progress display. The things I find pretty necessary are:

  • A Loading Bar
  • A Loading bar background
  • Progress update text (“X/Y downloaded” etc)

All wrapped in its own div in index.html, just after the canvas:

Add some styling (inline or in the header or linked in a separate file). I’ll go with a style that fits into a full browser window template. First we centre the whole box:

Then sort out the sizing, colouring and positioning of the loading bars:

And just style up the loading progress text a tiny bit too:

Once the loading information displays the way you want it to, we just need to connect it up to the loading data in unity progress.js.

Hide everything when loading is complete in SetProgress() and Clear(), and connect up the progress to your CSS and loading message in Update():

Advanced Preloader Features

Now we’ve got our own tidy progress bar and update text, but it still moves in big chunks instead of smoothly growing, and doesn’t feel like it’s making progress after the download completes. Let’s fix the jumps using TweenJS, and we’ll display a spinner gif after the download reaches 100% to keep some motion on screen.

Download the TweenJS package and copy over the CSSPlugin.js, then attach it to your index.html:

Then make or download a gif spinner, and add it to your loader html:

Now just connect these two parts:

Done! Now you have an elegant preloader with much nicer UX that keeps your player up to date with exactly how close they are to playing the game.

Tips and Pitfalls

  • For your loading text, use a monospaced font. As progress grows, the visual size of the load should grow. Using a non-monospaced font will cause the visual size to jitter instead.

Run into any problems? Need my help on making some lovely UX  in browser games? Get in touch.

Источник: https://ocias.com/

Добавить комментарий

Top