Workshop: Make Visual Novels & Text Adventure Games with Twine
Transcript of Workshop: Make Visual Novels & Text Adventure Games with Twine
![Page 1: Workshop: Make Visual Novels & Text Adventure Games with Twine](https://reader030.fdocuments.us/reader030/viewer/2022032616/55a702a11a28aba71f8b45cc/html5/thumbnails/1.jpg)
Make Visual Novels & Text Adventure Games with Twine Rebecca Cohen-Palacios // Pixelles
Making Visual Novels &
Text Adventure Games
Twine Workshop
![Page 2: Workshop: Make Visual Novels & Text Adventure Games with Twine](https://reader030.fdocuments.us/reader030/viewer/2022032616/55a702a11a28aba71f8b45cc/html5/thumbnails/2.jpg)
Make Visual Novels & Text Adventure Games with Twine Rebecca Cohen-Palacios // Pixelles
Twine games are a series
of connected, interactive
passages.
http://twinery.org
![Page 3: Workshop: Make Visual Novels & Text Adventure Games with Twine](https://reader030.fdocuments.us/reader030/viewer/2022032616/55a702a11a28aba71f8b45cc/html5/thumbnails/3.jpg)
Make Visual Novels & Text Adventure Games with Twine Rebecca Cohen-Palacios // Pixelles
Use Twine to make:
• Text Adventure Games
• Visual Novels / Dating Sims
• Dialogue / Storytelling Prototypes
• UX Flow Mockups
• …& lots more!
![Page 4: Workshop: Make Visual Novels & Text Adventure Games with Twine](https://reader030.fdocuments.us/reader030/viewer/2022032616/55a702a11a28aba71f8b45cc/html5/thumbnails/4.jpg)
Workshop: “Make Visual Novels & Text Adventure Games with Twine” Rebecca Cohen-Palacios // Pixelles
Basics: Passages
Twine stories are composed of
boxes called passages.
Blue passages contain your
story’s text and game content.
Other colored passages are
special. They may be your start
screen, metadata, scripts, fonts,
images, or css.
![Page 5: Workshop: Make Visual Novels & Text Adventure Games with Twine](https://reader030.fdocuments.us/reader030/viewer/2022032616/55a702a11a28aba71f8b45cc/html5/thumbnails/5.jpg)
Workshop: “Make Visual Novels & Text Adventure Games with Twine” Rebecca Cohen-Palacios // Pixelles
Basics: New Passage
1. Right click → New Passage
2. Story menu → New Passage
3. OSX: ⌘N / Win: Ctrl + N
4. New icon
Special passages can be created
from the menu:
Story → Special Passages
![Page 6: Workshop: Make Visual Novels & Text Adventure Games with Twine](https://reader030.fdocuments.us/reader030/viewer/2022032616/55a702a11a28aba71f8b45cc/html5/thumbnails/6.jpg)
Workshop: “Make Visual Novels & Text Adventure Games with Twine” Rebecca Cohen-Palacios // Pixelles
Basics: Edit Passage
Double click a passage box
to edit the content.
Give your passages
meaningful titles to refer
back to them easily.
![Page 7: Workshop: Make Visual Novels & Text Adventure Games with Twine](https://reader030.fdocuments.us/reader030/viewer/2022032616/55a702a11a28aba71f8b45cc/html5/thumbnails/7.jpg)
Workshop: “Make Visual Novels & Text Adventure Games with Twine” Rebecca Cohen-Palacios // Pixelles
Basics: Link Passages
In order for your story to be
interactive, we need to link
passages.
Edit your Start passage. Add
a link to the passage you
created earlier.
[[text to display|passage title]]
EX:[[Start rolling..|playKatamari]]
Note: Passage Titles are case sensitive! They
must be written exactly as seen in the colored
label.
![Page 8: Workshop: Make Visual Novels & Text Adventure Games with Twine](https://reader030.fdocuments.us/reader030/viewer/2022032616/55a702a11a28aba71f8b45cc/html5/thumbnails/8.jpg)
Make Visual Novels & Text Adventure Games with Twine Rebecca Cohen-Palacios // Pixelles
Note: Start Passage
Your Start passage is special.
It’s the first thing players see in your game. It must
be written exactly as “Start” (capital S matters).
![Page 9: Workshop: Make Visual Novels & Text Adventure Games with Twine](https://reader030.fdocuments.us/reader030/viewer/2022032616/55a702a11a28aba71f8b45cc/html5/thumbnails/9.jpg)
Make Visual Novels & Text Adventure Games with Twine Rebecca Cohen-Palacios // Pixelles
Testing Your Game
Build → Test Play(⌘T / Ctrl + T)
![Page 10: Workshop: Make Visual Novels & Text Adventure Games with Twine](https://reader030.fdocuments.us/reader030/viewer/2022032616/55a702a11a28aba71f8b45cc/html5/thumbnails/10.jpg)
Make Visual Novels & Text Adventure Games with Twine Rebecca Cohen-Palacios // Pixelles
Ready? Publish it!Build → Build Story(⌘B / Ctrl +B)
Where to host?Dropbox
Philome.la
Google Drive
Itch.io
GitHub
![Page 11: Workshop: Make Visual Novels & Text Adventure Games with Twine](https://reader030.fdocuments.us/reader030/viewer/2022032616/55a702a11a28aba71f8b45cc/html5/thumbnails/11.jpg)
Workshop: “Make Visual Novels & Text Adventure Games with Twine” Rebecca Cohen-Palacios // Pixelles
Basics: Add Images
• Drag and drop into Twine
• Story → Import Image
Twine will automatically import
them as special passages. Add
an image to any passage by:
[img[image passage title]]
EX:[katamari[IMG_KatamariBall]]
Remember: Passage Titles are case sensitive! They
must be written exactly as seen in the colored label.
![Page 12: Workshop: Make Visual Novels & Text Adventure Games with Twine](https://reader030.fdocuments.us/reader030/viewer/2022032616/55a702a11a28aba71f8b45cc/html5/thumbnails/12.jpg)
Make Visual Novels & Text Adventure Games with Twine Rebecca Cohen-Palacios // Pixelles
Advanced: FormattingFormatting Code Appears as..
Italics //Text// Text
Bold “Text" Text
Underline __Text__ Text
Bulleted List * Apple * Orange• Apple
• Orange
Numbered List# Apple
# Orange
1. Apple
2. Orange
Inline CSS @@color:red;Text@@ Text
Comments /% note %/
More info: http://twinery.org/wiki/
![Page 13: Workshop: Make Visual Novels & Text Adventure Games with Twine](https://reader030.fdocuments.us/reader030/viewer/2022032616/55a702a11a28aba71f8b45cc/html5/thumbnails/13.jpg)
Make Visual Novels & Text Adventure Games with Twine Rebecca Cohen-Palacios // Pixelles
Reference: LogicUsage Code
Show passage2 in passage1 <<display “Passage2”>>
Create variable <<set $numOranges = 10>>
Show variable <<print $numOranges>>
Modify variable
+, -, *, /<<print $numOranges + 10>> <<print “Hello” + $playerName>>
If conditional<<if $isDragonBorn eq “yes”>> do this <<endif>><<if…>> … <<else if…>> … <<else>>…<<endif>>
Operators
is, neq, >, gt, >=, gte, <, lt, <=, lte, not
<<if $playerType is “DragonBorn”>> do this <<endif>><<if $numOranges lt 10>> do this <<else>> do that <<endif>>
Operator Conjunctions
and, or, ()<<if ($player is “dragonborn”) and ($age > 18) >>go on an adventure <<endif>>
Hide code from making line breaks <<silently>>code stuffs<<endsilently>>
More expressions + info: http://twinery.org/wiki/expression
![Page 14: Workshop: Make Visual Novels & Text Adventure Games with Twine](https://reader030.fdocuments.us/reader030/viewer/2022032616/55a702a11a28aba71f8b45cc/html5/thumbnails/14.jpg)
Make Visual Novels & Text Adventure Games with Twine Rebecca Cohen-Palacios // Pixelles
Let’s make a visual novel!By using Twine logic and expressions, with some stylesheet
magic, we can make visual novels!
![Page 15: Workshop: Make Visual Novels & Text Adventure Games with Twine](https://reader030.fdocuments.us/reader030/viewer/2022032616/55a702a11a28aba71f8b45cc/html5/thumbnails/15.jpg)
Workshop: “Make Visual Novels & Text Adventure Games with Twine” Rebecca Cohen-Palacios // Pixelles
Most visual novels look like this:
(Hatoful Boyfriend)
![Page 16: Workshop: Make Visual Novels & Text Adventure Games with Twine](https://reader030.fdocuments.us/reader030/viewer/2022032616/55a702a11a28aba71f8b45cc/html5/thumbnails/16.jpg)
Make Visual Novels & Text Adventure Games with Twine Rebecca Cohen-Palacios // Pixelles
Styling
Twine comes with several story formats.
A popular one is Sugarcane. You can
change the format of any story by:
Story → Story Format
![Page 17: Workshop: Make Visual Novels & Text Adventure Games with Twine](https://reader030.fdocuments.us/reader030/viewer/2022032616/55a702a11a28aba71f8b45cc/html5/thumbnails/17.jpg)
Make Visual Novels & Text Adventure Games with Twine Rebecca Cohen-Palacios // Pixelles
CSS
Using .css you can
change the way your
any story format looks.
Right click →
New stylesheet here
![Page 18: Workshop: Make Visual Novels & Text Adventure Games with Twine](https://reader030.fdocuments.us/reader030/viewer/2022032616/55a702a11a28aba71f8b45cc/html5/thumbnails/18.jpg)
Workshop: “Make Visual Novels & Text Adventure Games with Twine” Rebecca Cohen-Palacios // Pixelles
CSS: SugarCaneUsing only a few classes you can really
get into styling Sugarcane.
• #sidebar
contains story metadata
• #passages
container for all your passages
• .passage
individual passage
• .passage a
all links in passages
• .passage a.internalLink
[[text|passage]] links only
![Page 19: Workshop: Make Visual Novels & Text Adventure Games with Twine](https://reader030.fdocuments.us/reader030/viewer/2022032616/55a702a11a28aba71f8b45cc/html5/thumbnails/19.jpg)
Make Visual Novels & Text Adventure Games with Twine Rebecca Cohen-Palacios // Pixelles
Before continuing:Download the “Love Classic” theme.
Use this as a base .tws whenever you want to make
a visual novel using Twine.
![Page 20: Workshop: Make Visual Novels & Text Adventure Games with Twine](https://reader030.fdocuments.us/reader030/viewer/2022032616/55a702a11a28aba71f8b45cc/html5/thumbnails/20.jpg)
Workshop: “Make Visual Novels & Text Adventure Games with Twine” Rebecca Cohen-Palacios // Pixelles
![Page 21: Workshop: Make Visual Novels & Text Adventure Games with Twine](https://reader030.fdocuments.us/reader030/viewer/2022032616/55a702a11a28aba71f8b45cc/html5/thumbnails/21.jpg)
Workshop: “Make Visual Novels & Text Adventure Games with Twine” Rebecca Cohen-Palacios // Pixelles
We Need HTML
In order to achieve this look we
need to add some HTML to our
passages. This way we can style
things like:
• Background picture
• Character image
• Character Name
• Dialogue
![Page 22: Workshop: Make Visual Novels & Text Adventure Games with Twine](https://reader030.fdocuments.us/reader030/viewer/2022032616/55a702a11a28aba71f8b45cc/html5/thumbnails/22.jpg)
Make Visual Novels & Text Adventure Games with Twine Rebecca Cohen-Palacios // Pixelles
Macros
With the help of macros, we don’t have to write all
that HTML in every passage.
What is a macro? Essentially code shorthand! <<macroName>>
Twine comes built with some handy macros:<<display “PassageName”>> <<silently>>…<<endsilently>><<if…>> <<print $var>>
More info + other built-in macros: http://twinery.org/wiki/macro
![Page 23: Workshop: Make Visual Novels & Text Adventure Games with Twine](https://reader030.fdocuments.us/reader030/viewer/2022032616/55a702a11a28aba71f8b45cc/html5/thumbnails/23.jpg)
Make Visual Novels & Text Adventure Games with Twine Rebecca Cohen-Palacios // Pixelles
Custom MacrosUsing a custom macro, we can write a shortcut for
each HTML grouping. Custom macros are created
using javascript.
Right click → New script here
If you want to use jQuery, you’ll need to enable it:
Story → Special Passages → Story Settings
![Page 24: Workshop: Make Visual Novels & Text Adventure Games with Twine](https://reader030.fdocuments.us/reader030/viewer/2022032616/55a702a11a28aba71f8b45cc/html5/thumbnails/24.jpg)
Make Visual Novels & Text Adventure Games with Twine Rebecca Cohen-Palacios // Pixelles
Custom Macros
macros['setscene'] = {
handler: function(place, macroName, params, parser) {var $scene = '<div class="background">[img["' + params[0] + '"]]</div>';new Wikifier(place, $scene);
},
init: function() {},};
Created a macro called setscene. It handles creating the
background HTML so that we don’t have to repeat
<div…>[img[..]]]</div> in every passage.
Now we only have to write:<<setscene “Image Passage Title”>>
![Page 25: Workshop: Make Visual Novels & Text Adventure Games with Twine](https://reader030.fdocuments.us/reader030/viewer/2022032616/55a702a11a28aba71f8b45cc/html5/thumbnails/25.jpg)
Make Visual Novels & Text Adventure Games with Twine Rebecca Cohen-Palacios // Pixelles
Line by line:
<<setscene “img”>>
01. macros[‘setscene'] = 02. {03. handler: function(place, macroName, params, parser) {04. var $scene = '<div class="background">[img["' + params[0] + '"]]</div>';05. new Wikifier(place, $scene);06. },
07. init: function() {},08. };
01. macros[‘the name of your macro’]
03. the handler function tells the macro what to do: at this place in the passage use
this setScene with the background image passage as a parameter using the Twine
parser.
04. create HTML with the background image passage
05. Wikifier is what Twine uses to display text on the page. We’re telling Wikifier to
display our newly created HTML.07. Tells javascript to run this code when the passage is initialized (rendered).
![Page 26: Workshop: Make Visual Novels & Text Adventure Games with Twine](https://reader030.fdocuments.us/reader030/viewer/2022032616/55a702a11a28aba71f8b45cc/html5/thumbnails/26.jpg)
Make Visual Novels & Text Adventure Games with Twine Rebecca Cohen-Palacios // Pixelles
Custom Macros
If you scroll through the DialogeLayout passage
you can see that several macros were created to do
most of our heavy HTML lifting.
MACRO POWER!!
No macros:
![Page 27: Workshop: Make Visual Novels & Text Adventure Games with Twine](https://reader030.fdocuments.us/reader030/viewer/2022032616/55a702a11a28aba71f8b45cc/html5/thumbnails/27.jpg)
Make Visual Novels & Text Adventure Games with Twine Rebecca Cohen-Palacios // Pixelles
Custom Macros
They can even do special javascript-y / jQuery effects like
a cool typewriter effect. You can even use tags to target
specific passages instead of using code shorthand.
Try it out!
Add the tag “t8n-typewriter-1” to any passage. Test play
your story to see it in action. This effect was written by L
on Glorious Trainwrecks.
![Page 28: Workshop: Make Visual Novels & Text Adventure Games with Twine](https://reader030.fdocuments.us/reader030/viewer/2022032616/55a702a11a28aba71f8b45cc/html5/thumbnails/28.jpg)
Make Visual Novels & Text Adventure Games with Twine Rebecca Cohen-Palacios // Pixelles
Using “Love Classic” theme
We briefly covered macros and styling. It’s a lot to
cover in a short workshop but by exploring and
making mistakes you can have all the visual novel
twine making powers!
Love Classic is designed to be a easy, yet
functional theme for making visual novels in Twine.
It uses Sugarcane and Twine 1.4.2.
(It will eventually be updated for Twine2 when the build is stable)
![Page 29: Workshop: Make Visual Novels & Text Adventure Games with Twine](https://reader030.fdocuments.us/reader030/viewer/2022032616/55a702a11a28aba71f8b45cc/html5/thumbnails/29.jpg)
Make Visual Novels & Text Adventure Games with Twine Rebecca Cohen-Palacios // Pixelles
create & store all your
game’s variables here
Reference Layouts:
Dialogue
Narration
Sample Content:
Text
Choice Links
CSS StylesheetCustom Macros
Your game’s images
Titlescreen
![Page 30: Workshop: Make Visual Novels & Text Adventure Games with Twine](https://reader030.fdocuments.us/reader030/viewer/2022032616/55a702a11a28aba71f8b45cc/html5/thumbnails/30.jpg)
Make Visual Novels & Text Adventure Games with Twine Rebecca Cohen-Palacios // Pixelles
Using “Love Classic” theme
Reference Layouts:
Use DialogueLayout when a character or yourself
is speaking. It appears at the bottom of the screen
with a name tag.
Use NarrationText or NarrationChoices for
narrating or display choices in the dead center of
the screen. No name tags are shown in this layout.
![Page 31: Workshop: Make Visual Novels & Text Adventure Games with Twine](https://reader030.fdocuments.us/reader030/viewer/2022032616/55a702a11a28aba71f8b45cc/html5/thumbnails/31.jpg)
Workshop: “Make Visual Novels & Text Adventure Games with Twine” Rebecca Cohen-Palacios // Pixelles
Using “Love Classic” theme
Each layout comes with custom
macros to make it easier to write
a visual novel.
Open up DialogueLayout or
NarrationText. The macros are
explained as comments.
Keep these layouts as
references. Then copy & paste
them for each of your passages,
as necessary.
![Page 32: Workshop: Make Visual Novels & Text Adventure Games with Twine](https://reader030.fdocuments.us/reader030/viewer/2022032616/55a702a11a28aba71f8b45cc/html5/thumbnails/32.jpg)
Make Visual Novels & Text Adventure Games with Twine Rebecca Cohen-Palacios // Pixelles
Using “Love Classic” theme
Sample Content:
This is just example content.
You should be writing your content directly into the
layout you want to use but for reference purposes,
I’ve separated it out.
![Page 33: Workshop: Make Visual Novels & Text Adventure Games with Twine](https://reader030.fdocuments.us/reader030/viewer/2022032616/55a702a11a28aba71f8b45cc/html5/thumbnails/33.jpg)
Make Visual Novels & Text Adventure Games with Twine Rebecca Cohen-Palacios // Pixelles
Modifying “Love Classic”
If you want to change the custom macro HTML or
add new ones:
Edit the Script passage
If you want to change the look:
Edit “Theme” passage.
Explore! Make it your own! You can add more
character positions, dialogue styles, and passage
transitions in the stylesheet.
![Page 34: Workshop: Make Visual Novels & Text Adventure Games with Twine](https://reader030.fdocuments.us/reader030/viewer/2022032616/55a702a11a28aba71f8b45cc/html5/thumbnails/34.jpg)
Make Visual Novels & Text Adventure Games with Twine Rebecca Cohen-Palacios // Pixelles
Credit is nice!
Rebecca Cohen-Palacios (@rebheartsyou)
![Page 35: Workshop: Make Visual Novels & Text Adventure Games with Twine](https://reader030.fdocuments.us/reader030/viewer/2022032616/55a702a11a28aba71f8b45cc/html5/thumbnails/35.jpg)
Workshop: “Make Visual Novels & Text Adventure Games with Twine” Rebecca Cohen-Palacios // Pixelles
Make Games!
Don’t hesitate to ask me any
questions or even for features.
Rebecca Cohen-Palacios
@rebheartsyou
Pixelles Workshop:
“Make Visual Novels & Text
Adventure Games with Twine”
![Page 36: Workshop: Make Visual Novels & Text Adventure Games with Twine](https://reader030.fdocuments.us/reader030/viewer/2022032616/55a702a11a28aba71f8b45cc/html5/thumbnails/36.jpg)
Workshop: “Make Visual Novels & Text Adventure Games with Twine” Rebecca Cohen-Palacios // Pixelles
Special Thanks
Beautiful character assets were
drawn by: Kim Hoang
Inspiration for the visual novel
theme is from Ben Swinden’s
original base.
![Page 37: Workshop: Make Visual Novels & Text Adventure Games with Twine](https://reader030.fdocuments.us/reader030/viewer/2022032616/55a702a11a28aba71f8b45cc/html5/thumbnails/37.jpg)
Make Visual Novels & Text Adventure Games with Twine Rebecca Cohen-Palacios // Pixelles
Twine Resources
• Using Javascript with Twine
• Tutorials & Macros
• How to Create Custom Macros in Twine
• Twine Wiki, Reference, Built-in Macros
• Twine Macros, Variables, & Expressions
• Twine as a Prototyping Tool
![Page 38: Workshop: Make Visual Novels & Text Adventure Games with Twine](https://reader030.fdocuments.us/reader030/viewer/2022032616/55a702a11a28aba71f8b45cc/html5/thumbnails/38.jpg)
Make Visual Novels & Text Adventure Games with Twine Rebecca Cohen-Palacios // Pixelles
Javascript/jQuery Resources
• Code Academy: Javascript
• W3Schools: JavaScript Tutorial
• jQuery Foundation
• jQuery Cheatsheet
![Page 39: Workshop: Make Visual Novels & Text Adventure Games with Twine](https://reader030.fdocuments.us/reader030/viewer/2022032616/55a702a11a28aba71f8b45cc/html5/thumbnails/39.jpg)
Make Visual Novels & Text Adventure Games with Twine Rebecca Cohen-Palacios // Pixelles
CSS Resources
• CSS is Your Friend: Basics of Changing Twine’s
Default Appearance
• Twine: Custom CSS Passage Transitions
• Code Academy: HTML & CSS
• Learn CSS Layout
• W3Schools CSS Tutorial