Case Study: Interactive Comic Books

The comics medium has undergone a pretty major shift in the past 10 years with the widespread adoption of e-readers, tablets and digital distribution. Only now have enhanced interactive comics become widely popular among fans and creators alike. I have been a long time advocate of transmedia and have always seen a strong connection between game interaction design and comics storytelling.

I wanted to bring game technology to the comics medium. Games are great vehicles for user interaction, narrative development and immersion. What better way to enhance comic story telling and pace than by including proven usability design from games?

Goals & Constraints:

  • Create enhanced yet authentic comic book presentation
  • Create compelling touch interaction for narrative impact and user engagement
  • Enhance storytelling using animation, particle effects, motion and sound
  • Create a reusable template for future interactive comic book projects

Contributions: Project Direction and Design, User Experience and Interface Design, Prototyping, Illustration, Project Assembly

Tools Used: Adobe Illustrator, Photoshop, GameSalad


E-COMICS AND MOTION COMICS…ROOM FOR IMPROVEMENT

The first digital comics were essentially scanned versions of their physical counterparts. No added interactivity or immersion. Then came motion comics which took the static art and added simple movement, scaling and rotation effects to give the characters and scenes a bit more life.

Problems with e-comics:

  • quality of visual experience limited to device resolution
  • interaction is delegated to basic zooming, panning and turning
  • does not enhance or replace print format

Problems with motion comics:

  • comes off like cheap animation
  • story pacing is no longer at the control of the user
  • linear progression path

My mission was to create a different kind of comic experience that felt true to the physical good while also taking advantage of enhanced interaction.


SAN DIEGO COMIC CON GAMESALAD DEMO

While manning the GameSalad booth at San Diego Comic Con 2011, I began a digital comic demo using the Creator tool to assemble it into a fully interactive experience for iPad. I Illustrated the graphics in the course of a few days and assembled a presentable build in less than one. By the end of Comic Con I had the first glimpse of touch screen enhanced comic narrative with small hints of game mechanics to draw the reader into the scenes. GameSalad was designed to be a game creation tool so many of the core enhancements such as swipe, animation, particle effects and basic lighting were a breeze to pull off.

What was most evident was how compelling user interaction could be for narrative story telling. Imagine branching story paths based on player choice, or supplemental clues and content that can be unlocked. Readers could be incentivized to read the comic a second or third time, each being unique in some way. Most importantly, all of these game-inspired features felt intuitive and user friendly on the touch screen display.

REDEMPTION: THE CHALLENGE INTERACTIVE COMIC

After returning from Comic Con I showed the demo to a few of my respected artist friends who I knew to be involved with digital comics. I was hoping that I could convert some of them into GameSalad users and give them my demo as a template to follow when making their own interactive stories. As it turned out, almost every one of my artist friends were PC based, and at the time the Windows version of GameSalad was unavailable.

This would not stop me from moving forward, however. I wanted to see a high quality experience put together using my engine design so I volunteered to assemble my friend Rolf Mohr’s comic project “Redemption” using GameSalad in my spare time. This book was designed from the ground up to be interactive so assembling the pieces should have been easy. Or so I thought!

My initial comic demo was much smaller in scope and had much less narrative content. I had to redo the project from the ground up and create a very technical data driven panel system that would automate a lot of the on screen transitions and story progression. Once the data driven system was in place, setting up pages was a snap and everything from particle effects, ambient animation, sound effects and camera effects were included.

Redemption was a much better example of user engagement with responsive panel interaction, dynamic panel transitions to draw the eye, environmental ambience to create mood, and a haunting sound track tied to story beats and user controlled interaction. It really felt like a comic book come to life in clean and subtle ways without gimmicks.

We showed off an early build of Redemption at Austin Comic Con and were amazed at how immersed people would get after just a few screens.

Work was wrapped up and Redemption was ready to launch mid 2012…unfortunately right around that time the project left my hands and became an official GameSalad product requiring a licensing agreement with Redemption creator David Burns. For whatever reason, the deal could not be completed and the release was put on indefinite hold.

“COMIC SALAD”  & MADEFIRE

With Redemption wrapped up (and a good proof point for the comic engine I built) I felt really confident about pushing the executive team to market the template as a premium product targeting comic artists and writers. Creators could import their art, set up a table for panel data, push play and see their work come to life. Of course a lot of custom work could be done to add audio visual flair. There were definitely drawbacks, though, as GameSalad lacked certain editing features such as a text editing for word balloons, and run-time z-axis reordering for 3D parallax.

I wanted to productize the engine and call it ComicSalad. This effort was very quickly halted, though. Right around that time MadeFire was picking up major traction with comic creators and publishers. MadeFire was a similar drag and drop editor but 100% dedicated to comics creation. Their market positioning and user base was all comics focused while GameSalad’s was firmly game focused. Seeing no real long term opportunity, we decided to abandon the effort.


WHAT WAS LEARNED

  • Motion is a great way to guide users from interaction point A to point B.
  • Particle Effects for ambience are a great way to make a page feel alive even if nothing is happening
  • Don’t force the reader to advance prematurely. Let the reader enjoy the little details at their pace.
  • Game engines are great tools for interactive storytelling

ACKNOWLEDGMENTS

Director, Designer and Artist: Billy Garretsen

Senior Artist: Rolf Mohr

Game Engineer: Jonathan Samn

Redemption Creator: David Burns

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s