{"id":3793,"date":"2015-04-23T01:42:36","date_gmt":"2015-04-22T22:42:36","guid":{"rendered":"http:\/\/unitycoder.com\/blog\/?p=3793"},"modified":"2015-04-24T23:37:30","modified_gmt":"2015-04-24T20:37:30","slug":"webgl-build-custom-loading-effect","status":"publish","type":"post","link":"https:\/\/unitycoder.com\/blog\/2015\/04\/23\/webgl-build-custom-loading-effect\/","title":{"rendered":"WebGL Build – Custom Loading Effect"},"content":{"rendered":"

\"webgl_loader_effect\"<\/a><\/p>\n

Webgl build progress meter seems stuck at the end sometimes,
\nso it would be nice to have some “loading\/uncompressing” effect there..<\/p>\n

WebGL example:<\/strong>
\nhttp:\/\/unitycoder.com\/upload\/demos\/CustomWebGLLoader\/<\/a> *its copy of my LudumDare32 entry<\/em><\/a><\/p>\n

– Caching seems to cause some problems though, effect starts too early or too late?
\n– Probably need to use some background worker, as it hangs on the final step..? (or use CSS animations, they are in separate thread?)
\n– Could make it as a ready template, so no need to edit code after publish
\n– Using animated gif as background instead would be better, no need javascript timers<\/p>\n

Steps for adding the effect to webgl build: (^or check source of that webgl page)<\/em><\/p>\n

 <\/p>\n

\/\/ OPEN FILE<\/strong>
\nindex.html<\/p>\n

\/\/ FIND LINES<\/strong>
\n<p class=”footer”>&laquo; created with <a href=”http:\/\/unity3d.com\/” title=”Go to unity3d.com”>Unity<\/a> &raquo;<\/p>
\n<script type=’text\/javascript’><\/p>\n

\/\/ INSERT AFTER THOSE LINES<\/strong>
\nvar bgTimer=null;
\nvar originalBgColor = document.getElementsByTagName(“body”)[0].style.backgroundColor;
\nfunction LoaderEffect() {
\ndocument.getElementsByTagName(“body”)[0].style.backgroundColor = “#” + (Math.round(Math.random() * 0XFFFFFF)).toString(16);
\n}
\nfunction StopLoaderEffect()
\n{
\nwindow.clearInterval(bgTimer);
\ndocument.getElementsByTagName(“body”)[0].style.backgroundColor = originalBgColor;
\n}<\/p>\n

\/\/ FIND LINE<\/strong>
\nreturn function(text) {<\/p>\n

\/\/ INSERT AFTER THAT LINE<\/strong>
\nif (text.indexOf(“Creating OpenGLES2.0 graphics device”)>-1) StopLoaderEffect();<\/p>\n

\/\/ FIND LINE<\/strong>
\nprintErr: function(text) {<\/p>\n

\/\/ INSERT AFTER THAT LINE<\/strong>
\nif (text == “run() called, but dependencies remain, so not running”)\u00a0 bgTimer = window.setInterval(“LoaderEffect()”,100);<\/p>\n

—<\/p>\n

References:<\/strong> (for javascript)
\n– http:\/\/www.w3schools.com\/jsref\/met_win_setinterval.asp<\/a>
\n– http:\/\/www.w3schools.com\/jsref\/met_win_clearinterval.asp<\/a>
\n– http:\/\/www.w3schools.com\/jsref\/prop_style_backgroundcolor.asp<\/a>
\n– http:\/\/stackoverflow.com\/questions\/1484506\/random-color-generator-in-javascript<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"

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? […]<\/p>\n","protected":false},"author":1,"featured_media":3796,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2}},"categories":[420,3],"tags":[568,50,733,320],"class_list":["post-3793","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutorials","category-unity3d","tag-custom","tag-effect","tag-loading","tag-webgl"],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/unitycoder.com\/blog\/wp-content\/uploads\/2015\/04\/webgl_effect.jpg?fit=680%2C414&ssl=1","jetpack_shortlink":"https:\/\/wp.me\/p1KTaT-Zb","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/unitycoder.com\/blog\/wp-json\/wp\/v2\/posts\/3793","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/unitycoder.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/unitycoder.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/unitycoder.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/unitycoder.com\/blog\/wp-json\/wp\/v2\/comments?post=3793"}],"version-history":[{"count":10,"href":"https:\/\/unitycoder.com\/blog\/wp-json\/wp\/v2\/posts\/3793\/revisions"}],"predecessor-version":[{"id":3809,"href":"https:\/\/unitycoder.com\/blog\/wp-json\/wp\/v2\/posts\/3793\/revisions\/3809"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/unitycoder.com\/blog\/wp-json\/wp\/v2\/media\/3796"}],"wp:attachment":[{"href":"https:\/\/unitycoder.com\/blog\/wp-json\/wp\/v2\/media?parent=3793"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/unitycoder.com\/blog\/wp-json\/wp\/v2\/categories?post=3793"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/unitycoder.com\/blog\/wp-json\/wp\/v2\/tags?post=3793"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}