Twine 2.8: Harlowe 3.3: Macros: Example: Health and Mana

Summary

This video tutorial demonstrates how to utilize the float box macro in Twine 3.3 to create a 'Health and Mana' user interface that floats outside the standard passage area. The presenter shows how to position elements on a web page, use the display macro to include content from other passages, and manage variables like health and mana. The example illustrates updating the UI after encounters, ensuring players see real-time changes in their stats, highlighting the float box macro's power for creating dynamic, out-of-bounds HUDs in interactive storytelling.

Takeaways

• 📚 The video is a tutorial on using the 'float box' macro in Twine, specifically within the context of a game called 'Harlo 3.3'.
• 🎲 The 'float box' macro is used to position elements within a web page, allowing for the creation of user interfaces outside of the standard passage area.
• 🔑 The script demonstrates setting up 'Health' and 'Mana' as key elements to be tracked throughout the game experience.
• 📐 The use of 'open and close curly brackets' is highlighted as a method to collapse white space, making the code more compact and readable.
• 🔄 The 'display macro' is used to include the contents of one passage within another, which helps in managing complex code by breaking it into smaller, more manageable parts.
• 📊 The 'check health and Mana' passage includes conditional logic to ensure that 'Mana' does not go negative and 'Health' triggers a 'lose' passage if it reaches zero.
• 🎯 The 'encounter' passage uses the 'random macro' to simulate a dice roll and adjust 'Health' and 'Mana' based on the outcome, enhancing the game's interactivity.
• 🔗 The 'link macro' and 'goto macro' are used to create navigation within the game, allowing players to move between passages seamlessly.
• 🖥️ The 'float box' macro is strategically positioned in the top right corner of the page to avoid covering important UI elements, showcasing the importance of placement.
• 🛡️ The video emphasizes the importance of updating the 'user interface' passage last, after all calculations have been made, to ensure players see the most current information.
• 🌐 The tutorial concludes by emphasizing the versatility and power of the 'float box' macro for creating custom user interfaces and displaying dynamic information in various settings.

Q & A

What is the main purpose of the 'health and Mana' example in the video?

The 'health and Mana' example demonstrates how to use the float box macro within Twine's Harlo 3.3 to create a user interface for tracking health and mana statistics in a web-based interactive story.

How does the float box macro help in positioning elements within a web page?

The float box macro allows elements to be positioned in specific areas of a web page, outside the normal passage area, enabling the creation of user interfaces or HUDs that can be updated across different passages.

What is the significance of using open and close curly brackets in the script?

Open and close curly brackets are used to collapse white space in the script, which helps in keeping the code compact and organized, taking up a single line within a passage.

Can you explain the use of the display macro in the 'Adventure' passage?

The display macro is used to include the contents of another passage within the current passage. This helps in breaking down complicated code into smaller, more manageable parts that can be displayed or included as needed.

What is the purpose of the 'check health and Mana' passage?

The 'check health and Mana' passage contains code to ensure that Mana does not go below zero and that if Health reaches zero, the player is taken to the 'lose' passage, indicating the end of the game.

How does the 'encounter' passage simulate a random event?

The 'encounter' passage uses the random macro to generate a number between 1 and 20, simulating the roll of a 20-sided dice. Based on the outcome, it adjusts the Health and Mana values and displays a corresponding message.

What is the role of the 'user interface' passage in the script?

The 'user interface' passage is where the health and Mana values are displayed to the player. It is updated after each encounter to reflect the current status of the player's health and mana.

Why is it important to update the 'user interface' passage after all calculations?

Updating the 'user interface' after all calculations ensures that the player sees the most current information. If the update were to occur before the calculations, the player might see outdated information.

What is the purpose of using the link macro and goto macro together in the 'Adventure' passage?

The link macro and goto macro are used together to create a link that returns the player to the 'Adventure' passage after an action is completed, allowing for a seamless continuation of the game.

Can the float box macro be used to create a subsection of a passage in any part of the page?

Yes, the float box macro can be used to create a subsection of a passage in any part of the page. However, care must be taken to avoid overlapping with other elements or hiding important parts of the passage.

How does the video script utilize the float box macro for creating a heads-up display (HUD)?

