Learning Twine with SugarCube

Browser lacks capabilities required to play.

Upgrade or switch to another browser.

Loading…

<details open>\ <summary>Markup</summary>\ [[NakedVariable]] [[LinkPage]] [[ImagePage]] [[HTML-SVG-Attribute]] [[LineContinuation]] [[HeadingPage]] [[StylePage]] [[ListPage]] [[BlockquotePage]] [[CodePage]] [[HorizontalRule]] [[VerbatimText]] [[VerbatimHTML]] [[CustomStyle]] [[TemplatePage]] [[CommentPage]] </details> <details open>\ <summary>TwineScript</summary>\ 这部分和 JavaScript 语法高度相似，因此我没有在这部分添加任何页面。 This part is highly similar to JavaScript syntax, so I did not add any pages for this section. </details> <details open>\ <summary>Macros</summary>\ [[MacroArguments]] [[VariablesMacros]] [[ScriptingMacros]] [[DisplayMacros]] [[ControlMacros]] </details>

<h2>"""<<if conditional>> … [<<elseif conditional>> …] [<<else>> …] <</if>>"""</h2> SugarCube 不会自动去除 """<<if>>""" 宏内容中的空白字符，以便作者可以更灵活地控制输出中的空格。这也意味着在编写时需要特别注意不要生成多余的空白。 <<set _affection to random(1,100)>>\ Your affection points are _affection. <<if _affection gte 75>>\ I love you! <<elseif _affection gte 50>>\ I like you. <<elseif _affection gte 25>>\ I'm okay with you. <<else>>\ Get out of my face. <</if>> <h2>"""<<for [conditional]>> … <</for>>"""</h2>\ <h2>"""<<for [init] ; [conditional] ; [post]>> … <</for>>"""</h2>\ <h2>"""<<for [[keyVariable ,] valueVariable] range collection>> … <</for>>"""</h2>\ \ <<set $dwarves to ["Doc", "Dopey", "Bashful", "Grumpy", "Sneezy", "Sleepy", "Happy"]>> <<for _i to 0; _i lt $dwarves.length; _i++>>\ <<print _i + 1>>. $dwarves[_i] <</for>> <<for _i, _name range $dwarves>>\ <<if _name === "Sleepy">>\ <<continue>>\ <</if>>\ <<print _i + 1>>. _name <</for>> <<for _value range 7>>\ <<print _value>>. <<if _value === 4>>\ <<break>>\ <</if>>\ <</for>> <h2>"""<<switch expression>> [<<case valueList>> …] [<<default>> …] <</switch>>"""</h2>\ \ <<set _vis to random(1, 5)>> You have visited this place for _vis times. <<switch _vis>>\ <<case 1>>\ You gaze in wonder at the magnificent waterfall for the first time, awestruck by its natural beauty. <<case 2 3>>\ You once again gaze upon the magnificent waterfall. <<case 4 5>>\ Yet again, you find yourself looking upon the waterfall. <<default>>\ Oh, look. It's that waterfall again. Meh. <</switch>>

