cinemagraphstories - Tumblr blog

[cinemagraphstories]

Storyboard

Click to enlarge this illustrated flow chart of the environments and dialogue screens of our story. Obviously, there is much more to it than this; for example, all the objects and specific lines of dialogue have not been included, since there are dozens and dozens to illustrate and we wish to put that energy into completing the prototype. As well, the aural dimension is not described, which consists of a city soundscape overlaid with Wendy’s fiddle playing. We hope to implement an effect that makes her playing warp over time, to indicate that she is fading fast, giving the user some sense of urgency.

[cinemagraphstories]

We started with a couple of thumbnails to decide what style our buildings would take. The building on the right was selected as we wanted the architecture on Redhill street to be tall and uncomfortably packed together. We’re in the process of applying this treatment to the level design, and have chosen a few key areas to detail:

The above painting is a corner store. We want to draw attention to Wendy on the street, so we’re adding subtle depth cues when there is an event that needs emphasis.

We’ve also exploring details to enhance the whimsical feel of the story world. Specifically, this means adding trees and mushrooms growing between the apartments and shops.

*Note that colour will be explored separately from form at a later date.

Character concept art was based on our descriptions in the story bible.

WENDY: Dark brown hair, pale english skin, blue eyes. Average weight & build, wearing nondescript street clothes.

IRVIN: Vaguely Asian in appearance, with unkempt whiskers and black hair streaked with white. Wears the worn, patched layers of years on the street.

LUGH: Aged, but with a face that had clearly once been handsome. Has a wild, faded red beard and long hair with braids woven randomly into it. Wears a robe-like overcoat, made of a thick, rich fabric but much the worse for wear. Ribbons peak out from beneath his clothing, wind through his hair, round his fingers, in his beard.

[cinemagraphstories]

Flow Chart

We built a flow chart in Twine, which was very easy to use. Unfortunately, it lacks basic customization to show more complex relationships between objects and environments.

In any case, the green launch icon indicates the default environment, Redhill street. The chart branches out, connecting to objects that can be inspected, as well as the two other environments in the narrative: Irvin’s alley and Brim’s bookshop.

One of the advantages of Twine is that it generates an HTML file and has custom CSS. The resulting file gives an accurate picture of the story flow, specifically, how scenes connect and which objects are in each scene.

View the HTML file: http://www.sfu.ca/~dominicq/pub_html/Ribbon-bound.html

[cinemagraphstories]

Script

The following is a series of tables detailing all dialogue which takes place between the characters of our narrative. There will be other methods of conveying information throughout the story (e.g. object descriptions and readable books), so the plot may not fully come through.

Here is how the tables work:

There are different sets of dialogue; the set number can be found in the leftmost column. The text external to the tables details why the sets are separated.

Dialogue options are numbered, as shown by the second column; a number only appears when the dialogue option is one of multiple choices. Un-numbered dialogues are those which follow after a choice is made.

The following two columns show “your” statement/question and the character’s response.

The final column lists the things which must have occurred in order for that dialogue option to be selected. Sometimes it is an interaction with an object, and sometimes it is the completion of another line of dialogue.

[cinemagraphstories]

Design Document

SCENE 0.0: Title sequence

Description Flickering streetlight; a crow with a ribbon in its mouth.

Environment A small section of redhill street, overlaid with the title screen.

Art assets title-background.jpg title-crow.mp4 cityscape.mp3 fiddle-music.mp3 crow.mp3

Interactive objects <button>Play</button>

SCENE 1.0: Welcome to Redhill

Description A decrepit city street, deserted except for a busker under a flickering street light. The user can scroll sideways to reveal more of the scene.

Environment Redhill street Art assets redhill-street.jpg lamp-light.mp4 cityscape.mp3 fiddle-music.mp3

Interactive objects - Irvin dialogue items These objects add a dialogue option with Irvin when clicked -Missing posters -A discarded backpack -Bookstore door -Ribbon stuck in grate of the only gunk-free gutter (1/5--collectible) -Ribbon tied round handle of flyless dumpster (2/5--collectible) -Ribbon flying from the only un-flickering streetlight (3/5--collectible) -Ribbon tied round the gleaming side mirror on a broken-down car (4/5--collectible) -Ribbon dangling from the only un-cracked window on a building (5/5--collectible)

Art assets missing-poster.jpg *3 missing-poster-inspected.jpg discarded-backpack.jpg discarded-backpack-inspected.jpg bookstore-door.jpg ribbon-grate.jpg ribbon-dumpster.jpg ribbon-streetlight.jpg ribbon-side-mirror.jpg ribbon-window.jpg

