Interactive Graphic Novel Experience

A Thesis Submitted to the Faculty of Drexel University by Sonia F. Havens in partial fulfillment of the requirements for the degree of Master of Science in Digital Media May 2013 c Copyright 2013 Sonia F. Havens. All Rights Reserved. ii

Acknowledgements

I would like to thank my Committee Advisor Dr. Michael Wagner along with my Committee Members Jervis Thompson and Matthew Kaufhold. Special thanks goes to Bobby Speck, the coding framework could not have been completed without you. I would also like to thank Bruce Pollock for aiding in visual direction. A big thank you to Yujie Zhu and Mike Cossentino. iii

Table of Contents

Abstract v

1 Terms 1

2 Introduction 2

3 Project Description 6

3.1 Remediation of Traditional Media ...... 7

4 Literature Review 11

4.1 ”Hobo Lobo of Hamelin” ...... 12 4.2 ”The Iron Feather:Infinite Canvas Comic” ...... 14 4.3 ”NAWLS” ...... 15 4.4 Genre Categorization ...... 16

5 Methodology 20

5.1 Analysis Spreadsheet ...... 21 5.2 Dual Functionality ...... 23 5.3 Highlight Functionality ...... 25 5.4 Mouse States ...... 26 5.5 Parallax Functionality ...... 27

6 Design Process 29

6.1 Story Creation ...... 29 iv

6.2 I.G.N. Layout ...... 32 6.3 I.G.N. Interface ...... 33

7 Future Considerations 37

7.1 Story Development ...... 37 7.2 Visual Development ...... 38 7.3 Framework Flexibility ...... 39

8 Conclusion 42

8.1 Story Analysis ...... 42 8.2 Sub-Story Analysis ...... 45 8.3 Navigation Analysis ...... 49 8.4 Visual Analysis ...... 51

Bibliography 55 v

Abstract Interactive Graphic Novel Experience Sonia F. Havens Michael Wagner, Ph. D.

Comics and Graphic Novels have been around for decades and within the last several years have been created to be displayed through the web as daily strips or larger works. Most of these works have held fast to the traditional format of Comics and Graphic Novels, but several have explored navigation and formatting that could be considered experimental in the world of Comics. The Interactive Graphic Novel will experiment with non-linear storytelling and navigation through the use of user directed panel selection. This Interactive Graphic Novel Experience will enable users to interact with the story by selecting an item within a panel to learn more about the characters while continuing through the larger over- arching plot-line. Users will interact with the graphic novel through a web based interface using Unity, they can read through comic book-like panels, scenes contained within set boundaries, and select a highlighted item to explore further character content and back- story. The interface will allow users to toggle between 3 main character perspectives in order to see the story as each character experiences it. The use of parallax and movement within and between each panel will help to emphasize the selectable items and direct the users through the story and sub-story. The user will be able to interact with the graphic novel through animated navigation in a three dimensional space which will further explore the capabilities of digital graphic novels as compared to the print form of graphic novel.

1

1. Terms

Comics : A series of visually depicted actions, along with text, that take place over time and are depicted through a number of sequential panels [2]. Digital graphic novel: A visual story telling device that has similar style characteristics as the comic book, but depicts a longer story, as opposed to a work containing several episodes/releases. Interactive storytelling: The user has the ability to choose and customize their own experience through selecting features throughout the novel. Experimental navigation: Navigation Techniques that are intended for one type of medium but used with a different type of medium. For example navigation originally in- tended for still photographs being used to navigate through panels which contain selectable items. Parallax: The effect whereby the position or direction of an object appears to differ when viewed from different positions. 2

2. Introduction

Comics are a popular form of storytelling exemplified by visual picture frames and text. Predecessors to the comic book, cartoon panels, have been around since 1732 [18]. These cartoons were used as political satire in order to get people involved in different political movements [18].Later, during the end of the 19th century Frank A. Munsey de- veloped the ”Pulp Magazines”, a literary magazine created from rough wood-pulp paper [13]. Originally created to compete with the popular ”Dime Magazine”, the pulp maga- zines targeted juveniles and adults with intriguing fictional stories that included occasional imagery [13].An example can been seen in Figure 1. Sabotage Sulfur Planet [11]. This im- agery included the brightly colored and action packed cover pages that helped to promote the magazines [13]. Pulp magazines were created and intended to sell cheaper and become more widely available to the public because of the second-class postal rates [13]. What we recognize as comic books today, were a branching-off from the pulp magazines initiated by Dell Publishing in 1922 [13].”Ballyhoo” was a published four-color comic book that would exhibit well drawn illustrations [13]. See Figure 2 and Figure 3 [8]. 3

Figure 1. Sabotage Sulfure Planet by Jack Vance

Figure 2. Ballyhoo Cover October 1931 4

Figure 3. Ballyhoo Illustrated Page

There is little agreement among critics and literary professionals on standard definitions for comic books and/or graphic novels. Comics can be defined as a series of visually de- picted actions, along with text, that take place over time and are depicted through a number of sequential panels [16]. Charles Hatfield explains, comic books were . . . obviously mis- named: not a book but a periodical, a cheap magazine printed on raunchy paper, descended from the foundering pulp magazines of the day and a cousin of the ephemeral strips found in newspapers [3]. Hatfield maintains the term graphic novel is not very helpful, Indeed a graphic novel can be almost anything . . . Perhaps this very plasticity helps explain the currency of the term. What might have seemed at first to denote a distinct genre has instead become an all-purpose tag for a vague class of social object (one that, unlike the comic book, need not be grounded in the exact specifications of a given physical format) [3]. While Hatfield presents a valid point about the non-specificity of the term, Hatfield does not mention freedom of format above. Hatfield offers us a nebulous term for graphic 5 novel and describes the evolution of the graphical novel stemming from the comic book. The differences between the definitions become obscured by how the terms are used simul- taneously. Hatfield defines comics as episodic and repetitive only to include those phrases in his definition of graphic novel [3]. I will be defining the graphic novel as a visual story- telling device that has similar style characteristics as the comic book, but is intended to depict a longer story, as opposed to a work containing several episodes/releases. Some of the most important considerations in designing a graphic novel include; the design layout, what story is being told, how that story is communicated, and what stylistic choices will be used to reflect familiar comic book genres. In my project, The Interactive Graphic Novel Experience I will create and question the boundaries and styles of what are thought to be the classic graphical novel visual style, including the content of a graphic novel, paired with an experimental web-comic user interaction. The biggest obstacles for the Interac- tive Graphic Novel Experience will be formatting and navigation, in order to keep the user experience visually clean and uncluttered. The format of the panels and the elements can enhance or decrease the enjoyment gained from the story if the interface becomes too much of a distraction. If the navigation becomes too confusing the audience is taken out of the story and the experience is no longer immersive. 6

3. Project Description

