Intro screen

Jud_Casper · November 2016

Sugarcube 2.11.0

I'd quite like to have an intro screen for my game, which would consist of the game's title as an image, which fades in then back out before auto-launching the game itself.

Ideally there would be nothing else on the screen (in other words I need to hide the sidebar, but for the intro only).

Does anyone have any thoughts on how this might be achieved?

Thanks in advance.

Jud_Casper · November 2016

Okay, I'm getting there slowly, but I've hit a weird problem. I've managed to get the image in there, and eliminate the sidebar until the game is launched on a simple timer.

I'm using two title images (a large one for the intro screen) then a smaller version which sits in the sidebar. The large is called aftermath_image.jpg and the smaller one aftermath_small.jpg

I've set up a passage for the intro screen and given it the tag intro. Then in the CSS I have this:

body.intro #ui-bar-body { background-image: url(aftermath_title.jpg) no-repeat; width: 500px; margin: 350px 0 0 350px; }
body.intro #menu li a, body.intro #ui-bar-toggle::before { display: none; }

Then in the StoryBanner passage I have:

[img[aftermath_small.jpg]]

However, when I launch the game it uses the smaller image for the intro.

Can anyone see why?

Thanks in advance.

Jud_Casper · November 2016

I've now discovered it's not using the image in the CSS at all, only the smaller one in the StoryBanner passage.

Jud_Casper · November 2016

I think what I need to be asking now, is how do I prevent an image that I have in a StoryBanner passage from showing on the screen I'm wanting to use an an intro.

TheMadExile · November 2016

Why are you messing with #ui-bar-body, or any of the rest, if you're attempting to make a splash screen? The best thing would probably be to do the splash screen as an overlay and to leave the UI bar alone.

EXAMPLE
The following example is based around jQuery and CSS.

Stylesheet: (Twine 2: goes in Story Stylesheet; Twine 1: goes in your stylesheet-tagged passage)

#splash-screen {
	position: fixed;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	z-index: 100;
	background-color: #111;
	color: #eee;
}
#splash-screen > img {
	display: block;
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translateX(-50%) translateY(-50%);
}

NOTE: You may wish to change the background and foreground colors within #splash-screen, I used values which match SugarCube v2's defaults.

JavaScript: (Twine 2: goes in Story JavaScript; Twine 1: goes in your script-tagged passage)

(function () {
	// Duration of the splash image's fade in.
	var fadeIn  = 3000; // in milliseconds

	// Delay before the splash screen begins to fade out.
	var linger  = 6000; // in milliseconds

	// Duration of the splash screen's fade out.
	var fadeOut = 3000; // in milliseconds

	// Splash image.
	var $image  = $('<img src="aftermath_image.jpg">').hide();

	// Display the splash screen.
	$(document.body)
		.append('<div id="splash-screen"></div>')
		.find('#splash-screen')
			.append($image)
			.find('img')
				.fadeIn(fadeIn)
				.end()
			.delay(linger)
			.fadeOut(fadeOut);

	// Set up the removal of the splash screen.
	setTimeout(function () {
		$('#splash-screen').remove();
	}, fadeIn + linger + fadeOut + 1000);
})();

NOTE: You should set the fadeIn, fadeOut, and linger values at the top to your liking and set the path of the image within the $image value appropriately.

Jud_Casper · November 2016

Firstly as to why. Put simply it's because I don't have a fraction of your coding knowledge. I initially asked the question, but then - as I think we should - I attempted to do it myself. I was very proud with what I managed to achieve, but clearly it was a mess.

Secondly, thanks very much for taking the time to do this.

Jud_Casper · November 2016

When I launch the game the default UI sidebar flashes up momentarily (I think before the code which hides it has had chance to kick in).

Is there anything I can do to prevent his?

TheMadExile · November 2016

The UI elements have to be in place before user scripts are evaluated, otherwise said scripts could never modify them.

