Using JavaScript with Twine Cool effects to polish your interactive - - PowerPoint PPT Presentation

▶
using javascript with twine
SMART_READER_LITE
LIVE PREVIEW

Using JavaScript with Twine Cool effects to polish your interactive - - PowerPoint PPT Presentation

Oct 24, 2022 147 likes •621 views

The Code Liberation Foundation Lecture 1b: Using JavaScript with Twine Using JavaScript with Twine Cool effects to polish your interactive story! The Code Liberation Foundation Lecture 1b: Using JavaScript with Twine What is JavaScript? A

slide-1
SLIDE 1

Lecture 1b: Using JavaScript with Twine The Code Liberation Foundation

Using JavaScript with Twine

Cool effects to polish your interactive story!

slide-2
SLIDE 2

Lecture 1b: Using JavaScript with Twine The Code Liberation Foundation

What is JavaScript?

  • A 19-year-old programming language that is

mainly used on the web.

  • Allows dynamic interaction and effects to

happen based on conditions and events.

slide-3
SLIDE 3

Lecture 1b: Using JavaScript with Twine The Code Liberation Foundation

What is jQuery?

  • A JavaScript framework, or set of pre-made tools

and functions.

  • jQuery makes creating animation, interaction

effects, etc. using JavaScript easier.

slide-4
SLIDE 4

Lecture 1b: Using JavaScript with Twine The Code Liberation Foundation

Using jQuery in Twine

Step 1: Create a new passage and use the script tag to include custom Javascript in your story.

slide-5
SLIDE 5

Lecture 1b: Using JavaScript with Twine The Code Liberation Foundation

Using jQuery in Twine

Step 2: In the passage area, write:

//requires jquery

slide-6
SLIDE 6

Lecture 1b: Using JavaScript with Twine The Code Liberation Foundation

Basic concepts of JavaScript

slide-7
SLIDE 7

Lecture 1b: Using JavaScript with Twine The Code Liberation Foundation

JavaScript Variables

Useful for storing data that may change or be referenced throughout the course of your game. For example, best friends may change but the label stays the same:

var myBestFriend = “Isaiah”; var myBestFriend = “Rebecca”;

slide-8
SLIDE 8

Lecture 1b: Using JavaScript with Twine The Code Liberation Foundation

JavaScript Functions

  • A group of code that performs a specific task.

var fetch = function (object) { run to the object; pick up the object; bring back the object; }; fetch(ball);

slide-9
SLIDE 9

Lecture 1b: Using JavaScript with Twine The Code Liberation Foundation

Conditional Statements

  • Perform a task if something is true or false.

var beAnAdult = function (day) { if (day != “Saturday” || “Sunday”) { go to work; } else { party; } };

slide-10
SLIDE 10

Lecture 1b: Using JavaScript with Twine The Code Liberation Foundation

Twine Functions & Conditional Statements

There are many native functions in Twine. Check

  • ut twinery.org/wiki/function if you want to

include them in your game. You can read about Twine’s conditional statements at http://twinery.org/wiki/if

slide-11
SLIDE 11

Lecture 1b: Using JavaScript with Twine The Code Liberation Foundation

Handling Player Interaction

slide-12
SLIDE 12

Lecture 1b: Using JavaScript with Twine The Code Liberation Foundation

Event handlers

Runs a function when an interaction (click, hover, etc.) has happened.

slide-13
SLIDE 13

Lecture 1b: Using JavaScript with Twine The Code Liberation Foundation

Suggestion!

JavaScript is best for dynamic effects. Use CSS to style things before the page loads.

.passage a { display:none; }

slide-14
SLIDE 14

Lecture 1b: Using JavaScript with Twine The Code Liberation Foundation

Click events

Use the click event to trigger code when an object is clicked once.

$("div").click(function() { console.log("You clicked me!"); });

slide-15
SLIDE 15

Lecture 1b: Using JavaScript with Twine The Code Liberation Foundation

Double click events

Use the dblclick event to trigger code when an

  • bject is clicked twice.

$("div").dblclick(function() { console.log("You double clicked me!"); });

slide-16
SLIDE 16

Lecture 1b: Using JavaScript with Twine The Code Liberation Foundation

Mouseover events

Use the mouseover event to trigger code when an

  • bject is moused over.

$("div").mouseover(function() { console.log("You moused over me!"); });

slide-17
SLIDE 17

Lecture 1b: Using JavaScript with Twine The Code Liberation Foundation

Mouseout events

Use the mouseout event to trigger code when an

  • bject is no longer being moused over.

$("div").mouseout(function() { console.log("You moused off of me!"); });

slide-18
SLIDE 18

Lecture 1b: Using JavaScript with Twine The Code Liberation Foundation

Hover events

Use the hover event to trigger code when an object is moused over AND out.

$("div").hover(function() { console.log("You hovered over me!"); });

slide-19
SLIDE 19

Lecture 1b: Using JavaScript with Twine The Code Liberation Foundation

Creating effects with jQuery

slide-20
SLIDE 20

Lecture 1b: Using JavaScript with Twine The Code Liberation Foundation

Finding HTML objects

Use the find function to locate & modify HTML elements, classes, or IDs.

$("div").click(function() { $(".passage").find(".body").css("background", "red"); });

slide-21
SLIDE 21

Lecture 1b: Using JavaScript with Twine The Code Liberation Foundation

Appending text and HTML

Use the append function to add text and/or HTML elements to the bottom of the selected object.

$("div").click(function() { $(".passage").append("hey!"); });

slide-22
SLIDE 22

Lecture 1b: Using JavaScript with Twine The Code Liberation Foundation

Appending text and HTML

Use the before function to add text and/or HTML elements above the selected object.

$("div").click(function() { $(".passage").before("hey!"); });

