How to do character creation in SugarCube

Booster_Zorbas

Hi there!
I'm really new to SugarCube and twine... or programming in general and I have a few questions. Mainly about character creation.
Now, I don't want to make something super fancy, but I'd like the players to be able to choose things like their race, hair color, eye color, etc.
Sadly I don't really know how to do it. I have a rough idea, but I don't really know how to work with array's and variables.
How would for example letting the player choose their eye color look like?
Thanks a lot in advance^^

Chapel

You probably need to give us more to go on than this. First of all, which version of SugarCube are you using?

Second, you need to think about how you want your character creation system to look and feel for the end user, and let us know how you plan to use the information from character creation (i.e. what actual effect will it have on the game?).

Generally it's best and easiest to have a design first and code from there.

idling

Like it has already been said, it really depends on what kind of interface you're planning to give your game. I'm going to assume you're using the latest version of Sugarcube.

Here are a few ways - I've named the character creation passage "character" and made the staring passage send the player to it upon start:

1) Ugly but easy

This into your starting passage:

<<set $eyecolors to ["amber", "blue", "brown", "gray", "green", "hazel", "red"]>>
<<set $eye = "blue">>
<<goto "character">>

This into the passage called "character":

Choose your eye color: <u><<print $eye>></u>
<<nobr>>
-
<<for _i to 0; _i lt $eyecolors.length; _i++>>
	<<capture _i>>
		[[$eyecolors[_i]|character][$eye to $eyecolors[_i]]] -
	<</capture>>

<</for>>             
<</nobr>>

2)Slider

This into your starting passage:

<<set $eyecolors to ["amber", "blue", "brown", "gray", "green", "hazel", "red"]>>
<<set $eye = 1>>
<<goto "character">>

This into the passage called "character":

<table style="width:10em; text-align:center">
<tr>
	<td style="width:50%">
		  Eyecolor: 
	</td>
	<td style="width:10%">
		<<if $eye === 0>>
			[[<|character][$eye to $eyecolors.length-1]]
		<<else>>
			[[<|character][$eye -= 1]]
		<</if>>
	</td>
	<td style="width:30%">
		<<print $eyecolors[$eye]>>
	</td>
	<td style="width:10%">
		<<if $eye === $eyecolors.length-1>>
			[[>|character][$eye to 0]]
		<<else>>
			[[>|character][$eye += 1]]
		<</if>>	
	</td>
</tr>
</table>

3) Dropdown Menu:

Put this into your Story Stylesheet:

.hover {
    position: relative;
    display: inline-block;
}

.hover .hoverblock {
    visibility: hidden;
    width: 120px;
    background-color: black;
    color: white;
  	border-color: white;
  	border-style: double;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
    position: absolute;
    z-index: 1;
    top: -5px;
    left: 105%;
}

.hover:hover .hoverblock {
    visibility: visible;
}

This into your starting passage:

<<set $eyecolors to ["amber", "blue", "brown", "gray", "green", "hazel", "red"]>>
<<set $eye = "blue">>
<<set $linebreak = "\n">>
<<goto "character">>

This into the passage called "character":

@color: CornflowerBlue; Change@@
	<span class="hoverblock">
<<for _i to 0; _i lt $eyecolors.length; _i++>>
		<<capture _i>>
		[[$eyecolors[_i]|character][$eye to $eyecolors[_i]]]
		<</capture>>
		<<print $linebreak>>
<</for>>
	</span>
</div>
<</nobr>>

Chapel

I would recommend using StoryInit to initialize variables rather than a passage whose only function is forwarding. Unless there's some viable reason for it that I'm missing, I didn't read all the code.

idling

You're right- sorry. In this case StoryInit would be the correct way to go.

Booster_Zorbas

Okay, sorry for being so unclear but like I said: I don't have any experience with the program so far, other than playing around with it for a bit^^

Basically what I wanted it to look like was that the player has a small amount of text describing what is happening around them (them waking up for example) and then adding detail after detail