With the advancement of technologies we can take works that were once previously limited to one type of media and explore and add onto these works in order to create a completely new experience for users/readers, or what Henry Jenkins refers to as transme- dia in his book Convergence Culture [10]. For my thesis project I will create a section of a graphic novel through a web-based user interface that utilizes the Unity Game Engine and JavaScript in order to create an Interactive Graphic Novel experience that includes text, visuals, and the choice between different character perspectives. The Interactive Graphic Novel will use traditional web-based navigational techniques to enable the user an experi- mental way to explore 2D panels as well as a linear narrative in virtual 3D space. The features that support user interactivity will include the ability to toggle among the visual perspectives of 3 different characters within the story. Panels will include items that can be clicked in order to guide the user to additional back-story that pertains to the character that is currently selected by the user. For example, if the Wolf character is selected the user may find the Wolf’s back-story by finding and selecting his pups among the panels. Whether using traditional or experimental methods for displaying digital content in long form stories the flow and interaction of the content should feel natural and uninhibited. The technology should enhance stories without becoming a distraction. Scott McCloud explains, The key for encouraging immersion in such long-form stories is to ensure that the readers eye never leaves the page by stripping away everything but the comic itself and making navigation as simple and intuitive as possible [16]. In having the 2D panels in the 7

3D space the user will very simply see one set of character panels in front of the rest, in order to avoid visual clutter and to prevent confusion. Once the user has chosen an alternate perspective the camera will then move through space and relocate to the next character’s panels, replacing the previous panels within the frame. The additional back-story will be available to the user only when selected and navigated to, and will not be seen obstructing any of the main panels. This framework setup will allow the user a simple way to navigate through all the perspectives and back-story without ever having to leave the page. The user will be able to easily access the graphic novel from any desktop or notebook web-browser, and will be prompted automatically to install the Unity Player. The Unity Web Player is a quick install of less than a minute, depending on the speed of the user’s internet. The Unity Game Engine in combination with JavaScript allows for a wide variety of techniques for navigation. In addition it will enable loading the type of high resolution images that will be used in each panel.

3.1 Remediation of Traditional Media

The main objective of this thesis is to produce a delivery system for expanding the methods and production techniques of comic books/graphic novels in order to move the graphic novel form from a print medium to a web-browser or another digital media delivery system. The dynamic translation will maintain the high quality and entertainment value associated with the printed graphic novel [2]. In order to achieve what the print media cannot, the Interactive Graphic Novel or I.G.N., will use the navigation in order to allow the reader more freedom of choice throughout the experience or the reader can choose the more traditional method of following the main character of Little Red Riding Hood. The 8

3D environment will enhance and ease the movement of the 2D panels in order to simplify the task of swapping between the characters and their perspectives. By using techniques that can only be done with digital content, storytelling can be customized and users can navigate through the story in multiple ways and can then choose which method they would prefer. In the Interactive Graphic novel the same type of dynamic point of view angles that are traditionally used in the print comics or graphic novels will be simulated. The graphic novel will pay homage to the traditional arrangement of panels found in print medium but will add animation through navigation. By using the same camera angels and panel arrangements as traditional comics and graphic novels the Interactive Graphic Novel takes a subject or form of entertainment and moves it into another medium creating a hybrid that keeps the visual formatting of the traditional medium, while adding functionality through web-interaction. Several limitations associated with the printed graphic novel include: linear storytelling and stymied interaction. For example in the comic ”Batman: The Killing Joke” the reader can read the story consecutively from left to right [1]. ”Batman: The Killing Joke” graphic novel uses two main character perspectives in order to drive the story forward. The reader can also choose to randomly select panels and break the systematic flow of information and storyline, changing the story. By following the story consecutively the story will con- tinually be the same, while if the panels are randomly selected the story then becomes incoherent. The story is predetermined and each panel planned out through either the Joker or Batmans perspective and while one character might be shown in a sequence the reader is left in the dark about what the other character might be doing simultaneously. Once the story is read the reader can only then reread the comic again or sell it. A goal for the In- 9 teractive Graphic Novel is to use experimental navigation, a form of navigation previously used for image galleries, and expand it to create an experience for the user that is interac- tive and allows for story-telling customization through selection. This type of navigation acts like a carousel of images or in this case set of character panels. The interaction of the I.G.N. allows the user to choose a character perspective and panel, but also continually moves the story forward in order to prevent incoherence within the story time-line.These character sets can be brought in and out of focus based on what character profile the user has selected, placing the remaining character sets hidden while not in use. Functioning similar to the character sets the back-story will come into focus while the rest of the panels will be hidden. The story-telling format is altered by the choices that the user is given. The user may choose a more linear form of the narrative by simply advancing through each panel sequentially for one character. The user may also choose a more non-linear path by selecting the additional items found throughout the graphic novel or by alternating between the characters as the story progresses. The success of the Interactive Graphic Novel will be determined by the story flow, cohesion between each character, and how the navigation aids the perspective changes. If the user can switch through character perspectives,while maintaining a coherent story and all main story plot-points have been included visually into the work, than the Interactive Graphic Novel has been successful. This project will explore interactive storytelling in a digital space. It will enable a user to select a visual point of view from 1 of the 3 characters at any point in the story. During the project only a small portion of the entire story will be navigable by the user. Elements/selectable buttons found within the panels will guide the user to additional back- ground information about the story and about each character specifically. While the entire 10 scope of the story will not be created and contained within the Interactive Graphic Novel these additional objects could help to form the basis for future work on a larger storyline. A small interactive graphic novel segment consisting of a short fairytale or roughly 10 panels per each of the 3 character perspectives has been produced as the project deliverable. Once again the main focus for the Interactive Graphic Novel is less about the story or story content as it is about the form of navigation and how the user can traverse through the story panel to panel, character to character and selectable item to selectable item. 11

4. Literature Review

Digital media technology changes and evolves rapidly as does the methods by which individuals consume and interact with media. Physical tools used by artist have been moved into the digital domain. Artists working with these new digital tools are creating works that were impossible to conceive of or produce in a physical world. Yet, history teaches us that old media never die and they don’t even necessarily fade away. What dies are simply the tools we use to access media content, explains Henry Jenkins [10]. In creating a graphic novel that is web-based I take a visual form of storytelling, long associated with print and translate it for the digital realm. If the digital revolution paradigm presumed that new media would displace old media, the emerging convergence paradigm assumes that old and new media will interact in ever more complex ways [10]. Jenkins statement brings to light the idea that works do not have to be isolated due to the medium they have been created for, but can instead be used to enhance a related piece that has been created for a different medium. For example, Avatar Mini Comic 2 VoiceOver, is a fan-art piece that used selected characters from a pre-existing animation series, ”Avatar: The Last Airbender”, and further extended the storyline by adding original text and voice over into a short video [9]. Similar to the Avatar comic spin off the reader of the Interactive Graphic Novel Experience will be able to customize their own story-telling experience by selecting panels of their choosing,as long as the character panels progress the story, and which character will be viewed most often. This customization will be done with the pre-created assets/character perspectives and the selectable objects found within the graphic novel. The users can choose how they 12 interact with the story, which characters they choose to follow, and what items they choose to select, further exploring Jenkins theory of Convergence. Convergence involves both a change in the way media is produced and a change in the way media is consumed [10]. One leading example of a graphic novel is ”Watchmen” by Alan Moore and Dave Gib- bons [6]. Dynamic Camera angles, Character exaggeration, and a compelling storyline are several of the characteristics that make Watchmen especially enjoyable. In taking examples of the features that have been successfully done in the print version we then seek to bring those characteristics over to the digital medium to further enhance. The successful fea- tures that will be incorporated into the graphic novel include the visual techniques, camera placement, and panel arrangement, all of which help to guide the reader through a narrative. These techniques will be used in a manner that will aid with the progression of the story. For example, visuals that suggest right-ward angles and progressing the story as the cam- era progresses right. The user will be given freedom within a restricted set of boundaries, for example a set amount of panels and restrained camera positioning. This method will create a balance between user freedom and artistic creation for intended content. The goal of remediation is to refashion or habilitate other media, explain David Bolter and Richard Grusin [2].

