Workshop: Make Visual Novels & Text Adventure Games with Twine

Make Visual Novels & Text Adventure Games with Twine Rebecca Cohen-Palacios // Pixelles

Making Visual Novels &

Text Adventure Games

Twine Workshop


Twine games are a series

of connected, interactive

passages.

http://twinery.org

http://twinery.org


Use Twine to make:

• Text Adventure Games

• Visual Novels / Dating Sims

• Dialogue / Storytelling Prototypes

• UX Flow Mockups

• …& lots more!

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.

http://pixelles.ca/blog/2015/01/workshop-twine

http://twitter.com/rebheartsyou


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




Basics: Edit Passage

Double click a passage box

to edit the content.

Give your passages

meaningful titles to refer

back to them easily.




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.




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).


Testing Your Game

Build → Test Play(⌘T / Ctrl + T)


Ready? Publish it!Build → Build Story(⌘B / Ctrl +B)

Where to host?Dropbox

Philome.la

Google Drive

Itch.io

GitHub

http://dropbox.com

http://www.philome.la

https://www.google.ca/url?sa=t&rct=j&q=&esrc=s&source=web&cd=2&ved=0CCMQFjAB&url=http://videlais.com/2013/06/25/using-google-drive-to-host-twine-and-other-html-files/&ei=CUzAVKGtMYifNrHJg4gM&usg=AFQjCNGGwl6FiA8JPsCflsLZtODItms6LA&sig2=rR2k7zSWiooj-_BkGWVzsA

https://itch.io/tag/twine

https://github.com/


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.




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/

http://twinery.org/wiki/


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

http://twinery.org/wiki/expression


Let’s make a visual novel!By using Twine logic and expressions, with some stylesheet

magic, we can make visual novels!


Most visual novels look like this:

(Hatoful Boyfriend)




Styling

Twine comes with several story formats.

A popular one is Sugarcane. You can

change the format of any story by:

Story → Story Format


CSS

Using .css you can

change the way your

any story format looks.

Right click →

New stylesheet here


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




Before continuing:Download the “Love Classic” theme.

Use this as a base .tws whenever you want to make

a visual novel using Twine.

http://pixelles.ca/wordpress/wp-content/uploads/2015/01/Pixelles_LOVEClassic.tws_.zip





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




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

http://twinery.org/wiki/expression


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


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”>>


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).

http://twinery.org/1/api/files/wikifier-js.html


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:


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.


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)

http://pixelles.ca/wordpress/wp-content/uploads/2015/01/Pixelles_LOVEClassic.tws_.zip


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



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.



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.





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.


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.


Credit is nice!

Rebecca Cohen-Palacios (@rebheartsyou)


Make Games!

Don’t hesitate to ask me any

questions or even for features.

Rebecca Cohen-Palacios

[email protected]

@rebheartsyou

Pixelles Workshop:

“Make Visual Novels & Text

Adventure Games with Twine”



mailto:[email protected]




Special Thanks

Beautiful character assets were

drawn by: Kim Hoang

Inspiration for the visual novel

theme is from Ben Swinden’s

original base.



http://twitter.com/kimbert

http://twitter.com/benswinden


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

http://codeliberation.github.io/CLF-slides/Classes_and_Workshops/HTML5_and_JavaScript/2014_Web_Storytelling/1b_Twine_JavaScript.pdf

http://www.glorioustrainwrecks.com/taxonomy/term/6011

http://eturnerx.blogspot.ca/2012/12/how-to-create-custom-macros-in-twine.html

http://twinery.org/wiki/start

http://twinery.org/wiki/twine_reference

http://www.glorioustrainwrecks.com/files/Twine1.3.5.Macros.html#9.3

http://aparrish.neocities.org/twine-macros-variables-expressions.html

http://gersande.com/twine-as-a-prototyping-tool


Javascript/jQuery Resources

• Code Academy: Javascript

• W3Schools: JavaScript Tutorial

• jQuery Foundation

• jQuery Cheatsheet

http://codeacademy.com/tracks/javascript

http://w3schools.com/js

http://jquery.org

http://oscarotero.com/jquery


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

http://twinery.org/forum/index.php?topic=1528.0

http://glorioustrainwrecks.com/node/5084

http://codeacademy.com/en/tracks/web

http://learnlayout.com

http://w3schools.com/css

Education

Workshop: Make Visual Novels & Text Adventure Games with Twine