That said, user scripts and styles are evaluated immediately after UI initialization, so you should never see the UI in most cases. The only possibility that I can think of is that you've got something expensive going on around the same time which is delaying either the script or its styling long enough for the UI to briefly be visible.

What, exactly, are you seeing? And in what browser? What other scripting are you using?

Jud_Casper · November 2016

Well at the risk of incurring your wrath I've reverted to my original method for the splash screen intro, but please bare in mind I was getting the UI sidebar flashing up with your JavaScript method in exactly the same manner. I've reverted because one, I wanted to use a sound clip with the intro and wasn't sure how to implement it with your method. And two, I wasn't keen on how the Aftermath logo remained while the main game's interface faded in. I tried various different timer settings but the logo fade out always blends with the game's fade in. The idea is the logo fades in, hangs for three seconds or so then fades out BEFORE the game interface fades in.

But to answer your question, aside from a fair bit of CSS which I'm using to style and remove a couple of the sidebar elements such as borders and the history arrows, nothing major is happening at load.

I'm using Firefox.

What I see when I launch the game, is the default Sugarcube 2 sidebar elements which flash up for about half a second before the CSS hides them for the splash screen intro.

You can see it happening here: http://textadventures.co.uk/games/view/2nuehffyvkwvfxglz9aiag/timertest

TheMadExile · November 2016

Jud_Casper wrote: »

What I see when I launch the game, is the default Sugarcube 2 sidebar elements which flash up for about half a second before the CSS hides them for the splash screen intro.

You can see it happening here: http://textadventures.co.uk/games/view/2nuehffyvkwvfxglz9aiag/timertest

I cannot, actually. I see the loading screen, then its font changes, then the splash screen fades in and stays, I have to click past it. At no point do I see the UI bar before the splash screen fades away. Then again, the project at that link doesn't use the splash screen I provided above nor does it attempt to add a background image to #ui-bar-body. I'm guessing that it's actually your current solution?

Beyond that, based solely upon the project at that link, you have some CSS issues.

The following @media rule is in the wrong place—it is not one of the -rules which must go at the top. It needs to go where I placed it within the original example I gave:

@media screen and (max-width: 1136px) {#ui-bar.stowed ~ #story {margin-left: 19em;}}

In other words, it should go after the following rule:

#ui-bar.stowed ~ #story {margin-left: 20em;}

The following two rules are not, currently, doing anything useful:

#menu-item-restart a, #menu-item-saves a {}
#ui-bar-history {}

The selector for the following rule is broken—#ui_bar-toggle vs #ui-bar-toggle:

#ui_bar-toggle a {font-weight: bold;}

Jud_Casper · November 2016

Thank you again.

Not really sure how the @media stuff got separated from #ui-bar.stowed, as I just pasted the whole block in from your reply. However, it's back where it belongs now. I've also removed the dead rules and fixed the broken selector.

As for what you're seeing, can you please explain what you mean when you say you 'see the loading screen, then its font changes.'

What font are you seeing before and after it changes? You shouldn't be seeing anything other than a dark screen into which the title logo fades.

Jud_Casper · November 2016

I've just discovered that if I launch the game without already having a browser open (in other words if it's the game that launches my browser) the delays are even worse. The UI sidebar stays up for a good second before the CSS kicks in and hides it.

Weird.

TheMadExile · November 2016

Jud_Casper wrote: »

As for what you're seeing, can you please explain what you mean when you say you 'see the loading screen, then its font changes.'

What font are you seeing before and after it changes? You shouldn't be seeing anything other than a dark screen into which the title logo fades.

Exactly what I said. Initially, I see SugarCube's loading screen—the text "Initializing. Please wait…" and an indeterminate progress bar—with the default font. After a brief moment like that its font changes to one of your choices. Once it disappears, your splash screen comes up.

Jud_Casper · November 2016

Well I see none of that, but then again my game won't be cached on your machine like it is on mine, so maybe that explains it.

Anyway, it seems to be functioning as it should, at least for others.

Thanks.

Howdy, Stranger!

Categories

Intro screen

Comments