<h2>"""<<= expression>> and <<print expression>> and <<- expression>>"""</h2>\ \ <<set _gold = 5>>\ You found <<= _gold>> gold. You found <<print _gold>> gold. You found <<- _gold>> gold. <<set _PI=3.141592653589793238>>\ PI approximately equals <<= _PI.toFixed(2)>>. PI approximately equals <<print _PI.toFixed(2)>>. PI approximately equals <<- _PI.toFixed(2)>>. <<set _emoji='😊<^_^>'>>\ You face: <<= _emoji>>. You face: <<print _emoji>>. You face: <<- _emoji>>. <h2>"""<<do [tag tags] [element tag]>> … <</do>> and <<redo [tags]>>"""</h2>\ \ 显示其内容。监听 <<redo>> 宏命令，收到命令时更新其内容。 Displays its contents. Listens for <<redo>> macro commands upon which it updates its contents. <<set _money to 10>>\ ''Money:'' <<do>>_money<</do>> \ <<link "Update money display">>\ <<set _money += 10>>\ <<redo>>\ <</link>> <<set _key to "">> <<do>>\ <<if _key>>\ You have the _key key. <<else>>\ You do not have a key. <</if>>\ <</do>>\ \ <<link "Update key display">>\ <<set _key to ["", "red", "blue", "skull"].random()>>\ <<redo>> <</link>> ''Foo:'' <<do tag "foo foobar">><<= ["fee", "fie", "foe", "fum"].random()>><</do>> ''Bar:'' <<do tag "bar foobar">><<= ["alfa", "bravo", "charlie", "delta"].random()>><</do>> \ <<link "Update foo">>\ <<redo "foo">>\ <</link>>\ <<link "Update bar">>\ <<redo "bar">>\ <</link>>\ <<link "Update foo & bar (1)">>\ <<redo "foo bar">>\ <</link>> <<link "Update foo & bar (2)">>\ <<redo "foobar">>\ <</link>> <h2>"""<<include passageName [elementName]>> and <<include linkMarkup [elementName]>>"""</h2>\ \ 输出具有给定名称的段落的内容，可选择将其包装在 HTML 元素中。可以使用段落名称或链接标记来调用。 Outputs the contents of the passage with the given name, optionally wrapping it within an HTML element. May be called either with the passage name or with a link markup. 段落名称形式 * passageName：要包含的段落名称。 * elementName：（可选）包装所包含段落的 HTML 元素。如果使用，该元素将包含标准化为类名的段落名称。更多信息请参见 CSS 段落转换。 Passage name form * passageName: The name of the passage to include. * elementName: (optional) The HTML element to wrap the included passage in. If used, the element will include the passage's name normalized into a class name. See CSS passage conversions for more information. 链接标记形式 * linkMarkup：要使用的链接标记（仅常规语法，无设置器）。 * elementName：与段落名称形式相同。 Link markup form * linkMarkup: The link markup to use (regular syntax only, no setters). * elementName: Identical to the passage name form. <<include "ResultDisplay">> <<include [[ResultDisplay]]>> <<include "ResultDisplay" "div">> <<include [[ResultDisplay]] "div">> <h2>"""<<nobr>> … <</nobr>>"""</h2>\ \ <<set _feeling to "blue">>\ I'd like a <<nobr>> <<if _feeling eq "blue">> blueberry <<else>> cherry <</if>> <</nobr>> pie. <h2>"""<<silent>> … <</silent>>"""</h2>\ \ <<set _seconds to 20>>\ Countdown: <span id="countdown">_seconds seconds remaining</span>!\ <<silent>> <<repeat 1s>> <<set _seconds to _seconds - 1>> <<if _seconds gt 0>> <<replace "#countdown">>_seconds seconds remaining<</replace>> <<else>> <<replace "#countdown">>Too Late<</replace>> /* do something useful here */ <<stop>> <</if>> <</repeat>> <</silent>> <h2>"""<<type speed [start delay] [class classes] [element tag] [id ID] [keep|none] [skipkey key]>>…<</type>>"""</h2>\ \ 参数： * speed：字符打字的速率，作为有效的 CSS 时间值——例如，1s 和 40ms。20–60ms 范围内的值是一个好的起点。0s 和 0ms 的值会使打字立即完成。 * start delay：（可选）延迟开始打字的时间量，作为有效的 CSS 时间值——例如，5s 和 500ms。如果省略，默认为 400ms。 * class classes：（可选）要添加到打字容器的类列表，以空格分隔。 * element tag：（可选）用作打字容器的元素——例如，div 和 span。如果省略，默认为 div。 * id ID：（可选）要分配给打字容器的唯一 ID。 * keep：（可选）关键字，用于表示打字完成后应保留光标。 * none：（可选）关键字，用于表示根本不应使用光标。 * skipkey：（可选）用于使打字立即完成的键。如果省略，默认为 Config.macros.typeSkipKey 的值。打字文本没有默认样式。如果你想更改字体或颜色，那么你需要更改 macro-type 类的样式。例如： <html><pre> css.macro-type { color: limegreen; font-family: monospace, monospace; } </pre></html> 还有一个 macro-type-done 类会添加到已完成打字的文本中，可以用来为其设置与正在打字的文本不同的样式。默认光标是块元素字符 Right Half Block (U+2590)，它没有默认的字体或颜色样式。如果你想更改字体、颜色或字符，那么你需要更改 macro-type-cursor 类的 :after 伪元素的样式。例如： <html><pre> css.macro-type-cursor:after { color: limegreen; content: "\269C\FE0F"; /* Fleur-de-lis emoji */ font-family: monospace, monospace; } </pre></html> <<type 40ms>> Type characters from this content every 40 milliseconds. Including [[ResultDisplay]] and ''other markup''! <</type>> <<type 40ms start 2s>> Type characters from this content every 40 milliseconds, starting after a 2 second delay. <</type>> <<type 40ms class "foo bar">> Type characters from this content every 40 milliseconds, adding classes to the typing container. <</type>> <<type 40ms element "span">> Type characters from this content every 40 milliseconds, using a """<span>""" as the typing container. <</type>> <<type 40ms id "type01">> Type characters from this content every 40 milliseconds, assigning an ID to the typing container. <</type>> <<type 40ms keep>> Type characters from this content every 40 milliseconds, keeping the cursor after typing is complete. <</type>> <<type 40ms skipkey "Control">> Type characters from this content every 40 milliseconds, using the Control (CTRL) key as the skip key. <</type>>

