Button Up!

by David King - Jan 2016

Overview

People

IP for Sale

Technology

Version Control - Git

Platforms - iOS, Android, Mobile, Tablets

In-App Purchases (IAP)

App-Store Rating

Gameplay

The Map Screen

Secret Paths

Graphical Style

Lord MountButton (LMB)

LMB’s inverse kinematics

First-Time User Experience (FTUE)

Chapter Themes

Color Palette

Level Editor

Map Generation

Level Organiser

Visual Level Editor

Chapter Postcard Editor

Facebook OpenGraph Objects

Multilanguage Support

Bitmasking Cells

Web Presence

Marketing Plans

Street team buttoneering

A Run-In With the Law

Merch options

Presskit

Analytics

Google Analytics - May 2015

Facebook Analytics - Dec 2015

FbStart Success

Parting words

Overview

Button Up! is a casual puzzle game for Android and iOS. It has 150 levels, a stunning adventure map, a visual editor, powerful tutorial system and unique gameplay.

People

Created by David King with help from Gavin McPhail (art) and Simon James (audio).

 

David King

oodavid.com

creator

Gavin McPhail
gavinmcphail.com

art

Simon James
sijamaudio.com

audio

Lord MountButton

IP for Sale

Real-life has caught up with us! We are unable to dedicate much time to Button Up! as our workloads increase. We agreed that it would be nice for Button Up! to have a future. The 2 logical options seem to be:

Before we go on to explain the game etc. know that we are open to offers about the game. If you have requirements about technology, format etc we can do some work before handing over the IP, ie:

Technology

Levying my existing javascript skills I was an early adopter of the GameClosure platform (GC). GC has been a pleasure to work with:

I’ve been very active in their community and keep an open channel with the GC developers via email and IRC. I’ve also contributed a few plugins written in C and Java. Once their Weeby.co platform is ready I will likely port the game loop over.

Version Control - Git

The game has been under version control since day zero, I used a variation of git flow for my method.

Platforms - iOS, Android, Mobile, Tablets

The game compiles for iOS and Android and has been designed to work on any screen size.

In-App Purchases (IAP)

We have implemented a lives system with the following rules:

  1. A failed attempt at a level costs 1 life
  2. Lives regenerate every 30 minutes
  3. Maximum of 5 Lives

There are 3 In-App Purchases, all relating to lives:

We also wanted to sell physical goods directly in the game, plushies and the like (more on that in the marketing section) but never gained enough traction to warrant this.

App-Store Rating

Early versions of the game received generally good reviews, but more and more 5-star ratings with each new release:

Screen Shot 2016-01-13 at 18.19.23.png

Gameplay

The basic premise is to thread buttons together, filling buttonholes and creating patterns. Originally based on the 1994 puzzle game Chiral by Ambrosia Studios, the puzzle style has changed somewhat and may be unique to the gaming world.

Using this mechanic, various game modes can be derived. For example:

perfect.gif

Create a perfect pattern by linking all buttons

yarn.gif

Collect yarn by creating patterns underneath

patches.gif

break locks then remove patches

We created the underlying game system to accommodate any number of “grid” games such as Match-3, Flood-It, 1024, Connect-4, Tetris etc. We decided to stretch our logical muscles in creating a new puzzle for Button Up! - the puzzle has seen a number of iterations and we’re very happy with it’s final form.

The Map Screen

This leads the user through 101 pre-designed levels.

   

see http://imgur.com/pbf8KGH for full sized image

The stars show the progress on the level, the colors represent the puzzle type:

Secret Paths

Unlocked when 3-starring certain levels. The idea is to encourage the user to 3-star every level looking for the secrets.

secrets.gif

unlocking a secret path

see http://imgur.com/XmSdkOI for animated gif

SMW3_00036.png

inspired by the Super Mario World secrets

The secret levels can be much more challenging than the main levels, or even use mechanics that have not yet been properly introduced.

Graphical Style

Our original theme was molecular - “Bond Atoms to create Molecules!”. Our tests showed that the scientific theme was an obstacle for many players. We removed this obstacle and kept the core game mechanics.

When toying with new themes and ideas we settled on buttons and threads for a number of reasons:

Lord MountButton (LMB)

Lord MountButton acts as narrator and guide. He adds humor and character to the game where there would otherwise be none. We wanted “something for the older lady” and decided that a colonial englishman would be just the ticket.

Well dressed, with button monocle and needle pointer, he’s quite the catch.

On a serious note, defining his character has helped set the tone for the language and themes used in-game. A few LMB quotes to demonstrate:

LMB’s inverse kinematics

Lord MountButton has some interesting inverse kinematics - that is, the logic that makes his “skeleton” move. Normally a model is rigged with bones of fixed length, a technique that can be looked up online.

