eko

eko

TV Show, Video Game, or Both? Gamifying Cinematic Content

Swiping in Wizard School Dropout

Project Overview

What happens when a would-be wizard tries to make it in the “humdrum” world? You decide! eko is an award-winning video platform that allows viewers to control the story in real time with decision points and mini-games overlaid on top of real-life actors. For the eko original series Wizard School Dropout, Bluecadet created an interactive framework for an entirely new kind of user. They’re part viewer, part player.

Play Wizard School Dropout

Project Videos and Images

Interacting with Eko on a mobile device

A New Experience

Wizard School Dropout is somewhere between a live-action television show, choose your own adventure story, and video game. Bluecadet developed in-episode games that let users participate directly in the world of the show, “gamifying” cinematic video content to keep viewers active and engaged. How the show progresses along the 598,617 possible storylines depends not just on the choices they make, but also how well they play. That ultimately gives users a greater stake in the story.

Layering

Map of user choice opportunities that allow for 598,617 possible storylines

 

Mobile

2 up link tree

Illustration of “Wizard School Dropout” codebase, interactive layer, and footage combination

The Magic

Wizard School Dropout interactive gameplay centers on magic spells cast by rapid swirling or tapping on the part of the user. Spells fail or succeed, changing the storyline, based on the user’s actions. Bluecadet developed the gameplay mechanics and worked closely with the Wizard School Dropout production team to overlay them onto the live-action scenes. Unlike traditional game development, we had to sync the gameplay, associated animations, and UI displays with actors’ movements and the video timeline of each scene.

Placeholder

placeholder

“Rune-tracing” game layered on show footage

Placeholder

The Tech

Our greatest challenge involved getting several different technologies (including React, Pixi, GSAP, and Particle systems) to all work together. The result was a completely unique kind of development, in both process and result. Not web development, game development, film production, or post production, but a mix of them all.

Prototyping image

Fog

Zap

Collaboration from Day One

To seamlessly integrate our technology into the show, Bluecadet was involved in every step of the process, from conceptual development to post-production. Sharing our early prototypes with the rest of eko’s team was critical in learning how best to support the show’s complex branching storylines, provide a consistent experience on multiple platforms, and optimize performance on mobile. Later, our team storyboarded with the writers, developed shot recommendations with the director, and collaborated with the post-production house on the visual effects for the minigames.

Proto

Animated sketch prototype and finished in-show interactive experience

Proto

Early UX sketch

The Future with eko

We designed a flexible visual identity and motion style for a range of UX moments, games, and storylines, effectively creating a library of activities that eko can use with other shows down the line.

Visual Identity and Motion Style

The Future with eko

Custom designed tokens for gameplay

The Future with eko

Bluecadet is a pleasure to work with, and always manages to 'wow' everyone at Eko.”

Jen Scheerer, eko Experience Director