Category Archives: Design

Little Things – Game Analytics

In this post, I want to share how we’re using our own brew of analytics to track user engagement. Here are some metrics I wanted to gather from my users:

  • Unique users – Need to track behavior at the user level
  • Play frequency – How many times do users play per time period
  • Store preferences – What items are people buying and what are people wearing
  • Character preferences – Which characters are users playing as

I won’t get into the technical things too much here, but we used a java library called KryoNet to send data between our app and our server. (If you’d like a technical break down of how we achieved this, leave us a note in the comments below!)

We write information to a CSV with up to nine possible columns. Here is some sample data: Data Rows Every time a user hits a screen I’m interested in, I will send basic information such as the particular screen (Session), the Name, IP, and Date Time stamp. Additional values, depending on the screen, will populate into additional columns, such as the number of coins a user has earned overall, the score per game, the character they chose and what kinds of items they’re purchasing and wearing.


Quick note: All the charts below were generated by the sample data from the spreadsheet above using Excel’s built in Pivot Table/Chart functionality. It’s an amazing little feature that allows you to create very insightful charts, simply by dragging and dropping your columns. If you’ve never heard of it, I definitely suggest you check it out!


So, aside from getting a great boost in motivation from seeing people play our game, what does this data tell us?

Player Engagement


User play data

User play data


  1.  Most don’t play much: From the usage chart it’s pretty easy to see that most people will play a handful of times upon first download and then won’t pay much attention to it again. (We would see users come back briefly after we pushed OTA updates to their phones)
  2. A few play a lot: We also see a much smaller percentage of users who play a TON. From our limited group of testers, we saw the five most frequent players made up about 50% of the play volume. In my mind, this is OK, and mimics how many apps do in the market anyway.
  3. Not too sticky: On days we updated, we saw play counts between 300 and 600 plays per day, spread across ~20 users. However, once we stopped updating, the play count dwindled down to just under 100 plays per day.

What does this information tell us?

  • That we managed to get about a quarter of our players playing a LOT. In my mind, that’s a pretty solid number
  • We do lose players as time passes from a new update. This tells me we’re not engaging our players, so we need to improve our ‘stickiness’. Perhaps adding medals/achievements that players can work towards will help that.

Store Purchases


Charts showing the more popular items purchased in the storeCharts showing the more popular items purchased in the store


  1.  Not all items are created equal: With six items per category, it’s clear that not all items were even attracting people to buy them. For example, only half of the shoes and hands items were being purchased, versus a fairly even purchase distribution in the glasses category.

What does this information tell us?

  • Obviously, some items were just not interesting enough to warrant a purchase. We can use this data to remove the unpurchased items and go back to the drawing board
  • This information is even more useful when you’re building a real store that people may be spending real money on. Ideally, you want to make sure that all of your offerings are being purchased — otherwise, you’re just wasting space

Summary TL;DR – you should definitely be tracking your users! Why?

  1. It’s rewarding to see players logging on and playing your game
  2. It gives you actionable insight into player behavior, allowing you to focus your development efforts on the things you think will maximally improve your game’s chance at success

Little Things – Game Score Screen

I’m going to start a series of “Little Things” posts, a bunch of (hopefully) short articles on little graphical things to help juice up a game.

I’m working on animating a game score screen today. My requirements are as follows:

  • Simple
  • Easy to understand
  • Extremely satisfying

Here’s a static mock-up of what I had in mind.

I've actually gotten rid of the long shadows since I made this screenshot so you can ignore that.
I’ve actually gotten rid of the long shadows since I made this screenshot so you can ignore that.

In Fishy Business, your performance is measured by the percentage of fish you catch in any given level. One star will be awarded for catching 40% or more, two stars for 80% or more and all three stars for a perfect score. Perhaps a bit harsh but hey, if recently viral games are any indication, the players want a challenge.

Research

So I went out in search of inspiration. My usual go-to for UI examples is Jetpack Joyride. (But if you have no such go-to game, game-patterns is a terrific place to start – thanks /u/adamvol!)

So I found a video of Jetpack Joyride’s score screen online and have saved you the trouble:

jetpackScore
Jetpack Joyride

What’s happening?

  • Stars fly off achievement with glittery particles (exciting)
  • Star slams into place and displaces entire window (satisfying feeling of weight)
  • New objectives sliding into place also displace the entire window

Ok, that’s my takeaway from Jetpack… how about another iconic example?

angrybirdsScore
Angry Birds
  • Stars simply appear while score counts up
  • Vigorous explosion of star particles erupt as each star appears (exciting)

One more:

Clash of Clans
Clash of Clans
  • Stars ‘pop’ into place – they appear, get bigger, and then shrink down to size
  • Bonus ‘falls’ into place (attention drawing)
  • There’s also a nice light emitting from behind the stars and bonus object (perception of value)

My creation!

Here’s what I came up with:

Fishy Business
Fishy Business

Elements that I liked and implemented here:

  • Stars with weight that displace the window (satisfying ‘thud’ when a star is earned – you can almost hear it)
  • Stars growing/shrinking when all three are earned (drawing attention to themselves)
  • All stars turn gold when all three are earned (perception of value)
  • Light is emitted after all three are earned (perception of value)

Overall, I’m satisfied with the end result. Let me know what you think in the comments below!

Tech Notes:

  • I created the mock-up by exporting a .gif from Spine, a fantastic piece of skeletal 2D animation software
  • Every element is drawn by hand with Inkscape. I’ve included a quick intro here if you’d like to learn

