interactive manga - New Media @ Yeditepe

INTERACTIVE MANGA:
A PROTOTYPE FOR
MULTI-LINEAR VISUAL
NARRATIVE
Assist. Prof. Selin Özgüzer
Jacksonville University,
Computer Art & Design, USA.
ozguzer@yahoo.com
1. Introduction
With the development of the World Wide Web, many
traditional media like written and printed text,
photography, film and music find a new, digital home.
This did not happen without some changes in format.
A new language of design with new rules for
navigation, layout and interactivity had to be
developed by authors and readers. It is here that
imagery, interactivity, and narrative converged. How
does the Web affect the methods and reception of
prior media when they are transferred to this new
environment?
A popular practice among fans of Manga, Japanese
comics, is posting scans from manga books on the
web. In these web sites, pages are scanned and
translated from Japanese to English by amateur
translators, page by page, and made available to the
viewers all over the world. A well-known example of
this was Ranma Scan Project. At the time, although
only %75 of Ranma 1/2 have been professionally
translated, published and distributed in print by its
original publisher (Viz Graphic Novel), all volumes of
the manga have been translated and put on this
Website by amateurs. This created a viewing
opportunity for fans unwilling to wait for a long time
for all the volumes to be published in printed form
before the website was taken off the web due to
copyright issues.
This project explores how a visual narrative,
specifically that found in the traditionally print-based
genre of manga can be transformed to better or more
fully use the possibilities of the Web. The intent of this
project is to create a more engaging and rich
experience for the user through the use of visual and
interactive devices. In the tradition of contemporary
interactivity and visual storytelling, this project
explores the use of structure and visual/animated
cues to allow the user to interact with graphic
narrative.
In the project, the emotional context of the story is
conveyed by elements such as frame composition,
color, typography, etc., that are native to the visual
and narrative style of manga. This project aims to
create a rich and engaging online experience by
keeping true to the dynamic qualities of narrative.
The focus is on issues such as visual story telling,
multi-linear narrative, and interactivity. Issues such
as gender representation, criticism of subject matter,
socio-economical analysis and in-depth discussions
of the visual and contextual differences between
manga and American comics, copyright and legal
issues is not addressed in the scope of this project.
2. Antecedents and Topics in This Study
Doushinji
Another popular genre with origins in Japanese
manga culture that makes use of the Web for
distribution is doujinshi (fan drawings of popular
stories). This genre has a fundamental place in
manga culture, because many of the important
manga artists began as doushinji artists and
developed their style and talent before publishing
their original drawings and stories.
As I reviewed doushinji Web sites, I drew several
conclusions. Sites that transfer Japanese manga to
the Web employ its technologies in a manner that
reminds one of photo albums. Instead of taking
advantage of the digital medium’s interactive and
expressive possibilities, on most of the web sites,
manga drawings that already exist on paper had
been simply scanned and posted, looking much as
they would in print. (See fig.1.)
Why not use what digital media can offer to transform
an existing medium, print, to another that is richer
and more capable of complex interactions? The Web
helps fans to publish their works easily and reach a
wider audience. A constant of most republished
manga is that layouts are treated in traditional book
format (See fig.2.). This aspect of the Web offers an
opportunity for artists amateur or professional to
publish on the web.
Interactivity and Hypertext
Interaction can be described as many things.
Catchwords abound: “Engaging,” “Immersive,”
“Participatory,” “Responsive,” and “Reactive.”
Interactivity is a continuing increase in
participation… It is a response to a response
(Meadows).1
In a non-interactive text, the author has a great deal
of control over how the viewers will encounter the
text, and therefore how they will react and respond.
In print and serial graphic texts, reading follows a
linear path-like a corridor where the author holds the
hand of the viewer and shows the way. With
interactivity, the author constructs an environment for
the viewers and allows them to explore. With
interactivity, a change in the role of the author and
the viewer based on the issue of control is evident.
As Mark Stephen Meadows points out in Pause and
Effect 2, interactive digital narrative combines
traditional (print) narrative with visual art and
interactivity allowing information to be understood
from multiple perspectives. It also allows someone
other than the author to choose or change elements
of the plot, thus fundamentally altering the usual
degree of control conventionally attributed to the
author. The author still has control over what will be
found in the text but it is up to the viewer to choose
the steps taken. Robert Coover describing this
process in Literary Hypertext: The Passing of the
Golden Age says:
The author did not disappear, as was feared or
hoped for, but became a kind of designer or
architect or landscaper as well as writer, building
or laying out a structural or geographical space
1
2
3
Fig.1. Scan from the actual manga of Ranma 1/2
Fig.2. Screenshot, Scanned image in traditional book
format http://www.eigomanga.com/Manga/online_mangas/
monkey/issue1/page1.html
through which the reader might roam as though on
a quest of her own, guided or not guided by its
artist-maker.3
This is also true for multi-linear, interactive visual
storytelling. In this project, much of the control is
given to viewers of the interactive manga to enable
them to navigate through the story as they wish,
follow the character they choose to follow, and read
the story according to their own time. In this project
the author retains control over decisions regarding
the beginning and the end of the story, the design of
the multiple possible routes that can be taken while
Mark Stephen Meadows, Pause and Effect: The Art of Interactive Narrative. (Indiana: New Riders, 2003) 37.
Ibid. p. 2
Robert Coover, Literary Hypertext: The Passing of the Golden Age. http://nickm.com/vox/golden_age.html, (March)
reading the story as well as what will be revealed by
each character and when. Also the manner in which
typography, motion and other visual elements are
treated open the reader’s experience of the manga to
an enriched and more complex reading experience
than is possible in print.
Hypertext4 is an example of multi-linear, interactive
narrative associated with the literary world. Janet
Murray describes hypertext as “… a set of
documents of any kind (images, text, charts, tables,
video clips) connected to one another by links.”5
Some comparisons can be made between hypertext
and this project to explain how the conventional
literary forms are different in interactive narrative,
visual or literary. This can be summed up in what
Robert Coover said regarding hypertext:
These pioneer narrative hypertexts explored the
tantalizing new possibility of laying a story out
spatially instead of linearly, inviting the reader to
explore it as one might explore one's memory or
wander a many-pathed geographical terrain, and,
being adventurous quests at the edge of a new
literary frontier, they were often intensely selfreflective.6
Immersion
As mentioned above, fanfiction is an important
inspiration for this project. Fanfiction and its narrative
structure were highly influential of the project’s
immersive aims. By “immersion”, I mean being
experientially absorbed into something entirely,
making yourself a part of it. In many fanfictions,
invented characters, sometimes the alter egos of the
authors, are placed in the stories, resulting in selfimmersion (putting oneself in). This results in a
character that is easier for fans to identify with than
those created by the original author. The original
character, like the reader, is a stranger to the
previously constructed storyline in comparison to the
existing characters of the story. When used in the
story, they allow many possibilities in storyline
without the disruption to the original universe of the
story. Changing pre-existing characters too much will
result in losing the feeling, the aura of the story
created by the original author, the feeling that hooked
the fans to that story.
This principle also applies to the reader’s reception of
comics. As Scout McCloud points out, “we don’t just
observe the cartoon, we become it”.7 This project
creates a higher degree of immersion or engagement
for the viewers of interactive manga because they
are given more choice and control, thereby allowing
them to become more active participants in the
experience.
This kind of active participation is different from the
one you have in Choose Your Adventure books8.
These books give the reader choices by asking
readers questions and directing them through the
story, branching according to results of choices they
have made. The first difference between any
interactive manga and these stories is that most of
them do not have different points of view or allow the
viewer to change point of view at will. The second
difference is the questions and answers that still push
the story to progress linearly (as in Choose Your
Adventure books). This project, by contrast, is very
much multi-linear.
Multi-Linear Narrative
Multi-linear narrative, in context of this project is the
kind of storytelling where many routes can be taken
between the beginning and the end. There is in effect
no right or wrong way to read the story determined by
the author. Different routes taken may bring forward
different elements of the story or result in different
conclusions.
Important recent studies of narrativity and interaction in literary hypertext can be found in references section.
Janet H.Murray, Hamlet on the Holodeck. (Cambridge:The MIT, 2000) 55.
6
Robert Coover, Literary Hypertext: The Passing of the Golden Age.
7
Scott McCloud, Understanding Comics (New York: Harper Collins,1993) 36.
8
The popular Choose Your Own Adventure series of children’s books, first published in the late 1970s by Bantam books, and still widelyread – they have sold more than 40 million copies in 23 different languages.
4
5
This kind of narrative commonly has more than one
main character that the viewer can choose to follow.
While following that character, only a part of the story
will be clear to the viewer and only by following all the
characters or explore all the possible routes, one will
be able to understand the whole story9.
The reason for having a fixed beginning and an end
in this project was because of the time limitation. A
story that has many endings requires a more
complex structure and more time for development.
As the aim of this project was to create a prototype,
the focus was on creating many routes to read the
story and enriching the experience by means of
typography, motion and other visual elements. It is in
the upcoming projects where having multiple endings
will be explored.
3. Methodolody
Origins of the Project Idea
As mentioned before, manga scans posted on the
Web, and most doushinji published on the Web have
in common the flat, traditional, book-like treatment of
layout. Innovations in graphic design and visual
presentation using digital media are usually not taken
into consideration. This absence of interactivity and
enriched visual representation suggests a need for
the development of a more interactive visual
storytelling form. The premise of this thesis project is
transforming a visual narrative (specifically manga) in
order to better utilize the expressive and interactive
qualities of the web medium.
The starting point for the project was the analysis of
the existing structure and visual and narrative style of
manga (specifically shoujo, or girl's manga,). Results
from this analysis informed the building of a new and
interactive structure that takes advantage of the
electronic medium. There are many reasons that
manga was chosen for this project. The first reason is
that a large portion of the scanned comics on the
Web consists of manga. The second reason is the
similarity between the drawing styles of manga and
my personal style of drawing. And the third reason is
9
my familiarity with manga’s subject matters that come
from reading it enthusiastically for many years.
A new navigation system and a new interactive
structure for the story taking advantage of the
electronic medium have been constructed. The intent
was to create a more engaging visual and narrative
environment, allowing the reader to interact with the
story by selecting the pace and route to be taken.
The importance is given to finding ways to increase
the emotional content of the story by using elements
such as arrangement of elements within the frame,
color, typography, motion and so on.
Designing the Experience and the Interface
One important premise of this project is that the
experience of the viewer is changed by the treatment
of type, image, multi-linearity and by the experience
of interactivity. In the traditional comic book, you can
flip the pages and skim from the beginning, middle, or
the end of the book. Once these pages are scanned
to the web however, in the form of scanning, this
page-turning quality of the reading experience is lost.
This interactive manga project aims to reintroduce
that experience and to enhance it with the use of an
interactive story map allowing one to browse through
the content. This project also applies narrative
principles of hypertext format to the reading
experience so that the viewer is able to choose the
character she or he wants to follow around. (See
fig.3.)
Fig.3. Screenshot, Interactive Manga Site
http://www.selins-inn.com/manga/manga.html
Some examples in other media include Faulkner’s As I Lay Dying, and Thin Blue Line, a film by Errol Morris.
Because this project is a prototype, a primary focus
has been on inventing a user interface and
navigation map that will establish some conventions
for reading a multi-linear visual narrative (See fig.4.).
In order to be able to wander around the story as they
wish, viewers should have a navigation system that
will permit them jump from one point to another. This
allows the reader to explore their own way, so as to
allow them to read the same story in many different
ways, depending on the routes they had chosen.
To understand the navigation system of this project a
comparison to a street map of a city may be helpful.
In the ‘Interactive Story Map’ each large square acts
as a landmark, an anchor point. Just as each and
every street will not be shown on a city map, each
and every frame of the story will not be represented
in this navigational map. The reason for this
abstraction of the “space” of the manga is to make
the navigation and the user interface easier and
simpler. As in a city map, only the most important
sites and landmarks (such as monuments, parks,
Fig.4. Navigation Map
Fig.5. Harry Beck’s 1932 London Underground Map
governmental buildings, hospitals, etc.) are shown
along with the city streets. These points of emphasis
help you orient yourself much better than to have to
read each and every street name on the map one by
one in order to figure out your location10.
In his book, Designing Business, Clement Mok11,
gives the London Underground map as an example
that embodies a visual language that can be applied
to understanding the way digital systems operate.
First proposed by Harry Beck in 1932, the London
Underground Diagram was highly simplified and
contained only the information required for
commuters to understand the system (See fig.5.).
Routes were schematized and edited out to
emphasize the connections instead of the
surrounding geography. 12
During this mapping process it was necessary to
eliminate minor details of the Underground so as to
emphasize important ones. Beck’s London
Underground map was quite revolutionary in the
sense that he edited and abstracted the information
to create a clear understanding of the complexities of
the system it represented. By eliminating and
‘treating’ certain elements, aligning and abstracting
train lines, riverbanks, and placing the information on
a strict visual grid Beck increased visual harmony
and reduced information clutter.
In order to make the map easier to read Beck used
color to distinguish between different track lines and
he altered the distances between stations, reducing
or increasing them, to fit into a grid. The main thing
that he achieved was giving a hierarchy to the
information depending on their importance, like the
names of the stations and their sequence, and
eliminated the unnecessary elements, like the exact
replication distances between two stations. This
approach is still widely used in urban mapping and it
is applicable to web site maps and navigation.13
Fig.6. Possible routes 1, 2 and 3
Fig.7. Possible routes 4,5A and 5B
The establishment of the navigational map is a major
part of this project as the map shows the reader how
the story branches out, which path the characters
take, where their paths cross and what possible
routes to go from point to point. Just as two people
going from point A to point B in a city can take several
different routes by following different streets, viewers
of my manga can take different routes to read the
interactive story. Each viewer can read the “same”
story many times, choosing a new path thus
experience it differently each time. Only the starting
and ending point s are constant14.
As shown in figures 6 and 7, there are several routes
that can be taken while reading the story. Using my
manga as an example, one can choose to follow one
character from the beginning to the end, only
experiencing the 1/3 of the complete story. To
understand the entire story, one has to go back to the
beginning and follow the other two characters.
Another possible way of reading is to follow each
character one by one to a certain point of the story,
and continuing to read the rest after knowing
everything that has happened until then. Other than
these two methods one can always mix these two
A good source on way finding is Kevin Lynch’s The Image of the City (Cambridge: Technology Press, 1960)
Clement Mok, Designing Business . (San Jose: Adobe Press, 1996) 116.
12
For more detailed information on this subject see Edward Tufte, Envisioning Information. (Cheshire, CT: Graphics Press, 1990)
13
Paul Kahn and Krzysztof Lenk Mapping Web Sites (New York: Watson-Guptill,2001), pg 24.
14
Another source for discussions of these mapping techniques: the “Narratives of Space and Time” chapter of Tufte, Edward. Envisioning
Information. Cheshire, CT: Graphics Press, 1990.}
10
11
together. What changes in these different
approaches is the amount of information you get
while you are reading the manga, therefore
experiencing the story differently.
As in Beck’s London Underground map, color is used
to support navigation. Each of the main characters of
the story is associated with a specific color and
represented by that color on the story map. That
same color is also used on selective frames to
identify the specific characters within the story. This
also indicates points where you can change the
character whom you are following. Only in these
frames, when the mouse is over a character, will the
image change color to indicate that by choosing that
character, the user will now follow that character’s
point of view. (See fig.8.)
Stages Used to Create the Story
Because already existing manga stories are written
from a single point of view and therefore not suitable
for this project’s exploration of multiple points of view,
the first task was to write my own story that considers
multiple points of view. Any of the three become the
main character depending on what point of view the
viewer selects. Generally, in traditional comic book
stories the artist/author has control of what readers
will see and when they will see it. In order to create
the desired interactivity in this project, I have had to
cede some of the control and decision making to the
viewer.
Fig.8. Screenshot, Use of color in selection frame
Fig.9. The stages of transfer: pencil drawing, scanned
pen drawing and computer manipulated image.
The second stage, (outlining), establishes the
interactions between the characters and points in the
story where their paths will cross each other, what
will happen between them, and so on. This stage
also includes the most basic form of the navigational
map where the narrative landmarks are identified.
With a general notion of the storyline I began the third
stage of creating the visuals of the storyboard,
characters, backgrounds, etc. Depending on the
preference of the artist, these visuals can be drawn
by traditional methods, scanned, and transferred to
the Web or drawn directly in the digital medium with
software. My method in this project was to combine
both approaches (See fig.9.).
Fig.10. Layers in one frame of interactive manga.
I should emphasize that how the images are
transferred to the electronic medium at this stage is
different than just scanning them. In the traditional
method of scanning, the contents of the frames and
pages are scanned flat, in only one layer. As some of
the expressive quality of the site is based on motion,
the images for this project had to be transferred to the
computer in layers (See fig.10.). Contents of each
frame are divided and transported separately as
figure, background, talk balloons, written sound
effects. Later on, these elements are brought
together in Macromedia Flash with motion added to
their expressive quality.
The Website: Its Architecture, Navigation and
Interactivity
Issues such as motion, expressive use of
typography, and the scheme of the interactivity were
worked in the fourth stage. Because the story has a
complex interactive structure, a simplified site
navigation was needed to help the viewer to locate
themselves in the story and to select what
movements are thereafter possible. Because this
project is a prototype for telling a multi-linear visual
story in an interactive manner, a help section for new
users was created. It uses animations to describe the
use of the map and the layout of the stage. The
design of the navigation map was based on user
interface conventions and navigation systems in
order to provide the viewer with a familiar foundation
with which to access the interactive story.
Interactivity and immersion is achieved by giving the
control to the viewer of the pace of the story and
route that will be followed while reading it. By means
of the navigation map, the viewer is able to jump
around the story and to follow any of the three
characters they choose. In this regard, the project
differs from the serial use of motion in a classic
animated narrative.
One notable artist in the world of online comics is
Scott McCloud15. Online comics are comics that are
published on the web instead of printed on paper.
Online comics can be drawn on paper and then
transferred to the digital medium or be drawn by
using computer software. In his work, McCloud
focuses on advantages of the Web to publish work.
He experiments with the use of space, mentioning
that the space in a book format is different than space
on the Web, and it can be used in the on-line work to
15
http://www.scottmccloud.com
Fig.11. Zot! One of Scott McCloud’s online comics
http://www.scottmccloud.com/comics/zot/zot-01/zot01.html
show passage of time. In one case he uses a long
vertical page and scrolling to imply the passage of
time (See fig.11.). Although McCloud is willing to
explore space, he is unwilling to explore motion,
believing it will change comics into animation. I
believe this attitude is one of his shortcomings, as it
prevents the development and exploration of full
possibilities of the digital medium.
In an animation the viewer is passive, doing no more
than, in effect, pushing the play button. But in an
interactive, multi-linear manga, viewers can spend as
much time as they want or need before clicking to the
next frame. Another difference between animation
and multi-linear manga is in the degree of linearity
basic to each form. An animation is primarily linear
and the creator decides on the sequence of events
along with the time between them. But this interactive
manga project is multi-linear. It gives the viewers the
choice of following the character they choose to
follow. At any point in the story, the character that is
being followed can be changed for another.
4. Conclusion
Because of the effort and time required for writing
and drawing a full-length, multiple point of view
storyline, a multi-linear piece like this is not suitable
to be published in small weekly installments. It has to
be published in larger portions or all at once. This
project is only a beginning of a series of other
projects, where the storyline, visual storytelling
aspect of the story along with multi-linearity and what
it brings to the story needs to be investigated more in
depth. This project is developed as a prototype
where the main focus was on setting the navigation
system, enriching the experience by using
interactivity, expressive typography and motion while
figuring out how multi-linearity can be incorporated
into a visual story than an interesting and completed
story.
References
Coover, Robert. Literary Hypertext: The Passing of
the Golden Age.
The Keynote Address for the Digital Arts and
Culture, 1999 Atlanta, Georgia.
http://nickm.com/vox/golden_age.html, (March)
Faulkner’s As I Lay Dying,
Kahn, Paul and Krzysztof Lenk Mapping Web Sites.
New York: Watson-Guptill,2001.
Lynch, Kevin. The Image of the City. Cambridge:
Technology Press, 1960
Meadows, Mark Stephen. Pause and Effect: The Art
of Interactive Narrative. Indiana: New Riders, 2003.
McCloud, Scott. Understanding Comics. (New York:
Harper Collins, 1993 36.
Mok, Clement. Designing Business. San Jose:
Adobe Press, 1996.
Murray, Janet H. Hamlet on the Holodeck.
Cambridge: The MIT, 2000.
Ranma Scan Project
http://www.techserv.curtin.edu.au/ranmascan/
(January 2003).
Tufte, Edward. Envisioning Information. Cheshire,
CT: Graphics Press, 1990.
The Thin Blue Line, a movie by Errol Morris.