Archives

TapPhrase – the lowdown

TapPhrase is a free game developed solely by myself; art, original concept, heavy testing and design input provided by Kevin Craven. It’s available on iPhone, iPad and iPhone touch devices running iOS8+. This article describes the game, how it evolved, the approach, and thoughts for the future. If you want a quick taster – see this gameplay video.

What is the game?

Well, if the above YouTube video has failed, TapPhrase is a two dimensional ‘guess the phrase’ game, where you guess the phrase as quickly as you can to earn stars to unlock more phrases. The generic game concept is inspired by shows like CatchPhrase and other games like What’s the saying?

The stars can also be used to buy in-game helpers such as keys and trashcans. Keys place a correct letter in the slot, and trashcans delete a letter that isn’t required.

Every day you play TapPhrase you receive a free daily spin token, which allows you to play a huge wheel of fortune. This can reward you with free stars, trashcans or keys. You can also discover by playing (or replaying) levels one of four pieces of a wheel which crash-land into place, as seen in this video.

The overall feel of this game is supposed to be a 1920s cinema, embodied in the quirky tutorial with crackly Queen’s English voiceover.

Game motivation

I’ve been stuck in the narrow Microsoft world for a long time, developing desktop business applications. I’ve also dabbled with hybrid mobile business apps using HTML/Javascript and it all felt a bit of a ridiculous process. The promise of cross platform delivery typically sacrificed any benefit due to the complete inconsistencies with the host operating system UI principles. I’ve always wondered what the Mac development ecosystem felt like without being numbed by cross-platform libraries or layers. I’ve also a huge history of games and gaming. I developed many small games from the age of 8, on my Acorn Electron and through to University in 1994 I joined an international group called ANGLE, developing “Portals” – what we would call now a world travelling Diablo style MMO RPG. #wayaheadofitstime but it didn’t publish.

At first I wanted to do an iOS business app, but started to fall asleep. I found more enthusiasm for building a game, yet I needed a simple starting point, however, I realised I really suck at art, really. I wanted to make a game that I would enjoy playing and doesn’t take advantage of the user with harsh in-app purchases and adverts. And if we can, even inject moments of delight (e.g. in the video above you can see the tiles move freely at the end of the phrase like a spirit level, for no actual game reason!).

Luckily a friend (Kev Craven) had spent his evenings for the last two years drawing a common phrase and posting it to twitter/facebook. He’s had moderate success and I wondered if we could turn that into something bigger, so we got together and worked on delivering this to a mobile app to make it more interactive.

If you’re interested, the kinds of games I love and have played the list is endless but big highlights are Chuckie Egg, Elite, Cannon Fodder, Resident Evil, Max Payne, Half Life, EVE Online, Lord of the rings online, Broken Sword, Diablo, COD, SOCOM, X-the threat, Civilisation Flight Sims, Bejewelled, Starwars Galaxies,  Guild Wars, Forza, Project Gotham Racing, Syphon Filter, Tom Clancy’s Rainbow 6, Ghost Recon, Kings Road, and even FarmVille.

Fears & Rewards

What’s been the most frustrating point looking back is that both of us were probably too defensive and protective of our rights, IP and revenue protection. Even though our initial remit was to bring the art and fun of his concept to more people, and money wasn’t actually the initial driver, it’s only natural that when you formalise things, develop in-app purchases, look at competing products, and integrate advertising that you start to wonder ‘if this thing goes big, we want to maximise our rights and revenues and protect ourselves from liability’. 6 months after release and less than 50 downloads we’ve made less than $10 revenue, so we shouldn’t have worried so much. I went to great lengths, to limit liability by setting up a Limited Company, creating formal agreements, company bank account, learning basic accounting – all these activities are not making sense currently.

The biggest reward has been the positive reviews and feedback. It’s great hearing from people who genuinely love the game.  Its pretty awesome to say “Hey, have you seen my game” and their jaw drops at the fact you have released a game to the AppStore.  It’s also incredible when you get unsolicited feedback from people you know, I remember one colleague saying “Hey we all huddled round a table and played your game in the pub last night, it was good fun!”. – That’s a great reward.

There’s been one negative review, and my philosophy (thanks Kev) is that bad reviews is still publicity. I do however wish the review had something constructive and useful that could help me better the game, given that they spent part of their life they’ll never get back, but alas it’s a typical butt-hurt review.

Adverts & In-App Purchases

Both Kev and I hate ads and in-app purchases, but couldn’t see a way of recouping some kind of financial reward for our efforts other than to include them.

So we tried to make the game the priority, not our pockets.

