Can I create a loading screen with harlowe 2.0

Khaloodxp

Basically I'm trying to buy time for my music to preload

Khaloodxp

anybody has any ideas comeon people

greyelf

Your question states that you are using Harlowe 2.0, do you mean 1.2.2 or did you build your own copy of the story format?

Khaloodxp

I mean harlowe (twine)2.0, it saves time to write it this way

greyelf

Khaloodxp wrote: »

...it saves time to write it this way

Not really, or I would not of had to ask. Which version of Harlowe you have depends on which version of Twine 2.x you are using and there are a number of different versions of Twine 2.x

The following solution consists of three parts:

1. CSS used to hide unwanted elements.

.hidden {
	display: none;
}

2. A first passage which contains both a splash area used to display the "Please Wait" message and a beginning area used to display the actual Beginning of the story.

<div id="splash"><h1>Please Wait!</h1></div>\
<div id="beginning" class="hidden">\
Blah Blah Blah

[[Next Passage->Second]]
</div>

3. Some Javascript that delays the starting of the long process (in your case the caching of media) so that the first passage is shown to the users. The Javascript also hides the splash area and shows the beginning area at the end of the long process.

/* use a small delay so that the splash area gets rendered (shown). */
setTimeout(function(){

	/* your code to cache media. */

	
	/* this example uses a 5 second timeout to simulate a long process. */
	setTimeout(function(){
	
		/* at the end of the long process hide the splash and show the beginning. */
		$('#splash').addClass('hidden');
		$('#beginning').removeClass('hidden');

	}, 5000);

}, 200);

Khaloodxp

greyelf wrote: »

Khaloodxp wrote: »

...it saves time to write it this way

Not really, or I would not of had to ask. Which version of Harlowe you have depends on which version of Twine 2.x you are using and there are a number of different versions of Twine 2.x

The following solution consists of three parts:

1. CSS used to hide unwanted elements.

.hidden {
	display: none;
}

2. A first passage which contains both a splash area used to display the "Please Wait" message and a beginning area used to display the actual Beginning of the story.

<div id="splash"><h1>Please Wait!</h1></div>\
<div id="beginning" class="hidden">\
Blah Blah Blah

[[Next Passage->Second]]
</div>

3. Some Javascript that delays the starting of the long process (in your case the caching of media) so that the first passage is shown to the users. The Javascript also hides the splash area and shows the beginning area at the end of the long process.

/* use a small delay so that the splash area gets rendered (shown). */
setTimeout(function(){

	/* your code to cache media. */

	
	/* this example uses a 5 second timeout to simulate a long process. */
	setTimeout(function(){
	
		/* at the end of the long process hide the splash and show the beginning. */
		$('#splash').addClass('hidden');
		$('#beginning').removeClass('hidden');

	}, 5000);

}, 200);

works great had to change the 5 seconds to 20 but everything works perfectly now

storymasterq

Twenty seconds?! Woah, you'd better have an awesome loading screen if you want anyone to wait 20 seconds before being able to do anything.

Khaloodxp

storymasterq wrote: »

Twenty seconds?! Woah, you'd better have an awesome loading screen if you want anyone to wait 20 seconds before being able to do anything.

dude I realised that the loading screen does absolutely nothing so I removed it and btw most web games have 2-5 min loading screen dude