However, we wanted LMB’s needle pointer to be telescopic so that he could easily point at any position of the screen, like so:

lmb.gif

see http://imgur.com/9sOgcA5 for animated gif

This needed a departure from the usual inverse kinematics equations. Without going into too much detail, there are two scenarios to consider:

  1. If we are pointing at something CLOSE BY - use normal kinematics
  2. If we are pointing at something FURTHER AWAY - stretch the needle and recalculate

the internal geometry of the forearm

This ability to point anywhere on-screen means that Lord MountButton is highly versatile - he’s used for:

We based LMB on Candy Crush’s Mr Toffee.

First-Time User Experience (FTUE)

LMB’s primary role is in First-Time User Experience. This is made up of:

mbA4Vm5.gif

see imgur.com/mbA4Vm5 for animated gif

The tutorial system is fully decoupled from the game loop - so “tutorials” can exist anywhere in the game, ie: the Map, loading screens, dialogs etc.

Chapter Themes

Before adding a new set of levels we discuss the basic chapter theme beforehand.

The themes and postcards for the first 6 chapters are:

Buttonshire

Tartan Tarns

Denim Peaks

Jungles of Jute

Ruins of (Lost) Yhan

Cotton Caverns

Knowing the theme up-front helps keep the process flowing, allowing us to work independently:

postcards are unlocked when completing a chapter

Color Palette

We created a fairly strict color palette to help keep the game uniform and easy to work with. While Gavin did the majority of the artwork there were occasions where I needed to quickly knock something up, for promotional images etc.

Here is our palette:

These sprite-sheets will show its influence on the game

resources-images-atoms0.png

Level Editor

The editor makes it easy to update game content. It runs a simple webserver with MySQL backend. It can run useful scripts to help manage repetitive tasks.

Map Generation

The artist has full control of the map:

Screen Shot 2016-01-12 at 16.58.23.png

Screen Shot 2016-01-12 at 17.05.58.png

Artist designs the map and places levels visually.

...the editor slices up the image for use in-game.

...and analyses level positions to create a structured graph with correct coordinates.

If new levels have been added to the map, the editor will highlight the gaps, ie:


1.png

0.png

Level Organiser

The organiser has several useful features:

Screen Shot 2016-01-12 at 17.28.04.png

As mentioned earlier, this uses the map data for the number-order and secret level positions.

Visual Level Editor

The level editor is a fully visual interface that makes it really easy to design and test new levels.

Screen Shot 2016-01-12 at 17.45.48.png

Chapter Postcard Editor

Postcards appear in-game after passing the last level of a chapter. They can be “collected” and shared to facebook - as such they require proper storage as OpenGraph objects.

Screen Shot 2016-01-12 at 17.54.39.png

postcards are added in the editor

Facebook OpenGraph Objects

The editor creates OpenGraph files for the main game elements: levels and chapters.

These HTML files have opengraph meta data about the object. This means that we can share more complex stories to facebook from the game, for example:

Screen Shot 2016-01-12 at 22.33.34.png

...this shows a preview, with a Lord MountButton overlay, a description and a link to the game.

You can see some example open graph data using the facebook debugger :

Multilanguage Support

The game can run in multiple languages:

iakDew9.png x0efGLx.png

Updating the language packs is trivial:

Bitmasking Cells

This is a little more technical than the rest of the document, but worth documenting.

We use bitmasking to describe the contents of each cell. I studied the Candy Crush assets and agreed with their approach.

An example board property describing the initial setup:

"board": [

    [ 2, 2, 8, 8, 4 ],

    [ 4, 8, 8, 2, 2 ],

    [ 4, 8, 8, 8, 4 ],

    [ 2, 2, 8, 2, 2 ],

    [ 2, 2, 8, 2, 2 ],

    [ 1, 2, 8, 8, 1 ]

],

We can see that:

Without going into too much detail, each cell has 3 image layers: Background, Contents and Foreground. By unmasking the cell we can get a value for each of these layers. You can read about masking on wikipedia, but here’s a super quick example:

Using the table below, we want a random button, inside a lock, on top of a patch. To get the value of this cell, simply add up the decimal column, so:

Of course, the level editor does all this for you, so there’s no need to memorise how it works.

GFX

Type

Name

Decimal

Mask

Special

Inactive

0

0

Contents

Empty

1

2^0

Contents

Random Button

2

2^1

Contents

Button 1

4

2^2

Contents

Button 2

8

2^3

Contents

Button 3

16

2^4

Contents

Button 4

32

2^5

Contents

Yarn

64

2^6

Foreground

Locked

128

2^7

Foreground

Block

2048

2^11

Background

Patch 1

256

2^8

Background

Patch 2

512

2^9

Background

Patch 3

1024