Thus, full screen adverts happen every 5 minutes, and never appear during a level. Banner ads also only appear when the game level is finished. We’ve also incentivised advertising, so if you click on the adverts, you get some coins. We also decided that the user was quite entitled to play the game without a data/wifi connection, and didn’t nerf the game if we couldn’t get adverts (which some apps do).

As for in-app purchases, we thought it’d be rude not to have them as an alternate way people could donate some money to show their appreciation. We feel that if you like this type of game, you’ll probably never need to buy an in-app purchase. Hell, you can even find all the answers on Facebook if you look hard enough! But that would spoil your fun.

You can wait for your daily spin and share a failed level on Twitter/Facebook for more coins, so really, there’s little need to buy the in-app purchase unless you are really really keen – which means (we hope) you’re probably getting your money’s worth.

Menus are so 90s

One of the things I wish I’d have realised earlier is that structured menus are completely unnecessary in games.

I started off with the typical systematic breakdown of game functionality and created unnecessary barriers to start the game, to buy in-app purchases and reach other aspects of the game, such that some people didn’t actually know how to start playing!

Simulator Screen Shot 19 Sep 2015 12.56.38 Simulator Screen Shot 19 Sep 2015 12.56.44 Simulator Screen Shot 19 Sep 2015 12.56.58

We haven’t got rid of the menus, but we’ve made a few tweaks to hold a glass up to our intent; the first time you start the game, when you press START you are flung straight into a tutorial.

When you finish a game you can click on the traditional ‘+’ icons, to visit the store or spin the wheel, instead of being forced to navigate a maze of menus.

Simulator Screen Shot 19 Sep 2015 12.58.20

Ideally we’d like to get rid of all menus, and you should be able to perform all required actions (even visit the ‘about’ screen) from where you are.

Testing

Who likes testing? I don’t think anyone does. As you may have already read, my previous post about choosing iOS, focusing just on iOS allowed me to complete the game efficiently by limiting the matrix of testing of just one platform. However, I don’t have lots of devices, and the most important thing I learned is….

Not everyone does what you would do.

This isn’t just about the way you play the game, but the way you use the device. E.g. do you like to play your own music or have your device on silent? Do certain apps send push notifications which can disrupt yours? Do you have low memory conditions? Are you always switching between text messages or other Apps, what does that do to the experience. This led me to make sure that TapPhrase doesn’t stop your music, that you can play your own, that your audio settings are respected, and that the App behaved as users would expect it to.

The top tip here is, get it tested by humans that aren’t you.

I also found valuable feedback on reddit, where users helped provide crash reports and gave me really honest opinions.  TapPhrase is currently crash free because of this.

Art work and music

Most of the artwork is hand drawn by Kevin, but some of the early art wasn’t. I hunted high and low for music and art to get the concept going. I learned that free stuff isn’t really free, first of all there are licence conditions attached which you have to be really careful about, and can cause a burden to your processes; secondly you spend a lot of time wading through rubbish to find something of good quality. I’ve written before about Free and Open Source Software, and will be writing more about this soon.

I spent a long time finding the right music and worrying about licence agreements of code and assets. – Necessary precautions in todays litigious world.

Marketing
Obviously there’s a Facebook and Twitter account, but apart from that, the following marketing antics have been employed (to very minimal success).

  • Having a orchestrated marketing plan of what to do every hour after release for the next few days.
  • Tweeting those who helped/inspired the game creation. This exposed me to about 100k eyes.
  • Tweet and mention the authors of the FOSS content you’ve used – that’s nice for them and potentially good for you too.
  • Enter discussions around the topic of your game or similar games and subtly include your game.
  • Engage with the online discussion forums to get early feedback on your game.
  • Submitted to game review sites (no luck).

Indicating that either TapPhrase actually sucks, and everyone is being nice to us; or, this is a heavily saturated and competitive market with fewer customers than we’re told. Alternatively I’m just bad at PR!

What I’ll need to do soon is hook up the App-Preview video and release some fixes for iOS9, plus Kev’s working on a high quality video we can promote through Facebook or Twitter.

We do get requests to port the game to Android and Windows Phone, but speaking to other developers, they consider about 200k downloads to be the point where they’d consider it. #notthereyet

Historical graphics

TapPhrase didn’t always look this pretty – check out these early screenshots!

Screen Shot 2015-09-19 at 13.29.03 Screen Shot 2015-09-19 at 13.29.18 Screen Shot 2015-09-19 at 13.29.33 Screen Shot 2015-09-19 at 13.29.50iOS Simulator Screen Shot 2 Jun 2015 18.30.55

And check out some of the designs and discussion boards we used to communicate needs/ideas.

dimensions 001 ShowTimeFeedback1.001 TapPhrase.Screen discussions.001

And here’s two HUGELY significant graphics….

The first time the new logo is used to represent the game.. Gave us a massive boost.

