Last active
November 24, 2020 08:49
-
-
Save ChapelR/3759a9ad0246eb72bc47a621f1edbf43 to your computer and use it in GitHub Desktop.
macros-demo
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| The articles macro set allows you to prepend words or phrases with the appropriate idenfitine article ("a" or "an"). | |
| <<A 'European man'>>. | |
| It's been <<a 'honor'>>. | |
| You can use this macro set for when you need to determine the correct article to use when generating, for example, random loot. | |
| <<set _mats to either('iron', 'wooden', 'steel', 'adamantium', 'crystal')>>\ | |
| @@#output;You found <<a _mats>> sword!@@ | |
| <<button 'Generate another.'>> | |
| <<set _mats to either('iron', 'wood', 'steel', 'adamantium', 'crystal')>> | |
| <<replace '#output'>>You found <<a _mats>> sword!<</replace>> | |
| <</button>> | |
| ----- | |
| [[Documentation|https://twinelab.net/custom-macros-for-sugarcube-2/#/articles]] |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| The {{{<<cont>>}}} macro can be used to listen for certain kinds of user input and respond. | |
| Click anywhere to continue. | |
| <<cont append>>\ | |
| You can use the {{{keypress}}} keyword to allow any key press to also trigger the continuation. | |
| Click ''or'' press any key to continue. | |
| <<cont keypress append>>\ | |
| You can use the {{{<<ignore>>}}} macro to have the key and click events ignore certain elements (based on selector), but a sane group of defaults is already included for your convenience. This prevents clicks on links or dialogs from counting, for exmaple.\ | |
| <</cont>>\ | |
| <</cont>> | |
| ----- | |
| [[Documentation|https://twinelab.net/custom-macros-for-sugarcube-2/#/continue-macro]] |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| The {{{<<css>>}}} macro is a [[DOM macro|http://www.motoslave.net/sugarcube/2/docs/#macros-dom]] that can target a specific element on the page and alter its CSS styles (each style rule is passed as a property / value pair). You can pass the style rules as a list of strings, an object literal (passed in backticks) or as an object variable. | |
| @@.some-class;This text will be styled by the {{{<<css>>}}} macro!@@ | |
| <<link 'Change the text color and size.'>> | |
| <<css '.some-class' 'font-size' '1.2rem' 'color' 'pink'>> | |
| <</link>> | |
| <<link 'Give the text border and make it bold.'>> | |
| <<css '.some-class' `{ 'display' : 'inline-block', 'border' : '1px solid #eee', 'font-weight' : 'bold' }`>> | |
| <</link>> | |
| <<link 'Make the text smaller and italicize it.'>> | |
| <<set _styles to { | |
| 'font-size' : '0.9rem', | |
| 'font-style' : 'italic' | |
| }>> | |
| <<css '.some-class' _styles>> | |
| <</link>> | |
| ----- | |
| [[Documentation|https://twinelab.net/custom-macros-for-sugarcube-2/#/css-macro]] |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| The cycles system is a time-keeping mechanism based on passage transitions. The best place to define cycles is in your {{{StoryInit}}} special passage. The portion of this file's {{{StoryInit}}} special passage that sets up a cycle is reproduced below: | |
| \<pre><code><nowiki> | |
| <<newcycle 'time' 3>> | |
| <<phase 'morning' 'day' 'evening' 'night'>> | |
| <</newcycle>> | |
| </nowiki></code></pre>\ | |
| Additionally, we use a {{{PassageHeader}}} special passage to show the cycle via the {{{<<showcycle>>}}} macro: | |
| \<pre><code><nowiki> | |
| <<if tags().includes('cycles')>>\ | |
| <div id='cycles'><<showcycle 'time' upperfirst>></div> | |
| \<</if>> | |
| </nowiki></code></pre>\ | |
| [[Continue|cycles2]] | |
| ----- | |
| [[Documentation|https://twinelab.net/custom-macros-for-sugarcube-2/#/cycles-system]] |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| We can use the {{{<<editcycle>>}}} macro to have a variety of effects on the cycle in question. Here's a few ways we can use that macro. | |
| <<link 'Reset the cycle.'>> | |
| <<editcycle 'time' reset>> | |
| <<replace '#cycles'>><<showcycle 'time' upperfirst>><</replace>> | |
| <</link>> | |
| <<link 'Reduce the cycle\'s counter.'>> | |
| <<editcycle 'time' change -6>> | |
| <<replace '#cycles'>><<showcycle 'time' upperfirst>><</replace>> | |
| <</link>> | |
| <<link 'Increase the cycle\'s counter.'>> | |
| <<editcycle 'time' change 6>> | |
| <<replace '#cycles'>><<showcycle 'time' upperfirst>><</replace>> | |
| <</link>> | |
| [[Continue|cycles3]] | |
| [[Go back|cycles]] | |
| ----- | |
| [[Documentation|https://twinelab.net/custom-macros-for-sugarcube-2/#/cycles-system]] |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| We can use the {{{<<showcycle>>}}} macro to print the cycle in a few different formats. | |
| Normal: <<showcycle 'time'>> | |
| Uppercase: <<showcycle 'time' uppercase>> | |
| Upperfirst: <<showcycle 'time' upperfirst>> | |
| Lowercase: <<showcycle 'time' lowercase>> | |
| [[Continue|cycles4]] | |
| [[Go back|cycles2]] | |
| [[Start over|cycles]] | |
| ----- | |
| [[Documentation|https://twinelab.net/custom-macros-for-sugarcube-2/#/cycles-system]] |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| In addition, there are several JavaScript methods and a few passage tags you can use as well. | |
| <<if Cycle.get('time').current() === 'morning'>>\ | |
| It's morning right now.\ | |
| <<else>>\ | |
| It's not morning.\ | |
| <</if>> | |
| The {{{time}}} cycle takes <<= Cycle.get('time').turns()>> turns to move one phase and <<= Cycle.get('time').turnsTotal()>> to cycle through all of its phases once. | |
| [[Go back|cycles3]] | |
| [[Start over|cycles]] | |
| ----- | |
| [[Documentation|https://twinelab.net/custom-macros-for-sugarcube-2/#/cycles-system]] |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| The {{{<<dialog>>}}} and {{{<<popup>>}}} macros allow you to use the built-in [[Dialog API|http://www.motoslave.net/sugarcube/2/docs/#dialog-api]] to create modals (dialogs or popups) and display whatever you want in them. | |
| The {{{<<dialog>>}}} macro renders the content between the tags into the modal: | |
| <<link 'Say hello!'>> | |
| <<dialog 'Greetings'>> | |
| <<set _hi to ['Hello!', 'Welcome.', 'Greetings!', 'Hi there!', 'Good day.']>> | |
| The computer says "<<= _hi.random()>>" | |
| <</dialog>> | |
| <</link>> | |
| The {{{<<popup>>}}} macro renders the content of the indicated passage into the modal: | |
| <<link 'Say Goodbye'>> | |
| <<popup 'popup-passage' 'Farwell'>> | |
| <</link>> | |
| ----- | |
| [[Documentation|https://twinelab.net/custom-macros-for-sugarcube-2/#/dialog-api-macro-set]] |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| The {{{<<dialog>>}}} macro accepts two additional child tags, {{{<<onopen>>}}} and {{{<<onclose>>}}}, which you can use to set up event handlers that run their content when the dialog is opened or closed. | |
| <<link 'Click here!'>> | |
| <<dialog 'some message'>> | |
| This dialog shows an alert for some reason? | |
| <<onopen>> | |
| <<run alert('You opened a dialog!')>> | |
| <</dialog>> | |
| <</link>> | |
| [[Go back.|dialog]] | |
| ----- | |
| [[Documentation|https://twinelab.net/custom-macros-for-sugarcube-2/#/dialog-api-macro-set]] |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| The dice roller and fairmath system includes, as you may imagine, two main components, a diced roller, and a [[fairmath|https://choicescriptdev.fandom.com/wiki/Arithmetic_operators#Fairmath]] system. | |
| !!Dice Roller | |
| The dice roller accepts either two numbers or a string of dice notation. All of the following lines of code rolls 3d6+2, that is, three six-sided dice and adds two. | |
| |{{{dice('3d6+2')}}}|: <<= dice('3d6+2')>>| | |
| |{{{dice(3, 6) + 2}}}|: <<= dice(3, 6) + 2>>| | |
| |{{{(3).d(6) + 2}}}|: <<= (3).d(6) + 2>>| | |
| There are also a few other syntax formations and methods that work, check the documentation for more. | |
| !!Fairmath | |
| The fairmath methods are based on the //ChoiceScript// fairmath operations, it's a system that is used to adjust stats on a curve. | |
| We'll start a stat at 0, then do some math to show this system off. We'll use the variable {{{_fm}}} to hold our stat for this demonstartion.<<set _fm to 0>> | |
| |Adding 15 | {{{Math.fm(_fm, 15)}}} | <<set _fm to Math.fm(_fm, 15)>> _fm | | |
| |Adding 50 | {{{_fm.fm(50)}}} | <<set _fm to _fm.fm(50)>> _fm | | |
| |Adding 15 | {{{Math.fm(_fm, 15)}}} | <<set _fm to Math.fm(_fm, 15)>> _fm | | |
| |Subtracting 15 | {{{Math.fm(stat, -15)}}} | <<set _fm to Math.fm(_fm, -15)>> _fm | | |
| |Subtracting 10 | {{{_fm.fm(-10)}}} | <<set _fm to _fm.fm(-10)>> _fm | | |
| ----- | |
| [[Documentation|https://twinelab.net/custom-macros-for-sugarcube-2/#/operations-api]] |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| The {{{<<disable>>}}} macro can be used to disable (render non-interactive) certain interactive elements like buttons or inputs. The macro must be used to wrap the element the user wishes to disable. You may optionally pass an expression to the macro; if this expression evaluates to something truthy, the element will be disabled, if it's falsy, the element will not be disabled. If no expression is passed, the macro will disable its contents. The macro only targets the first interactive element it can find. If it can't find an interactive element, it will instead target the first child element. The effect on non-interactive elements is variable. | |
| This button should be disabled: | |
| <<disable>><<button "Submit">><</button>><</disable>> | |
| This textbox should also be disabled: | |
| <<disable 1 === 1>><<textbox "$name" "">><</disable>> | |
| This listbox, too: | |
| <<disable true>><<listbox '$whee'>><<optionsfrom ["1", "2", "3"]>><</listbox>><</disable>> | |
| This button should ''not'' be disabled: | |
| <<disable false>><<button "Submit">><</button>><</disable>> | |
| This textbox should ''not'' be disabled: | |
| <<disable 1 === 0>><<textbox "$name" "">><</disable>> | |
| ----- | |
| [[Documentation|https://twinelab.net/custom-macros-for-sugarcube-2/#/disable-macro]] |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| The {{{<<done>>}}} macro can be used to utilize various [[DOM macros|http://www.motoslave.net/sugarcube/2/docs/#macros-dom]] without needing to pair them with interaction or passage events / task objects. | |
| From the documentation, emphasis mine: | |
| > WARNING: All DOM macros require the elements to be manipulated to be on the page. As a consequence, you cannot use them directly within a passage to modify elements within said passage, ''since the elements they are targeting are still rendering and not yet on the page''. You must, generally, use them with a interactive macro (e.g. {{{<<link>>}}}) or within the PassageDone special passage. Elements which are already part of the page, on the other hand, present no issues. | |
| To get around this, the {{{<<done>>}}} macro can be used. | |
| Without the DOM macro, an error is generated: | |
| @@#no-done-replace;This will not be replaced.@@\ | |
| <<replace '#no-done-replace'>>This causes an error.<</replace>> | |
| With the macro, you can do it: | |
| @@#done-replace;This will be replaced.@@\ | |
| <<done>><<replace '#done-replace'>>This was successfully replaced!<</replace>><</done>> | |
| ----- | |
| [[Documentation|https://twinelab.net/custom-macros-for-sugarcube-2/#/done-macro]] |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| The {{{<<on>>}}} macro can be used to set up event handlers using macro code. You can use this code to set up keyboard controls, hotkeys, double click events, and click events on normally not clickable elements. The {{{<<trigger>>}}} macro can be used to artificially trigger events, like clicking links, the {{{<<off>>}}} macro can remove event handlers, and the {{{<<one>>}}} macro can set up single-use handlers. | |
| Try pressing the space bar and/or escape. | |
| <<nobr>> | |
| <<on 'keyup'>> | |
| <<which 32>> | |
| <<trigger 'click' '#space-hotkey a'>> | |
| <<which 27>> | |
| <<dialog 'Escape'>>You can't escape!<</dialog>> | |
| <</on>> | |
| <</nobr>>\ | |
| @@#space-hotkey;<<link 'This link is also activated with the spacebar!'>><<run UI.alert('Spacebar pressed!')>><</link>>@@ | |
| <<link "Remove key events!">><<off "keyup.macro-event">><</link>> | |
| @@#clicky;Click this text for a one-time only (per visit) message!@@ | |
| <<nobr>> | |
| <<one 'click' '#clicky'>> | |
| <<run UI.alert("There's no going back!")>> | |
| <</one>> | |
| <</nobr>> | |
| ----- | |
| [[Documentation|https://twinelab.net/custom-macros-for-sugarcube-2/#/event-macros]] |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| The {{{<<fadein>>}}} and {{{<<fadeout>>}}} macros can be used to display simple, timed fading animations on blocks of text. | |
| <<fadein 10s>>This text, for example is fading in over a long period of time.<</fadein>> | |
| <<fadeout 2s 4s>>While this text is fading out after a delay.<</fadeout>> | |
| <<fadein 5s 5s>><<fadeout 5s 11s>>This text fades in and then out by using both macros.<</fadeout>><</fadein>> | |
| ----- | |
| [[Documentation|https://twinelab.net/custom-macros-for-sugarcube-2/#/fading-macros]] |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| The file system macros, {{{<<import>>}}} and {{{<<export>>}}}, can be used to save arbitrary data to the user's disk and to allow users to upload the same. This can be used by authors to allow users to share data between different stories, such as in episodic games. It can also be used in other ways; an older implementation of a similar concept can be found in my [[Spellbook app|https://twinelab.net/spellbook/]]. | |
| For the following examples, let's enter some data to save. | |
| <<set $name to 'Barry'>>\ | |
| Enter your name: <<textbox '$name' $name autofocus>> @@#error;@@ | |
| <<set $num to 0>>\ | |
| Pick a number: @@#number;$num@@ | |
| <<link '0'>> | |
| <<set $num to 0>> | |
| <<replace '#number'>>$num<</replace>> | |
| <</link>> \ | |
| <<link '1'>> | |
| <<set $num to 1>> | |
| <<replace '#number'>>$num<</replace>> | |
| <</link>> \ | |
| <<link '2'>> | |
| <<set $num to 2>> | |
| <<replace '#number'>>$num<</replace>> | |
| <</link>> \ | |
| <<link '3'>> | |
| <<set $num to 3>> | |
| <<replace '#number'>>$num<</replace>> | |
| <</link>> | |
| <<link 'Continue'>> | |
| <<set $name to $name.trim()>> | |
| <<if not $name>> | |
| <<replace '#error'>>Names typically include letters!<</replace>> | |
| <<else>> | |
| <<goto [[file2]]>> | |
| <</if>> | |
| <</link>> | |
| ----- | |
| [[Documentation|https://twinelab.net/custom-macros-for-sugarcube-2/#/file-system-macros]] |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Now, we'll use the {{{<<export>>}}} macro to save the data you've provided to your hard drive. This will trigger a download. | |
| <<set _data to { name : $name, num : $num }>>\ | |
| <<button 'Export the Data'>> | |
| <<export _data 'info' 'json'>> | |
| <</button>> | |
| The data can be saved in a few different formats, but when imported, you'll need to know what it was exported as. | |
| Next we'll try to import the data back. | |
| [[Continue|file3]] | |
| ----- | |
| [[Documentation|https://twinelab.net/custom-macros-for-sugarcube-2/#/file-system-macros]] |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Now we'll try to import the data with the {{{<<import>>}}} macro. | |
| <<import '$imported' 'json'>> | |
| Before moving on, let's change our name and number too, so we can show these values side by side. | |
| Enter your name: <<textbox '$name' $name autofocus>> @@#error;@@ | |
| Pick a number: @@#number;$num@@ | |
| <<link '0'>> | |
| <<set $num to 0>> | |
| <<replace '#number'>>$num<</replace>> | |
| <</link>> \ | |
| <<link '1'>> | |
| <<set $num to 1>> | |
| <<replace '#number'>>$num<</replace>> | |
| <</link>> \ | |
| <<link '2'>> | |
| <<set $num to 2>> | |
| <<replace '#number'>>$num<</replace>> | |
| <</link>> \ | |
| <<link '3'>> | |
| <<set $num to 3>> | |
| <<replace '#number'>>$num<</replace>> | |
| <</link>> | |
| <<link 'Continue'>> | |
| <<set $name to $name.trim()>> | |
| <<if not $name>> | |
| <<replace '#error'>>Names typically include letters!<</replace>> | |
| <<else>> | |
| <<goto [[file4]]>> | |
| <</if>> | |
| <</link>> | |
| ----- | |
| [[Documentation|https://twinelab.net/custom-macros-for-sugarcube-2/#/file-system-macros]] |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Now here's both sets of data. | |
| !!!The data entered: | |
| name: $name | |
| number: $num | |
| !!!The imported data: | |
| name: $imported.name | |
| number $imported.num | |
| The {{{<<import>>}}} macro can also be used to import SugarCube saved data from other games, meaning you don't always have to generate a custom export. See the documentation for more. | |
| ----- | |
| [[Documentation|https://twinelab.net/custom-macros-for-sugarcube-2/#/file-system-macros]] |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| The {{{<<first>>}}} macro, and it's child tags, {{{<<then>>}}} and {{{<<finally>>}}}, can be used to show content conditionally based on how many times a user has entered a passage. Try going to another passage and coming back, or click the link below to re-navigate to this same passage. | |
| <<first>>\ | |
| This text, for example, only shows on the first visit to this passage. | |
| <<then>>\ | |
| As you can see, the content of this passage has changed on your second visit. | |
| <<finally>>\ | |
| Using the {{{<<}}}{{{finally}}}{{{>>}}} tag allows you to have content that ''stays'' permanently once it is shown. | |
| <</first>><<first>><<then>>\ | |
| You can also show content on the second (or third, etc) time a player visits a passage without needing to show anything the first time around by using the {{{<<}}}{{{then}}}{{{>>}}} macro and leaving the {{{<<}}}{{{first}}}{{{>>}}} part blank. | |
| <</first>><<first>><<finally>>\ | |
| By can also use the above technique with the {{{<<}}}{{{finally}}}{{{>>}}} macro! | |
| <</first>>\ | |
| [[Renavigate to this passage|passage()]] | |
| ----- | |
| [[Documentation|https://twinelab.net/custom-macros-for-sugarcube-2/#/first-macro]] |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| The {{{<<fullscreen>>}}} and {{{<<fullscreenlink>>}}} macro can be used to create buttons or links that engage the browser's fullscreen mode. To leave fullscreen, the user typically has to hit {{{Escape}}}. Note that users can engage fullscreen themselves on most browsers with a function key, usually {{{F11}}}, but this macro includes a few fixes that can help keep your game looking good in fullscreen mode. | |
| <<fullscreenlink 'Click here to go fullscreen!'>> | |
| ----- | |
| [[Documentation|https://twinelab.net/custom-macros-for-sugarcube-2/#/fullscreen-macros]] |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| The ''Simple Inventory'' is a group of macros, functions and methods, and events that can be used to manage simple, key-based inventory systems. What is a key-based inventory system? A system where the items you collect represent key items--items where the game checks that you have them, but the items don't need to have attributes of their own. In other words, this system is not ideal for things like equipment and potions, though it could be extended to handle such things. | |
| <<newinventory '$player'>><<newinventory '$container' 'hammer' 'knife'>>\ | |
| You can create inventories with the {{{<<newinventory>>}}} macro. You'll need to save the inventory //instance// to a variable by providing the macro a variable name, which should be passed in quotes. Typically you want to initialize your inventories in you {{{StoryInit}}} [[special passage|http://www.motoslave.net/sugarcube/2/docs/#special-passage-storyinit]]. You can define as many inventories as you need, and transfer items between them. We'll create two inventories in this passage, one will be initialized with some items inside, another with any items. | |
| [[Continue|inventory2]] | |
| ----- | |
| [[Documentation|https://twinelab.net/custom-macros-for-sugarcube-2/#/simple-inventory]] |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| On this passage, we'll give the user the opportunity to pick up a new item with the {{{<<pickup>>}}} macro. | |
| <<nobr>> | |
| <<if not $player.has('chisel')>> | |
| <<linkreplace 'Pick up the chisel.'>> | |
| You got the chisel. | |
| <<pickup '$player' 'chisel'>> | |
| <</linkreplace>> | |
| <<else>> | |
| You got the chisel. | |
| <</if>> | |
| <</nobr>> | |
| [[Continue|inventory3]] | |
| ----- | |
| [[Documentation|https://twinelab.net/custom-macros-for-sugarcube-2/#/simple-inventory]] |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| In this passage, we'll give the user the opportunity to pick up or drop some items into a chest. | |
| There's a treasure chest in this room! | |
| <<link 'Put some items in the chest.'>> | |
| <<dialog 'Place items.'>> | |
| <<linkedinventory 'leave' '$player' '$container'>> | |
| <</dialog>> | |
| <</link>> | |
| <<link 'Take some items from the chest.'>> | |
| <<dialog 'Take items.'>> | |
| <<linkedinventory 'take' '$container' '$player'>> | |
| <</dialog>> | |
| <</link>> | |
| [[Go back|inventory2]] | |
| [[Continue|inventory4]] | |
| ----- | |
| [[Documentation|https://twinelab.net/custom-macros-for-sugarcube-2/#/simple-inventory]] |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| You can use the methods of the inventory instance to check whether an inventory has certain items, how many items it has, or whether it's empty, among many other things. | |
| <<if $player.has('knife')>>\ | |
| You have a knife! | |
| <</if>>\ | |
| <<if $player.hasAll('hammer', 'chisel')>>\ | |
| You have enough tools to chisel out some stone! | |
| <</if>>\ | |
| <<if $player.isEmpty()>>\ | |
| Your inventory is empty! | |
| <<else>>\ | |
| You are carrying <<= $player.count()>> items in your inventory. | |
| <</if>>\ | |
| [[Go back|inventory3]] | |
| [[Continue|inventory5]] | |
| ----- | |
| [[Documentation|https://twinelab.net/custom-macros-for-sugarcube-2/#/simple-inventory]] |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| The {{{<<message>>}}} macro can be used to create user-toggleable messages, such as for help, tutorials, or more information. We've been using it in the <<button 'View Source Code'>><</button>> buttons all across this file. | |
| <<message 'Help'>>\ | |
| It's a lot like the {{{<<linkappend>>}}} macro, but users can also remove the content when they're done.\ | |
| <</message>> | |
| ----- | |
| [[Documentation|https://twinelab.net/custom-macros-for-sugarcube-2/#/message-macro]] |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| The meter macro set can be used to define cutomizable meters (like health bars, timers, progress bars, etc) and display and update them on the page. | |
| These meters are defined through the {{{<<newmeter>>}}} macro and its child tags, {{{<<colors>>}}}, {{{<<sizing>>}}}, {{{<<animation>>}}}, and {{{<<label>>}}}. You can also just define a meter with no child tags, in which case it will use the default meter settings. | |
| You ''must'' run the {{{<<newmeter>>}}} macro before the story starts, e.g. in your {{{StoryInit}}} special passage. Below is a recreation of the code placed in the {{{StoryInit}}} special passage of this demo file: | |
| \<pre><code><nowiki> | |
| <<set $health to 100, $maxHealth to 100>> | |
| <<newmeter 'timer' 0>> | |
| <<colors 'red' 'green'>> | |
| <<animation 10s linear>> | |
| <</newmeter>> | |
| <<newmeter 'health' 1>> | |
| <<sizing '220px'>> | |
| <<label '$health'>> | |
| <</newmeter>> | |
| <<newmeter 'stamina'>><</newmeter>> | |
| </nowiki></code></pre>\ | |
| [[Continue|meters2]] | |
| ----- | |
| [[Documentation|https://twinelab.net/custom-macros-for-sugarcube-2/#/meter-macros]] |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| You can use the meters in a passage with the {{{<<showmeter>>}}} macro, and update their values (while animating them) with the {{{<<updatemeter>>}}} macro. | |
| <<set _stamina to 75, _maxStamina to 75>>\ | |
| Health: <<showmeter 'health' `_health / _maxHealth`>> | |
| Stamina: <<showmeter 'stamina' `_stamina / _maxStamina`>> | |
| <<link 'Drink a potion (restore some health).'>> | |
| <<set $health to Math.clamp($health + random(10, 20), 0, $maxHealth)>> | |
| <<updatemeter 'health' `$health / $maxHealth`>> | |
| <</link>> | |
| <<link 'Smoke a cigarette (reduce health).'>> | |
| <<set $health to Math.clamp($health - random(10, 30), 0, $maxHealth)>> | |
| <<updatemeter 'health' `$health / $maxHealth`>> | |
| <</link>> | |
| <<link 'Eat some steak (restore stamina).'>> | |
| <<set _stamina to Math.clamp(_stamina + random(10, 20), 0, _maxStamina)>> | |
| <<updatemeter 'stamina' `_stamina / _maxStamina`>> | |
| <</link>> | |
| <<link 'Do some jumping jacks (reduce stamina).'>> | |
| <<set _stamina to Math.clamp(_stamina - random(10, 30), 0, _maxStamina)>> | |
| <<updatemeter 'stamina' `_stamina / _maxStamina`>> | |
| <</link>> | |
| [[Continue|meters3]] | |
| [[Go back|meters]] | |
| ----- | |
| [[Documentation|https://twinelab.net/custom-macros-for-sugarcube-2/#/meter-macros]] |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| You can also use meters to as timers, and plug into meter animations with the JavaScript API. | |
| <<set _time to 0>>\ | |
| Time until the bomb explodes: <<showmeter 'timer' 1>> | |
| @@#boom;@@\ | |
| <<run Meter.get('timer').on(':meter-animation-complete', function () { | |
| $('#boom').append('BOOOOOOOOM!!!!'); | |
| })>> | |
| [[Go back|meters2]] | |
| [[Start over|meters]] | |
| ----- | |
| [[Documentation|https://twinelab.net/custom-macros-for-sugarcube-2/#/meter-macros]] |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| The {{{<<mouseover>>}}} macro can be used to trigger macro code on a variety of mouse and hover events. | |
| Example of a "tooltip": | |
| <<nobr>> | |
| <<mouseover>> | |
| <<link "Hover over this!">><</link>> | |
| <<onmousein>> | |
| <<replace '#tooltip'>>Click me!<</replace>> | |
| <<onmouseout>> | |
| <<replace '#tooltip'>><</replace>> | |
| <</mouseover>> | |
| @@#tooltip;@@ | |
| <</nobr>> | |
| Navigate on mouseover instead of on click: | |
| <<mouseover>>[[Watch out for the pit!|pitfall]]<<onhover>><<goto 'pitfall'>><</mouseover>> | |
| ----- | |
| [[Documentation|https://twinelab.net/custom-macros-for-sugarcube-2/#/mouseover-macro]] |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <<notify>>Hi there!<</notify>>\ | |
| The {{{<<notify>>}}} macro can be used to display a quick message to users. It's less discruptive that a dialog or alert, and ideal for something like a quick inventory or achievement update. You can click the link below to fire another notification in case you missed the first one. Note, however, that allowing users to activate these notifications like this is a bad idea; if they click too much, the animations will start to trip over each other. | |
| <<link 'See a notification.'>> | |
| <<notify>>This is a notification!<</notify>> | |
| <</link>> | |
| ----- | |
| [[Documentation|https://twinelab.net/custom-macros-for-sugarcube-2/#/notify-macro]] |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| This system can be used to display and record the user's playtime, much like in a lot of video games. The playtime system includes a function, a macro, and a passage tag. | |
| Your current playtime is: | |
| @@#time;<<playtime format>>@@ | |
| <<silently>> | |
| <<repeat 1s>> | |
| <<replace '#time'>><<playtime format>><</replace>> | |
| <</repeat>> | |
| <</silently>>\ | |
| Check back to see it update. | |
| In addition, you can fetch specific time values, like minutes, hours, and seconds using the {{{playTime()}}} function. | |
| You've been playing for <<= playTime('minutes')>> minutes! | |
| There's also a passage tag, {{{pausetimer}}}, which can be used to pause the play timer, for example when the user is in menus. | |
| ----- | |
| [[Documentation|https://twinelab.net/custom-macros-for-sugarcube-2/#/playtime-system]] |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| The {{{<<popover>>}}} macro can be used to generate special dialog API modals that are designed to display full screen content. For example, consider try the following. | |
| <<link "Click me!">> | |
| <<popover 'noclick'>>[img[assets/lisa.jpg]]<</popover>> | |
| <</link>> | |
| <<link "Click me!">> | |
| <<popover 'noclick' 'invert'>>[img[assets/bob.jpg]]<</popover>> | |
| <</link>> | |
| You can also display text using the popover: | |
| <<link "Click me!">> | |
| <<popover 'opaque'>>\ | |
| Once upon a time... In a distant land... | |
| Chapel made a macro set that required a constant barrage of unending examples. | |
| \<</popover>> | |
| <</link>> | |
| ----- | |
| [[Documentation|https://twinelab.net/custom-macros-for-sugarcube-2/#/popover]] |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| The {{{<<preload>>}}} macro can be used to preload images. Preloading will improve performance as players click through the game, but will also increase startup time. It is recommended that users only load important images, like icons, and that users avoid loading tons of large images, like high-quality backgrounds. | |
| The {{{<<preload>>}}} macro must be generally used in {{{StoryInit}}}. For example, this demo includes this line in {{{StoryInit}}}: | |
| \<pre><code><nowiki> | |
| <<preload 'assets/lisa.jpg' 'assets/bob.jpg'>> | |
| </nowiki></code></pre>\ | |
| If you need to preload images at some other time it is possible, however, very much not recommended. You can add the following to {{{StoryInit}}} to enable you to preload at any time: | |
| \<pre><code><nowiki> | |
| <<set setup.preload.force to true>> | |
| </nowiki></code></pre>\ | |
| ----- | |
| [[Documentation|https://twinelab.net/custom-macros-for-sugarcube-2/#/preload]] |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| The ''pronoun templates'' system is a drop-in system for handling player characters with configurable genders. It allows users to define and customize their preferred pronouns via a dialog modal that can be accessed via a macro or the {{{Setting}}} API. You can then leverage SugarCube's new {{{Template}}} API (add docs link) to use the templates in your game. | |
| <<link 'Configure your pronouns.'>> | |
| <<pronouns>> | |
| <</link>> | |
| [[Next|pronouns2]] | |
| ----- | |
| [[Documentation|https://twinelab.net/custom-macros-for-sugarcube-2/#/pronoun-templates]] |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <div class='poem'>\ | |
| Nobody heard ?him, the dead ?man, | |
| But still ?he lay moaning: | |
| I was much further out than you thought | |
| And not waving but drowning. | |
| Poor chap, ?he always loved larking | |
| And now ?he’s dead | |
| It must have been too cold for ?him ?his_ heart gave way, | |
| They said. | |
| Oh, no no no, it was too cold always | |
| (Still the dead one lay moaning) | |
| I was much too far out all my life | |
| And not waving but drowning. | |
| \</div> | |
| -- Stevie Smith, “Not Waving but Drowning” from Collected Poems of Stevie Smith. Copyright © 1972 | |
| [[Go back.|pronouns]] | |
| ----- | |
| [[Documentation|https://twinelab.net/custom-macros-for-sugarcube-2/#/pronoun-templates]] |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Pronouns also include a {{{<<verb>>}}} macro for pluralizing the verb forms or third person verbs. | |
| ?He <<verb 'waits'>>. | |
| The macro accepts a singular verb form and attempts to process it and turn it into a plural form if it detects that the pronouns being used are plural. For unusual verbs, you can provide both the singular and plural versions. | |
| ?She<<verb "'s" "'re">> pretty happy about it. | |
| [[Go back.|pronouns2]] | |
| [[Start over.|pronouns]] | |
| ----- | |
| [[Documentation|https://twinelab.net/custom-macros-for-sugarcube-2/#/pronoun-templates]] |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| The speech box system set is a set of macros and functions for creating speech boxes, like | |
| You can use the {{{<<character>>}}} macro in your {{{StoryInit}}} special passage to create other custom macros that you can then use to display speech boxes. For example, the following line of code is in this demo file's {{{StoryInit}}} special passage: | |
| <pre><code><nowiki><<character 'lisa' 'assets/lisa.jpg'>></nowiki></pre></code> | |
| This code creates the {{{<<lisa>>}}} macro for us: | |
| <<lisa>>Hey there!<</lisa>> | |
| If you can't or don't want to predefine characters, you can instead use the {{{<<say>>}}} macro: | |
| <<say 'bob' 'assets/bob.jpg'>>I am basically a meme now.<</say>> | |
| ----- | |
| [[Documentation|https://twinelab.net/custom-macros-for-sugarcube-2/#/speech-box-system]] |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| The {{{<<swap>>}}} macro can be used to create puzzles or other creative forms of user interaction that invloves swapping words around on the page. The {{{<<onswap>>}}} macro can be used to make adjustments and run code when swaps occur, and inside the {{{<<onswap>>}}} block, the {{{swapCurrent()}}} function returns the text that is currently swapped in. | |
| <<set _catsPred to 'They meow constantly.'>>\ | |
| I <<swap>>own<<onswap>> | |
| <<if swapCurrent() is 'love'>> | |
| <<set _catsPred to 'I wish I had more.'>> | |
| <<else>> | |
| <<set _catsPred to 'They meow constantly.'>> | |
| <</if>> | |
| <<replace '#catsPred'>>_catsPred<</replace>> | |
| <</swap>> cats. @@#catsPred;_catsPred@@ I <<swap>>love<</swap>> dogs. I <<swap>>hate<</swap>> birds, though. | |
| [[Try another example.|swap2]] | |
| ----- | |
| [[Documentation|https://twinelab.net/custom-macros-for-sugarcube-2/#/swap-macro-set]] |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Here's an example of a simple number code puzzle implemented with the swap macro: | |
| <<set _correct to [false, false, false]>>\ | |
| Enter the code: | |
| <<swap>>1<<onswap>> | |
| <<if swapCurrent() is '3'>> | |
| <<set _correct[0] to true>> | |
| <<else>> | |
| <<set _correct[0] to false>> | |
| <</if>> | |
| <</swap>> | |
| <<swap>>2<<onswap>> | |
| <<if swapCurrent() is '1'>> | |
| <<set _correct[1] to true>> | |
| <<else>> | |
| <<set _correct[1] to false>> | |
| <</if>> | |
| <</swap>> | |
| <<swap>>3<<onswap>> | |
| <<if swapCurrent() is '2'>> | |
| <<set _correct[2] to true>> | |
| <<else>> | |
| <<set _correct[2] to false>> | |
| <</if>> | |
| <</swap>> | |
| <span id="solved"> | |
| @@#not-right;@@ | |
| <<button "Try the combination...">> | |
| <<if not _correct.includes(false)>> | |
| <<replace '#solved'>>''You got it!''<</replace>> | |
| <<else>> | |
| <<replace '#not-right'>>No, that's not it...<</replace>> | |
| <</if>> | |
| <</button>> | |
| </span> | |
| (The code is 312.) | |
| [[Previous|swap]] | |
| ----- | |
| [[Documentation|https://twinelab.net/custom-macros-for-sugarcube-2/#/swap-macro-set]] |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| The {{{<<typesim>>}}} macro allows you to //simulate// user input, but actually show them a predefined message. Try typing in the box below for an example: | |
| <<typesim "You get to feel like you're typing, and that can be a cool interaction, but in reality, we just show you what we want you to see and make you say what we want you to say.">>\ | |
| Once the user finishes the message, you can run any code you like!\ | |
| <</typesim>>\ | |
| ----- | |
| [[Documentation|https://twinelab.net/custom-macros-for-sugarcube-2/#/type-sim]] |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| The {{{<<ui>>}}} macro can be used to control many features of SugarCube's default UI from within macro code. | |
| <<link 'Toggle the UI Bar'>> | |
| <<ui 'toggle'>> | |
| <</link>> | |
| <<link 'Open the Saves Dialog'>> | |
| <<ui 'saves'>> | |
| <</link>> | |
| ----- | |
| [[Documentation|https://twinelab.net/custom-macros-for-sugarcube-2/#/ui-macro]] |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment