Stop Dry Day: An HTML Game Design

‘Stop Dry Day’ doesn’t mean what you’re thinking!

Today we’re talking about a game we created for BBC Media Action: a multinational non-governmental organization. BBC felt that at the rate at which we’re wasting water, we’d soon find ourselves with no water left at all: the ultimate ‘dry day’!

stop-dry-day-bbc-media-action-html5-facebook-game-4

To stop this day from coming, BBC asked us to come up with an idea that would help start conversations on water conservation on social media. What better way to start a conversation than to get people interacting directly with an issue?

stop-dry-day-bbc-media-action-html5-facebook-game-1

That’s why we thought of creating a game.

The Concept

The game we had in mind was a point-and-click HTML5-based application spread across three levels. Each level was based on urban and semi-urban Indian settings: the first was a DDA-like apartment locality, the second was a busy marketplace and the third was a five-star hotel. Players had to locate water wastage scenarios hidden in each level and click on them to make them disappear within a set amount of time. As the levels progressed, players had more water wastage scenarios to locate, and less time to find them in!

stop-dry-day-bbc-media-action-html5-facebook-game-3

stop-dry-day-bbc-media-action-html5-facebook-game-5

stop-dry-day-bbc-media-action-html5-facebook-game-6

How we executed it

Graphic production for this game was quite fun and interesting. We generally like working on a minimalist flat design, but for this project, we were asked to use more traditional ‘cartoon’ like forms and colors.

To do this, we first illustrated all the scenes by hand, adding details like trees, potholes, leaking pipes etc. in each step. We then scanned and transformed each of them into vectors, later coloring them with a more traditional palette. The challenge, though, was to show a variety of people wasting water while making them look like people that we could run into every day. We looked to ourselves for inspiration and hid everyone in the BAD team throughout the game.

stop-dry-day-bbc-media-action-html5-facebook-game-2

We used a similar process – draw, scan, vector – for the environment these characters were in.

While we did this we also worked on the game’s user flow – a comprehensive chart that explains how the game responds to interactions. The user flow document is the one that tells you where every button is to be placed and precisely what happens when a user clicks on any of them. It also documents the way the stages flow into one another and every possible situation the user could encounter in the course of playing the game.

It was a lot to accomplish in the time we had, so we divided up the work among ourselves. Sahil worked on the wireframes, Vivek designed the characters, Jackson took care of levels and Dennis sketched each of them out.

Once the designs and the documentation was complete, it was just a matter of our coders getting cracking to turn our concept into a game!

stop-dry-day-bbc-media-action-html5-facebook-game-levels-3

stop-dry-day-bbc-media-action-html5-facebook-game-levels-2

stop-dry-day-bbc-media-action-html5-facebook-game-levels-1

Ready to play? Click here to Stop Dry Day!

Share

admin

back to blog

Leave a Reply

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

Send mails to

antenna@blueant.in

Office One

B-15, LGF,
Greater Kailash Enclave- II,
New Delhi

Office Two

829, DLF Prime Tower,
Okhla Phase - l,
New Delhi