Sheeping Around: A Development Case Study

A while back, I was interviewing for a job, and as part of the process they asked me to put together a case study on one of my past projects. I picked Sheeping Around, the multiplayer card game I'd been the main developer of. Rather than write up a deck, I put together a short walkthrough of how the whole thing came together — from a physical paper prototype to a live multiplayer game on iOS and Android.

Sheeping Around is a multiplayer collectible card game about grazing and stealing sheep. It is currently in open beta on iOS and Android.

I began this project around mid 2017 as a physical card game. I was inspired by a lot of indie card games mentioned in the image below. I got some custom visiting cards printed and wrote the card names and rules on the back of them, and used that as a playtesting ground. It was very successful, but publishing a real card game is really hard, so I decided to do a digital version.

The hand-made physical prototype, alongside some of the games that inspired it

For the digital version, I started working on a prototype with the front-end in Angular.js and the backend in Node.js with Express. For the database, I gave some technologies like MongoDB and Firebase a try, but eventually settled on Postgres from Heroku.

The web prototype and the early stack: Angular.js, Node.js, Express and Postgres on Heroku

The rules of the game are simple. You pick one of the two sides and either try to graze and whistle the sheep as a shepherd, or lure and steal them as a thief. The first one to take two of the three sheep wins. The real fun lies in the variety of cards you can use to make your opponent's life harder.

Meanwhile, I also started working on the UI design of the game. I created some paper wireframes and rough designs and kept iterating over them — a ton. It was a game that would be perfect for a mobile phone in portrait mode, and I was designing with that in mind.

I use Sketch as my tool of trade for UI design. I learnt it during my brief role as a product designer at Sumo Logic, and decided to use it for this project too. It helped me better visualize game screens before implementing them in code.

Early screen wireframes, designed portrait-first for mobile, designed in Sketch

I brought my artist friend Rashi on board for this, and we began conceptualizing the characters in the game. The characters would then be used on the cards and in other places like the gallery and the market.

Concept art for the cast of characters

The key characters are the Fox from the thief's side and the dog on the shepherd's side. We also worked on concepts for some additional characters — allies that help you in the game when you're struggling.

Something we set apart was the color theme of the cards on each side. The shepherd's cards would have a happy feel with a light background, whereas the thieves' cards would have a sinister feel with a dark palette. The bonus cards would have a blue background and stand apart from the rest. Here's a better view of some of the cards.

A closer look at the cards and their per-side color themes

For animation, we use skeletal animation with Spine, which exports JSON files with keyframes and bones. It is much more performant than the original frame-based animation.

Here are a few screenshots from the final game. It is fully operational, with a marketplace where you can unlock and buy cards as you progress through the levels and customize your deck.

Screens from the final game

Here's what the tech stack of the game looks like on the backend. Nothing much has changed since the prototype, except I've added Redis in the mix for caching. On the front-end, I use the Cocos2d-x game engine and RxJS for state management.

The architecture: a Cocos2d-x / RxJS client talking to a Node.js, Redis, Firebase and Postgres backend over REST and sockets

The game currently runs on two platforms, iOS and Android. I communicate with the server using a REST API, which is an overlay to the socket connection. I use Firebase auth to maintain state. The connection with the server allows the server instances to auto-scale to meet demand. Additionally, the backend supports clustering, so instances can take advantage of a system with multiple cores and higher RAM. I also use other services like Sumo Logic for logging and Sentry for error and crash reporting.

I did a lot of research on the progression and reward system for the game. I took references from some games mentioned in the image below. In the end, I came up with a system that rewards you better early on to get you hooked to the game, but later on, as you progress and level up, the rate of increase of rewards goes down. These graphs just show an average-case scenario of the progression — in the real world there are going to be lots of variables involved, and it'll often be different depending on how you play.

Modelled reward curves: coins and experience earned per game, and exp required to level up

Here are some graphs of the playtime of the users in the last 30 days. As you can see, the highest playtime stands at 30 hours. I use Tableau for visualizing this data. For some of it, I wrote custom SQL queries to extract data from Postgres and plotted them using the drag-and-drop interface of Tableau.

Playtime and engagement, visualized in Tableau

Finally, the game couldn't have been possible without the contribution of the amazing people I worked with on this project. They shaped the game in countless ways. And that's it for now — thank you for reading.

The team behind Sheeping Around

You can watch the original narrated case study on YouTube.