Making a Dialouge box in Sugarcane

Hyang · October 2015

Using Sugarcane 2.
Basically I wanna recreate something like this.
?ui=2&ik=f6a7e3d88e&view=fimg&th=150b3a9e4e9264f3&attid=0.1&disp=emb&realattid=ii_150b3a9b6bfd50b3&attbid=ANGjdJ_R53s_7xPzW2Q36gj9Rrn-LBc3fjz-KVpuz9cGlAxobluaA6OS7x7MKw-X9MEHes9L4q0002YjgY9Z_iRWa_nWGTsoIFT52SmlIqntrUNAsSgnTUHxEzQk-s8&sz=w792-h178&ats=1446123309250&rm=150b3a9e4e9264f3&zw&atsh=1

?ui=2&ik=f6a7e3d88e&view=fimg&th=150b3a9e4e9264f3&attid=0.1&disp=emb&realattid=ii_150b3a9b6bfd50b3&attbid=ANGjdJ_R53s_7xPzW2Q36gj9Rrn-LBc3fjz-KVpuz9cGlAxobluaA6OS7x7MKw-X9MEHes9L4q0002YjgY9Z_iRWa_nWGTsoIFT52SmlIqntrUNAsSgnTUHxEzQk-s8&sz=w792-h178&ats=1446123309250&rm=150b3a9e4e9264f3&zw&atsh=1

I sort of already know how to make it look right, but I want to have a sort of wordwrap so I can have the words fill up a cell in a 1X3 table without increasing the width of the cell, therefore pushing the other portrait away and whatnot.
Alternatively, a way to 'lock' the dimensions of the cell would work too, if that were possible.
Here's the code I already have.

<table>
  <tr>
    <th>[img[LeftTest.png]]</th>
    <th><span id="StoryText">Click Next to Proceed</span></th>
    <th>[img[RightTest.png]]</th>
  </tr>
</table>
<<click "next">>
<<replace "#StoryText">>Body of text goes here, boring technical stuff insert here, etc<</replace>>
<</click>>

greyelf · October 2015

You state in you question that you are using Sugarcane 2, which I have never heard of, do you mean the version of Sugarcane that comes with Twine 1.4.2 or do you mean SugarCube 2?

Could you repost your example image (maybe using a different image hoster) as the current one is not viewable.

Hyang · November 2015

My sincerest apologies, I meant to say Sugarcube x2.

Here is the image.

TheMadExile · November 2015

If you want the dialog cell to have a certain width, then just assign it that width in CSS. For example, the following should be similar to what you need:

HTML markup:

<table id="dialog">
	<tr>
		<td>[img[LeftTest.png]]</td>
		<td id="dialogtext"><<click "Next...">>
<<replace "#dialogtext">>TEXT HERE

Blah, blah, blah.  Yakity, schmackity.<</replace>>
<</click>></td>
		<td>[img[RightTest.png]]</td>
	</tr>
</table>

CSS:

#dialog td {
	vertical-align: top;
}
#dialogtext {
	/*
		I used `px` here, since it seems like you might want
		the text area width to be a multiple of the width of
		the image bookends.   You may use whatever you wish,
		however, and using a relative measure (e.g. `em`)
		wouldn't be a bad idea.
	*/
	font-weight: bold;
	width: 350px;
}

Hyang · November 2015

This helped set the minimum size of the cell, but it didn't break the words inside if they exceeded the border, but in the meantime I figured out how to do that.

Thanks for your help!

Categories

Making a Dialouge box in Sugarcane

Comments