The script uses the float box macro to create a HUD by defining a subsection of a passage and positioning it in a specific area of the web page, allowing the display of important information like health and Mana that updates as the player progresses.

Outlines

00:00

📐 Utilizing Float Box Macro in Twine

This paragraph introduces a video tutorial focused on the 'health and Mana' example using the float box macro within Twine 3.3. The tutorial demonstrates how to position elements within a web page for a more interactive experience. It explains the use of macros to track statistics like health and Mana, and how to collapse white space for cleaner code. The video will guide viewers through setting up the macros and show the example in action.

05:02

🔄 Implementing Health and Mana Tracking

The second paragraph delves into the specifics of setting up health and Mana tracking in Twine. It discusses the use of the 'display' macro to include content from other passages, the 'float box' macro for positioning elements outside the normal passage area, and the 'link' and 'goto' macros for navigation. The paragraph also covers the conditional logic for health and Mana adjustments based on encounters with enemies, emphasizing the importance of updating the user interface after all calculations are made.

10:02

🎮 Enhancing User Experience with Float Box Macro

The final paragraph wraps up the video script by emphasizing the power of the float box macro for creating user interfaces and heads-up displays in Twine. It illustrates how the macro can be used to display updated information across multiple passages, enhancing the user experience in various settings like fantasy or sci-fi games. The paragraph concludes by highlighting the versatility of the float box macro in conjunction with other macros for creating dynamic and engaging content.

Keywords

💡Twine

Twine is an open-source tool for telling interactive, nonlinear stories. It allows authors to create text-based games and stories with a simple, web-based interface. In the video, Twine is the platform on which the 'health and Mana' example is built, showcasing how to create interactive experiences within a web page.

💡Float Box Macro

The Float Box Macro is a feature within Twine that enables the positioning of elements within a web page. It is used in the video to place UI elements, such as health and Mana indicators, in specific locations outside the normal passage area, enhancing the user experience by providing a heads-up display.

💡Health and Mana

Health and Mana are common game mechanics representing a character's vitality and magical power, respectively. In the video, they are tracked as key statistics for the player, demonstrating how to visually represent and update these stats within the story using Twine macros.

💡Macro

In the context of Twine, a macro is a reusable piece of code that performs a specific function within a story. The video discusses various macros, such as 'display', 'if', and 'random', to manipulate the story flow and update the game's statistics.

💡Display Macro

The Display Macro in Twine is used to include the content of one passage within another. In the video, it is used to modularize complex code, making the story more organized and easier to manage by breaking it into smaller, thematic sections.

💡User Interface (UI)

The User Interface, or UI, refers to the visual elements that allow users to interact with a system. In the video, the UI is implemented using the Float Box Macro to create a space for displaying health and Mana stats, providing players with real-time information.

💡White Space Collapsing

White Space Collapsing is a technique used in Twine to minimize the visual clutter of code by reducing extra spaces and lines. The video demonstrates how to use open and close curly brackets to collapse white space, making the code cleaner and more readable.

💡Goto Macro

The Goto Macro in Twine is used to direct the story to a different passage. In the video, it is used in conjunction with the Link Macro to create navigation within the story, allowing players to return to the 'Adventure' passage after updates.

💡Random Macro

The Random Macro is used to generate random numbers, simulating events like dice rolls in games. In the video, it is employed to determine encounters, where a random number dictates whether the player loses health and Mana.

💡Conditional Statements

Conditional statements, such as 'if', are used to make decisions in code. In the video, they are used to check the player's health and Mana levels, triggering different outcomes like losing the game or encountering enemies.

💡Link Macro

The Link Macro in Twine creates clickable links within passages. In the video, it is used to connect different parts of the story, such as returning to the 'Adventure' passage after an encounter or updating stats.

Highlights

Introduction to an extended example of 'Health and Mana' using the float box macro within Harlo 3.3.

Explanation of how the float box macro can be used to position elements within a web page.

Demonstration of using open and close curly brackets to collapse white space in macros.

Use of the display macro to include content from other passages within the current passage.

Positioning of float box elements in the top right corner of the web page for the user interface.

The importance of updating health and mana values after all calculations are completed.

Utilization of the random macro to simulate a 20-sided dice roll for encounters.

Conditional logic to adjust health and mana based on the outcome of the dice roll.