Something like this:
They wake up and see themselves in the mirror -> choose their race
They comb their hair in front of said mirror -> Choose their hair color
They sprinkle some water on their face/ apply make-up or something like that -> choose their eye color

Thanks a lot for the detailed answer though, I'm still trying to understand how those work exactly^^

Oh and because I forgot to mention it: I'm using SugarCube 2.18.0

P.S.: What exactly is StoryInit?

idling

You're going to have to picture and explain a lot more clearly how you want the passage to look like, because all three variants I mentioned - as different as they are - could be used to achieve what you have described.

StoryInit is a special passage name in Sugarcube. Basically if you name a passage Storyinit, then all tasks you put in there (like setting up variables) will be performed before your story starts.

Read more about special names here.

Booster_Zorbas

Okay, thank you.

For example a passage could look like this:

You look in the morror. Your hair is

Grey ->Sets the variable to grey and moves on to the next passage
Red ->Sets the variable to Red and moves on to the next passage
Blonde ->Sets the variable to blonde and moves on to the next passage
etc.

And then of course print that later in other bits of text, like
"I like girls with $hair_color hair."



And thanks for the explanation, I'll look into it ASAP^^

idling

This showcases all three methods, I have mentioned above:
Put this into StoryInit:

<<set $skincolors = ["pale white", "white", "light brown", "olive", "brown", "dark brown", "black"]>>
<<set $skin = "">>

<<set $eyecolors to ["amber", "blue", "brown", "gray", "green", "hazel", "red"]>>
<<set $eye = 1>>

<<set $haircolors = ["black", "brown", "blond", "auburn", "red", "gray", "white"]>>
<<set $hair = "black">>

<<set $hairlength = ["short", "ear-long", "shoulder-long", "waist-long"]>>
<<set $length = "short">>

<<set $linebreak = "\n">>

Put this into your CSS stylesheet:

.hover {
    position: relative;
    display: inline-block;
}

.hover .hoverblock {
    visibility: hidden;
    width: 120px;
    background-color: black;
    color: white;
    border-color: white;
    border-style: double;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
    position: absolute;
    z-index: 1;
}

.hover:hover .hoverblock {
    visibility: visible;
}

And lastly this into a passage called "character", which we are going to make our starting passage:

@
	<span class="hoverblock">
		<<for _i to 0; _i lt $haircolors.length; _i++>>
			<<capture _i>>
			[[$haircolors[_i]|character][$hair to $haircolors[_i]]]
			<</capture>>
			<<print $linebreak>>
		<</for>>
	</span>
</div>

<</nobr>> hair, while you give yourself a last checkup in the mirror.

<<if $skin != "">>Looks like you're ready to [[head to work|passage]]<</if>>

All three methods accomplish what you want to do, but all three will make your text look different. Just take a look, which is closest to what you want.
In this example you can call your eyecolor by writing <<print $eyecolors[$eye]>>, while you can call your skincolor by writing <<print $skin>> - the same for your hairlength (<<print $length>>) and color (<<print $hair>>).

Niekitty

Booster, you are starting down one of the most infuriating and rewarding roads around when you start getting into programming. It's wonderful when something works... and then you spend 4 hours trying to fix something that did NOT work only to find that you missed a lonely little bracket or quotation mark halfway through a 9 page long passage.

There are a lot of ways to handle character creation, and I'm only JUST getting to the point where I know what the waffles I'm doing. The more CYOA style it looks like you want is one of the easiest methods I can think of, too.

If you want complexity and fancy interfaces, there are ways, but for something like...

You look in the mirror. Your hair is

Grey ->Sets the variable to grey and moves on to the next passage
Red ->Sets the variable to Red and moves on to the next passage
Blonde ->Sets the variable to blonde and moves on to the next passage
etc.

I would go with code as follows...