<details>\ <summary>参数类型宏：将变量名作为参数传递</summary>\ 将变量名作为参数传递是有问题的，因为在 SugarCube 宏中变量替换是自动发生的。这意味着当您将变量作为参数传递时，它的值被传递给宏而不是它的名称。通常，这正是您想要发生的。然而，偶尔宏会需要变量的名称而不是它的值——例如，数据输入宏如 """<<textbox>>"""——以便它们可以修改变量。要解决这些情况，您需要引用变量的名称——即，不是像平常那样传递 """$pie"""，而是传递 <nowiki>"$pie"</nowiki>。这些罕见的情况在宏的文档中有说明，并在示例中展示。 </details> <details>\ <summary>Argument type macros: passing a variable's name as an argument</summary>\ Passing the name of a variable as an argument is problematic because variable substitution occurs automatically in SugarCube macros. Meaning that when you pass a variable as an argument, its value is passed to the macro rather than its name. Normally, this is exactly what you want to happen. Occasionally, however, macros will need the name of a variable rather than its value—e.g., data input macros like """<<textbox>>"""—so that they may modify the variable. To resolve these instances, you will need to quote the name of the variable—i.e., instead of passing """$pie""" as normal, you'd pass <nowiki>"$pie"</nowiki>. These, rare, instances are noted in the macros' documentation and shown in their examples. </details> <hr> <h2>参数类型宏：将表达式作为参数传递 Argument type macros: passing an expression as an argument</h2>\ <<set _name = "Target">>\ <<set _target = _name + "Display">>\ <<link _target>><</link>> <<link `_name + "Dispay"`>><</link>>

<h2>"""<<run expression>>"""</h2>\ \ 功能上与"""<<set>>"""相同。适用于表达式是任意代码而不是要设置的变量的情况——即，"""<<run>>"""用于运行代码，"""<<set>>"""用于设置变量，在记忆上更好理解。 Functionally identical to """<<set>>""". Intended to be mnemonically better for uses where the expression is arbitrary code, rather than variables to set—i.e., """<<run>>""" to run code, """<<set>>""" to set variables. <h2>"""<<script [language]>> … <</script>>"""</h2>\ \ 静默执行其内容作为JavaScript或TwineScript代码（默认：JavaScript）。 Silently executes its contents as either JavaScript or TwineScript code (default: JavaScript). 注意：预定义变量output（它是对本地内容缓冲区的引用）可在宏的代码内容中使用。一旦代码完全执行完毕，缓冲区的内容（如果有的话）将被输出。 Note: The predefined variable output, which is a reference to a local content buffer, is available for use within the macro's code contents. Once the code has been fully executed, the contents of the buffer, if any, will be output. <<script>> $(output).append("<h2>Time Display</h2>"); $(output).append("<p>Time: " + new Date().toLocaleString() + "</p>"); <</script>> <<set $playerHealth to random(1,100)>>\ <<script>> const health = State.variables.playerHealth; $(output).wiki("你当前有 " + health + " 点健康。"); if (health > 80) { $(output).wiki("你感觉 ''非常健康''！"); } else if (health > 50) { $(output).wiki("你感觉还 //不错//。"); } else { $(output).wiki("你感觉很 ''虚弱''..."); } // 添加血条显示 $(output).append(`<div style="width:100px; height:20px; border:1px solid black;"> <div style="width:${health}%; height:100%; background:red;"></div> </div>`); <</script>> <<set $inventory to ["剑", "盾牌", "药水", "钥匙"]>>\ <<script>> $(output).wiki("<nowiki>==背包物品==</nowiki>"); const items = State.variables.inventory; for (let i = 0; i < items.length; i++) { $(output).wiki(`* ${items[i]}`); } <</script>>

