Buttons for multiple choices (more than 1 choice = buttons)

RaddersHQ

Hey guys!

I was just wondering how I would implement this idea I had the other day.. I showed my friends what I had accomplished the other day and their only complaint was that they said that the choice system was rather difficult to understand. Right now it is written in first person, and I was thinking of implementing a type of telltale's 'The walking dead' or 'The wolf among us' type of options, albeit with buttons when there is more than one choice available, or it would just be in the text as normal (I am also willing to go for a normal 'Continue' button ala 'NWN' if buttons for multiple choices only can't be implemented).

If there are any alternatives to this that are in greater circulation, I am also all ears.

I very much appreciate the support and assistance you guys provide to the community, if this is at all possible I would very much appreciate it if you guys would let me know.

Thanks again,

Conrad

greyelf

You need to state which story format you are using, as answers can be different for each one.

One simple method of showing 'buttons' is to place all your markup/macro links at the bottom of the passage and then to use CSS to make them look like buttons. The CSS needed to do this is different for each story format.

k3lit0

greyelf wrote: »

You need to state which story format you are using, as answers can be different for each one.

One simple method of showing 'buttons' is to place all your markup/macro links at the bottom of the passage and then to use CSS to make them look like buttons. The CSS needed to do this is different for each story format.

Any chance you could explain it for sugar cube? I'm interested in the same sort of thing, basically dialogue options that look good.

greyelf

One way is to change the option markup link to display as an inline-blocks and give all of them a set width, you can then use a margin-right on all but the last link to separate each of the option markup links.

By placing a div element around the set of option markup links you can have both ones that look like buttons as well as normal looking ones in your passage.

a. Passage contents:

Long Passage Text

<div class="options">
[[Option 1]][[Option 2]][[Option 3]]
</div>

b. CSS to place in your story's Stylesheet:

#passages .options a.link-internal {
	display: inline-block;
	width: 8em;
	background-color: yellow;
	margin-right: 2em;
	text-align: center;
}

#passages .options a.link-internal:last-of-type {
	margin-right: 0;
}

I am sure the more experienced CSS writers could give you a better example.

Claretta

k3lit0 wrote: »

Any chance you could explain it for sugar cube? I'm interested in the same sort of thing, basically dialogue options that look good.

SugarCube includes a button macro.

<<button "button text" "button passage name to go to (can be left blank if you want to use button for code)">>Anything you want to execute in here like variables or goto macros<</button>>

k3lit0

Claretta wrote: »

SugarCube includes a button macro.

<<button "button text" "button passage name to go to (can be left blank if you want to use button for code)">>Anything you want to execute in here like variables or goto macros<</button>>

Is there a way to change the appearance of buttons?

I was actually hoping to make the button kind of transparent, would it be easier to use an image for that?

greyelf

Something as simple as the following CSS may do what you want, it goes in your story's Stylesheet:

#passages button {
	background-color: transparent;
}

Claretta

Use RGB colours. The first three numbers adjust the colour between 0 and 250, and the last value is for opacity between 0 and 1.

button {
background-color: rgba(0,0,0,0.5);
}

You may not need the #passages selector. I don't use it in my SugarCube story for button styling.

k3lit0

Thanks, both very helpful. Sorry if i ask too many questions. I'm learning a lot thanks to y'all.

RaddersHQ

Hey, I'm back to this topic again!! I'm using sugar cube but can't seem to get that macro working..

for example;

<<button>>"Wake up""Start 1"<</button>>

doesn't seem to work, and any other variation I try doesn't seem to work either. I'll try the other style and see if I can get any luck with that but I am confused as to why the macro isn't functioning properly in any case.

Claretta

Using wrong syntax. <<button "Wake up" "Start 1">><</button>>

RaddersHQ

Ahh okay.. I managed to get it working using grey elf's macro in any case, but I'd like to thank everyone involved regardless

Claretta

I still recommend using "normal" buttons, since they have several advantages.

Aesthetically, they also include hover and active states, making them look more interactive.

Funcitonally, they let you more easily include other code in the buttons.

RaddersHQ

I'll give the new code a go when I get a chance then, fairly open minded to all this

Right now I'm looking at how to integrate 'Traits and Weaknesses' via objects and other macros..

Cora's old RPG system looks amazing, but haven't really found anything to match that just yet