4.1 ”Hobo Lobo of Hamelin”

No matter what shape your comics take, as long as navigating through them is a simple, intuitive process, that process will be transparent to the reader and the reading flow can continue uninterrupted, McCloud asserts [16].”Hobo Lobo” creates ease and simplicity within navigation by including an arrow button to progress forward and labeled buttons for 13 panel selection [19]. ”Hobo Lobo” utilizes arrows and symbols that have been prominently and widely used among interfaces throughout the web.The I.G.N. will utilize the same button graphics and layout techniques that have become more standardized among web- based interactions. In the Interactive Graphic Novel Experience the format will remain very similar to that of comics in regards to reading style, read left to the right; however, readers will be able to toggle between character perspectives and by selecting the different characters the panels will move through space in order to bring the selected perspective to the forefront. While the reading style will remain left to right, the movement through the character sets will be the feature that separates the Interactive Graphic Novel from the more traditional form of comic/graphic novel. An example of a successful web-comic that utilizes the parallax effect is ”Hobo Lobo of Hamelin” by Stevan ivadinovi [19]. Navigation will be kept extremely pared-down and simplified in order to promote immediacy. It is the notion that a medium could erase itself and leave the viewer in the presence of the objects represented, so that he could know the objects directly, [2]. A Next arrows will be used to progress, while a Refresh button with begin the story again at the viewers pacing, clicking on items will select them where applicable. As explained by Christophe Ponsard and Vincent Fries in their work on comics that are accessible to those with disabilities, in regards to single panel displays, by having each panel be displayed larger and in focus and providing previous/next buttons the interface becomes simpler to use and more accessible for users [4]. 14

4.2 ”The Iron Feather:Infinite Canvas Comic”

While much emphasis is placed on the panel location, the space between panels, and panel sizes in order to emphasize main events; if done incorrectly, viewers become dis- tracted. For example, Nate Shaws ”The Iron Feather: Infinite Canvas Comic” leads the viewer through a compelling infinite story, but can get confusing to navigate. At times panels are seen isolated and the viewer may become confused on how to move to the next panel. I will solve this problem by sticking with a more traditional layout, using various camera angles for emphasis, but for the sole reason of keeping navigation simplistic. Shaws variation in panel scale would have been more successful if the navigation were restricted and pared-down. Shaw explains, There are delays in the window movement and occasion- ally panels will not load... If there were a way for the reader to freely rotate the canvas, reading the comic would feel more intuitive [12].

Figure 4. Nate Shaw’s Iron Feather Panel Layout 15

4.3 ”NAWLS”

Another example of a web-comic using experimental navigation is ”NAWLS” created by Stuart Campbell [14]. While the navigation attempts to alert users and aid them through the progression of the story with the use of animated arrows, these animated directional are sometimes hard to discern from the other graphics included in the layout as seen in Figure 5. With the arrows used as a button to progress through the story I was initially inclined to use the arrow keys on the keyboard, only to find out that the navigation arrow buttons of ”NAWLS” does not correspond with the arrows of the keyboard. With some navigational shortcomings ”NAWLS” is still a good example of an interactive web-comic. Some of the features that make this web-comic a Favourite Website Awards or FWA award winning selection is the movement between each panel and between each of the graphics included within the panels. Interspersed throughout the web-comic are panels that are seamless, the user moves seamlessly from one to another and then back again after they click through with the directional arrows. Another notable feature is the seamless incorporations of the selectable graphics. They become highlighted once the user can select them and the eye knows where it needs to focus for this interaction, also seen in Figure 6. In order to bal- ance the look and functionality of the selectable items found within the Interactive Graphic Novel the right amount of subtlety to direct the viewers attention will be needed while still keeping these items from being too distracting. One of the main differences between the ”NAWLS” comic and the Interactive Graphic novel is explained by Campbell, The experi- mental nature of its delivery format is what makes ”NAWLS” most unique, with traditional comic panels replaced by animated frames that play out on a panoramic interactive digital 16 canvas [14]. While ”NAWLS” uses the panoramic format the Interactive Graphic Novel will be using a more traditional comic/graphical-novel style panel layout with the use of parallax to enhance the navigational capabilities.

Figure 5. NAWLS Progress Arrows Panoramic Style

Figure 6. NAWLS Blinking Selectable Feature

4.4 Genre Categorization

One important distinction to be made of the I.G.N. would be categorization. The fea- tures and design decisions made for the I.G.N. were chosen carefully in order to separate 17 the work from those that are categorized as an ”Animation”, ”Video”, or ”Video Game”. For this purpose the I.G.N. seeks to extend and explore the story telling methods of a comic book or graphic novel traditionally told through the print medium, but without breaking the ”feel” of reading a traditional work. While extending the methods of story-telling, the sto- ries being told develop and change as well. These stories must adapt to a new framework and technique for preserving a story-telling time line. Features were pared down in order to create a more conservative piece. Many of the works previously mentioned exhibit features that blur the lines and push the works closer to being labeled an ”Animation”, ”Video”, or ”Video Game”. The example which appears most experimental in contrast to the I.G.N. and closer to a video game experience would be the ”Brandon Generator” with its ”point and click” type of user interaction. This particular work encourages the user to freely explore each panel, while also encouraging the user to connect the experience with social media outlets such as Facebook and Twitter. The ”Brandon Generator” acts like a scavenger hunt type game by giving the users small clues that pertain to the story, but must be found on an item that can be clicked or examined further. Not all items help to further the story line. This experience plays more like a video game because of the free-range movement the user is given. If the user misses a piece of information, they can at any given point in the story go back and look for more clues. The user is also given the freedom to completely ignore the story line in exchange for interacting with features that allow for image uploads and social media connections. Bordering on the edge of video, ”Hobo Lobo” is a mix between traditional comics and the video genre. While the user can interact with the comic and determine the pacing, 18 the work also uses in-panel animations. These animations help to enhance the storyline and place focus within a panel, but are not full fledged animations or cut scenes. The animations continually loop and are found sporadically throughout the pages and panels. Animation is also used in the transitioning from panel to panel. Hobolobo does read like a comic;however, with the animations it is also a piece that can be watched. For example on page 2, panel 6 the character is seen flashing through different stages of building a boat. During the designing stages of the I.G.N a suggestion of video playback was in ques- tion. A playback feature would allow a user to record a specific experience or story run through and in choosing to do so would have the ability to enjoy the same experience at a later time or date by watching a video recording. The user would have also been able to share these recordings with other users. This functionality was quickly dismissed because once again a recording feature changes the experience from reading through a comic to watching a video through. Watching through a video would also lock in the pacing of the story and negate how customizable each experience may be for each individual user. Users are continually finding new ways of viewing the same interface. Clay Shirky discusses interfaces and cell phones and continues to explain, Every surprising bit of new behavior described here has two common elements: people had the opportunity to behave in a way that rewarded some intrinsic motivation, and those opportunities were enabled by technology but created by human beings [5]. Simplified, Shirky explains that users will find unexpected ways to use an interface, techniques that even the designers had not necessarily accounted for. His concept is important because it plays into the user customization and form of story-telling that the Interactive Graphic Novel achieves. By giving the users the ability to toggle between character perspectives at any given point of the story, the inter- 19 face is allowing the user to create a narrative that can be read through with several different understandings. With the amount of story variations that the user can experience, the mes- sage has the potential to become something completely different than what was originally intended. The user can create a customized story-telling experience, based on whether the back-story content was read and through which characters perspective. 20

