Write a snippet of JavaScript that can float a loading image before the loading screen shows up

Post reply
0 favourites
  • 13 posts
From the Asset Store
Write The Missing Letter For Kids - Educational Game
$14 USD
Game with complete Source-Code (Construct 3 / .c3p) + HTML5 Exported.
R Games's avatar
R Games

  • Hi everyone,

    I need someone for a very specific task.

    If I'm correct, Construct 2 loads the whole code of the project BEFORE the default loading screen (HTML5 default bar) that is quickly shown BEFORE the customized loading screen shows up.

    To show that, I did a simple CAPX ( drive.google.com/file/d/1tdF6ZSUOWY-8JPNaZyrvb7bgqYdYFLnT/view ) of a simple project with no images and just a lot of events which are never played. It takes a while to show up the loading screen when exported as an APK ( drive.google.com/file/d/1HgzW6djmUUiCZwzBLHJB21MNLis6UQog/view ).

    During that first initial load time, when exported to a mobile device, the screen stays black. While for small project that time is very short, for big projects it could be really long. My game, Healer's Quest, is actually 45K events, and the black screen time is actually of 15 seconds on a quite good smartphone... While Apple and Google guidelines says this time could be of maximum 2 seconds.

    When I asked Ashley about it, he suggested the following: "I think your best bet is to write a snippet of JavaScript that can float a loading image over the canvas until the game reaches 'On start of layout'."

    Reference thread: construct.net/en/forum/construct-2/how-do-i-18/how-to-reduce-the-black-screen-138455

    So basically I want to show an image I'll make specifically for that loading time instead of the black screen.

    If there could be a small rotating image to show activity is going on, it would be even better, but I can live without it.

    Can anyone write this snippet of Javascript and help me implement it into the code of my game?

    Please tell me how much you would charge for it. If you prefer to discuss it by email, my address is rablogamesmis@gmail.com

    Thanks!

  • Wouldn't it be simpler to use a loading image as a background? Something like: 

    html{
 background:url("https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/0.16.1/images/loader-large.gif") no-repeat center 50vh;
}

    Had a bit more of a think about this...

    Add the following code to your index.html, just after the canvas element: 

    <div id="canvas-loader" style="background:url('https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/0.16.1/images/loader-large.gif'); height:70px; width:70px; background-repeat:no-repeat; display:block; position:absolute; left:calc(50% - 35px); top:calc(50% - 35px)"></div>

    Add the Browser object to your project, then add an On Start of Layout event, with the Execute JavaScript action.

    Add the following code: 

    "document.getElementById('canvas-loader').style.cssText = 'display:none;'"

    Haven't tested it, might work...

  • Try Construct 3

    Develop games in your browser. Powerful, performant & highly capable.

    Try Now Construct 3 users don't see these ads

  • Hi Elliott and thanks for your reply.

    I have no idea, I know nothing about Javascript. :D

    If you could tell me how to do it (namely, where should I put the image and where should I paste the code), it would be great, and I'll do a test to see if it works.

    Thanks a lot for the suggestion, it's greatly appreciated!

  • Hi Rable - maybe try the following:

    Add the following code to your index.html, just after the canvas element:

    <div id="canvas-loader" style="background:url('https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/0.16.1/images/loader-large.gif'); height:70px; width:70px; background-repeat:no-repeat; display:block; position:absolute; left:calc(50% - 35px); top:calc(50% - 35px)"></div>

    Add the Browser object to your project, then add an On Start of Layout event, with the Execute JavaScript action.

    Add the following code:

    "document.getElementById('canvas-loader').style.cssText = 'display:none;'"

    Haven't tested it, might work...

  • Thanks for the suggestion.

    I tried it and it didn't work. Here is where I pasted the code in case I misplaced it (pasted at line 17): 

    <body> 
	<div id="fb-root"></div>
	
	<div id="c2canvasdiv">
		<!-- The canvas the project will render to. If you change its ID, don't forget to change the
		ID the runtime looks for in the jQuery events above (ready() and cr_sizeCanvas()). -->
		<canvas id="c2canvas" width="1366" height="768">
			<!-- This text is displayed if the visitor's browser does not support HTML5.
			You can change it, but it is a good idea to link to a description of a browser
			and provide some links to download some popular HTML5-compatible browsers. -->
			<h1>Your browser does not appear to support HTML5. Try upgrading your browser to the latest version. <a href="http://www.whatbrowser.org">What is a browser?</a>
			<br/><br/><a href="http://www.microsoft.com/windows/internet-explorer/default.aspx">Microsoft Internet Explorer</a><br/>
			<a href="http://www.mozilla.com/firefox/">Mozilla Firefox</a><br/>
			<a href="http://www.google.com/chrome/">Google Chrome</a><br/>
			<a href="http://www.apple.com/safari/download/">Apple Safari</a></h1>
		</canvas>
		<div id="canvas-loader" style="background:url('https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/0.16.1/images/loader-large.gif'); height:70px; width:70px; background-repeat:no-repeat; display:block; position:absolute; left:calc(50% - 35px); top:calc(50% - 35px)"></div>
	</div>
	
	<!-- Construct 2 exported games require jQuery. -->
	<script src="jquery-2.1.1.min.js"></script>

    I believe everything has to be done outside of Construct, because the image has actually to be displayed before "at the start of layout".

  • I've just tried it on my end and it works fine (admittedly I used C3, but that shouldn't make a difference).

    Everything kind of is occurring outside of Construct - by editing the index.html you're changing the webpage that effectively frames your game. The HTML provided will make an image sit the center of the window, on top of everything below it (including a canvas, which I think might be causing the issue).

    The browser action uses some JS to style this new element out of existence.

    What exactly happens? Is it hosted online?

    EDIT//

    On the off chance that the canvas is render blocking - please put the HTML snippet just above the fb-root div

  • Oh sorry Elliott, it's actually working!

    As stupid as it sounds when I exported the game, it created an new icon of the game on my phone while the old one was still at the previous place. I simply launched the wrong version of the game as I though it would be updated, as it always happens.

    Can this little picture be customized ? It's very pixelated in its current state.

    In the meantime, the problem is solved as at least something appears on the screen!

    Thanks a lot! :)

  • Glad it's working Rable!

    You can certainly replace the loading image with whatever you want; in the following snippet: 

    <div id="canvas-loader" style="background:url('https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/0.16.1/images/loader-large.gif'); height:70px; width:70px; background-repeat:no-repeat; display:block; position:absolute; left:calc(50% - 35px); top:calc(50% - 35px)"></div>

    Replace the following URL: 

    background:url('https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/0.16.1/images/loader-large.gif')

    With whatever image URL you desire; it's currently using one that I pinched from a CDN:

    ohadsoft.com/2014/08/getting-spinner-gifs-from-a-cdn

    It's worth noting that the sizing is made specifically for that asset, which is a 70x70 square. If you were to change the dimensions you would need to update the height and width, which are inlined: 

     height:70px; width:70px;

    And the positioning: 

    left:calc(50% - 35px); top:calc(50% - 35px)

    Which uses a simple calculcation to position the item in the center; "50% - (imageWidth/2)" - so if your new asset is 100px, it would be 50% - 50px

    Hope this helps

  • It definitely helps!

    I'll just make a small little gif and upload it to my server and everything will be perfect!

    Thank you so much! :)

  • No worries, hope you get all working :)

  • To keep you updated, I've been able to have everything work just right. I also managed to add the loading animation in the project files and call it from there so there is no need for an internet connection.

    Thanks a lot for your help!

    I added "Elliott" in the special thanks at the end of Healer's Quest (upcoming mobile version) credits.

    Please tell me if you want to be creditted under a different or more complete name. ;)

  • That's great news Rable; glad it's all working!

    Thank you very much for the credit; my full name is Elliott Bear - I'll be sure to check out the game when it's launched.

  • I went farther into the export process, and I'm afraid the process of adding an image as a project file and loading it before the first layout doesn't seem to work on iOS.

    At least when exported to Xcode, the simulator will not start the game, while just removing the image and the little code makes it work perfectly.

    Any idea how I could make it work on iOS Elliott ? (or someone else)

    To be perfectly clear, I'm not using exactly the code you gave me, I'm just loading an image that I added to the project files in C2 (only the path is different so that no internet connection is required, the rest of the code is the same). It works fine on Android and HTML5, but the iOS simulator give me the following error: "Failed to load image: [object Object]"

    Then the (HTML5 default) loading bar freezes close to the beginning and the loader layout never starts.

    Thanks for your help !

    [EDIT] Maybe iOS doesn't like .gif files ... ?

Post reply
  • 13 posts
Return to board index
Jump to:
Active Users
There are 1 visitors browsing this topic (0 users and 1 guests)