Variables posterClicked = false backpackClicked = false bookstoreOpen = false ribbonsSpotted = 0

Interactive objects - story items These objects help to fill out the fabric of the story with extra details and hints -Crow -Wizard’s apartment

Art assets crow.jpg wizard-apartment.jpg

Variables crowClicked = false wizardApartment = false

Interactive objects - decoys These objects don’t contribute to the story, but are intended to distract or mislead -A dumpster -A moth -Clocktower (past midnight) -A sewing supplies store -A crumpled note -A coin on the ground

Art assets dumpster.jpg moth.mp4 clocktower.jpg sewing-store.jpg note.jpg coin.jpg

Characters Wendy Peel: Clicking on Wendy shows an observation, but no dialogue options.

Portals Entrance to the alleyway: Takes you to a separate alley Entrance to the bookstore: Links to the bookstore (locked by default)

SCENE 2.0: Irvin’s Alley

Description An oddly well-kempt alley, occupied by a single homeless man on a perch, warming his hands at a brazier.

Environment Irvin’s alley

Art assets irvins-alley.jpg brazier.mp4

Interactive objects - story items These objects help to fill out the fabric of the story with extra details and hints

-Irvin’s perch -A ribbon is trailing from Irvin’s mouth

Art assets irvins-perch.jpg Irvins-ribbon.jpg

Variables perchClicked = false irvinRibbonClicked = false

Interactive objects - decoys These objects don’t contribute to the story, but are intended to distract or mislead

-An organized pile of garbage bags -Basket weaving -Molecular biology textbook

Art assets garbage-bags.jpg baskets.jpg biology-textbook.jpg

Variables garbageBagsClicked = false basketsClicked = true textbookClicked = true

Characters Irvin: Has dialogue options depending on what has been found on the street, and branching dialogue which moves the story forward from each dialogue option.

Portals Entrance to the alleyway: Links back to the street.

SCENE 3.0: Brim’s Bookshop

Description A tall and thin store with bookshelves lining the walls. The user can scroll up and down the shop to inspect books, artifacts and documents.

Environment Brim’s Bookshop

Art assets bookshop.jpg dust.mp4 page-flipping.mp4 muffled-cityscape.mp3 muffled-fiddle-music.mp3 page-flipping-sounds.mp3

Interactive objects - plot items These objects lead toward the end of the story -Therianthropic Theory: An Advanced Guide to Shapeshifting -Book checkout list (show’s what Lugh Ribbon-Bound has checked out)

Art assets therianthropic-theory.jpg book-checkout.jpg

Variables therianthropicTheoryClicked = false bookCheckoutClicked = false

Interactive objects - decoys These objects don’t contribute to the story, but are intended to distract or mislead

-The Lore of Lugh the Fallen -A Comprehensive Post-War History of Bookshops -Botany for Beginners: How to Grow Potatoes on Mars -Vogul Vogue: The Fashion of the Mountain Men -Goblin, Orc, or Uruk-Hai? -A Historical Analysis of Necromancy from J43-K45 -City disposal guide: preparing your garbage for the bi-annual cleanup -Cursive writing: arcane glyphs -How to write Lorem ipsum: Dolor sit amet consectetur adipiscing elit -Miniature stag skull -Steel drum -A series of cow figurines

Art assets comp-hist.jpg baskets.jpg botany-textbook.jpg vogul.jpg goblin.jpg necromancy.jpg disposal.jpg writing.jpg lorem.jpg stagSkull.jpg steelDrum.jpg crowFigures.jpg

Variables compHistClicked = false basketsClicked = false botanyTextbookClicked = false vogulClicked = false goblinClicked = false necromancyClicked = false disposalClicked = false writingClicked = false loremClicked = false stagSkullClicked = false steelDrumClicked = false crowFigures = false

Portals Entrance to the bookshop: links back to the street

SCENE 4.0: The Crow

Description Zoomed in portion of the street, where the crow has just transformed into the wizard. After selecting one of three dialogue options, a linear dialogue transitions into one of three ending cinemagraphs:

Environment Redhill street (zoomed in)

Art assets redhill-zoomed.jpg wizard.jpg cityscape.mp3 fiddle-music.mp3 streetlight.mp4 feathers.mp4 (non-looping, falling feathers)