5. Methodology

In order to prevent confusion caused by extraneous functionality within layout and nav- igation, research and listings of previous works/examples were examined and cataloged for features that enhance and decrease functionality. A spreadsheet was created with the URLs, date of creation or last update, framework used, type of interactivity, and ease of user in- terface. See Section 5.1. Research consisted of features that make each of the pre-existing works feel bulky and unnecessary to functionality. A list of the features were collected that will help to enhance, simplify, and cater to the unique requirements of the Interactive Graphic Novel. The listing includes web comics that currently exist on the web in con- junction with the type of interactivity that each of these web comics offers. This spread- sheet includes but is not limited to the works of ”Hobo Lobo”, ”The Iron Feather”, and ”NAWLS” as mentioned earlier in the Literature Review. Listing these comparisons allows me to create a more concise user friendly interactivity, by following practiced user design and emphasizing the features of the Interactive Graphic Novel that should be comparatively different. 21

5.1 Analysis Spreadsheet

NAWL Interactive

URL http://www.nawlz.com/

Date 2007

Framework Used Adobe Flash

Type of Interactivity Interactive Panoramic

Ease of Use 1-10(Easy) 8- Not always apparent how to move forward.

Best Features Highlighting and Techniques used to place user focus. Seamless Panels.Animated Features.

The Right Number

URL http://www.scottmccloud.com/1-webcomics/trn- intro/index.html

Date 2003-2004

Framework Used HTML and Plugins

Type of Interactivity Directed Interactive Comic

Ease of Use 1-10(Easy) 10 - Intuitive navigation using 2 different methods or Dual Functionality.

Best Features Two Types of Navigation. Simple, clean look. Ani- mated Transitions. 22

Adrian Baxter’s Portfolio

URL http://www.apbaxter.com/

Date 2013

Framework Used HTML and JavaScript

Type of Interactivity Mouse Movement

Ease of Use 1-10(Easy) 10 - No Navigation per se, but movement is auto- matic.

Best Features Parallax shows movement.

Hobo Lobo of Hamelin

URL http://hobolobo.net/

Date 2013

Framework Used HTML and JavaScript

Type of Interactivity Directed Interactive Comic

Ease of Use 1-10(Easy) 10 - Intuitive navigation using 2 different methods.

Best Features Parallax used to cover and uncover items from the sur- rounding panels, gives the appearance of depth. 23

Brandon Generator

URL http://www.brandongenerator.com/

Date 2013

Framework Used HTML, JavaScript, and jQuery

Type of Interactivity Interactive Film(Point and Click)

Ease of Use 1-10(Easy) 5 - Not always apparent how to move forward.

Best Features User is given freedom of choice.

5.2 Dual Functionality

The features included into the I.G.N. will need to create ease of functionality for swap- ping perspectives, moving between the panels and restarting the story. One of the common features found throughout the previous works that helped to aid in navigation included dual functionality or two ways to accomplish the same task. For example ”The Right Number” by Scott McCloud uses a grid of numbers to represent each panel of the comic, the user can choose to select a panel number or by clicking on an arrow to move forward through the story[15]. ”Hobo Lobo of Hamelin” uses a similar technique with panel numbers, but instead of using an arrow the interface includes a next button. ”Hobo Lobo” also includes a button to move to the next page of panels, giving the user a clear idea of their current place within the story. Dual functionality is created within the I.G.N. by giving the user the option to select a character profile button or the Next button. If the user clicks one of the 3 character profile buttons the interface will move to the next panel for that selected character or if the user wants to move to the next panel for the same character they can click the same profile button or the Next button. The Next button will only move to the next panel of the 24 character that is currently selected. In adding dual functionality the user is given several options for navigation and allows the user to select a method that feels natural. The idea is to keep the navigation as pared down as possible while making it simple to use so that there is a very shallow learning curve for even the most basic user.

Figure 7. The Right Number Dual Functionality 25

Figure 8. Dual Functionality for Hobo Lobo

5.3 Highlight Functionality

Another commonly used feature within these works include highlighting. Highlighting is used to direct the user’s attention to a button that is selectable or part of the work that is important to the story. Each work uses highlighting in varying degrees, some more subtle than others in order to fit within the variety of design styles used. ”NAWLS” uses animated directional arrows in order to move the story forward, but also uses small animated move- ments on buttons to signify to the user that an object is selectable. The ”Right Number” uses a more subtle technique by changing the next arrow to a slightly brighter shade of blue. The buttons used in ”Hobo Lobo” start out black but upon hovering and clicking turn white with a shadowing effect or a surrounding glow. The Interactive Graphic Novel will use the highlighting technique in several different ways. The first highlighting technique, changing of color, will be used on all the navigational buttons, this will signify to the user 26 that these buttons are selectable and will perform a function. Highlighting will also be used to keep track of what character perspective is currently selected. So for example if the user has selected Little Red Riding Hood’s perspective then her profile button will have a glow or highlight surrounding it until a different profile is selected. The final use of highlighting pertains to the Wolf’s back-story. Within the second Wolf panel the user will find a button that will guide them to the Wolf’s sub-story panels. This button will animate slightly in one direction and reveal a glow upon the user hovering their mouse. Given these proper- ties the button will fit the look and feel of the panel, but also alert the user of additional functionality.

5.4 Mouse States