Incorporation of the link and goto macros to navigate back to the Adventure passage.

The setup of the 'check health and Mana' passage to prevent negative values and trigger the 'lose' passage.

Use of the float box macro to create a user interface or heads-up display for players.

Discussion on the strategic placement of the float box to avoid covering important passage elements.

The float box macro's power for creating user interfaces and displaying extra information in various settings.

Combining the float box with other macros like set, if, and display for complex interactions.

The potential for using the float box macro in fantasy or sci-fi settings for dynamic user experiences.

Final summary of the float box macro's utility in enhancing the storytelling and gameplay experience.

Transcripts

welcome to a JV on twine in this video

I'm going to show an extended example of

called health and Mana that works with

the float boox macro within harlo

3.3 So based on our knowledge of the

float boox macro we can position things

within the page within a web page so

instead of being things within the

browser or that is within the passage we

can position things within the web

browser within the page this allows us

to put things outside of the normal

passage area however I'm setting up a

bunch of different things a bunch of

different macro usages within this to

show where this can be particularly

useful if we want to show statistics

things like health and Mana it's the

name of this example to show what they

look like to players or users as they

play through an experience so let's go

ahead and I'm going to move through all

these passages and then I'll play it for

you so the first thing I'm doing here is

setting up health and Mana that will be

the two main things we will track um

notice I'm using open and close open and

closing curly brackets um this is

collapsing whites space as a review if

we have multiple macros each usage will

take up a single line within a passage

where we can collapse all of that extra

space which we call White Space by using

open and closing curly brackets around

them and it will collapse everything

that's within that instead of it taking

up extra space you may see depending on

what resolution you're using some little

tiny dots uh between the line here to

where this macro starts um that is a tab

I have tabbed in all of these just so

they're a little easier to read keep in

mind when it collapses white space any

extra spaces so pressing space bar or

tabbing all this will be collapsed

totally up to you how you want to

position your own code I find this

slightly easier for me to read so we're

setting up health and mana and then

we're going to Adventure so let's jump

over here to Adventure which is doing

multiple different things so it's first

using the display macro to include the

contents of one passage and another so

as a review of the display macro

sometimes we find ourselves in

situations where we have lots of

complicated code within harlo or

potentially other story formats we're

using in harlo we use display macro to

display the content of another passage

in the current passage how this applies

to code is that sometimes we got lots of

complicated code but we can break it

into small parts and then display it or

include it as

needed so in this case I have a p is

called check health and Mana that's

acting as its own sort of set of code

which we'll go look at here in just a

moment and then I'm moving down here

display encounter which is doing its own

set of code and then I'm using the float

box macro right here and then notice

again when we use float box we use x

marks the spot for horizontal y marks

the spot for vertical so in this case I

want it all the way over here on the for

right and then I want it up here in the

top part of it so keep in mind y or X

and Y that is start from the top left so

this is moved all the way over to the

right and this is all the way at the top

so the top right is what we'll see it

and then inside here I'm doing an

additional use of the display macro to

include the contents of another passage

Inside the Box defined by the float back

the float box that is hook so I'm

including something from another passage

as right here the part of the user

interface

and then I'm using the link macro to

create a link that's then using the goto

macro to go back to Adventure which is

me just being a little bit of extra here

I could have also just used a link uh to

connect this back to itself so let's go

look at check health and Mana so keep in

mind I'm using displ macro to break up

complicated code into sets of code that

are a little more

thematically um appropriate for each

section so reusing right here collapsing

whites space this just says hey if Mana

ever drops below zero set it back to

zero just so we don't have negative and

if Health ever drops to zero go to lose

immediately L is over here you faint and

are then transported back to the local

end which is basically the one ending of

this experience so let's go over here to

user interface we see health and Mana

okay let's come down here to encounter

encounter is doing a few different

things again using that collapsing white

space right here so we don't care about

any of the stuff that's within it it's

going to be collapsed back down which

allows us to space things out make a

little easier to read if we want to do

it that way again I have tabbed these in

but you could also use spaces or

whatever you want again it will be

collapsed so space doesn't really matter

as much and I'm using the random macro

to get a number between 1 and 20 as if

you were going to roll a 20-sided Dice

and then I'm checking to say hey if the

