Creating a unique
reading experience

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.

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.

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

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.

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

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 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.

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