Characters Lugh Ribbon-Bound: Different dialogue options available, depending on what the user knows (based on which dialogue options they explored with Irvin).

 SCENE 4.1: The Worst Ending

Description The user is transformed into a moth for their insolence.

Environment Redhill street (zoomed in)

Art assets worst-ending-backdrop.jpg moth.jpg wizard.jpg lighting-effect-1.mp4

SCENE 4.2: The Best Ending

Description Wendy is freed.

Environment Redhill street (zoomed in)

Art assets best-ending-backdrop.jpg Wendy.jpg lighting-effect-2.mp4

SCENE 4.3: The Morally Meh Ending

Description The wizard ties a ribbon round your wrist

Environment Redhill street (zoomed in)

Art assets meh-ending-backdrop.jpg wrist-ribbon.jpg lighting-effect-3.mp4

[cinemagraphstories]

The bible

Premise:

You are on a decrepit city street, late in the evening. It is deserted, except for a homeless man warming his hands at a brazier in the alley, and a young busker, playing her fiddle on the curb. You can navigate the length of the street by scrolling, and click on certain objects. You can also enter the alley to talk to the homeless man, or, later in the story, enter a strange old bookstore.

Genre:

Magic Realism/Urban Fantasy

Setting:

Vaguely London, vaguely modern but set in a vaguely Victorian part of the city. There is some modern technology, but it’s a little warped since most of it runs on magic.

Redhill street

It’s 12:15 AM on the decrepit corner of Redhill and Oval. Most of the light comes from every third streetlamp, since the city is too frugal to keep all the lights on past midnight. Aside from the odd car passing by in the distance and the patter of rain water down the drainpipes, only the faint and ominous sound of a fiddle in the distance can be heard.

Redhill is old and forgotten. Any livable housing  to be found is left over from the time before the last great war, which was just over two hundred years ago. Housing is tight; the landlords find crafty ways to squeeze every square foot out of townhomes by adding on ramshackle living quarters and storage spaces. A tourist might think that the locals are hoarders, but in reality, there is not enough space inside houses, even for basic living supplies.

In one such apartment lives a wizard by the name of Lugh, although locals know him as Leto. Surprisingly, he owns half of the building known as Hanson Place, while the other half is shared by fourteen families. Closer inspection would reveal why: Lugh’s half lies directly beneath the Regan clocktower, causing the place to shake at noon and midnight. The neighbors can not figure out how he keeps sane, and quite possibly never will, since Lugh never stops to talk to them. Many curious people have tried peeking inside the windows, but the curtains are always pulled tightly shut, and for some strange reason seem to be unaffected by drafts or the shaking clocktower.

Alley

Most people miss the small alley as Redhill street passes South Landan. The only exception would be the bi-annual garbage disposal unit, and a homeless man named Irvin. Irvin keeps the place in good hands - in the sense that the garbage is organized well enough to know that someone lives there. Even his cigarette butts are neatly sorted in an ash tray labelled, “GARBAGE DISPOSAL: DO NOT REMOVE”. Some planks and a few rusty nails give Irvin a perch where he can observe Redhill without being seen. This structure, along with a flickering light from a metal brazier, give him the self-proclaimed title of, “The Redhill sentinel”.

Bookshop

The oldest building on Redhill is the Brim’s Bookshop. In fact, it’s so old that it was labelled as a “historic site” during the war, which happened 216 years ago, so that both sides would not destroy its contents. The long line of bookkeepers leads down to Delwin Brim, who locks up every day at 5:00PM. Some may wonder why Delwin bothers to keep the shop running, since nobody has the money to buy books anymore.

Like all the other buildings on Redhill, Brim’s is tall and thin. The bookshelves line the walls from floor to ceiling. Some shelves are even wedged between to make the most of the space, creating arches. A ladder system allows Delwin to scale the shelves.

On the off-chance that a visitor does come in, they would be surprised that Delwin still uses scrolls instead of a computer to document the location of each book. Not only do the scrolls document books, but Delwin keeps an expanding collection of trinkets, ancient artifacts and antiques in a section labelled, “not for borrowing”.

Characters:

Wendy Peel

Wendy grew up in a rich household with a stern mother and an absent father. Her mother started her on music lessons when she was very young, to teach her self-discipline and to imbue her with knowledge of the arts. But when Wendy took a shining to the violin, her mother thrust her into a prestigious program for concert violinists, knowing that a famously gifted daughter would do well for her husband’s business.