slide-23
SLIDE 23

Lecture 1b: Using JavaScript with Twine The Code Liberation Foundation

Modifying text

Use the text function to change the text value of HTML elements.

$("div").click(function() { $(".passage").find(".body").text("hey!"); });

slide-24
SLIDE 24

Lecture 1b: Using JavaScript with Twine The Code Liberation Foundation

Modifying HTML

Use the html function to change the contents of HTML elements.

$("div").click(function() { $(".passage").find(".body").html("<p>hello!</p>"); });

slide-25
SLIDE 25

Lecture 1b: Using JavaScript with Twine The Code Liberation Foundation

Adding CSS classes

Use the addClass function to add a class to an HTML element.

$("div").click(function() { $(".passage").find(".body").addClass("myClass"); });

slide-26
SLIDE 26

Lecture 1b: Using JavaScript with Twine The Code Liberation Foundation

Removing CSS classes

Use the removeClass function to remove a class from an HTML element.

$("div").click(function() { $(".passage").find(".body").removeClass("myClass"); });

slide-27
SLIDE 27

Lecture 1b: Using JavaScript with Twine The Code Liberation Foundation

Toggling CSS classes

Use the toggleClass function to toggle a class.

$("div").click(function() { $(".passage").find(".body").toggleClass("myClass"); });

slide-28
SLIDE 28

Lecture 1b: Using JavaScript with Twine The Code Liberation Foundation

Hiding elements

Use the hide function to hide HTML elements.

$("div").click(function() { $(".passage").find("a").hide(); });

slide-29
SLIDE 29

Lecture 1b: Using JavaScript with Twine The Code Liberation Foundation

Showing elements

Use the show function to show hidden HTML elements.

$("div").click(function() { $(".passage").find("a").show(); });

slide-30
SLIDE 30

Lecture 1b: Using JavaScript with Twine The Code Liberation Foundation

Toggling elements

Use the toggle function to switch between showing and hiding HTML elements.

$("div").click(function() { $(".passage").find("a").toggle(); });

slide-31
SLIDE 31

Lecture 1b: Using JavaScript with Twine The Code Liberation Foundation

Fading elements

Use the fadeOut function to hide HTML elements with a fade.

$("div").click(function() { $(".passage").find("a").fadeOut(); });

slide-32
SLIDE 32

Lecture 1b: Using JavaScript with Twine The Code Liberation Foundation

Fading elements

Use the fadeIn function to show HTML elements with a fade.

$("div").click(function() { $(".passage").find("a").fadeIn(); });

slide-33
SLIDE 33

Lecture 1b: Using JavaScript with Twine The Code Liberation Foundation

Fading elements

Use the fadeToggle function to toggle HTML elements with a fade.

$("div").click(function() { $(".passage").find("a").fadeToggle(); });

slide-34
SLIDE 34

Lecture 1b: Using JavaScript with Twine The Code Liberation Foundation

Sliding elements

Use the slideUp function to hide HTML elements by sliding up.

$("div").click(function() { $(".passage").find("a").slideUp(); });

slide-35
SLIDE 35

Lecture 1b: Using JavaScript with Twine The Code Liberation Foundation

Sliding elements

Use the slideDown function to show HTML elements by sliding down.

$("div").click(function() { $(".passage").find("a").slideDown(); });

slide-36
SLIDE 36

Lecture 1b: Using JavaScript with Twine The Code Liberation Foundation

Sliding elements

Use the slideToggle function to toggle HTML elements with a sliding effect.

$("div").click(function() { $(".passage").find("a").slideToggle(); });

slide-37
SLIDE 37

Lecture 1b: Using JavaScript with Twine The Code Liberation Foundation

More Twine JavaScript Concepts

JavaScript has all kinds of cool uses.

slide-38
SLIDE 38

Lecture 1b: Using JavaScript with Twine The Code Liberation Foundation

Prerender

Manipulate objects on the page before the page has been rendered.

prerender.titleLog = function() { console.log(this.title); };

slide-39
SLIDE 39

Lecture 1b: Using JavaScript with Twine The Code Liberation Foundation

Postrender

Manipulate objects on the page after the page has been rendered.

postrender.hello = function() { alert("hello!"); };

slide-40
SLIDE 40

Lecture 1b: Using JavaScript with Twine The Code Liberation Foundation

Macros

Create custom macros you can use throughout your Twine game.

macros[“hello”] = { handler: function() { alert(“hello, world!”); } }

slide-41
SLIDE 41

Lecture 1b: Using JavaScript with Twine The Code Liberation Foundation

Other Programming Terminology

JavaScript has all kinds of cool uses.

slide-42
SLIDE 42

Lecture 1b: Using JavaScript with Twine The Code Liberation Foundation

Object Variables

Stores sets of data in one variable.

var Catt = { height: 164, age: 24,

  • ccupation: “Product Designer”

}

slide-43
SLIDE 43

Lecture 1b: Using JavaScript with Twine The Code Liberation Foundation

Object Variables

Uses dot notation to reference and/or define properties.

Catt.hairColor = “dark brown”; Catt.hasPets = true;

slide-44
SLIDE 44

Lecture 1b: Using JavaScript with Twine The Code Liberation Foundation

Array Variables

Stores sets of data in numbered list form.

var inventory = [ “sword”, “potion” ];

Access and modify array items with brackets.

inventory[2] = “crescent moon wand”;

slide-45
SLIDE 45

Lecture 1b: Using JavaScript with Twine The Code Liberation Foundation

Challenge for the week!

Finish your Twine game.

slide-46
SLIDE 46

Lecture 1b: Using JavaScript with Twine The Code Liberation Foundation

Thanks! Questions?

@cattsmall catt@codeliberation.org