<<set _what to [ "a crab rangoon", "a gaggle of geese", "an aardvark", "the world's smallest violin", "... this is the end." ]>>\ \<h2>"""<<capture variableList>> … <</capture>>"""</h2>\ \ With capture: <<for _i = 0; _i < _what.length; _i++>>\ <<capture _i>>\ I spy with my little <<linkappend "eye" t8n>>, _what[_i] ("""_i"""=_i)<</linkappend>>. <</capture>>\ <</for>> Without capture: <<for _i to 0; _i lt _what.length - 1; _i++>> I spy with my little <<linkappend "eye" t8n>>, _what[_i] ("""_i"""=_i)<</linkappend>>. <</for>> <div class="code">\ Capturing several variables at once: """<<capture $aStoryVar, $anotherStoryVar, _aTempVar>> … <</capture>>""" </div> <hr> \<h2>"""<<set expression>>"""</h2>\ \ Using the TwineScript "to" operator. The standard JavaScript operators also work. <div class="code">\ """<<set $cheese to "a nice, sharp cheddar">> → Assigns "a nice, sharp cheddar" to story variable $cheese""" """<<set $chestEmpty to true>> → Assigns boolean true to story variable $chestEmpty""" """<<set $sum to $a + $b>> → Assigns the summation of story variables $a and $b to $sum""" """<<set $gold to $gold + 5>> → Adds 5 to the value of story variable $gold""" """<<set _counter to _counter + 1>> → Adds 1 to the value of temporary variable _counter""" </div> \<h2>"""<<unset variableList>>"""</h2>\ \ Unsetting story and temporary variables. Unsetting object properties. <div class="code">\ """<<unset $rumors>>"""" """<<unset _npc>>"""" """<<unset $rumors, _npc, _choices, $job>>"""" """<<unset _choices.b>>"""" """<<unset $towns['port ulster'].rumors>>"""" """<<unset _choices.b, $towns['port ulster'].rumors, $pc.notes, _park.rides['wheel of death']>>"""" </div>

>Line 1 >Line 2 >>Nested 1 >>Nested 2 <blockquote>Line 1 Line 2 <blockquote>Nested 1 Nested 2 </blockquote></blockquote>

{{{Code}}} <code>Code</code> {{{ Code More code }}} <pre><code>Code More code </code></pre>

/* This is a comment. */ /% This is a comment. %/

@@#this-is-id;.result;This is text in span.@@ @@color:red;Text in span.@@ @@#this-is-id2.result; This is text in div. Without extra semi-colons. @@ @@color:red; Text in div. @@ As of v2.31.0, the ID and class names components may be conjoined without need of extra semi-colons—e.g., #alfa;.bravo;.charlie; may also be written as #alfa.bravo.charlie;. 从 v2.31.0 版本开始，ID 和类名组件可以直接连接，无需额外分号 —— 例如 #alfa;.bravo;.charlie; 也可写作 #alfa.bravo.charlie;。

<<set _target = "ResultDisplay">> <audio data-passage="_target" controls> <source src="./audio/wc4_begin.mp3" type="audio/mp3"> </audio> 会播放在引用 passage 中定义的音频内容 The audio content defined in the referenced passage will be played. <img data-passage="_target" src="./img/head/01.png"> 从 passage 里获取图片代码或 Base64 数据并显示。 The image code or Base64 data from the passage will be retrieved and displayed. @@color:red; 注意以上文字描述是实际功能，但代码中还没有实现。 Note that the above text describes the actual functionality, but it has not been implemented in the code yet. @@ <hr> <image data-passage="_target" src="./img/head/01.png"/> <hr> <<nobr>> <a data-passage="_target" data-setter="$result = 'From HTML-SVG-Attribute link'">Goto ResultDisplay</a><br> <button data-passage="_target" data-setter="$result = 'From HTML-SVG-Attribute button'">Goto ResultDisplay</button> <br><br> <map name="map1"> <area shape="rect" coords="30,275,110,360" data-passage="_target" data-setter="$result = 'From HTML-SVG-Attribute, the house in the map.'" title="Goto ResultDisplay"> </map> <img usemap="#map1" src="./img/map/01.png"><br> 点击地图中的房子 / Click the house in the map. <</nobr>> <hr> <<set _class="result">> <div sc-eval:class="_class"> 此处 div 使用了 sc-eval:class="_class" This div uses @class="_class" </div> <div @class="_class"> 此处 div 使用了 @class="_class"（语法糖） This div uses @class="_class" (syntactic sugar) </div>

!Level 1 Heading !!Level 2 Heading !!!Level 3 Heading !!!!Level 4 Heading !!!!!Level 5 Heading !!!!!!!Level 6 Heading

---- <hr>

<code> | Syntax | Example | | """[img[Image]]""" | """[img[home.png]]"""<br>"""[img[$src]]""" | | """[img[Image][Link]]""" | """[img[home.png][Home]]"""<br>"""[img[$src][$go]]""" | | """[img[Image][Link][Setter]]""" | """[img[home.png][Home][$done to true]]"""<br>"""[img[$src][$go][$done to true]]""" | | """[img[Title|Image]]""" | """[img[Go home|home.png]]"""<br>"""[img[$show|$src]]""" | | """[img[Title|Image][Link]]""" | """[img[Go home|home.png][Home]]"""<br>"""[img[$show|$src][$go]]""" | | """[img[Title|Image][Link][Setter]]""" | """[img[Go home|home.png][Home][$done to true]]"""<br>"""[img[$show|$src][$go][$done to true]]""" | </code> <<nobr>> <<set $target = "ResultDisplay">> <<set $show = "Goto ResultDisplay Page">> <<set $src="img/head/01.png">> <</nobr>> <div class="exec">"""<<set $target = "ResultDisplay">>""" """<<set $show = "Goto ResultDisplay Page">>""" """<<set $src="img/head/01.png">>""" </div> <div class="code">"""[img[Goto ResultDisplay Page|img/head/01.png][ResultDisplay][$result = "From Image Page"]]""" """[img[$show|$src][$target][$result = "From Image Page"]]""" </div> <div class="result">[img[Goto ResultDisplay Page|img/head/01.png][ResultDisplay][$result = "From Image Page"]] [img[$show|$src][$target][$result = "From Image Page"]] </div>

The rain in Spain falls \ mainly on the plain. The rain in Spain falls \ mainly on the plain. The rain in Spain falls \ mainly on the plain. The rain in Spain falls \ mainly on the plain.

* A list item * Another list item <ul> <li>A list item</li> <li>Another list item</li> </ul> # A list item # Another list item <ol> <li>A list item</li> <li>Another list item</li> </ol>

<code> | Type | Syntax | Example | | Simple variable | """$variable""" | """$name""" | | Property access, dot notation | """$variable.property""" | """$thing.name""" | | Index/property access, square bracket notation | """$variable[numericIndex]""" <br>"""$variable["property"]""" <br>"""$variable['property']""" <br>"""$variable[$indexOrPropertyVariable]""" | """$thing[0]""" <br>"""$thing["name"]""" <br>"""$thing['name']""" <br>"""$thing[$member]""" | </code> <<set $name = "Mr. Freeman">> <div class="exec">"""<<set $name = "Mr. Freeman">>""" </div> <div class="code">Well hello there, <nowiki><<print $name>></nowiki>. Well hello there, <nowiki>$name</nowiki>. Well hello there, Mr. Freeman. </div> <div class="result">Well hello there, <<print $name>>. Well hello there, $name. Well hello there, Mr. Freeman. </div> <div class="code"><nowiki>The variable """$name""" is set to: $name</nowiki> """The variable <nowiki>$name</nowiki> is set to: $name""" """The variable $$name is set to: $name""" """The variable $name is set to: Mr. Freeman""" </div> <div class="result">The variable """$name""" is set to: $name The variable <nowiki>$name</nowiki> is set to: $name The variable $$name is set to: $name The variable $name is set to: Mr. Freeman </div> <div class="code"><nowiki>The variable {{{$name}}} is set to: $name</nowiki> <nowiki>The variable <code>$name</code> is set to: Mr. Freeman</nowiki> </div> <div class="result">The variable {{{$name}}} is set to: $name The variable <code>$name</code> is set to: Mr. Freeman </div>

//Emphasis// <em>Emphasis</em> ''Strong'' <strong>Strong</strong> __Underline__ <u>Underline</u> ==Strikethrough== <s>Strikethrough</s> Super^^script^^ Super<sup>script</sup> Sub~~script~~ Sub<sub>script</sub>

<<set $name = "himeditator">> After entering the room, you hear ?greetingCN. 进入房间后，你听到 ?greetingCN。 ?greetingTimeEN. <hr> 这部分的 JavaScript 代码见 {{{scripts}}} 文件夹下 {{{template.js}}} 文件。 The JavaScript code for this part can be found in the {{{template.js}}} file in the {{{scripts}}} folder.

A set of opening and closing """<html>""" tags—i.e., """<html></html>"""—defines the verbatim HTML markup. The verbatim HTML markup disables processing of all markup contained within—both SugarCube and HTML—passing its contents directly into the output as HTML markup for the browser. Thus, you should only use plain HTML markup within the verbatim markup—meaning using none of SugarCube's special HTML attributes or directives. 一对开始和结束的 """<html>""" 标签（即 """<html></html>"""）定义了纯 HTML 标记。纯 HTML 标记会禁用对其中包含的所有标记（包括 SugarCube 和 HTML 本身的特殊功能）的处理，直接将其内容作为 HTML 标记传递给浏览器进行渲染。因此，你应该仅在纯 HTML 标记内使用普通的 HTML 标记，即不使用 SugarCube 的任何特殊 HTML 属性或指令。 <hr> <html> 在 html 标签中，可以看到不再默认换行。<br> Inside the html tag, you can see that line breaks are no longer applied by default.<br> 1 2 3 4 5 </html>

"""No //format//""" <nowiki>No //format//</nowiki>