However, passing a busking fiddle player on the street one day, Wendy discovered the wild abandon of fiddle music, and sought to learn it for herself. She began to visit the busker for fiddle lessons in between her classes at the music school, and in return for his time and his music, she listened to his stories of life on the streets. She gained not only a vast repertoire of traditional fiddle tunes, but a new perspective on what life is like for the homeless.

When the old busker died, she found that the streets were too quiet, and took up her fiddle in his stead. To her surprise, passers-by left coins for her just as they had for him. Wendy had no great need for spare change, and so she took to dispersing her earnings to the homeless she passed on her way home every day. It became routine for her: to play fiddle every evening on the old busker’s empty street corner, and to give out her earnings at the end of every night. She did so for months, until one day, a ribbon landed in her case.

And now she just plays, with no end in sight.

Missing posters dot the streets, but nobody recognizes the wealthy girl that stares out from the photograph.

AGE: 18

APPEARANCE: Dark brown hair, pale english skin, blue eyes. Average weight & build, wearing nondescript street clothes.

Lugh Ribbon-Bound (Leto)

Lugh was once a king, a god. But that was hundreds of years ago, back when people knew him as just and skilled, back when they called him “The Bright One.” Now, he is a reject, a mere street-wizard. All because of one mistake– a mortal, killed in what to him had been a game. He had been stripped of his title and bound head-to-toe with ribbons. And the only way he is allowed to return to his home and high status is if he rids himself of each and every ribbon through acts of good magic.

And so he spends his days stalking the streets, looking for petty crimes to punish, injustices to rectify. One day, he spies a wealthy young woman dressing as an urchin in order to win money for her busking, and he is incensed. He pulls a ribbon from his wrist, weaves it through his fingers as though searching for words in its fabric, and drops it into her case.

AGE: Hundreds of years old

APPEARANCE: Aged, but with a face that had clearly once been handsome. Has a wild, faded red beard and long hair with braids woven randomly into it. Wears a robe-like overcoat, made of a thick, rich fabric but much the worse for wear. Ribbons peak out from beneath his clothing, wind through his hair, round his fingers, in his beard.

Irvin

Irvin had never been anything but kind. Too kind for the rough ways of his family, who worked in crime. And so he had chosen the life of a wanderer, depending upon the generosity of others, and paying them back in simple favours. But his decades on the street had given him a tough outer shell, a worn visage, and a grumpy countenance. Underneath it all, though, he is still kind old Irvin.

Which is why, when he spies the old wizard Leto putting a spell upon the kind young woman who is always so generous to him, he can’t help but feel he owes it to her to try and help. But when he tries to stop the wizard, tries to convince him that what he is doing is wrong, he is silenced with the wizard’s magic. “Speak only when you are spoken to!” Said the wizard. “And speak never of this!” And so Irvin can only reply to direct questions, and only within the scope of the question. And he can never speak overtly about what he had seen the wizard doing that night.

AGE: 60

APPEARANCE: Vaguely Asian in appearance, with unkempt whiskers and black hair streaked with white. Wears the worn, patched layers of years on the street.

Magic:

Magic is somewhat commonplace in this world. It isn’t terribly rare to meet a wizard or a sorceress on the streets, selling enchanted wares. And the light that pours through streetlamps and out of the windows of buildings is not electric or gas.

That said, the sort of magic that Lugh Ribbon-Bound uses is older, something deeper and more powerful, something that the common magicians have never seen before. And because of the curse set upon him, he can use it only by weaving it into ribbons, and letting the ribbons do their work. His enchantments can be as simple as good luck charms or protective wards, such as those he cast upon his favourite bookshop as one of his acts of good magic. Or they can be punitive, just so long as they are aimed at somebody who Lugh perceives as truly guilty. His ribbons can be found scattered throughout the city, some doing good, and others punishing those who Lugh has witnessed committing an amoral act.

[cinemagraphstories]

Concept document

Premise:

You are on a decrepit city street, late in the evening. It is deserted, except for a homeless man warming his hands at a brazier in the alley, and a young busker, playing her fiddle on the curb. You can navigate the length of the street by scrolling, and click on certain objects. You can also enter the alley to talk to the homeless man, or enter the only shop that is still open-- a strange old bookstore.

Intended medium:

We are going to combine the following media: images, text, cinemagraphs and sound.

Images: All of the characters and environments will be digital paintings rendered in Photoshop. The primary environment, an old rundown street, will span horizontally. Navigation will consist of scrolling, meaning that we will re-map vertical scrolling to the horizontal axis. Further environments beyond the main scene will also be digitally painted, but they will be constrained to a standard 16:9 aspect ratio to remove scrolling.

