somnath281 Posted September 24, 2015 Share Posted September 24, 2015 Anybody knows how to customize babylon loading screen. DesignVibe 1 Quote Link to comment Share on other sites More sharing options...
Ahiru Posted September 24, 2015 Share Posted September 24, 2015 Did you check this link? http://pixelcodr.com/tutos/preloader/preloader.html With "engine.loadingUIBackgroundColor" and "engine.loadingUIText" you can set easy properties, if you want more have a look into: https://github.com/BabylonJS/Babylon.js/blob/master/src/babylon.engine.js Line 1854 the LoadingUI starts, and you can see what you can set - have fun! Quote Link to comment Share on other sites More sharing options...
somnath281 Posted September 24, 2015 Author Share Posted September 24, 2015 Thanks Quote Link to comment Share on other sites More sharing options...
Dad72 Posted September 24, 2015 Share Posted September 24, 2015 Full documentation here: http://doc.babylonjs.com/tutorials/How_to_use_AssetsManager#using-loading-screen Quote Link to comment Share on other sites More sharing options...
Ahiru Posted September 24, 2015 Share Posted September 24, 2015 "FULL" documentation ... Yeah, but the loading-screen part (especially for customisation is a bit ... uhhmmm ... limited??) Quote Link to comment Share on other sites More sharing options...
RaananW Posted September 24, 2015 Share Posted September 24, 2015 I was just thinking it would be nice if you could create your own custom loading screen and add it to the engine.I am pushing a PR right now to allow exactly that, I will have to document it thoroughly.In general it would be possible to create a different loading screen and set the engine to use it instead of the default one. altreality 1 Quote Link to comment Share on other sites More sharing options...
RaananW Posted September 24, 2015 Share Posted September 24, 2015 So, https://github.com/BabylonJS/Babylon.js/pull/700 is waiting for approval. I don't want to merge it just yet, as it includes two small breaking changes. Short documentation:creating a new ILoadingScreen implementation (TypeScript) or a javascript class with the functions displayLoadingUI() and hideLoadingUI() and setting the loadingScreen variable in the engine will replace the loading screen. For example (TypeScript) : export class SillyLoadingScreen implements ILoadingScreen { public displayLoadingUI(): void { alert("loading, can't you see?"); } public hideLoadingUI(): void { alert("Finished loading, ready!"); }}engine.loadingScreen = new SillyLoadingScreen(); To change the text and background color of the loading screen one would need to do that:TypeScript: var loadingScreen = <DefaultLoadingScreen> engine.loadingScreen;loadingScreen.loadingUIText = "Yo what's up dude, my assets are loading!";loadingScreen.loadingUIBackgroundColor = "theWayILikeMyCoffee"; //or any other CSS conform color or JavaScript engine.loadingScreen.loadingUIText = "JS < TS or > TS?!";engine.loadingScreen.loadingUIBackgroundColor = "bottleGreenWithABitOfOlive"; //or any other CSS conform color And that's about it. The rest will work automatically. Dad72 and altreality 2 Quote Link to comment Share on other sites More sharing options...
Dad72 Posted September 24, 2015 Share Posted September 24, 2015 "FULL" documentation ... Yeah, but the loading-screen part (especially for customisation is a bit ... uhhmmm ... limited??) Yes, we agree that it is not "Full". "little" then. RaananW, I think that DK did not want that we can change the default Loading Babylon was the signing of Babylon. his trademark. Quote Link to comment Share on other sites More sharing options...
RaananW Posted September 24, 2015 Share Posted September 24, 2015 hmmm :-) ok, I can remove the PR. This is why I haven't merged it yet :-) It can be anyhow changed, the functiosn are there and can be altered. Anyone not interested in changing it won't, which will still leave the trademark there, I guess. Quote Link to comment Share on other sites More sharing options...
Dad72 Posted September 24, 2015 Share Posted September 24, 2015 Must see what DK thinks, maybe he'll change of opinion. Quote Link to comment Share on other sites More sharing options...
jerome Posted September 24, 2015 Share Posted September 24, 2015 The fact a logo is copyrighted or a trademark doesn't mean you can't use another one.The framework is under the Apache 2.0 Licence, remember. You can do whatever you want as long as you respect this licence. Quote Link to comment Share on other sites More sharing options...
Dad72 Posted September 24, 2015 Share Posted September 24, 2015 Yes Jerome can use another one, but do not modify the existing one in the engine. I had ask once DK if could change it, he had told no. But that may changed Quote Link to comment Share on other sites More sharing options...
RaananW Posted September 24, 2015 Share Posted September 24, 2015 I have no intention to do anything against DK's wish. And I will fully understand if he won't want to have something like that in the framework... If not in the main framework, this could anyhow be a nice BJSX extension if people really need it :-) exactly the point of this repo... Quote Link to comment Share on other sites More sharing options...
davrous Posted September 24, 2015 Share Posted September 24, 2015 Hi, I've already discussed that with deltakosh. As some people are using Babylon.js without mentioning it sometimes, we'd like to keep our "trademark" visible in a way or another. That said, you can do whatever you like thanks to the licence in the source code. We just want not to have this feature in our main official repo. People who want a custom loader will have to write it themselves David Quote Link to comment Share on other sites More sharing options...
jerome Posted September 24, 2015 Share Posted September 24, 2015 clear and legitimate Quote Link to comment Share on other sites More sharing options...
davrous Posted September 24, 2015 Share Posted September 24, 2015 Ok, I've just got a phone call with Deltakosh. We've reviewed RaananW's code and it's pretty cool. So, we're going to accept as it doesn't really break what we'd like to do. People will still have to code more or less their own loading screen, which is fine. If you've got an idea on how to inject a subtle reference somewhere that the current project is running on top of babylon.js, feel free to share . We're still have the hello message in the engine startup. David Dad72 and jerome 2 Quote Link to comment Share on other sites More sharing options...
RaananW Posted September 24, 2015 Share Posted September 24, 2015 I'll make the adjustment David wanted and commit them soon. I'm happy it all worked out ☺Made the changes, I want a final look from David before it's merged. Will then update the documentation. Quote Link to comment Share on other sites More sharing options...
Flomotion Posted September 26, 2015 Share Posted September 26, 2015 Will we be able to use a background image as well? And a progress bar. It seems a bit strange to me that this can't be done because it won't promote BabylonJS enough.I think a text or logo somewhere on the screen (flexible position, set by user) with 'powered by BabylonJS' could be enough. This can be the top layer that can't be turned off. That will give BabylonJS the attention it deserves and it gives users the option to create their own loading screen design. And place that 'powered by BabylonJS' at a position that agrees with the design. jsdream and Convergence 2 Quote Link to comment Share on other sites More sharing options...
Dad72 Posted December 7, 2015 Share Posted December 7, 2015 I am of the same opinion as Flomotion. I think the loading can receive a layer that we can change at will and another layer that can not be changed for brand Babylon.It would be really nice to have a loading progress bar with document.createElement("progress") integrateRaanan I did not find your documentation that or a tutorial to change the loading screen Flomotion 1 Quote Link to comment Share on other sites More sharing options...
RaananW Posted December 7, 2015 Share Posted December 7, 2015 Ah!Yes, that's because it doesn't exist. Will add that page pretty soon. Flomotion 1 Quote Link to comment Share on other sites More sharing options...
RaananW Posted December 11, 2015 Share Posted December 11, 2015 http://doc.babylonjs.com/tutorials/Creating_a_custom_loading_screenEnjoy! Dad72 1 Quote Link to comment Share on other sites More sharing options...
Flomotion Posted January 4, 2016 Share Posted January 4, 2016 I'm trying to implement your example Raanan. But I can't understand this part: To create a new loading screen, you will have to create a simple class, implementing the following interface:interface ILoadingScreen { //What happens when loading starts displayLoadingUI: () => void; //What happens when loading stops hideLoadingUI: () => void; //default loader support. Optional! loadingUIBackgroundColor: string; loadingUIText: string;}It results in an error and I'm not sure how to use it. Could you show it in a little example? Quote Link to comment Share on other sites More sharing options...
RaananW Posted January 4, 2016 Share Posted January 4, 2016 Hi Flomotion, in the page you found the interface at, you can find two examples - in typescript and javascript. I am not sure what error are you getting. If you are using TypeScript, this is the interface you can implement in order to have a working Loading Screen. Do you want to show what you tried? Quote Link to comment Share on other sites More sharing options...
RaananW Posted January 4, 2016 Share Posted January 4, 2016 A very quick demo (using the very simple code I wrote for the doc): http://www.babylonjs-playground.com/#1WXS3J Quote Link to comment Share on other sites More sharing options...
Flomotion Posted January 4, 2016 Share Posted January 4, 2016 I've pasted in your code from the page. But only saw the 'loaded' message. And the standard loading screen didn't disappear. But I think I'll take a good look at the playground example you just made. Thank you very much! ---and just found what I did wrong. I placed the loading screen declaration in the wrong place. thanks again! Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.