Loading Screen check if loaded:

This code works as expected the loaded variable increases as the files finish loading.

The next step is to check when the loading is done and then append a button for the user to press to start the scene and call the init function.

To check if the loading is done you simply need to check that the loaded var is greater than or equal to the totalNeededToLoad var.

The only thing left to do is create a visual for the loading bar. This can be done through css, making a bar with its width equal to 100% divided by totalNeededToLoad and then as each file loads increment the width by this found fraction.


Loading screen creation:

Whilst examining other online games I have picked up some knowledge of how to create my own loading screen and loading functions.

The way I’m going to attempt this is by setting up variables such as totalNeededToLoad and Loaded, then I will increment Loaded variable each time a file has finished loading. For the sound files this code will go inside my buffer function and inside the textureLoader.load(‘fileName’, function(){ loaded++ } for my image files.

Loading screen research:

I have been searching around for way of creating a loading screen. Nearly every game has a loading screen, but there does not seem to be a set way of implementing it. Three.js has a loading screen scene type of thing but you need to create a two separate scenes, one for the loading and then the main scene that can be initiated after all of the files have been loading. This seems overly complicated and wont add much value to my project but will consume a lot of valuable time at this point.

From all of this research I have decided that I may be able to create my own loading screen.

Sound fix and review two:

In order to fix the latency problem, I created a buffer function which downloads all of the files into the users cache then I can call the sounds as many times as needed without having to downloading them any duplicate times thus stopping the latency issue I was previously experiencing.

If I have time later I plan to pass the mass of the collision object as a parameter of the play sound function. With this parameter I could then control to pitch value of the sound through another node, which will give the user indication of the size of the object they have collided with through sound.

Over all I am happy with how my sounds are working. I am not so happy with the setTime function I’ve used to call my ambient track a couple of seconds after initialisation. If the user has a slow internet connection then the sound may still not have loaded by the time the timeout function is called so the track may not play.

I am going to look into creating a loading screen, which will load my sound and image files before the user can initiate my project.

Sound overview:

I was happy with the way my sounds worked, for on collision the correct sound played. However I started to experience some latency on collision. I could only think that it was caused by the sounds for that’s all that I had changed since it ran at a constant 60fps.

I conducted some more research and found that I was not caching my sounds so they were being re-downloaded on every collision so I set out to fix this problem.

Collision sound:

Implementing collision sounds was relatively easy at first. After learning how to use the HTML 5 audio API for the backing track I could replicate the same process for the collision sounds and then simply call the sound play function inside my collision function. Each sound needed its own volume node with its values being updated with the change volume slider.

Volume toggle review:

The creation of the toggle button didn’t work quite as well as I had presumed. On init I called the ambient loop to play however I didn’t do this through the toggle function. I  called the original sound to play on init so when the toggle button is pressed to stop the track, it starts another version of the ambient track to play simultaneously instead. This was a simple fix in the end even though it took me a while to figure it out. Instead of calling the play sound function I simply called the toggle function on init as an alternative.