Howdy, Stranger!

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

New, need help picking a story format

Hey there! I need some help picking a story format, since there's some specific things I want to do with the aesthetic design for my story/game. I'm very familiar with html/css but not with javascript. I've built some things from scratch etc etc, but never worked with javascript. I've tried doing some basic html/css work within Harlowe (span styles, borders around images, etc) and none of it wants to display correctly or at all.

- I'm wanting to make a specific UI for my story/game. The design I'm wanting can be coded with just html/css. It will be displayed on most passages, with the only thing changing being images and some text.
- Use images as buttons to link to the next passage.
- The ability to save/load games (since it will be fairly long)

That's all I can think of for right now. There's not much programming I can foresee right now, but I have a specific look in mind for it and it's very important in setting the mood. Thanks!

Comments

  • steleus wrote: »
    - Use images as buttons to link to the next passage.
    - The ability to save/load games (since it will be fairly long)
    SugarCube (1 and 2) comes with both image-based markup links and the ability to save/load the story.
  • greyelf wrote: »
    steleus wrote: »
    - Use images as buttons to link to the next passage.
    - The ability to save/load games (since it will be fairly long)
    SugarCube (1 and 2) comes with both image-based markup links and the ability to save/load the story.

    Hey @greyelf, since OP isn't familiar with javascript, and since I think both things can be achieved to an extent with any story format, would you still suggest SugarCube?
    Just curious, as this is actually relevant to something I am working on, so the answer is actually pretty helpful for me, too.
    (I've only ever used Harlowe and I am torn between wanting to try the other formats, or just tweak Harlow as much as I can)
  • I generally try not to tell Authors which story format they should be using because I think that it is a personal choice, although I would encourage them to learn the basics of each story format before making that choice. I will however point out if particular story formats already includes a requested feature, like I did for two of the ones steleus asked about.

    While it is true that with enough effort (and Javascript) you can make any story format do what you want (within reason), sometimes it is easier to do something in one story format than it is in another.

    Can you create image-based links in Harlowe: Yes, if you write the code for it.
    Can you do save/load in Harlow: Yes, it has built-in macros for this although the Author will need to create an interface for the Reader to access them.
  • greyelf wrote: »
    I generally try not to tell Authors which story format they should be using because I think that it is a personal choice, although I would encourage them to learn the basics of each story format before making that choice. I will however point out if particular story formats already includes a requested feature, like I did for two of the ones steleus asked about.

    While it is true that with enough effort (and Javascript) you can make any story format do what you want (within reason), sometimes it is easier to do something in one story format than it is in another.

    Can you create image-based links in Harlowe: Yes, if you write the code for it.
    Can you do save/load in Harlow: Yes, it has built-in macros for this although the Author will need to create an interface for the Reader to access them.

    Gotcha.
    Thank you. :)
  • greyelf wrote: »
    Can you do save/load in Harlow: Yes, it has built-in macros for this although the Author will need to create an interface for the Reader to access them.

    Building the interface shouldn't be a problem from an html/css standpoint. I was playing around in Harlowe last night, and I was having an issue where the passage started way too far to the right for my taste. There was probably around 400px of space on the left that I didn't want, and that's where I would want to build my UI.
  • Here's what I was playing around with regarding the space. It's probably less than 400px now that I look at it again :P

    Passage
    <table cellspacing="0"><tr><td><table cellspacing="0"><tr><td><div class="charselectwrap"><img src="http://i.imgur.com/UKsznfw.png"></div></td></tr><tr><td><div class="charselectname">FLYNN</div></td></tr></table></td><td><table cellspacing="0"><tr><td><div class="charselectwrap"><img src="http://i.imgur.com/8zoGpaQ.png"></div></td></tr><tr><td><div class="charselectname">KATE</div></td></tr></table></td><td><table cellspacing="0"><tr><td><div class="charselectwrap"><img src="http://i.imgur.com/OplPAH1.png"></div></td></tr><tr><td><div class="charselectname">JASON</div></td></tr></table></td><td><table cellspacing="0"><tr><td><div class="charselectwrap"><img src="http://i.imgur.com/KFM27LL.png"></div></td></tr><tr><td><div class="charselectname">NINA</div></td></tr></table></td><td><table cellspacing="0"><tr><td><div class="charselectwrap"><img src="http://i.imgur.com/phIsF59.png"></div></td></tr><tr><td><div class="charselectname">BEN</div></td></tr></table></td></tr></table>
    <style type="text/css">.charselectwrap {width: 240px; height: 340px; border: 20px solid #666;}.charselectname {width: 240px; border-left: 20px solid #666; border-right: 20px solid #666; border-bottom: 20px solid #666; padding: 20px; text-align: center; margin-top: -2px;}</style>

    CSS
    body
    {
    background-color: #000;
    margin-left: -200px;
    width: 100%;
    }

    passage
    {
    margin-left: -200px;
    }

    tw-link
    {
    font-family: oswald;
    color: #666;
    }

    tw-link:hover
    {
    color: #666;
    }

    tw-sidebar
    {
    display:none;
    }


    I noticed borders don't work like they should within Harlowe (they apply inside the size of the div and not outside), and there's also issues with page breaks (hence the ugly HTML). Throwing my style types in as divs into the stylesheet also did not work, and the <div class="___"></div> would not work in Harlowe either.
  • If you look at the default CSS for the tw-story element you will see that it's width is set to 60% and it's left/right margins are auto, which is what causes it (and the tw-passage it contains) to be displayed in the middle of the view-port. This means that the left/right margins are not a set width but are around 20% each.

    Now you could use CSS something like the following to position your side bar:
    note: the following assumes you have implemented your sidebar by using a header tagged passage named Sidebar.
    tw-passage tw-include[title="Sidebar"] {
    	width: 18%;
    	position: absolute;
    	left: -20%;
    	top: 7em;
    	margin-right: 2%;
    	border: 1px solid green;
    	padding: 0.5em;
    }
    
    ... but as you will see there is a delay in it's positioning and sizing, which as I understand things is mostly caused by using percentages and the requirement of the parent tw-passage positioning/sizing information needing to be determine before the sidebar's can.

    You could instead use fixed values for the sidebar but this could result in the sidebar overlapping the passage text for people using smaller sized screens (or not running their web-browser in full-screen mode).

    I believe what is needed is to modify the tw-story so that it uses fixed values instead of percentages/auto, which would allow the use of fixed values for the sidebar but this would result in tw-story no longer being Responsive.
Sign In or Register to comment.