Creating button states such as a hovering or clicking state allows an interface designer to create buttons that fit closely within a design, while still alerting users that an action is available or required. The I.G.N. interface/navigation is intended to invite the user to inter- act with the story and draw them closer to the characters and each character panel. While the navigation should feel in sync with the design and visuals of each panel, a balancing act occurs because the navigation should also stand out and avoid getting overlooked by the user. The navigational buttons used within the I.G.N. have the same appearance as the artwork found within the panels, but includes a white outlining and a glow for the mouse hover state. For example the same line width and stroke will be used on the buttons but a white glow will appear when the user’s mouse hovers over one of the buttons. The buttons should visually pair closely with the artwork of the panels and invite the user to interact with the story and become part of creating their own unique experience. 27

5.5 Parallax Functionality

Parallax is another commonly used and notable feature from several of the example works mentioned previously. The most obvious use of parallax can be seen within ”Hobo Lobo”. ”Hobo Lobo” uses this feature in order to enhance and alert the user that they are currently moving from one panel to another. Parallax also helps to define what panel the user is currently looking at and to keep the user from scanning ahead before taking action to move to the next panel. In ”Hobo Lobo” when a user chooses to move to the next panel im- ages that were previously covered are revealed to display new story material. While ”Hobo Lobo” uses parallax to enhance the movement from one panel to another, the ”Brandon Generator”, created by Edward Write and Tommy Lee Edwards, uses parallax to put focus on the user’s movement within the same panel[7]. For example if the user is in ”Brandon’s Car”, when the user moves their mouse around the scene toward different objects, the im- ages outside the car window correspond and move with the mouse movement. This use of parallax plays a much smaller role in the overall storytelling process. Much like ”Hobo Lobo” the Interactive Graphic Novel uses parallax to help with the transitioning and reveal of the next panel, but will also help alert the user of the Wolf’s sub-story selection button. The parallax feature was added in order to enhance the effects and weight of the dialog and elements of each panel creating a three dimensional appearance as seen in Fig. 9. This effect may be more prominently used with navigational development of future work. 28

Figure 9. As exemplified by the Wiki for Parallax 29

6. Design Process

6.1 Story Creation

During the creation of The Interactive Graphic Novel one of the main considerations was the story that would be told. Originally, the goal was to develop a unique storyline con- sisting of three characters that relate by intervening actions or plot points. Each character in the story would begin at the same place/scene, diverge out to overlapping stories and/or individualized scenes and each story would continue on to a final conclusion involving all three characters. So in essence the beginning and end panels would remain the same re- gardless of which character the user has selected. After developing several drafts of a story, without reaching a complete finalized script, the decision was made to use a pre-existing storyline, one that users may already be familiar with. By choosing to use a pre-existing storyline users may find it easier to understand the concept of switching between perspec- tives and the methods behind the story telling itself. The short story that was chosen to be used with The Interactive Graphic Novel is ”The Brother’s Grimm Tale: Little Red Riding Hood”. This tale would allow for three characters and customized perspectives for each. The tale of Little Red Riding Hood would allow for exploration of character types and would give me three characters that can both have similar motivations and perspectives and/or very different motivations. For example, the Wolf’s perspective can be explored further because in the original tale of ”Little Red Riding Hood” his motivations were very simply that he wanted to eat both the Grandmother and Little Red Riding Hood. In Using his character for the Interactive Graphic Novel I was 30 able to further explore those motivations and give the reader more background information about the Wolf, thus changing how the user may see the Wolf. On the opposite end the Grandmother can now been seen in her hero moment promising the Wolf of her own escape. Red Riding Hood’s personality was kept to that of a small naive child. Each character needed to interact with one another, while at the same time enabling the story to account for separate story lines. This story allowed for small character and story changes that would best suit the perspective swapping and method of story-telling. Small additions and alterations were made to the story in order to account for missing perspective gaps as well as additional character back-story and development. For example throughout the original Little Red Riding Hood story, the reader is following the actions of Little Red Riding Hood and therefore has no indication of what the Grandmother is doing simultaneously.Some character actions and visuals may be left out due in part because tra- ditional fairy tales often use a third person perspective, while the story is driven by the main character. The Interactive Graphic Novel addresses this issue by creating panels where the user can see the Grandmother lying sick in bed and later talking with the Woodsman who visits the Grandmother in order to deliver her chopped firewood. One of the goals of the Interactive Graphic Novel is to give the user the ability to learn a little bit more about the characters and provide content that was not previously included in the reading of the original Brother’s Grimm Tale. The back-story about the wolf is included in the Interactive Graphic Novel through the use of a selectable object within one panel of the Wolf’s story. The user is given the option to explore this back-story or to pass over it. If the user decides to explore the Wolf character’s back-story than the user may become aware of the Wolf’s motivations and how tragic his story actually becomes. This selectable 31 feature advances storytelling in a way that would allow story creators/artists to expand character profiles and story lines. The added functionality allows for authors to continue developing characters without the fear or having to reprint or make significant changes to the formatting or creation of an original comic or graphic novel. The features acts as an addition more than a revision to the work as a whole. Story timing played a major role in developing and customization of the Brother’s Grim Tale to fit with the Interactive Graphic Novel. By swapping between the character perspec- tives, what the user is actually doing is choosing a moment in time that each character is occupying. For example, while the Wolf and Little Red Riding Hood are having a discus- sion in the woods, the Grandmother gets a visit from the Woodsman. Story timing and layout technique helped to direct the interface design by restricting the amount difference between the number of panels for each character. Each character needed to have roughly the same amount of character panels in order to smooth the transition between character swapping and the progression of time throughout the story. If given a different amount of panels per character the user may become lost in regards to their current place in time within the story.For example, If one character were to have 20 panels and another character were to have only 10 panels, by switching between the two characters a sense of time would be lost due to the second character having half the amount of time or visual representation as the first character. In creating the Interactive Graphic Novel with a set 10 panels per character the story becomes limited and may not show all the actions necessary to fully depict the story. For future progress/works more panels may need to be added in order to create smoother transitioning from panel to panel and character to character. 32

6.2 I.G.N. Layout

In order to recreate the story of Little Red Riding Hood and each of the character per- spectives the final I.G.N consists of 5 layers for each panel, 3 characters, and 10 panels. The number of layers, characters, and panels combine for a total of roughly 150 different layers to create each perspective, for each character, for each panel as depicted in Figure. 10 Panel Breakdown. Some character panels required only 3 layers, while other panels required up to 6 layers in order to depict the scene accurately. The top-most layer for each panel includes the dialog on panels where applicable. Each panel contains color in order to help enhance the separations between the different layers. The navigation includes color and different highlight states for user clicking and hovering.

Figure 10. I.G.N. Panel Breakdown 33

6.3 I.G.N. Interface