IMG_4927

The first approved submission to the App Store!

Screen Shot 2015-06-06 at 10.51.46

The unusables

There are a number of TapPhrases we couldn’t use, for instance a picture of the band KISS is used twice, but we didn’t want to even get into the legal wrangling of that one. There are about 25 TapPhrases whose answer was too long; more than 24 letters (3 rows of 8). For instance, here’s one of my all-time favourites..

CROUCHINGTIGERHIDDENDRAGON

(Crouching Tiger, Hidden Dragon)

As you progress in TapPhrase, you’ll are able to unlock a pack of full colour TapPhrases – a rare stint where Kev wanted to spice the images up a little.

We might put a few of these unusables in the game at some point, if it becomes popular.
How long did it take to make?
Well, given Kev created around 750 TapPhrases, (609 in the game), we can estimate that the base effort is around 750 hours.

Then we include all the icons, movies, rework, curtains, the EPIC wheel of fortune, discussions. His contribution alone must be over 1000 hours.

Mine has been pretty much nearly every free minute of my lunch break, most evenings and weekends (the fiancé works some weekends, enabling this), I even took a week off work to move the game forward. So probably about the same as it’s taken a year to date, so over a thousand hours and about £1000 to get the MacBook + subscription to Apple’s developer programme.

In the process I’ve learned how to use a Mac, Xcode, crash log analysis, performance profiling, the App Store/ITunes Connect, objective C, and SpriteKit + supporting frameworks. The hardest bit has been to integrate with the Apple in-app purchase mechanism, it’s much harder than it should be and the documentation is quite misleading or poor. Audio was much easier to implement than anticipated, and so was social sharing and adverts.

I’ve also been giving back to the community on stack overflow and blogging topics.

Thanks

TapPhrase wouldn’t be possible without friends, family, understanding partners, work colleagues, the friends at Kev’s Church and the randoms on reddit. But I’d especially like to thank the Beta Testers as captured below in an early tweet. But a special mention should go to our biggest fan , who eagerly awaits all level packs and retweets, shares, comments, added a review and even provided crash reports.

Screen Shot 2015-09-19 at 14.04.22

The next time you see someone trying to share or tweet or post about a game, help them. It’s hard to get noticed!

My SVG Notes

SVG (Scalable Vector Graphics) is pretty awesome, especially so for 2d flat-look icons in your applications, or as clipart in your presentations.

I’ve recently been doing just that, using SVG for flat icons in a mobile app; and compiled some personal notes and links you might find useful.

 

Compatibility

We are now at the point where you’d be hard pressed to find an Internet Browser that can’t do the SVG dance.

CanIUse.com shows us what’s compatible or not.

Basic Usage

Craig Butler wrote a nice short overview of the different ways you can embed Scalable Vector Graphics into your web page. I’ve provided some more links later in my blog which expand on those methods.

 

My notes on SVG-CSS backgrounds

If you find that you have to use SVG in a background you may be faced with a bit of a shocker – you can’t easily change the colour or rotation of the SVG element!

Luckily you can specify the background size (CanIUse, W3C).

.mybackgroundclass
{
background-image: url('xxxx.svg');
background-size: 24px 24px;
background-position: center;
}

However, the colour is taken directly from the SVG file. So if you need a different colour you either use an SVG editor (see later) or edit the SVG as a text file and fill in properties like stroke=”red” fill=”red” as attributes in the required element. See this tutorial for more details.

Rotation can also be a pain when using background SVG images. If the SVG image isn’t already rotated how you want it, you’d have to either

  • edit the SVG with an editor to rotate it and re-save,
  • rotate the HTML element that is used for the background SVG,
  • in the SVG file, add an attribute to the drawing element you require: transform=”rotate(-45 100 100)“, where the parameters are (degrees, x rotation point, y rotation point). See this example.

 

 

Editors

I’ve tried google’s on-line svg-edit, and for quick jobs it’s really handy, but a little buggy (had to press cancel while loading to get the SVG to load!)

I’ve not tried the following editors, but they looked very promising.

Inkscape

Janvas

http://www.smashingmagazine.com/2008/12/05/20-vector-graphic-editors-reviewed/

http://en.wikipedia.org/wiki/Comparison_of_vector_graphics_editors

Unless the editor already supports it, you may want to optimize your SVG afterwards.

 

More Tips and Tricks with SVG

http://css-tricks.com/using-svg/

Jenkov.com SVG tutorials

W3CSchools SVG reference

 

SVG Icon/Image Resources

Here are a selection of Icon packs with commercially permissive licences. Don’t forget to read licences carefully before using, and attribute the original sources in the manner they state.

 

Open Clipart

http://openclipart.org/may-clipart-be-used-comparison

