23
2015
WebGL Build – Custom Loading Effect
Webgl build progress meter seems stuck at the end sometimes,
so it would be nice to have some “loading/uncompressing” effect there..
WebGL example:
http://unitycoder.com/upload/demos/CustomWebGLLoader/ *its copy of my LudumDare32 entry
– Caching seems to cause some problems though, effect starts too early or too late?
– Probably need to use some background worker, as it hangs on the final step..? (or use CSS animations, they are in separate thread?)
– Could make it as a ready template, so no need to edit code after publish
– Using animated gif as background instead would be better, no need javascript timers
Steps for adding the effect to webgl build: (^or check source of that webgl page)
// OPEN FILE
index.html
// FIND LINES
<p class=”footer”>« created with <a href=”http://unity3d.com/” title=”Go to unity3d.com”>Unity</a> »</p>
<script type=’text/javascript’>
// INSERT AFTER THOSE LINES
var bgTimer=null;
var originalBgColor = document.getElementsByTagName(“body”)[0].style.backgroundColor;
function LoaderEffect() {
document.getElementsByTagName(“body”)[0].style.backgroundColor = “#” + (Math.round(Math.random() * 0XFFFFFF)).toString(16);
}
function StopLoaderEffect()
{
window.clearInterval(bgTimer);
document.getElementsByTagName(“body”)[0].style.backgroundColor = originalBgColor;
}
// FIND LINE
return function(text) {
// INSERT AFTER THAT LINE
if (text.indexOf(“Creating OpenGLES2.0 graphics device”)>-1) StopLoaderEffect();
// FIND LINE
printErr: function(text) {
// INSERT AFTER THAT LINE
if (text == “run() called, but dependencies remain, so not running”) bgTimer = window.setInterval(“LoaderEffect()”,100);
—
References: (for javascript)
– http://www.w3schools.com/jsref/met_win_setinterval.asp
– http://www.w3schools.com/jsref/met_win_clearinterval.asp
– http://www.w3schools.com/jsref/prop_style_backgroundcolor.asp
– http://stackoverflow.com/questions/1484506/random-color-generator-in-javascript
Related Posts
2 Comments + Add Comment
Leave a comment
Recent posts
- Create Scene Thumbnail Image using OnSceneSaved & OnPreviewGUI
- webgl+javascript TTS
- Using Moonsharp (LUA) + Unity Webgl
- Using 3D gameobject prefabs with Unity Tilemap + NavMesh Surface
- Custom Unity Hub Project Template Preview Image/Video (using HTML+CSS in package description)
- Check if point is inside polygon 2D (using line intersection)
- UnityHub: Enable Create Project Button (without having to select Cloud Organization)
- UI: Make Tooltip background fit Text content length
- Pong-Wars in Unity
- Install Android SDK+JDK+NDK for Unity (without AndroidStudio or Unity Hub)
- UnityHub: Add support for custom project title (instead of folder name) or use ProductName
- Testing Unity MUSE AI
webgl progress bar+size loader:
http://forum.unity3d.com/threads/better-loading-indicator-in-webgl.335481/
“You can replace the loading screen with whatever you want. It is a script called UnityProgress.js in the default template”
http://forum.unity3d.com/threads/embedding-unity-webgl-in-a-homepage.348594/#post-2263913