Game Art Tutorial for the Technically Minded [Part 1]

For programmers, art can be scary, but it doesn’t have to be! This game art tutorial outlines the basic workflow a more technically minded person might go through to create beautiful assets for a game.

In this post, I put together a tractor from Tractor Trample.

tractor

Here are the high level concepts covered:

  • Design workflow
  • Drawing & manipulating shapes (rectangles, circles, stars, paths)
  • Adding shadows

As you read/watch, try to imagine what your next step would be, and see how it compares to what I do. It will help to think critically about what’s being accomplished in each step, so that you can apply these concepts to anything you’d like to draw. I’ll be using Inkscape, a vector editing program, so it might be helpful to gain a baseline familiarity with it on your own, or with another one of my posts.

Here is part one:

I try to start with extremely simple shapes to form the initial outline of what the final character will look like and use images from real life/other people’s work to inspire how I detail those simple shapes. Below, I’ve outlined the steps I go through in part 1 in a little more detail:

  1. Inspiration
  2. Basic outline with basic shapes (or trace!)
  3. Add color
  4. Add detail

1. Inspiration

The number one obstacle I had to overcome when learning to draw was learning how to disconnect my mental imagery from actual objects. Don’t try and draw things from memory! Hell, if you’re just starting out – don’t be afraid to just trace! In fact, that’s what we’ll start off doing here today.

In this video I use Google Images for inspiration. Google images is good for when I know what I want to draw and want to start forming ideas of what I want it to look like in my head. For example, if I haven’t settled on an art style yet, google images can provide all sorts of different imagry for me to browse through. It can also be helpful if I need to be more specific in the object I want to draw, for example – I want to draw a tractor, but what kind?

Some of my other go to sites are as follows:

  • Behance – great for the ability to filter and fine tune your search
  • Designspiration – for when you’re hitting a wall, creatively
  • Game-Patterns – an excellent resource for studying recurring UI elements in games

2. The Basics

Now, a blank canvas is staring you down.  What next?!?! This step is probably the most intimidating but really, it’s the easiest! If you’re brand new to the art process I would suggest copying any inspirational art you’ve found and just pasting it directly into your document. And then trace. Yes, TRACE!

tractorbody

Tracing art or even real objects that you want to draw is a great way to force yourself to notice the little things. Zoom all the way into the pixel level, take note of the characteristics of the lines, the curves. Appreciate the colors used and shadows dropped to add depth. And start simple! Trace out the basic shapes that make up what you’re trying to draw, and move on from there.

tractorwheel
Don’t be afraid to trace in order to get the initial proportions right!

3. Colors

Once the basic shapes are in, I like to add color so that I’m not just staring at a bunch of flat black rectangles and circles. No need to get the colors perfect, we can always tweak them later. This step is strictly to help you see a rough outline of the image we’re trying to draw.

coloring
Adding some color so we know what the object is supposed to be

4. Details

Now we’re going to move from object to object, adding little details to make rectangles turn into a tractor chassis and circles into wheels.

The video covers how to alter paths to add some curvature to the tractor body, as well as how to manipulate the star tool to create a cool looking wheel with huge treads.

Converting rectangles to path objects allows us to deform the rectangle as we please
Converting rectangles to path objects allows us to deform the rectangle as we please
We manipulate the properties of a star to turn it into a tractor wheel!
We manipulate the properties of a star to turn it into a tractor wheel!

Finally, I add a thick black outline to the entirety of my tractor. Adding an outline to each object in your image can help differentiate each object when drawing in a flattened style, as we’re doing here. The outline also helps achieve a nice ‘cartoony’ feel.

outlining
No outline, outline. No outline, outline! Aren’t gifs fun?

Congratulations! You’ve got a reasonably finished tractor. In part two, we’re going to add a few more elements like a racing stripe and a steering wheel, as well as give our tractor a little attitude. Then, we’ll finish off with step five by adding shadows.

On to Part Two!

Game Art Tutorial for the Technically Minded [Part 2]

Time to dive into part two of this game art tutorial! If you haven’t checked out the first half, you can view the post here.

Enough formalities! Here’s part two:

4. Continued… Adding a few more little details

In part two, we finish up the fourth step by adding a few more details, namely – a racing stripe, the steering wheel and an eye to bring our character to life.

Drawing in the steering wheel with two simple lines
Drawing in the steering wheel with just two basic lines

So far, we’ve made a perfectly serviceable tractor. But since it’s intended to be a big focus of the game, I want to give it a little more personality. Quick tip – if you want to bring any inanimate object to life, give it a big ole pair of eyes and a mouth, if you’re so inclined.

eye1
Eyes and a mouth can really bring some personality to any inanimate object
eye2
But sometimes, happy and derpy just doesn’t cut it.

5. Shadows!

By the end of the last step, we’ve basically finished the final look of our tractor. Step five simply adds some shadowing to the tractor to help give it some depth. We go back and take another look at the inspirational images we saved off, and define a light source.

Once we have an idea of where we want light to be shining from on our tractor (top right in our case), we can draw in some shadows on the bottom left edges of our objects individually. Watch the video for more details on how to achieve this look!

shadownoshadow
Shadow… no shadow. Shadow… no shadow! Aren’t gifs the best?

Thanks for reading! This was my first video so I apologize for any rough edges. Please let me know if you have any questions as you follow the tutorial. I’ve included a download link to a .SVG file for the tractor here. If you do end up using this workflow, I’d love to see what you draw! Leave any creations, comments or questions below, and subscribe to our channel on YouTube if you’d like to see more!