*Proof of concept:

Digital artwork by Juliana Loughin

Digital artwork by Dominic Quon

Text: Dialogue between the audience and the story characters will be carried out through speech bubbles. These interactions occur in environments beyond the main street as a form of static cutscene. By this we mean that side environments will not have scrolling, but will have exclusive opportunity for dialogue with characters and inspection of objects.

Cinemagraphs: Using After Effects, we will be able to layer looping animation and visual effects over otherwise static images. For example, in the large street scene, we can have a glowing lamp to add to the audience’s immersion. This will be accomplished by cropping portions of the static background image, animating them in After Effects, and seamlessly placing them back into the background as videos.

Sound: The story world’s atmosphere will be enhanced with mp3 recordings. These include fiddle music, street noise, and sounds emitted from objects in the environment.

Platform:

We will be coding this project as a website using HTML5, CSS3, and JavaScript. Since we are heavily using cinemagraphs to enhance the narrative, we will be restricting the site to desktop, and only supporting modern browsers: Chrome, Firefox and Edge.

List of technologies

- HTML5

- CSS3

- JavaScript

- Photoshop

- After Effects

- Garage band

*Proof of concept: http://www.sfu.ca/~dominicq/pub_html/Final%20project%20POC/

Looping video code from retrieved from http://blog.flixel.com/the-best-cinemagraphs-of-summer-2017/

Genre:

Magic Realism/Urban Fantasy

Intended audience:

Fans of point-and-click adventure games, lovers of digital art and traditional music, dark fantasy enthusiasts, casual gamers.

Nature of interactivity:

There are clickable objects which provide textual and visual feedback, NPCs who provide information depending on which objects you have clicked on, and at the very end, multiple dialogue options to choose from, each leading to a different ending. How you explore the story is up to you-- it’s like a puzzle where you must collect the pieces in order to put it together. Only at the very end do you have an impact on the outcome of the story, and the fate of yourself and the characters.

Overview of the characters:

-Young busker: is actually from a rich family, but she dresses in raggedy clothes to rake in the cash playing fiddle on the streets.

-Urban wizard: spied the busker changing from an opulent coat into her ragged flannel and cap, and thought her despicable. He cast an enchantment on a ribbon, and gave it to the girl to tie around the scroll of her fiddle, cursing her to play forever. Powerful and temperamental. -Homeless man: watched the wizard spin the enchantment. He knows that the busker actually busks in raggedy clothes in order to give the money back to the homeless. Grumpy but relatively forthcoming.

-Bookshop clerk: one-dimensional placeholder character, with very limited dialogue

Main features of the story:

The player is able to discover, through the various clickable objects and by talking to the homeless man, that:

-The young busker is actually from a rich family. Her mother does not know about her trips into the city, and would not approve if she did.

-She is studying classical violin, and fiddle music is considered inferior in her circle; however, it is a passion for her, and she refuses to stop.

-She used to give the money she earned back to the homeless at the end of every night, back when she was able to stop playing.

-The young busker wears a red ribbon on the scroll of her fiddle, which has doomed her to play on the street forever.

-The red ribbon was given to her by a wizard.

-The wizard cursed the young busker because he saw her shed her opulent clothes and don her streetwear in order to make money one day, and thought it despicable.

-Even if the homeless man tries to speak any more about the wizard, he cannot-- it’s like something is stuck in his throat. But if the player wants to know more about the wizard, they should talk to the bookstore clerk (who before had only one generic line of dialogue).

-The bookstore clerk says that yes, the wizard visits often, and treats the bookstore like a library (how rude!) Last time he was here, he had been reading a thick leather-bound volume.

-Within this leather-bound volume, a ribbon has been used as a bookmark. The page it marks shows the transformation of a man into a crow, with some foreign-looking words ringing the illustration.

-And now, when the user returns to the street, they find that they can click on the crow that has been perched on a lamppost this whole time.

-The crow transforms into a wizard, who is ruffled and irritated.

 Now, the user is given three dialogue options:

Tell the wizard off for cursing the girl

Tell the wizard that the girl had been helping people, not sneaking around for money

Congratulate the wizard on his masterful spellwork

 Depending on which option the user chooses, they get one of three endings:

The user is transformed into a rat for being so insolent

The wizard frees the girl from her curse and apologizes for having acted prematurely

The user is gifted with a magical artefact for their flattery