by David King - Jan 2016
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.
Created by David King with help from Gavin McPhail (art) and Simon James (audio).
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:
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.
The game has been under version control since day zero, I used a variation of git flow for my method.
The game compiles for iOS and Android and has been designed to work on any screen size.
We have implemented a lives system with the following rules:
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.
Early versions of the game received generally good reviews, but more and more 5-star ratings with each new release:
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:
Create a perfect pattern by linking all buttons
Collect yarn by creating patterns underneath
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.
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:
Unlocked when 3-starring certain levels. The idea is to encourage the user to 3-star every level looking for the secrets.
unlocking a secret path
see http://imgur.com/XmSdkOI for animated gif
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.
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 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:
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:
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:
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.
LMB’s primary role is in First-Time User Experience. This is made up of:
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.
Before adding a new set of levels we discuss the basic chapter theme beforehand.
The themes and postcards for the first 6 chapters are:
Jungles of Jute
Ruins of (Lost) Yhan
Knowing the theme up-front helps keep the process flowing, allowing us to work independently:
postcards are unlocked when completing a chapter
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
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.
The artist has full control of the map:
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:
The organiser has several useful features:
As mentioned earlier, this uses the map data for the number-order and secret level positions.
The level editor is a fully visual interface that makes it really easy to design and test new levels.
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.
postcards are added in the editor
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:
...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 :
The game can run in multiple languages:
Updating the language packs is trivial:
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:
[ 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.
We have the usual online presence including personalised domain
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.
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:
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:
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.
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.
A presskit is available on buttonupgame.com.
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.
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:
this looks great... but what's this...
DAMN YOU CHINA!!!!
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:
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.
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.