Creating a unique
reading experience

Phallaina — mobile app
Online demo ↗

Phallaina is a singular app that breaks from the canonical graphic novel format by delivering a narrative scrolling experience. Visually, it spans the physical length of 1600 iPad screens, is over an hour of reading and includes an immersive soundtrack.

iOS device
Role
Solo Software Engineer, Interaction Designer
Activities
UX & Interaction Design, Technical direction. C++, OpenGL, iOS & Android native app development.

The traditional paginated book structure is directly tied to the medium itself, inherited from the original codex that brought a superior practicality over ancient scrolls. Since digital apps are liberated from such physical limitations, it opens up possibilities of different ways for the readers to interact with a story.

Helping users to navigate 1600 screens.

Inspired by physical books, we focused on two fundamental interaction patterns: to display reader’s progress and let them explore all parts of the story.

Timeline

Instead of trying to fit a preview of 1600 screens, we designed a simple linear timeline representing the chapter structure, the reading progression and current position. I did refine the UI by precisely crafting states, interactions, and visual feedbacks directly through code.

The timeline UI, to navigate the whole story. Precisely crafting states, interactions, and visual feedbacks directly through code.
Snaps to closest chapter. Snaps position to closest chapter
Rotates when close to the border. Rotates when close to the border.

Designing a creative workflow

My role was to lead both the technical and interaction design aspects. How do you turn a 1600 screen story idea into an actual thing? When we started prototyping the concept in 2014, there was no authoring tool for us to make a 60fps native app directly from the drawings, animations and sound/assets.

After Effects as an authoring tool for Phallaina After Effects as an authoring tool for Phallaina

By observing how the illustrator and the animator were used to work, I decided to rely on the tools they were already comfortable with: Adobe Photoshop and After Effects. My goal was to preserve the iterative aspect of the creative process and move the effort on the technology side.

Phallain app workflow

Directly authoring the scenes on After Effects, then exported through our set of tools to be directly usable by our custom rendering engine.

An example of how the story was cut in multiples tiles. An example of how the story was cut in multiples tiles.
A texture sprite board for dynamic elements and paralax. A texture sprite board for dynamic elements and paralax.

A custom rendering engine

Behind the 2D reading experience, there is actually a camera moving horizontally through a 3D environment. I wanted to ensure a constant 60fps flow while loading the/assets on the fly, and not be limited with scene description formats or the rendering effects ideas we could come up with. At the end of the day, what we needed was a specialized 3D framework in black and white. This looked super fun to code, so I decided to write the entire thing from scratch using C++ and OpenGL, for it to support both the iOS and Android platforms. I have ported a demo to the web via Emscripten and WebAssembly.

The different software components of Phallaina The different software components of Phallaina

The end result was a compact and efficient 2D/3D engine that supports scene loaders, asynchronous/assets management, distance field text rendering, scene graph, motion paths, GLSL shaders and basic special effects.

The speech dialogues had to be completely dynamic and translated in English, French or any other future language. Fine typographic rendering is a tricky thing to implement in OpenGL, but a more challenging one was actually the speech balloons. To obtain a shape with a hand drawing feel to it, I designed an algorithm that generates a dynamic polygon outline around the text that stretches a brush texture with natural pressure variations.

How the speech balloons are rendered. How the speech balloons are rendered.

Teamwork

Phallaina can be seen as a design response to the opportunity of exploring new graphic novel reading experiences. Behind such a simple and minimalist result, we made tremendous efforts as a team to create a product greater than the sum of it parts.

Phallaina is a SmallBang & France Télévisions Production

Author and Illustrator
Marietta Ren
Animator
Julien Baret
Sound Engineer
Côme Jalibert
Software Engineer & UX Designer
Christophe da Silva
Graphic Designer
David Benmussa
Assistant Director
Martin Bessin

 

Japan Media Arts Festival
Jury Selection 2017
Future of Story Telling
Mobile 2017
Phallain app