Workshop: Make Visual Novels & Text Adventure Games with Twine

1. Make Visual Novels & Text Adventure Games with Twine Rebecca Cohen-Palacios // Pixelles Making Visual Novels & Text Adventure Games Twine Workshop

2. Make Visual Novels & Text Adventure Games with Twine Rebecca Cohen-Palacios // Pixelles Twine games are a series of connected, interactive passages. http://twinery.org

3. 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!

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

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

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

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

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

9. Make Visual Novels & Text Adventure Games with Twine Rebecca Cohen-Palacios // Pixelles Testing Your Game Build → Test Play (⌘T / Ctrl + T)

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

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

12. Make Visual Novels & Text Adventure Games with Twine Rebecca Cohen-Palacios // Pixelles Advanced: Formatting Formatting 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/

13. Make Visual Novels & Text Adventure Games with Twine Rebecca Cohen-Palacios // Pixelles Reference: Logic Usage 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

14. 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!

15. Workshop: “Make Visual Novels & Text Adventure Games with Twine” Rebecca Cohen-Palacios // Pixelles Most visual novels look like this: (Hatoful Boyfriend)

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

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

18. Workshop: “Make Visual Novels & Text Adventure Games with Twine” Rebecca Cohen-Palacios // Pixelles CSS: SugarCane Using 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

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

20. Workshop: “Make Visual Novels & Text Adventure Games with Twine” Rebecca Cohen-Palacios // Pixelles

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

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

23. Make Visual Novels & Text Adventure Games with Twine Rebecca Cohen-Palacios // Pixelles Custom Macros Using 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

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

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

26. 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:

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

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

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

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

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

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

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

34. Make Visual Novels & Text Adventure Games with Twine Rebecca Cohen-Palacios // Pixelles Credit is nice! Rebecca Cohen-Palacios (@rebheartsyou)

35. 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 rebthegreat@gmail.com @rebheartsyou Pixelles Workshop: “Make Visual Novels & Text Adventure Games with Twine”

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

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

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

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

Workshop: Make Visual Novels & Text Adventure Games with Twine

Workshop: Make Visual Novels & Text Adventure Games with Twine

Recommandé

Contenu connexe

En vedette

En vedette(17)

Dernier

Dernier(20)

Workshop: Make Visual Novels & Text Adventure Games with Twine