Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

Header/Footers and Graphic Overlays

So I'm working on some UI elements for Sugarcube 2. I know how to do this in Harlowe, but now I've switched formats, my old code doesn't work.

What I'm generally trying to achieve:

1. A rather thin header or footer that sticks to the top or bottom of the window respectively, to populate with values. E.g. Current HP, and whatnot.

2. How to create a graphic in a corner that shifts on a variable, and exists in every passage. E.g. A sun or moon in the corner to indicate day/night cycle.

I kind of feel like these would probably use the similar kind of logic. Preferably I'm looking to do something mobile friendly, but this isn't a must.

If anyone's got any advice or a link to direct me to, I'd be thankful.

Comments

  • Have you looked at the PassageHeader or PassageFooter special passages, they work similar to their Harlowe counterparts except they are not automatically wrapped within a HTML element, so you will need to do this yourself.

    eg. PassageHeader
    <div id="passage-header">The content you want to appear in the header.</div>
    

    You can use CSS to preposition and format the header as you like, and that CSS would be similar to the that you used in Harlowe.
  • edited March 2017
    If you want advice about how to do something in SugarCube, which you were previously doing in Harlowe, then it would probably help to show us the code if at all possible.
  • Sorry for the delay on this post. Work was hectic for a few days. Turns out the Harlowe code does work, I'm just not getting the results I'm after.

    My attempt at creating a footer strip.

    First, I tried this css:
    #box2
    {
    text-align: center;
    word-wrap: break-word;
    position: fixed;
    bottom: 0;
    right: 0;
    height: 3%;
    width: 100%;
    padding: 10px;
    background: white;
    	border-top: solid #000000;
    }
    


    Then inserted this into the PassageFooter:
    <span id="box2">{}
    </span>
    

    Which worked to create a white strip at the bottom that could be populated with text. However, there were immediately a few sticking points.

    1. A full passage of text would fall under the bar and unless some white space was made at the end of every passage, you couldn't scroll down to click 'next'.

    2. I've got time-delayed, self-reading text, and when it reaches the bottom, the text keeps reading out of sight. Usual VN cues (E.g. New text appearing forces the scroll to go down to the new line) don't really work here.

    This could potentially be countered by making sure the text is never this long and encouraging people to keep their window to a certain size, but that doesn't sound very user-friendly.

    BTW, The timed delay text is the one from this thread, which works fantastically. (I've kind of got a 50% black background that hugs and descends with the text to lift the text and distinguish it from the actual art backgrounds I've got. It's not exactly traditional VN appearance, but it gets the job done.)

    Anyway, so I tried a different tact, which was this:

    CSS:
    #box2
    {
    text-align: center;
    word-wrap: break-word;
    position: fixed;
    top: 0;
    right: 0;
        height: 100%;
    width: 100%;
    	background-image: url('http://www.freeiconspng.com/uploads/golden-frame-png-3.png');
      		background-repeat: no-repeat;
    	    background-attachment: fixed;
        background-position: center; 
    		background-size: cover;
    pointer-events: none;
    }
    

    The aim was to create a mobile and scaling-friendly border around the screen as a test, with a transparent section in the middle, layered over all existing content, and that wouldn't interfere with clicks.

    That worked. But there were again some issues.

    1. Every time you move passages, the border dissapears and appears with the transition effect. This could be removed, but if I recall, this causes other visual annoyances that the transition effect covers up.

    2. The text still populates below the border with no visual cues.

    3. If you scale the window, because of the background-size: cover, there's no guarantee a UI element won't slip out of sight. I could fasten a squarish element into a corner, but chances are when I rescale it, the text will dissapear behind the element.

    3. TBH, this seems like a neat way to get a border, but a crappy way to create a UI element that needs to be shown at all times.

    Now I'm considering making a fixed squarish element in one of the corners, throwing an image to occupy 100% of it, and creating a large enough gap between the body text and that corner so it doesn't slip behind it and cut off text. I vaguely remember doing something similar in a previous attempt, and it didn't work though.

    Long story short: Still trying to make this work. Maybe I'll figure out something when I'm playing around. After writing this out, seems more like I've got a general CSS layout problem and less of a code problem. Of course, that could just be my inexperience and lack of knowing any better options speaking.
  • edited March 2017
    There's a lot going on here, but you're probably going to want to edit sugarcubes CSS and make the #story selector have a bottom margin of the same height (probably a %, but maybe in em) as the bottom box. Then give it an overflow value of scroll.

    For the bottom box, give it a fixed position and an overflow of scroll. I'm not at my computer so I can't really whip up a test.

    For the mobile stuff, you'll likely just need to handle that through @media rules.
  • Chapel wrote: »
    There's a lot going on here, but you're probably going to want to edit sugarcubes CSS and make the #story selector have a bottom margin of the same height (probably a %, but maybe in em) as the bottom box. Then give it an overflow value of scroll.

    For the bottom box, give it a fixed position and an overflow of scroll. I'm not at my computer so I can't really whip up a test.

    For the mobile stuff, you'll likely just need to handle that through @media rules.

    Thanks! I'll give this a try.

    I've been trying to play around with specific media settings as little as possible and let whatever Sugarcube & Twine's defaults are do their thing. A while back I made a mobile game in Unity and C# and I hit a serious snag when it came to making things appear consistent across different devices. It still gives me the chills.
Sign In or Register to comment.