temporary variable notice the use of the

underscore for temporary if the

temporary variable rle is less than or

equal to 10 so about a 50% chance right

here or a 50% chance then go ahead and

adjust Health by 20 so set Health to

health whatever the current value is

subtract 20 from it do the same right

here the Mana and then put the tax you

encounter an enemy and lose health and

Mana so keep in mind the little bit of

tricky thing when we use content or we

use text within the collapsing white

space so the open and closing curly

brackets that we generally need to align

it all the way over here because it will

then be collapsed back together so so we

want this to kind of be on a lines by

itself and when this is collapsed it

will then be together and then

alternatively the El smack right down

here says you see nothing of note so if

it's 10 or less than 10 right here we

will these things will trigger if it

isn't we will see nothing of note so

let's come back to

Adventure so what is happening every

time we come to this passes is it's

checking to say hey if health is less

than or equal to zero that which is to

say we've dropped below whatever Health

threshold we set we will immediately go

to the lose passage if that's not the

case we will keep on and move to the

next thing the next thing in sequence is

the encounter and this will roll or do

the equivalent of rolling a 20-sided die

we say pick a number between one and 20

and if it's Le if it's 10 or less than

10 then go ahead and subtract 20 from

health and 20 from MAA and then show us

a message if it's not then we will see

nothing of note then we're updating

right here from the user interface

passage right over here health and Mana

now the reason why this is last is

because we want to do all of the math

and then update whatever information

we're showing to the player or user so

keep that in mind do all your

calculations and then update those

values to then show people because

otherwise if we flip this and float box

was first we would show them information

and then change that information they

wouldn't see those changes so do all the

changes then update finally we provide a

link that just sends us right back here

we could have also done a link but I'm

literally using the link macro and the

goto macro one more time so let's see

this in

action so we start the adventure with

perfect health and a pull of Mana

Adventure notice we have a user

interface over here again the use of the

float box macro so the Box macro within

Haro allows us to define a subsection

float box extends that we're def find a

subsection somewhere on the page

extending out of the part that we

normally have a displaying of passages

so we have this way over here now a

little bit of note here about why I

chose this part of the screen so I chose

this way over here because if you put it

over here keep in mind a box defines a

section A subsection of a passage if we

do a float box in the upper leftand

corner and we're not careful we can

literally hide this undo thing it will

take up all of this and depending on how

how big you make it may also take up

sections of this passage right here so I

stuck it far over here in the corner by

itself so that is a little bit of caveat

we need to be careful of we've got lots

of things going on when we're working

with the flirp Box macro but otherwise

we have health and mana and we see

nothing of no so again 50% chance each

time so let's Adventure nothing of not

ah we lost some health lost some am

let's Adventure again uh we lost down to

60 okay nothing happened 40 40 40 20

zero H and I fainted

finally so lots of different things

going on in this example but the real

core of it is evolving around the float

box macro again float box allow us to

float a box a subsection of a passage to

different parts of the page outside of

the normal part that we would Define for

a passage if we're using it sister the

Box we defining things horizontally for

using float box we are floating a

subsection floating a box to other parts

of the page in situations like this that

is incredibly useful we can kind of

stick a user interface or what might be

called a heads up display or a hood of

information that a player or user might

want to see across multiple passages we

can kind of Define it in one place and

use things like a float box combined

with the display macro to display

information in a particular section of

the screen

and then as they're moving to passages

keep having that updated information

again as I did down here in adventure do

all the calculations then update the

display in fact if I wanted to I could

have moved all of these things into a

second passage and then dis displayed

that included that content in this

passage so lots of different things

going on all previous macros I have

covered in other videos using the set

macro to change the value of variables

the if macro to check various conditions

less than greater than things like that

and then using the display macro to

include the contents of one passage and

another and combining it now all

together with the float box macro to

float a section or or a subsection of a

page I should say within a different a

subsection of a passage and a different

part of a page I should I should say and

arranging that the way we want it so

float box can be incredibly powerful for

things like user interfaces

heads up displays sometimes called Huds

and various other encounters we want to

display that extra information just

outside of the normal passage area that

will be updated for things like

adventures and a potential fantasy

setting or sci-fi setting or other

things really really useful for those

use cases thanks for watching this video

on harlo

3.3