http://openclipart.org/share

Batch

Custom MIT style licence, prevents re-hosting or selling the ‘set’ of icons.

http://adamwhitcroft.com/batch/

 

Zurb Foundation Icons

Has no explicit licence, but indicates free.

http://zurb.com/playground/foundation-icon-fonts-3

http://zurb.com/about

 

Icon Monster

This has a custom licence which is very permissive, but you can only use 50 icons.

http://iconmonstr.com/

 

ICOMOON

http://icomoon.io/app/#/select/library

They also do commercial packs http://icomoon.io/#icons-icomoon

 

METRIZE Icons

A MIT style licence

http://www.alessioatzeni.com/metrize-icons/

 

Open Iconic

MIT licence (svg and PNG)

Be careful, earlier versions of the Iconic packs were Creative Commons Share-a-Like which I believe the licences are ambiguous enough to not be suitable for commercial apps. There’s also a commercial version of this library. I found some scaling issues with these icons, and some required editing before they could be used.

https://useiconic.com/open/

 

A list of other Icon Packs

http://www.webresourcesdepot.com/30-awesome-and-free-flat-icon-sets/

 

Elusive-Icons Web Font

This is under the SIL OpenFont licence. I haven’t checked this licence thoroughly, but the intent is set right. However, I need to spend more time reading the specific EULA to ensure this is compatible with commercial software.

http://scripts.sil.org/cms/scripts/page.php?site_id=nrsi&id=OFL).

http://scripts.sil.org/cms/scripts/page.php?item_id=OFL-FAQ_web#e71fabc0

http://shoestrap.org/downloads/elusive-icons-webfont/

https://github.com/aristath/elusive-iconfont/blob/master/README.md

 

 

AnimPie – HighSchool Trigonometry comes in handy.

In my Open Source animated pie chart code, AnimPie.js,  I introduced a visual effect where the segments of the pie expand out so they can rotate between each other.

However, I was just extending the radius which meant equivalent pie slices become disproportionate. The effect can be extreme, where larger values appear tiny in comparison to smaller ones.

Here’s how I applied basic trigonometry and Pythagoras to solve the problem – keeping the arcs proportional.

 

Basic circle mathematics

First the standard equation of a circle and chord distance came in handy. I knew the radius, and I knew the angle of existing pie slices, but to keep the arc the same, I needed to know I’ve achieved it by measuring the chord ‘d’.

Math 101

The effect of just increasing R

Here’s what’s happening when we just increase R by 10, without reducing the angle. The chord is growing.

extendradiusarcgrows

How to calculate a reduced angle

My teacher taught me the following rhyme – I’ve never forgotten. Silly Old Harry Caught A Herring Trawling Off Alaska.

I took the problem out of it’s context – away from my pie example. This helped simplify what I was trying to achieve. I just wanted to get an angle knowing a radius and distance of chord.

howtogetnewangle

Math.atan() takes the (opposite divided by adjacent) value and returns the angle in radians – which we can then use.

 

How does this help?

Good question – obviously I do not have a right angle in my pie.

BUT I CAN MAKE ONE!

rightanglefromnowhere

The angle I’m looking for is twice alpha. Apologies for the lines not meeting up!

 

There you go kids – pay attention in mathematics lessons. Here’s the end result of the same pie we started with.

 

AnimPie.js – toe dipping into OSS waters

I’d just like to announce my first Open Source Software contribution, under the MIT licence – AnimPie.js.

You can see a more interactive demo in this fiddle.

Here’s An updated version

Do not be surprised if the code is a bit shoddy, I’m a C++ and occasional C# guy dipping his toes into the awful land of the un-typed, un-compiled JavaScript! I watched a video or two and Googled a lot.

 

Why did I do this?

I was at home thinking of all the wonderful software projects I could do to make my millions, but all of them were just BORING.

My head filled with visions of minority report style screens, and thought – I always do back-end or middleware.. I want to do something cool and visible, and a swirly pie chart thingy sounded pleasing yet simple.

After seeing a tweet by Jon Galloway, highlighting that even developers who have ‘finished’ something, fail to share it, and also that something doesn’t have to be finished to be valuable – I decided that I would just see what I could do in a weekend and put it out there. I also have seen my ex-colleague Steve Cooper pushing things ‘out there’, and wanted to join the OSS club.

This little library doesn’t include any library dependencies – by design. That may change, but there’s nothing like doing something from scratch to get to grips with the language.

Here’s some of the resources I used in the making of AnimPie.js.

ColorPicker.com

Design Seeds

Kuler

A colour trend article at Design Shack 

DevBridge’s JavaScript Best Practices

Math Open Reference (Parametric Equation of a Circle)

And of course StackOverflow.