<details open><summary>English</summary> Welcome to this project, which is based on the official SugarCube documentation: <a href="https://www.motoslave.net/sugarcube/2/docs/" target="_blank">SugarCube v2 Documentation</a>. This project will only cover the content that I personally need to experiment with and will not include everything. Note: 1. This project will only provide the code and corresponding results for each topic, without detailed explanations of the topics themselves. 2. For detailed information on each topic, please refer to the official documentation. 3. For examples with multiple parameters where some parameters can be omitted, only the examples with all parameters will be provided. <div class="exec">4. Content wrapped in this style refers to the actual text content of the code that has been executed on the page.</div> <div class="code">5. Content wrapped in this style refers to the source code, not the result of running the code.</div> <div class="result">6. Content wrapped in this style shows the result of running the code.</div> 7. The above styles will only appear in the first three sections (NakedVariable, Link, Image) under CoreIndex. Subsequent sections will directly present the results of the code, without including the original text of the code. </details> <details close><summary>简体中文</summary> 欢迎来到本项目，本项目的内容基于SugarCube 官方文档 <a href="https://www.motoslave.net/sugarcube/2/docs/" target="_blank">SugarCube v2 Documentation</a> 编写。本项目只会编写对我个人来说需要实验的内容，不会编写所有内容。注意： 1. 本项目只会给出每个知识点对应的代码和对应的结果，对于知识点本身不会详细介绍 2. 每节知识点的介绍的详细内容请自行查看官方文档 3. 对于有多个参数且部分参数可省略的样例，只会给出有完整参数的样例 <div class="exec">4. 由该样式包裹的内容是在页面中实际执行过的代码对应的文本内容</div> <div class="code">5. 由该样式包裹的内容指的代码源内容，而不是该段代码运行的结果</div> <div class="result">6. 由该样式包裹的内容展示的是代码运行得到的结果</div> 7. 以上样式只会在 CoreIndex 下的前三节（NakedVariable、Link、Image）全部出现，后续将直接写代码，页面展示的将是代码执行的结果，不再有代码的原本内容 </details> <hr> <<nobr>> <div style="font-size:20px;font-weight:bold;"> Table of Contents<br> [[CoreIndex]]<br> [[API-Index]]<br> [[GuideIndex]]<br> </div> <</nobr>>

<div class="code">The value of $$result is:</div> <div class="result">$result</div>