Insights

Under the hood of The Washington Post game: “Defy Death”

The quest to live forever, or at least to the ripe age of 150, still sounds more science fiction than reality. But several Silicon Valley billionaires have made a personal crusade of funding biomedical research for just that purpose, tapping therapies like stem cell transplants and custom-built bones. The Washington Post recently published a front page story on the topic: Tech Titans’ Latest Project: Defy Death.  Accompanying the piece, the newspaper also built the game “7 Ways to Defy Death” that details the workings of seven life-prolonging therapies by allowing a user to interact with each one.

Storybench was given an under the hood tour by The Washington Post’Shelly Tan who designed and coded the game.

healgame

What’s your role at The Washington Post?

I’m the interactive graphics editor. I started last July. My role is to help code and design a lot of interactive projects. My specialty is digital enterprise stories; taking projects through from beginning to end; taking a story and making it digestible by trying to find different entry points for an article.

What was your approach to building this news game?

Building a news game is similar to any other coding project: You take a larger problem and break it down into manageable chunks. News games tap into a really lovely playfulness in an organization’s relationship with an audience. There’s something reciprocal there, where it becomes more like an ongoing conversation.

How did you plan this health game?

There were three of us on the team [including animator Sohail Al-Jamea and science graphics editor Patterson Clark]. In discussing the game, we were hitting upon the same thing, that there’s a lovely pop culture element to this story. You see a lot of these technologies in movies. But you read articles by reporters and realize it’s not that far off from the real science. We wanted to hit upon that element of the playfulness of it all. We were given several tools at the beginning [like reprogrammed cells, rejuvenated blood, spray-on skin, etc] and we wanted to create a mini-game for each.

DON’T MISS  Clicks are a vanity metric. Here are some story analytics you should be worrying about.

How long did it take to build?

It was made on and off over the course of a few months, mainly due to scheduling.

 

The user must target and click on each virus to eliminate it.

 

Tell us about the viruses and crosshairs mini-game.

That was originally going to be a drag-and-drop game. The idea was that you could strengthen your own immune system. But we wanted to make it more dynamic. There’s something more engaging about fighting off the virus and you know where to shoot when there are crosshairs on the screen. There’s less need for text to explain what to do. It’s more instinctual.

Can you tell us about the technology used to build each mini-game?

Each mini-game has a different interaction point. In certain cases I created something custom, in other cases I took advantage of a plugin I had used in the past. One I’ve used a lot before is jQuery UI which has a variety of interactions. You can create a droppable area that things can be dragged into. That’s used in several of the mini-games. There’s also another plugin to measure how far you’ve gotten through a div.

What I primarily did was break down the interactions within the game I wanted to make, and then find appropriate tutorials or code references for that interaction. So for example, if I wanted a “point and shoot” game, I’d look up a way to apply animation to images. Then I’d figure out how to repeat that animation over and over again, randomizing both the speed and direction. But that animation has to occur within a set boundary, so there goes another search to figure out if you can set responsive boundaries for animations. And then, finally, figuring out a way to check whether all of the moving images have been clicked on with a cursor and therefore  “destroyed.”

How did you make the animations?

Sohail [Al-Jamea] put all the animations together. We used HTML5 video. But there was a whole variety of difficulties with video format. Safari wants mp4, Firefox uses ogg, iOS devices don’t autoplay the video. You have to write in a lot of fallbacks in the code [so there is a backup format in case another video format isn’t supported].

DON’T MISS  Six things I learned developing an interactive map on the effects of climate change

pumphealt

How do you balance medical reporting with the lighthearted nature of a game?

Lots of thought went into that. We wanted to be sure that while it was playful, it still conveyed the seriousness of the science. There is real technology here that could one day come into our lives. We wanted to keep it somewhat serious when it came to science. The text really draws in the science and drives home the specifics on the science.

biopri

Any advice for students or seasoned journalists who want to build a news game?

User design is one of the most important aspects of games, so keep experimenting and figuring out what works for your audience. [inlinetweet prefix=”” tweeter=”” suffix=”says @tan_shelly”]Have people play your game often, even and especially in the early stages[/inlinetweet], because what you might think are small bumps in the gaming experience can actually feel like huge roadblocks for the user.

Aleszu Bajak

Leave a Reply

Your email address will not be published. Required fields are marked *

Get the latest from Storybench

Keep up with tutorials, behind-the-scenes interviews and more.