The original interface design called for a small grid of panels that functioned as a navi- gational road map. The road map depicted where the reader was within the story and what character the user had selected as seen in Figure 11. After several revisions and consid- erations the navigation was pared down in order to simplify and clean up the interface. The character grid unnecessarily took up screen real estate, and did not benefit the naviga- tion because the user is solely allowed to move forward with the story instead of enabling backward movement. By negating the navigational grid and allowing only forward movement throughout the story, several interaction issues were avoided. The biggest potential issue would be the break in story-timing. For example a user located on Red’s panel 2 would have had the ability to move to panel 2 for both the Grandmother and the Wolf thus causing confusion between story movement. Movement from panel to panel should signify the forward move- ment of time, and the movement encouraged by the grid would not guarantee that a user’s movement was progressing the story.In creating an interface that can solely move forward, it may become apparent to the user that a trend is occurring and what to expect from future actions. Also, this type of grid movement through the story does not encourage replay- ability because the user can choose to see each characters perspective as they move from panel to panel, thus negating the different story varieties and outcomes for each time the user runs through the Interactive Graphic Novel. Another issue that may arise with the grid navigation format included the user’s ability to completely skip panels. For example the user would be able to skip panel 2 for each character, which would cut out important plot 34 points within the story and once again hinder the flow of the story as a whole. Instead of using the grid system as previously designed, the user is given the option to move through the panels with a next arrow selection. The user can also move through the panels by clicking one of the character panel profile buttons to either stay with the same character and move to the next panel or to move forward a panel but with a different character. A reset button has been included to allow the user to restart the story and allow for different story combinations. The new form of navigation can be seen in Figure 12. The additional content will not be integral to the storyline, but will add to the richness of the characters and the environment by creating sub-stories.

Figure 11. Panel Layout Navigational Roadmap 35

Figure 12. Revised Navigation

Once the navigational framework had been setup, the story was developed and placed within the framework to develop a better sense of story direction and flow. This process included character concept art, character backgrounds/personalities and a story web for the interacting characters and story elements. In order for the parallax to function with each layer of the story panels, the camera/framing for each panel and each character perspective has been carefully planned out in order to make cohesive connections from one panel to another. Once the panels were brought into the framework and animation was added, minor dialog and visual adjustments were made in order to help with the flow of the story for each character. Continuing forward, all the layers were positioned within a game creator/engine and in conjunction with the coded framework, development on the transitioning from panel to panel began. Using coded scripts, game objects or in this case a camera can be directed to utilize the scripts along with the navigational buttons in order to animate between the panels. A tweening plug-in was used within the game engine in order to create smooth right to left, and zooming animations between the characters and the panels. The animations include what the user will see while moving from panel to panel, but also between each character. For example, how the camera will move back in space when switching between character panels. Functionality such as the ”reset” and next buttons were added during this 36 stage. Once again the I.G.N. seeks to recreate comic book storytelling within a Digital Medium. The story should be an integral part of the experience and by excluding extraneous features or non-essential user interactions, that do not pertain to the story, focus will be placed on the story itself. The user should not get hung-up by small details or animations, but should be able to progress through the story uninhibited. A recording feature would completely take the user out of the story customization process, especially if a user was capable of sharing said story. The mechanics should be paired down and feel as though the user is flipping through a comic book page by page, but with the added features of character perspective swaps and character back-story. 37

7. Future Considerations

The I.G.N. seeks to experiment and explore the techniques used in story telling in order to encourage the user to create a customized story telling experience. This form of story telling uses visuals similar to comic books and graphic novels in order to enhance the story as a whole. While the I.G.N. uses techniques such as parallax, a 3D environment with camera movement, and selectable features within each panel, many features can still be explored in order to push the boundaries of story telling and how a user can interact with these stories. Future considerations for the I.G.N. may help to clarify story lines or create a user experience that is far reaching from the story telling experience of a traditional comic book or graphic novel that we know today.

7.1 Story Development

One of the biggest changes or improvements that may be made with future progress would be changes to the story itself. Initially the goal for the I.G.N. was to tell an original story with original characters, but due to the scope of the thesis the story was scaled down in order for the user to be more familiar with the story and therefore more adaptable to how the story is told and the changing perspectives. It would be interesting to compare how a user might navigate through a familiar story versus a completely new tale. Questions arise whether a new tale could be told without losing the user within the story time line or whether a time line is important to the work overall. Story creators may also choose to create a tale that has more character perspectives to choose from, or may even contain only 38 two different perspectives to switch between. In creating a completely new storyline, the experience may move from a short story told within 10 panels to a much longer read, with more in-depth character interaction. An original story for the I.G.N would lend itself to a more in-depth form of character development through the use of sub-story selections. By adding more selectable items within the comic/graphic panels the creator of the story is given more freedom to develop their characters aside from the main plot or story line. It gives creators the opportunity to flesh out the personalities and backgrounds of their characters which may change how a user perceives the story as a whole. Sub-story selections also lend themselves to creating a more adaptable story, these features could be added in over time in order to add to a story plot and encourage replay-ability from users. Since one of the main components to the I.G.N. is the sub-story functionality one could combine functionalities in order to expand this feature even further. For instance, the story could include perspective selections within a sub-story line. By including perspective se- lections within sub-story lines, this included functionality would create a tree-like story framework that would continue to branch out per sub-story per character. The creation of these perspectives within sub-story would create endless flexibility within story creation and story length.

7.2 Visual Development

Great care was given to the visuals created for the I.G.N. These visuals could change the user’s perception of the story and the overall look and feel of the thesis. For future development the story creators may choose to create visuals that push characters to the 39 extreme. For example in the tale of Little Red Riding Hood the Wolf sees the Woodsman as the villain and a monster, therefore through the Wolf’s perspective the visual depiction of the Woodsman is always portrayed as a monster or demon. While at the same time the visual depiction of the Woodsman through the Grandmother’s perspective may be one of heroism and the character may appear larger than life. Pushing visual extremes based on perspective could enhance a story and help to make each perspective a very unique experience.

7.3 Framework Flexibility

Flexibility within the story creation process was a main consideration during the devel- opment of the I.G.N. The framework was created in a way that would allow writers and story creators freedom during the creation process. For example the frame work allows for any length of story whether the story is only two panels or 50 panels long. Updating and editing visuals is as easy as replacing an image file within a folder, so if the story/visuals need editing, drastic changes aren’t necessary. Once again adding sub-story features are also simplified by creating tags and labels that direct the camera to panel groups placed within the 3D environment. The flexibility within the frame work helps to encourage writ- ers to create an original story that may develop over time.Writers would be given the free- dom to create an ever evolving story line that may include the addition of characters or plot points over a given amount of time. By examining how flexibility can change the way a story is told the form of navigation could certainly be experimented with. The grid form of navigation, mentioned previously, could be reinstated with an original story. This form of navigation would allow a user 40 complete freedom of movement throughout the entire story. The user would be given the ability to move forward, backward, skip panels, and swap character perspectives at will. This type of navigation would be highly experimental because a user may or may not be able to follow along with any particular story line. A method for keeping track of where the user is within the story would be needed and easily viewable by the user in order to help create a succinct viewing experience. Placement of the character set, along with the placement of each panel within a 3 Di- mensional space plays a big part in the transitions from perspective to perspective. Cur- rently, the layout for the characters within the I.G.N. are set one behind another starting with Little Red Riding Hood, followed by the Grandmother, and finishing with the Wolf’s perspective. See Figure 13. This setup helps to alert the user that a definite change is oc- curring while switching from one perspective to another, the user should always be aware of what character they currently have selected. The current method of transitioning works well;however, at given points in the story the transition from character to character seems to hiccup and jump. The transitioning could be improved for smoother functionality by fine tuning a motion blur. In considering possible future work and improvement the tran- sitioning animation and functionality could be experimented with. The character set could be arranged in a vertical stack layout, one set located directly above another. The character sets could also animate like a photo carousel so that the camera is not actually clipping through anything, but moving along with the panels. 41

