Scene Elements

Using text, actions, and timing to enrich your scenes.

Let's look at a few different elements you can use in your scenes to enhance your stories. None of these things are required to make great interactive stories, but you might find them helpful as you forge ahead with your project.

Text emphasis

You can emphasize text in your scenes using asterisks for *bold* and underscores for _italics_. Text emphasis is especially useful for drawing focus to a particular line — like a question, or key piece of dialogue.

Here's a simple example of using bolded text:

~~

Your eyes are heavy still as you register the couch cushion you've been asleep on. The moon is peeking through the blinds; it's the middle of the night, probably, though you'd have to check your phone to be sure.

Where is that stupid thing...it's always falling out of your pocket, making a loud th—

—wait. *What was that noise?*

[noise?]
> Go check out the noise. [checkItOut]
> Keep looking for your phone. [ignore]

If you're handy with CSS, you can also create your own span elements by wrapping text in square brackets, like this:

And then there was a burst of [gold]golden light[/gold].

This will create a class you can control in CSS, which you could style like:

.gold {
  color: #F7B140;
}

Span names must be a single word of upper or lowercase letters -- so, [lightBlue] is fine, but [light blue] is not.

Actions

Text isn't the only way to tell a story in Choicelab. When writing scenes, you can also use actions: small shortcodes that let you play media and access special functionality.

Actions make it possible to tell multimedia stories. Add illustration and animation to your text-driven stories, or even use Choicelab to make an interactive webcomic, film, or radio drama.

To use a shortcode, type the name of the shortcode, a space, and one or more attributes, all wrapped in square brackets. Here's an example of an image shortcode in our scene from above:


~~

[image src="images/comicPanel01.jpg"]

Your eyes are heavy still as you register the couch cushion you've been asleep on. The moon is peeking through the blinds; it's the middle of the night, probably, though you'd have to check your phone to be sure.

Where is that stupid thing...it's always falling out of your pocket, making a loud th—

—wait. *What was that noise?*

[noise?]
> Go check out the noise. [checkItOut]
> Keep looking for your phone. [ignore]

When inserted, the image comicPanel01.jpg would appear alongside the text, clearing when the question is answered.

There are actions for images, audio, video, and more, and each have their own attributes. See Action Reference for a complete list.

Timing

Part of the magic of games and other interactive experiences is watching them carefully unfold in front of you. In Choicelab, you can time out individual elements to appear at key moments using timing flags.

A timing flag is a small numerical value you insert into a scene, appended with an 's', and wrapped (again) in square brackets. Every element after the timing flag will appear at that elapsed time in your scene:


~~

[1s]
This text will appear 1 second after the scene starts.

[4.2s]
This text will appear 4.2 seconds after the scene starts.

Let's go back to our earlier example:


~~

[image src="images/comicPanel01.jpg"]

Your eyes are heavy still as you register the couch cushion you've been asleep on. The moon is peeking through the blinds; it's the middle of the night, probably, though you'd have to check your phone to be sure.

Where is that stupid thing...it's always falling out of your pocket, making a loud th—

—wait. *What was that noise?*

[noise?]
> Go check out the noise. [checkItOut]
> Keep looking for your phone. [ignore]

In this scene, there's a noise implied in the narration. This scene works okay as text, but we could add dimension and surprise to it by adding timing the individual elements.

Here is the same scene, this time with timing flags:


~~

[image src="images/comicPanel01.jpg"]

[3s]
Your eyes are heavy still as you register the couch cushion you've been asleep on. The moon is peeking through the blinds; it's the middle of the night, probably, though you'd have to check your phone to be sure.

[13s]
Where is that stupid thing...it's always falling out of your pocket, making a loud th—

[18s]
[audio src="media/sfx_noise.wav"]

[21s]
—wait. *What was that noise?*

[24s]
[noise?]
> Go check out the noise. [checkItOut]
> Keep looking for your phone. [ignore]

This time, we've added timing flags after the image action and each paragraph of text. You may have also noticed we added an audio action, to play the sound heard by the character.

This is the same scene we started with, but presented with more surprise, intrigue, and depth. Finding these sort of opportunities is part of the fun of writing in Choicelab.