Loading is dull…. There's no two ways about it. Sitting and watching a screen whilst something loads is tedious for the user. Developers have known this since the dawn of loading screens and adopted several different methods to overcome it. One of the most universally adopted is loading screen messages. These can come in the form of in game hints and tips or quirky little phrases to make you laugh. These are usually fairly rudimentary, A simple array with a loading message chosen at random. However if your game or app is popular and used often then it can quickly go from a charming quirk to mundane and tedious. Of course the solution is to add more loading messages.

Splain overview.

This is where Splain comes in. Splain is a library for building dynamic strings using templates and tokens. Instead of specifying each loading message we can make templates to automatically add variety. This way we get tens (or even hundreds) of potential loading messages every time we add just one new token.

In order to understand how our loading screen is going to work we need to understand a little about howSplain works. Splain lets us introduce tokens {{like this}} which represent a selection from a corresponding dictionary. The dictionary is just a big tree ot strings Splain can choose from. When a string with tokens is then processed a corresponding dictionary item is swapped into its place. So for example we could create a entry called loading and add to it:

In the code above we define Splain (This is needed if you installed splain via NPM. If you want to run these examples in your dev tools Splain should already be on the page so simply omit the first line and copy and paste the example into the console). We then add to its dictionary an entry called loading messages and include an array of tokens. We then create a method that processes our template {{loading message}} and outputs it to the console. Finally we call that function at an interval.

So we can see each time splain process is called the message is regenerated picking a new token from the loading messages dictionary entry. This is all well and good but so far this doesn't achieve much that a simple array wouldn't. To start to see the power of splain we can notice that the word loading is common in all these strings so we can update our example as follows:

Well an improvement but still nothing too fancy. What if we decide to add the message `signing in`? Our loading message would then look stupid as it could be processed as `loading signing in`.

We can further improve our loading message by understanding two things very important things. Splains dictionaries are a multi layered JSON type structure. and secondly the dictionary entries can themselves contain tokens. These features allow us to easily refactor our example from above:

Now we can see that the message is starting to get a bit more clever. We have built up a relationship with some templates having tokens themselves. So now loading.message will either be compiled as `signing in` and left like that. Or it will change to `loading {{loading.media}}` which will then compile that template in turn. This is where we are starting to see some payoff. Up until now every message we added was only adding one potential message. Now we can add lots with each addition, for example:

Wow, we’ve only added two messages (compiling and extracting) but we’ve effectively added 8. Now the eagle eyed among you might be spotting whats coming next:

Much neater, but we can add more! Lets add potential prefix and suffix comments. So for example a loading message might say `currently loading assets`. The word currently is not necessary to the sentence but provides variety. We can also do something similar after the message. Now we might not always want to compile these extras. We could include a bunch of empty strings or add several versions of the same message without these extra. Fortunately Splain provides an optional operator: ?. on its own it will exclude the preceding token 50% of the time. You can instead give it a number to decrease the chance. For example {{example?4}} would be a ¼ chance.

Now we have a system with only one message. That message however comprises of only 14 Strings but will be compiled in hundreds of different ways now when we add a single entry into the media dictionary we will be adding 10’s of potential new loading messages keeping it fresh all the time. Because we’ve extracted out the complexity of the message we are free to add other variants too allowing us to build up a complex and rich output. I have followed on with this idea and hooked it into a jquery element to produce the final outcome: