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.
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: Then in the StoryBanner passage I have:
However, when I launch the game it uses the smaller image for the intro.
Can anyone see why?
Thanks in advance.
The following example is based around jQuery and CSS.
Stylesheet: (Twine 2: goes in Story Stylesheet; Twine 1: goes in your stylesheet-tagged passage) NOTE: You may wish to change the background and foreground colors within #splash-screen, I used values which match SugarCube v2's defaults.
Secondly, thanks very much for taking the time to do this.
Is there anything I can do to prevent his?
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?
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
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: In other words, it should go after the following rule:
The following two rules are not, currently, doing anything useful:
The selector for the following rule is broken—#ui_bar-toggle vs #ui-bar-toggle:
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.
Anyway, it seems to be functioning as it should, at least for others.