Figure 13. Character Set Layout

A final consideration and improvement to the I.G.N. thesis would be creating and allow- ing the framework to work on mobile devices such as tablets and smart phones. In creating the I.G.N. for the web, the goal was to make the experience available to any user with a web browser. If the framework were extended to work as a mobile application than more users would have access and be able to customize their own story telling experience along with sharing that experience with others. The application could also allow users and creators to become more involved and actually create a story line and visuals for a work of their own. The option of mobility allows users to enjoy a customized story telling experience any where they go. 42

8. Conclusion

The I.G.N. can be analyzed in terms of what major functionality was added, why the functionality was added and if the features included helped to optimize the story telling experience. An overall view of the work will help to determined what was successful and what was not as successful. The visuals and dialog also play a large role in determining if the experience as a whole is consistent without any issues in story flow. To begin, a broad overview of the story is analyzed.

8.1 Story Analysis

A unique set of issues arose while creating separate perspectives for each character. The main issue as discussed previously was keeping track of time within the story, while the user may be swapping between the different character perspectives. In order to account for the swapping, helper dialog was added to panels in order to aid in keeping track not only of time, but of setting and motivation. For example Red Riding Hood expresses, ”Hello, Grandmother? Is that you? It’s Red. How did you get into the Wolf’s belly?”. This state- ment helps to explain where the characters are and what the viewer is seeing, as depicted in Figure 14. The helper dialog can be a bit ”spelled” out at times, especially if the user is continuing on the same character path for several consecutive panels.Overall, the helper dialog aids in giving the user the freedom of character and panel choice throughout the story. While the helper dialog works well on occasion to place the user in a specific setting or time, there are moments in the story that hold gaps during the swapping process. For 43 example if the user chooses Red panel 1 moves to Grandmother panel 2 and Grandmother panel 3, then moves back to Red Riding Hood for panel 4, the user may not understand why Red is in the woods and why she is in such a hurry.See Figure 15. Overall the story can be followed best if swapping only occurs after several successive panels for one character. If the user decides to swap character perspectives for each successive panel than, on occasion, the story has a tendency to jump from one situation to the next, and may not include im- portant actions by unseen character perspectives.A future build may include functionality that disables the swapping of character perspectives during these particular points within the story. In order to keep the user aware of time within the story the amount of panels per char- acter needed to be roughly the same, as mentioned previously. The purpose of keeping the number of panels the same is to make the viewer aware of what moment each character is occupying. In creating the panels for the I.G.N. one extra panel was added to the end of the Wolf’s storyline in order to show the occurrence of his death. So in total the Wolf has 11 panels and Little Red Riding Hood and Grandmother only have 10. Even though the difference between the number of panels is only one this causes a discrepancy because the user will reach the end panel for Red and Grandmother before they reach the end panel for the Wolf. While on the end panel for either Grandmother or Little Red Riding Hood by selecting the Wolf’s perspective the interface will then move to the end panel for the wolf. Even though all three characters share the same visuals for end panels this behavior causes the same end panel to be viewed twice causing a small redundancy within the story. 44

Figure 14. Helper Dialog within Panel

Figure 15. Red in Forest without Helper Dialog 45

8.2 Sub-Story Analysis

With the addition of the sub-story, time line issue arose and may not depict the correct time and place for when the sub-story is actually meant to occur. During the sub-story the wolf is having a flash-back like moment showing the history of the Woodsman and the effect he has on the woods and the creatures that inhabit the woods. This depiction is supposed to support the idea that the Wolf sees the Woodsman as a monster out to destroy the Wolf’s way of life. The sub-story may not initially read as a flash-back in time because of the panel locations within the 3D environment. The panels are located under the second panel within the Wolf’s story line and the camera travels from left to right moving forward between the sub-story panels, See Figure 16. Once the user completes the sub-story and chooses to move forward with the Wolf story line, the camera moves to the left and upward creating a backward diagonal movement. This movement appears to signify that the user is moving back in the story time line when in fact they are moving forward. One solution to this issue could include aligning any sub-story panels in a vertical fashion with a camera that travels downward to progress through the sub-story but continues forward to the right when the user completes the sub-story. The camera movement would continue to support the parallax because parallax is inherent while the layering of panels in the 3D environment is present. See Figure 17. for suggested sub-story layout. 46

Figure 16. Sub-story Layout within Game Engine Scene

Figure 17. Suggested Sub-story Layout 47

A complete read through of the sub-story is not guaranteed due to user interaction and freedom of customization. Functionality was included in the framework to allow the user to leave the sub-story at any time in order to switch to either the Grandmother’s perspec- tive or the perspective of Little Red Riding Hood. Given this functionality it may not be completely clear where the user is re-entering the main story-line. When the user moves past the sub-story regardless of what character is chosen they move to the third panel of the selected character. Also, in leaving the sub-story midway, the user would have to restart the entire story experience along with starting the sub-story over in order to read through panels that were skipped. One solution to this could be the added functionality of lock- ing the user into the sub-story and requiring them to reach the final sub-story panel before allowing the user to progress through the main story line. The sub-story button is an important part of the functionality because it guides users to additional information about the story line. Features have been added to the Wolf sub- story button in order to make it apparent that an action can be performed. For instance a hover state has been implemented that will enable the button to glow and stand apart from the rest of the panel. These features are the same as the features that are place upon the character profile selection buttons as to reinforce the idea that the user can interact with the sub-story button in the same manner as the other buttons. Although the same features have been added to the sub-story button, the location and size of the button play a major part in user recognition. The Wolf sub-story button takes up a considerable amount of the panel and is located fairly close to the main navigational buttons, therefore its success is straightforward. While the sub-story button is successful, the button does take up quite a bit of screen real estate and may limit the amount of buttons that can be placed within 48 a panel. See Figure 18. If the button were to be smaller and/or located at a distance in relation to the main navigational buttons the user may overlook the sub-story all together. The I.G.N. has only one sub-story button, therefore the user is not required to move the mouse spatially over the panels. Once again if a button were to be located further from the main navigational buttons the user may not move the mouse around the panel and stumble upon a sub-story button. A very subtle glow animation would help to draw the users focus.

Figure 18. Spacial Relation of Sub-story Button

