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

About Nabil

Thanks for visiting! I'm a software consultant, rock climbing enthusiast and I like to draw in my spare time. I hope you've been enjoying our work so far, feel free to drop us a few comments if you see anything you like! (Or don't like)

One thought on “Little Things – Game Score Screen

  1. SCREENSHAKE !!!!
    No seriously ! I love screenshake ! Everyone should put screenshake everywhere ! screenshake is super awesome ! Good use of screenshake is almost unoticeable but add a lot to the experience ! Look at AAA game ! Every single one of them have screenshake ! You should also watch the talk “The art of screenshake” by Vlambeer’s jwaaaap !
    Juicyness in one word: “SCREENSHAKE” ! Also, they’re really easy to code !

    Good luck with your game ! #indieHighFive and don’t forget to
    Shake, Shake, Shake,
    Shake, Shake, Shake,
    Shake your game’s screen !