2^10

Web Presence

We have the usual online presence including personalised domain

Marketing Plans

We discussed the button theme in depth and concluded that it would be ideal for marketing campaigns. Here I will describe a few of our ideas, tests and outcomes.

Street team buttoneering

Here is a marketing plan that we tested, but never fully implemented. For a few hours of work we got lots of local hype and into the papers the next day, however I had to call the police to explain our machinations weren’t devious!

We still believe a variation of this could be successful. Here’s an excerpt from the devlog:

A Run-In With the Law

I came upon the idea that we could create "hype" with buttons. Literal, physical buttons that cost fractions of a penny to buy. So I went out and bought 3,000 buttons from PandaHall.com (China), the idea was a simple 2-stage flyer drop, and we thought it would be super-effective:

  1. Post a button through local letterboxes, hoping that people would think "hmm, someone has lost a button" and ask their family / housemates if it was theirs. Interest piqued.
  2. A few days later follow up with a flyer: "Lord MountButton has lost his buttons!" - baffling question answered!

Simon made the point that we shouldn't post small things through letterboxes in case a child or pet swallows them - good point Simon! So I thought I'd just blu-tac them to the letterbox instead. Didn't give it much thought and went out distributing... After doing 700 houses I get the feeling that I'm breaking some by-law, so cut my day short and go home.

I mention to Gavin and Simon that it didn't feel right, so we decided to keep an eye on Twitter, YikYak and Facebook to see what people were saying. Well, it worked. Sort of...

“Beth” summed up the whole rollercoaster in 4 tweets.

Turns out you really can't kill an idea - an 18th century myth remains in perpetuation that people still physically tag houses for burglary. Who would believe it?! Anyhow people were voicing their concerns along the line of - "Oh no! I'm being targeted for burglary by bandits from the 18th century... while they have mastered time-travel they are inexplicably incapable of writing down addresses on paper, or some sort of digital writing aid...”

There were loads of these, for £5 and a few hours work we managed to get in all the local papers...

That was fun. I had to ring the police to tell them I was a promoter, and that they needn't worry. No harm no foul.

So. Yeah. It's effective, we just need to work on the panic part. We never did get round to flyering for fear of a good pitchforking...

Conclusion? Buttons out of place, spark good debates! If we were to continue on this path of “pique and deploy” we would target public areas, starting with small buttons and getting bigger and bigger until a fever-pitch is reached. Then begin the second phase - “Lord MountButton has lost his Buttons! PLay Button Up!” etc.

Merch options

We wanted to link each chapter with a physical plushie to buy. We simply didn’t have the budget to have these designed and manufactured however with investment or traction we would likely still pursue this.

To help drive retention we toyed with the idea of giving a discount to anyone who could get a “perfect” chapter - 3-stars on every level.

The plushie characters would feature on the map and the postcards.

Presskit

A presskit is available on buttonupgame.com.

Analytics

When we first started the project I rolled my own crude server based on piwik - just to learn. Then switched to Google Analytics, and finally switched to Facebook Analytics. Our data is limited.

Google Analytics - May 2015

When we released the game to Google Play we started to see some really promising figures - 16,000 users in the first month! Sadly this data was frustrating - the game was popular in China. China is unusual in that Google Play is NOT their normal Android app-store, so the game was actually being distributed on different platforms. Which has a few issues:

Very frustrating.

 

this looks great... but what's this...

 

DAMN YOU CHINA!!!!

Facebook Analytics - Dec 2015

I updated the GameClosure Facebook plugin to implement Facebook Analytics. My pull request is quite old now and may be deprecated as I see you now have an “sdk v4” branch. Either way, I found the Facebook Analytics to be easier to use / implement than other analytic platforms. The driving force was the promise of using their Events to run re-engagement adverts on Facebook.

Because the game hasn’t gained much traction the dataset is small, but fairly representative of the behavior we’ve seen elsewhere. Players who get past the initial tutorials tend to stick around to 3-star every level. Facebook isn’t properly tracking installs and launches. This is currently only tracking iOS usage:

Screen Shot 2016-01-09 at 14.40.15.png

FbStart Success

Button Up! was accepted onto the FbStart Bootstrap programme in October 2015. This was a nice validation of our game quality and approach. The timing was sadly too bit late to be of use as I’d already accepted the offer of a Directorship with another company.

Nonetheless, I believe the FbStart benefits ($30,000 of tools, ads and mentoring) can be activated before May 11, 2016.

Parting words

I think we did a good job with Button Up! - we learned some new technologies, gained insights into the gaming world and created something rather complete. This endeavour suffered for lack of marketing budget or dedicated PR but was not without merit. Simon is working full-time at a games company, Gavin is still freelancing artwork and I have enjoyed my sabbatical wildly.