The storyline is simple and paired down to a familiar tale and even with the simplicity of the tale, question of losing a user in time remains a concern. The I.G.N. has its success in keeping track of time within the story because the user knows that they are continually moving forward. However, if the story were to become any more complex or contain more 49 main characters a road map would be needed. The user should be able to see where they are in relation to other character panels and branching sub-story lines. A navigational map would also help to alert the user that a sub-story/sub-stories exists and where they can be accessed.

8.3 Navigation Analysis

The design for the navigation was highly dependent on how the story was written and visually represented. In order to bring the users into the story and encourage interactivity the interface was placed within the boundaries and over laying the panel visuals. Through the visual development of the interface a balance was sought, one that would make the buttons and functions apparent to the user but would not visually distract from the visuals of the panels themselves. The final visual outcome was successful in that the style is consistent with the visual style of the panels, while maintaining the users focus on functionality. The white outlining on the buttons help to keep the visual line widths consistent but separate. Mouse Hover states alert the user of interactive capabilities with splashes of color. User Interaction Designers dedicate a considerable amount time to designing a layout that visually and spatially meets the needs of a specific user experience. The layout of the I.G.N.’s main navigation is designed in a way that keeps all functionality close together and as visually minimalistic as possible. This minimalism can be compared to the interface of ”Hobo Lobo”, which does not impede the story-telling experience while the user travels through the story. The navigation should not impair the main visuals of the panels. By separating the elements of the navigation throughout the screen the interface would take on the style of a video game interface, where the user must focus on all parts of the screen. An 50 example of such a video game interface can be seen in Figure 19 [17]. with the in-game Halo interface. This reasoning and style depiction helped to narrow down that the interface for the I.G.N. needed to be kept together. While the navigation is visually minimalistic, the dual functionality of the buttons help to keep the interface successful as a whole. For example if the user has selected a character profile, the corresponding character profile button will remain colored and highlighted in order to signify what profile the user currently has selected. Once again this gives the user two methods for moving forward in the story. The first method by selecting a character profile button. The second method is the selection of the next button. The next button then progressing the story for the current selected profile which has remained colored and highlighted.

Figure 19. Bungie’s Halo Interface

The transitioning for the I.G.N. is basic but works to alert the user that a major action is occurring. The goal for the transitioning was to alert the user that the character set is swapping out for the next chosen character set. The camera transitions with motion blur in 51 order to help distort some of the camera clipping that occurs when the camera is traveling through the panel objects in the 3D environment. The camera blur could be fine tuned in order to start sooner and end later as to hide the panels in the immediate surrounding area. At the current time the viewer can vaguely see the panels that surround the selected character panel, while the camera is in motion. As mentioned in future considerations sev- eral additions to the camera movement or to the placement of the character sets themselves could be made to improve the transitioning effect.

8.4 Visual Analysis

Visuals for comics are integral to depicting a story, settings, and the actions that take place within that story. Visual styles are carefully selected by authors and artists in order to correctly represent a high-action comic or the topic of an everyday comic strip/daily funny. During the development of the I.G.N. several visual styles were used and experimented with in order to reach a visual style that would compliment and pair closely with the actions in the story. Technology and technique helped to determined which style would be best suited to time constraints and used in the final I.G.N. The original visual style was to be hand-drawn and scanned in digitally. This method of creation would make it more difficult to change any visual assets that needed to coin- cide with any changes made to the story. Once the option of hand-drawn art was excluded, the next solution was to use a vector-based program that would easily allow for asset du- plication. Vector- based art would also allow for ease with cropping and scaling for any proportion changes. The first vector-based program used gave very little flexibility in re- gard to customization and line width. The style was very angular and the edges were sharp 52 in appearance. See Figure 20. Seeking a more modest visual approach a second vector- based software was used. The second program allowed for a wider variety of line widths and customization options. The story of ”Little Red Riding Hood” called for a more sub- dued style and the final outcome is successful for this type of fairytale. The final style/line art can been seen in Figure 21.

Figure 20. Original Vector-based style 53

Figure 21. Line Width and Finalized Style

The Interactive Graphic Novel seeks to explore the user experience of comic books/graphic novels as presented in digital format and through the use of navigation and user selected character perspective. The project demonstrates how a story, traditionally told through the print medium, can be enhanced with digital techniques in order to create a more interac- tive and personalized user experience. The experience created should not be compared to that of an animation, movie, or video game, but should fall in line with the traditional sense of comic books and graphic novels with still panels. As exemplified previously, the comics that include moving animations and point to click user interaction move the story/experience away from the graphic novel and comic book genre towards a fully fledged animation or game experience. The Interactive Graphical Novel incorporates user interac- tivity without changing the true nature of reading a comic. The key features that help keep the Interactive Graphic Novel more traditional are the still panels, while interactivity has been added through navigation. The interactivity added through the use of navigation is 54 meant to further support the story and how that story is told. By keeping the navigation simple and easy to use, additional functionality has successfully been created. 55

Bibliography

[1] B.Bolland and A.Moore. Batman:The Killing Joke:Delux Edition. NY:DC Comics Inc., 2008.

[2] J.D. Bolter and R.Grusin. Remediation. MA:MIT Press, 1998.

[3] C.Hatfield. Alternative Comics:An Emerging Literature. MS:University Press of Mis- sissippi, 2005.

[4] C.Ponsard and V.Fries. An accessible viewer for digital comic books. Heidelber, pages 569–577, 2008.

[5] C.Shirky. Cognitive Surplus:Creativity and Generosity in a Connected Age. Lon- don:Penguin Press, 2011.

[6] D.Gibbons and A.Moore. Watchmen. NY:DC Comics Inc., 1987.

[7] E.Wright and T.L.Edwards. The random adventures of brandon generator. http: //www.brandongenerator.com/, 2012.

[8] G.T.Delacorte. October. Ballyhoo, October 1931.

[9] HiddenAngle29. Avatar mini comic 2 voice over. http://www.youtube.com/ watch?v=PyqY1vBRt3o, May 2009.

[10] H.Jenkins. Convergence Culture:Where Old and New Collide. NY:New York Univer- sity Press, 2006.

[11] J.Vance. Sabotage on Sulfur Planet. IN:Better Pulications Inc., 1952.

[12] N.Shaw. Digital Comics:Panel Structure in a Digital Environment. PA:M.S.thesis.Dept.DIGM.Drexel University, 2011.

[13] R.Goulart. Cheap Thrills:An Informal History of the Pulp Magazines. NY:Arlington House, 1972.

[14] S.Campbell. Nawls. http://www.nawlz.com/, 2012.

[15] S.McCloud. The right number. http://www.scottmccloud.com/ 1-webcomics/trn/index.html, 2003.

[16] S.McCloud. Making Comics. NY:HarperCollins, 2006. 56

[17] Microsoft Studios. Halo, November 2007.

[18] S.Tychinski. A brief history of the graphic novel. Diamond Bookshelf, March 2012. Available: http://www.diamondbookshelf.com/public/default.asp?t=1m=1c=20s=164ai=64513ssd.

[19] S.Zivadinovic. Hobo lobo of hamelin. http://hobolobo.net/, 2012.