You look in the mirror. Your hair is<BR>
<<link "grey" "whateverthenextpassagenameis">><<set $haircolor to "grey">><</link>>
<<link "red" "whateverthenextpassagenameis">><<set $haircolor to "red">><</link>>
<<link "blonde" "whateverthenextpassagenameis">><<set $haircolor to "blonde">><</link>>

Link (or "click", if you are using sugarcube 1.??) creates a link, like a normal passage link, but performs all the code between the <<link>> and the <</link>>.
Quick note: link (or click) is structured as follows: <<link "what_the_player_will_see_to_click_on" "where_to_go_next">>STUFF<</link>>, but you CAN leave off the part that tells it where to go; this will result in the click running the code, but remaining on the current passage. combine this with a span replace method, and you can pile a heap of passages into one passage (gets. complicated. fast. but comes in handy).

EDIT: You can also use Link to go to the passage it is already in, thus refreshing the passage and displaying anything that might have changed due to a changed variable within the Link.

greyelf

Just to make it clear for anyone else reading this thread:

idling wrote: »

I'm going to assume you're using the latest version of Sugarcube.

You actually mean the latest version of SugarCube 2.x series as your example wouldn't work for anyone using the latest version of SugarCube 1.x series, because it does not support the <<capture>> macro you are using.

This is why it is suggested to always state either the full version number or (at least) the series number (eg 1.x or 2.x) of the story format involved (for both questions and solutions) because it does make a difference.

Booster_Zorbas

greyelf wrote: »

Just to make it clear for anyone else reading this thread:

idling wrote: »

I'm going to assume you're using the latest version of Sugarcube.

You actually mean the latest version of SugarCube 2.x series as your example wouldn't work for anyone using the latest version of SugarCube 1.x series, because it does not support the <<capture>> macro you are using.

This is why it is suggested to always state either the full version number or (at least) the series number (eg 1.x or 2.x) of the story format involved (for both questions and solutions) because it does make a difference.

Yes. I didn't know it would make that much of a difference and assumed it would be clear I'm using the latest version. Now I know better and will state that at the very beginning the next time I have a question^^

Booster_Zorbas

Niekitty wrote: »

Booster, you are starting down one of the most infuriating and rewarding roads around when you start getting into programming. It's wonderful when something works... and then you spend 4 hours trying to fix something that did NOT work only to find that you missed a lonely little bracket or quotation mark halfway through a 9 page long passage.

There are a lot of ways to handle character creation, and I'm only JUST getting to the point where I know what the waffles I'm doing. The more CYOA style it looks like you want is one of the easiest methods I can think of, too.

If you want complexity and fancy interfaces, there are ways, but for something like...

You look in the mirror. Your hair is

Grey ->Sets the variable to grey and moves on to the next passage
Red ->Sets the variable to Red and moves on to the next passage
Blonde ->Sets the variable to blonde and moves on to the next passage
etc.

I would go with code as follows...

You look in the mirror. Your hair is<BR>
<<link "grey" "whateverthenextpassagenameis">><<set $haircolor to "grey">><</link>>
<<link "red" "whateverthenextpassagenameis">><<set $haircolor to "red">><</link>>
<<link "blonde" "whateverthenextpassagenameis">><<set $haircolor to "blonde">><</link>>

Link (or "click", if you are using sugarcube 1.??) creates a link, like a normal passage link, but performs all the code between the <<link>> and the <</link>>.
Quick note: link (or click) is structured as follows: <<link "what_the_player_will_see_to_click_on" "where_to_go_next">>STUFF<</link>>, but you CAN leave off the part that tells it where to go; this will result in the click running the code, but remaining on the current passage. combine this with a span replace method, and you can pile a heap of passages into one passage (gets. complicated. fast. but comes in handy).

EDIT: You can also use Link to go to the passage it is already in, thus refreshing the passage and displaying anything that might have changed due to a changed variable within the Link.

Thanks a ton, I'll try that today^^

Niekitty

Hope it worked! =^^=