interactive manga - New Media @ Yeditepe
Transcription
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. [email protected] 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.