You Can Make An App 2014

e d y!
ak an a
M ps tod
s
apme
ga
You can make an
Everything you need from sketch to store!

S e ll y o u r o w n
a pp s o n t h e
iOS App St o re !
iOS 7
Create apps for

iPhone and iPad
easily
Make your apps stand

out with marketing tips
from the experts
Learn the pros tools:

Apples Xcode and
Unity for games
Go beyond iOS
make cross-platform
apps and games!
WorldMags.net
Make
the switch
from Android
Use gesture controls
O Move your contacts
O More secure
Every iPhone
feature explained
Get more from the Get started in iPhoto,

best App Store
iMovie and more!
Available at all good newsagents or visit
www.myfavouritemagazines.co.uk/computer
WorldMags.net
WorldMags.net
Welcome!
Its never been easier to make and

sell your apps Get started today
with our in-depth guides
ver since Apple launched the App Store for the

iPhone back in 2008, theres been a renaissance
in the idea of the bedroom coder: one person
turning a great idea into a mega-hit. Everyone loves
to download new apps for their phone or tablet,
experimenting with awesome new ways to be
productive or to have fun.
As popular as the App Store has already been for
developers, weve got no doubt that theres loads more
people with amazing ideas for apps who dont know
where to start. Thats where this guide comes in.
Well show you the tools you need to start making
apps and games right away, so you can turn your ideas
into reality. But its not just about code well take you
through the whole journey, from getting inspiration, to
the basics of good app design, to the tools you need to
plan and build your apps, to testing it for unexpected
surprises, to submitting it to the App Store and even
getting the word out to make sure people find it. We
look forward to seeing your masterpieces!
WorldMags.net
| 3
WorldMags.net
Before you even think about coding, start here!

6
Principles of app design
Xcode
Apples own toolset for iOS-friendly app creation
14
18
20
Building apps with Xcode

Create a simple app
Navigating between views
22
24
Dynamic tables with Data Source

Debugging: learn how code works
LiveCode
You can use plain English scripting with this software-building toolkit
28
32
34
36
38
Start making your own apps

Create a colour-picker app
Send and receive online data
Control your apps remotely
Make custom window shapes
40
42
44
46
48
Make a basic card database

Make a word processor
Make a fuzzy-felt game
Make an iOS font converter
Make a calcultor app for iOS
Unity
The cross-platform development facility for 2D and 3D games
52
56
58
60
62
Create a game in Unity

Setting up your game
Create a level of your game
Add materials and textures
Add a character and inputs
66
68
70
72
74
Move and animate the player

Flesh out your game
Track the player in the camera
Adding polish to your game
Making your game mobile
Design & Testing

Before you jump ahead with your big project, think about these elements
78
82
84
90
94
100
Designing and prototyping

Before you code: 10 user experience tips
Case study: A journey of invention
Create an iconic icon
Case study: Learning the fun way
Testing to perfection
106
112
114
120
126
132
Case study: Place your bets

Getting the details right
Submit your app to Apple
Case study: The physics experiment
Cast study: A world of word play
App Store optimisation and SEO
App Marketing
Follow these guidelines to get your app noticed and downloaded!
138
146
4|
The art of crowdfunding

Succeed in app marketing
152
156
Track your app sales

The App Hall of Fame
WorldMags.net
Got an ideaWorldMags.net
for an app? Daunted by the process? Use our
comprehensive guide to the tools, the development process,
and the marketing to create your own App Store sensation!
WorldMags.net
| 5
WorldMags.net
iStockphoto
MAKING AN APP | Design principles
Principles of app design

The most important part of making apps happens before coding
hen most people think
about apps, theyre usually
thinking about the finished
product the actual icon
on your iPhone or iPad, and all of the
functionality behind it. Its easy to fall
into the trap of focusing on the actual
building of the app, and start to write
code too soon, especially if youre from
more of a programming background
than a design one.
But its important to spend enough
time really considering what youre
planning to build. The best apps are
fully planned and designed before a
single line of code has been written;
in fact, the coding is then almost a
6|
formality. Here are a few important

things to think about when youre
turning an idea into an app.
Refining the idea

When we have an idea for an app, most
of us start getting specific very quickly.
We imagine how it looks, what its like to
use, and what features are available. We
do this automatically, and often without
taking enough time to really narrow
down what we want to make.
Its best to start with the big picture
the broad category that your app will
fall into. Is it a text editor, for example?
Or perhaps a game, or a fitness app, or
a musical instrument, or any of the
WorldMags.net
hundreds if not thousands of other

types of software people might want
to carry with them. Worrying about the
competition isnt something that should
be very high on your agenda pretty
much every type of app has been done
before, after all. The important thing is
whats different about yours.
The most successful apps are rarely
the most complex or feature-rich;
instead, theyre usually simple, focused,
and have a clear value proposition
an immediately obvious answer to the
question: Why should I download this?
Aim to trim the superfluous features
that you just might like to have, and
instead focus on doing a handful of
Design principles | MAKING AN APP

WorldMags.net
mind. By all means make the app that
you want to make, but remember that
youre a tiny minority of its audience (or,
at least, youll turn out to be).
Candidates for features that can be
excluded are often organisational (do
Every type of app has been done

before the important thing is
whats different about yours
Think clean: resist the temptation to put any more features than necessary on the screen.
things very well. That way, youll have
a way to distinguish your app in an
already crowded marketplace.
It can be helpful to ask yourself
the question: What is my apps unique
selling point? A feature is almost never
unique, but the way its presented to
the user can be. Similarly, its possible
to make an otherwise commonplace
type of app much more enticing by
appealing to a specific market.
The App Store has a vast catalogue
of apps, so its important to seek a
section of the marketplace where you
can make an impact. Maybe your app
is a calculator aimed at home-theatre
installers, or a notepad for dentists, or
a game that teaches molecular biology.
Theres always someone out there
who believes they dont quite have
the perfect app for their needs yet
so seek out those opportunities by
being specific about what you want
your app to actually do.
Once youve honed your apps focus
and target audience down to a fine
point, the next major step is to choose
which specific features to include.
Picking features
Our experience of desktop apps on
computers tends to make us assume
that its better to include as many
features as possible, and even to
advertise our apps based on plentiful
functionality. On mobile devices, the
reality is a bit different. People will be
using your app almost anywhere they
might go, and may not want to spend
time devoting their full attention to their
device. For mobile apps, the best

philosophy is to let the user get
something done quickly, and then
get out of the way.
The best mobile apps are designed
to be focused, almost to the point of
sparseness. Choose the two or three
main features you absolutely must have,
and spend your time making those
features as effective, efficient and easy
to use as possible.
Its very, very easy to fall into the
trap of thinking that theres a minimum
required set of features for each type
of app. A camera app must have filters
(several of them), and cropping tools,
and red-eye removal. A task list app
must have categories, and due dates,
and reminder alarms. Not only does
that mean more work for you, more
importantly it means more confusion
for the user. Instead, be ruthless about
cutting features, and be very careful to
prioritise whats left based on the needs
of the people who will actually use it.
The things to leave in are the features
without which your app just isnt useful
to its audience. These are usually
features that enable users to accomplish
one of their own tasks. The things to
leave out are the laundry list of standard
features that clutter up the apps user
interface and confuse the user.
A popular way to think about it is
that your app should be opinionated
it should demonstrate that there
was a careful selection process before
deciding what was included and
what wasnt, and that it was the users
opinion that was kept foremost in
you really need multiple lists?), or data

transformation (do you really need to
export in five different formats?), or
even sharing features (the most
common two or three are probably
enough). Ultimately, while we may be
attracted to lengthy lists of features, the
apps we keep on our own devices are
the ones that help us to actually get
things done, or entertain us, or let us
live our lives more effectively.
Designing the interface

While iOS provides a wealth of standard
controls which can be incorporated and
customised, theyre just the beginning
of thinking about how your app will
look and feel to the user. All but the very
simplest apps will have more than one
screen, for example, and a careful choice
of how to group, lay out and organise
functionality is even more important
than choosing which widgets and
colour schemes to use.
Its helpful to take your list of essential
features and rewrite them as tasks that
the user wants to perform, almost like
a flow chart. The most commonly
performed task (the most essential
feature) should logically be front and
centre in your app, rather than buried
behind more interface, which will only
WorldMags.net
Direct interaction can be

even more compelling
than using input fields.
| 7
WorldMags.net
Every app has already been

done, but theres always
room for one more.
serve to delay and irritate the user.

Consider each task separately, and
design it almost as an app of its own
within the main app. Think about
whether the task is necessarily a multistep process (like choosing a contact
and then a number or address in the
Contacts app), or something with a
single screen that the user wants to
manipulate (like a calculator). Its also
useful to consider whether there might
be more than one way to view data
(such as a day, week and month views
in a calendar), and how to get from one
task to another, if thats necessary.
The most common mistake when
designing an apps interface is to view
the problem as being how to fit the
features into the screen. If we pursue
Take your essential features and

rewrite them as tasks that the user
wants to perform, flow chart style
that approach, we end up with the sort
of mess often seen in desktop apps,
with icon-cluttered toolbars, lengthy
menus, and lots of scrolling. Instead,
our goal is to show the user as little as
possible while still allowing them to
easily and quickly get things done.
By thinking of our features as tasks,
and treating each as a (potentially)
separate scenario, we design for the
8|
human being using the device, rather

than from a functional perspective.
When in doubt, rely on tried and tested
constructs like hierarchical navigation,
bold and simple presentation, and
always making it obvious how to go
back to where the user just was, and
to cancel or undo an action.
In particular, when the interface
required to perform a given task seems
too complex, take this as a hint that the
functionality itself should be simpler
(deal with the most common case),
less customisable, or even omitted
entirely. After all, choice seems valuable
only until we have to deal with the
consequences of complexity.
Interaction design
While the interface is the appearance
of an app the look theres a
corresponding aspect of the user
experience that we must design just
as carefully: the feel or the interaction
model. Weve all used apps that look
gorgeous and do their job well but
feel awkward to actually use, and those
apps often end up being removed from
our Home Screens. Designing how an
apps interface actually behaves and
works involves psychology much
more than visual design.
iPhones, iPads and iPod touches are
objects that we interact with directly,
using our fingers. There are powerful
and pervasive expectations we have
WorldMags.net
about how objects behave in the real

world, and those expectations tend to
also be projected onto the virtual
objects on the screens of these devices.
Scrolling lists have inertia because
thats how we expect them to behave,
and animations speed up and then slow
down because this reflects how moving
objects behave in the physical world.
Violating these expectations is not only
inconsistent with other apps on the
device; it also feels wrong, or can create
the impression that the app is broken
in some way.
The philosophy to follow here is that
objects should be manipulated in-place,
allowing the user to directly tap, swipe,
drag, rotate and so forth. iOS controls
provide much of this for you (with
rotating date-pickers, tappable or
swipeable tickboxes, and so on), but
there are many more situations where
you might want to add some direct
manipulation instead of relying on
input fields. Real-world examples of
this might be choosing a location on
a map instead of entering an address,
reordering a list manually instead of
relying on controls elsewhere on the
screen, dragging items into (and out
of ) folders, and similar things.
Animation and physics

Two concepts that are integral to
making an app behave in an expected
and unsurprising way are animation and
physics. Animation can be extremely
useful as a subtle cue as to where things
came from, what theyre doing, or
where theyre going to. A selected file
physically flying into a chosen socialsharing icon is a powerful indicator that
something has happened, and that the
users intentions were met and all
without the need for alerts or status
messages. Moving screens in from the
right and out to the left strongly
indicates a horizontal hierarchy, giving
the user a sense of place (and also
an immediate clue about how to go
back up one level). Judicious use of
animation, while avoiding its overuse,
can be a huge boost to intuitiveness
and usability.
Animations are the what of
movement, and physics are the how.
In real life, moving objects dont just
suddenly spring into steady, uniform
motion: they must first overcome
inertia, gradually speeding up to their
maximum velocity. Its similar when they
come to a stop: they usually slow down
Design principles | MAKING AN APP

WorldMags.net
gradually, instead of abruptly and
magically freezing in place.
This idea of speeding up, then
moving at a fixed speed, then slowing
down is called a S-curve animation, or
ease in, ease out, and has become so
ubiquitous in all forms of animation
(both 2D and 3D) that moving objects
tend to look odd without it, unless
youre aiming to produce a specific
visual effect. iOS provides built-in
features for performing these sorts
of animations, and its important to
take advantage of them to make your
interfaces seem responsive and natural.
Usage scenarios
One of the main attractions of mobile
devices is that theyre with us no matter
where we are. Theyre not chained to a
desk or in a room at home; theyre in
our pockets or bags, available anywhere,
whenever we might need them. This
opens up a lot more situations where
apps can be useful, but it also means we
have to consider the physical needs and
environment of the user, as well as the
task they want to perform.
We cant assume, for example, that
the user is sitting down, or not in
motion, or can hear any sounds the
device is making. Instead, the user
might be standing at a bus stop,
walking down the street, in a noisy
restaurant, or even in a moving vehicle.
The users environment has a huge
impact on how your app will be used,
and whether itll be usable or not.
The most obvious limitation is
that your app will often be used onehanded, which has implications for the
spacing of controls, and the reachability
of interface elements with the thumb

of the hand thats holding the device.
Another consideration is that theres no
guarantee the user will be holding their
device in any particular orientation, so
its worth spending time thinking about
how your design will work in both
portrait and landscape mode, and
whether (in rare cases) it might be
better to prevent automatic rotation
regardless of the position of the device.
Ambient light and noise can make
interfaces very difficult to decipher, so
audio feedback shouldnt be the only
way to indicate that something has
happened, and text (as well as other
interface elements) should have
sufficient contrast from background
elements, even when viewed in dim
or extremely bright conditions.
Similarly, distraction is a very real
possibility, so on-screen information
should be brief, to the point, and not
A users environment
has a huge impact
on how your app
will be used
require sustained attention. If youve
ever tried to compose a text message
on a bus or train, you also know that
it can be very difficult to hit small
on-screen targets when your body is
moving so design your interface with
sufficient allowance for larger controls
and plenty of spacing. Put ease of use
before aesthetics every time.
Finally, its easy to forget that for many
of us, impaired attention, cognition,
visual acuity, hearing or motor control

are temporary inconveniences but there
are also many mobile device users with
permanent impairments.
All iOS devices have excellent
accessibility technologies built in,
including screen-readers, magnification
tools, hearing aids, Braille support, and
more but its up to app developers to
work with those technologies to ensure
every app can be used by everyone.
Dont consider just the ideal scenario of
a quiet, well-lit room, full concentration
and no impairment, because life doesnt
always work that way. If youre ablebodied, its worthwhile seeking out
the opinions and needs of users with
impairments to determine what would
be most helpful to them, because its
not always obvious.
The two watchwords of app design
are focus and empathy: focus on the
specific features that let your users get
things done, and make sure that priority
is given to their needs, comfort, and
above all the value of their time.
Simple interfaces make

for fewer mistakes.
QUICK
TIP
iOS itself
provides a
wealth of
examples of
different types of
app, including
list-based,
hierarchical
interfaces, grids,
and even apps
that mimic realworld devices. If
youre having
trouble finding
the right
interface, take
inspiration from
Apple.
Adapting your interface

Apps on portable devices should ideally support any
orientation the device can be held in, because after
all its up to the user to decide how to hold their own
phone or tablet. Consider how your interface might
adapt to the difference between portrait and
landscape. Its common to show an additional level
of data in landscape mode a messages or notes list,
for example but theres no rule saying that both
primary orientations have to show the same thing.
Summary views, or displays intended for sharing or
presentation, are excellent uses of landscape mode.
Portrait is well suited to reading large amounts of text,
or putting the users focus on a single item. Dont be
afraid to tailor each orientation to a different scenario
or use the difference to deliver different feature sets.
WorldMags.net
| 9
WorldMags.net
MAKING IT WORK | APP DESIGN DOS AND DONTS
1 Be useful immediately
Too many apps arent useful when

theyre first launched. Showing tutorial
information is one thing (and often a good
idea), but theres no excuse for the user being
confronted with an intimidatingly blank screen,
just waiting for something to be input. Aim to
show something the user can benefit from right
away, like assuming the current location in a
weather app. If your app requires user input,
pre-load sample data for the user to play with.
2 Be glance-friendly
Apps shouldnt need to be scrutinised

in order to be useful. Prioritise the information
that the user is most likely to want, and show
it prominently. If you can provide some value
even when your app is shuffling by in the
Multitasking display, so much the better. Your
apps interface (by default) should be actively
helping users, not passively just allowing them
to browse for themselves. Give weight, highlight
and prominence to what people probably want
to see right away.
3 Be the user
It can be very difficult to imagine how

others will use your app, even if you consider
yourself to be the primary target audience.
Try to balance the probabilities of what you
personally want the app to do, and what will be
useful in the general case. Remember that your
users want to get things done, not to see how
clever youve been. Make sure that the app
takes a back seat, letting users accomplish their
goals and then move on to something else.
4 Be forgiving
The only thing more valuable than the

users data is the users time and effort, and
theres no quicker way to anger and alienate
people than to lack respect for their effort. Undo
should always be available, no matter what the
feature might be, and it should be clear how the
user can undo, redo, cancel and go back at all
times. Consider keeping snapshots of data,
always confirm deletions (and allow undo
afterwards), and be resilient under poor network
conditions if your app needs to be connected.
5 Be open
No-one likes being locked in, because

our data belongs to us, not to a specific app
or device. Trying a new app is a gesture of
trust, and if the user ultimately decides to go
elsewhere, let them go without sacrificing
their work. Allow exporting (and sharing)
information, and let the users know that they
10 |
Even apps that mimic real objects benefit from clean, minimal design, with options clearly marked.
can always go away and come back again with
their data. Openness of this sort breeds trust,
and can actually make people more likely to
try your app in the first place.
6 Limit gestures
Gestures are an excellent way to

intuitively support common interactions,
but they usually shouldnt be the only way to
access critical functionality. Gestures arent very
discoverable (and people dont like reading
tutorials), and not everyone can physically
perform all gestures. Use them as a shortcut
or enhancement, and dont go overboard
with requiring multiple fingers.
7 Animate with care
It can be tempting to sprinkle animations

throughout an app, but what seems delightful
in a demonstration or on first use can quickly
become irritating and distracting in regular use.
There are also users who find motion annoying
or even nauseating, so best limit animations to
those that provide actual value by hinting about
whats going on in your app. Movement should
be for clarifying hierarchy, showing data flow or
getting attention, not for its own sake.
8 Wood and leather
Weve recently seen a trend away from

interfaces using elaborate virtual materials (like
metal, wood, leather and textiles) or resembling
real-world objects. Theres nothing wrong with
WorldMags.net
such skeuomorphic designs in themselves,

but be careful to consider whether theyre truly
the best way to display whats important to
the user: the features and the displayed data.
Visually complex interfaces often introduce
distractions, or imply functionality that isnt
actually there. Simpler is almost always better.
9 Room for one more
Its almost impossible to think of a

completely new type of app (though it does
happen from time to time), but dont be
discouraged. Even though most apps have been
done before, many times, theres always a fresh
perspective, a new way to present common
functionality, a more efficient interface for an
important task, or a new insight into what
features best suit a particular type of user. If
you think you want the app to exist, chances
are that someone else does too.
10 Be trustworthy
Its difficult to recover from a breach

of the users trust or comfort, so its better to
never get into that position in the first place.
Sending superfluous notifications about
non-critical matters (including ads for other
products), nagging the user to rate your app,
or sharing activity on social networks without
warning are all commonplace and extremely
irritating practices. People delete apps at the
least provocation, so make sure yours doesnt
give your users a reason to get rid of it.
WorldMags.net
The Ultimate Guide for
iPad
Make more of the worlds best tablet
all
For owners of
iPad models
with iOS 7

WorldMags.net
WorldMags.net
XCODE | Introduction
12 |
WorldMags.net
Introduction
WorldMags.net
| XCODE
Learn
Xcode
Every Apple developer will use these
powerful development tools, so lets
start learning our way around them
pples Xcode environment is vital for anyone making iOS
or Mac apps, and it packs in a full set of incredibly powerful
tools for that purpose. Xcode enables you to check your
code for bugs, to run through it slowly and, crucially, to
test it in a simulated iOS device, or to load it onto real devices. Well take
you through Xcodes tools, and show you how easy it is to start building
apps that have Apple-like interfaces by just dragging and dropping. Well
look at how you can pass data through different parts of your apps, too.
14
18
20
22
24

Create a simple app
Dynamic tables with Data Source
Debugging: learn how code works
WorldMags.net
| 13
WorldMags.net
XCODE | Getting started
Xcode is a free set of

tools from Apple
that gives you all
you need to write
Mac and iOS apps.

Get started with Apples app-development tools
SKILL LEVEL
Anyone can do it
IT WILL TAKE
20 minutes
YOULL NEED
OS X 10.9, an Apple ID
14 |
here are many great tools

available for creating apps
for iOS and Macs, but
Apple recommends its
own Xcode environment. This set of
tools provides everything you need
to start building, testing and releasing
apps. Indeed, this is the way Apple
creates its own software, so it doesnt
get much better.
If you dont already have Xcode,
you might want to follow the guide
over the page to get set up with your
first project. You dont need it to follow
along with the next few pages, but it
can help to have it at hand so you can
see for yourself what is being discussed.
Xcode is available as a free download
from the Mac App Store, so theres no
cost to getting started.
Xcode exists as both an app in its

own right and as a collection of tools.
There are far too many to cover here,
but well look at some of the more
important ones that well encounter
in this set of tutorials.
The first is Xcode itself. Strictly
speaking, you dont need Xcode to write
an app you can work with all the other
tools individually. Xcodes purpose is to
combine all these tools into an easier-
This set of tools

provides everything
you need to start
building, testing
and releasing apps
WorldMags.net
to-use interface: running your code

through a compiler may normally
require a lot of typing into the
command line, but Xcode simplifies it
down to pressing a button. It can also
provide you with more help, because it
knows about everything in your app. As
you write code, it can offer suggestions,
highlight errors and even provide you
quick access to Apples extensive
documentation library. An integrated
interface builder enables you to lay out
your apps UI by dragging and dropping
controls such as buttons and labels onto
a canvas. Once youve finished your app,
it helps you publish it to the App Store.
Next is the Objective-C language.
Computers may work in 1s and 0s, but
this is rather hard for humans to read
and write. Instead, most software is
Getting started
WorldMags.net
| XCODE
QUICK LOOK | THE XCODE INTERFACE

Navigators
These provide different views of your
project, from the files in your project to
the errors in your code.
1
Editor
Most of your work will be done in
editors, which enable you to modify the
current file. There are many editors available,
each aimed at a different type of file.
2
2
1
Inspectors and Libraries

Inspectors enable you to view and
modify attributes of the item currently
selected in your editor. Libraries contain
reusable components such as code or user
interface controls.
3
Debug area
This is where you can control the flow of
4
your app while it is running and see any
output and error messages.
written in a programming language.

There are many languages out there,
each with its own pros and cons.
Objective-C is the language Apple
has adopted for its own development
environment and can trace its roots
back to the NeXT computers created by
Steve Jobs and his team after he was
ousted from Apple in the 1980s. Indeed,
Objective-C has been used to build
many important pieces of software,
including by Sir Tim Berners-Lee to build
the first web browser and server.
Writing in code
A programming language is similar to
a human language, but is much more
rigid in its structure. The basic construct
is a statement, which is like a sentence.
In Objective-C, statements end with a
semicolon. These statements are
collected into methods. A method is
a unit of code that can be called from
other code. A method can have data
passed to it and potentially return data.
For example, if you were building a
calculator, you might have an add
method that takes two numbers and
returns a single number. You could also
have methods for subtract, multiply,
A compiler takes readable programming code and converts it to 1s and 0s so that a computer can run it.
divide and any other operations your
calculation might perform. Finally, these
methods are grouped together into
objects. An object usually represents
some entity or concept in your app, and
contains methods used to work upon
that concept for example, a calculator
object that uses our calculation
methods to produce a result.
Along with the Objective-C language,
Apple provides a large number of
frameworks. These are collections of

objects that are designed for various
purposes. There are objects to represent
things such as numbers, dates and
strings (the programming term for text);
objects for UI controls such as buttons,
labels and tables; and objects that help
provide a basic structure for your app.
The next tool is the compiler, called
LLVM. This takes your code and converts
it back into 1s and 0s so the computer
WorldMags.net
ERRORS?
If you get any
compiler errors
or warnings (red
octagons or
amber triangles)
while following
these tutorials,
dont panic. Just
check that you
havent missed a
step or mistyped
some code.
| 15
WorldMags.net
XCODE | Getting started
FINDING
VIEWS
If you ever get
lost in Xcodes UI
or cant find a
particular view,
go to the View
menu in the
menu bar. The
options in here
enable you to
show and hide
any part of the
main Xcode
window.
can understand and run it. It does more

than just converting your code, though:
it will check your code and point out
any problems. It can even find bugs that
you might have missed yourself. Finally,
it can optimise your code so that it runs
faster. A tool that is related to the
compiler is the debugger, called LLDB.
A debugger enables you to see how
your code runs, even letting you step
through it one line at a time. You can
run both LLVM and LLDB from the
command line, but Xcode provides
simpler interfaces.
Getting around
The final tool is the iOS Simulator. As
the name suggests, this is an app that
simulates iOS on your Mac. You can use
it to see how your app will look on lots
of different devices, without needing to
own them all.
It doesnt completely replace the
need to test on an actual device, but it
allows you to develop your app without
needing to have an iPhone or iPad
constantly plugged in and perhaps
more importantly, without needing to
pay for a developer account to be able
to load your app onto such devices.
The iOS simulator lets

you run your apps
without needing to
have a device
constantly plugged in.
Like many big apps, Xcode can seem
quite daunting when you first open a
project. The Quick Look section on the
previous page points out what the
various parts of the UI are called, but
lets look at them in more detail.
On the left of the Xcode window are
the navigators. These present different
views of your project. Clicking on an
item in the navigator will open it in the
main editor. The important ones while
youre developing are the File navigator
(the first button), which shows all the
files in your projects, the Search
navigator (the third button), which
enables you to do a project-wide search,

and the Issue navigator (the fourth
button), which shows all compiler
errors and warnings in your project.
The centre of the window is taken
up by the editor. There are many editors
available, depending on the type of file
selected in the navigator. The two main
editors youll encounter are the code
editor and the interface builder editor.
You can have two editors showing at
the same time by displaying the
Assistant editor (View > Assistant Editor
> Show Assistant Editor). This second
editor can be made to show a file
HOW TO | CREATE YOUR FIRST XCODE PROJECT
1 Getting Xcode
If you havent already got Xcode, the first task is to download

and install it. The best place to get Xcode is from the Mac App Store. It
is a rather large download (over 2GB), so it may take a while on slower
connections. Once it has finished downloading, look for the Xcode app in
your Applications folder and open it. Follow any instructions to perform
the initial setup (this may require entering an admin password).
16 |
2 Creating a project
After Xcode has finished setting up, you should be presented

with a welcome screen. From here you can see a list of previously opened
projects on the right (which should be empty if this is your first time using
Xcode). On the left are two options for creating a project. For now, were
going to create a brand new project, so select the Create a new Xcode
project option. Alternatively you can create a project from the menu bar
by using File > New > Project
WorldMags.net
Getting started
WorldMags.net
related to the first editor by selecting a
mode from the breadcrumb bar. This is
useful when connecting controls in an
interface to code, since you can have
both files up side by side.
On the right-hand side of the window
are inspectors and libraries. The available
inspectors depends on the type of
editor. The code editor doesnt provide
many options, but the interface builder
editor has inspectors for editing the
attributes, size and connections of a
control. Below the inspectors are the
libraries, which contain reusable items
such as snippets of code and UI controls.
The debug area usually appears at the
bottom of the window. If you havent
run an app yet, it may not be visible. This
is where you can control the flow of an
app and see the data and output while
the application is running.
Finally, there is the documentation
window. This isnt part of the usual
Xcode window and can be brought up
by selecting Help > Documentation &
API Reference from the menu bar. This
window gives you access to Apples
extensive documentation library. The
sidebar on the left enables you to
browse through the documentation
3 Choosing a template
| XCODE
Use the documentation

window to learn about
Apples tools and
technologies.
JARGON
BUSTER
Like many big

apps, Xcode can
seem quite daunting
when you first open
a project
Xcode comes with a large selection of templates for setting up

a project. Some of these are for Mac and some are for iOS. Have a look
through some of the templates available. As you select each of them, a
description of the template will appear on the bottom-right. When youre
ready, select the Application template group in the iOS section. Were
going to create the project for use in the next tutorial, so select the Single
View Application template and click Next.
by section, or you can perform a search

using the text field at the top of the
window. Searching will provide you with
access to API reference and SDK guides.
This is only a brief overview of the
features and capabilities of Xcode, but
you should now be familiar enough
with Xcodes UI and what the basic
tools do to follow the tutorials on the
following pages. So enough explaining,
lets get on with it!
APIs (Application
Programming
Interfaces) are
methods you
can call to create
an application.
SDKs (Software
Development
Kits) are
collections of
APIs, generally
aimed a certain
platform. Xcode
comes with SDKs
for both iOS and
OS X.
4 Setting up a project
Finally we need to set some initial properties for the project. The
most important is the Product Name, which is what our final app will be
called. Enter Temperature Converter in here. If you wish to change the
Organisation Name or Company Identifier, do so. The company identifier
must be in reverse DNS format, which is a reversed web address (so bbc.
co.uk becomes uk.co.bbc, apple.com becomes com.apple). Leave the Class
Prefix blank. Finally, make sure Devices is set to iPhone. Now click Next
and youll be prompted to choose where on disk to create your project.
WorldMags.net
| 17
WorldMags.net
XCODE | Make a starter app
Create a simple app

Lets make a simple little converter app to get started in Xcode
SKILL LEVEL
tarting off, were going

to create a very simple
app that requires
hardly any code: a
temperature converter. It may not
seem much, but it will show the
basics of adding controls to an
interface and connecting them to
code. Were going to be using the
project we created in the last
section, so youll want to go back
and do that if you havent already.
The key concept well be looking
at here is the connections between
Anyone can do it
IT WILL TAKE
30 minutes
YOULL NEED
OS X 10.9, Xcode 5+
The key concept

well be looking at
here is connections
between our UI
and our code
our UI and our code. These fall into

two categories: Outlets and Actions.
Outlets are references in our code
to controls in our UI and enable us
to update or read data from those
controls. Actions are bits of code
that the UI will call when something
happens. For example, a button can
call an action when tapped. This is
the primary way in which a user will
cause some code to run in our app.
You may also note in the file
navigator that each code file has
two versions. Those ending in .h
are header files, which define the
methods that other objects can use
to call on this object. Those ending
in .m are implementation files, and
these are where we define what
those methods do.
In these tutorials well be using
only the .m files, so make sure you
always select them.
QUICK LOOK
WORKING WITH XCODE
Editor modes
Object library
These three
1
buttons enable
you to switch between
the three types of editor
mode: Standard,
Assistant and Version.
The main library

youll use is the
object library. This
contains all the controls
you can add to your UI.
Running code
View options
These options
2
enable you to
show and hide the
various UI panels
including navigators,
the debug area and
the utilities panel
(containing inspectors
and libraries).
WorldMags.net
The two buttons in

the top left let you
run and stop your app.
Next to this are two
options, the second of
which enables you to
try your app in different
simulators (including
3.5-inch iPhone, 4-inch
iPhone or iPad).
4
18 |
Make a starter app

WorldMags.net
| XCODE
HOW TO | BUILD A TEMPERATURE CONVERTER
1 Set up a workspace
Select the file Main.storyboard in the

file navigator. This should load a new editor in
which we can create our UI. We also need to
enable the Assistant editor, so select the second
editor option (see opposite for where these are).
Also make sure the library is visible by selecting
the third view option.
2 Add controls
Make sure the Objects library is visible

(the third library option). Were going to add
controls to our UI. Enter TextField in the search
field at the bottom of the library. Drag a text
field to the screen on our canvas. Now search for
button and add two. Name the buttons Celsius
and Fahrenheit by double-clicking on them.
3 Create an outlet
Make sure ViewController.m is visible in

the assistant editor (use the file navigation bar
to select it if it isnt). Now, right-click on the label
and drag to just below the line beginning
@interface in the code editor. Release the
mouse and a popover should appear. Enter the
name textField and hit Enter.
THE EDITOR
4 Create actions
5 Add the code
Right-click the Celsius button and drag to

just above the line @end . Release the mouse
and a different popover should appear. Enter
convertToCelsius: in the Name field and click
Connect. Do the same with the Fahrenheit
button, but enter convertToFahrenheit: in the
Name field instead.
Add the code in step 6 to the Celsius

button, just below the -(IBAction)
convertToCelsius:(id)sender line between
the curly brackets. Then add the code in step 7
to the Fahrenheit button, inserting it after
6 Add Celsius code
7 Add Farenheit code
CGFloat fahrenheit = self.textField.text.

floatValue;
CGFloat celsius = self.textField.text.floatValue;
This is the Celsius code to enter:
CGFloat celsius = (fahrenheit - 32) * 5.0/9.0;

[self.textField setText:[NSString
stringWithFormat:@%.2f, celsius]];
You can change the

orientation of the assistant
editor from the View >
Assistant Editor menu, which
may be helpful if youre using
a smaller screen.
-(IBAction)convertToFahrenheit:(id)
sender also between the curly brackets.
This is the Fahrenheit code to enter:
CGFloat fahrenheit = (celsius * 9.0/5.0) + 32;

[self.textField setText:[NSString
stringWithFormat:@%.2f, fahrenheit]];
WorldMags.net
8 Build and run
If you have done everything correctly,

you can now run the app by clicking the play
button in the top left of the window. It will
compile and launch it in the simulator. Try
clicking the label and entering a value. Click the
Celsius and Fahrenheit buttons to convert it.
| 19
WorldMags.net
XCODE | Multiple screens

Lets start building an app with multiple screens
SKILL LEVEL
Taking things further
IT WILL TAKE
30 minutes
YOULL NEED
OS X 10.9+, Xcode 5+
ime to introduce multiple

screens. One of the more
common controls
encountered on iOS is
the Navigation Controller; this is what
powers the familiar pattern of views
sliding onto the screen, and off again
after tapping the back button.
The template well use already has
the key components of a navigation
app set up. When we open the
storyboard, well see a navigation
controller with a master view
(containing a table) and a detail view
(containing a label). Its set up so that
tapping a row in the table will show
the detail view. It does this by
performing what is called a segue,
which defines how to transition
between views (for example, by
sliding it onto the screen).
Well be focusing on how to pass
data between objects. When you tap
a row on the first screen, well send
some data to the second screen before
it is displayed. What data we show will
depend on the row we tap.
To do this, well be accessing and
setting properties on our objects. Weve
already used these in the previous
Storyboards let you visually build your UI and see the flow of your apps screens.
When you tap a row

on the first screen,
well send some data
to the second screen
before its displayed
tutorial. Our textField outlet was a

property, and the text field itself had a
property called text. Properties enable
us to pass data between objects. We
can also pass data between objects by
passing it into a method. Well use this
data passing to find out which row was
tapped in our table iOS will supply it
to a method well create.
HOW TO | USE STORYBOARDS TO ADD NAVIGATION

KEYS
You can quickly
access the
different
navigators by
using the
shortcuts +1
to 8. You can
do the same for
inspectors by
using
++1
through 7
and for libraries
by using
+++1
through 4.
20 |
1 Create the project
Create a new Xcode project by selecting File > New

> Project from the menu bar. Select the Master-Detail
Application template from the iOS Application group. Click
Next. Give the project a name and make sure Devices is set to
iPhone. Click Next and choose where to save the project.
2 Make a static table
Open Main.storyboard. Select the table in the master

view (youll want to click the area below the rows, otherwise
youll select them rather than the table). Open the attributes
inspector. The first option should be a popup saying Content.
Change this to Static Cells.
WorldMags.net
Multiple screens
WorldMags.net
| XCODE
OPEN
QUICKLY
3 Change table row style
4 Create segues
5 Prepare your code
6 prepareForSegue
Next, select the table rows: click one of them, then

hold and click the others. In the attribute inspector,
change the Style popup to subtitle. Now change the titles
and subtitles of each row to whatever you want by doubleclicking the labels and typing. Click off to stop editing.
The template provides a lot more code than we need,

so open MasterViewController.m, select all the code between
@implementation MasterViewController and @end
(not including those lines) and delete it. Now were ready for
a -prepareForSegue:sender: method.
A segue already exists for the first row in our table, but
we need to create segues for the other two rows. Right-click
on the second row and drag to the details view. When you let
go, a pop-up appears to select a transition type. Choose the
Push Selection Segue. Now do the same for the third row.
You can jump to

any file or
method in your
class (or the iOS
SDK) by using
only your
keyboard. Hit
++O to
bring up the
Open Quickly
field. Start typing
the file or
method you
want, select from
the list and hit
Return to open.
This is called when a segue occurs, and will contain

our custom code. Below the @implementation line, add:
- (void)prepareForSegue:(UIStoryboardSegue *)segue
sender:(UITableViewCell *)sender {
}
JARGON
BUSTER
7 Setting the title
8 Setting the detail item
Next, we set the detail views title to the title of the

tapped row. iOS tells us which row was tapped by passing it
in as the sender. In the curly brackets of prepareForSegue
add this code: [segue.destinationViewController
Finally, we to set the label in the detail view. On a

new line below the code from the last step, add: [segue.
setTitle:sender.textLabel.text];
and try tapping rows to see how the detail view changes.
destinationViewController setDetailItem:sender.
detailTextLabel.text]; . Run the app with the play button
WorldMags.net
iOS apps are

usually made
up of a series
of screens.
Storyboards
allow us to put
all these screens
on a single
canvas, so we
can lay out the
UI for each
screen as well as
setting up the
correct flow
between them.
| 21
WorldMags.net
XCODE | Create editable dynamic tables
Create dynamic tables

Lets make a more flexible, editable table using Data Source
SKILL LEVEL
IT WILL TAKE
30 minutes
YOULL NEED
The app were

building displays
a list of randomly
selected names.
e saw in the last tutorial

how easy it is to create a
static table. However, we
often want the contents
of our table to change as the user adds
and deletes data. On the next few
pages, well explore the concepts of
a Data Source, which can be used to
populate certain views and handle
editing rows. Well be starting from an
existing project in this tutorial. Step 1
on the opposite page tells you how to
download this project, but its worth
downloading it now, because some of
what well talk about refers to code
already in the project.
Quite often, we think of our code
as being the bit that is in control. We
are telling the app what to do. But
weve seen that we arent always the
one calling the shots. Other code, quite
often code that we didnt write, can
call our code and tell us what to do.
The Actions we encountered in the
first tutorial are one example; the
prepareForSegue: method in
the previous tutorial is another.
So far, we have told our UI controls
what to display, setting titles and text
field values. However, controls such as
tables work in a different way. They deal
with a lot more data, which is usually
dynamic in nature. As such, they need
a way that is fast and efficient to know
what data to display. Data Sources
provide the answer.
A Data Source is simply an object that
a control, such as a table, can talk to in
order to find out what to display. The
control is in charge of what data it
retrieves and when. It also allows for
GitHub has thousands of projects with publicly available source code that you can download and explore.
much more complex data sets for
example, a table allows you to group
rows into sections, which can have
headers and footers. Rows can also be
added, deleted or even reordered.
Table view
If you look at ViewController.m in the
project for this tutorial, youll see a set
of methods already implemented. These
are the required data source methods
Other code, quite

often code that we
didnt write, can call
our code and tell us
what to do
for a table. The first is tableView:num
berOfRowsInSection: , which returns
how many rows our table has. The
second is tableView:cellForRowAt
IndexPath: , which returns the view
to show in a particular row.
Before we go into the code, lets
look at how a table is structured. At
the root is the table view itself, which
can contain a number of sections.
Each section can in turn contain a
number of rows. We access a row by
using an index path, which holds the
22 |
WorldMags.net
section and row number. For example,

to access the fourth row of the second
section, our index path is 1.3 (we start
counting from 0, so the first row is 0,
the second is 1, and so on).
Our numberOfRowsInSection:
method simply returns how many
objects are in our names array (see
the Jargon Buster opposite for more
on arrays). We want a row for each
name we have.
The cellForRowAtIndexPath:
method is a bit more complicated. We
ask the table to dequeue a reusable cell.
Creating an object is usually pretty fast,
but when someone is rapidly scrolling
through a table it can actually slow our
interface down. A table view lets us
avoid this by keeping track of rows that
have scrolled off screen so that we can
reuse them, keeping scrolling silky
smooth. This method will give us a
reusable cell if one exists. Otherwise
well create a new cell.
Once we have the cell, we pull the
name for this particular row from our
array. We know which row we need to
get the name for, because we get sent
an index path object containing the row
number. We set the cells text label to
this name and then we return the cell
to the table so it can display it. On the
opposite page, well add the ability to
add, delete and move rows in the table.
Create editable dynamic tables

WorldMags.net
| XCODE
HOW TO | ADD, DELETE AND MOVE TABLE ROWS
1 Getting the project
Were going to be working from an existing project

for this tutorial. All the code we need has already been
written; it has just been commented out. In programming
languages, comments are something in your code that the
compiler does not put into your app. Usually these are notes
to yourself, explaining why some code works the way it does.
However, they can be used to temporarily disable some code.
The project we are using is hosted on a website called
GitHub. This is home to a huge amount of publicly accessible
code, available in a plethora of languages. Normally to
interact with GitHub you need to use a tool called git, but if
you just want to download a project to look around, you can
just download a zip file. Go to github.com/pilky/buildingxcode-apps and click Download ZIP on the right of the page.
Double-click the zip file. It will contain several folders, but
we need only the Dynamic Table one for now. Open this and
then double-click the Dynamic Table.xcodeproj file to open
the project in Xcode. Run the app by clicking the play button.
Youll see a table populated by some random names. At the
bottom are Add and Edit buttons. Clicking these wont do
anything at the moment.
Comments are useful for

reminding yourself why
you wrote a particular piece
of code and what its for.
2 Adding rows
Open ViewController.m. Look for the line //Step 2 Adding Rows . The lines below are commented out (and
probably coloured green). Select those lines (not including
the //Step 2 line) and hit +/. This will uncomment those
lines. Run the app and try clicking the Add button a few
times: new names should animate in.
Lets look at what this code does. The first line adds a new
random name to the end of our array. The randomName
method is implemented at the bottom of the file, but we
dont need to know how it works, only that it does. Now we
want to update the table to show this new content. We could
simply use the code [self.tableView reloadData] , which
would cause the table to refresh all its data, but we want
to have our new row animate in. To achieve this, were first
creating an index path object to represent this new row.
Remember, we start counting rows from index 0, so the
last rows index is one less than the number of names. The
second step is to tell the table to insert a row at this index
path with a certain animation. Were using the auto option,
which will choose the best animation for the inserted rows.
The next step is to allow deleting rows. In most apps,

swiping a row brings up a Delete button, which when tapped
will delete the row. Our table doesnt currently do that. Look
for the line //Step 3 - Deleting Rows . Select all the
commented lines below this and hit +/ to uncomment
them. Now run the app. Try swiping a row and then click the
Delete button. The row should animate out. Next go back to
the code in Xcode.
The method we uncommented allows us to respond to
editing changes in a table. The two main editing styles are
inserting and deleting. Because we wont be handling
inserting, we can just treat all calls of this method as a row
being deleted. This method will also help in the next step
when we enable table-wide editing, because it will be used
for any deletions done then. The method looks a bit similar to
our add method. The first line removes the name at the same
index as the deleted row. The second line works the same as
in our add method, except that it will animate the row at the
supplied index path out, rather than animating it in.
4 Moving rows
JARGON
BUSTER
An array is an
ordered list of
objects. Each
object in an array
is assigned an
index. The first
object is index 0,
the next index 1
and so on. An
array has a count
property that
returns how
many objects
it contains.
A table in edit mode allows users to re-arrange and delete rows.
3 Deleting rows
Finally, well add support for rearranging rows. In

order to move rows we need to switch to edit mode. Look for
//Step 4.1 - Enable Editing . Uncomment the line
below. This line toggles the editing mode. It works by getting
the current state (self.tableView.isEditing) , which will
either be Yes or No. It then inverts it using an exclamation
point (so Yes becomes No, No becomes Yes) before setting
the editing state to the new value.
Try running the app and clicking the Edit button a few
times to see it in action. You can even move rows around.
However, if you scroll the moved rows off screen and back
on again, youll see theyve reverted to their original states.
This is because we havent updated our names array.
Back in Xcode, find the line //Step 4.2 - Moving Rows
and uncomment the lines below it. This method is called
after you have moved a row in a table, giving you the old
and new row indexes. Our first step is to get the name being
moved by getting the name at the from index. We then
remove this name from the array, before inserting it at the
new index (unfortunately you cant just move objects in an
array). Try running the app again and moving rows. This time,
as you scroll, the names stay in the same order.
WorldMags.net
| 23
WorldMags.net
XCODE | Debugger
Learning how code works

Delve deeper into code by debugging it here we work on variables
SKILL LEVEL
IT WILL TAKE
30 minutes
YOULL NEED
heres a saying that a

programmer is only as
good as their ability to
debug code, so in this
part well look at how to use Xcodes
debugger. The purpose of a debugger
is to enable you to see what your app is
doing while it is running. If need be, it
allows you to take control of your codes
execution and watch what it does line
by line. The use of a debugger doesnt

stop at helping you to find bugs it can
be a useful tool in learning how a piece
of code youve never seen before works.
There is one aspect of programming
we havent yet talked about, even
though weve used it: variables. These
allow us to store data in a computers
memory. They are effectively boxes
which we can give a name to, and
whenever we use that name in our

code were referencing what is in that
particular box. Weve used variables to
store temporary values and to reference
data passed into a method. Knowing
the value of a variable at a particular
point is key in understanding code.
Thankfully, Xcode provides us with some
very powerful tools for viewing and
manipulating variables in the debugger.
HOW TO | USE THE DEBUGGER
1 Downloading the project
2 Setting a breakpoint
Well be using an existing project for this tutorial and

looking at how it works. The project is available on github at
github.com/pilky/building-xcode-apps (you may already
have this from the last tutorial). Open up the Debugging
folder; double-click Debugging.xcproj to open it in Xcode.
Open ViewController.m. The doSomething: method

is called when a button in the UI is pressed. Click in the
gutter, left of (IBAction)doSomething:(id)sender to add
a breakpoint. Run the app (click play, top left). When you click
the button, the breakpoint will kick you back out to Xcode.
3 Stepping over code
4 Continuing execution
TOOL
SCHOOL
Dont like
a keyboard
shortcut? You
can modify
shortcuts from
Xcodes
preferences, in
Key Bindings. It
can be helpful
to change Quit
from +Q
so you dont
accidentally quit
Xcode rather
than your app.
24 |
We need to learn how to step through code. Youll

notice one of our lines of code has been highlighted. This
represents the next line of code to be run. Theres a row of
buttons above the debug area. Click the fourth button. This
allows you to step over, taking you to the next line.
Sometimes, you want to jump the execution to a later

point in your code. You could just keep stepping over, but
that can take time, so why not skip ahead to a certain point?
Right-click on the [self otherMethod:image]; line.
Choose the Continue To Here option that appears.
WorldMags.net
Debugger
WorldMags.net
| XCODE
KEY
STEPS
5 Stepping Into methods
6 Viewing variables
7 Editing variables
8 QuickLook
Stepping over does not take us into other methods, it

simply executes them in one step. To go into a method and
execute it, click the fifth button above the debug area: the
Step In button. Now you can step through this method with
the Step Over button. Reaching the end takes you back out.
You can also edit the values of some variables. Hover

over the number variable again and double-click the popup
to edit it. Change its number to 20. Step over twice more,
checking the variable each time. Youll see that it now
modifies our new value. Note: this works only with numbers.
You can control

the debugger
using just the
keyboard. Step
over lines of
code by hitting
^ and step into
methods by
hitting &.
Restart the app (click play) and click the button in the
app to hit the breakpoint. Hover over the number variable. A
number will appear; we havent actually set the variable yet.
Step over and hover over again. It should now equal 5. Step
over again, watching how the variable changes.
Continue until the {self otherMethod:image]; line.

Hover over the image variable. The pop-up shows a number,
but if you click on the icon that looks like an eye, you can use
QuickLook on the variable to see the image it stores. This
works with most object variables.
THE END RESULT

So weve seen how we can step through some code,
inspecting (and even modifying) its variables as we go.
While this only scratches the surface of what the debugger
can do, it should allow you to search out other code and
learn how it works line by line.
These tutorials have been rather brief, just to give you
a taste of Apples tools and how they work. So if you want to
learn more and start writing apps of your own, where should
you go? The best place to start is Apples own developer site,
developer.apple.com, which has lots of resources for new
and experienced programmers alike. You could also try the
Stanford iOS development course, available on iTunes, or the
excellent Big Nerd Ranch books at bignerdranch.com/books
WorldMags.net
| 25
WorldMags.net
LIVECODE | Introduction
26 |
WorldMags.net
Introduction |
WorldMags.net
LIVECODE
Learn
LiveCode
This cross-platform development tool
makes it incredibly easy to put together
both simple and complex apps
earning to code with advanced tools like Xcode is absolutely
worth it, but when youre first starting to get a handle on
what kind of apps you might make, it can be daunting.
LiveCode is a different development environment, with its
own language but one thats extremely simple and easy to read, yet
still capable of making powerful apps. Our tutorials will introduce you
to LiveCode, and help you to quickly create a range of working, practical
apps, so you can see how versatile coding can be.
28
32
34
36
38
40
42
44
46
48

Control your own apps
Make a calculator app for iOS
WorldMags.net
| 27
WorldMags.net
LIVECODE | Get started with LiveCode
LiveCode is free and

easy to use perfect for
first-time app makers.

Software not quite what you want? Then build your own with LiveCode
SKILL LEVEL
IT WILL TAKE
15 minutes
YOULL NEED
LiveCode
Community Edition,
OS X 10.5.8 or later
28 |
Ever wanted to make your

own software? Got a
genius idea for a new
utility? Want a virtual gizmo
that does just what you want? Software
development is normally seen as being
incredibly hard and long-winded, but if
you pick the right toolkit, it doesnt have
to be. LiveCode (formerly known as
Revolution), is a software-building toolkit
thats both incredibly powerful and
surprisingly easy to learn and use. It uses
a plain English scripting language where
instructions are written in clear, logical
sentences, and by picking a few options
in a window, your work can be turned
into apps for (deep breath) the Mac,
Windows, Linux and Unix, Android and
iOS. And as if this wasnt good enough,
LiveCode is available as free, open-source
software. Yep, you dont have to pay

a bean to design and develop crossplatform software. We know this
sounds like it cant be true, but it is.
First, some basics. LiveCode uses a
traditional stack of cards concept for
everything you do. You put buttons, text
fields, graphic boxes and other items
onto a card, and the card is stored in a
document called a stack. Cards inside
a stack arent the same as pages inside
a document, but it isnt far off the mark.
Theres a Tools palette with the Run
and Edit tools the pair of arrow buttons
at the top. Use the Edit tool to select,
move and resize any item on a card, and
use the Run tool to see how things
behave in action. Add buttons, text fields
and other items by dragging them from
the Tools palette onto your card.
WorldMags.net
What gives a LiveCode stack its

interactivity and intelligence are the
scripts the instructions that make
things happen when some event such
as a mouse click or tap takes place. These
events are triggers that kick the relevant
handlers your scripted instructions
into life. And what could those scripted
instructions do? Well, practically anything
at all! The main limit really is your
imagination once youre up and
running, anyway.
The standard first project in practically
every programming course or training
book is Hello world making something
that displays those words when it is run
or a button is clicked. Thats a little boring,
especially since LiveCode makes this kind
of thing so much easier to do. Well do
this, but then well add a couple of twists
Get started with LiveCode |

WorldMags.net
LIVECODE
QUICK LOOK | AROUND THE MAIN TOOLS

Tools palette
The Tools palette contains
interface items that can be
added to a card, plus it contains
the Run and Edit tools.
1
Code Editor window

All script editing is done here.
2
The instructions are styled
and coloured as you edit the text.
LiveCode Dictionary
Contains everything thats
3
in the language; every
keyword, message, property,
control structure and more.
Inspector palette
Gives quick and easy access
to practically every property,
parameter and behaviour for every
item in a card, and for the card and
the stack itself as well.
4
to keep things interesting. First, lets look

at the simplest possible script, something
that beeps when clicked: a mouseUp
event handler with a single instruction:
on mouseUp
beep
end mouseUp
With the Edit tool selected, drag a button

from the Tools palette onto your card,
and then click the Script button in the
toolbar to open the items script. Because
its a button, it has an empty mouseUp
handler ready for you; just type beep in
that empty second line. Click the Apply
button, switch to the Run tool, and click
the button. When you release the mouse
(producing a mouseUp event) the script
runs and your Mac emits a beep. Of
course it does. Well, you didnt expect
it to speak, did you?
Actually, thats not such a bad idea.
Edit the script of this button again
the Code Editor window should still be
open and change beep to this instead:
revSpeak "Stop clicking me!"
(The revSpeak command tells the

LiveCode stack to speak whatever text
comes next.) Apply the change and then
click the button test it out. Now your
Mac really is speaking to you! Fun, but
lets take this a little further with our
Hello World exercise. Drag a Scrolling
Text Field from the Tools palette onto
your card, then go back to the Code
Editor window. (If its closed, switch to
the Edit tool, select the button and then
click the Script button in the toolbar.)
Change the script to the following:
on mouseUp
put "Hello Dave, how are you
doing?" into field 1
revSpeak field 1
end mouseUp
The scrolling text field you added is field

1, so thats where the text is put, and its
also what that revSpeak instruction
uses. You can refer to things by name
too, which can be very useful. Lets give
this text field a proper name and tweak
some of its settings. Switch to the Edit
tool, select the field, and click the
Inspector button in the toolbar. In the
Inspector palette, change the fields

name to Hal uncheck the Focusable and
the V scrolling box, and check the Lock
Text box. Then go back to the Code
Editor window and change the field 1
references to field "Hal" instead. This
wont change anything, but it means you
can have other text fields on your card
and shuffle them back and forth, which
changes the number, without getting
things confused.
The next step is to make our script
produce different responses at different
times of the day. To get the time, you
simply have to use the phrase the time
in your scripts. So if you put the time
into field "Hal" it will show you what
time it is, for example: 10:24 AM. And yes,
that is a working line of LiveCode script;
it really is that clear. So how do we get
the script to see if it is morning and say
Good morning or say Good afternoon
if it is later? Thats where a good old bit of
if logic comes in handy. Asking if the
time contains "AM" works: either it
does (its morning) or it doesnt (its the
afternoon). The simple way would be to
do this with two lines: if the time
LIVECODE
WORDS
If youre not sure
what keywords
do or you want
to know details
about a phrase,
the searchable
LiveCode
Dictionary is a
great resource. It
shows how
something is
used, gives
examples of it
being used in
scripts, and
provides links to
similar entries in
the language.
contains "AM" then put "Good

morning Dave" into field "Hal"
WorldMags.net
| 29
WorldMags.net
LIVECODE | Get started with LiveCode
STAND
ALONES
Building a
standalone app
is easy, but its
worth looking
at the options
provided in that
Standalone
Applications
Settings window.
Things here can
get ignored, but
keeping version
numbers up to
date can help
you keep track
of which is the
newest version
by checking
its Info window
in Finder.
and if the time contains "PM"

then put "Good afternoon Dave"
into field "Hal", inside the mouseUp
handler. This works, but theres a more

flexible way to do these if things using
an if-then-else structure across multiple
lines. Basically, it works like this: if
[something is true], then [do this], else
[do that]. Break it into different lines like
the following and you see the code
indented automatically:
on mouseUp
if the time contains "AM" then
put "Good morning Dave"
into field "Hal"
else
put "Good afternoon Dave"
into field "Hal"
end if
end mouseUp
This if structure can deal with more than

two options by adding another if-then
check after that else bit, but the switchcase structure is much better for more
complex logic. By the way, be careful
when assuming things will work: if your
Mac is set to use a 24-hour clock you
Standalone Application Settings is where you set up your app so it can be run on different platforms.
might not have AM or PM shown in the
time. Fortunately, checking the English
time rather than just the time makes
sure you always get the AM/PM suffix no
matter how the users Mac is set up.
Now lets turn this into a standalone
application that can be run by your
friends without having LiveCode
installed. First save your stack, naming
it Hello Dave.livecode and then choose
File > Standalone Application Settings

to see the options available. First, choose
the Linux tab and uncheck the option to
make an application for that platform
unless you want to, of course.
This window enables you to set up
the options for every platform: Mac,
Windows, Linux (and other Unix flavours),
iOS and Android. Theres just one hiccup
to note: the open-source version of
HOW TO | GET STARTED WITH LIVECODE
1 Beep
Start by making a new mainstack from the File menu. Thats your
new LiveCode document, which includes your first card. Go to the Tools
palette and drag any Button object onto your card. This is automatically
selected with the Edit tool, which is the second of the two arrow buttons
at the top of the Tools palette.
Click the Code button in the Toolbar to open the Code Editor window,
ready to add/edit scripts for the selected object. As a button, it has a
mouseUp handler ready to use. In the empty second line, type the word
beep. Click the Apply button, switch to the Run tool, and click the button.
30 |
2 Hello Dave
Add a text field to your card, then tell the button to put some
words into it. Drag a Scrolling Field object onto the card. Hover over the
items to see the descriptions. In code terms, this is field 1. Go back to the
Code Editor window and replace beep with these two lines of script:
put "Hello Dave, how are you doing?" into field 1
revSpeak field 1
This puts the quoted text into field 1 and then speaks whats in the field.
Click Apply, then click your button with the Run tool.
WorldMags.net
Get started with LiveCode |

WorldMags.net
LiveCode can be used only to make
open-source apps under a licence that
isnt compatible with the App Store. To
get your iOS apps onto the App Store
or to create a locked-down app for any
platform you need the commercial
version of LiveCode.
Back to the task in hand. Use the
General section of the Standalone
Application Settings window to name
your app, and then look in the Mac
section. Here you can assign an icon,
set its version and more, though it
doesnt need all these to run.
Close the Standalone Application
Settings window and choose File >
Create Standalone Application. Pick
where the thing is to be made, give it a
few seconds, then open the new folder,
wherever you chose to make it. Doubleclick the application icon and your Hello
Dave app springs into life.
Fun, eh? Also extremely simple. Quit
your new app and step back to the
LiveCode stack. Using the Edit tool, tidy
up so it doesnt look like such a random
pile. Next, well get this to run your
buttons mouseUp handler script as
soon as it opens. To do this well put an
openCard event handler into the cards
3 if-then-else
LIVECODE
The General section is where

you can name your app, add
a version number, and more.
JARGON
BUSTER
script. This means that when your app

opens, it opens the card, causing an
openCard event. This script runs when
that happens, doing whatever you tell
it to do. Lets send a mouseUp event
directly to your button to trigger its
own mouseUp handler.
First, choose Object > Card Script. This
opens the Code Editor window with the
cards script tab. Add this script, click
Apply, and the job is done. When the
stack is opened, the openCard script
The if-then-else logic structure helps your software make decisions

based on specific conditions. Weve used the Inspector palette to give the
field a name, then we refer to it by name in the code. The logic of this
code is straightforward: if something is true then do this, else do that,
finishing with end if, to tell the software to stop this evaluation. Finally,
the revSpeak command says whats in field Hal. You can change which
voice is used with another line. For example, adding revSetSpeechVoice
"Victoria" changes to the Victoria voice. Click Message Box in the
Toolbar, type revSpeechVoices() and hit return to see available voices.
runs, which tells the buttons mouseUp

script to run, which then does its stuff.
on openCard
send mouseUp to button 1
end openCard
Over the following pages, well look at

creating more sophisticated things in
LiveCode, including games and utilities.
Explore LiveCode, and try the online
tutorials at livecode.com.
Those camelCase
words you see in
scripts are
normal here.
When words are
joined together
to create the
name for a
message, it
keeps things
more legible if
the original
words are given
initial caps. When
reading scripts,
returnInField is
more legible
than reading
returninfield
for instance.
4 Standalone Application Settings
Once youve tested your work, creating an app is simple. First, go

to File > Standalone Application Settings to look through the app-specific
details such as the name, version number, custom icon and of course
which platforms you want to create for. If you have to use Windows,
now you can make your own software. Android apps can be made and
submitted to the various Android app stores. You can also create and test
your own iOS apps, but because the non-commercial version of LiveCode
doesnt allow you to release to the App Store, youll need to buy the
commercial version of LiveCode to take your iOS work to that level.
WorldMags.net
| 31
WorldMags.net
LIVECODE | Create a simple colour app

Easily make a little tool that does exactly what you want perfectly
SKILL LEVEL
IT WILL TAKE
30 minutes
YOULL NEED
LiveCode
Our little tool lets you

easily see the colour
values for any image.
Would you like to pick

colours from anything you
can see on your screen? Its
a handy ability, and while it
can be done with Apples Color Picker,
thats a little convoluted. Besides, its so
much more fun making your own app.
The steps here wont be hard to follow,
but you may understand things better
if youve run through the tutorial on the
previous pages.
To begin with, you need a new
LiveCode MainStack, the name for a
LiveCode document. For now, well stick
to just one stack (or window) in this
project, with one card. We also need a
field object for some text, big enough to
hold three lines at 60pt. Drag a Scrolling
Field object from the Tools palette to
the card, and use the Inspector palette
to name it info, untick the Focusable
setting, and tick the Lock Text setting,
so you cant type into it.
Next, use the Text menu controls to
set its contents to be Helvetica Neue
UltraLight at 60pt, and use the Inspector
palette to set the text height to 60pt,
too. While youre doing this, note the
names for the controls in the Inspector
palette. In practically every case, theyre
the same as the script language names
for the same features. For example,
textHeight is whats used to set the text
height from a script. Lets try that now.
In the Toolbar that runs underneath
the menu bar, click Message Box. This is
Creating a colour-picker app takes a fairly small amount of code, thanks to LiveCodes smarts.
a place you can run one-line or even
multi-line scripts without having to
create something in your stack to hold
them. Type set the textHeight of
field "info" to 60 and then hit the
Return key to run this instruction. As
long as you were paying attention
earlier and actually named the field
LiveCode is good
at maths, which
means you can get
it to perform some
complex tasks
properly, this does the text height
adjustment for you.
LiveCode has some very useful tricks
that make sampling colours surprisingly
easy. First, theres a built-in function
called mouseColor. In a nutshell, a
function is a bit of script that does
something and passes back the result,
and the job of this one is to tell you
the RGB value of whatever your cursor
happens to be over, no matter what
application youre pointing at. Try it: type
put the mouseColor into the
32 |
WorldMags.net
Message Box, move the cursor over

something, and hit the Return key on
your keyboard. The RGB values are
shown in the lower part of the Message
Box palette. Lets make our project do a
little more: it will set the background
colour of the card to the sampled
colour, and show the numbers too.
Well use an idle script to run this
automatically, but add a check so it only
actually performs when you hold down
the key. That way you can just let go
to freeze the sampling process when
you find the colour you like. These
instructions are stored in the cards
scripts rather than in a specific button.
Finally, LiveCode is good at maths,
which means you can get it to perform
complex tasks. What our utility does is
present the sampled colour in both the
8-bit RGB values and also the
hexadecimal equivalent, suitable for use
in web production. There are various
ways this can be done, including the
process of using div (which gives you
the whole-number result) and mod
(which gives you just the remainder),
but we get LiveCode to do most of the
work by using a one-line trick for this. If
this seems too much, dont worry: its
entirely optional.
Create a simple colour app |

WorldMags.net
LIVECODE
HOW TO | CREATE THE APP

put "#" into line 4 of field "info"
he utility were making doesnt have

buttons or other things to click. It has just
a field for some text, and a set of script
instructions stored at the card level. To open the
Code Editor window and edit the script of the
current card of your stack, choose Object > Card
Script. Once there, type this:
put format("%x",item 1 of it) after line 4 of field

"info"
"info"
"info"
When you put some data into a line of the field, it replaces
everything that was already in that line. When you put
something after (not into) a line of the field it gets added
to whats already there. So, the first line of code above
replaces any data in that line with the # symbol (+3),
and the rest add the format-converted data to the line.
Now, when the colour of the card is dark, its hard to read
the black text. It would be useful to have the textColor
(the colour of the text) change to white, or 255,255,255
in RGB, when the card turns dark. To find out how dark a
colour is, add up the red, green and blue number values. The
brightest possible is 765 (255+255+255), so if its less than
half that, its dark enough to use white text instead of black.
on idle
if the optionKey is down then
get the mouseColor
set the backgroundColor of me to it
end if
end idle
First it checks to see if the key is down. The

next line gets the mouseColor data and stores
it in a variable for us. A variable is like jotting
something down as a note to refer back to later.
The get the mouseColor line stores the result
in a variable called it. The next line sets the
backgroundColor of the card to the RGB value
stored in the it variable (the script is run at the
card level, so saying me here means the card
itself). Click Apply, and switch to the Run tool in
the Tools palette to try it. Nothing happens until
you hold down on your keyboard. While you
do that, your cards background changes colour
to match whatever you point at.
Next, lets add instructions to put the colour code into the
text field. The field has already been formatted, so when you
use the Message Box to put the mouseColor into the info
field it should appear in our chosen font. The data is in three
items, separated by commas. We can use this to put some
text and an item of the data into a specific line in the field:
if item 1 of it + item 2 of it + item 3 of it < 382

then
set the textColor of field "info" to "255,255,255"
else
set the textColor of field "info" to "0,0,0"
end if
put "Red" && item 1 of it into line 1 of field

"info"
put "Green" && item 2 of it into line 2 of field
"info"
JARGON
BUSTER
put "Blue" && item 3 of it into line 3 of field

"info"
Put these lines straight after you get the mouseColor in the
card script, and you see the RGB code presented in a slightly
more understandable form.
Now for the maths: converting the RGB (0-255) numbers to
hexadecimal, so you can recreate a sampled colour in a web
page. There are many ways to approach this, and the shortest
is to use the format() function, which converts any data to
one of many different encoding formats. Pass two bits of data
to this a code saying what format to convert to, then the
data to convert and you get converted data back. Here,
%x tells it to convert to hexadecimal, so thats the first part.
The second is that item 1 of it reference. Then do the
whole thing again with item 2 of it , then item 3 of it .
The LiveCode Dictionary has more details, if you like.
Concatenating
running multiple
things together
is done with the
& symbol. It joins
things together
without any
space between
them; put two
together ( && )
and you do get a
space between
the items, so
"this" && "that"
produces the
result this that.
This if structure checks whether adding the three items

in the it variable together gives an answer thats less
than 382. If the result is true (less than 382) then the first
instruction is performed, otherwise (or else in script-speak)
the second instruction is performed.
Finally, a handy trick LiveCode has is the ability to make a
window float above all others, even when LiveCode (or your
custom app) is not the foremost app. Again, this is simple to
achieve, so well add some sophistication. A stack, or window,
that floats above everything is called a systemWindow.
Setting the systemWindow property of a stack to true
does the trick, and setting this to false returns it to normal.
Lets add a new handler to the card script: mouseUp runs
when you click anywhere on the card.
on mouseUp
set the systemWindow of this window to not the
systemWindow of this window
end mouseUp
The phrase the systemWindow of this window

produces a result of true or false, depending the windows
current setting. So by setting the systemWindow to not be
this true or false result, we basically toggle this setting; if was
false, it becomes true, and vice versa. Essentially, weve used a
bit of logical sleight of hand to make it so that you can turn
our apps ability to float on top of all other windows on or off
simply by clicking its window clever, eh?
WorldMags.net
| 33
WorldMags.net
LIVECODE | Download and upload data

Use LiveCode to make your own apps that can upload to the web
SKILL LEVEL
IT WILL TAKE
30 minutes
YOULL NEED
LiveCode
Just a few lines of simple

instructions grab the
source of a web page.
Getting and sending data

around the internet can be
a useful trick to be able to
do in your own software.
Were going to show you how to grab
the content of an HTML file and extract
something from it for use in your apps,
and well also make a simple tool to
update a text file on a web server using
FTP. With this you could, for example,
create a tool that lets someone safely
update one single part of a website with
full confidence even if they have zero
technical understanding.
The URL keyword is used to refer to
a file, both online and locally on your
own computer. We use it to fetch the
contents of a web page, then take a
quick look at extracting something
from the results. Click on File > New
Mainstack, then drag in a Push Button
and a Scrolling Field object from the
Tools palette.
Fetching an HTML page is a very
straightforward process: saying put
Make software that extracts data from any web page what you do with it then is up to your imagination.
on mouseUp
put empty into field 1
put URL "http://www.billboard.
com/charts/hot-100" into theData
URL "http://www.billboard.com/
charts/hot-100" into field 1 does
if the result is empty
the trick (bear with our musical selection

for this tutorial), so select the button,
click the Code button in the Toolbar,
and add that to the on mouseUp
script of your button. If you want to
check for hiccups for example, if the
page isnt available you need to do
a little more, such as putting the URL
into a variable (variables are temporary
storage for keeping track of stuff see
part 2 of our series) and checking the
result to see if its empty (good) or
has an error (not good). Finally, if theres
an error, then tell the user what it is.
put theData into field 1
then
else
put the result into field 1
end if
end mouseUp
get lineOffset("<h1>", field 1)
Well show you how

to grab the content
of an HTML file and
extract something
from it to use
This creates a pile of HTML that
isnt useful to you, so heres a way to
dig through the contents and find
something within it. Click the Dictionary
icon in the Toolbar, and search for
offset . This tells you where something
is within some text; offset finds the
number of characters in, wordOffset
finds the number of words, and
lineOffset the number of lines. Lets
use the latter to find where the first
34 |
<h1> tag is in all that HTML code, so we

can grab anything in that particular tag.
The lineOffset function needs
two bits of information: the text youre
searching for, and the container to
search. If you get the line offset, the
result is automatically stored in the it
variable, ready for you to use when
you need to say which line you mean.
Put these two lines of code after the
end if in the above example to
extract just the line with the <h1> tag:
WorldMags.net
set the HTMLtext of field 1 to

line it of field 1
Setting the HTMLtext of a field to

something instead of just putting the
data into it strips out any HTML tags and
attempt to apply styles, if relevant.
If you have control over the web
page youre grabbing, you could
customise it so it supports what you
want to do in your app as well as what
you want to present in a browser. For
example, you could put custom tags or
tag elements into key parts of the HTML
to make it easier to find and extract
data. If thats not possible (maybe you
want to find something in a page you
dont control), you just need to find a
logical way to identify the things you
want within the HTML code of your
nominated page.
Download and upload data |

WorldMags.net
LIVECODE
HOW TO | SEND DATA OVER FTP
1 FTP, easy as 123
Being able to use FTP in a LiveCode project opens up

a world of possibilities this protocol is often used to upload
to and manage websites. For the following steps we assume
you have some form of FTP access, a URL and your FTP
username and password. Make sure you dont replace any
existing files, because you wont be asked for confirmation!
Use the ask command to get the user to provide the
FTP user name, password, upload location, and file name.
This opens a modal dialogue window with a text field for
providing the necessary data, and theres a variation that
shows the users input as bullets to keep passwords hidden:
ask password "Whats the magic word?" . Be wary:
using ask for this pops open multiple dialogues one per bit
of info and gets tedious, fast. Instead, use text fields in the
card layout. The user can add the info at their leisure and
your script can put it together without those annoying
dialogues all the time.
Start by making a new Mainstack, adding five fields, and
using the Inspector palette to call them name, password,
URL, file, and data. Make the first four fields one line high
and the data field much larger. Add a Push Button and click
Code (or Object > Object Script) to open its Code Editor
window. All the following code should be put between
on mouseUp and end mouseUp in this buttons code.
The repeat structure can be

useful for stepping through
repetitive tasks in your script.
Were not watching out for other errors such as incorrect

login data, but so far, so good. Next, a quick check to see
if the last part of the URL ends with a slash, meaning its a
directory. If thats been left out, then the script can fix that:
if the last char of field "URL" is not "/" then put
"/" after field "URL"
Basic error checking
To start with, your script should make sure the first

four fields arent empty, and if one is, the script process
should halt with a beep as a basic alert. This uses a repeat
structure, with a counter that automatically increments for
each repeat loop. Well track the incrementing repeat count
number in a simple variable (thats the letter x) and use it to
say which field number to check next.
3 Sending data by FTP
Then we need to build the complete FTP URL. This is

done by putting ftp://, followed by the user name, a colon,
the password, an @ symbol, the URL itself, and the file name
together, into a variable. It sounds convoluted, but thats the
standard structure of a complete FTP link.
repeat with x = 1 to 4
put "ftp://" & field "name" & ":" & field
"password" & "@" & field "URL" & field "file" into
theFTPURL
if field x is empty then

beep
exit mouseUp
end if
end repeat
Its not pretty, but this uploads whatever you type with no further fuss.
JARGON
BUSTER
Understanding
the LiveCode
language is the
key to success.
Use the LiveCode
Dictionary to
learn how
different words
work, click the
See Also links
to find similar
words, and
use the
Documentation
tab in the
Code Editor.
Finally, lets upload whatevers in your data field by putting it

into the FTP URL.
put field "data" into URL theFTPURL
If this doesnt work, try saying put theFTPURL . This

makes it appear in the Message Box where you can check
that the FTP URL structure is correct.
4 Sanity check
This process of putting something into that URL

creates a file, called whatever you wrote in that file field.
If the file already exists then what you put into it replaces
whatevers already there, so please do be careful! You should
make a new folder for these LiveCode FTP experiments, just
in case. This exercise doesnt go into file uploading or
downloading, although thats possible too.
WorldMags.net
| 35
WorldMags.net
LIVECODE | Control your apps remotely
Control your apps remotely

Create apps that can be controlled from anywhere online
SKILL LEVEL
IT WILL TAKE
30 minutes
YOULL NEED
LiveCode
LiveCode is a platform for

easily making your own
apps, including enabling
you to automate your apps
and run them remotely, without being
at your Mac. In this part of our series,
well show you how to set this up. The
final product will run without user input,
but for now well set things up using
buttons to trigger scripts as we work.
Begin by making a new Mainstack (File
> New Mainstack) and then dragging a
normal button and a scrolling field from
the Tools palette into the card. Name
the field data.
Select the button and click Code in
the Toolbar to open its script. After the
on mouseUp line, type the following
single line of code: load URL
"http://thehelpful.com/livecode/
remote/data.txt" with message
"allDone" This downloads a text file
Make an app that can show

and speak a message from
a remote location.
and returns an allDone message when

the download is done. This runs
asynchronously; it doesnt stop
everything while the action is done.
However, you also need a handler that
will be triggered by the message thats
sent when the download is finished. Our
message is allDone, so just type on
allDone and hit the Return key to
have the end allDone line appear
too. There are two bits of data included
with the allDone message: the URL of
the download and the status of the
attempt. Add two variables to the
opening on allDone line to grab these.
Well use tURL and tStatus .
When the allDone handler is
triggered, well check to see if tStatus
contains the word cached, meaning
This creates a script that grabs and speaks information from a remote location, once every minute.
that the download was successful. Put
the downloaded data into field data,
and then unload the downloaded URL
to clear the cache:
on allDone tURL, tStatus
if tStatus is "cached" then
put URL tURL into field "data"
unload URL tURL
end if
end allDone
We refer to whats been downloaded

as if it were a remote URL, but LiveCode
gets it from what it just cached. But
what if the download wasnt successful?
When tStatus doesnt contain cached,
the if line wont be true and it wont run
the lines that follow it. After the unload
URL instruction, add a new line that
says else , and then a line that says
put libURLErrorData(tURL) into
field "data". Yes, its really that simple
to list the error.

Type revSpeak field "data" in
a new line after you put the data into
field data, click Apply, and then click the
button to hear the text read out.
To run automatically when this opens,
go to the cards script (Object > Card
Script), make an on openCard
handler and add send mouseUp to
36 |
WorldMags.net
button 1 . Now, when the card opens,
a trigger is sent directly to your button.

Finally, why not make the button run
itself every minute? Just before end
mouseUp, add send mouseUp to
me in 60 seconds .
The problem now is that it will say the
same thing every minute. To stop this
you need to see if tURL (downloaded
data) is not the same as field data, and
only then use revSpeak. You can do this
by adding an extra if before the
revSpeak line. It should look like:
on allDone tURL, tStatus
if tStatus is "cached" then
if URL tURL is not field "data"
then
put URL tURL into field "data"
revSpeak field "data"
unload URL tURL
end if
else
put libURLErrorData(tURL) into
field "data"
end if
end allDone
Now your script is smart enough to

check to see if its the same as what was
already run. Peace at last.
Control your apps remotely |

WorldMags.net
LIVECODE
HOW TO | CONTROL YOUR MAC REMOTELY
1 Going further
You can do much more with the downloaded data

than just saying it or showing it. For example, you can use it
to tell the app itself what to do. Yes, really. This presents you
with what are actually quite extraordinary powers.
2 do
Lets run a LiveCode instruction thats stored remotely.

The file is data2.txt, so amend the load URL line accordingly,
then delete the revSpeak line and type do field "data"
instead. LiveCode will take whatevers in field data and run
it as regular code. The data can be more than one line, and
its important that its all valid LiveCode script or youll get
a script execution error. Dont include any on/end handler
lines, just the actual instructions. This example is based on
our first LiveCode tutorial on page 28: it says good morning
or good afternoon as appropriate. Try uploading instructions
to your own web space and setting your app to look there for
total control. You can even make your own uploader app
using the previous tutorial!
With a few additional lines, your app can run custom remote instructions, including AppleScript.
do as AppleScript
LiveCode can run scripts in AppleScript as well as its

own language, simply by changing the line we just showed
you to do field "data" as AppleScript . This means
getting your head around another language, but we have a
sample AppleScript ready for use as data3.txt. You can check
its contents by going to thehelpful.com/livecode/remote/
data3.txt in a browser. (Seriously, dont run a random script
without knowing what it contains.)
If you want the option of uploading regular LiveCode or
AppleScript code, youll need a way to tell when to do the
instructions and when to do them as AppleScript. The
simplest solution is to put the word AppleScript as the first
line in the text file, then check for that in your apps script. So,
instead of just do field "data" you need the following:
Now all you have to do is make sure your instructions work

as either LiveCode or AppleScript code, and you can control
your Mac remotely by uploading new data whenever you
like. You could, say, run an old Mac as a music controller and
drive it from anywhere in the house or anywhere in the
world. To hide the window you can use the line hide this
stack . Try this as an instruction in your remote text file.
4 Background operation
if line 1 of field "result" contains "AppleScript"

then
do field "data" as AppleScript
else
do field "data"
end if
JARGON
BUSTER
The do
command lets
you create new
scripts on the fly
to run in your
code, but its
easier to
assemble these
first in a field if
theyre complex,
instead of using
& or && to run
elements
together.
Add two lines in an applications info.plist to make it run as an agent app.
The final trick in this tutorial is to make your app

totally in the background, not even taking up space in the
Dock. This can be useful if you want to have your own utility
apps monitoring things for you without getting in the way of
normal operations. You can even create your own security
app to watch for unauthorised use of your Mac.
Once youre happy with how your LiveCode project is
working, go to File > Standalone Application Settings and
make sure Mac is selected. Turn off any other options, since
AppleScript isnt relevant on other platforms. Then choose
File > Save as Standalone Application to create the app. Find
this and right-click the apps icon. Choose Show Package
Contents, open the Contents folder, then open the info.plist
file youll find inside. (You may find the free TextWrangler app
useful at this point; get it from barebones.com.) Before the
</dict> line at the bottom of the document, add this text:
<key>LSUIElement</key>
<string>1</string>
This tells the app to run as an agent app, so it wont appear

in the Dock or the Force Quit window, or even show its own
menu bar. The Dock is an example of this kind of behaviour.
You can still quit your app by closing its window. See
bit.ly/lsuielement for details about these kinds of options.
WorldMags.net
| 37
WorldMags.net
LIVECODE | Custom window shapes

Ditch those rectangles and make LiveCode windows any shape you like
SKILL LEVEL
IT WILL TAKE
30 minutes
YOULL NEED
LiveCode
Custom window shapes

can take on any form,
including apparent
disconnected parts and
holes cut into objects.
LiveCode is an easy
software-creation tool
which can create apps
that do, well, practically
anything. In this part of our series, well
explore making a window into randomly
selected custom shapes no more
boring rectangles for us! and moving
it around the screen at will. Begin by
choosing File > New Mainstack to create
a new LiveCode project to work with.
To start with, lets look at creating
the custom window shape. This is
controlled, logically enough, by a
LiveCode property called windowShape.
Traditional windows (or stacks) have a
windowShape setting of 0, which means
it follows the normal operating systemcontrolled appearance. But if you have
an image in your stack that has some
kind of transparency mask, you can set
the windowShape to the ID number of
that image. The result: its clipped to the
visible parts of the image, whatever that
might be. If the image mask is 1-bit then
the window has a sharp cut-out edge. If
the mask is an 8-bit alpha channel one
something you might make as a
Photoshop layer mask before exporting
as a 24-bit PNG, for example then the
window and its contents will take on
the transparency of the graphic.
The image well use as our test is
going to be sourced directly from an
online location, thehelpful.com/
livecode/windowshape/1.png, although
you can use any other. First, drag an
image object from the Tools palette
onto your card and then use the
Inspector palette to name this logo.
Next, open the Message Box (click its
The windowShape property can be used to clip a window to any shape you like.
icon in the main toolbar), type the
following single line: put URL
"http://thehelpful.com/livecode/
windowshape/1.png" into image
"logo" and hit the Return key to run it.
This will get the image from the online

location and store it in the image object.
Select the image object and look in
the Inspector palette to find its ID
number, which is 1006 in our case. In
the Message Box type set the
Use any transparent

PNG to control the
transparency and
shape of your apps
visible window
windowShape of this stack to
1006 (or whatever ID number you
got) and hit Return, and the window will

be cut out using the transparent area of
the imported image.
Youll probably spot an immediate
quirk, though: the window cutout effect
happens from the top-left corner of the
window, as if thats where the image is,
even if it isnt. If you want the image to
appear properly cut out youll need to
move it so its topLeft corner is
positioned at 0 pixels from the left and
38 |
WorldMags.net
from the top edges. Lets add a script to

this entire card so that when you click
anywhere itll be run. Choose Object >
Card Script, and type on mouseUp .
When you hit Return the matching
end mouseUp will be added, so type
the following lines between them:
get the random of 10
put "http://thehelpful.com/
livecode/windowshape/" & it
& ".png" into theImage
put URL theImage into image
"logo"
set the topLeft of image "logo" to
"0,0"
set the windowShape of this
stack to 1006
Were having some fun here: this picks

a random number from one to 10,
building a URL to an image named that
number that weve uploaded. It puts the
referenced PNG graphic into the image
object, and moves it so its top-left (or
topLeft) corner is perfectly snug into
the corner of the window.
Finally, it sets the windowShape
of the stack to the visible parts of
the image, whichever random one
happened to be grabbed this time.
Not the behaviour someone is likely
to expect, which makes this fun for
confusing friends and colleagues!
Custom window shapes |

WorldMags.net
LIVECODE
HOW TO | MAKE AND DRAG CUSTOM WINDOWS
1 Going further
This windowShape trick is very cool, but theres one

wrinkle you need to know about: because youve trimmed
off the regular window title bar, you have no way to drag this
around your screen. To do this, you need to write instructions
that watch for the mouse being moved (a mouseMove
event) while the mouse is down, and move the window with
it under script control.
The keywords well use are: clickLoc , which is the
horizontal and vertical location of the click relative to its
window; screenMouseLoc , which is the pixel location of
the mouse relative to the left and top of the screen; and the
mouseDown , mouseUp and mouseMove events.
2 Global variables
To start with, when the mouse is clicked we make a

note of the clickLoc the distances in pixels from the left and
top edges of the window. We do this in a variable, but theres
one difference. Normally a variable exists only while the
handler the on/end script runs. When it finishes, the
variable and any data it holds are forgotten. To keep track of
it for later use, you must set up the variable beforehand. The
simplest way is to declare it as a global variable in a line at
the start, separate from the rest of your scripts. To help show
that a variable is global, we normally start the name with the
letter g, so for our purposes, the line is global gLeft, gTop .
This is the entire script of this project, from image downloading to custom window dragging.
already there, we add a line that says put empty into
gLeft to load a new image whenever the mouse button is
released. We use this in the next part as one way of checking
whether or not the mouse is down while it is being moved.
4 Dragging
3 mouseDown and mouseUp
Now, we use a mouseDown handler triggered when

the mouse is clicked down and put the two items of data
(distance from left, distance from top) into the two global
variables. If you clicked 100 pixels from the left and 35 pixels
from the top, the clickLoc would contain 100,35. The comma
separates one item of data from the next, so we can use it to
pick out items from combined bits of data.
on mouseDown
put item 1 of the clickLoc into gLeft
put item 2 of the clickLoc into gTop
end mouseDown
Those are used later in the mouseMove handler as part

of some calculations. Next, in the mouseUp handler thats
The Message Box is invaluable for running simple scripts.
JARGON
BUSTER
Handlers are the
on something/
end something
lines that hold
your script
instructions.
Events such as
tapping or
clicking down
trigger
mouseDown
handlers,
releasing the
mouse triggers
mouseUp, and
so on.
Finally we make the script that deals with dragging

the window around it can be confusing, so stay with us.
We do this in a mouseMove handler, which runs repeatedly
whenever the mouse is moved. In it, we first check to see if
the gLeft variable is not empty, which means the mouse is
down. (Because when the mouse is up that variable is
emptied, remember?) Then we put the two items of data
from the screenMouseLoc into two ordinary variables no
need to worry about making these persistent.
Finally, we set the left edge of the stack to a specific pixel
location: the distance of the mouse from the screen edge,
minus the distance of the mouse from the window edge.
That stops the window jumping sideways to put the edge
where we clicked. And of course, we do the same with the
top of the stack.
on mouseMove
if gLeft is not empty then
put item 1 of the screenMouseLoc into screenLeft
put item 2 of the screenMouseLoc into screenTop
set the left of this stack to screenLeft - gLeft
set the top of this stack to screenTop - gTop
end if
end mouseMove
5 Testing
Apply your changes in the Code Editor window,

switch to the Run tool, and try dragging the window around.
Each time you release the mouse a random image is
downloaded and used for the windowShape!
WorldMags.net
| 39
WorldMags.net
LIVECODE | Make a simple, searchable database

Keep track of your information using your own custom app
SKILL LEVEL
IT WILL TAKE
30 minutes
YOULL NEED
LiveCode
Set up your structure

first, then group it to
have it shared across
any new cards.
Keeping track of
information is something
we all need to do.
LiveCode is exceptionally
good at this; it can be used for
everything from a simple card-based
flat file database to the front end for
powerful SQL systems, and everything
in between. We wont go into SQL here,
but we will create a simple yet effective
card-based record-keeping system. Youll
quickly see how you can adapt this
easily to almost any real-world scenario.
To begin with, well be using multiple
cards within a LiveCode stack or
window. Think of this as a kind of virtual
Rolodex, or just a stack of file cards.
Well set up a structure of text fields to
store your information, then well add
some all-important searching features
to help you quickly retrieve whatever
you need.
Start by choosing File > New
Mainstack in LiveCode. Next, resize the
window to be like a traditional 35-inch
index card around 600 pixels wide.
Using the Inspector palette, name the
stack Data and untick Resizable in the
Size & Position pane.
Now go to the Tools palette and drag
three Text Entry fields, a Scrolling Field,
an Image Area object, and three
Rectangle Buttons onto your card.
(Hover over each icon and read the
tooltip to see which is which.) Arrange
them to look something like the
example below and name them, too:
a Text Entry field called title at the top,
the Scrolling Field as info on the left, a
Text Entry notes field on the right, and
the three buttons (named New Card, <,
This kind of card-based database is very handy, as shown by LiveCodes own Dictionary stack!
and >) and the remaining Text Entry
field, called page, along the bottom of
the card. LiveCode will show this
structure on every new card if we group
the items together: select them all, then
choose Object > Group Selected. In the
Inspector, youll see that the Shared
group and Behave like a background
options are ticked.
Dont ungroup the item, or this will
stop working. To edit these objects or to
Make anything from

a card-based flat file
database to a frontend for powerful
SQL systems
add things to the shared group, select it
and choose Object > Edit Group. Do this
now to edit the button scripts.
Select your New Card button and click
Code in the toolbar. Inside the on
mouseUp handler, add new card ,
then click Apply. Edit the script of the <
button to say previous card , and
add next card to the other button.
The navigation is pretty basic, so this is
all we need to do!
Of course, it would be helpful to
know what card were on, especially
40 |
WorldMags.net
once this holds a few dozen entries, so

we need a simple instruction that puts
the current card number (think of this
as the page number if you like) into the
field we called page. In addition, lets tell
the user how many cards there are in
this stack, to put the current card
number into context.
Well do this in an on openCard
handler, so its run every time a card is
shown. If we put this into the stacks
script rather than a specific card, then it
will be triggered no matter which card
were on at the time.
Choose Object > Stack Script and add
the following script, which is just one
long line within the on openCard and
end openCard lines:
on openCard
put the number of this card &&
"of" && the number of cards of
this stack into field "page"
end openCard
The ampersand (the & character)

joins things together, and a double
ampersand joins them with a space
character. Now, as you browse, youll be
able to see which card youre on and
how far you are from the end. The basic
structure is finished here, so go ahead
and add cards and content to your new
database stack.
Make a simple, searchable database |

WorldMags.net
LIVECODE
HOW TO | SEARCH YOUR CARD DATABASE
1 Going further
Adding search capabilities will make your database

much more useful. Well do this in a new window, which will
be a substack of the first window. (In LiveCode stack is
synonymous with window.) Choose File > New Substack and
name this stack Search. Well add a field here where we type
what we want to find, an Option Menu to let us pick which
field to search through, and a button to run the search query.
2 Add Objects
First, drag a Text Entry field from the Tools palette

onto the card. Use the Inspector palette to call this Search,
and make it big enough to show a good few words. Drop an
Option Menu button object onto the card and look in the
Inspector. In the Menu Items field, delete the default content
and add All, Title, Info and Caption, each on its own line.
You can make the object as wide as you like, but the popup
menu list will always be no wider than necessary to show the
Menu Items text. If this is no more than 22 pixels high, it
shows with no colour at the menu end, but make it 23 pixels
tall and it shows a blue cap on the right. Dont make it much
taller than this it just looks weird. When youve finished,
name this Focus.
Finally, drag a Push Button object onto the card and name
it Search. This is what well click when we want to run our
search query after we say what to search for and which fields
to examine.
A popup palette window is useful for searching through whatever content you choose to store in your creation.
put the title of button "Focus" into theFocus
set the defaultStack to "Data"
This preamble done, the rest of the script is a simple if-thenelse structure which should be easy to follow. Remember,
theSearch contains whatever someone typed into the Search
field, and theFocus contains whatever choice is showing in
the popup menu.
3 Search script
There are a number of ways to do searches in

LiveCode, but well use the simplest: the normal find
command. In the Search buttons mouseUp handler, well
begin with a sanity check: if the Search field is empty then,
well, dont search exit the mouseUp handler instead. If we
get past this, then well put the contents of field Search into
a variable, put the title of the popup menu into another
variable, and then use the defaultStack property to tell
the find command where to look. This is an important bit,
because the find operation is always performed in the stack
where its run, unless you tell LiveCode to use a different one
by setting the defaultStack to the name of your other stack.
if field "Search" is empty then exit mouseUp
put field "Search" into theSearch
These instructions will run your search in one field or across everywhere.
if theFocus is "all" then

find theSearch
else
find theSearch in field theFocus
end if
JARGON
BUSTER
Stacks can be
opened as
regular windows,
floating palettes
or processblocking modal
dialogues. Add
as palette to a
go to stack
command to
open a palette;
topLevel is
normal; modal
and modeless
are specialist
dialogue types.
4 Window control
Your search script is done, youve arranged things

pleasingly, but theres one more thing to do: add a button
to the main window to open the search window when its
wanted. Without this, theres no way for anyone to get to the
Search window from the first one.
This new button needs to appear on all cards in the
Mainstack window, so go to the first window, select the
group, and choose Object > Edit Group. Once in the group
editing mode, just add a new Rectangle Button (for style
consistency), name it Search, and add go to stack
"Search" inside its mouseUp handler. You can add as
palette to the end to open it as a floating palette window.
Use the Message Box to say topLevel stack "Search" if
you need to convert it back while you fine-tune things.
Finally, go to the stack script for the Search stack and add
an on openCard handler. It doesnt need anything inside
this is just to stop our openCard script from the main stack
from being run when this stacks card opens.
WorldMags.net
| 41
WorldMags.net
LIVECODE | Build a word processor

Create your own word processor with live wordcount
SKILL LEVEL
IT WILL TAKE
30 minutes
YOULL NEED
LiveCode
A live wordcount is pretty

standard stuff in word
processors these days, but
it began as a feature in an
application called Wordless, written in
the mid-1990s using software much
like LiveCode. Well recreate this here,
adding in tricks for saving files, so you
end up with a word processor that you
built yourself. Its a useful exercise in
resizing objects and handling external
files, so play along even if you love your
current writing software.
Create a new Mainstack and add a
scrolling field and a Text Entry field.
Dont worry about positioning these
yourself well make these resize
themselves automatically whenever
the window is resized.
Use the Inspector palette to name the
Scrolling Field work and the Text Entry
field count. With the small count field,
untick the Focusable, Focus Border and
Show Border options, and tick Lock Text.
You cant type into this field now but
your scripts can work with it.
Choose Object > Stack Script and
make an on resizeStack handler.
This is triggered whenever the stack
is resized.
on resizeStack put the height of
this card into theH
put the width of this card into
theW
set the rect of field "work" to
0,22, theW, theH-20
Resizing objects when

the window changes
shape takes just a few
simple lines of script
instruction.
set the rect of field "count" to

0, theH-20, theW, theH
end resizeStack
In this script, the first two lines put

the height and width of the card into
Use the LiveCode Dictionary to find the full details of any command, function or property.
a couple of variables. The next line sets
the rect (short for rectangle) of the work
field to be zero pixels from the left of
the card edge, 22 pixels down from the
top. The right edge is set to the width
of the card (in the variable we called
theW), and the bottom is set to the
height of the card minus 20 pixels. This
makes it the full width of the card and
almost the full height.
Building a word
processor is a useful
exercise in resizing
objects and handling
external files
The field we called count is
controlled in a similar way, but its
shorter and positioned along the
bottom of the card. Click Apply, then
switch to the Run tool and try resizing
the window. For bonus cool points, turn
on the Live Resizing option for the stack
in the Inspector palette.
Key release
Now for the live wordcount. In the
same stack script area as above, make
a new handler called in keyUp . This
is triggered every time a key on your
42 |
WorldMags.net
keyboard is released, as something is

typed. You need just one line of script
inside this handler:
put the number of words of field
"work" && "words" into field
"count"
Now, as you type youll be told how

many words are there.
The next step is to make a script to
count the words in a selection, not just
all the words in the field. The handler
to create is on selectionChanged ,
something that is automatically triggered
when a selection is made. This script is
slightly more involved, although its not
at all complex.
First we get the number of
words of the selection , which stores
the answer in the it variable. Then we use
a trusty if-then-else structure:
if it is 0 then
keyUp
else
put it && "words selected"
into field "count"
end if
In a nutshell, if there are zero words

selected then we make our own keyUp
event trigger so the normal word count
is performed. Otherwise we put the
contents of it, which is how many
words are selected, into the field,
followed by words selected.
Build a word processor |

WorldMags.net
LIVECODE
HOW TO | OPEN AND SAVE FILES
1 Adding menus
To turn this into a useful tool, we need to add ways

to open and save files. Well do this by first adding some
menus and then adding the script instructions that make
the menu items do what we want when they are selected.
Choose Tools > Menu Builder, and click New to create
a new menubar set. Youll get three menus ready to go,
although well tweak them a little. First, however, you may
have noticed that your stack window just got slightly shorter.
As part of simplifying cross-platform menu creation, the
card slides under the windows title bar by 22 pixels. Now
the resize script we made earlier makes the large work
field fit the top of the card perfectly.
2 Edit Menu
In the Menu Builder window, select Edit on the left,

then select Clear in the list on the right. Click the New Item
button in the right-hand section to add a new menu item
below Clear. Name this Select All, and set the Shortcut to A
with the Cmd checkbox clicked. Delete the Preferences item
and the dash entry just above it we wont be using those.
Now click the Auto Script button over on the left. This adds
a generic script structure to the Edit menu, and if you click
the Edit Script button you can add your own instructions.
Replace the Cut menus commented line with cut . Thats all
you need! The script for the Copy line is copy , for the Paste
item its just paste , and Clear is yes, clear . The Select
All menu items script is select text of field "work" .
The Menu Builder makes menu creation exceptionally easy, including generating script templates.
put it into field "work"
end if
The answer file instruction opens a file selection dialogue,

and the rest filters out all but text-based documents. If it is
not empty then it contains the path to the chosen file. We
store this in the gTheFile variable; open the file this refers to,
read the contents of the file until EOF (end of file), then close
the file again. The data we read stored in the it variable is
put into the work field. Saving is similar. If gTheFile contains
something, the file it refers to is opened, field work is written
to it (replacing whatever it contains), then its closed.
3 Open and Save
Select the File menu in the Menu Builder window and

add Save and Save As menu items to its list. Click Auto Script,
then the Edit Script button. At the top of the Code Editor
window add global gTheFile . Well use this to track which
file we open so we can save changes back to it. Now, in the
section for the Open menu item, add the following:
if gTheFile is not empty then

open file gTheFile
write field "work" to file gTheFile
answer file "Select a text file" with type "Text

Files|txt|TEXT"
close file gTheFile

end if
if it is not empty then

put it into gTheFile
open file gTheFile
read from file gTheFile until EOF
close file gTheFile
With just a few lines of script you can make a truly functional tool.
JARGON
BUSTER
Global variables
will store data
until the app is
quit, and can be
used by any
handler script at
any time. Local
variables are
available to all
handlers in one
Code Editor view.
Temporary
variables last
only while a
handler is
running.
Save As must first ask the user to choose where to save the
new file and what to call it, using the ask file command. We
assume the user knows enough to put .txt, .html, .php or
whatever is appropriate at the end of the file name. The
result is put into the global gTheFile variable (so we can do
regular saves later), then we go through the same process of
opening the file, writing to it, then closing the file again.
ask file "Save this as"
if the result is not empty then
open file gTheFile
write field "work" to file gTheFile
close file gTheFile
end if
The lines to put into the New menu items script are put
empty into field "work" and put empty into
gTheFile , and the Quit menu items script is simply quit .
WorldMags.net
| 43
WorldMags.net
LIVECODE | Custom window shapes

Keep small children smiling with your own fuzzy-felt-style shapes toy
SKILL LEVEL
IT WILL TAKE
30 minutes
YOULL NEED
LiveCode
First get the core

functionality working,
then move on to
playing with colours.
The traditional fuzzy-felt

childrens playsets are great
fun, and you can make
your own screen version
using the LiveCode development tool.
Making this will take us through some
useful scripting techniques, including
cloning graphics, assigning new object
scripts, changing colours and controlling
layers. At the end of this youll have a
working virtual toy as well as a set of
new LiveCode skills under your belt.
Start, as always, by choosing File >
New Mainstack. Choose the Polygon
tool in the Graphic section its the
diamond-shaped icon and draw a
shape on the card. In the Inspector
palette, use the Basic Properties pane
to make it opaque, with a line thickness
of zero, four sides, and a rotation of 45.
Switch to the Graphic Effects pane to
give it a drop shadow (we suggest
opacity 90, size 9, distance 3, and angle
90), and use the Size & Position pane to
make it 200x200 pixels.
Click the Code button, add an on
mouseUp handler, and add just this
one word: makeNewShape . This isnt
a LiveCode word, its a custom, made-up
name that gets called when this shape
is clicked. Click Apply to store your
changes in this graphic. Now copy and
paste to make two copies, set the sides
of one to 3, and change the type of the
other to Oval. Put them all on the left.
Make another graphic, name this
script store, and go straight to the
Code view. In there, make an on
mouseDown handler and add two
separate lines: set the layer of
me to top , and grab me .
The cloning instructions that duplicate and position new objects in the game are stored in the cards script.
The line first tells the item to move in
front of anything else, and the second
makes it follow the mouse. Once you've
applied the script, go to the Inspector
palette and untick the Visible checkbox
so that this item is hidden. Now go to
Object > Card Script and type on
makeNewShape to create a custom
handler that runs when you click the
object. Inside this well put a total of
eight lines of script. The first, clone the
Use any transparent

PNG to control the
transparency and
shape of your
window
target , duplicates the target (the
thing just clicked) and stores the name

of the new object in the it variable. Well
use that later, but first we need three
lines of random number generation.
put random(100)+200 into x
put random(100)+200 into y
44 |
Thats the setup finished, so lets use

these things. The loc property is the
horizontal and vertical pixel location
of an object, so we set the loc of it
to x,y to have the new graphic
positioned with a bit of randomness.
The next line does a similar thing
to the angle of the graphic: set the
angle of it to z . Each time the
master graphic is clicked you get a
new one, with a different angle and
position every time.
After this, add set the script of
NewGraphic to the script of
graphic "script store" to put
the script we set up earlier into the

new graphic. The last line sets the
background fill colour of the graphic:
set the backgroundColor of it
to "gray" .
This may seem fiddly, but in eight

steps a graphic is duplicated, positioned,
tilted, then given its own script and
filled with a new colour. Drag an image
object onto the card and name it trash.
In the cards code add an on
mouseUp handler with a single line
of code before end mouseUp :
put random(40) + 25 into z
if intersect(the target, image

"trash", "opaque pixels") then
delete the target
In each line a randomised number is

made, another is added to that, and
the result is stored in a variable.
Your stack now creates graphics,

lets you drag them about, and
deletes them on demand.
WorldMags.net
Custom window shapes |

WorldMags.net
LIVECODE
HOW TO | MAKE AND DRAG CUSTOM WINDOWS
1 Going Further
We have the basic functionality, but its a fairly boring

fuzzy-felt game that has nothing but grey shapes The next
steps will add different colour blocks and some instructions
that change a graphics colour.
2 Colour blocks
Draw a rectangle graphic on the card and use the

Inspector palette to do the next steps: name it red, make it
256 pixels wide by about 50 tall, make it opaque, and use the
Colors & Patterns pane to set the background colour to a
bright red. Put it in the top-left corner, then copy this three
times and place the copies along the top of the card. Name
and fill one of these with green, one blue and one yellow.
3 Colouring code
The code thats placed in each new generated graphic

needs to be expanded with the instructions that deal with
changing colours. This is stored in the invisible script store
graphic. With the Edit tool selected, choose View > Show
Invisible Objects. Now you should be able to select this item
and click the Code button to see the instructions it contains.
Create an on mouseStillDown handler and add this line:
Let your users create shape collages with the safety of a click-proof backdrop that can be enabled when needed.
graphic from thehelpful.com/livecode/fuzzyfelts/trash.png.
Once you have a suitable image in PNG, GIF or JPEG format,
click the Message Box icon in the Toolbar below the menu
bar. Choose the second icon from the left, the Multi-Line
version, and add the following two lines:
if intersect(me, graphic "red", "opaque pixels")

then set the backgroundColor of me to "red"
The mouseStillDown handler is triggered over and over while

the mouse button is held down, so its a useful one to use
while using the grab me instruction to drag the clicked item
around; the mouse remains down so the mouseStillDown
event keeps happening, many times a second.
As the LiveCode Dictionary tells you, the intersect function
will check to see if two specific objects overlap, and the
opaque pixels addition tells it to pay attention to visible
shapes rather than just the bounding rectangles of the
objects. This script will be inside the object thats being
dragged, so me is shorthand for the object itself. Copy and
paste this line and amend it to check for insersecting with
the graphic called blue, changing the 'backgroundColor'
instruction to "blue" repeat for green and for yellow.
4 Trash icon
All thats left is to make a better-looking trash object.

You can use your own image or download the trash.png
Each graphic uses the same code, assigned from a hidden objects script.
answer file "pick an image"

import paint from file it
JARGON
BUSTER
The random
function
produces a
random result
from 1 to the
given number.
To get a result
starting higher
than 1 just add
to the result. Use
randomSeed to
ensure greater
randomness in
one session see
LiveCodes
Dictionary.
Press the Enter key (by the numberpad) to run the instruction
(not the Return key by the puncutation keys, which is actually
functionally different). If youre using a keyboard with no
separate Enter key, hold down the key to make Return
act as Enter. Find and select the image you want; it will be
imported as fully-embedded pixels shown within a new
image object. This method is better than using the Inspector
palette to select an image source, because it doesnt need to
keep track of the original image file. Delete the original trash
image object and rename this new one trash so that the on
mouseUp handler in the card code that looks for an
intersection with an image called trash will still work.
5 Backdrop
Add this to the cards mouseUp handler to toggle a

solid black backdrop behind the card when you -click:
if the optionKey is down then
if the backdrop is "black" then
set the backdrop to "none"
else
set the backdrop to "black"
end if
end if
This keeps younger users the target audience of this

software toy from clicking out to the Finder by mistake.
WorldMags.net
| 45
WorldMags.net
LIVECODE | Create an iOS font converter

Convert fonts into a format that can be installed in iOS 7
SKILL LEVEL
IT WILL TAKE
30 minutes
YOULL NEED
LiveCode
This is the meat of the

font conversion process,
all done in under a
dozen lines of script.
The LiveCode dev tool

enables you to create
apps that can be used to
automate repetitious tasks
and to do things that you may not even
know how to do otherwise! The iOS
Font Maker is a good example: it
converts a TrueType or OpenType font
to the format required to use it on an
iPad or iPhone running iOS 7.
Lets build a version from scratch,
creating an XML-formatted file that
contains custom names, the font files
data encoded as base64, and a couple
of unique numbers generated with a
Unix shell call. These will be merged
into placeholders in the XML template
before being saved as a .mobileconfig
file. It sounds complex but its relatively
straightforward, and it demonstrates
some of LiveCodes deeper powers.
Start by making a new mainstack
and dragging in two Text Entry fields
and two Rectangle Buttons. Name the
fields ID and Organisation and name
the buttons Choose and Generate.
Drag in a Scrolling Field and name
it template. Go to thehelpful.com/
livecode/iosfonts/template.zip,
download and unzip the file, open
in TextEdit, then copy and paste its
contents using the Run tool into the
template field. Switch to the Edit tool
and untick its Visible checkbox in the
Inspector palette.
Select the Choose button and click
the Code button in the Toolbar. Outside
of the mouseUp handler, type global
gFontData, gUUID1, gUUID2,
gTheFile to set up global variables.
These named variables, used to hold
Two fields and two buttons is all thats needed, but a few extra items can make it look a little more finished.
bits of information, will be remembered
permanently and are available globally
to other scripts you write.
Inside the mouseUp handler, we're
first going to deal with selecting the
font file and then reading its data. The
answer file instruction in our first
line opens a standard file selection
dialogue. The next line will check to see
if the user cancelled this; the it variable
stores the path to the selected file, so if
file is read until the end of the file (EOF).

That done, the file is closed. The file data
read is stored in the it variable, ready for
use. Base64 is typically used to prepare
data for MIME email use, but is also how
fonts have to be encoded for use in iOS
7. Well use LiveCodes base64Encode
function to put the encoded data into
gFontData, a pre-made global variable.
This is the code for all that:
Create your own

custom software to
automate complex
and difficult or
repetitious tasks
read from file gTheFile until EOF
it is empty then exit this mouseUp

handler. Next, we store it in gTheFile;
the it variable will be used to hold the
data read in the next step. Those three
lines of code look like this:
answer file "Pick a font"
if it is empty then exit mouseUp
Now we open the file. It isnt like

double-clicking the document; this
marks it as being open for reading/
writing by our software. After that, the
46 |
WorldMags.net
open file gTheFile

close file gTheFile
put base64Encode(it) into
gFontData
Two UUID codes universally unique

identifiers are needed. These 128-bit
numbers are guaranteed (with a large
margin of probability) to be unique
every time. The Unix uuidgen shell
command generates a UUID LiveCode
can run shell commands, so theres no
need for OS Xs Terminal. Type this:
put the shell of uuidgen into
gUUID1
put the shell of uuidgen into
gUUID2
Click Apply. This script will store three

different chunks of data in three global
variables. The next step is to make a
button that merges these and the two
Text Entry fields into the template and
exports the result to disk.
Create an iOS font converter |

WorldMags.net
LIVECODE
HOW TO | MERGE AND EXPORT THE FONT
1 Font name
Select the Generate button and click the Code button

to open it in the Code Editor window. Just as in the previous
buttons script, we start by declaring the global variables
outside of the mouseUp handler, so theyre available for the
handlers in this script as well: global gFontData, gUUID1,
gUUID2, gTheFile . The rest of this work will go inside the
mouseUp handler.
The path to the font file we opened is still stored in the
gTheFile variable. Lets extract the file name from the whole
path. First tell LiveCode what the itemDelimiter is so it can
tell each folder apart. As in web URLs, its the / character, so
set the itemDelimiter to "/" does the trick. The next
line is put the last item of gTheFile into fontName
what you get is just the file name.
2 Merge data
The XML template you downloaded has placeholders

in the right places where different bits of data need to be
stored. Rather than trying to track down each placeholder
and replace it one by one, LiveCodes merge function can do
the whole thing in one step. The text thats being merged is
evaluated, and anything wrapped in double square brackets
is replaced with what it refers to in LiveCode, no matter how
big or small that might be. For example, [[gUUID1]] will be
replaced with whatever that named variable happens to
contain, and [[field 1]] will be replaced with whats in field
number 1 (which is the first field you made, or the bottommost field if youve been shuffing things forward and back).
We dont want to change the template field itself or itd be
no use the next time we want to convert something, so first
we need to put field template into a variable and use that.
Because we dont need to preserve this data beyond this
scripts operation, we dont need to set it up as a global
variable. In fact, if we simply get the field rather than putting
the field into something, itll be stored in that automatic it
variable: get field "template" .
With the template data in the it variable, the next line is
simple: put merge(it) into theData places the merged
data into a regular temporary variable made on the fly for
this purpose. It will be remembered for the duration of
this mouseUp script handler, but because its an ordinary
temporary variable, it is forgotten at the end. Thats fine,
because well have written it into a new file on disk by then.
The other half of the process: merging and exporting the XML file.
A full iOS Font Maker utility made previously that has a few more features, but its built on this core functionality.
3 Save the font
The ask file command opens a file dialogue for

naming and saving a file or rather, it allows you to choose
where somethings to be saved and what it should be called;
the actual saving of data to the file is handled separately.
Adding ask file "Save this" with fontName & ".
mobileconfig" will put whats in the fontName variable
there followed by the .mobileconfig filename suffix, which is
necessary for the file to work when opened on an iOS device.
Click OK and the full path to the location and file name are
stored in it. Lets check this was done, then create a file, write
theData to it, and close it again:
if it is empty then exit mouseUp
open file it
write theData to file it
close file it
JARGON
BUSTER
XML is simply
a way of
organising data
in a logical,
structured
manner. Its the
basis of app
preferences files,
and here its how
iOS profiles are
made. We just
merge data into
an XML template
and save the
results to disk.
4 Run the app
When youve finished adding the code (and clicked

Apply in the Code window) you can try it out on a font.
Switch to the Run tool in the Tools palette, type a one-word
name in the first field and your full name in the second,
then click Choose. Find and select a TrueType or OpenType
font (you could download some from google.com/fonts),
then click Generate and choose where to save the file. If
you get a script error, check your code for errors. Otherwise
youre ready to email the new .mobileconfig document to
your iPad (or upload it) and open it on the device. You
should be taken to the Settings app and asked to authorise
installing the font. After this, its available to use in apps such
as Pages and Keynote. If you want to see examples of readyto-use converted fonts or download a previously created,
fully working (and slightly expanded) copy of this as an app
or LiveCode stack, go to thehelpful.com/iosfonts/.
WorldMags.net
| 47
WorldMags.net
LIVECODE | Make an iOS calculator app
Make an iOS calculator app

Calculate the value of money in years past in your own iOS app
SKILL LEVEL
IT WILL TAKE
45 minutes
YOULL NEED
LiveCode
The entire logic of this is

in one handler plus
the data list in a hidden
text field.
LiveCode can make apps

for practically any platform
around: Mac, Windows,
Linux, Android and, of
course, iOS. In this final tutorial, well
create an app and test it in Apples iOS
Simulator. This is part of Xcode, so make
sure you have that downloaded first.
Once youre ready, go to LiveCodes
Preferences and select Mobile Support.
In the iOS SDKs section, click Add Entry,
select 4.3 or Later and select your
installation of Xcode. Now LiveCode
knows where to find Xcode and the
iOS Simulator app.
Our app will use the historical UK
inflation data that can be found at
thehelpful.com/livecode/ios. Download
the text file, open it in a text editor and
copy the whole thing.
In LiveCode, make a new Mainstack
and use the Inspector palette to make it
320 pixels wide by 480 pixels tall. Drag a
scrolling field onto the card and name it
historical, then switch to the Run tool.
Paste the inflation data in there. This
field will be used only by your scripts
and wont need further contact, so
switch to the Edit tool and untick the
Inspectors Visible checkbox to hide it.
Add three Text Entry fields, select
them all, and turn to the Inspector.
In Basic Properties, turn off the Show
Border tickbox, to make them a little
more iOS-like. Use the Size & Position
pane to set the width to 200 and the
height to 48 pixels, and the Text
Formatting pane to make the type size
50px. Name one field now, another
then, and the third when. Click into the
when field and type 2013, then turn on
Test your work in the iOS Simulator, a virtual iPhone or iPad on your Mac.
the Lock Text option for this and the
now field. Put the then field at the top
of the card, put the year field below it
and the now field below that.
Much of our code will be the same
for iOS as it would be for Mac for
example, mouseUp will simply refer
to touches instead mouse cicks.
Select the year field and click the
Code button. Create a mouseUp
LiveCode can make

apps for anything:
Mac, Windows,
Linux, Android and,
of course, iOS
handler and start it off with the
following repeat structure:
repeat with x = 2013 down to
1751
put x & return after theY
end repeat
mobilePick theY, it
The user then chooses a year in the

wheel, which we stored in the result.
Its the number of the line, not the
contents, so lets find the line in theY
and put it into the field:
put line the result of theY into
me
Field history lists years, inflation

percentage, and multiplier. These are
separated by commas and we need the
third item, so just say:
get item 3 of line (the result) of
field "history"
Its time for some maths. Set the

numFormat to have any figures before
the decimal but just two afterwards:
set the numFormat to "#.00"
Now multiply whats in field then by

it, which we got from item 3 earlier:
delete last line of theY
put field "then" * it into field

"now"
This builds a list of years, 2013 down

to 1751, and stores it in theY.
Now we want to find what year is
shown in the field:
Thats everything: an editable field for

typing numbers, a locked field that acts
as a button and shows the selected year,
and another that shows the result. The
mobilePick command is mobile-only, so
well test in the iOS Simulator.
get lineOffset(me, theY)
48 |
Then we scroll the mobilePick display

(which is LiveCodes way of describing
the standard iOS list display) of years to
that point to help the user:
WorldMags.net
Make an iOS calculator app |

WorldMags.net
LIVECODE
HOW TO | TEST YOUR iOS APP
1 Build for iOS
If youve followed all our instructions, youre ready

to test out your stack as an iOS app in the iOS Simulator, a
virtual iPhone or iPad that runs on your Mac. The LiveCode
preferences setting will remain set, but youll need to do one
thing to any stack before it can be sent to the iOS Simulator:
set up its Standalone Application Settings and enable the iOS
option. Youll find it in the File menu. This window contains
the various different settings for creating apps for all the
different platforms, but all were interested in now is the
iOS button. In the iOS section there are dozens of different
options, but all that matters, for now anyway, is clicking the
Build for iOS tickbox in the upper-left. When thats ticked,
the different desktop OS choices are turned off. You can
switch these things back and forth with a few clicks, but
its likely that stacks you make for mobile devices wont be
exactly the same as stacks you make for desktop systems.
2 Test
Close the Standalone Application Settings window.

Because we arent sending something to a physical device or
uploading to the App Store see step 4 for information on
that dont choose Save as Standalone Application. Instead,
choose Development > Test Target and select iPhone
Simulator 7.0. Then pick the Development menu again and
choose Test. Youll be prompted to save your stack (always a
good idea), then the iOS Simulator is launched, a temporary
standalone app is sent to it and launched automatically.
The first time the Simulator opens it can take a little while. If
LiveCode times out in the meantime, just choose Test once
more when the Simulator is up and showing its icons.
Use the Dictionary to learn the details of different LiveCode keywords.

In the stack we just made, this could be used within the
mouseUp handler to run certain instructions for Mac users
and different ones for iPhone users. One approach would be
to populate an Option Menu button with the theY data by
saying set the text of button x to theY and using that
instead of the mobilePick line.
Alternatively, putting this in a preOpenCard handler (which
is run just before the card opens) would make it simple to
hide and show different items depending on the current
platform. Set up an Option Menu-style when button for Mac
users, but hide that and show our when field for iPhone
users instead:
3 Cross-platform
We said your stacks arent likely to need to run

on both desktop and mobile platforms but its actually
perfectly possible. You can use an if structure to see what
platform the app is on:
if the platform is iPhone then

hide button when
show field when
if the platform is MacOS then
else
-- do Mac stuff
else
-- do iOS stuff
end if
Where weve put --do Mac Stuff, youd put your code.
The mobilePick command shows the iOS data picker wheel.
JARGON
BUSTER
Want to know
more about
numFormat?
Confused about
mobilePick? The
Dictionary icon
in the Toolbar
will help you find
technical details
and expand your
understanding
of LiveCode. You
can also ask
questions online:
forums.livecode.
com.
hide field when

show button when
end if
When running on any iOS device, the platform always reports

iPhone. If you need to detect iPads specifically, you could set
up another if structure to detect the screens resolution
using screenRect see the LiveCode Dictionary for more.
4 Testing on devices
Testing your own apps on your own physical device is

possible, but it requires a paid-for Apple Developer account
(60 a year) and the creation of some provisioning profiles
using the Apple Developer site and your Keychain utility. This
is a fiddly process, but theres a very helpful document by the
LiveCode team at bit.ly/livecodeios1 and a useful LiveCode
forum thread at bit.ly/livecodeios2. The paid-for account
means you can submit to the App Store, though, so follow
our guide on page 114 when youre ready!
WorldMags.net
| 49
WorldMags.net
UNITY | Introduction
50 |
WorldMags.net
Introduction
Introduction |
WorldMags.net
UNITY
Learn
Unity
This cross-platform 2D and 3D games
development tool is used by some of
the biggest developers around
earning how to use a truly powerful tool is something
that can set you up for a career of innovative development.
Unity is a games development environment thats equally
at home making basic 2D games just as much as epic 3D
masterpieces. Its a bit different from tools focused just on making apps,
but well guide you through exactly how it works, and well build a fully
functional 3D puzzle game with an animated character, sound effects
and a title screen, before adding touch controls to make it work on iOS.
52
56
58
60
62
66
68
70
72
74

Flesh out your game further
WorldMags.net
| 51
WorldMags.net
UNITY | Build a game
Were going to be
making a 3D
puzzle game.

Well guide you through the steps to create your own puzzle game
SKILL LEVEL
Anyone can do it
IT WILL TAKE
30 minutes
YOULL NEED
Unity, a free download
from unity3d.com/
unity/download
52 |
hen Apple released iPhone

OS 2.0 back in 2008 and
introduced the App Store,
it wasnt just creating a
new industry for app makers game
developers found a massive, enthusiastic
new audience, too. While individuals
and companies had been able to sell
their software themselves before, there
hadnt been a comprehensive, end-toend solution. Apple would handle the
hosting of the app all the way through
to the payment and distribution of
funds to developers.
Fast forward to 2014 and there are
App Stores across all types of devices
selling games: Windows computers,
OS X, iOS devices, Android devices,
Windows Phone devices The list goes
on. All this choice presents a dilemma
for games developers whether to

write a game natively for a platform, or
make something that can be sold across
different types of devices. If you write an
app for one platform and want to port it
for other platforms, it can be costly and
time-consuming especially if its a
failure. Get it right, however, and you
can earn a comfortable living from App
Store sales. Get it very right and it could
be a life-changing experience
Write your game

in Unity, and you
can output to iOS,
Windows 8, OS X,
Linux and more
WorldMags.net
If only there were some way to be

able to target all platforms, eh? Well,
there is. Unity is primarily used for 3D
games but as of version 4.3 it also
supports 2D games out of the box.
It enables you to, in theory, write
once and run anywhere using the C#,
JavaScript or Boo languages. The game
were going to make over the course of
this series will be written in C#, as will
most examples you find online and
projects from the Unity Asset Store,
which well talk about shortly.
Once your game is written in Unity,
youll be able to output to the web,
Windows 8, OS X, Linux, iOS, Android,
Windows Phone 8 and BlackBerry for
a cost. Unity comes in two variants, Free
and Pro, with the ability to also purchase
add-ons which allow you to export to
Build a game
WorldMags.net
| UNITY
QUICK LOOK | USEFUL CONTROLS IN UNITY

Pan
When you click and drag in the scene
view, youll pan around the scene.
Left, right, up and down are your options.
Note that you wont be able to select any
GameObjects in this mode.
1
Move
Click a GameObject with this tool
selected and youll see three arrows
representing the X, Y and Z axes. Click and
drag to move your GameObject.
2
Rotate
Alternatively, click a GameObject with
this tool selected and youll see three
arcs representing the X, Y and Z axes. Click
and drag to rotate your GameObject.
3
Scale
All the tools are consistent. Select a
GameObject to see the three arrows.
You can scale just one axis or all three.
4
the various platforms weve just listed.

For our game were going to be using
Unity Free and creating a desktop app,
but well also cover adding touch
controls for when you decide you want
to take the plunge and purchase one
of the mobile add-ons.
Asset Store to App Store

There are just as many alternative
game engines as there are App Stores,
so why should we be using Unity? Well,
it started life as an OS X only tool all the
way back in 2005 and has been steadily
developed over the years into a very
robust game engine with advanced
lighting, physics and animation support.
To develop something similar to it
would take years and hundreds of
thousands of dollars.
The pricing structure allows you
to get to grips with the program and
even release what you create, requiring
a fee only if you want to remove
branding, expand the platforms you
want to publish to, or if your app
becomes a huge commercial success
and starts generating large revenues.
Unity also has an Asset Store, a place
to buy 3D models, textures, sounds,
GAME
OBJECTS
Inspired by Sokoban, this is the view of our 3D crate-pushing game when viewed from the in-game camera.
plug-ins and even complete game
projects for you to learn from and
modify. Reassuringly simple!
So what is it were going to be
building for our app? Its going to be
a 3D take on the classic crate pushing
game Sokoban. In case youre unaware
of the game, Sokoban (Warehouse
Keeper in Japanese) is a puzzle game
where the player is required to move
boxes or crates around a level,
attempting to get them to marked

locations. Once all the crates are on
their designated squares, the level is
completed and the player progresses to
the next one. This all sounds very simple
so far but the levels are created so as to
frustrate the players endeavours, often
requiring complex movement around
the level and the juggling of crate
positions to avoid moving one into a
dead end or unrecoverable position.
WorldMags.net
GameObjects
are empty boxes
that you can
attach Unity
components to,
be it an audio
listener, a script
or physics. Every
object used in
Unity is a
GameObject
with a
customised set
of components
attached to it,
which define
its behaviour.
| 53
WorldMags.net
HAVE
A PLAY
Unity comes
pre-configured
with multiple
window layouts
try them all
out and see
which you like
best. Go to
Window >
Layouts and
select one of the
options. Find the
one that suits
your working
style best and
get comfortable
with it.
You can a try a similar version of

the game out now by heading to
sokobanonline.com in your web
browser. This link wont work on an iPad
or iPhone, so be sure to use a computer
if you have one of those devices.
As youll be able to see from the
implementation on the website, the
game is played on only two axes and
this is the case even when the game
is displayed in 3D.
When youre working with 3D games,
the action is presented via a camera
that moves within the 3D space of the
game world. The camera will follow the
position of our player, who will have the
ability to turn left and right and move
forwards in that direction; there is no
movement up or down, which keeps
our collision detection simple.
The assets for our game will come
from Unity demo projects or tutorials,
which the team kindly allows to be used
in your own projects, even commercial
ones another reason why Unity is a
good choice for newbies. Our game will
consist of a title screen and three levels,
with each level displaying a background,
a player, floor, walls and the crates that
we need to move into position.
Were using the

integrated
MonoDevelop
to write our code.
Multiple tabs
Unity itself can be a bit daunting to look
at when you first open it up. Youll have
multiple tabs visible, titled Hierarchy,
Scene, Project and Inspector. There will
also be two tabs that dont have focus:
they are Game and Console.
The Project tab is a list of all the
scripts, models, sounds and textures
available to use in your game. You can
drag items into this window and Unity
will import them.
Once you have something available
inside Unity and you want it to appear
in your games level, you will have to
place it in either the Hierarchy or the

Scene. In a sense these both represent
the same data. The Hierarchy is a list of
all the items that currently exist in your
scene, and the Scene tab gives you a
visual representation of the Hierarchy.
If you need to select an item, it will
most likely be quicker in the Hierarchy
than in the Scene tab. On the other
hand, if you need to position something
youll be placing on the Scene tab and
visually adjusting it.
Once youve roughly positioned
something, youll want to move over to
the Inspector panel. Its here that you
UNITY GAMES | NOTEWORTHY RELEASES
1 The Room Two Fireproof Games
The Room Two is a physical puzzler, wrapped in a mystery game,

inside a beautifully tactile 3D world. Follow a trail of cryptic letters from
an enigmatic scientist known only as AS into a compelling world of
mystery and exploration. This game is a prime example of what Unity
can achieve, even on a mobile device. The first version of The Room
and this sequel have won numerous awards and accolades. Give them
a play and youll understand why.
54 |
2 Device 6 Simogo
A surreal thriller in which the written word is your map, as well as

your narrator. Device 6 plays with the conventions of games and literature,
entwining story with geography, and blends puzzle and novella to draw
players into an intriguing mystery of technology and neuroscience. Anna
wakes in a castle on a remote island, with little recollection of how she got
there. All she remembers is an unusually unpleasant doll. Why are there
two identical castles on the island? Who is the man in the bowler hat?
And above all, what is the purpose of the tests Anna is put through?
WorldMags.net
Build a game
WorldMags.net
can see the numerical values for the
properties of any item you select.
Moving on to the tabs that dont have
focus, first up is Game. This, like Scene, is
a visual representation of the items in
the Hierarchy, but rather than being able
to view the items from a free-floating
perspective, your view will be that from
the scenes camera what you will
actually see when the game is being
played. Unity allows you test your game
from inside the editor, switching to and
rendering it in the Game tab.
Finally, the Console tab will display
any messages that Unity broadcasts,
along with any debug information that
you chose to output to it. When you test
your game in the editor, pay attention
to this tab, because it will inform you of
any warnings or errors that need fixing.
Youll possibly notice that we havent
covered where youll be writing the
code that will be required for our game.
Thats because we dont actually write
it inside of Unity. When you run the
installer for Unity, another program,
MonoDevelop, will also be installed.
MonoDevelop is an open source
integrated development environment
for Linux, OS X and Windows. The
| UNITY
Our games
main character,
Astro Dude!
JARGON
BUSTER
We havent covered
writing the code here
because we dont
actually write it
inside of Unity
3 Fightback! Ninja Theory
When there is no justice, there can only be vengeance! Thugs have

kidnapped your sister but theyve picked on the wrong guy. Its time to
Fightback! From the award-winning developer Ninja Theory comes a new
standard in mobile fighters. Stunning visuals, unique controls, and a
vibrant design come together to bring you the pinnacle of mobile fighting
games. Scale each skyscraper one floor at a time. Immerse yourself in
Fightbacks 80s action-movie style by knocking out baseball-bat-wielding
punks and psychotic quarterbacks in a variety of unique backdrops.
version that is installed alongside Unity

is tightly integrated with it and has auto
complete for Unity objects and the
ability to debug code as it runs from
inside the editor.
While this has been a rather brief
introduction to Unity, well be covering
these points again when it comes to
putting them into practice. In the next
article, well be covering setting up your
project and how to import prefabs
the building blocks of our game.
Youre going to
see a lot of talk
about scenes in
this series on
Unity. A scene is
essentially a level
in a game.
GameObjects
can be added to,
and positioned
in the scene and
then displayed
by the camera.
Need to display a
new area? Show
a new scene.
Safari: Adventure Time

4 Ski
Cartoon Network
Popular TV show Adventure Time meets Ski Safari! Shred the slopes of
Ooo with Finn and his friends in this endlessly fun downhill adventure.
Slide your way through Ice Kingdom, Candy Kingdom and the Mystery
Mountains to outrun a relentless avalanche! Dress Finn up like a zombie,
put on his pyjamas, go as Prince Hotbod, and more! This game is a really
good example of how Unity, primarily a 3D engine, can also render
convincing 2D games with little effort.
WorldMags.net
| 55
WorldMags.net

Lets create our Unity project and import the necessary items
SKILL LEVEL
Could be tricky
IT WILL TAKE
60 minutes
YOULL NEED
Unity
This is the open/new

project dialogue well
want to click Create
New Project.
our Project tab in Unity will

contain all the files you can
possibly use in your game.
Youll have scripts, sounds,
plug-ins, textures, images the list goes
on. This means that the Unity Project tab
can get messy very quickly. With a small
amount of planning at the start of your
project, you can keep the Project tab
tidy, which will help you work more
efficiently as your game grows.
Lets start by creating our game
project in Unity. Open Unity and, if
youre presented with a screen giving
you the option to open a previous
project or create a new one, choose
to create a new one. If Unity opens an
example project, then click File > New
Project. In both cases, now choose the
directory in which to create the project
by clicking the Set button. Once
youve selected the directory, click the
Create Project button and youll be
presented with an almost empty scene
view in Unity the only item currently
in the scene will be the Main Camera
GameObject.
A camera is a device through which
the player (the player being you, not
the in-game character) views the world
when playing the game. In our game,
well be directly controlling the in-game
character and programming our camera
to smoothly follow it.
Well need to save the scene before
we do anything to it, but before we do
that, we should create a folder that well
keep all of our scenes in. In the project
tab you should see Assets right-click it
and then select Create > Folder. A new
folder will appear and will be waiting
The import dialogue window shows all the files well be importing with the Unity package.
for a name. Give it the name Scenes and
then press Return. Now that we have a
folder to store our scene, we can save
the current one. Click File > Save Scene
and then double-click the Scenes folder
you just created, which should be visible
within the Save dialogue (you might
need to press the down arrow next to
the name to expand the folder selection
options). Name the scene GameScreen.
Prefabs can be
placed into any
number of scenes,
multiple times per
individual scene
The name of the scene is important:
its what youll use when you want to
display it, and needs to be descriptive
enough that when you have multiple
scenes in your project you can identify
what each scene is without having to
load it up to check. Were going to have
only two scenes in our project, but its a
good idea to try to get into good habits
from the outset. Were going to create
the game scene first and add the title
screen in after weve got the game
working as it should.
56 |
WorldMags.net
Youll recall we created our Scenes

folder inside a folder called Assets. You
can add files into your project in two
ways: you can drop files into the Projects
tab when in Unity, or you can just drag
them into the Assets folder on your
computer. Unity will automatically
detect files as they are added to your
games Assets folder put an asset in
it and it will appear in your Project tab.
Unity also boasts another really nice
feature called prefabs. These are prefabricated, reusable GameObjects that
are stored in the Project tab. Prefabs can
be placed into any number of scenes,
multiple times per scene. When you
place a prefab in a scene, you are
creating an instance of it. All prefab
instances are linked to the original
prefab and are essentially copies of it.
No matter how many instances exist
in your project, when you make any
changes to the prefab you will see the
change applied to all instances.
Prefabs are really useful for another
reason: they can be imported and
exported in the form of a .unitypackage
file. Weve created a set of prefabs that
were going to use in our game, and
over the next steps well download
them, import them into Unity and
then break down what they do and
how they will be used.
Build a game
WorldMags.net
| UNITY
HOW TO | SET UP YOUR GAME
1 Importing a Unity Package
Rather than go into the process of creating the walls

and floors from scratch, well just import the aforementioned
prefabs into our new project. Type the following URL
into your browser to download the .unitypackage file:
bouncingball.mobi/apps/files/sokobanPrefabs.unitypackage
its around 33MB.
Once the file has downloaded, go to Unity, click Assets
> Import Package > Custom Package A new dialogue
window will appear; locate the sokobanPrefabs.unitypackage
file you have just downloaded and double-click it, or click it
once and then click Open. Youll be presented with the Unity
import dialogue box, where you can see what youre about
to import and deselect anything you dont want. We require
all of the files, so make sure theyre all ticked and then click
Import. Youll see a progress bar briefly as Unity extracts the
assets and creates folders for them inside the Assets folder.
Once this is done you should have the following folders:
Materials, Prefabs, Scripts, Skyboxes and Textures. Some of
these relate to each other and some stand alone lets look
at some of the contents of these groups.
These are all the prefabs you should have after importing our Unity package file (see step 1 on the left).
3 Shaders
2 Textures and materials
Textures bring your 3D models, particles and

interfaces to life. Theyre image files that you wrap around
objects. The shaders that you use for your material will
determine which textures are required (more on shaders
shortly), but the principle is that you can put any image file
inside your Project tab to be imported and optimised for use
in your game. This extends even to huge, layered Photoshop
files theyre flattened on import, so they wont bloat the
size of your game. Well be using simple, small textures,
though. You dont actually apply a texture directly to a 3D
model; you apply a material. A material is essentially a shader
and texture (or multiple textures depending on the shader)
and one or more colours (again, depending on the shader).
For our game, were going to start by using very simple
materials so we can see what were creating and then make
it look nicer after weve got the logic working. In the Project
tab, click the Materials folder and youll see the materials
were going to use. We have five basic materials, each with
a unique colour, and if you click the Prefabs folder youll see
they have already been applied to the five prefabs. These
prefabs will provide the early building blocks for our level.
Click the MoonReflection skybox to reveal six images that get mapped to a cube.
QUICK
TIP
Shaders sound
complex, but
Unity ships with
around 80 of
them, so chances
are you ll never
need to think
about writing
your own. If
Unity doesn t
offer the shader
you need, take
a trip to Unity s
Asset Store to
find one that
does the job.
All the rendering in Unity is done with shaders small

scripts that let you configure how the graphics hardware is
set up to render the material. Unity ships with several
shaders, but you can also write your own or download new
ones from the Asset Store. If you want to browse the Asset
Store, you can click Window > Asset Store inside Unity. There
are different types of shaders, so lets look at what they do:
Surface shaders: These will be affected by lights and
shadows. Dont use surface shaders if your shader is not
doing anything with lights. They are easier to write than
vertex or fragment shaders.
Vertex and Fragment shaders: If your shader doesn t
need to interact with lighting, its best to use these. Shaders
written this way are the most flexible way to create effects
(even surface shaders are automatically converted to vertex
and fragment shaders), but that comes at a price: you have
to write more code, and it s harder to make these shaders
interact with lighting.
Unity also ships with mobile versions of some of the
shaders which, while not looking quite as polished, will
offer improved performance on mobile devices.
The materials were going to be using already have
their shaders set, but well cover how to change a shader
for a material when we improve the look of the game.
If you click the Scripts folder in the Projects tab, youll see
that we imported a custom shader when we imported the
sokobanPrefabs.unitypackage. Well be using only this one
custom shader, though all the rest will use the built-in
Unity shader selection.
4 Skyboxes
Skyboxes are sets of six images that get mapped to a

cube. Click the Skyboxes folder in the Projects tab and then
click the MoonReflection skybox in the right-hand pane. The
Inspector tab will change and youll see the six images that
our skybox is using. The images are of a desolate moon
landscape complete with Earth peeking over the horizon.
Were not using our skybox right away, but its good to
import it now so we dont have to repeat the import
instructions later. When we do use the skybox, its going
to be used in conjunction with a material with a reflective
shader. The cube map will be the reflection on the characters
space suit. As is true of most elements in games, faking it is
good enough. You could properly reflect the characters
surroundings, but doing this would be far too processorintensive for the effect achieved.
WorldMags.net
| 57
WorldMags.net
UNITY | Create a level

Now weve got the setup out of the way, lets add some cubes!
SKILL LEVEL
Could be tricky
IT WILL TAKE
2 hours
YOULL NEED
Unity
Here is our Start

function. It's called
when the GameObject
this script is attached
to is loaded.
ow we have the base of

our project, we can start
actually getting elements
rendered on the screen.
First well create the scripts and get the
code written, and then well break down
the code and explain what it does. In
the project tab, right-click the Scripts
folder and click Create > C# Script. A
new C# script will appear inside the
Scripts folder and itll be waiting for a
name, call the file Sokoban and then
press Enter. Double-click the file and
MonoDevelop will spring into life with
the file open and ready for code. You
will see some stub code that Unity
fills in for you. There is the standard
boilerplate using (this is letting your
script know that it can call things that
are defined in the other classes) and
then the class declaration Unity will
build this for you if you name your C#
script right after creating it, as we did.
There are two functions defined in
your new file: Start() and Update(). These
functions will be called if your script is
attached to a GameObject and placed
in the scene. Start() will be called when
your GameObject is initialised whereas
Update() will be called once per frame.
These functions are defined within
the boundaries of your class - our class
is called Sokoban, because we named
it that. You can also define variables in
your class, and they can be either public
or private (there are other modifiers too,
but lets keep it simple). The meaning
of public means that other classes can
address this variable and that its also
exposed to the Unity editing
environment. The syntax for defining
This is what the code you enter at the top of your Sokoban.cs file should look like
a variable in C# is specifying whether
its public or private, then the type of
variable it is (an integer, for example)
and then the variable name.
Our level data is going to be stored in
an array (see the box on the far right for
more info) not just any array but a 3D
array. This shouldnt be confused with
Now we have the

base of our project,
we can start getting
elements rendered
on the screen
3D as in 3D graphics; its 3D as its an
array where each entry is an array,
where each entry is also an array. The
first array contains levels; the second
layer of arrays contains rows; and each
of those arrays, the third layer, contains
column data. The numbers define what
kind of GameObject resides at that
location. The numbers are: 0 is a floor,
1 is a wall, 2 is a goal, 3 is a crate and
4 is the player.
Were going to need Unity to be able
to place a wall or floor prefab for us
58 |
WorldMags.net
automatically, so we need to let the

script know what prefabs are going to
be used for these purposes. Go ahead
and copy the code from the screenshot
above into your Sokoban script it goes
above the Start() function. After youve
carefully typed it all in, save it and go
back to Unity. If youve made any
mistakes, theyll be highlighted in
the Console tab (not the Inspector).
Go back to your script and copy the
Start() function from the left screenshot.
We have only one level in our game
right now, but were programming for
multiple as well add more later. If you
want to save game progress in Unity,
you can store it in PlayerPrefs and check
if you have a value with the HasKey()
function. Here, our code checks if we
have a currentLevel value stored and, if
we do, we use it. If we dont, then we
set the level to 0 and save the value.
Now, when you save your script and
go back to Unity, there will be an error
listed in the Console about BuildLevel
not existing. Well fix that next.
For each chapter of this tutorial, a
snapshot of the project will be available
online to download. The URL for this
chapter is: bouncingball.mobi/apps/
files/SokobanPart3.zip.
Create a level
WorldMags.net
| UNITY
HOW TO | BUILD THE LEVEL
1 Creating our function
We saw with the previous functions, Start() and

Update(), that the way a function is defined sets it up for
what arguments it will take and what it will return, if
anything. Like variables, functions can be public or private,
but if no value is set then it is assumed the function is private.
In our Sokoban script file, above the Start() function but
below our level arrays, type the code from the screenshot to
the right. With the BuildLevel function, the void at the start
means this function returns nothing (sometimes you might
use a function to perform a task based on input and return
some modified output). If there was anything inside the () at
the end of the function that would mean we can pass values
into the function to modify or base its code path on. The
function were creating is going to place the prefabs into the
scene based on the values in the levels array we created
earlier. You could in theory place these manually, but it would
become less and less feasible the more levels you add, so
instead well automate the process using a for loop.
2 The code inside
For loops work by taking a starting value, a condition

to check for, and a command to run at the end of each loop.
In the case of our first for loop we pass in an integer, i, with
a value of 0. We then tell the loop to run while i still has an
available value in the levels array. Finally, at the end of each
loop we increment i and then run a check to see if the
condition is still true. Breaking this down into pseudo code,
it would be something along the lines of knowing that i is
0, does the levels array have an entry at 0? Yes. Run the code
between my opening and closing brackets. Increment i.
Knowing that i is 1, does the levels array have an entry at
1? No. End the loop.
We use two for loops because our level data is broken up
into rows and columns, so the first loop will retrieve the row
array and the next one will extract the column number that
represents the type of prefab we need to place in the scene.
Once we know the number we need to turn it in to prefab
and place it.
To check what the number is, we use a switch() statement.
A switch() statement is a function that takes an argument
and acts based on that value. You can see that when we call
the switch() statement, we pass it a number (in the form of i)
between its opening and closing brackets, and then the
switch() statement will pick the appropriate block of code
based on the number in this case attaching the correct
prefab for the number.
The Inspector panel should look like this once youve added your script.
The BuildLevel() function this section of code will enable us to build our game levels.
3 Instantiation of Prefabs
So, how do we get Unity to create the prefab in

the scene and place it? We use the Instantiate() function.
Instantiate() takes three arguments between its opening and
closing brackets: a reference to the object to create, the
location to create it at and the rotation of the object. Well
get to how we pass a reference to the object in a moment, so
lets look at the position first. Normally in a 2D game youd be
placing the tiles in the X (horizontal) axis and the Y (vertical)
axis. Because were displaying the game in 3D, we place our
blocks in three axes, but we actually wont use Y beyond this
our player movement will be X and Z only. As for the
rotation, just stick with the default value. You can read up
about quaternions if you want to know more, but they are
beyond the scope of this tutorial.
JARGON
BUSTER
An array is data
structure that
stores a
collection of
values of the
same type.
Arrays are useful
because instead
of having to
separately store
related data
in different
variables you can
store them as a
collection in just
one variable.
4 Linking it up, testing it out
Now we have our Sokoban script file looking like the

screenshots, lets test it out. Were going to need to attach an
instance to a GameObject in the scene and then let the script
know which prefabs tie up to which variable. In Unity, click
GameObject > Create Empty. A new GameObject will appear
in your Hierarchy called GameObject. Click it once to rename
it, call it Sokoban, then drag your Sokoban script file from
your Scripts folder in the Project tab onto it. In the Inspector
tab, youll see something like the screenshot on the left, but
yours will have None (Transform) written in them. In your
Projects tab, click the Prefabs folder and drag each prefab
(use the block Player prefab for now ignore the Player
folder) to the corresponding slot in the Inspector until it
looks exactly like the screenshot.
Youre done! In the top menu in Unity click Edit > Play and
youll see something flat. Its hard to make out from this
angle, but its actually a level from the game rendered using
your prefabs. Switch to the Scene tab to see a better angle.
WorldMags.net
| 59
WorldMags.net
UNITY | Adding textures
BEFORE
AFTER
The basic colours on our

prefabs work but they don't
look too pretty
After we change the colours

to textures, the game has a
much more professional feel.

With a little bit of love in the way things
appear, your game can start to truly take
on a life of its own
SKILL LEVEL
IT WILL TAKE
30 minutes
YOULL NEED
Unity
60 |
ur game is starting to take shape. We have a

level being drawn into our scene and, if you have
a good look in the Scene tab (you can use the
pan tool highlighted in the first section to move
around), youll see that it represents the data in our levels array
perfectly. Thats all well and good, but it does look quite bland.
In this tutorial, were going to change the materials we have
on our prefabs and update the camera position and settings
with a very small amount of effort on our part, we can
completely change the look of our game.
By the end of step 7 well have something that still isnt
quite playable, but is definitely on its way to looking like a
proper game.
For each part of this tutorial, a snapshot of the project
is hosted online to download. The URL for this part is
bouncingball.mobi/apps/files/SokobanPart4.zip.
STARTING IMAGE
Its good to start simple and focus on getting the

mechanics of your game working first. Sometimes
better graphics and sounds are the last things to go
into games. Placeholder assets from resources such as
turbosquid.com can be invaluable for getting started.
WorldMags.net
Adding textures
WorldMags.net
| UNITY
HOW TO | IMPROVE YOUR MATERIALS
1 The Crate
2 The Floor
Do the same with the Floor material, but

drag the moonsurface texture onto the None
(Texture) box, then click the Shader drop-down
just above that and select Mobile > VertexLit
again. Remember, if we had dynamic lights wed
be better off selecting a different shader.
Were not going to apply a texture to

our goal, just a new shader. To make them stand
out as targets, well make them appear to glow.
Change the shader for the Goal material to Selfillumin > VertexLit. This means that even if there
was no light in the scene, theyd be visible.
4 The Player
5 The Wall
position
6 Camera
and colour
Go to the Materials folder in your Projects

tab and click Crate itll appear in the Inspector
tab. Now click the Textures folder and drag the
flag texture onto the box in the inspector that
says None (Texture). Click the Shader dropdown above that and select Mobile > VertexLit.
Were going to replace our simple player

cube for an animated 3D model of an astronaut
soon, so just a little change here. Change the
shader for the Player material to Self-illumin >
VertexLit. Again, this tile will be visible without
any light in the scene.
Now well use a normal map a way to

add details such as dents to flat surfaces. Select
the Wall material and pick the Mobile > Bumped
Diffuse shader. Drag the rock_seamless_256
texture to the top slot in the Inspector and the
rocks_normals texture to the bottom slot.
3 The Goal
Select the Main Camera in the Hierarchy tab and

then, in the Inspector tab, set the position X to
3, the Y to 6.4 and the Z to 0.15. For the rotation
set the X to 67.5. Then, click the blue colour next
to Background and change it to black.
FINAL
IMAGE
7 Ambient light
Our scene is quite dark, so lets add more

ambient light. From the top menu in Unity, click
Edit > Render Settings, and in the Inspector tab,
click the grey colour next to Ambient Light.
Enter 140 for each of the R, G and B values, then
close this colour-adjustment window.
Our game has

changed hugely in
a short time! The
materials for our
prefabs look much
better than the solid
colours, but it doesnt
have to stop there.
You can always revisit
these to change the
environment of your
game completely.
WorldMags.net
| 61
WorldMags.net
UNITY | Add a character

A cube just wont cut it what we need is an astronaut!
SKILL LEVEL
IT WILL TAKE
90 minutes
YOULL NEED
Unity
hile our game is starting to

look more polished, its still
let down by our character.
In this part, were going to
replace our cube with a proper
character, as well as start to lay the
groundwork for controlling all the
elements and animating them. Lets
begin by replacing our character.
Youve already imported the character
prefab its in your Prefabs folder. There
is a folder there named Player with a
previously unused prefab named
PlayerModel. Click your Sokoban
GameObject in the Hierarchy tab and
drag PlayerModel from the Projects tab
to the Player slot in the inspector tab.
If you play your game now in Unity,
(in the top menu in Unity click Edit >
Play), youll see that the player model
is already displaying with his body
hanging out of the bottom of the level.
Move the floating camera around in the
Scene tab to see for yourself. We can fix
that! First, stop playing your game in
Unity (its very important to do this
Unity makes only temporary changes
if your game is running).
While our game is starting to look

more polished, its still let down by
our main character
To fix this, we need to change the Y
position we Instantiate() the player
prefab with. Edit your Sokoban script in
MonoDevelop and find the line in the
BuildLevel() function that looks like this:
thePlayer = Instantiate(player,
new Vector3 (i, 0, j), Quaternion.
identity) We need to change the 0 to
a 1 this will raise the height at which
This is our new character much more fun than that cube guy, eh?
the player is created and place its feet
on the floor. While were here, well make
another change, too. Just below the line
thePlayer.name = "Player"; add:
int pRow;
int pCol;
bool isPlayerMoving;
pRow = i;
bool isPlayerRotating;
pCol = j;
int rotationSpeed;
These two variables are going to store

the column and the row that the player
is currently on in the level array. By
storing these two values, we can check
all the tile types around the player and
see if any move the player tries to make
is valid or not. You may have noticed
that we havent actually initialised these
variables anywhere, so lets do that now.
Head over to the top of the Sokoban
script file and just below the line
GameObject theCrate; add the
following lines of code:
The Update() function is called once every frame, so the game will be constantly checking if the player is trying to move.
62 |
string movingCrate = "";
WorldMags.net
int movingSteps;
int tRow;
int tCol;
Animation thePlayerAnimation;
Well cover what those variables do

on the opposite page, but there is still
some preparatory work we need to
do first. Were going to create a
CheckIfPlayerIsAttemptingToMove()
function, but lets write the shorter code
to call it first. In the Update() function,
below the Start() function, add the code
from the screenshot at the bottom left.
Now youre ready to type in the code
from the screenshot on the top right of
the opposite page. Include it just below
the BuildLevel() code you created earlier,
before the Start() function. Theres a lot
there, so if its too much or hard to read,
you can get a snapshot of the project at
this point from bouncingball.mobi/
apps/files/SokobanPart5.zip you can
then copy that section of code into your
own project.
Add a character
WorldMags.net
| UNITY
HOW TO | CHECK FOR USER INPUT
1 The variables
Lets look at what our new variables store.

pRow, pCol, tRow and tCol will store the players
current position in the array and, after it tries to
move, its target position in the array thats what
the p and t prefixes stand for. If you imagine the
game from the top down and place the player in
the array, we can easily see what tiles are around it.
We know that if the array entry to the left of the
players position is a 1 then its a wall so the game
shouldnt process the move if the character tries to
move in that direction. If an attempted move is
allowed, we set the isPlayerMoving bool (true or
false value) to true. Well use this for a MovePlayer()
function, which well write in the next instalment.
The same is true for the isPlayerRotating bool, but
this is set if the player tries to turn.
If we detect when trying to move that the player
will be pushing a crate, we store the name of the
prefab in the movingCrate string variable (a string
is just a piece of text). This variable will also be used
in the MovePlayer() function.
The rotationSpeed and movingSteps variables
will be used to call the movement method multiple times
until we have successfully completed our movement.
Finally, the variable with the name thePlayerAnimation
is one were going to use in our next instalment it will store
a reference to new characters animation.
3 Moving forwards
2 Checking for input
Its good practice to try to keep your functions

relatively small, so were splitting up our input check and
player movement functions. Weve already covered checking
that a valid move being made, so lets cover how we check
for user input. In our CheckIfPlayerIsAttemptingToMove()
function youll see the first line is:
if (Input.GetKeyDown (KeyCode.UpArrow)) {
The Input.GetKeyDown() is a function that takes the input of

a key we want to check and returns a true or false based on
whether it is pressed down or not. The Input class has a few
different checks for key actions and Input.GetKeyDown() will
return true only for the frame the user actually presses the
key holding it down will not repeatedly return true.
This is what your project should look like by the end of this instalment.
JARGON
BUSTER
There are many
types that a
variable can be
but the ones
well be using
most are ints,
which are whole
numbers; floats,
which are
numbers that
can have a
decimal point;
and bools,
which represent
a value of either
true or false.
Weve got our if method for moving forward, but lets

look at what happens inside it. Our character will always turn
by increments of 90 degrees, so its rotation will always be
one of four values: 0, 90, 180 or 270 degrees. All we do is pass
the value of the characters rotation Y to a switch statement
and let it pick an outcome based on the input value.
The best way of working out what axis a model is rotating
on is to imagine the axis as a skewer running through your
model. Mentally spinning the model on the skewer lets you
visualise which axis youre rotating about.
Meanwhile, the switch statement is working out which
way we need to move inside of the array, essentially working
out what the characters view of forwards is and storing the
outcome in our tRow and tCol variables. We then check to
see if the tile type is a valid tile to move to either a floor tile,
a goal tile or a crate and then take one of two outcomes. If
the target tile to move to is a floor or a goal tile, we set the
isPlayerMoving bool to true and reset the movingSteps
counter we created earlier to 0. If the target tile has a crate
on it, we check that the crate can be pushed. If it can, we
store a reference to the crate prefab in the movingCrate
string variable and then set the isPlayerMoving bool to true
and reset the movingSteps counter we created earlier to 0.
4 Turning around
Where we check if the left or right arrow key is

pressed, the code is very similar; the only difference is that
the rotationSpeed variable is either a negative or a positive
value. Rotation is an iterative process one that happens
frame by frame rather than all at once so we have quite a
small value. This value must go into 90 exactly, otherwise it
wont work. Five goes into 90 18 times, so is fine to use. We
also set the isPlayerRotating bool to true.
WorldMags.net
| 63
WorldMags.net
CHECK OUT MORE

GREAT BOOKAZINES!
THE CLOUD
COMPUTING MANUAL
iPAD MINI:
YOUR COMPANION MANUAL
Save money and collaborate better on

documents by using cloud services instead
of traditional desktop software. This guide
for Mac and iOS users shows you how to get
more from Google Docs, Dropbox, SkyDrive,
Evernote, Spotify and much more. Plus a
look at Adobes Creative Cloud suite.
With the all-new iPad mini with Retina

Glvsod|/#Dssoh#kdv#qdoo|#eurxjkw#wkh#:1<0
inch iPad in line with the power of its full-size
lSdg1#Wkh#qhz#D:#dqg#P:#surfhvvruv#pdnh#
wkh#qhz#lSdg#plql#d#jldqw#ohds#iurp#wkh#uvw#
generation one. This guide will show you
everything it can now do!
WorldMags.net
WorldMags.net
ON SALE NOW!
DELIVERED
DIRECT
TO
YOUR
DOOR
ORDER ONLINE AT WWW.MYFAVOURITEMAGAZINES.CO.UK
FIND US IN YOUR NEAREST SUPERMARKET,
NEWSAGENT OR BOOKSTORE!
BUDGET TABLETS: UNLOCK

ANDROIDS HIDDEN POWER
RASPBERRY PI
MADE EASY
It doesnt matter how much or how little

youve spent on your Android tablet.
This title will help you squeeze more from
your purchase: more power, more battery
life, more productivity, and more fun. Our
experts have put together killer guides to the
Kxgo/#Qh{xv#:/#Nlqgoh#Iluh#dqg#pruh1
The diminutive, cheap Linux computer

is taking the world by storm, and its
time you joined the legion of hackers
dqg#vwxghqwv#qglqj#rxw#pruh#derxw#
computing with the ultimate learning
tool. Filled with guides, tips and plain
English advice for all RPi users.
WorldMags.net
WorldMags.net
UNITY | Adding movement

Make the game truly look and behave like a real game
SKILL LEVEL
IT WILL TAKE
90 minutes
YOULL NEED
Unity
o far, weve replaced our

character and are now
detecting input, but theres
no indication that anything
is actually happening. Lets fix that its
time to make our character move, and
with that, be able to actually solve our
levels. In this instalment, were going
to cover moving our character and
crates, as well as triggering the built-in
animations of our astronaut as he
walks around the level. Were going
to achieve this by creating two new
functions in our code: MovePlayer() and
RotatePlayer(). Were also going to need
to modify our Start() and Update()
functions to make it work.
Lets make the modifications to our
existing functions first, then deal with
creating the two new ones.
Previously, we created a variable
called thePlayerAnimation. Its purpose
is to store a reference to the astronauts
animation component. We cant set this
like we did with our prefabs because
we need to target the instance on the
scene, not the one in the Project view.
Its time to make our character

move and, with that, be able to
solve our levels
Handily, Unity provides a really simple
way to get this reference at run time.
Our astronaut player prefab has a child
GameObject called playerAnimated, and
we can get Unity to scan through all the
Were adding two new function calls to our Update() function.
66 |
By the end of this instalment well be able to complete our level... if you can solve it.
GameObjects currently in the scene
and find the first one with this name.
The function to enable this is called
Find(). Its an expensive call (in terms
of processor resources) to make, so we
need to store the result, meaning that
we dont need to call it every time we
need to target the characters animation
component. Inside the Start() function
and below the BuildLevel() call add the
following code:
thePlayerAnimation = GameObject.
Find("playerAnimated").animation;
thePlayerAnimation.Play("idle");
The first line of that code is doing two

important things: first of all, it gets the
reference to the GameObject using the
Find() function we just covered, and then
its getting the animation component of
the newly found GameObject and is
assigning it to our variable, which is
called thePlayerAnimation.
The second line is calling a function
that all Animations have, and thats the
Play() function. In its brackets, it takes a
parameter, which is the name of the
animation you want to play. Our
astronaut has two built-in animations:
idle and runforward. The first is a little
animation for when theres no movement
WorldMags.net
taking place, while the second is a

walking/running animation for when
hes in motion.
Our next change will need to be to
the Update() function. If you look at the
bottom-left screenshot, youll see how
it needs to appear (you can ignore the
grey lines that start //, though those
are comments, and dont affect the
code). Go ahead and make those
changes now.
What were doing is checking the
isPlayerMoving and isPlayerRotating
bools we created in the last instalment
to determine whether a successful
attempt was made to move. If one
was, then well stop calling the
function and will instead call either the
MovePlayer() or RotatePlayer() function.
Once either of these functions
completes its run the player has
either moved or turned the bools
are set to false again and the
will start to be called again.
For each chapter of this tutorial a
current snapshot of the project will be
hosted online so you can download it.
The URL for this part is bouncingball.
mobi/apps/files/SokobanPart6.zip
Adding movement
WorldMags.net
| UNITY
HOW TO | MOVE YOUR CHARACTER
1 The movement function
Copy the function from the top-right screenshot into

your Sokoban script along with your other functions add
it under all of our CheckIfPlayerIsAttemptingToMove code.
Youve seen most of these variables and functions before but
there are a couple of new things, so well explain what they
do along with what the function as a whole does.
2 Animation and movement
When we first call our MovePlayer() function, the

variable movingSteps will be 0. For all subsequent calls (there
will be nine more) this wont be the case, so its a perfect
opportunity to call something that we want to happen only
once during each move the player makes its perfect for
starting an animation. When the character isnt moving, its
playing an idle animation and shifting around subtly on the
spot. Rather than just jump to instantly walking, we can
smoothly merge from one animation to another. Unity
makes this so simple that its just one line of code:
thePlayerAnimation.CrossFade ("runforward");
Next up is the actual change in position of the character

and the crate. The concept of forwards for in-game
characters usually involves trigonometry you need to work
out how to convert the rotation of the character into X and Y
components. Unity kindly takes all the hard work out of this
and gives you a simple 3D vector to move something
forwards. The line of code is thePlayer.transform.
Translate(Vector3.forward * 0.1f); .
This line is telling the variable thePlayers transform
(which stores its 3D position, rotation and scale) to move the
character forwards by 0.1 units. Each game tile is one unit in
size, so we need to call this code 10 times for the character to
move from one tile to the next. As our character is rotated, its
concept of forwards is updated. After this, we check if were
moving a crate. This can be established by checking if the
movingCrate string has a value. We cannot move the crate
forward by its own Vector3.forward because the crate does
not rotate its forward vector always points in the same
direction. To get around this, we can pass a second
parameter into the Translate() function that specifies what
Translate() is relative to and so we pass in the rotated
characters transform.
After we have moved the player and any crates, we
increment the movingSteps variable by 1 with the line
movingSteps++; .
When the MovePlayer() function is called for the tenth
time, it will trigger an if statement which crossfades the
animation from runforward back to idle, and sets the
isPlayerMoving bool back to false.
Much smaller this time round, this function turns our player.
This function will deal with moving our character and crates from one part of the level to another.
3 Array modification
Once the player has moved from one tile to the next,
we need to update our level array to reflect the changes.
Thats done with the following lines:
levels[currentLevel][pRow + tRow][pCol + tCol] += 4;
levels[currentLevel][pRow][pCol] -= 4;
JARGON
BUSTER
Every object in a
scene has a
Transform. Its
used to store
and manipulate
the position,
rotation and
scale of the
object. By calling
the Translate()
function that
belongs to the
Transform you
can increment
the position of
the GameObject.
The first line updates the tile we moved to and the second
line updates the tile we have moved from. We add or remove
4 from the value that is already there (0 for floor, and so on)
rather than just overwriting the value, because that way we
know if the player is on a goal tile or not.
After that, the movingCrate string is checked for a value
and, if we have one, the same logic that was applied to the
player position above is applied to the crate position. The
crate instance is then renamed to reflect the tile it now
resides on and the movingCrate variable is reset.
Finally the variables that represent where our character is
positioned in the array, pRow and pCol, are updated.
4 The rotation function
Our RotatePlayer() function is simpler enter the code

in the bottom-left screenshot. It rotates the player by the
amount we set in the rotationSpeed variable in the last
instalment. After that, we check if the current rotation is a
multiple of 90 and, if it is, set the isPlayerRotating bool to
false. You may not have seen the modulo operator before it
looks like a percentage sign. It divides the first number by the
second number and returns the remainder; if no remainder is
returned, you know the first number is an exact multiple of
the second. By checking for a multiple of 90, we know when
the player has completed one quarter of a full turn. Now, test
your game out using the left, right and forward arrow keys!
WorldMags.net
| 67
WorldMags.net
UNITY | Adding details
Flesh out your game more

Add a title screen and win scenario to make your game almost complete
SKILL LEVEL
IT WILL TAKE
60 minutes
YOULL NEED
Unity
ur game is now fully

playable if a little
unfinished. Its important
to get to a playable state
early on so you can see if your game
feels right. Some people will even start
with pencil and paper for their first
prototypes it can save a lot of time
if your game turns out to be a dud.
Sokoban is a classic, so we know the
gameplay for our game is fine.
Remember, though, sometimes its
better to cut your losses rather than
carry on developing something that
doesnt work. Dont be afraid to take
stock and then start again.
You may have noticed while
testing your game that you can get
into a situation where you can no
longer win the level. Were going to
need a way of resetting the level, as
well as a way of knowing when a level
has been finished successfully. Knowing
the latter is important, because were
going to be adding two more levels.
Were also going to add a basic title
screen that lists the controls and the
goal of the game. After this part, you
will be able to start your game, play
through three levels and have it return
By the end of this part, your game will be playable from beginning to end.
Youll be able to start

your game, play
through three levels,
and have it return
to the title screen
to the title screen when youve finished

it. It will be easy to expand the number
of levels if you want to take your game
further outside of this tutorial.
For each part of this tutorial a
snapshot of the project is hosted online
so you can download it. The URL for this
chapter is bouncingball.mobi/apps/
files/SokobanPart7.zip
HOW TO | ADD MORE CONTENT TO YOUR GAME

THE TITLE
SCREEN
In the steps
opposite, we add
a title screen
with some basic
text. It doesnt
look great but it
gets the job
done. After the
project is
complete, you
could update it
to include more
information and
look slicker.
68 |
1 Adding a title screen
Click File > New Scene. Save that new scene into your
Scenes folder and call it TitleScreen. Click your Scenes folder
in the Projects tab. Now click File > Build Settings. Drag
TitleScreen to the Scenes In Build area in this new window,
then drag the GameScreen scene over. Close the window.
2 Title screen text
In the top menu, click GameObject > Create Other >

3D Text. Set the New Text GameObjects position in X, Y and Z
to 0. Set the Anchor to middle center and rewrite the text to
Press Space to Play. Set the Main Cameras position to X: 0, Y:
0 and Z: -10. Set the Main Cameras background to black.
WorldMags.net
Adding details
WorldMags.net
| UNITY
INGAME
OPTIONS
3 Title screen controls
4 Add a new level
5 and another new level
6 Restarting the level
Right-click the Scripts folder in the Project tab and

click Create > C# Script. Call the script TitleScreenControls
and double-click it to open it. Make it like the screenshot
above. When done, save and drag the script from the Projects
tab onto the New Text GameObject in the Hierarchy tab.
Following the same process as the previous step, add

a , to the end of the last level array and add the new array
in the screenshot above. Youll notice that the shape is
irregular the level reflects this shape when on screen. There
is no rule that the array entries need to be the same length!
At the top of our Sokoban script we have our levels

array. To add a new level, add a , after the closing bracket }
of the first new int and then add in the new array entry that
is in the screenshot above. If you dont understand this or
cant get it to work, download the SokobanPart7 snapshot.
Currently we
restart the game
with a press of
the R key. This
could be
changed to a
button on the
screen or added
inside a pause
menu. Once this
project is
complete it
would be a
good idea to
revisit it and try
to make some
changes.
If we push a crate into a dead end, it might not be

recoverable, so we need to be able to restart the level. We
saw how to load a scene when adding our title screen
controls. Add the code above to our Sokoban files Update()
function. When you press the R key, the level will reset.
JARGON
BUSTER
7 Check level completion
Copy the code above into our Sokoban script as a new

function. This code loops through the array and increments a
counter every time it finds a crate on a goal tile. We know the
total number of crates on a level (our BuildLevel() function
stores that value). If the two values match, we return true.
8 Calling the function
We need to call our new function. Add the code above

into our MovePlayer() function, below the pCol += tCol
line. If it returns true, the level is finished. We increment the
currentLevel counter, checking in case all levels are finished,
and then load the correct scene based on the value.
WorldMags.net
Before you can

load a scene, you
have to add it to
the list of scenes
used in the
game. Click File >
Build Settings in
Unity and add
the scenes you
need to the level
list there. When
loading a new
level, all
GameObjects
will be destroyed.
| 69
WorldMags.net
UNITY | Move the camera
BEFORE
AFTER
When the view is static, the

player needs to transform
the direction based on the
characters rotation.
When the camera follows

the character, the movement
is more intuitive and easier
to understand.

Just as with moving our character, we can
also move the camera to give the game
a more dynamic feeling
SKILL LEVEL
IT WILL TAKE
40 minutes
YOULL NEED
Unity
70 |
e can now move about freely in our game, but

some people might find the control scheme
confusing. The up arrow key can actually move
the character up, down, left or right depending
on the way theyre facing. In this part, were going to add a
function to the camera that will always keep it smoothly
aligned behind the player. Well keep ours simple and and
break up the creation of the function into seven simple steps.
Right-click on your Scripts folder and click Create >
C# Script. Call the script UpdateCameraPosition. Make sure
the GameScreen scene is loaded double-click it if not and
then drag the UpdateCameraPosition script to your Main
Camera GameObject in the Hierarchy.
For each part of this tutorial, a snapshot of the project is
hosted online so you can download it. The URL for this part
is: bouncingball.mobi/apps/files/SokobanPart8.zip.
STARTING IMAGE
Wherever you move in the level and whatever

direction you face, the camera is stuck in one single
position, and larger levels would fall outside of the
cameras view. With only the character moving on the
screen, the game could also start to feel rather static.
WorldMags.net
Move the camera

WorldMags.net
| UNITY
HOW TO | CREATE THE CAMERA CONTROL FUNCTION
1 Creating the variables 2 Update Start()
3 Update Update()
Our script has only one variable that we

need to define. Its a reference to the transform
that the camera is going to use as its target. We
cant make it public and set it in the Inspector,
because the target is the character and isnt
created yet. Create the target variable as above.
All we do to the Start() function is add a

call to the PositionCamera() function that were
going to create. We do this on Start() as well as
Update() because we want it to happen right
away, not just after the first frame. If we waited
for Update() to be called, you would see a jump.
Now we add the same call to the

Update() function. Like the Start() function, all
the Update() function needs to do is call the
PositionCamera() function once every frame.
This will make sure that whenever the character
is moved, the camera will follow closely behind.
4 PositionCamera()
5 Acquiring a target
6 LerpAngle()
Below the Update() function, create the

PositionCamera() function as above. Well create
a stub function and populate it over the next
three steps. The function will find our target and
store the reference to it, establish the angle to
move to, and then adjust the camera.
Add this code inside the PositionCamera()

function. We dont acquire the target in Start(),
because theres a chance that our Player prefab
wont be instantiated by the time Start() is
called. We save the result to a variable, and
check if the target isnt acquired yet.
Add the above code after the previous

steps code. LerpAngle() works out our camera
target angle. It takes a start point and an end
point, and a float between 0 and 1. A float of 0
returns the first value, 1 returns the second.
Anything in-between will interpolate the values.
FINAL
IMAGE
7 LookAt()
Add this code below the previous step.

This sets the camera to the same position as the
character and moves it nine units higher. We use
the currentRotation established previously to
move the camera away from the character by
four units. For rotation, we use LookAt().
With our new camera

movement function,
we can support levels
of any size, because
the camera will track
the player as he
moves. The game also
feels more dynamic
and looks more
exciting. Small
changes can often
produce large results!
WorldMags.net
| 71
WorldMags.net
UNITY | Polishing up your game

Now to add those finishing touches and complete our game
SKILL LEVEL
Could be tricky
IT WILL TAKE
40 minutes
YOULL NEED
Unity
ith our game nearly

complete, we just need
to add a couple of final
elements before itll be
ready as a desktop app (well turn it into
a mobile game in the last instalment).
The plain, black background is a bit
on the boring side, so lets make things
look more fancy, shall we?
In this tutorial, well be importing
another UnityPackage file, which
includes a new prefab, texture, material,
script and sound. The prefab is going to
be a starry sphere that will encase our
level, and the sound is going to play
whenever the player pushes a crate
onto a goal tile. You could use this as a
starting point for adding other sounds
to your game its important to give
feedback to the player wherever
possible, because it reinforces whether
what theyre doing is a good or bad
action. If youre struggling to find sound
effects online, a quick trip to the Unity
Asset Store will provide you with the
audio you need, either free or paid-for.
We just need to add stars and sounds and then our game will be complete.
Were using a prefab for the starry
sphere, because getting the sphere to
show textures on the inside requires
code that goes beyond the level of this
tutorial. The process will be explained,
but the code will not be shown. It will,
however, be fully commented in the
snapshot download of this chapter

available at bouncingball.mobi/apps/
files/SokobanPart9.zip.
Feel free to look into the SkyDome
script yourself in MonoDevelop if youre
feeling brave and/or curious about its
inner workings.
HOW TO | ADD STARS TO YOUR SCENE
1 Importing our assets 2 Adding the sphere

As mentioned earlier, were going
to import assets for the starry sphere.
Go to bouncingball.mobi/apps/files/
SokobanPart9.unitypackage and download
the file. Once its downloaded, you can
double-click to open it in Unity. Import all
the available files and youll see you have a
new folder called Sounds in your Project tab.
The other items will go into existing folders.
72 |
In your GameScreen scene, drag the

new prefab, Star Sphere, onto the Hierarchy
tab. Its important to add it to the Hierarchy
and not the Scene tab to ensure its at the
right coordinates. The Star Sphere should be
at position X: 0, Y: 0 and Z: 0 with a scale of X:
100, Y: 100 and Z: 100. The stars material and
SkyDome script should already be attached
and visible in the Inspector tab.
WorldMags.net
3 The sphere explained
Normally, on a 3D model, the material

is visible only on the outside its redundant
to render something if its not seen. This
presents a problem, since were on the inside
of our sphere. The solution is to reverse the
triangles, normals and UV map of our sphere.
The SkyDome script handles this for you, but
is rather advanced for this tutorial; its useful,
though, so do look it up when confident.
Polishing up your game

WorldMags.net
| UNITY
HOW TO | ADD SOUND TO YOUR GAME
Configuring the audio clip

The tip to the right explains a bit about 2D and 3D
1
sounds. For our game were using 2D sounds, so
theyre not affected by 3D positioning. Currently, our clip
is 3D. To change this, we need to go to the Sounds folder in
the Projects tab and click on our crateOnGoal sound. Look
at the Inspector tab, and youll see what settings you can
configure for the sound. We want the tickbox titled 3D
Sound. Untick the box and then click Apply. Our sound
will now be processed into a 2D sound.
Adding the Audio Source

Select our Sokoban GameObject in the Hierarchy, then
2
from the top menu in Unity, click Component > Audio
> Audio Source. A new section will appear in the Inspector
tab enabling you to configure the Audio Source. Drag the
crateOnGoal sound from the Projects tab into here and place
it in the Audio Clip slot that currently says None (Audio
Clip). When you drag the clip on it, the name should update,
and below that you should see This is a 2D Sound.
if its not there, you can add one by clicking Component >
Audio > Audio Listener.
Setting up the Audio Source

If you test your game now, youll hear the crateOnGoal
sound as soon as the game starts. To fix this, select
the Sokoban GameObject, then untick the box titled Play On
Awake in the Inspector.
4
Calling the code

5 Our project is ready to have the audio called via code.
Were going to want to call our sound when a crate

has finished moving and its placed on a goal tile. We
already know when a move has finished we check for it
in the MovePlayer() function. So below the line
movingCrate = ""; add the following code:
if (levels[currentLevel][pRow + 2 * tRow]
[pCol + 2 * tCol] == 5) {
audio.Play();
}
Checking the Main Camera

An Audio Source needs an Audio Listener to hear any
emitted audio; without one, there is no sound. The
Main Camera normally has one by default, but you can
double-check by clicking its GameObject in the Hierarchy
panel, then looking for Audio Listener in the Inspector tab;
3
Adding more sounds

6 If you wanted multiple sounds, you could create
some public AudioClip variables in your Sokoban

script and then call audio.PlayOneShot() as a
function, passing the AudioClip variable into it.
WorldMags.net
AUDIO OPTIONS FOR

UNITY GAMES
Audio in Unity requires two components:
an Audio Source to emit the sounds, and
an Audio Listener to hear them. Sounds in
Unity can be 3D, where they take the
positions of the Audio Source and Audio
Listener into account and modify how the
sound is heard; or 2D, where they will be
played as-is regardless of where the
Audio Source or Audio Listener are
located. For our game, well be using
the simpler 2D sounds.
| 73
WorldMags.net
UNITY | Going mobile

Lets look at whats required to get our game running on mobile devices
SKILL LEVEL
Taking it further
IT WILL TAKE
30 minutes
YOULL NEED
Unity
ow that weve finished all

the core parts of our game,
we can think about where
to take it next and top of
that list would be mobile support. Most
people trying out Unity will be running
the free version of Unity, which includes
the option of a 30-day trial that allows
support for deploying to iOS, as well as
Android devices. Of course, youll need
a compatible device to test your game
on once its ready. To be able to test
your game on an Apple device, follow
the instructions given by Unity here to
get things set up: docs.unity3d.com/
Documentation/Manual/iphoneGettingStarted.html. This is a good
guide, and should see you through the
harder parts or setting up Unity with
mobile SDKs.
Were going to keep our controls
really simple for our game: there wont
be a visible virtual joystick or button in
sight. Because we need only three
functions left, forwards and right
well be breaking the screen up into
This is how well break down the touch input into forward, left and right controls.
three sections and setting everything up
so that tapping in the left-hand section
turns you left, the centre section goes
forwards and the right-hand section
turns right. You can see how the
sections will be broken up in the
screenshot above.
For each chapter of this tutorial a

current snapshot of the project will be
hosted online so you can download it
and this one is our game completed,
including movement controls. The URL
for this chapter is bouncingball.mobi/
apps/files/SokobanPart10.zip
HOW TO | PREPARE YOUR PROJECT
1 Tweak the title text
As well as adding touch controls to

our GameScreen scene, well also need to
add them in to our TitleScreenScene.
Double-click the TitleScreen scene in your
Scenes folder and click the New Text
GameObject. Change the text in the
Inspector to Press Screen or Space to Play.
Ideally, youd actually make the text different
for every platform, but lets keep it simple.
74 |
2 Add touch controls
Double-click your TitleScreenControls

file in the Scripts folder and change the line
if (Input.GetKeyDown (KeyCode.
Space)) { to be if (Input.GetKeyDown
(KeyCode.Space) || Input.touchCount
>= 1) { as in the screenshot above. Were
not actually checking for touch input on any

particular part of the screen, just that the
screen itself has received input.
WorldMags.net
our
3 Adjusting
movement check
Edit your Sokoban script file and go to the
function. We havent created the touchdetection function yet, but we can still add
the calls. Check for key input in three places:
KeyCode.UpArrow, KeyCode.LeftArrow and
KeyCode.RightArrow. Make those three
instances look like they do above.
Going mobile
WorldMags.net
| UNITY
EXPLAINED | YOUR TOUCH FUNCTION
The function
Splitting the screen into thirds
Copy the function from the screenshot above into your

1
Sokoban script file. Youll see that the function takes
an argument between its opening and closing brackets,
which means we can reuse the function to check forward,
left and right touches by passing in what direction we
want to check for. Code reuse is a big part of programming
efficiently and keeping code maintainable as it gets larger.
When splitting the screen into thirds, you need to

consider the different screen sizes of devices iOS has
two sizes for iPhone plus one for iPad, while Android has
many. You cant just assume, so were having Unity return
the screen size to you and then break that into three parts.
Touches
iOS devices are capable of tracking multiple fingers
touching the screen simultaneously. You can access
data on the status of each finger touching the screen by
accessing the Input.touches property array. In our function,
we always get the value of the first finger touching the
screen and perform the checks on that.
2
Checking left, right and forwards

We check against the FirstTouchForControlType
functions input string to see if we are checking for
left, right or forwards. Once we have a match, we go into
the if statement. The stored values for each third represent
the largest number in the third, so we are able to check if
the touch point is higher than one and lower than the other;
then we can establish what section it falls under.
5
Leaving the function

Touch phases
The touch phase is the action the finger has taken on
3
the most recent frame update. Because a touch is
tracked over its duration by the device, the start and end of
a touch, and movements in-between, can be reported on
the frames they occur. We dont want the player to keep
turning for as long as the finger is on the screen, so we act
only when the phase is TouchPhase.Began. This is triggered
only on the frame that the touch occurred. The other
TouchPhases are Cancelled, Ended, Moved and Stationary.
You can see by the method definition that it returns a

bool, and that is how we are able to enter it directly
into an if statement. If there is no touch input, we pass over
the whole if statement and just return a false. If we do go
inside an if statement for left, right or forwards, we check if
the actual touch input location is within the boundaries of
where we want to check: if we have a match then we return
true, else we return false. A good learning experience would
be to to try out other control schemes for touch devices
swiping would work well here.
6
WorldMags.net
TAKING IT FURTHER
This is just the start of what Unity can do
its a full game development engine,
after all. If youd like to read about further
steps in this particular project, the author
has written a book, Ouya Unity Game
Development. It covers the same project
as here but in more detail, and also covers
setting up Unity to work with the Ouya
Android games console. Otherwise, there
are lots of great tutorials to find online,
and feel free to ask the author,
Gary Riches, any questions on Twitter:
@Gary_BBGames
| 75
WorldMags.net
DESIGN & TESTING | Introduction
76 |
WorldMags.net
Introduction | DESIGN & TESTING

WorldMags.net
Design
and test to
perfection
Making a truly great app is about much
more than code. Getting the details
right will make for very happy users
he saying measure twice, cut once applies to creating apps
as much as to anything else if you perfect your planning
and procedures, youll make fantastic apps, regardless of
how good your code is. Well show you how to plan your
app before you start creating it, how to think about the user experience
every step of the way, and how to really test your app, to make sure it
works perfectly for your users. Well also look at getting all the details
right, so your app gets onto the App Store smoothly and finds its users.
78
82
84
90
94
100
106
112
114
120
126
132

Before you code: 10 user experience tips
Case study: A journey of invention
Case study: Learning the fun way
Case study: Place your bets
Case study: The physics experiment
Case study: A world of word play
App Store optimisation and SEO
WorldMags.net
| 77
WorldMags.net
DESIGN & TESTING | Designing your app
The time you spend planning

an apps flow is time youll
save later on when coding.

Making a great app means careful planning before you start coding
o youve had an idea for
an app? The temptation
will be to fire up Xcode
and start writing code, or
start looking for a freelance developer
who can build it for you. Stop! Step
away from the computer. Its time to
think through your app, consider every
detail and create some prototypes so
you can be sure that what you produce
will work well as an app.
Read the UI guidelines

Before you start thinking about the
details of your app, take a few minutes
to read some general information about
iOS design. Apple has a set of guidelines
for producing usable, well-designed
apps, called the iOS Human Interface
Guidelines (http://bit.ly/1bkextC). The
guidelines cover not only the visual side
of designing an app but also how to
structure it well, craft usable navigation
and interact with the operating system
78 |
in a consistent way. Even if you are very

familiar with how iOS apps look and feel,
reading this will ensure that your idea
becomes a usable, beautiful app.
Focus on the core functionality first.
Simple, single-purpose apps work best
on iPhone, while the expanded form
factor of the iPad allows more scope for
advanced features. Keeping your idea
under control will pay dividends.
However, even if you keep the design
of your app focused and simple, its also
important to explore around the edges
of your idea. If your app connects to an
online service then how does the user
signup/login process work? What does
the on-boarding process look like? Its
easy to forget about these kind of things
when doing initial planning, but writing
down a list of everything you can think
of at this stage will be useful when you
start building prototypes.
Youll also need to consider how your
app will interact with the operating
WorldMags.net
system. Does your app need to

consider any iOS-specific features?
When will it ask for permission to send
Push notifications or gather location
information? Will iOS features such as
Passbook be relevant?
Think it through
If you offer In-App Purchases, then you
also need to consider how the store is
going to work. For instance, are users
simply going to receive a prompt to
purchase something using the standard
system alert, or are you going to put
time into designing screens to ease
them into the purchase slowly? Can
your users share content from within
the app using AirDrop, Twitter, Facebook
or some other third-party service? Think
about where that functionality would fit
best within the design of your app and
how people are going to access it.
Once you have thought about the
individual components of your app its
Designing your app | DESIGN & TESTING

WorldMags.net
Taking inspiration
While its easy to be inspired by the
love about iOS and the apps you have
There is no shame in taking inspiration
visual side of design, though, dont forget
installed. If you are working with iOS,
from other designers, especially Apple.
that the structure of your app is just as
then you will very likely be installing lots
Teams of the most talented iOS designers
important. Look for apps that solve
of apps. Use something like Screenshot
in the world spend all day, every day
problems similar to yours, see what works
thinking about how to communicate better Journal (screenshotjournal.uiforge.com)
and, more importantly, what doesnt work
with users through the small screens of the to keep track of the small details you love
in their navigation and interaction design.
from day to day.
iPhone and iPad. Observing Cupertinos
finest will not only give you some
inspiration but ensure that your app fits
with the platform in the best way, and the
way people expect it to.
Its not all about Apple, though: iOS is
the playground of many of the best thirdparty and freelance designers too. Looking
at the iOS tag on Dribbble (dribbble.com/
tags/ios) is a great place to see a constant
stream of visual inspiration. Pttrns (pttrns.
com) and Mobile Patterns (mobile-patterns.
com) take a slightly different approach and
showcase screenshots from real apps
categorised by common tasks, such as
login screens, image galleries, content
timelines, notifications and many others.
Capptivate (capptivate.co) does the same
job for animations, showing tiny snippets
of interactivity from the best apps on iOS.
All of these sites are wonderful sources
of inspiration when planning an app. Also
pay close attention to what you yourself
There are plenty of sources of visual inspiration on the web, such as pttrns and Capptivate.
time to start putting the whole thing

together. The best plan at this point is
to draw out a rough sketch of every
screen, using one piece of paper per
screen. Once you have a stack of paper,
find a large table and place all the
sketches on it.
Experimentation is key at this phase
of building a prototype. Try drawing
several different variations on each
screen and move them around until
the structure and flow feel right. Also
consider different navigation structures.
Does it flow better with iOS Mail-style
hierarchical navigation or would a tab
bar work better to present the various
screens to the user?
Your app will never be as easy to
modify as it is when youre building a
pencil and paper prototype, so make
sure you spend sufficient time at this
stage exploring your options. Take
photos of your completed layout
its your first prototype!
There was a time when multi-touch
devices were rarely found outside
research projects, but that all changed
with the popularity of the iPhone. Now
you would be hard pressed to find a

smartphone or tablet which doesnt
include multi-touch, so it can be
tempting to add loads of gestures
to the app, right? Not so fast.
While gestures can certainly be a
valuable addition to user interfaces, you
should exercise caution when designing
them into your app. Gestures, especially
multi-touch ones, are not necessarily
very discoverable for users, and can
cause your app to become less usable if
not added carefully. You should be fairly
safe if you stick to the standard gestures
popularised by Apple (swipe, pinch,
long press, and so on) but use them
for familiar purposes for example,
pinching to zoom a photograph.
Its likely that when you had the idea
for your app you had either the iPhone
or the iPad in mind. Designing for both
form factors will not only give you a
bigger market, but also enable the
people who love your app to use it
everywhere they go. Once you have
the basics of your design worked out
for one form factor, start over and do it
all again for the others. If you designed
for iPhone first, its going to be tempting

to simply attempt to scale those designs
up for the iPad, but this is rarely the
approach which will result in the best
user experience.
Flat or wide?
You may have noticed in the iOS Human
Interface Guidelines that Apple often
suggests flattening the information
hierarchy inside apps. This is never more
relevant than when designing an iPad
app as opposed to an iPhone one. There
is no shame in taking inspiration from
Gestures, especially multi-touch, can

actually cause your app to become
less usable if not added carefully
WorldMags.net
the system apps or from your favourite

apps. For example, think about how the
iOS Mail app works. On the iPhone, Mail
shows only one piece of information at
a time: either a list of mailboxes, the
content of a single mailbox or the
content of a single message. The same
| 79
WorldMags.net
DESIGN & TESTING | Designing your app
UI on iPad has fewer levels, and is able

to show both the contents of a mailbox
and also the content of a message
without any compromise. Maybe this
layout would suit your app?
Finally, consider that iOS devices can
be held in either portrait or landscape
orientations. Apple recommends
supporting multiple orientations
wherever possible, and while it might
be convenient to ignore this feature of
the devices, thinking about them at this
stage will highlight any difficult design
decisions you will need to make later.
High fidelity
At this point, you should start to think
about the specifics of how different
parts of your application look. Are you
going to choose a standard iOS 7 look
and feel for your app, or will you go for
something more custom? Whatever
your choice, now is the time to build
mock-ups that look more like the final
product. If you struggle to get that
high-fidelity look then consider using
one of the many template documents
available, such as one from Teehan & Lax
(teehanlax.com/tools), which will help
you get that polished look and feel
without having to draw everything
from scratch yourself.
Its vitally important to test your
designs on real devices. Most, if not all,
of the handheld devices in use today
have double-density Retina screens,
whereas most of our desktop screens
80 |
Design mock-ups in the way

you find most comfortable to
use whether thats using
digital or analogue means.
are lower, single density. You might

think that this is a simple problem to
solve just work at 50% on a desktop
resolution and everything will be fine
but its not as simple as that. All iPhone
models since the iPhone 4 have 326ppi
display screens, but a non-Retina iMac
or MacBook has a display density of
around 120ppi. The exact numbers dont
matter very much here the point is
that its hard to get a realistic idea of
how big user interface elements on
screen need to be.
Finally, consider whether there are
any reusable components which can
be extracted from your user interface
mock-ups. For example, are you going
to use standard spinners and progress
bars or would something custom be a
better fit?
Everything you have done so far has
been static, but another important part
Sites such as Teehan & Lax are great for ready-made resources.
WorldMags.net
of iOS UI design is animation. Always

start with the standard iOS animations,
because these are well known and
provide familiarity for the user. However,
a little flair never hurt anyone.
On the move
Animation can also be useful for
educating the user for example, you
could show where information is being
moved around your app by animating it,
clarifying the actions that the app is
taking. Its also important to maintain
context during screen transitions
look at the consistent red circle when
navigating through the standard iOS
Calendar app.
The issue with the tools weve looked
at so far is that they build static screens.
Consider using something like Origami
(facebook.github.io/origami) or Adobe
After Effects (adobe.com) to build
animated or even interactive prototypes
at this stage.
If you consider all of the points
mentioned here and pull everything
together into pencil and paper sketches,
static or even interactive or animated
prototypes, it will force you to really
dig into your idea. Then, when you
come to either write code yourself or
hire a developer to write it for you,
magical things will happen and you
will find yourself with a more usable,
well-structured app, with the difficult
problems solved before you get
wrapped up in the implementation.
Designing your app | DESIGN & TESTING

WorldMags.net
The design toolbox

Some great tools for testing the ideas that will become your app
Pencil and paper
Prototype on Paper
The real world, 80p for 12

This is the most important tool
in your design and prototyping
toolbox. Software can be a
wonderful help sometimes, but it
is sometimes distracting in a way
that a simple pencil and piece of
paper are not. Especially in the early stages, there is no
substitute for putting your iPad or laptop away and getting
out a blank sheet of paper.
Available on the App Store, free

The next step from pencil and paper might
be to see how your app will feel on a real
device. Prototype on Paper is an iPhone app
that enables you to take photographs of
your sketches and define hotspots to link
them together into a simple prototype. If
youve made pencil and paper sketches, this
is the quickest way to see how everything
feels on a device.
Briefs
giveabrief.com, 139.99
If youre looking for something to show a client,
a pencil sketch might not be quite what you
need to blow them away. Briefs enables you to
import high-fidelity mock-up images, then
define hotspots, connections and animations.
Finally, connect your iOS device and install the
companion app for single-click deployment of
your prototype to real devices.
Fluid UI
Adobe Photoshop
fluidui.com,
from free
Fluid is a
web-based
prototyping
tool that
enables
individual
components
of mobile user
interfaces to be dragged and dropped to make interactive
prototypes that can also be viewed live on a device by sharing a
link to your finished prototype. Prototypes can be made using a
wireframe style or be made to look native with iOS 6/7 styles
that can be applied.
photoshop.com,
from 17.58 per
month
Photoshop is
the king when
it comes to
producing highfidelity artwork
mock-ups. It
may have
originally been designed for use by photographers, but it also
has all the features you need to produce beautiful, pixel-perfect
iOS mock-ups (as well as final artwork and design elements, of
course), and is the industry standard if youre working with
other designers and developers on your project.
WorldMags.net
| 81
WorldMags.net
DESIGN & TESTING | Design tips
Before you code: 10 tips

for great user experiences
Follow these tips and youll know that users will love your apps
1 Put your brain
in the right mode
Getting your head in the right space
about the user experience (UX) is the
most important starting point. All too
often, UX is considered as just a step in
a project process, interchangeable with
wireframing. This road leads to ruin!
User experience is a way of thinking,
a mindset. UX belongs in the product
creation process, from the problemsolving beginning stages through to the
launch and even post-launch iteration.
UX is a focus on how we treat human
beings. Put your brain in the right gear
and youre off to a racing start!
2 Identify who
the product is
Thinkstock
The more you understand that a product

has personality, the easier youll find it to
create an experience users can relate to
and engage with. Ask the question: If
this product were a celebrity, who would
it be? Choosing a celebrity personality
(actor, musician, and so on) helps us to
wrap our minds around human qualities.
This can influence everything from
colour palette, typeface, timing of
animations and transitions, to the tone
used in text elements like alert messages
and app description copy.
Giving your app personality will help its development.
82 |
3 Master the iOS Design Resources

While this may seem logical only for those
designing/developing for iOS, Apples
Design Resources is beneficial for anyone
working on mobile apps. Find it at http://
bit.ly/1aDTGju. The three sections on UI
Transitions, Human Interface Guidelines
and the UIKit User Interface catalogue will
teach you many important UX basics.
Please note, though, that its not enough
just to read through these resources and
then put them aside. Really getting to
know these resources will make you better

at your job. You will understand when to
follow the guidelines strictly and when it
makes sense to break away. Its like being
a mechanic who has a carefully selected
toolbox: not only will you have the tools
to resolve all the issues and problems that
will invariably come up throughout the
product lifecycle, but youll also know
what makes sense to use when and where,
and know generally what is possible in iOS.
4 Identify your users

Once you know who the product is, its
vital to identify who will be using it. If its
possible to interview users of an existing
product for example, if youre building a
mobile version of a product that has an
existing website, or are creating a new
version of an existing app then set up
interviews and talk to users about their
habits. Wherever possible, give a set of
tasks that you can watch them execute. Its
important to understand, with as wide a
WorldMags.net
view as possible, their user habits with

both the product and the type of device
for which you will be creating the app.
If youre starting with a brand new
concept that has no existing product, you
can still glean valuable insight into desires
and device habits by framing questions
correctly. Define a target demographic and
talk to real people. Any interviews will be
of benefit to the outcome of your release
and for creating personas and scenarios.
Design tips | DESIGN & TESTING

WorldMags.net
5 Scenarios
6 Prioritise your features
Take your user interview findings and

imagine a few targeted users from it. The
more specific, the easier it is to speak to
them directly. Define age, gender, race,
job, family situation, frustrations,
attitudes and motivations. Once youve
defined these individual users, create
scenarios in which they might engage
with your product. Who would use this
product you are creating? Why would
they be using it? Questions like these
lead to a more engaging solution.
Usually there are far more features we want to add to an app than is possible for a first
release, so prioritisation is important. Normally the most important factors are business
goals, technical feasibility and the needs of the user in a given timeline before launch.
The term MVP (Minimum Viable Product) is used to identify the very minimum feature
set with which its acceptable to launch your app. It is a wonderful thing to narrow the
focus of your app. Anything beyond that bare minimum can be worked into your future
plans, and reworked as needed after you get feedback from real users.
7 Involve
stakeholders
9 Flows and
wireframes
Stakeholders in your app need to be

identified and involved from the get-go.
If youre an individual developer making
your own product, you may be your own
stakeholder sorted! Otherwise, talk to
everyone connected to the app. Make
sure you think through things before
you dive into design and development.
See what your different stakeholders
answer to questions such as:
t Why? (Why an app? What are we
trying to solve by creating an app?)
t Business goals?
t Success metrics?
t Device target?
t User target?
t Value propositions?
t Branding, personality and tone?
Keeping stakeholders up to speed is
important. Keeping them well informed,
setting expectations throughout product
evolution and keeping everyone on the
same page is a task indeed, but one that
ultimately makes product creation run
much more smoothly.
Weve already looked at how crucial

planning and wireframing is, but its
impossible to overemphasise just how
important it is Creation of flows and
wireframes helps ensure that the UX story
youve put together through the previous
steps comes together gracefully. A flowoverview will give a high-level look at how
everything links together and, down the
road, it serves as a really handy checklist
to ensure you didnt leave anything out.
This is a great opportunity to ensure that
youre thinking about your scenarios, what
interactions feel like, what orientation
your users may be holding the device in
all the details!
Working up wireframes for key screens
helps ensure that youve thoughtfully
broken your screen features into primary,
8 Check your
mindset
Its likely youre now ready to do the
visual design and development stages
on your app. Whether you are a solo
creator on a product or working as part
of a team, the UX mindset must be the
leading spirit through every stage. UX
threads the very best projects together
from beginning to end and beyond.
What would your users do? Let that be
your guiding light.
You can release your product once

its reached MVP stage, and users
can then benefit from subsequent
additions and fixes.
A wireframe of your app will help you to spot any

omissions and elements that dont work well.
secondary and tertiary actions, and that
youve considered your overall goals for
detail, placement and sizing; its your
best opportunity to see if everything
will actually work as planned. You catch
a lot of details and prevent a lot of things
slipping through cracks when you observe
this step, and can really look over whether
everything has been considered.
10 Draft your text

If you havent done it already, now is the
perfect time to get all of the text in your
app drafted. Start looking at all the points
where someone interacts with your app,
and think about what the words on your
buttons and other calls-to-action will say,
and what your section headers will say.
If there are emails that go out to users
based on them signing-up or other
actions, identify those points and begin
thinking about what the voice of those
messages will be. Unify the language and
tone. Start drafting the app description to
ensure its voice is in harmony with the
apps personality. Know which alert and
pop-up messages can be customised, and
identify what tone those need to take.
WorldMags.net
Think about where you need text to appear in your app.

Text is one of the most overlooked pieces
of app creation be aware of this early on
and address it carefully. It is one of the
most inexpensive ways to engage, connect
with and even delight people using your
product and it can be oodles of fun!
| 83
WorldMags.net
DESIGN & TESTING | The making of Journeys of Invention
A journey of invention
Touch Press reveals the secrets behind its interactive science book
TOUCH
PRESS
Founded in 2010,
Touch Press aims
to create new
kinds of books
that reinvent the
reading
experience. The
companys titles,
crafted by a
team with
diverse skills, are
infused with rich
media.
84 |
A collaboration between
The Science Museum and
Touch Press, Journeys of
Invention tells the story
of science: 83 hand-picked objects are
woven into 13 distinct journeys, such
as Minds & Machines and Industrial
Adventures. Right from the initial
meetings, it was clear no app could
hope to comprehensively cover The
Science Museums vast collection.
We therefore centred on choosing
interesting objects that would be cool
in an app and representative of the
branches of science we were exploring,
says Fiona Barclay, Touch Press Senior
Producer and Editor.
Logistics were an ongoing challenge.
The objects ranged from handheld
items to the physically enormous V2

rocket. How do you capture that and
put it on an iPad? With Touch Press
famous for its use of rotational
photography, smaller objects could
be depicted that way, but larger items
would perhaps need the use of video
and 3D modelling.
We also started to think carefully
about how to represent objects
interactively, adds Barclay. So for the
Enigma machine, we had the idea it
should send and receive decoded
messages. For the Apollo 10 Command
Module, we got permission to get inside
something that hadnt happened in
something like 15 years and shoot a
panorama. The photographer said he
could smell the moon!
WorldMags.net
Senior Designer Matt Aitken recalls

that the original, large object list was
rapidly filtered as the team determined
suitability for the iPad: There were fun,
quirky, interesting objects that just
wouldnt have worked in an interactive
concept. Some we included are perhaps
less important scientific events, but they
work well in context. For example, the
Roomba is representative of robotics
and we figured it could suck up the
text from a page!
As the app started to take shape,
Touch Press rapidly iterated on its initial
ideas. As early as possible, we create
prototypes for anything we think will
be challenging, says Aitken. Various
techniques were used: paper prototypes
were sometimes sufficient, rough
The making of Journeys of Invention | DESIGN & TESTING

WorldMags.net
interfaces of screens placed on desks
to see if people could understand how
to navigate between them; elsewhere,
basic iOS apps were created from flat
images, to see how the interfaces and
interaction fared on a device.
The difficult stuff

Aitken says that two major aspects
of Journeys of Invention proved
particularly difficult to deal with: first,
navigation from an object to the next
when the user has multiple pathway
options; second, the main network
screen, depicting the apps objects
rather like a Tube map.
When youre on an objects page,
continuing to the next is telling you the
story. We went through several revisions
until we had something we felt was
clear enough, remembers Aitken,
advocating a process of assessment and
adjustment: Dont be afraid to make
changes if something isnt working. It
can be painful if you thought youd
totally nailed something, but this
happens time and again when building
apps. You just cant be too precious.
The network screen took Aitken three
days to get right, ensuring everything
connected in a logical way. Even then,
the screen was iterated on: Early
prototypes were static, but we try to
have things move, to tempt you and
indicate theyre touchable! Subtle
animations were added, lights pulsing
along pathways and objects spinning.

Its about making it obvious you can
interact with an object, says Barclay. We
try to avoid putting rectangles around
everything, because thats just noise,
and we dont like instructions either.
Everything should be intuitive enough
that you can work out what to do
without us explicitly telling you.
Even proven techniques found room
for iteration, including Touch Presss
rotational photography. The process is
actually quite simple: get an accurate,
smooth turntable, set up a camera, take
a photo every so many fractions of a
second, and stitch together the resulting
pictures into a video file, explains
Aitken. But for this app, we wanted to
include labels as you rotated an object,
Dont be afraid to
make changes if
something isnt
working You just
cant be precious
and for that we created a custom app
on the Mac to apply points of interest.
A looming hard deadline a launch
event at The Science Museum
eventually saw efforts largely switch
from iteration to optimisation The
interface on this app is particularly
challenging, says Aitken. As you

zoom, a lot of the screen is redrawn,
and early prototypes ran slowly on
old hardware. We absolutely would
not ship something like that, and so
we optimised heavily, in some cases
adjusting functionality on older devices,
such as turning off the odd effect.
With Journeys of Invention being, as
Barclay puts it, analogous to a glossy
coffee table book, its unlikely to see
major updates We make a beautiful
thing, ship it, fix the stuff that needs
fixing, and move on.
However, Aitken says revisions arent
entirely out of the question: If an app
is successful, such as The Elements, a
second edition is possible. Still, we do
consider our apps very much complete
when we ship them!
Touch Press created an OS X

app to add labels to its
rotational photography.
Sound design
Audio is a major component of Journeys of Invention, right from
the very first screen, but in a much more integrated way than audio
files you tap to hear. By default its muted, but press the speaker
button and then zoom in using the usual iOS gesture. As you get
closer to the objects, youll begin to hear some of the sounds they
make, says Alan Martyn, Assistant Producer and sound guru. We
thought it would be nice to give the effect that you can hear the
objects as you pass them it makes everything seem more alive.
Naturally, there were limitations, in that Touch Press couldnt just
nip out and record a real Stevensons Rocket, or a bomb going off,
but soundscapes within the app merge found and created audio.
For the Apollo 10 Command Module, we mixed NASA archive
recordings with other sounds, to provide an idea of what it might
have sounded like had you been inside, says Martyn. Elsewhere,
there are real sounds from a VCS3 synthesiser and a Sno-Cat, but I
made the audio myself for the Cybernetic Tortoise from recordings
of little electronic motors and solenoids.
Martyn says that although such creative licence is necessary
if theres no existing recording of an object, searches can pay
dividends. With the microwave oven on the first screen, we found
an enthusiast microwave collector in the USA who had a working
When you zoom in on objects like this synthesiser, they start making noise.
example of that particular model. So we have a real recording of
the actual microwave thats shown in the app!
WorldMags.net
| 85
WorldMags.net
VISUAL GUIDE | EXPLORING JOURNEYS OF INVENTION

4
1
Quick access
Follow a path
Its alive!
Feel the noise
Fast filtering
Zooming in
Tap the menu button

1
in the top left of the
screen and you gain access
to the start point of each of
the 13 journeys, along with
information about the app.
An alternative
2
approach to the app
is more exploratory
Journeys intersect,
showcasing the links of
scientific achievement.
You can leave one path
and join another.
Instead of being
3
static, like a book,
Journeys of Inventions
main screen is full of subtle
animation. Pulses indicate
the direction of journeys,
and items spin to show
they can be tapped.
Although initially
4
muted, the main
screen has audio, activated
by tapping the volume
button. When sound is on,
you hear how each object
sounds, and they get
louder as you get closer.
If you want to access

5
a specific item really
quickly, you can tap the
search icon and then start
typing. The alphabetical list
of items filters live as you
enter more characters.
The initial screen can

be zoomed in and out
using pinch gestures. This
enables you to get a global
view of all the journeys, or
focus more intently on a
set of items.
Journeys of
Invention
Sept
2011
A collaboration between
the Science Museum and
Touch Press, this apps
own journey from initial
spark to final product
took just over two years
Andrew Nahum,
Senior Keeper at
The Science
Museum, calls
Touch Press to
talk about apps.
86 |
Nov
2011
Touch Press and
Science Museum
staff have their
first meeting,
to discuss
collaboration.
Jul
2012
Design and
planning of what
will become
Journeys of
Invention begins
in earnest.
WorldMags.net
Sept
2012
Test shoots begin
on some of the
huge objects that
might be featured
in the app.
Jan
2013
Heads of
agreement are
signed, to identify
the requirements
of both parties in
the project.

WorldMags.net
On starting the project, the Touch Press

team examined the list of objects curators
at The Science Museum had chosen for
inclusion, and thought about how they
could be represented interactively. With
the Enigma machine, an obvious idea
presented itself: enabling people to send
and receive messages.
Fiona Barclay says that because the team

is quite driven, it couldnt resist putting
things in microwaves and making them
explode. Naturally, The Science Museum
wouldnt let Touch Press fry eggs, soap
and CDs in its own beautiful unit, and
so footage was taken of a different
microwave and cunningly superimposed.
Jun
2013
Touch Press works
on photography
and video footage
relating to rotating
objects.
Jul
2013
A full-day shoot
of the Apollo 10
Command
Module, to create
a 360-degree
panorama.
Nov
2013
The beta version
of Journeys of
Invention is
circulated, to
more widely test
UX and content.
Dec
2013
The completed
app is submitted
to Apple, after
several weeks of
polishing and
tweaks.
Dec
2013
The app is
released,
coinciding with
a launch event
at the Science
Museum IMAX.
WorldMags.net
| 87
WorldMags.net
Early versions of network nodes were

significantly different from those in the
final app. The prototype is much busier,
with a bit more hand-holding regarding
what is a tappable item. In the end, the
team went for a simpler, more elegant
approach, and trusted that its interface
would remain intuitive.
When working on
the network image
(prototype depicted),
Matt Aitken visited the
London Transport
Museum to examine
how historical transport
maps evolved: We were
considering curved
rather than straight
lines. Academic papers
on schematic design
favoured straight
pathways and leading
the eye by omitting
90-degree angles.
Touch Press works on prototypes for any

interactions that could be challenging,
and starts them as early as possible in
a project. When feasible, something
will be created specifically for the iPad,
so that theres an interactive test available
and the team can then iterate on the
basis of real-world results.
Youre not allowed to touch it, says

Aitken about the Apollo 10 Command
Module. So during our panoramic shoot
for the app, we had this telescopic rod
with a camera on the end. To fully capture
everything but not come into contact
with anything, photographer Drew very
carefully leaned inside!
88 |
WorldMags.net

WorldMags.net
KEEP IT
SIMPLE
Naturally, theres no way to use the actual Hookes

Microscope to photograph what would be seen through
the lens, and so the app had to resort to sleight of hand.
We used another microscope and got things as similar
as we could, explains Aitken. We then used a video
created in After Effects to simulate focusing.
One thing Touch Press iterated on a lot in this app and something
that wasnt entirely fixed until late on was how to navigate from
an object to one of several pathways. In this prototype, you see
several smallish links, echoing directions from the main network
screen, but they arent clear out of context.
The final revision of the multi-pathway

navigation is simpler. The first part of
each next step is shown, and you swipe
between panes rather like iOS Home
Screens. This showcases how Touch Press
uses existing conventions where possible.
Were great believers in not reinventing
for the sake of it, says Aitken.
WorldMags.net
If youre
considering
making your
own interactive
book, the main
tip from Touch
Press is to keep
things simple.
That might
sound crazy,
given how
ambitious our
projects are, but
we actually
dismiss loads
of ideas,
says Aitken.
In early
meetings, well
force ourselves
to quickly
narrow things
down to core
concepts, focus
on content,
and not get too
excited about
crazy interfaces.
Everything
should fall out
of great content.
Barclay adds
that you should
also get used
to being
efficient and
tidy regarding
document
structures and
file naming.
In one early
project we
worked on, files
were named
quite arbitrarily,
and when I was
later trying to
find certain
pictures, it was
enough to drive
me crackers. So
be rigorously
organised, or
your projects
development
will be
inefficient,
costing you time
and money.
| 89
WorldMags.net
DESIGN & TESTING | Designing an icon

Help your app stand out with a memorable and eye-catching icon
pple once spelled it out: Every app needs a
beautiful app icon. Its not unusual for people to
base their initial opinions about your apps quality,
purpose and reliability solely on the look of your
app icon. And you know what? While it may be shallow, its
perfectly true. How many times have you casually browsed
through the App Store and rejected an app just because of
the design of its icon? How an app icon looks is vital. Its the
first visual tease you see in the App Store. Hierarchically, it
holds the top spot. When youve finally decided to part with
your hard-earned cash and the app has been downloaded,

the icon will sit on your Home Screen for ever more. The icon
will need to be distinctive and stand out from the plethora of
other apps youve got. It should also visually communicate
what the app does, just in case you forget.
All in all, its a fairly tall order, but with luck these pages will
give you a starting point for creating a great icon for your own
app. Take our advice on board, pick the right tool for you, and
perhaps most importantly, try to have fun some of the most
creative designs come from just playing around with ideas.
Let your app be your guide

Consider this brief: Metricator is an
analytics app. Its similar to Google
Analytics but tailored towards social
statistics; it lets you track and access
analytics for digital campaigns using a clean UI.
Although the current logo is typographical, the
client would consider a logo mark. First we sketch
some ideas. Obvious things like data, graphs,
charts, numbers, measurements, and words like
90 |
precise, clean cut, and bold come to mind. The

audience is probably professional. Also consider
the icon needs to fit into a square aspect ratio.
Using the negative space of the letter m, we
can create something that looks like a bar graph.
This would be a neat way to combine all the
elements and communicate the function of the
app. Itll also look distinctive in the App Store
and device Home Screen. The result is at left!
WorldMags.net
Sketch lots of icon ideas and dont

expect an immediate solution!
Designing an icon | DESIGN & TESTING

WorldMags.net
Seven golden rules for creating icons

Add some depth
Use recognisable metaphors

Marc Edwards, director of
Bjango (bjango.com), says
that icons are often seen at
small sizes and so keeping
the concept simple is key:
That usually means
sticking to one or two
recognisable objects. If you
can, use a unique colour
and silhouette to help
with [the users] recall.
Designer Jon Hicks
(hicksdesign.co.uk) adds
that the metaphor should

be recognisable by what it
does (such as Camera) or
what it is/its identity (for
example, the Safari brand)
and notes that the likes
of Apples own Settings
and Game Center actually
fail at both.
SoftFacade (softfacade.
com) creative director
Dmitry Tsozik also stresses
that designers shouldnt
try to be too clever: Dont

put some random circle on
a white background and
call it an icon, he says.
Research your colour and
metaphors, and dont
make your users guess!
Apples work on iOS has been called flat

design, but Jony Ive was keen to point
out that the system really has a layered
concept, rather than existing on a single
plane. Iconfactorys Gedeon Maheux
reckons that icon designers can think
similarly when crafting icons they
want to stand out: Dont be afraid to
experiment with subtle shadows and
shading of elements beyond simple
gradients, he says. Theres a world of
possibilities in iOS 7, and things are not
always as flat as they may seem
Use the grid

Go bold
Gedeon Maheux, co-founder of
Iconfactory (iconfactory.com),
says that even if youre not terribly
keen on Apples eye-searing icon
colours, the company has laid the
foundations for a visual style that
others should to some extent
follow. Use bold contrast in your
designs. iOS 7 is marked by bright
boundaries, clear lines and
expressive colours, he says. He
adds that pastels and muted
colours therefore dont work well
against the bright, fun palette
that is the iOS 7 Home Screen.
Bear in mind that users can also
set their own photos as their
wallpaper, and a bold, clear icon
will always have a better chance
of standing out.
Iconfactorys Gedeon Maheux recommends at least

starting out with the template grid that Apple has
fashioned for iOS 7: It has proportion and harmony
built right in. The more apps that use it as a base, the
more apps will look unified on the Home Screen.
However, he says you also shouldnt feel too
constrained: If you need to break the grid to make
your icon awesome, then go for it.
Create a consistent visual style

Take one look at the icons for Apples iWork apps and its clear theyre related
to each other. Thinking beyond a single app can help customers recognise a
range of apps as yours, but designer Jon Hicks warns that consistency doesnt
mean keeping all the line weights and colours exactly the same, but having a
visual style that harmonises. He explains that this could be a simple solid
white glyph on a basic gradient or a multicoloured transparent icon on a
white background, or something else entirely. But decide on a style one
that allows flexibility for a variety of metaphors and stick to it.
It can also be useful if the icon ties into the app too, adds Marc Edwards.
You can do this by keeping the style and colours consistent with the main
UI. If nothing else, this can increase the association of app and icon.
Avoid the written word

One of the more striking aspects
of iOS 7 is how much it relies on
type. With button borders largely
absent, coloured text often
denotes something that can be
used for actions, but Marc Edwards
warns that this line of thinking
Seek perfection
should not extend to icons:

Avoid text, and definitely dont
try to cram an entire word into
your icon. Where possible, icons
should be symbolic and not linked
to any one specific language. You
dont want to limit your audience.
This isnt a new line of thinking, but with an OS that

champions elegance, simplicity and fine details, anything
rough and ready now really stands out like a sore thumb.
The principles of creating good icons didnt change with
iOS 7, agrees Dmitry Tsozik, but do go and read books
about modern design, architecture and typography, and
spend time perfecting your vector skills.
WorldMags.net
| 91
WorldMags.net
DESIGN & TESTING | Designing an icon
Photoshop Elements
At just 69, Adobes pared-down image editor
is a great way to create app icons. However,
because it is predominantly a photo editor, it can
be limited. Using Elements in Expert mode is the
closest youll get to full Photoshop, but some of
the tools work a little differently. The most useful
tool for creating icons is the Custom Shape tool,
which is like Paths in full Photoshop. These let
you create hard-edged vector shapes, perfect for
iOS 7 icons, but they rely on default options such
as circles and squares, or the odd custom shape
like a heart or arrow. You cannot draw your own
Custom shapes, and once youve created a shape
you cant edit it youll need the full version of
Photoshop for real tinkering. Another feature
of iOS 7 icons is gradients, which is possible in
Susan Kare:
icon creator
Elements, though not always easy. The gradient
tool works only on rasterised images meaning
that shapes must be simplified (converted from
vector lines to rasterised pixels). You can get
around this using the clipping mask, which will
pull the path info in your shape layer through to
a new layer with the gradient placed above it.
Pixelmator
Pixelmator is a much more specialised imagecreation tool than Photoshop Elements and is
packed full of tools for creating icons. At 21,
its a bargain. Its Pen tool enables you to create
fantastic vector images for your icons in the
same way you would in high-end apps such as
Photoshop and Illustrator. As well as a traditional
Pen tool for drawing points and curves, there is
also a freehand pen tool for creating your own
shapes, and a grid for increased accuracy. Shapes
can be edited after theyve been created, and
you can add gradients and strokes to the paths
you create. You can even edit the direction of the
gradient using an on-screen gradient transform
tool. Boxes can have rounded corners and be
finessed on screen. Pixelmator also has a great

selection of custom shapes such as cameras,
computers, buildings and so on or you can save
out your own custom shapes. It also has powerful
text editing tools, meaning that if you do add
text to your icon, you can tweak with precision.
GIMP
If you want to create icons on a real budget, your
best option is GIMP, the free open-source image
editing package. Packed full of familiar high-end
image editing tools, all with highly customisable
options, it is incredibly feature rich; however, it
lacks much of the familiarity of other imageediting packages. It can prove quite tricky to get
used to working in it especially if youre familiar
with other packages, since many of the keyboard
shortcuts are different.
Like Pixelmator, GIMP has a powerful pen tool
for creating hard-edged, editable paths. With
freehand and polygonal pen drawing options,
these are perfect for creating icons. However,
unlike in Pixelmator, you can use paths only to
create images with; you cant create editable and
colourable shapes themselves. You can fill an
92 |
area with colour by rasterising shapes and then

adding colour, but they cannot be edited easily.
This greatly limits your options when creating
icons, because it makes the process much less
flexible than it could be, even with the use of
layers to work around it all of which could limit
you when creating the kind of slick hard-edged
icons that you require to get that true iOS 7 look.
WorldMags.net
Susan Kare is responsible for

creating the most iconic graphic
elements of the Mac OS the
Trash Can, the key, the Paint
Bucket, the Happy/Sad Mac and
more. I am very grateful and
appreciative that some images
I designed almost 30 years ago
are still in use, she says.
Designers of computer
graphics had fewer pixels
to work with then, but Kare
relished the challenge. Every
design job has constraints,
she explains. And solving the
problem while taking those into
consideration is the challenge
and the fun. In fact, limited
screen real estate is an interest
of mine trying to make
something clear in 16x16 pixels.
Of all the iconic Mac OS
designs shes responsible for,
Kare reserves her fondest
memories for the Happy Mac.
When I see it, it reminds me
of the group effort of trying to
make a computer for the rest
of us, she explains, referring
explicitly to a non-technical
audience that included myself.
On the whole, though, her
creations have become both
ubiquitous and iconic, and Kare
has an explanation for their
success. I believe that symbols
that are simple (not too many
extraneous details) and
meaningful can have a long life
span, she says. Icon design is
problem-solving, and its not an
exact science. There are always
multiple solutions. We try first
to think hard about each
concept, and how it might be
communicated using a variety
of metaphors Dont shy away
from a little warmth or humour
when its appropriate.
WorldMags.net
iPhone
Beyond the manual
NEW
For owners of
all iPhones
with iOS 7
Take amazing photos and

discover how to FaceTime
your friends and family
Discover how to
customise your iPhone
and t weak functions
Your iPhone comes packed
with brilliant apps the
best of any smartphone
The 4-inch Retina
display makes t ype
incredibly clear
Learn how Control

Centre gives you faster
access to key settings
Take securit y further

with the iPhone 5ss
fingerprint scanner
WorldMags.net
WorldMags.net
DESIGN & TESTING | The making of Squeebles
Learning the fun way

Squeebles helps kids learn about mathematics while having fun!
IAN
KNAPP
KeyStageFun
(www.
keystagefun.
co.uk) is an
independent
company
specialising
in childrens
educational
apps. The
company is run
by Ian Knapp
and his wife
Florence.
94 |
Squeebles Times Tables is

an app that makes learning
your times tables fun. Its
produced by KeyStageFun,
a small software house run by husband
and wife Ian and Florence Knapp. Since
its birth in early 2010, Squeebles has
grown an international fan-base of
children and parents. The app has
also been featured on the TV, radio and
the national press. For anybody with
an idea for an app, the Squeebles story
is a real inspiration.
The Sqeebles story started when the
Knapps daughter couldnt find a good
maths app. From that initial unrequited
quest, the bright, colourful and childfriendly app was born. By practising
maths, kids help save cuddly Squeebles
from the nasty Maths Monsters. Ian

Knapp tells us: Florence came up with
the name Squeebles, I did some initial
drawings of the characters and it all
went from there.
App Store reviews have been positive,
with most giving it a five-star rating, and
customer feedback has been brilliant.
Ian Knapp tells us: The parent of a boy
who was struggling with his times
tables wrote to us to say hed won a
special maths award at school because
hed improved so much since using
Squeebles. That sort of thing is fantastic.
Starting to build
Ian Knapp is a self-taught coder. He
started out making websites, and
moved on to Flash. From there, he
WorldMags.net
progressed into the world of iOS

development. He explains: Squeebles
is one hundred percent myself and
my wife. I create the graphics and do
the coding, whilst she handles the
marketing side of things as well as
helping with product development.
From a technical perspective, Knapp
finds developing for iOS much easier
than making apps for Android devices.
To satisfy his Apple loving customers,
he needs only make apps that work on
iPad, iPhone and iPod touch. When it
comes to Android, he explains, there
are literally thousands and thousands of
devices, all with different screen sizes,
resolutions, features and even different
forks of Android installed on them.
For anyone new to the world of app
The making of Squeebles | DESIGN & TESTING

WorldMags.net
building, then, cutting your teeth on
Apple seems to offer a gentler and
more straightforward introduction.
A business brain
Transforming an original idea into a fully
functioning app might feel like the end
of the story, but now you need to start
thinking about pricing and marketing
to turn it into a business. Get either of
these wrong and your app may well
languish in the App Store, undiscovered,
unloved and unused.
Pricing apps is notoriously difficult.
Pitch it too high and customers will be
put off. Conversely, make an app too
cheap and punters might think its an
inferior product and pass it by. Knapp
tells us: Peoples perception of value
is vastly different for apps than for, say,
books or DVDs. Whilst many parents will
happily pay 10 for a textbook to help
their child learn their times tables,
they would view a 3 app as being
expensive, even if it was repeatedly
used for months on end with great
results. Weve tried to stick to a price
point between 0.69 and 1.99, making
our apps affordable to everyone.
Free apps that generate revenue
for their makers through carrying
advertising or offering in-game
purchases are, of course, very popular.
They get around the thorny issue of
pricing your app correctly and also have
the great perceived allure of being free
to download. When it comes to making

apps for kids, however, Knapp was
unequivocal: Our feeling is that these
have no place in childrens apps.
When youve made and priced your
app, youll need to market it. If theres
one thing app stores generally dont do
very well, its aiding the discoverability
of software. Searching for apps in
Apples App Store can be frustrating,
and Google Play is little better. For this
reason, successful app makers look
beyond the app store and embrace
many other means of telling prospective
Pricing is difficult. Too

high and customers
will be put off; too
cheap and punters
may think its inferior
customers about their apps.
When it comes to Squeebles, wordof-mouth advertising was massively
important Were aiming at parents
and teachers of primary school children
and they talk to each other every day at
the school gates, Knapp explains. Aside
from that, we use Twitter and Facebook
to talk to our customers, and weve also
built relationships with childrens app
review sites and freelance journalists.
The Squeebles also run their own
blog, meetthesqueebles.com, which

helps get children involved in the story
lines behind the apps Some of the
download sites (Apple, Amazon) have
also featured us in their App Stores.
Beyond the digital sphere, KeyStageFun also embraces very traditional
modes of marketing too. The firm has
found contacting the local press very
useful in telling the public about the
Squeebles story. After the story was
published in the local paper, the BBC
contacted Knapp, and he and his wife
were interviewed for two radio shows.
We also got a good slice of luck with
various national papers featuring us,
which led to more opportunities.
For anybody with a burning desire
to launch their own app, Knapp says:
Research the market properly and then
plan your project thoroughly before you
start, and then go for it!
People liked Squeebles Times

Tables so much, it reached
number one in the Top Paid
iPad Education Apps chart.
Advice on developing apps for kids

Children have their own unique, and often insightful, ways of
seeing things. For us adults, this can be all too easy to miss. We
think as adults, and make apps for miniature adults. With this in
mind, Squeebles makers found having children test their apps was
invaluable. Kids invariably provided the best feedback.
Serendipity also plays a part in making products for children
Ian Knapp has added the odd feature here and small detail there
as mere afterthought, only to find that children fall completely in
love with the new inclusions. As a developer and designer, he tries
to remember these magical moments and include as many as
possible in his products.
If youre developing for children its best to avoid huge blocks of
text. As Knapp points out, children and many adults too, for that
matter will get bored if they have to wade through instructions.
Children with dyslexia can also be overwhelmed by simply coming
face-to-face with large blocks of text.
Picking the right font to use is also important. Some children
might not be able to clearly understand a font that an adult may
comfortably read. Using large interaction points is also essential
for younger children whose fine motor skills are still developing.
The Squeebles started out as a series of hand-drawn sketches

One of the most important things when developing for children
is to make sure your apps create a safe environment for them to
learn and have fun in, which is why the KeyStageFun team opt to
avoid any internet links, advertising or in-app purchases.
WorldMags.net
| 95
WorldMags.net
VISUAL GUIDE | YOUR MATHEMATICAL FRIENDS
2
1
Be bold
A bold colour scheme
1 and minimal text
simplifies the navigation
process for children.
Friendly
typography
Where text is used
2
it is large, bold
and well spaced to allow
children to read it easily.
Squeebles:
the story
Ian and Florence Knapp,
the husband and wife
team behind KeyStageFun, have worked hard
to make their apps a
success
96 |
Points and prizes
In the numbers
Start a collection
Little fingers
By doing well on the

3
educational aspect
of the app, children earn
stars to trade for better
and better Squeeberangs
(boomerangs that
Squeebles ride on in
the apps mini-game).
Each Squeeble has

4
stats which affect
how well it does in the
mini-game; children earn
turns on the mini-game by
doing well in their times
tables questions.
The Squeebles games

5
let children collect
Squeeble characters. Each
one is unique, with its own
distinctive personality.
Large interaction
points are helpful
for younger children whose
fine motor skills are still
developing.
Jan
2010
Have the idea for
Squeebles while
trying to come up
with a fun way to
help daughter
learn times tables.
Feb
2010
After some initial
sketches, begin
developing the
app for iOS in
the evenings
after work.
Apr
2010
Finish and release.
Apple features the
app and it reaches
top spot in the
Australian
education charts.
WorldMags.net
Sept
2011
Ian Knapp leaves
his full time job to
concentrate on
Squeebles. Begin
using Corona SDK
for development.
Feb
2012
After featuring
in national
newspapers, and
on BBC Radio,
downloads
increase.

WorldMags.net
There are neat little touches

to help engage with kids
throughout the game note
the compass on the map:
Never Eat Slimy Worms to
help children remember
North East South West
The Squeebles are designed

to be child-friendly and
good fun. Theyre bright,
colourful, and each one of
the family has its own name
and personality. The idea of
collectability was built into
the concept right at the
beginning and is important
in the app. Add all of this
together and kids keep
coming back.
Nov
2012
Squeebles Times
Tables reaches
No 1 in Apples UK
education charts.
Further Squeebles
apps are released.
Jan
2013
Squeebles apps
released for
Android and
Kindle Fire.
Squeebles blog
is started up.
Jun
2013
Squeebles
Times Tables 2 is
released; receives
positive reviews
from customers
and press.
Sept
2013
KeyStageFun
launches a
competition
where young fans
can design their
own Squeeble.
Feb
2014
Squeebles apps
featured by
Amazon. In 12
months, number
of downloads
has tripled.
WorldMags.net
| 97
WorldMags.net
The team behind Squeebles has worked

hard to generate a sense of community
around the app and its lovable central
characters. As part of this, KeyStageFun
held a competition allowing young fans
to design their own Squeebles. The
winners saw their designs included in
the game itself a great touch.
The Squeeble called

Wobble was one of
the entries the team
received in its successful
Design a Squeeble
Competition. From the
original entry, the team
make a digital sketch of
the character. If you play
Squeebles today, keep
an eye out for Wobble
making an appearance
on your iPads screen!
Squeebles arent just random cartoons.

Rather theyre characters in their own
right. Each has a biography page that
carries facts about the character. These
details help to convey the characters
personality. Because the app aims to help
teach maths, numbers naturally play an
important part in the character profile.
Despite being a thoroughbred

educational app, Squeebles also aims
to keep kids happy, entertained and
engaged. As such, its makers included a
fun mini-game where kids can earn turns
and points. This serves to keep kids
motivated and coming back for more.
Who says maths needs to be dull?
98 |
WorldMags.net

WorldMags.net
BUILD
AN APP
Corona SDK
Squeebles was
made using the
Corona Software
Development
Kit. Its great for
cross-platform
apps, especially
2D games.
It uses LUA
programming
language, and
has a large user
base and helpful
support system.
Get a free trial at
coronalabs.com.
iOS Dev Centre
A great starting
point for iOS
developers. Sign
up for the
programme,
download the
necessary
software and get
going! https://
developer.apple.
com/devcenter/
ios/index.action
Once more, the app uses gamification to help encourage

young learners. Here, kids are rewarded with cake
ingredients that they can use to make a virtual cake.
Judging by the face of the character in the middle, not
all cakes are gastronomic triumphs. Note once again,
though, that the Squeebles give numeric scores.
Textmate
Squeebles was
made using
Textmate
for Mac.
macromates.
com
Alongside the concept of gamification to
engage kids, Squeebles makers also
understand that kids are revolting, and
love to be revolted! Here we can peep
inside a Squeebles head a see its horrible
internal workings. Such hidden features
add layers to keep kids absorbed. Its a
masterclass in understanding your user!
Along with teaching times tables,

Squeebles also sets out to make learning
fractions fun too. To convey key concepts,
the app draws on the time-honoured
metaphor of a sliced cake. And lets be
honest, every kid loves cake! Again the
app maintains a consistent look and feel
across all of its lessons.
WorldMags.net
Appfigures
Appfigures tracks
your downloads
and sales as well
as real-time app
store rankings
for iOS, Amazon
and Google.
appfigures.com
Soundrangers
Soundrangers
provides a great
source of lowcost sound
effects/music.
soundrangers.
com
| 99
WorldMags.net
DESIGN & TESTING | Testing your app
Its important and easy to iron out bugs in your code
esting is the art, and the
science, of making sure
your app is as good as it
can be. Its one thing to
get it working, but another to get it
working well, and if youre charging for
it, users will expect it to be near-perfect.
There are two key elements to testing:
making sure your app is free from code
bugs, and making sure your app is free
from UX bugs.
Bugs in your code are inevitable.
Aircraft manufacturers go to
extraordinary lengths to develop
software without bugs, but even they
Getting feedback from real, live users

can give you insights and ideas that
you can use to improve the product
100 |
build planes with multiple redundant

systems in case errors have crept in.
Thats not practical for most of us, but
with some care and the use of some
simple tools and a few well-established
techniques, you can write code that is
free from all but the most subtle of
technical errors.
UX bugs are a little different, but just
as important. Weve all seen apps with
features and functions that just dont
make sense. Sometimes, problems with
the user interface make them harder to
use than they should be. Sometimes
an app can suffer from convoluted
workflows that leave you wondering if
anyone actually used it before it was
shipped to the App Store. When youre
building an app, its often hard to notice
what should be obvious problems,
simply because youre too close. Getting
a second pair of eyes or many! to
WorldMags.net
test your app before it ships can help

you to avoid user experience problems
that you missed but which seem
obvious to users.
The ideal goal

Putting all of this together, testing your
app is about making sure its as good as
it possibly can be. Testing code helps
you ship reliable, bug-free apps. Testing
the UX helps you create interesting
experiences. In this article, well look at
some of the tools and techniques used
by the best developers in the business,
and show you how you can beat them
at their own game.
Testing can be very difficult, and is
always likely to be time consuming, so
why is it worth the effort? Well, nobody
likes a buggy product. Even the simplest
app asks your users to invest their time
and effort into getting to know how it
Testing your app | DESIGN & TESTING

WorldMags.net
works. Bugs are obvious if your app
crashes. Weve all experienced the
frustration of losing important data at
that vital moment. A long email, or a
complex photo edit how many iPads
have met a splintery doom when flung
to the floor in disgust after their irate
owners have lost their work for the
umpteenth time?
But its not just big, complicated
apps that get bad reviews if theyre
buggy. It can be just as annoying if a
game crashes or freezes right when
youre about to clear a board or make
it past a boss. Users invest emotional
energy in any app they use, so youve
got a responsibility to make sure their
experience is as good as it can be.
Crashes make people rapidly lose
confidence in your app. If youre lucky,
theyll just delete it. If youre not so
lucky, youll have annoyed them so
much theyll leave a poor App Store
review and let everyone know.
Testing can help you avoid those
poor reviews and that negative
feedback. A string of regular 4- or 5-star
reviews helps make the buying decision
much easier. Mixed reviews will make
potential customers stop and think
before they buy; consistently poor
reviews will see your app passed over
in favour of the competition.
Testing is also a way of getting
valuable user feedback about your
app. Its easy to lose perspective when
building an app, because youre so close
to it. Getting real, live users to test what
youre building can help smoke out
bugs you might have missed. It also

gives you a chance to get feedback
from people who are actually using it.
Maybe there are features you hadnt
thought about including, or workflows
that arent as slick as they could be.
How to start testing

Testing can seem like a complicated
topic, but it boils down to thinking
carefully about just three aspects of the
design and construction of your app:
testing your code; testing your product;
and improvements after launch.
Testing your code is about not
shipping bugs. With some simple
approaches and techniques, you can
dramatically reduce the chances of
problems sneaking in, and you can
ensure that changes dont lead to
new problems as your app grows.
Testing your product is about making
sure youre building the right app, and
building it in the right way, before it
hits the App Store. Using hard data to
decide which features are the most
effective can be a huge advantage
and there is a range of tools you can
use to help you get this insight.
Finally, and just as importantly, testing
is also about improving your product
after its reached the App Store. Getting
feedback from real, live users can
give you insights and ideas that you can
use to improve the product in the long
run, as well as building a community
around your app. Word of mouth is
often still the most effective way of
reaching new customers.
Testing your app means you can fix any big problems before your users see it.
Testing your apps covers everything

from making sure the code is bug-free,
to getting feedback from real, live users.
Its a big topic, but there are four basic
approaches that work from the inside of
your app out to the interface that your
users will see and interact with.
Unit testing is the technique of
testing your app through its code.
First you write small tests that describe
what your code should do. Then you
write the code to produce those results.
You wont need to scour your

code for most bugs theyll
be identified easily in testing.
Crashes make people rapidly lose

confidence in your app and if
youre unlucky, leave a poor review
By describing what you want to do
before you do it, and building up the
tests around the code of the app itself,
you can catch most bugs that would
otherwise go unnoticed.
Interface testing is about testing your
app though the interface, just as your
users will interact with it. You can use a
range of tools to provide robot hands
that can tap, type, pinch and swipe their
way through the app repeatedly.
Integration testing is about making
sure that changes in one part of the app
dont break other parts. As you change
your app by building new features and
adapting existing ones, your tests are
run in the background to make sure
that changes in one place dont break
things elsewhere.
Quality assurance (QA) testing is a
range of approaches for testing your
app with real, live people to make sure
what youve built is usable, coherent
and elegant. Its often this piece thats
forgotten in the rush to ship but as
the saying goes, With many eyes, all
bugs are shallow! Turn the page for
more on the four key types of testing.
WorldMags.net
| 101
WorldMags.net
The essential testing types

Understand the four ways of testing an app to make better software
Testing that what you think

will happen actually happens
is easy, but important.
efore your code can run

on a device, it needs to be
turned into machine code
by the compiler. This will
help you debug your code by catching
obvious errors in the syntax of the code
if you misspell a property name or try
to return the wrong type of object from
a method, the compiler will complain.
Youll need to fix these basic errors
before you can continue.
Unit testing
Frank enables you to

simulate someone using your
app, saving a huge amount
of time and effort.
102 |
But you can also use testing to ensure

that the internal logic of your app is
correct. Say youre building a game, and
some code tracks the players lives. Youll
need rules about what causes the loss
of a life. Unit testing helps ensure that
the logic of your code is correct. Does it
do what you expect it to do, every time?
Unit testing gets its name because
youre writing small test methods to

check units of code rather than the
overall app. Testing code can also help
handle edge cases. What happens if
your user enters text in a field that
handles only numbers? You could test
this in the Simulator by typing in dodgy
data, but if youve got to go through 20
screens to test the field, this gets pretty
tedious. Testing can repeatedly check
methods over and over again.
Unit testing can also help to catch
situations where changing code in part
of the project breaks things elsewhere.
Its an early warning of problems that
might otherwise get discovered only
when the app gets used for real.
Theres a simple rhythm to doing
unit testing properly. First, you decide
what should happen when the code
runs this is called an expectation.
For example, if your player captures a
power-up they should get an extra life.
Next, you write a test method or unit
test that does three things. First, it sets
up your expectation with a snippet of
code here, you might create a Player
object with an initial number of lives.
Then it fires the method that you want
to test, and captures the output of this
code in this case, youd perform the
<powerUp> method on your Player
object. Finally, you assert whether
comparing the expectation and the
WorldMags.net
results should be true or false. If you got

what you expected, your assertion is
true and your test passed. If you didnt,
the assertion and your test fails.
It sounds simple enough, and indeed
its the most obvious form of testing you
could think of but with this technique
you can exercise your code over and
over again. Even methods performing
complicated algorithms can be tested
by deciding what end results you want,
running the method, and comparing
the results with your expectation with
luck, producing the right result.
Interface testing
Lets say youre building an app that
needs the user to log in with an email
address and password. You want to test
that the next screen shows correctly
after a successful login. How could you
do that? One option is to fire up the
Simulator and repeatedly type in details
yourself or do the same thing on a
device. But that can be slow and
tedious, and frankly theres always the
risk when building apps that if testing
something is slow or difficult, you tend
not to bother.
Fortunately there are some tools that
can help. With interface testing, the clue
is in the name. Its about ensuring that
all the visual elements of your app work
together. You can think of interface
testing as a pair of robotic hands that
can manipulate your app to run tests
over and over again. These can tap, type,
and swipe around the user interface,
and then test the results. Apple provides
a tool called UI Automation, which ships
as part of the Xcode suite. You test your
app by writing small scripts in JavaScript
to accesses individual controls in the
user interface. Each control sits in a
hierarchy of views so you could point
to a login button by referring to it as the
first button in the main window of the
front-most app on the Simulator. Once
youve found the button, you can tap it
in code and test the results in a very
similar way to unit testing.
Another option is an open-source
project called Frank. This finds controls
by looking for their properties. Its a bit
like CSS, but instead of HTML you can

WorldMags.net
The testing toolkit
Xcode bots & UI Automation TestFlight
Google Analytics
If youre a member of the Apple Developer

Program, you can download a copy of OS X
Mavericks Server for free. This gives you the
Xcode service, enabling you to automate the
running and reporting of your tests with Bots.
TestFlight is one of the best-known services

for distributing your apps to test users. It
makes the process easy for developers and,
even more importantly, painless for the people
who will be testing your apps. The service is
completely free to use.
www.testflight.com
Google Analytics is the gold-standard stats

service for websites, and its SDK for iOS apps is
just as powerful. Its a straightforward process
to add the library to your app, then capture
stats and events which feed the reports
available on the analytics dashboard.
developers.google.com/analytics
Leanplum
Zendesk
Leanplum makes implementing A/B testing

in your app virtually painless. The automated
installer plugs the service into your app, and
offers a tier of service levels to suit your needs.
Start with its free service to try things out.
www.leanplum.com
Zendesk is both an online self-service help

centre that your users can access, and also a
tool for gathering and tracking problems and
issues. Its used by some big names, but there
are cheap entry-level plans to get you started.
www.zendesk.com
Frank & Gherkin

Frank is a framework that enables you to
write simple, structured tests in a Plain English
format called Gherkin, then use them to drive
your app in the Simulator as if you were
testing by hand. The main Frank site has links
to some great tutorial guides and screencasts
you can follow.
www.testingwithfrank.com
find buttons, input fields, table cells and

more, then tap, fill and swipe. The tests
are written in a simple but structured
syntax called Gherkin. Frank is a separate
tool from Xcode, but its not hard to get
started with it.
Integration testing
Integration testing pulls both unit tests
and interface tests together to make
sure that changes in one part of the app
dont cause problems somewhere else.
For example, you might change the
By running all your tests repeatedly

you can get warning of problems
as soon as you cause them
structure of a database model to fit the
needs of the part of the app that youre
working on. Often this wont be a
problem, but sometimes a change like
this will break other parts of the app
that rely on the same model.
This is particularly important if youre
collaborating with another developer to
build your app. They may inadvertently
change something that affects your
code, and vice versa. Without testing,
you might find this out only once its
too late but by running all your tests
repeatedly, you can get an early warning
of problems as soon as you make the
changes that cause them.
In many organisations with teams of
developers, the suites of tests are run
automatically by integration servers that
fire them off when code is checked into

the source control system. But you dont
have to be a big organisation to benefit
from integration testing.
OS X Server for Mavericks includes
bots that continuously build your app
and run your tests, giving you early
warning of potential problems. The
bots can connect to the source code
repository containing your app to
check out the code, run the unit and
integration tests that youve written
along the way, and report the results
in a dashboard.
QA testing
Quality assurance tests are the final
piece of the testing jigsaw. Theyre
about checking the polish of your app
before launching. Unit and integration
tests will help to take care of the quality
of your code, but theres no substitute

for the human eyeball when it comes to
finding snags and problems.
Things to look out for are little
niggles ike typos in labels or captions,
missing images or content, or lurking
placeholder images, particularly at the
wrong resolution. Youd be amazed at
the number of apps that hit the Store
still containing the boilerplate lorem
ipsum temporary text!
Its best to get someone else (ideally
someone sufficiently literate) to help
you QA-test your app. After weeks of
looking at the interfaces youve built, its
very easy to miss mistakes that others
will spot quickly. A fresh pair of eyes will
notice things that youll overlook. That
final proofreading step before you
submit the app to the store will help
prevent later embarrassment.
Xcode and OS X Server

include some massively
useful testing tools.
WorldMags.net
| 103
WorldMags.net
Road-testing your app

Just because its on the App Store, the improvements dont stop!
Google Analytics works

perfectly with iOS apps,
letting you see how your
app is used.
o your code is backed up

with a full suite of unit
tests, and youve fully
exercised your app with
integration tests. Thats all, right?
Not quite. Theres no substitute for
getting more eyes to look at your app
real live users will spot things that
youve missed, and suggest things that
youve never thought of. And once your
app is out there on peoples devices,
wouldnt it be useful to know how its
being used, and which features are
really engaging your users? In short,
Theres no substitute for getting

more eyes to look at your app real
users will spot things youve missed
testing with users both before and after
your app hits the store can help you
tune the features.
Even before you submit your app to
the store, you can get beta versions into
the hands of users. Apples distribution
process at the time of writing makes it
somewhat complicated, but you can
make things easier for yourself and your
testers by using a distribution service
such as TestFlight (www.testflightapp.
com) or HockeyApp (www.hockeyapp.
net). These allow you to sign up testers
though their websites, then distribute
apps to them without needing to go via
104 |
the App Store. The services can also

collect crash reports and analytics to
help you track down bugs and tweak
app behaviour before submitting to
the App Store. You can send out new
versions as quickly as you can fix the
bugs, with no need to go through the
App Store approval process. Once
youve signed up with the service,
you can create builds of your app
and upload them to their website.
Test users can be recruited directly
from the service through email; this
automatically downloads the required
profiles to their device, and gives you
their devices unique ID. Once the
device IDs have been added to the
Apple Developer portal, distributing a
new or updated app to test users is as
simple as uploading a new version to
the website. Your users will get an email
with a clickable link that installs the
app no fiddling with iTunes needed!
Depending on the service settings, you
can also let users know when new
versions are available, or even install
updates automatically.
There are some restrictions youre
still subject to the 100 device testing
device limit from Apple, for example
but the great advantage of these
services is that for your test users,
theyre incredibly easy.
Once youve got people testing your
app, you need to get their feedback.
Theres always the option of a face-toface conversation, but services such as
TestFlight and HockeyApp can add in
feedback forms into the app itself, so
you can get users opinions fresh from
their app experience.
been using analytics for years to track

how users behave, and the good news
is that the same can also be true for
apps. On the web, analytics can be used
to find out where your visitors are
coming from, and which parts of your
site are most popular. App analytics is
very similar by inserting checkpoints
into your app, you can get insights into
how your users engage with it. You can
find out how many people are actually
using your app, and which features are
getting the most use. Many services, like
Google Analytics, can also capture crash
reports in case something slipped
through all the unit testing you did
before release.
Most analytics services work by
including their SDK into your app as you
build it. Then they capture events such
as the app being opened or a particular
view being loaded, and send the data
back to their servers. It all takes place
transparently to the user, and the data
can be viewed in a web dashboard,
where you can analyse whats going
on. Not all developers choose to use
analytics in live apps (some consider
it spying on users, although you can
check how different analytics services
After youre live

Even after your app is in the Store,
testing doesnt need to stop there. The
most obvious statistic you can see is
how many times your app has been
downloaded but with some clever
web services, you can look at the
behaviour of your real-life users. Armed
with this data, you can use the insights
to tweak and fine-tune your app in
subsequent versions.
One of the most common ways to do
this is by using analytics. Websites have
WorldMags.net
TestFlight makes it easy to send early builds of your

app out for some real-world testing.

WorldMags.net
shades of blue. A/B testing in apps can
trial simple features such as how long a
message stays on-screen, or you could
use it for more complex alternatives,
such as entire features.
Building A/B testing into an app is
almost as easy as it is on the web, and
Websites use analytics to track how

users behave, and the same idea
can work for your apps
LeanPlum enables you to implement and track A/B testing in your apps, for advanced testing.
anonymise data if youre concerned
about this), but it can be hugely useful.
A/B testing
Knowing what your users are doing
is helpful, but what if you need to
decide which way of implementing a
feature is most effective? A/B testing is
a technique widely used in the web
world. By building your site with two
different implementations of a particular

feature or user journey, you can then
randomly assign users to one or the
other when they arrive. Then you can
capture analytics to see which of the
versions is the most effective. Google
famously uses A/B testing for deciding
almost everything about its services
to decide the colours of the interface
in Google Mail, it tested 40 different
can give you some valuable insights

into how users react to different
implementations of the same feature.
The simplest way is to distribute two
versions to beta users via TestFlight or
HockeyApp, but you dont have to stop
there. Services such as LeanPlum (www.
leanplum.com) and Apptimize (www.
apptimize.com) have plugins and SDKs
that you can integrate into your app
itself. Then you can configure the apps
behaviour some services even have
web-based dashboards where you can
turn features on and off remotely. They
also capture data about how users react,
which you can then use to decide
which approach to use.
Getting feedback from customers

Nothing sells an app as well as
five-star reviews and happy
customers talking about it on
social media. Testing after
launching the app into the
Store is about finding out what
people think about your app,
and also being proactive. If
you give your users an easy
way to contact you and get
satisfaction, you can head off
problems before they end up
as poor reviews.
You can get feedback from
users right from within the app
itself if its easy to send a
report about a bug, then users
are much more likely to do so.
Its also an opportunity to
capture detailed information
about the state of the device
and why the problem occurred
in the first place.
Services such as Instabug
(www.instabug.com) and
Apptentive (www.apptentive.
com) make it very easy you
can integrate their feedback
modules with a couple of lines
of code. Reports are collected
on the services website and
give you a way to track whats
going on.
Outside of the app, its also
important to engage with users
on social media channels. You
can set up Google searches to
spot any mention of your apps,
and try to get a catchy Twitter
handle to complement the
name of your app itself. If users
are mentioning your app in
frustration, replying with a
friendly tweet and attempting
to solve their problem can turn
a potentially negative situation
into a positive one.
If youre using social media
such as Twitter and Facebook,
then tools such as Zendesk can
help you pull all the relevant

conversations into one place.
They give you easy ways of
tracking problems and
analysing trends, as well as
building FAQ and support
pages. Wherever possible,

youre looking to catch and
keep solving any problems
before they reach the App
Store, to make sure your fivestar reviews shine through.
Zendesk is used by big names such as foursquare and Box.com.
WorldMags.net
| 105
WorldMags.net
DESIGN & TESTING | The making of William Hill
Place your bets

The app for sports fans on the move scores over 1.5m downloads
BEN
JONES
Ben Jones is the
Product Owner
for Mobile
Platform and
Enablers with
William Hill. Hes
worked on the
William Hill app
since launch.
The app offers
a comprehensive
mobile betting
system for
sports fans.
106 |
William Hill is one of the

UKs largest and most
successful bookmakers. Its
listed on the London Stock
Market and at the tail-end of 2013 the
whole business was worth in excess of
4 billion. Like many of its competitors,
William Hill was quick to see the
opportunities that mobile computing
offered and has embraced app-making
with both hands.
Casting his mind back, William Hills
Ben Jones says: We released our first
app in the iTunes Store in late 2010,
and its been absolutely integral to
our strategy since then. We need to
engage our customers in the way that
they want. Socially, the shift to easily
downloadable apps has been huge.
This is the story of the William Hill

sports betting app. It is the most
popular product of its kind in the
iOS App Store, and has achieved nearly
1.5 million downloads since its launch
in 2010. Indeed, such has been the
apps popularity and its associated
prominence in the App Store, the
William Hill app itself has acted as
a marketing tool for the firm. Jones
believes that the app has helped
people discover William Hill.
The move to mobile

The app gives customers the ability to
place bets, view horse races live, check
the bets theyve placed and a whole
host of other features. More important
still, they do all of this wherever they are.
WorldMags.net
Even before creating the iOS app,

William Hill already had a mobile web
version of the site, but the company
wanted to build an app for the
customers ease of use. Ben Jones tells
us: Having an app there on your device
not only means youre one tap away
from checking the latest odds, it gives
us extra scope for developing items
like auto login to get the customers
engaged as quickly as possible.
A technical mountain
Our app is a hybrid, Jones tells us. This
means that there is a native framework
controlling web views containing our
mobile website content. This gives
us the flexibility to make constant
improvements without spamming the
The making of William Hill | DESIGN & TESTING

WorldMags.net
customer with app updates.
Building the app was clearly a very
complex task. It took a team of around
eight people six months to create. Jones
tells us: The nature of sports betting
means that there is a near constant
communication between our servers
and the app. This communication
needs to be reliable, fast and secure.
The William Hill app is available on
both iOS and Android. This raises the
question, which platform does Jones
prefer working in? That depends on
who you speak to! Jones says.
Personally I think iOS gets a less
experienced developer a basic app
faster, but with some experience there
isnt much to choose [between the
two]. A company should always start
with iOS in my opinion, simply because
the App Store is more integral to the
iOS experience.
Only skin deep

On the surface it might appear that the
William Hill app is similar to an internet
banking app, but under the hood they
are very different. Banking apps transfer
only small amounts of information
between the recipient mobile device
and the banks servers. And this
interaction probably happens just once
a day. In the betting industry, its a very
different story. Jones tells us that each
customer uses the betting app four or
five times a day, which all adds up to
some very busy servers. We need to

make sure that a customer who opens
the app two minutes before a match or
race starts can get the information they
want and place a bet before the start.
That means a lot of work goes into
making sure the speed and reliability
of the app is there even during
exceptionally busy times, Jones says.
Like all successful businesses, William
Hill takes feedback from its customers
very seriously. We gather feedback
wherever we can, Jones explains. The
App Store review is a constant source of
info, with customers leaving ideas about
features they would like and issues they
have when using the app.
The app also asks customers to rate
its performance and provide feedback.
expectation is for a completely polished

standalone product, and thats what we
aim to provide.
Horse racing fans can view

a number of international
races that are about to start.
The next big thing
A lot of work goes

into ensuring that
the app is speedy
and reliable even
at very busy times
Feedback, Jones tells us, is integral. So
what has the feedback been like?
On the whole, really positive,
Jones says. In the early days of app
development maybe customers were
a bit more lenient when it came to
the occasional error, but now the
Looking forward, Jones explains William

Hill will continue to roll out app versions
of all product verticals, such as poker.
Summing up his take on apps, he tells
us: Its clear that mobile has become an
integral part of our business so much
so, that in November 2013 we became
the first FTSE 100 company to move into
the Silicon Roundabout area in Scrutton
Street, Shoreditch, when we opened a
dedicated tech dev centre of excellence.
We want to hook into start-ups and
attract the very best talent out there
and we firmly believe Shoreditch is
where we will find the best.
Designing for the small screen

When making its app, William Hill encountered a perennial design
challenge: screen sizes on mobile devices can be very small indeed,
particularly on mobile phones. Back when desktops ruled the roost
and everybody accessed the internet via a big browser window, it
was comparatively easy to accommodate different users and their
interaction preferences.
William Hills quick single feature is a prime example of mobilefriendly thinking. Designers werent about to fit a whole bet slip
(or basket in commercial terms) on the screen. Jones says: This
meant we either had to develop for customers who wanted a quick
simple bet on one horse, for example, or those who wanted to
spend time adding lots of football teams into their bet slip,
looking for that big win.
After much experimentation, William Hill discovered that the
answer to this design conundrum lay in the touch-based nature
of mobile devices. Rather than showing the whole bet slip, Jones
explained, the firms designers made the slip interactive. Users can
tap to add to the bet slip, or hold down on a price to bring up a
screen designed to quickly place a single bet. This flexible fix
encapsulates a key mobile design rule: customers familiar with
The app also offers casino style games, like Roulette and Blackjack.
your web experience will behave differently, and expect a different
experience, when using a touch-enabled device. Dont try to corral
users into behaviour; theyll always find their own and often
unexpected way of achieving an outcome.
WorldMags.net
| 107
WorldMags.net
VISUAL GUIDE | ANATOMY OF A WINNER

2
1
3
Different screens
Accounts
Different events
Listen to radio
Popular features
A large menu
Because the screen

1
sizes are so different
on an iPhone and iPad,
William Hill is one app
that responds differently
when its installed on
different iOS devices.
The customer can

2
access all the major
account functionality
available on the desktop.
The payment/financial
features have been
improved since the
apps conception.
The full range of

3
William Hills sports
betting events is available
to mobile customers. These
panels change according
to the moments biggest
draws. Again the app
surfaces info and options.
The app can also

4
access William Hills
radio services. These help
fans with betting choices
by providing up-to-theminute feeds about whats
happening on the football
pitch or the race track.
The most popular

5
bets are easily
available for customers on
the homepage. This means
sports fans can indulge
their passion quickly and
efficiently, without hunting
through menu layers.
Additional gaming
products, such as
William Hill Roulette,
are also available via the
app. The app raises these
extras to the surface layer
so customers can discover
them easily.
William
Hill app
William Hill initially
offered a desktop-based
site; the William Hill app
story began in 2011, and
the firm has continued to
develop the product
108 |
Aug
2011
The company
begins to develop
its William Hill
native app for
Apples mobile
operating system.
Feb
2012
A team of around
eight people work
for six months to
produce the first
incarnation of the
William Hill app.
Apr
2012
William Hill listens
to customers
feedback and
begins developing
improvements to
the mobile app.
WorldMags.net
Dec
2012
William Hill
launches an iPad
version of the app.
This necessitates
a complete
redesign.
Jun
2013
The app hits one
million downloads,
and is featured in
the App Store
Sports category.

WorldMags.net
The William Hill team has worked hard to
make the financial aspects of the app easy
and intuitive. Account functions, such as
depositing funds, are available within the
app. The system is designed to be secure
and to protect users account details.
Tap the radio icon in the left panel and

the William Hill Radio feed will begin. A
Now Playing message appears at the top
of the screen. There are three radio feeds,
each dedicated to keeping sports fans
bang up-to-date with the latest news.
Feedback has been really important to the team. Customers are expecting
more and more from their apps, and development teams need to monitor this.
Be prepared to act on criticisms that may appear in reviews of your app
Jul
2012
Sept
2013
Nov
2013
Dec
2013
William Hill Radio

arrives in app
form. Customers
can listen to three
stations packed
with news.
William Hill adds

push notifications
so customers can
learn about the
latest offers and
special deals.
William Hill moves

into its new
technology centre
of excellence
in Shoreditch.
To ensure parity
between desktop
and app, advanced
payment options
are built into the
mobile app.
Feb
2014
The William Hill
app is now on
course to achieve
1.5m downloads.
WorldMags.net
| 109
WorldMags.net
Customers can create a William Hill

account as well as manage their
payment methods and add funds
to their account, so the app can
provide a complete service without
the user needing to have placed
bets with William Hill before. This
is especially important because of
the large number of customers
that the firm has acquired directly
from the App Store.
Native apps can be confusing for new users, no matter

how hard youve worked on your UX. If your app is very
complex, its a good idea to include a tutorial. This way
you wont lose your customers attention or trust if they
happen to encounter a problem or hurdle. Where possible,
test your app tutorial on real users.
For certain bets you can also cash in your

bet before the results are known. The
apps provides a value for these bets that
the customer can take to settle the bet
immediately; this means the customer
can either recoup some money from
a bet they believe is going to lose, or
guarantee a profit by settling a bet
in a winning position.
Once the customers bets

have been placed, they
will be presented with
a receipt like any retail
apps. Customers can
view any of their bets,
open (outcome
unknown) or settled
(outcome is known),
from within the app.
110 |
WorldMags.net

WorldMags.net
QUICK
TIPS
Once a customer has made their

choices, they can place a bet using the
section on the right-hand side. An
estimated amount that the customer
could win is automatically calculated
and displayed so they can make an
informed decision about their bets.
New to all this?

Whether youre
making an iOS or
an Android app,
our colleagues
on Creative Bloq
have created a
guide to the
webs best appmaking tutorials
http://bit.
ly/1bSPAdx
Decided what to bet on? Just tap on
the corresponding odds button and
add it to the bet slip this is the
equivalent of a basket in a retail
app. The final step is to press the
Place Bet button. The process really
is that quick and painless.
If a user has placed a qualifying bet, they will be able to view a live
stream of selected races to see how their horse runs, which is especially
useful for customers on the move. Customers can see a list of the events
they have qualified for on one page, as well as other races that the
William Hill app offers the service on.
Designing to
keep your users
happy This is
tricky! Creative
Bloq details 20 of
the biggest UX
crimes at http://
bit.ly/1bRqkQE
Dont be scared
to prototype
There are some
fantastic tools for
prototyping.
Ben Jones says
he had plenty of
ideas on paper
that simply
couldnt be
transposed to a
mobile device.
Playing around
with ideas before
dev starts will
save time and
give you a more
customer-centric
product.
Designing with
new tools is
hard Theres
a lot of pressure
on designers
to abandon
Photoshop
when making
sites and apps.
Designer Sarah
Parmenter shares
her frustrations
about moving
away from paper
and Photoshop
at http://bit.ly/
1iVipqw
WorldMags.net
| 111
WorldMags.net
DESIGN & TESTING | Selling your app

Finesse your App Store submission to perfection with these tips
Create amazing screenshots
Images will be far more important to your
apps success than many of the words you
write. The truth is that most people start
to narrow down their choice of apps based
on the icon and screenshots without even
reading the app description. Youll use
the words to try to convince a person to
download an app (even a free app), but
without decent images you wont even get
them to read what the app is all about.
As well as creating a great icon, you
should make sure that the screenshots you
add to the App Store completely sell the
best features of your app. Make sure that

each of the five pictures displays a different
element of its use and that the app is filled
with realistic information in each one.
Try to show as many different aspects
of your app as possible. The screenshots
for Evernote are a great example of busy
screens showing off a lot of features. Each
shot is different, and packed with realistic
real-world information. Above all, try to
ensure that the screenshots and app name
sum up the app, without your customer
even having to read the description.
Use a strong icon and variety of shots to attract customers.
Consider adding marketing to your shots

It can be a great idea to use the App Store
screenshot space to display more than just
a shot of the app. Although Apple insists
that screenshots show your app screen, you
can add a lot of flair to each shot. Most of
the high-profile apps now use attentiongrabbing artwork and text to create miniadverts in the screenshot space.
You can submit designs with iPhones and
iPads displaying your app, and some people
include backgrounds and even hands, to
give the potential downloader a feeling of
the app in use. Dont just take a photo of
your hand holding the iOS device with the

app running, though; to make things look
as crisp as possible, youll need to create a
composite using stock art from a site such
as Shutterstock (www.shutterstock.com).
The shots of Scanner Pro by Readdle are
a good example of the sort of thing you can
do. The screens are shown on an iPhone
being held in a well groomed hand against
a blurred background. At the top is a bold,
blue, mostly opaque box with white text
that highlights key features of the app. All
these elements help to sell the app.
Use your screenshot space to show off your app in action.
Write flawless descriptions

The first three lines of your description need
to sell the app completely. Make it as basic
as possible. Write the name of the app, what
it does, and why people should download it.
Take this intro from Flipboard: Flipboard
is your personal magazine. It is the most
popular way to catch up on the news you
care about, discover amazing things from
around the world, or stay connected to the
people closest to you. Or this intro from
Evernote: Evernote is an easy-to-use, free
app that helps you remember everything
across all of the devices you use. Stay
112 |
organised, save your ideas and improve

productivity. Both of them name the app,
briefly describe what it does, and then list
reasons why you should get it.
Beyond that, go light on listing features,
and heavy on the salesmanship. You should
include customer testimonials, reviews from
influencers and any awards the app has
won. Game publisher EA is a good example
of app descriptions that are based around
selling the download rather than listing the
features. Take a look at Dungeon Keeper to
see this sort of approach
WorldMags.net
Sell! Sell! Sell! If youve got a good review, use it!
Selling your app | DESIGN & TESTING

WorldMags.net
Positive language
Edit your copy
In the UK we tend to shy away from

overly enthusiastic language, but when
putting together your app description
you should ditch any cynicism you
might have in your head. Focus on filling
your app description with the positive.
Many apps are filled with words like
excellent and amazing and while these
are perfectly adequate, theyre thrown
around so liberally as to not really mean
that much any more.
Its very easy to find lists of more
descriptive yet still wholly positive
words online for example, try the
collection at http://bit.ly/1opMz8M.
Its packed with words such as clear,
generous and renowned, and has
words that you might not have thought
of in years, let alone considered. Wed
advise you to go through the list with a
highlighter and look for words that you
think could apply to your app, and dot
them into the description to make it
sound more peppy. Dont go too mad,
though, or you might end up sounding
like a used-car salesman.
Few things kill interest in your app faster

than a poorly written description. When
writing yours, be sure to use a spellchecker, and check for double spaces. Be
careful to search for instances of its (the
abbreviation for it is and it has) and its
(all other uses) and make sure each one is
correct (along with other apostrophe use).
If youre not particularly confident with
language, use a tool such as Grammarly
(https://app.grammarly.com/) to check
your text. Cut and paste it into Grammarly
and set the Document Type to Business
and Ad/Website copy, then go through
the suggestions listed on the right.
Grammarly is suitable for tightening up
copy, but dont be afraid to break a few
rules. Youre writing an advert, not a
Positive words can be used to enliven any app

description up to a point.
Tools like Grammarly can help clean up app descriptions.

technical document. Dont lie, but dont
be afraid to put a positive spin on things.
Above all else, make sure you get other
people to check your copy, even if you
think youre a good writer in fact,
especially if you think youre a good
writer: you will miss your own mistakes.
Coming up with
your apps USPs
Coming up with a unique selling
proposition, or USP, can make or break
your app. Heres the secret: the USP is
not about being the best at anything
its about being different. Its likely that the
customer will have a tough time deciding
between your app and others on the
market. All your hard work creating
compelling icons, screens and descriptions
will still leave a customer choosing
between you and somebody else.
The Things app is a great example
of hammering home a USP. There are
hundreds of task managers on the iPhone,
but Things focuses like a laser on telling
you how simple it is to use. Just about
every line in its description has the word
Try to talk about why your app is unique and different,

rather than merely better than its rivals.
easy, ease or simple. The description
doesnt even mention features until Things
has listed all the reviews and awards for
how easy it is to use. Take time to find, or
create, something unique about your app.
Then go on about it relentlessly!
Include special symbols

One thing that many app listings dont take
advantage of is the fact that you can include
more than just text and spaces in the
description you can also include special
characters. These Unicode characters can
be anything from stars (useful for review
scores) to triangles or ticks. Yahoo! Mails
app description is a good example of
combining triangles with underlines and
bullet-point circles to break things up.
You can include symbols in your text
using the Special Characters tool in OS X. In
Finder, click on Edit > Special Characters to

open the Special Characters box. You can
hunt around for graphic ideas, or use the
search box to find symbols; enter words like
star or arrow to find shapes.
Including special characters will make
your app description look a lot more lively,
and adding things like bullet points can
make it easier to skim-read, which will help
you to get important points across. Again,
though, dont go too mad or your listing will
just start to look tacky and unreadable.
WorldMags.net
Used sparingly, special characters can liven up your

description and make it much easier to read.
| 113
WorldMags.net
DESIGN & TESTING | Submitting your app
Want to see your app in the

iTunes Store? Theres quite a
bit of work to do before that
can be arranged

How to upload your app to the iTunes store via iTunes Connect
SKILL LEVEL
Could be tricky
IT WILL TAKE
7-14 days
YOULL NEED
Computer, internet
access, Apple ID, bank
details, IRS Form SS-4
and fax machine
114 |
ouve finished designing,

building and testing a
fantastic app, and now
its time to run it up the
flagpole and see if anyone salutes, so
to speak. More specifically its time to
submit your app to the App Store and
get it through the app review process,
so that its finally available for sale.
For this, youll need to be signed
up to Apples Developer Connection
(https://developer.apple.com), and use
a web service called iTunes Connect.
It sounds easy enough, but in our
experience iTunes Connect can be
where real complications manifest.
Signing up to Developer Connection
involves some intensive form-filling,
but iTunes Connect requires you to deal
with the IRS (Internal Revenue Service,
the US equivalent of the UKs Inland

Revenue) before you even begin. This
is the first hurdle; the second is that
youll need an IBAN (International Bank
Account Number). Over the next few
pages well lead you through the
process of setting up all these things.
Theres a surprising amount of
information needed for each app, and
it can be slightly overwhelming at first,
but once you get used to it you can
iTunes Connect
requires you to deal
with the IRS before
you even begin
submitting an app
WorldMags.net
swiftly move your apps through the

review process.
The first step is to head to iTunes
Connect (https://itunesconnect.apple.
com) and fill in an iTunes Connect
Online Application. First, log on to
iTunes Connect using the same Apple
ID as your main developer account.
In iTunes Connect are nine sections:
Sales and Trends; Contracts, Tax and
Banking; Payments and Financial
Reports; Manage Users; Manage Your
Apps; Grow Your Business with iAd;
Catalog Reports; Developer Forums and
Contact Us. The three sections you need
to get started are Contracts, Tax and
Banking, Manage Users, and Manage
Your Apps.
Its best to start by setting up your
App Store team. Click on Manage Users
Submitting your app | DESIGN & TESTING

WorldMags.net
QUICK LOOK | iTUNES CONNECT
Sales and Trends
When your app goes on sale, youll be
able to view and track statistics on its
performance on the App Store from here.
1
Contracts, Tax and Banking

Before you begin submitting your app,
youll need to set up your Contracts,
Tax and Banking information.
2
Manage Users
You need to add users (even if its just
yourself) to iTunes Connect. You need
to fill roles of Admin and Legal, and on larger
projects you can also add Technical, Finance,
Sales and Marketing roles, if you like.
3
Manage Your Apps

This is where you begin the process of
uploading your app to the App Store.
You can also manage and remove apps from
this section.
4
and choose iTunes Connect User. Now

click on Add New User; fill in the first
name, last name and email address
fields and click Continue.
You need to choose a role for each
person you add. By default you will be
listed as Admin, but you also need one
person to be designated as Legal (to
sign contracts), which is also you by
default. Beyond that, you can assign
roles for Technical, Finance, Sales and
Marketing, if you want.
You can specify which notifications
the person gets, and whether they
should be for worldwide or individual
territories, including All Notifications,
Contract, Financial Report, App Status or
Payment reports. Click Save to add the
user, and they appear in your Manage
Users page. Once you have your team
set up its time to head over to
Contracts, Tax and Banking.
Get your EIN

Before you go any further with iTunes
Connect youll need to get an EIN
(Employer Identification Number)
from the IRS. Apple requires an EIN for
everybody who sells on the App Store,
regardless of where in the world they
QUICK
TIP
Get an EIN from the IRS by filling out this SS-4 form and calling the IRS telephone line.
are based. Without your nine-digit EIN
you cannot upload an app.
To get an EIN, you must fill in a form
snappily called SS-4 (http://www.irs.gov/
pub/irs-pdf/fss4.pdf ) and pass it on to
the IRS. Unfortunately, you cannot fill in
the form online, and in our experience if
you fax it to the IRS it takes a long time
to be processed. The best way to get
your EIN is to fill in the form, so you
have all the details ready, and ring the
IRS directly on +1 267 941 1099 (which

is not a free number) but with access
to a fax machine just in case. The IRS
assistant will usually fill in the SS-4 at
their end with the information you read
out to them, and then give you your EIN
over the phone. Sometimes, though, the
IRS will request that your SS-4 is faxed to
them. The fax number is +1 267 941
1040. Make sure you list your return fax
number on the form; if the IRS doesnt
WorldMags.net
Your
International
Bank Account
number (IBAN) is
the same as your
normal account
number, with
the addition of
a few extra
characters. You
might find it on
your bank
statements; if
not, your bank
will be able to
supply it.
| 115
WorldMags.net
QUICK
TIP
Keywords are
words that
people will
typically use
when searching
for an app. You
should ensure
your App Title
and App
Description field
contain relevant
keywords, so
people find your
app easily.
return your EIN by fax within about

a week, begin the process again.
Its best to get your EIN while app
development is taking place, because it
can take days or weeks for the EIN to be
activated after youve got it. As soon as
youve got your EIN, though, you can
carry on setting up your tax information.
Back in iTunes Connect, click on the
Contracts, Tax and Banking section.
Then click Request next to iOS Paid
Applications, then Submit, to get a
contract emailed to you in PDF form.
One youve go the contract for iOS
Paid Applications click Set Up next to
Tax Info; now click Set Up next to U.S.
Tax Forms, enter your EIN from the IRS,
and click Submit. Answer No to Are
you a U.S. citizen, U.S. resident, U.S.
partnership, or U.S. corporation? and
Submit. Answer No to Do you have any
U.S. Business Activities? and Submit.
If you are an independent developer,
you should choose Sole Property as
your Type of Beneficial Owner and tick
the I declare box (other options are
available for different business types).
Enter your name and title and click
Submit. Note that once you have
submitted the form you cannot make
When Apple has

approved the app
you will see this
Ready For Sale
status. Success!
any changes, so make sure you enter
the information correctly.
Set up your banking

Before you set up your bank account
information, you will need to get an
IBAN (International Bank Account
Number). Every bank account has this
additional number, and your bank
should be able to supply you with it.
Click Set up next to Bank Info and
then Add Bank Account. Click Bank
Country, choose United Kingdom and
click Next. Enter your bank account sort
code. Check that your bank name and
address is correct and click Next. Now

enter your bank account number,
account holder name and currency
(GBP, Great British Pound). You will be
asked to enter the IBAN. Click Next to
submit the information to Apple.
Preparing to submit an app

Now that youve got your users, tax and
banking details set up with iTunes, its
time to do the fun part (well relatively
speaking) of setting up and submitting
an app. Its usually a good idea at this
point to create a checklist of things
youll need to test before you do.
HOW TO | UPLOAD AN APP WITH iTUNES CONNECT
1 App Name, SKU and Bundle ID
To begin simply log on to iTunes Connect and click on Manage

Your Apps. Now click Add New App and choose either iOS App or Mac OS
X app as appropriate (this determines what store it is sold in). Choose the
default language (typically UK English) and enter the App Name and SKU
Number this can be anything you like, but you are advised to come up
with a convention for your apps and stick to it. Now click Bundle ID and
choose the App Bundle from the list of apps registered in your Apple
Developer Connection account.
116 |
2 Determine availability and pricing
By default, the Availability Date will be todays date (although the

app will not go on sale until Apples team has approved it). You can delay
the on-sale date, which will enable you to set up your marketing and
promotion to coincide with a date. You can choose a Price Tier from a predetermined set of prices click View Pricing Matrix to see what they are.
Finally, you can offer a discount for educational establishments. Do not
tick Custom B2B App unless you are creating an app that you dont want
to appear on the main store. Now click Continue.
WorldMags.net

WorldMags.net
Dave Addy and his agency Agant
(www.agant.com) have created many
apps including big names such as
Discworld: The Ankh-Morpork Map,
Malcolm Tucker: The Missing Phone
and the official app for TV show QI. Dave
has also created a handy App Store
submission checklist that you can
download at his website (http://
daveaddey.com/?p=1273). This will help
you perform user testing across multiple,
different devices.
Its important to test your app not
just on the latest iPhone/iPad with the
latest iOS, but on different models with
different versions of iOS. When youve
tested and double-checked everything
in your app you can start gathering all
your resources.
Apple offers this list of resource
items that you will need: App Name;
App Description; Primary and Secondary
Category; Subcategories; Copyright;
App Rating; Keywords; SKU Number;
Application URL; Screenshots (iPad,
iPhone 3.5-inch, and iPhone 4-inch);
Support URL; Support Email Address;
End User License Agreement; Pricing;
Available Date; Territories; Large App
Icon of 1024x1024 pixels. Most of these
You need to add Legal

and Admin users to iTunes
Connect as a minimum,
but you can also add larger
teams to manage your apps.
JARGON
BUSTER
sound self-explanatory, but being aware

of a few niceties can help prevent the
app being failed when submitted.
App Name sounds easy enough,
but dont just put the name of your
app. Make sure you include a keyword
description as part of the title, so people
searching for general terms find your
app. So if you have an app called Photo
Cropper that resizes images, consider
calling it Photo Cropper: Easy crop and
resize photos, pictures and images.
3 Enter your app information
You now need to fill in the App Information field. This is the most
detailed form by far, with multiple sections that must be completed. It
includes Version Information, Metadata, Contact Information, EULA (End
User License Agreement) and Uploads (app icons and screenshots). The
App Description alone can be up to 4,000 characters, so its usually best
to create most of this information in advance and just paste it in. See the
walkthrough overleaf for a complete breakdown of everything youll have
to enter in this section.
If youre not sure what keywords work

with your app, look at similar apps in the
market and use a tool such as Google
Keyword Planner (http://adwords.
google.com/keywordplanner). Sign in
with your Google account, click Tools
and Analysis and choose Keyword
Planner. Click Search for new keyword
and ad group Ideas and enter a short
term that sums up the app, such as iOS
image editor. Now click Get ideas to see
a list of effective words and search
SKU
The Stock
Keeping Unit is
a unique code
attached to your
app. You can pick
any combination
of letters and
numbers, but as
a general rule its
not a good idea
to start an SKU
with a 0 because
this can get
removed in
some databases.
4 Uploading with Application Loader
When you have finally finished entering all the information about
your new app, click Manage Your Apps > View Details and Ready to
Upload Binary. Answer the Export Compliance questions regarding
cryptography (usually no, unless you know otherwise) and click Save.
Switch to Application Loader and click Deliver Your App. Now click Choose
and select Next. Review the Application Information and click Choose.
Now use Finder to locate the application bundle (usually a ZIP containing
the app files) and click Send.
WorldMags.net
| 117
WorldMags.net
terms to include in your App Title

and App Description.
The app description is an area that
you should pay a lot of attention to. This
area should be carefully thought-out. By
default, the store displays only the first
sentence or so before the Read More
prompt, so your first sentence should
sum up the app in its entirety and sell it
to the potential customer.
The remainder of the description
should describe the apps unique
features. Customers dont read
descriptions carefully they skim
quickly, at least at first so use lists,
quotes and short snappy phrases.
Many app developers use customer
testimonials (which can be controlled
more easily than app reviews). Do not
include any app pricing details here,
do not mention your competition (real
or perceived), and do not mention
availability on other platforms. These are
all red flags for Apple to reject the app.
Will Apple approve?

The App Information screen
shows your apps SKU,
Bundle ID, Apple ID and the
current status of the app.
Once youve got all the appropriate

information ready its finally time to look
at Apples app approval process. App
Store rejection is a valid fear that many
developers have: after all your hard work
The App Summary screen shows the App Metadata and Uploads (icon and
screenshots) for your app.
118 |
The Contracts, Tax and Banking screen has to be filled in thoroughly before you can begin to submit apps.
a person at Apple can simply say No
and all that time, effort and money will
be wasted.
The good news is that although
Apple individually vets each app, and
frequently rejects apps, its usually
up-front about the reasons why. So if
you fix the problem and resupply the
app its likely to be approved.
Apple will reject apps that are substandard from a developer perspective,
but by far the biggest reason your app
will be rejected will be the iTunes
Connect supporting material. Here are
some things to watch out for: make sure
that the icon in your app matches the
one you are supplying to the App Store;
dont use the word beta or imply that
your app is a work in progress; avoid
mentioning Android or any other
platform; be sure to name your app
consistently at all times; keywords
must relate to the app, so a photo
app can have image, crop, edit as
keywords, but Apple will block it if it
has games or babe. You also cant
mention competitors, so dont say in
your description Like Adobe Photoshop,
but free! or use keywords like Adobe
and Photoshop.
Apple also doesnt like anyone
putting pricing indications in the
marketing blurb or icon. This is because
Apple can change the pricing tiers at
any time, and your app will then be mismatched. (If youre ever having a sale or
similar and want to mention price, use a
percentage amount instead.)
You will also need to design an icon
and take screenshots to go with your
app store submission. The App Icon
WorldMags.net
should be 1,024x1,024 pixels and it

must be in JPEG, JPG, TIF/TIFF or PNG
file format of at least 72 DPI, and in the
RGB colour space. Screenshots should
be 1,536x2,048 for iPad and 1,136x640
for iPhone. Many developers also add
graphics and text to screenshots to help
sell the app better, a practice which
Apple seems to allow (but remember to
have plain versions available as well for
use as press materials see page 146).
Uploading your app

Once you have all your materials
together, and youve checked and
double-checked to ensure they are
unlikely to breach Apples app store
rules, its time to get it onto the Store.
Head into iTunes Connect and click
Manage Your App, then New App. Select
the platform (iOS or Mac OS) and enter
the App Name and SKU number, fill in
the forms and upload your images. The
app will now appear with an Amber
Status saying Prepare for Upload. Click
Done. When youre ready to upload your
binary (the app itself ) click Manage Your
Apps, choose the app, then click View
Details and Ready to Upload Binary.
Youre almost there! Move to
Application Loader and click Deliver
Your App. Choose your app from the
drop-down list and click Next, click
Choose, select the app binary and then
Open. Click Send, and its on the way to
Apple for approval.
Head back to iTunes Connect and
you will see your app with a Status of
Waiting for Review. Soon this will
change to In Review and eventually
Ready For Sale. Congratulations!

WorldMags.net
HOW TO | COMPLETE YOUR APPS INFORMATION
1 Version number
2 Choosing a category 3 The app rating
Start by entering Version Number use a

number beginning with a 1 or higher; numbers
like 0.1 usually denote betas, which Apple will
reject. You also need to enter the Copyright
Information; this should be the year, followed by
your name or the name of your organisation.
You can choose a Primary Category and

Secondary Category using the drop-down list.
These determine which sections of the App
Store your app will appear in if its listed in the
Top Apps and Best New Apps lists. Its wise to
use two categories for maximum coverage.
Made for Kids apps
There is also an optional Made For Kids

tag if the app has a rating of 4+ or 9+, which will
place your app in the Kids category. This gives
you extra exposure. Tick the Made For Kids tag if
it applies (be sure it does!), then choose from
Ages 5 and Under, Ages 6-8 and Ages 9-11.
6 Contact information
This is the contact information that the

App Review team will use if they need to get in
touch with you for any additional information. It
is not listed on the App page, so you neednt
worry about customers using this email address
theyll use the URLs you added in step 5.
Entering the metadata
This is one of the most important

sections to fill in. Cut and paste your description
from a text editor into the Description field (max
4,000 characters). Enter keywords separated by
commas (max 100 characters). Finally enter a
support URL and marketing/privacy URLs.
7 Review notes/demo
If your app requires the user to set up a

separate, non-iTunes account in order to use it,
you should set up a test account and use the
Review Notes and Demo Account Information
to pass the information on to the App Review
team. They will then use this to test out the app.
WorldMags.net
Now enter ratings for a number of Apple

Content Descriptions so Apple can determine
an App Rating. The ratings are 4+, 9+, 12+ and
17+. The age rating is determined by picking
from None, Infrequent/Mild and Frequent/
Intense for a number of categories.
QUICK TIP
Dont use the word beta or imply that your
app is a work in progress at any point in
the app description or in screenshots.
Apple rejects any apps that arent
completely finished, or claim not to be.
8 Uploads
Click Choose File next to Large App Icon

and select your app icon. Now add images for
3.5-Inch Retina Display (iPhone), 4-Inch Retina
Display (iPhone), and iPad up to five of each. If
theres a problem with the images youll see an
error message in red. Click Save when done.
| 119
WorldMags.net
DESIGN & TESTING | The making of Boson X
The physics experiment

How two developers crafted the dazzling endless runner Boson X
MU AND
HEYO
Ian MacLarty and
Jon Kerney are
Melbournebased Mu and
Heyo. The duos
creations have
graced a number
of platforms,
with Boson X
being their
breakout iOS hit.
Follow Ian on
Twitter at
@muclorty.
120 |
You may have read about

the Large Hadron Collider
used, among other things,
to discover the Higgs
boson, itself pivotal to the standard
model of particle physics. Clipboardwielding scientists spoke at length
about complex, hugely expensive
experiments that resulted in the elusive
particle being found.
Dont believe a word of it. As Boson X
reveals, whats really going on in Geneva
is scientists sprinting inside of particle
accelerators, running over the glowing
blue platforms to generate the highenergy collisions required to discover
new particles
Thus Boson X takes the form of
an endless 3D runner inside a tube.
Dizzying and demanding, it borrows

from Canabalt, Super Hexagon and
Tempest among others.
The control scheme is simple,
requiring only two thumbs, but each
of the colliders offers a unique test,
demanding that you understand its
personality and the patterns of
platforms, often moving and rotating,
which it throws at you from the start.
Developer Ian MacLarty and
co-conspirator Jon Kerney had the idea
for a 3D behind-the-head runner at the
pub in 2011: We were influenced
by Canabalt and Fotonica, and the 3D
aspect seemed original at the time.
The game was initially called
Ascendian, about someone in a coma
running towards a white light; the aim
WorldMags.net
was to finish the game within a year,

and offer players Canabalt-like jumping
in randomly generated levels set within
3D space. Then Temple Run arrived
and threw that plan into disarray.
Although Ascendian played quite
differently, Ian and Jon didnt want to
appear to be making a clone. The small
team then lost its way, lacking a clear
vision for the game.
It started to take on a neon/Tron
vibe, and we experimented with
all sorts of power-ups, bots that
periodically scanned levels, and special
blue platforms that increased your
hang-time while jumping, remembers
Ian. None of those really stuck, and we
should have moved on to something
else but its hard to let go when youve
The making of Boson X | DESIGN & TESTING

WorldMags.net
invested so much time in a project.
Super Hexagon was the turning
point, which Ian says knew exactly what
it wanted to be, and made no apologies
or concessions to mediocrity. Inspired,
he and Jon stripped their game to its
barest elements and started again.
Power-ups were ditched in favour of
more challenge and variations in the
levels. Speed became key, and in turn
the controls became more responsive.
Stripping back
Alongside these developments, the
games visuals were streamlined to
become simple vector shapes, and the
lanes were joined in a circle, forming a
tunnel. The blue energy strips were
repurposed to become the scoring
mechanism, and multiple levels were
designed with distinct patterns.
All of a sudden, it all came together,
says Ian, adding that along the way the
discovery of the Higgs boson led to a
change in theme, that of the professorin-a-particle-accelerator.
For Ian, stripping back the game from
a visual standpoint was a big success,
matching the gameplays newfound
elegance with a purer visual style.
Colour became vital.
We took out the effects and textures
and, as we reduced detail, the choice of
solid colours became more important.
[The idea of ] making each levels
patterns easy for players to discern

emerged naturally during this process
we favoured combinations that were
appealing, didnt clash too much, and
that had enough contrast for players
to see what was coming up.
As mentioned, the original idea for
the game involved entirely randomly
generated levels, but the procedural
aspect of Boson X was curtailed. Instead,
Ian and Jon carefully crafted pre-defined
patterns and sections that would be
hurled at you in a semi-random onthe-fly nature on each run.
Rules govern where two patterns fit,
so theres always somewhere to jump,
and sections with energy are treated
specially and are only permitted at predefined intervals, explains Ian.
Power-ups were
ditched in favour of
more challenge and
variations in the levels;
speed became key
The more energy you collect, the
faster you go, which he says turned
Boson X into an interesting high-score
game: The faster you move, the less
score you can get from a blue platform.
Theres therefore probably a limit to the
achievable score on each level, which

isnt the case with a game based on
time. And because we wanted a reason
to replay levels after reaching 100
percent (which first time round enables
a particle discovery on a subsequent
collision), we really ramped up the
speed after that point!
Finishing touches involved adding
sound with Ian slapping shoes on
stone slabs for footsteps and messing
about in Figure for the music. Pricing
was set above tier-one to differentiate
from the majority of casual games;
although new, free levels for Boson X
are already in the offing. Ian admits that
working on just one game for a such a
long time was hard, and he and Jon are
now looking into other projects as well.
Like a pie chart, the games

logo shows how far youve
got in terms of discovering
the various particles.
Taking control
The cornerstone of any twitch game is responsive, intuitive
controls. Boson Xs system is unconventional, with you tapping
a side of the screen to jump left or right, tapping both sides of
the screen to jump ahead, and touching-and-holding in either
case to hang in the air.
For a long time, the screen was divided into three zones, with
the middle one used for jumping straight ahead, but it was too
easy to hit the wrong zone, recalls Ian. But we definitely wanted
touch-and-hold controls because swipes would introduce delays
and make it hard to control hang-time.
The final control system evolved from attempts to enable the
user to correct mis-touches: We wanted to allow someone to,
say, correct an incorrect left jump to a straight jump, and so
added a small time window in which the user could press right
after jumping left, which would adjust their direction to straight
ahead. After introducing this system, we found it easy to jump
ahead by tapping left and right simultaneously, and so the middle
zone became redundant.
The adjustment allowance was retained and gives an otherwise
quite demanding game a more forgiving edge. It was necessary
because its hard to touch two sides of the screen at exactly the
same time, says Ian. You need a small time window where two
On your first run of Boson X, youre shown how to control the professor.
presses count as having happened at once, but you also need to
initiate jumps without delay. So we initiate the jump immediately,
and correct it if necessary!
WorldMags.net
| 121
WorldMags.net
VISUAL GUIDE | THE INTERFACE OF BOSON X
Pause mode
Blue platforms
High score
Endless void
Elbow patches
The evil red
A very visible chunky

1
pause button enables
you to pause science midflow. Its not a common
sight in an endless runner,
but we reckon its a very
welcome one.
Boson X is not about

2
how long you stay
alive, but the lengths of
blue platform you run over
(upping your percentage).
Strategy involves learning
layout patterns so you can
reach such platforms.
Your progress in
3
a level is charted at
the top right of the screen.
When the percentage hits
100, theres a lurching
animation before
everything ramps up
to truly crazy speeds.
Miss a platform and

4
land in the void, and
the experiment is over. If
youve hit 100 percent for
the first time, this collision
will result in the discovery
of a particle.
The scientist scurries

5
along in his natty
suit, complete with elbow
patches. Its small touches
like this that add character
to a game, even one with
a minimalist aesthetic.
Red tiles appear fairly

early on in the game.
They blink on and off,
helpfully wrecking the
current experiment if you
happen to land on one
while its in its off position.
The path
of Boson X
Although a simple game,
Boson X went through
many changes on its road
to completion, in part
inspired by the release
of two other iOS titles.
122 |
Mar
2011
The initial idea
is formed and a
basic prototype
created.
May
2011
Animated sprites
are added to the
game, improving
its visual style.
May
2011
Jon takes time off
to get married.
Ian switches to
another game.
WorldMags.net
Aug
2011
Temple Runs
release results in
the duo rethinking
their game.
Nov
2011
Work resumes,
with various
gameplay
experiments
going round
in circles.

WorldMags.net
Every time you play Boson X and meet

your inevitable demise, your progress is
charted, along with your previous peak.
Its a great way to keep you playing, as
your peaks gradually get higher; that
said, this part of the game can also serve
as a devastating reminder if you fail at
99.5 percent on the last level!
One of Boson Xs recent updates

introduced a second professor, Niva,
who can be selected from the settings.
Its long been noted that the games
industry has too often ignored women,
so its nice to see an indie title such
as this enabling you to play as either
gender. Plus, Niva has a very cool scarf.
Sept
2012
Super Hexagons
release inspires
the duo to simplify
the game.
Sept
2012
Boson X is
exhibited at
Freeplay 2012.
Its platforms
now loop to
form a circle.
Oct
2012
The game
switches from
entirely procedural
paths to predesigned patterns.
Dec
2012
Work begins
on tweaking,
polishing, play
testing and
adding music.
Sept
2013
The iOS version is
released, following
a free online PC/
Mac version.
WorldMags.net
| 123
WorldMags.net
Once Super Hexagon

arrived on the scene, Ian
and Jon realised the
solution to their game
was stripping everything
right back. While they
were doing so, the
pathways were joined
in a circle, providing a
unique spin (sorry) on
the endless running
genre. Disorientating but
exciting, this element
helped Boson X stand
out from the crowd.
Another early shot from the games

development, showing one of the powerups (later discarded). In an attempt to
differentiate the game from the likes of
Temple Run, Ian and Jon tried all sorts
of things, although none proved
satisfactory. In essence, this is almost
an entirely different game.
This shot, from an early
development build of
Boson X (then called
Ascendian), provides a
good indication of how
much Ian and Jon altered
their original idea. The
art style is comparatively
complex and muddied,
and the flat paths could
have seemed derivative.
Ian and Jon liked the idea of levels having patterns

the player could learn through repeated play:
Introducing new patterns with each level was a nice
way to add variety and a sense of progression, and to
make each level feel distinct. Levels were designed
through trial and error, tweaking patterns, and
replaying over and over until everything felt right.
124 |
WorldMags.net

WorldMags.net
DEV
CHOICES
As level detail was reduced, the choice of solid colours became increasingly
important. It was decided that two colour palettes for each level added enough
variety without being too distracting for the player. The art direction also took
some inspiration from old science books from the 60s and 70s.
Ian says it was important to not

immediately hit the player with every
obstacle, hence the first level is relatively
gentle, with no hazards other than jumps.
It gives the player time to get used to the
unconventional controls and understand
the basic premise and objectives.
The main rationale behind each level was

to make each feel distinct and to increase
the difficulty as the player progressed.
Each has its own theme: Graviton (shown
here) is about speed and not knowing
whats ahead, and Y Boson is more about
precision jumping. In all cases, the player
is given something new to master.
WorldMags.net
Part of the
development
process lies in
knowing when
to use an offthe-shelf
solution and
when to roll your
own. In the case
of Boson X, Ian
actually wrote
the engine
himself in C++.
Its freely
available under
a liberal opensource licence
and Ive used
it for at least
two other
games, he
says, adding
that he
avoided using
a proprietary
engine like Unity,
for a number
of reasons.
I didnt want to
be at the mercy
of other peoples
design decisions
or bugs. I also
felt doing my
own engine
could improve
our workflow.
For example,
with my engine
it was possible to
quickly deploy
changes to an
iOS device over
Wi-Fi without
having to rebuild
anything in
Xcode. In
particular, this
allowed Jon
to tweak
parameters
and graphics
and try new
level designs
without having
to set up a full
development
environment or
learn Xcode.
| 125
WorldMags.net
DESIGN & TESTING | The making of Device 6
A world of word play

The story behind Simogos title that merges games and literature
SIMOGO
Simogo is a small
independent
studio based
in Sweden,
comprising
Simon Flesser
(art/sound) and
Magnus Gordon
Gardebck
(code). Follow
Simogo and
Simon on Twitter
at, respectively, @
simogo and @
Simonflesser.
126 |
Ambitious, confident,
unique and determinedly
unorthodox, Device 6 plays
with the conventions of
games and literature, to the point that
describing it as a game doesnt seem
to cut it. Instead, its part spy thriller,
part immersive adventure, and part
interactive drama. Moreover, it is a story,
centring around the kidnapped Anna.
She finds herself awakening on an
island, with no memory of how she
got there. Your task is to make sense
of what she discovers.
This is no ordinary adventure. Words
on the screen become corridors and
pathways to travel along by swiping and
reorienting your device; within the text
itself and elsewhere are glimpses of
clues in photographic form (visions)

and audio loops, abstract puzzles that
seamlessly fuse with the narrative to
fashion a compelling whole.
The main drive for us is to make
things that we feel havent been done
before, explains Simon Flesser, half of
the Swedish duo that is Simogo. So
in that way, creating games that defy
categorisation is intentional. Its simply
what feels exciting to us, and its also
advantageous in not placing us in
direct competition with anything.
Thats not to say there werent
influences; Flessers on record as being
a fan of Nintendo DS game 999: Nine
Hours, Nine Persons, Nine Doors;
however, although both titles share
a sense of mystery and a certain
WorldMags.net
obliqueness to their puzzles, Device 6

is far more distinctive, and Flesser
reckons it owes most to Simogos own
Year Walk Companion app: Drawing
on that, our initial idea was to make
something more tell than show,
minimal and largely text-based. But
on the other hand, we didnt want
something that was entirely text-based
either. Im not sure when we came up
with the concept of geographical text,
but the process was quite iterative.
Working on a vibe
Flesser explains that as much as
anything, Simogos approach to
development often relies on an idea
about a vibe early on, rather than fully
fleshed-out concepts. A piece of work
The making of Device 6 | DESIGN & TESTING

WorldMags.net
might begin through being inspired by
music, books or TV. In this case, he notes
an interest in that whole Cold-WarBritish-spy-drama kind of thing and
wanting what became Device 6 to
have a similar feel.
Although the titles beginnings were
nebulous, production saw its rapid
Our initial idea was

to make something
more tell than show,
minimal and largely
text-based
evolution into a more coherent form:
At first, the text was just supposed to
symbolise turns and movements, and
we later changed that to the final
concept of having the text laid out as
actual floor plans. Flesser recalls that
he and Simogo collaborator and writer
Jonas Tarestad reworked the story
several times; and on coming up with
sinister organisation HAT, Flesser wrote
their lore, device descriptions and way
of operating very quickly. From this
framework came the protagonists story
on the island, with Tarestad writing each
chapter, and the pair working hard to
blend the puzzles and narrative in a
fitting manner.
We decided early on that to make
it all feel natural, wed have to create

the story and puzzles in parallel, and so
there was a lot of bouncing back and
forth, says Flesser. And with the team
needing to create a context to why
there would be puzzles at all, the island
became a test environment.
Development on Device 6 was
subsequently largely methodical once
the initial concept was nailed down.
We created the first chapter as a sort
of prototype for the rest of the project,
to decide early on the rule-sets and
mechanical aspects of the game, says
Flesser. After this, we decided each
chapter should take two to four weeks
to complete, and should be totally
complete before moving on to the
next. By doing this, the work was very
rewarding it was like making six
games in one, because we regularly
had finished results.
Thats not to say iteration entirely
ceased at any point during the projects
gestation some parts were made up
along the way, including elements of
a chapter involving the use of a mask,
and an abrupt and intriguing HAT
intermission during Chapter 5; but many
components were there right from the
start, including an absurdly catchy yet
sinister Jonathan Eng song that appears
towards the games conclusion.
I thought having a performance like
that in a game would be really exciting
and fresh, adds Flesser, who was totally
bowled over from the moment he heard

Engs first acoustic demo of Anna.
Although a major achievement, and
a truly ambitious project, Device 6 was,
says Flesser, a joy to make: We didnt
have any major technical hurdles,
although it did take quite some work
and tweaking to figure out how to make
all the corners and interactions natural
to interact with, without everything
feeling too loose or too stiff.
Fundamentally, though, Device 6 is a
story, and thats what Flessers happiest
with: There are loads of ideas and
thoughts we wanted to get across with
the game, but really Id prefer people to
think for themselves. Although I can say
that we do want players to think about
and maybe question their own role
in the digital age.
Throughout Device 6, you

gain glimpses into the
nature of the mysterious
numbered devices.
Judging feedback
Simogos Year Walk, though lauded, had also come in
for criticism regarding its wilfully opaque and overtly
cryptic nature, and so we wondered how Device 6 was
playtested, and whether any amendments were made
due to user feedback.
We try not to base any decisions on other peoples
opinions. We prefer simply watching or hearing their
thoughts about puzzles and interactions, and then
to draw conclusions ourselves, reveals Flesser.
With a creation such as Device 6, he reckons certain
rules work well in ensuring a successful outcome: It
is important all the tools the player needs to solve a
problem are available. But it is also really important to
present clues and cipher keys in the right context, so
the player is not flooded with clues without any idea
as to what to use them on.
By way of example, Chapter 4 was revised
mechanically the players had all the keys, but the
keyholes werent presented in an understandable
manner. And for Chapter 1, text was revised when
Anna sees the picture of the orange, a very early
Clues in cryptic puzzle games must be understandable, but not too easy!
puzzle (A framed number in the room where red meets
yellow in a frame.): Originally, it was mentioned in an
unspectacular way, so we had to make sure players
paid attention by making the situation more odd. We
also removed any combinations of red and yellow from
that chapters art, because we found a lot of players
were looking for literal combinations of those colours.
WorldMags.net
| 127
WorldMags.net
VISUAL GUIDE | DECONSTRUCTING DEVICE 6

3
The story
Arguably the most
1
important aspect
of Device 6 is its words,
and theyre very clearly
rendered, which Flesser
says at the time was
something of a battle
to achieve in Unity.
Device
orientation
Although iOS devices
2
can be oriented in
any direction, few games
take advantage of this. But
right from the off, Device 6
has you rotating your
screen to follow the story.
History of
Device 6
Its no surprise Simogo
was methodical when
creating this ambitious
project; what is a surprise
is that the entire game
took only seven months.
128 |
Video elements
Interaction
The black and white

3
visions within the
game have a subtle 3D
effect thats apparent as
you move past them. This
adds a level of depth to
otherwise flat design, and
pulls the player in.
Beyond swiping,
4
the only direct
interaction in Device 6 is via
buttons attached to visions.
The stripped-back interface
ensures the game doesnt
block you only your
inability to solve puzzles.
Mar
2013
Initial discussions
about making a
story-based game,
possibly about
corporate brainwashing.
Mar
2013
Story outline
finalised during
a single day;
ending and device
documentation
written.
Hidden
components
Asides in the text
5
frequently appear,
often written in a lighter
grey. Some appear to be
Annas internal dialogue,
but perhaps this is insight
into whats going on
Graphic design
A sharp sense of
layout and colour is
infused throughout Device
6. Flesser was inspired
by 1960s spy shows, but
theres a certain intentional
ambiguity regarding when
Device 6 is set.
6
Apr
2013
May
2013
May
2013
Daniel Olsn
sends over the
first demo for
the main theme
used in the intro
sequence.
First version of
level/text editor
completed,
enabling layout/
tweaks as the
game runs.
Chapter one
completed.
It serves as a
prototype for
the remainder
of the game.
WorldMags.net

WorldMags.net
The mask chapter wasnt planned from
the start, but added another layer to a
game already about filtering layered
information. When the mask is worn, the
colour scheme dramatically changes and
the visions alter, providing clues to solving
the chapters devious puzzles.
Parallax effects are evident throughout

the games visions, but this extra dimension
also enabled Simogo to play with depth
when it came to Device 6s puzzles. In the
depicted scene, the glass devices focus can
be changed, bringing definition to the
mannequins and the marks on their
chests. They could prove useful
Jul
2013
Aug
2013
Aug
2013
Jonathan Eng
sends first acoustic
demo of the song
Anna. Simon and
Magnus are
floored.
The idea of a final

puzzle is dropped,
on realising a onetap shutdown is
more powerful.
From this point

until the day
before submission,
loads and loads of
proof-reading!
Sept
2013
Polishing the
game; although
since bugs were
removed on
finding them,
few remained.
Oct
2013
The game was
submitted to
Apple and made
available for
release on 17
October 2013.
WorldMags.net
| 129
WorldMags.net
The animated and ballsy title sequence to Device 6 is more

like the intro to a movie than a game. Im a big fan of
those vignettes, and I really love how shows like The
Persuaders and The Prisoner were using their intro to tell
the backstory, or set-up, of the show, explains Flesser.
Sound plays a huge role in Device 6. Low-pass

filters and volume levels make sounds feel like
theyre being heard from another room or
around the corner; and recorded voices on radios,
TVs and tape recorders result in a creepy, eerie
atmosphere, grainy pre-recorded messages
heightening feelings of isolation and tension.
During development, it
became apparent that it
wouldnt be possible to
interact with puzzles
directly within the visions
windows, because they
were too small. This drove
the idea of using buttons,
which later tied into the
overall narrative. This simple
interaction is particularly
powerful at the titles
conclusion
130 |
WorldMags.net

WorldMags.net
FONT
ISSUES
Between the chapters, theres a distinct

change of pace through questionnaires
and other quick-fire tests. Along with
offering some visual variety, they according
to Flesser add further to the story, creating
a narrative in which the players themselves
are playing a role. This then feeds back into
the games overriding theme.
The typography throughout Device 6 isnt

there merely to be read, but to convey a sense
of location and space. Abrupt 90-degree
corners occur frequently, but more
imaginative examples exist, such as the
depicted unstable ladder, its large gaps
evoking a sense of careful progress.
Early concept art for Device 6 showcases

Flessers initial thinking that the game
was something of a collage: Not in a
literal sense, but I wanted the inspirations
to shine through and be very obvious. This
would run through the project as a whole.
You could say it ended up being a collage
of different media.
WorldMags.net
Simon Flesser
recalls there was
plenty of debate
regarding
whether to use
the Unity game
engine for
Device 6: We
knew that text
rendering in
Unity was
well, it wasnt
very good.
The stuff of
typography nerd
nightmares,
actually. But
since our
pipeline is based
around Unity,
and we knew
we wanted to
incorporate 3D
all of the blackand-white
visions were
composed and
animated in
Maya we
decided to
go for it.
Flesser says
Simogo
struggled for
quite some time
with the font
rendering, until
we decided to
get a plug-in for
it, which worked
out brilliantly.
Before that, hed
pestered Unity a
lot about the
problem: And
now theyve
changed their
font rendering
quite a bit, it
seems. I may
not go so far
as to say they
changed it
because of us,
but the timing
might, maybe,
perhaps,
possibly,
suggest that!
| 131
WorldMags.net
DESIGN & TESTING | Optimisation
App Store optimisation
iStockphoto
Get your app noticed on the App Store with optimisation techniques
eveloping a mobile app is

no easy task; it takes hours
of arduous coding. But its
a great feeling when youre
done until you remember that you
need to get users to actually download
it. Thats where App Store optimisation
(ASO) comes in. The aim is to improve
your apps visibility in the App Store and
increase downloads. If youre familiar
with web search engine optimisation,
the principles are similar; if not, well
explain that overleaf! And it works. Data
from MobileDevHQ shows theres an
average increase in downloads of 20%
after implementing ASO tactics. On top
of that, 63% of users discover their apps
via the App Store search, making it the
single largest channel for app discovery.
A lot of factors go into ASO, ranging
from picking the right keywords and
title to creating the most effective
screenshots and description. We look
at images and descriptions elsewhere;
here well focus on keywords, which
make up the search terms people use
when searching for an app in the App
132 |
Store. The main goal of ASO is to make

your app one of the first to show up in
a search. You want your app to rank
highly for the right keywords and search
terms. What does right mean? In this
case, it means a term or phrase that has
high search volume and leads to high
conversion rates, for which your app will
also realistically be able to rank highly.
Ranking high
Before diving into picking the right
keywords, you need to understand what
determines your rank in the App Store.
Although there are countless factors
that can influence this, the main ones
are total downloads, download velocity
(how many downloads it has received in
the last 4872 hours), your title, keyword
field and ratings. There are other subfactors that can have an effect, such as
your screenshots and description (which
can increase conversion rates and
influence downloads), but these are
the three main high-level elements.
To start picking keywords, compile a
list of any words you think people might
WorldMags.net
use to search for your app. There are a

few places you can go for inspiration
Your competitors should be your first
checking point. Look at what keywords
they show up for, what their title is, the
language they use in their description,
and how users talk about the app in
reviews. You can also use auto-complete
in the App Store for ideas. Start entering
a few of the terms youve already added
to your list in the App Store search and
see what it automatically suggests. If
your app is already live, look into your
own reviews. Notice any common
messaging? Do users frequently refer
to a specific feature of your app? Lastly,
common misspellings can be useful as
well. Look for terms with back-to-back
characters (such as successful) or other
common mistakes (maybe an extra 'l',
making successfull, for instance).
Check relevance
Once you have a comprehensive list
of keywords, your next step is to start
filtering out the good ones. Although it
is not necessary, signing up for an ASO
Optimisation | DESIGN & TESTING

WorldMags.net
tool can be helpful, especially in this
part of the process. You need to judge
the keywords in your list based on their
relevance, search volume and difficulty.
Begin by filtering out any keywords that
arent directly relevant. It wont help
much in terms of downloads to rank
highly for a word with high search
volume if it isnt relevant to your app!
Relevance is the easiest factor to
judge without an ASO tool. Start by
using common sense and eliminating
words that wont realistically lead to any
downloads. If youre on the fence about
a term, search for it in the App Store and
see what kind of apps come up. Are
they in the same category as yours? If
you do use an ASO tool, you can get
exact relevance numbers for all your
keywords. Relevance might not always
be as obvious as you think. For example,
you might think the term snow would
be relevant to a weather app. However,
if we look at the numbers, 59% of the
apps that show up for snow are actually
games. Only 16% are weather apps.
Aim high
Difficulty and search volume work
together as the next filter. These metrics
are harder to determine without an ASO
tool, especially search volume. Generally,
the more ratings an app has, the more
total downloads it has. One method for
estimating search volume would be to
use a tool such as Google Keyword
Planner to estimate how often that term
is searched for on the web. However,
this is far from perfect and tedious! Its
much easier to input all your keywords
into an ASO tool and have it determine
search volume for you. Although Google
and Apple dont release exact search
volume data, proper tools can tell you
how often a list of terms are searched
for relative to one another. Use this to
determine which keywords are searched
for most. Its pointless to target words
with no volume, but be careful about
targeting terms which have high search
volume but for which you also wont
realistically be able to rank highly.
This brings us to the last major metric
to look at If youre not using an ASO
tool, the easiest way to check how
difficult it is to rank for a keyword is to
look at the top 10 apps that show up for
that term. Are they big brands such as
Amazon or eBay? How many ratings
do they have? What is their rating?
Compare these metrics to your app or
what you predict your app will have,
and decide if you think you can

compete. ASO software can also quickly
determine how difficult a list of terms is
to help weed out any abnormally high
words. Finding the right mix of
relevance, search volume and difficulty
is the name of the game. Make sure you
take all factors into consideration, and
dont get blinded by one over another.
Once youve picked your keywords,
how do you rank highly for them? The
majority of the factors influencing
ranking (such as downloads and
download velocity) are out of your
hands, but there are a few tactics you
can implement to give yourself a boost.
The first is to utilise your title effectively.
Its been proven that apps rank higher
for keywords included in their title. The
most common way to implement this
strategy is to have a branded title which
Once you have a

comprehensive list of
keywords, your next
step is to filter out
the good ones
will stay constant, followed by a dash
and a subtitle, which is where you will
target specific keywords for example,
SoundCloud Music & Audio Discovery.
The branded part of the title stays the
same, so users can readily identify your
app, but the subtitle can be strategically
used to target more important
keywords. If, when doing your keyword
research, there was a term that had high
search volume and relevance but also
was difficult to rank for, you might want
to try using that term in your title.
Best practice
The rest of your keywords should go
into the keyword field when submitting
your app. There are basic formatting
best practices youll want to follow
First, you dont need to include your title
keywords again in your keyword field.
You also have a 100 character limit,
which means you need to use the space
wisely. Separate your terms with
commas but dont include spaces after
them. Also decide if you want to use
both the plural and singular form of a
word. Although the plural will include
the singular form as well, it will not be
as effective as including both (but again,
the space is valuable, so be careful).
Finally, you can break up phrases such

as free game into the single terms
free,game, which will help you rank for
all combinations of the two keywords.
If your app is available in multiple
regions, localising your keywords is
another valuable tactic. This means
targeting different keywords for different
regions of the world. Its vital here to
make sure to translate terms properly,
and check that terms have the same
meaning and usage in both regions.
Use our checklist and you should see
more downloads of your app in no time!
Check out an apps

description and look at
the keywords that make
it turn up in search results.
CHECKLIST
ASO checklist
Compile
Study competition
Autocomplete
Misspellings
User reviews

Analyse
Relevance
Search volume
Difficulty

Implement
No spaces
Broken-up phrases
Singular vs plural

Rank highly
Localise
Use your title
Look at reviews

WorldMags.net
| 133
WorldMags.net
DESIGN & TESTING | Optimisation
Search engine optimisation

People also find apps by looking on the web, too
oogle recently predicted
that mobile search queries
will surpass desktop
queries by the end of
2014. With the rise of mobile comes the
rise of apps. However, if youve created
an app, youll quickly find that getting it
discovered is not easy. You can pay users
for installs, but thats not sustainable
and can quickly deplete resources.
When it comes to non-paid app
marketing, your first thought should
be ASO, as weve covered. However,
in addition to ASO, its surprising how
many people also overlook using their
website to drive downloads and using
search engine optimisation techniques
to make sure people find their website.
Although apps and the App Store are
on the rise, the web is still a huge part
of most peoples lives, and it can be a
great tool to help drive downloads. If
people are searching for recipe book
apps on Google and you make one,
you want your app to appear!
Creating a website for your app is
extremely important, but getting it
found can be just as tough as getting
your app discovered, which is why
you need to implement search engine
optimisation. SEO, like ASO, is a vast
and complex topic, but the following
strategies will help get you started.
Be cautious about just

focusing on keywords
with high search volumes
you may not appear at the
top of the pile
134 |
As is the case with ASO, keywords

are one of the most important aspects
of SEO. Start by researching keywords
to find out their search volume and
competitiveness. Pick keywords that
you think will be relevant to the
function your app serves. Keep in mind
that the main purpose of your website
is to drive downloads. This means that
although traffic volume is important,
getting high-quality traffic with
Getting people to find

the website for your
app can be just as
tough as getting your
app discovered!
potential high conversion rates is even
more important. Unlike a website where
you can drive revenue through ads
(meaning that the sheer number of
visitors is a key metric), your revenue
driver and measure of success in this
case is downloads. So when choosing
and researching keywords, you might
want to focus on long-tail search
queries rather than singular keywords
that is, things that people search for
over time. These will help drive a more
WorldMags.net
targeted, engaged audience.

Pick the top three or four terms and
phrases that are most relevant to your
app, have the highest search volume,
and have the lowest competition. Once
youve decided, its important to utilise
them properly. When search engines
trawl websites, they look for these
keywords (among many other things).
The placement of keywords lets the
search engine know how important
and relevant the terms are to your site;
include your top terms in the title tag
of your landing page at least once, and
ideally close to the beginning of the tag.
If youre non-technical or new to coding,
the title tag defines the title of your
page and looks like this: <title> put
keywords and title here </title>.
The next important place to include
keywords is in a prominent position
near the top of the page. An example
of this would be a header tag. You can
then input keywords two or three times
in the body, depending on text space.
The body, along with sub-headers, is a
good place to put other less important
keywords. Also, when adding your
images, remember to include the
important keywords in the alt-text
attribute, since those get looked at by
search engines too. Finally, putting the
most important terms once in your URL
will help increase your rank.
Another crucial attribute to all
websites is a blog. Although it might
not seem like much, having a blog thats
constantly updated with fresh content is
important for search rankings, helps
attract users, is a great way to build links,
and promotes social sharing. When
creating content for your blog, write
for the reader, not for the search engine.
Although its a good place to include
more keywords, its more important to
use your posts to catch the interest of
your target user, spread the word about
your app, and drive organic traffic.
This is just the tip of the iceberg.
Becoming expert in both SEO and ASO
will be pivotal to managing a successful
app. It will drastically drop your costper-install, and in the end provide the
foundation for a consistent stream of
downloads resulting in revenue!
Concepts
WorldMags.net
Python
Arduino
PHP
Android
Coding
Academy
Only
99p /99
each
10 ways to be a better coder

Only from Linux Format
More Concepts
Ruby
Unusual
More Python
WorldMags.net
More Android
Available on Apple Newsstand just search for Linux Format and download the app
WorldMags.net
APP MARKETING | Introduction
136 |
WorldMags.net
Introduction | APP MARKETING

WorldMags.net
Master app
marketing
App Store success doesnt come out
of nowhere youve got to make sure
your app finds the audience it deserves
aking a great app is only half the battle youve got to
make sure people know about it! Being smart about who
you contact, and how easy you make it to find your app, can
make all the difference you dont need to spend millions
on advertising. Theres more to marketing than just getting your app
noticed, though. Well show you how you can tap into an audience to
get it off the ground in the first place, as well as how to monitor your
sales, so you can react. And well look at some truly inspirational apps.
138
146
152
156

The App Hall of Fame
WorldMags.net
| 137
WorldMags.net
APP MARKETING | Crowdfunding
Crowdfunding can be an
excellent way to finance your
app if you do it properly.

Asking strangers to fund your app? It might just work
ll the best apps begin with
a brilliant idea, but sadly
many just stop there. Ideas
remain ideas. This is sad
but understandable moving from an
epiphany in the shower to a fullyfledged application takes nerve,
perseverance and plenty of cash. Before
your marketing machine kicks into
action you need a funding stream.
Securing finance has, of course,
become a lot more difficult since the
138 |
credit crunch. Previously, banks would

lend money with comparative abandon.
Today, theyre more reticent to splash
the cash, despite government
interventions and encouragement.
There is, however, another way of
raising cash to fuel your business dream:
crowdfunding. Youve probably heard
the term and maybe even explored sites
such as Kickstarter (www.kickstarter.
com). If not, crowdfunding enables you
to present your app idea to a potentially
WorldMags.net
huge audience of internet users. If they

like what they see, they may help you
finance your dream.
In this feature well explore
crowdfunding. Well look at how and
why it started, and how you can use
crowdfunding in its many different
forms to finance your new app
development. Well explore how to
access the crowd correctly and how to
ensure your project makes the best
possible start. Well also look at how you
Crowdfunding | APP MARKETING

WorldMags.net
The God of Blades story
Jo Lammert, Studio Director at White Whale
Games, tells us how the company turned to
crowdfunding on Kickstarter to get their
fantasy fighting game for iPhone and iPad
completed and put up on the App Store.
Why did you think crowdfunding was the
way to go with God of Blades?
We were kind of scraping by just to be able
to afford things like software licenses.
Kickstarter had been lurking in our minds,
and when we were trying to pay for the last
few production costs it seemed like the
right thing to do.
How did you go about selecting the tiers
for your projects backers?
God of Blades is a pretty affordable game
(1.99 / $2.99), so most of the tiers were set
based on the production costs of the
rewards. T-shirts, buttons and prints start to
get pricey, so we made sure each tier
covered the reward along with its shipping
and still left some over for the game.
can invest in other peoples dreams

Bear in mind that a lot of the
information presented here is pretty
complex. Setting up (or investing in)
crowdfunding shouldnt be taken lightly,
as there are serious legal implications
every step of the way its not like
putting something up on eBay. Well
introduce you to most of the concepts
here, but youll well advised to take on
further legal advice if you decide to go
down this route.
The silent(ish) revolution

Crowdfunding the business of
borrowing cash from a pool or crowd
of investors is now big business. In a
recent report, business consultants
Deloitte claimed that in the UK alone,
crowdfunding portals or pools raised
1.9 billion of investment capital during
2013. This compares with just under
1 billion in 2011.
Globally, crowdfundings vital statistics
are astounding. Reliable figures are hard
to come by, but the research firm
Massolution has estimated that
crowdfunding may have generated
$5.1 billion globally in 2013. In total,
it believes more than one million
businesses tapped into the market in
2012 and remember, that was the year
How did you try to keep your

backers updated with the games progress?
We didnt use the Kickstarter updates as
much as other people do only for big
announcements and instead stuck to
social media and our blog to keep folks in
the loop. We would share screenshots of
what we had been working on that day,
new environments, and new gameplay
footage. It was a great way to show that
God of Blades was progressing well.
What advice would you give to somebody
with a great idea and a need for funding?
We were pretty early in the Kickstarter
game and came out making about $5,000,
which at the time was huge! We had no
idea what the videogame landscape would
look like on Kickstarter over the course of
the next couple of years Even though
$5K sounds very little, it was significant to
our team and helped us complete God of
Blades. My advice would be to not put all
your eggs into Kickstarter. I look at
it had just begun to really take off.

If you want further persuasion that
crowdfunding is a sector you need to
understand and watch in 2014, take the
case of Double Fine, an independent
games developer headed by industry
veteran Tim Schafer. It wanted to
develop an adventure game for multiple
platforms, including Android and iOS, in
the style of the classic LucasFilm titles
such as The Secret of Monkey Island,
and turned to Kickstarter to raise funds.
The company originally set a goal
of $400,000 to cover the costs of
development and documentary filming.
The team behind

God of Blades needed only a
small amount of cash, but they sailed
past their estimate with 112 backers.
Kickstarter as a remarkable way to share
your project early, build a fan base and
cultivate a relationship with early adopters.
Of course raising money on Kickstarter to
create your project is important too, but I
think people who frame Kickstarter as just
a way to make money are pretty naive.
Kickstarter is hard work that took up a lot
of time that could have gone to production,
and the overhead for rewards can be pretty
high (especially if youre shipping anything
internationally). If youre interested in
doing a Kickstarter, make sure youre
committed to doing all that needs to be
done for that project and give your backers
the attention they deserve.
Double Fine Adventure, as it was then

called, quickly became the largest
crowd-funded video game project up
to that point, bringing in more than
$3.45 million from over 87,000 backers
within one (yes, one) month!
But you dont have to be a recognised
and well-loved industry figure to be
successful. Raul Reas app Walker
designed to help people through daily
tasks in a more friendly fashion than just
a list asked for a backing of $2,250 and
received a total of $4,200, with very little
marketing or social media advertising. In
fact, almost all its backers found the
JARGON
BUSTER
Equity
Generally, the
term equity is
used to mean
shares or an
ownership
interest in a
business. An
equity or share in
a crowdfunded
company,
however, is not
traded on the
London Stock
Exchange like
other shares.
Adding a short video explaining your app is an absolute necessity if you want it to succeed.
WorldMags.net
| 139
WorldMags.net
JARGON
BUSTER
SEIS
The Seed
Enterprise
Investment
Scheme was
designed to
increase
economic
growth in the
UK by promoting
entrepreneurship
and new
enterprise. For
more info,
visit www.
hmrc.gov.uk/
seedeis.
project through Kickstarter itself.

In some ways, its easy to pass off
crowdfunding as a reaction to, and
a symptom of, the credit crunch.
Crowdfunding is, however, much more
than a new wave of business people
who are looking to circumvent
tarnished banks, which have lost their
nerve for investment.
In fact, students of crowdfundings
history often point to the Statue of
Liberty as an early example of gathering
investment from the masses.
Back in 1885, funding for the statues
construction dried up, and work
stopped. Determined to help, Joseph
Pulitzer a journalist and publisher
announced a drive to raise $100,000 in
New Yorks World newspaper. Pulitzer
promised to print the name of anyone
who contributed money to the statue
project, no matter how small their
donation. Money flooded in, Pulitzer
generated his $100,000 and work began
once again.
Beyond tapping a crowd of people
It was the growth of the internet

that gave crowdfunding a proper
jumpstart, and its booming today
for small sums in the hope of generating

a big dollop of capital, Pulitzers initiative
was prescient for another reason, too.
He gave a gift to the contributors
getting their name in print, which, of
course, was a much more prestigious
achievement back then and this, as
we shall see, is a cornerstone of the way
crowdfunding works today.
It was, however, the growth of the
internet that gave crowdfunding a
proper jumpstart. Back in 1997 when
the web was still largely in its infancy,
relatively speaking fans of the prog
rock group Marillion raised $60,000 in
order for the band to record a new
album. The campaign was a success,
Marillion made their record and
continued to tap their fans to help
finance future projects.
Not all platforms are equal

Fast-forward to today and crowdfunding
is growing at a huge rate. To find out
more about the sector, we spoke with
Julia Groves, managing director of the
UK Crowdfunding Association (www.
ukcfa.org.uk).
The UK Crowdfunding Association
is a trade association formed in 2012
by 12 of the leading UK crowdfunding
platforms, she explained. Our mission is
to promote crowdfunding as a viable

and valuable way for UK businesses,
projects and ventures to raise funds
from contributions by people. At
present, we have 24 members who are
operating UK platforms, and 10 affiliated
members, which arent yet running.
Groves explains that crowdfunding is
very much an umbrella term for four key
types of cash-generating approaches.
The first, she told us, is referred to as
the donation model. Here, supporters
simply give cash to a start-up and dont
have any expectation of a return: a site
called Yimby.com is a prime example of
this style of working.
Next, theres reward-based
crowdfunding, where people donate
with the expectation of receiving
something in return. This style of
funding was embraced by David Braben,
a man famous in computer gaming
circles as the co-creator of classic spacetrading game Elite. In an effort to fund a
remake of the game called Elite:
Dangerous Braben launched a
Kickstarter campaign.
A donation of 10 bought you a
regular newsletter and updates on the
project. If you gave 30, youd receive
a digital copy of the finished game.
Contribute more and youd get bigger
Legal implication: what you (or your solicitor) need to know

Can you tell us a bit about yourself?
Im a lawyer for Pinsent Masons and OutLaw.com, having spent most of my career
looking into technology, data protection
and intellectual property law issues. As the
business models of more and more banks,
insurers and other financial services firms
become dependent on technology, Im find
that I spend more and more time assessing
the legal implications of the crossover
between technology and financial services.
Crowdfunding is a serious business. Luke

Scanlon, a technology lawyer, discusses
your legal duties and responsibilities when
accessing crowd cash
140 |
Is a crowdfunding campaign something a

new entrepreneur can manage themselves
without specific professional advice or is
it advisable to hire a legal expert? What
are the important things to check?
In the UK, it is important to determine
whether or not a crowdfunding platform
is authorised to provide financial services
in accordance with financial services
regulation. Not all crowdfunding platforms
necessarily need to be. For example, pure
WorldMags.net
donation and rewards-based platforms may

not. Other platforms can take advantage of
statutory exemptions, which allow certain
financial-services-related activities to be
performed without authorisation.
If entrepreneurs use unregulated
crowdfunding platforms, they should
make sure they are not being involved in
illegal activities, such as the making of
unauthorised financial promotions, failing
to provide adequate risk warnings, or
issuing shares or other forms of financial
security without authorisation.
What are the key responsibilities a startup has towards people who fund it
through a crowd-based platform?
It depends on the type of platform.
Generally, an entrepreneur must be clear
about what he or she is committing to, and
be prepared to honour those commitments.
While it is often suggested that 50 to 70 per
cent of start-ups fail, this does not mean

WorldMags.net
and better returns. In all, the project
has pulled in more than 2.2 million
of donations, and Elite: Dangerous is
promised to arrive in 2014.
If youre interested in this kind of
funding, Groves points to Crowdfunder,
Indiegogo, Zequs and Sponsorcraft as
firms that you could explore.
Next is the loan or debt model. Here
a business borrows its funding and
promises to repay the money with
interest. Abundance Generation,
Funding Circle, Funding Empire,
Money&Co and Trillion Fund offer startups access to this kind of funding.
The fourth type of crowdfunding
is equity funding. Here, Groves says,
Support is provided in return for an
equity stake [or share] in the business.
Funding platforms such as Crowdcube,
Seedrs, Angels Den and Syndicate Room
embrace this kind of model.
Picking the right platform

Choosing the correct crowdfunding
platform can appear daunting,
particularly when you add in another
type of platform: hybrid. Here a funding
platform might offer a mix of donation,
gift, debt and equity based deals.
So, how do you pick the right fund
for your business? Julia Groves explains:
JARGON
BUSTER
The UK Crowdfunding Association is an excellent resource for advice if youre UK-based.

One of the real beauties of
crowdfunding is that not only can you
raise money but you can galvanise an
army of ambassadors who will feel
connected and part of your project. If
you plan to operate your business in the
UK, then having such a supporter base
here in the UK will probably better serve
your needs than [using] a US platform.
Beyond patriotism and convenience,
there are also legal considerations to
bear in mind, Groves adds. You need
to be aware that in terms of equity
crowdfunding, the UK is the world
leader and this is largely down to
that an entrepreneur will escape liability if

he or she fails to meet commitments given.
If, for instance, the entrepreneur has failed
to set up a legal entity for the project, it is
possible that funders could bring a claim
against him or her personally.
Do responsibilities change if youve raised
funds by selling equity that is, part
ownership of the company as opposed to
soliciting donations accompanied by the
promise of a gift (perhaps a free copy of
the product youre trying to make)?
The nature of your commitments will
be different. Equity investments result in
the creation of a particular type of legal
relationship to which some specific
obligations apply. Essentially, though, it is
best to view all obligations to investors as
legal obligations, no matter what incentive
you have provided for investing. Be
transparent about the risks of investing
in your business, the barriers and the
FCA
The Financial
Conduct
Authority is the
UKs financial
services
regulator. It is
endowed with
rule-making,
investigative and
enforcement
powers.
supportive regulation. The US does not

currently allow equity crowdfunding by
ordinary investors, so you really need to
consider where you intend to be based
and, indeed, where your future
customers will be based because they
may well turn out to be your biggest
investor fans.
Its also worth considering how the
individual platforms make their cash.
Most charge commission, with rates
typically varying from around 3.5 to 8
percent. Judging all these factors is
complex, so it pays to take your time
when considering crowdfunding.
Whats the best way to protect yourself if

your business fails?
Its important to ensure that you have set up
a legal entity that separates your personal
liability from that of your business or
project, and you should observe general
principles of good business practice. For
example, no matter what the project, it is
preferable to use a crowdfunding platform
that enables investors to track their money,
where it is kept and transactions that have
taken place.
have to wait until a management buy-out,

a flotation or the sale of the business takes
place before getting a return. In some
instances, an equity investment may be
diluted (which means a change in
shareholders percentage ownership
through the company issuing more equity).
Given these risks, the Financial Conduct
Authority is proposing that only certain
categories of investors (sophisticated
investors, high net-worth investors, those
who have received regulated financial
investment advice, and some others) should
be able to engage in equity crowdfunding
in the future. The FCA is consulting on this
matter at the moment.
And, at the other end of the spectrum,

what rights do you have if youve invested
in a company that fails?
Well, the risks can include a total loss of
investment; the lack of a secondary market
for investments means that funders could
Whats your best tip to avoid financial

heartache in general?
You can save yourself a lot of trouble by
checking that every communication made
on behalf of your business or your project is
fair, clear and not misleading.
likelihood of success. Ensure that you

understand everything you have committed
to in writing.
WorldMags.net
| 141
WorldMags.net
Using crowdfunding
Ready to start crowdfunding for your app? Read on to get started
hen youve decided on
the type of funding youd
like to use, you need to
find a funding website or
platform that supports it. This can seem
daunting, because theres an everexpanding number of platforms to
choose between. You can find a handy
list of firms on the UK Crowdfunding
Associations website see
www.ukcfa.org.uk/members.
JARGON
BUSTER
EIS
The Enterprise
Investment
Scheme (EIS) is
a governmentbacked scheme
designed to help
start-ups raise
cash by offering
tax relief to
investors who
buy shares in
them. Visit www.
hmrc.gov.uk/eis
for more
information.
Nice to meet you

Your initial approach to a platform is
thus very important. Alysia Wanczyk,
marketing director of Seedrs (www.
seedrs.com) explains what actually
happens when an entrepreneur and a
funding platform meet each other for
the first time.
Once a business completes their
online investment campaign, it comes
through to our review team, she says.
The team then goes through and
initially rejects any campaigns that are
patently unviable, incomplete or plain
silly. Those that proceed are carefully
reviewed to ensure that every statement
they make is fair, clear, not misleading

and truthful.
Unlike eBay and other auction sites,
where the process of adding sales posts
or create a landing page (the bit that
presents your project) is highly
automated, Seedrs registration system
is much more human.
Wanczyk continues: This [checking
process] often requires a bit of a backand-forth email and phone exchange
between us and the entrepreneur, to
ensure we receive supporting evidence
for every statement. Once both parties
are happy with the campaign, we set it
live on our website for potential
investors to review with the peace
of mind that what theyre reading is
reliable. From there, it is up to investors
to look around, ask questions and
decide for themselves if a business is
worth investing in.
Pass or fail?
Funding campaigns usually last for
around three months, Wanczyk says. The
question, of course, is what happens if
youre successful does the cheque just
plop on your doormat the next day? Of

course, its not quite as simple as that.
Wanczyk explains: Once a
campaign has hit its funding target,
we conduct a further due diligence
process to ensure that all legal and
structural matters are in order with the
company. Its all very straightforward.
In terms of practicalities this boils down
to essentials such as registering the
company with Companies House,
setting up a company bank account,
and completing taxation documents
all the minimum necessary to
incorporate a company, in other words.
And if youre not so lucky? Wanczyk
says: If a start-up doesnt reach their
target [within three months], their
campaign is taken down and each
of the investors is given back their
investment. Sometimes, a business
is given feedback from investors and
potential investors, and they will take
down the campaign themselves to
change it and re-submit it.
If youre not confident about any of
these steps, its definitely worth taking
on expert advice.
How to invest for profit

Lets be clear: investing in start-ups is
incredibly risky. The Financial Conduct
Authority suggests that 50 to 70 percent
of new enterprises fail. But with risk, of
course, comes reward and its for this
reason that crowdfunding is sometimes
viewed as a goldmine by canny investors.
So if youre sitting on some cash, how can
you turn a profit?
Seedrs Alysia Wanczyk explains the rules
of investing via her companys platform.
Adults over the age of 18 who pass our
investment authorisation questionnaire,
or self-certify as high net-worth or as a
sophisticated investor, can invest.
Assuming you satisfy the questionnaires
requirements a document filed by the
FCA you can invest anything from 10
upwards via Seedrs.
Julia Groves of the UK Crowdfunding
Association explained her approach to
142 |
investing. My rules are that I have a fixed

amount of money I invest each business
year money I can afford to lose. She also
views investing in different products, to
spread risk, as being important. Finally, she
advises people to invest in things they
know about and want to support. I can
and do put as much money as I can into
renewable energy, because I have been
working in that sector for 10 years and I
am an environmentalist, she says.
Bill Morrow from Angels Den (www.
angelsden.com) emphasises the
importance of investing in firms who have
SEIS (Seed Enterprise Investment Scheme)
and EIS (Enterprise Investment Scheme)
approval. Having SEIS or EIS approval
makes a business so much more investable,
because it offers huge tax benefits for UK
investors. Most investors will want SEIS or
EIS deals to make up a significant part of
Sites such as Angels Den can help out with the intricacies of
investing in crowdfunded projects.
their portfolio. It also means that you dont
get taxed when you exit the business.
Also consider the concept of dilution.
In the first round of funding, you may
buy 10 percent of a firm. But as they grow,
start-ups tend to launch other fund-raising
drives in order to secure the necessary
capital; if they do, they may issue more
shares, meaning youll be left holding a
reduced proportion of the whole. And with
a reduction in holding comes a reduction in
any eventual dividend income.
WorldMags.net

WorldMags.net
QUICK LOOK | THE ANATOMY OF A LANDING PAGE
The landing page is a crowdfunding
projects shop window. Its where an
entrepreneur hopes to catch the eye of
an investor and quickly persuade them
to get their chequebook out. There are

lots of different crowdfunding websites, so
landing pages will all look subtly different.
There are, however, some essential pieces
of information that occur across nearly all

the different platforms. Here are the key
elements that youll need to think about
when building your own app page.
8\PJR:^LH[,_LYJPZL+PJL-P[ULZZ4HKL-\U
I`TPJOHLS]VSRPU
/VTL
<WKH[LZ
)HJRLYZ
*VTTLU[Z
:HU[H9VZH*(
;HISL[VW.HTLZ
-\UKLK;OPZWYVQLJ[^HZZ\JJLZZM\SS`M\UKLKHIV\[OV\YZHNV
IHJRLYZ

WSLKNLKVMNVHS
ZLJVUKZ[VNV
73(@
8
WYVQLJ[I`
TPJOHLS]VSRPU
:HU[H9VHZ*(
*VU[HJ[TL
JYLH[LKIHJRLK
9
7SLKNLVYTVYL
JYLH[LK
Project name
Comments
Give your app a pithy but

1
immediately obvious name. Dont
try to be too clever or investors might be
confused about what your app does.
Its important that entrepreneurs

3
talk to their investors, allaying their
fears and feeding their interest.
Crowdfunding is all about building a

2
community. As your funding drive
develops, its a good idea to post updates
in a blog style or video updates about the
successes that youre having.
Time ticker
Most funding drives last for a few
months. Your landing page will
have a countdown ticker that shows how
much time investors have left.
6
Backers
Updates
and all the funds will be released; miss

your target and you may get nothing.
This is the total number of people

who have offered to contribute to
your crowdfunding project.
4
The entrepreneur
Pledge and goal
Here youll see how much money
5
has been promised and the funding
target you need to meet. Hit your target
Projects arent just about apps,

theyre about people. You need to
be the face of your project and champion
it at every possible opportunity.
7
WorldMags.net
(SSNVUL
The video
Theres no better way than using
a video to communicate your app
and its key points. Project videos are
usually three minutes long or less, if you
can still get across all your information.
8
The promise
An app pitch needs to identify a
problem and explain how it will
solve that problem. You need to think
hard about your pitch and what the app
does better than any other existing app.
9
| 143
WorldMags.net
Eight tips for app success

Planning, persuasion and research are essential ingredients
Research, research,
research
Dont go live just yet
You need to understand the style

of app you want to develop. This
means scoping out your competitors
to see what theyre doing and to
establish any hurdles that might need
to be overcome. Going through this
process is essential because youll most
definitely be quizzed about these sorts
of fundamentals as you progress from
the idea stage through to funding.
By the way, dont think backers will
go easy on you just because youve
never been through the process
before. Many investors will certainly
have lost money before and theyll be
mustard-keen to avoid doing so again.
Dont be afraid to use

existing video resources
to get your own video
off the ground.
If further money is pledged, you might

offer to add even more new features,
especially if these have been suggested
by the backers. There are lots of ways to
entice people check out existing
funding bids for some great ideas.
Thinking straight
Raise just what you want
An idea doesnt have any value,

no matter how good it is its the
execution of the idea that creates
value. So dont get hung up on your
initial concept; rather, think and talk
about the app that youre building
around the idea. You should also be
able to explain your app succinctly,
maybe in just one sentence. Be sure
you can explain the problem youre
looking to solve and how your app will
solve it, or, if its a game, how it differs
from (and is better than) any of the
thousands of others out there. If a
backer doesnt understand your
business no matter how good
theyll pass it by.
Planning and milestones
Taking an app from an idea to a

fully-fledged piece of software can
seem very daunting. For this reason,
Tim Davies, investment director of
Seedrs, advises giving yourself a series
of achievable goals. Beyond providing
you with both encouragement and
direction, having a solid plan also looks
good to investors.
You might, for example, present a
working prototype of the app to begin
with, along with some basic interface
stuff, just to give an idea of how it will
look and function. Then at a certain
milestone, you could fully complete
the UI or another aspect of the game.
144 |
Spending other peoples money is fun,

but youll have to pay it back (if thats
the investment model youve opted for).
So, it pays to work out exactly how much
money your app development is going to
need. This means you will have to pay less
back and, also, it will serve to convince
prospective backers.
Anyone looking to invest their own
money in a project is much more likely
to trust somebody who can show that
theyre serious about cash management.
So, get your calculator out, fire up Excel
and then work out the exact sum of
money your idea needs to work as a
minimum, and at this stage no more.
Make a video
The most potent way to tell your story

to prospective investors is to make a
video. You dont need to make an epic
consider three minutes the maximum
length of time you have to convince
people. Even a mocked-up prototype
of the app is helpful at this stage.
When youre planning your video,
ensure you communicate your apps key
ideas and the benefits it will bring very
clearly. If youd like more guidance about
making your video, head over to Videohive
(http://bit.ly/17HwfIX). There youll find
some excellent resources although
theyre not free, theyre a great way to get
things going without spending too much
time away from app development.
WorldMags.net
Veequo founder Matt Warren writing

on his firms blog at http://bit.ly/
15cz7eK offers a great tip. Before you
launch your funding campaign, talk to
your friends and family, and persuade
them to promise some small
contributions. When your campaign does
go live, their financial support will give
your project an instant lift. This is beneficial
because investors dont generally like to
be the first to pledge money. Rather, they
prefer to see a project thats already
generating some momentum and is going
somewhere. So dont hurry into going live
as soon as you can. It pays to get some
early pre-backers primed and ready first.
Embrace social media
When your campaign is up and

running, you need to be able to create
a real buzz around it. Just sending out a
press release is probably not going to be
enough. You need to be fanning the
flames with social media. There is, of
course, a huge number of platforms to
choose from. If you have limited resources,
you need to focus your attention on the
ones that backers are likely to use:
Facebook and Twitter. The key is to have
a constant output of messages dont
splurge and then go quiet. And dont view
social media as a one-way street. Talk to
people who take the time to message you.
Take on feedback
Sometimes its all too easy to ignore

feedback about the way your app
works, or what it does and doesnt do,
because youre too entrenched with your
own vision of what it should be. This is
especially true if youve been nurturing
the idea for a number of years and now
have the chance to actually create it,
because in your own mind it may be
impossible to view it any other way.
However, backers who are seeing it
for the first time might have some very
helpful suggestions about the way it
works. That stylish UI you envisioned, for
example, might just seem awkward and
impractical. Dont be too proud to change
things if necessary; ultimately, it could lead
to more money for development and, of
course, a better product at the end!

WorldMags.net
App crowdfunding sites

There are plenty out there, but what does each one offer?
Kickstarter
AppsFunder
www.kickstarter.com
Platform type: All or nothing
Fee: 5%
www.appsfunder.com
Fee: 8%
Probably the most well-known site for funding anything creative

via the crowd, not just apps projects range from albums to art
shows. Its a rewards-based system, so backers dont get direct
financial dividends from your project just the rewards you set
for each tier of funding.
As the name implies, this is one of the many new sites set up
specifically for backing app ideas. Here, you set two milestones
for development, telling backers what the money is used for, and
backers have several options to get revenue from the eventual
sale of your app.
Indiegogo
AppBackr
www.indiegogo.com
Platform type: Variable
Fee: 4% or 9%, plus 3% credit card
www.appbackr.com
Fee: Variable
With an even wider range of projects than on Kickstarter, your

app might be in danger of getting lost somewhat but
Indiegogo enables you to choose your funding type, with the
option to keep what youve raised even if it doesnt meet the
target (otherwise, its all refunded to the backers).
AppBackr calls itself the market exchange for apps, and like the
real thing, its not the easiest thing to get your head around,
relying on wholesale buying and subsequent revenue for the
backers. In all, its probably not the best option for anyone new
to either investing or crowdfunding.
AppStori
SellanApp
www.appstori.com
Fee: 7% plus 2-3% credit card
www.sellanapp.com
Fee: 5% or 10%, plus credit card
First things first: you need a US bank account (or at least access to
one) to register on AppStori as a developer. That restriction aside
its pretty much like a Kickstarter specifically for apps, in that your
backers get benefits and rewards determined by you, rather than
direct financial payback.
Here, people can submit an app idea and mock up an interface.

Pledgers then back it if they like it, with the idea that an
interested app developer will then take on the actual
development. Once the app is sold, everyone gets a share of
the profits, in theory.
GoFundMe
AppVillage
www.gofundme.com
Platform type: Straight fundraising
Fee: 5%
Youll need either a blinder of an app idea or an awful lot of

goodwill to succeed on GoFundMe, because the site is primarily
aimed at people trying to raise money for personal crises (such
as operations). There are no time limits, no set goals, and no
rewards for backers, other than a warm glow.
www.theappvillage.com
Platform type: Multiple
Fee: Variable
Like SellanApp, this is a both a site for people wanting to develop

an app idea, and the developers who want to actually create it.
AppVillage offers much more hands-on management and
marketing of ideas for the former group, though, at the expense
of much larger fees.
WorldMags.net
| 145
WorldMags.net
iStockphoto
APP MARKETING | Generating a buzz

Learns from the experts on how to get the word out about your app
reating an amazing game
or app is all very well, but
all the quality and effort
are meaningless if no one
actually knows about your work.
App stores are increasingly saturated,
with thousands of products fighting for
attention, so you cant expect a flood of
people to stumble across your app and
make it a financial success.
There are so many apps today,
and theyre just as commoditised as
websites, reckons developer Kenny
Lvrin from ustwo (www.ustwo.co.uk).
146 |
You cannot underestimate the

importance of marketing your app.
In fact, you might find it becomes the
most important part of your project.
Think different
A mistake people make with marketing
is assuming theres a perfect solution.
The reality is that every app is unique
and requires an approach suitable for
that particular project, rather than
someone idly checking a list of bullet
points. Ed Rumley, COO of publisher
Chillingo (www.chillingo.com), notes
WorldMags.net
that often what a developer thinks is

cool and unique about a project might
not be the best thing to sell it on: This
is why we work with app creators,
developing ideas within their projects
that later become powerful marketing
angles. If youre self-publishing, you
should therefore sanity-check marketing
ideas with others.
Vlambeer founder Rami Ismail (www.
ramiismail.com) also suggests that,
where possible, you should make
marketing an extension of the product,
especially if your game or app has a
Generating a buzz | APP MARKETING

WorldMags.net
Publish and be damned?
Ed Rumley, COO of publisher
Chillingo (www.chillingo.com),
unsurprisingly believes that
publishers can help in getting
apps discovered. He has a point:
Thousands of apps and games
are launched every month, he
says, so hope isnt a strategy. A
publisher can bring a portfolio
of skill sets to boost your
products chances. Rumley says
Chillingo assigns experienced
producers to work with
developers to make marketable
products. This is crucial
because consumer feedback is
vital for discoverability and this
ultimately leads to revenue.
clear sense of personality: For example,

our Ridiculous Fishing game was
absurdist and grounded in
contemporary social media, so we
created a fake social network, byrdr.com,
to celebrate the launch. For Nuclear
Throne, weve live-streamed its
development on Tuesdays and
Thursdays, growing the game which
is very much about having lots of overthe-top content by showing the
development of said content.
Still, while there are no fixed rules
that can or should be applied to every
app, some tactics maximise your
chances of marketing success.
One part of marketing the
optimisation of opportunity, as we
like to call it is quite similar for most
projects, explains Ismail. Optimising
for opportunity means preparing good
press assets, being accessible to fans,
having a website set up and making
sure the press is aware of the product
launching. Its simply making sure that
if things work out, youll be ready. Many
people will tell you to prepare for the
worst, but marketing includes preparing
for the best, too.
The write stuff

Broadly speaking, marketing materials
are broken down into text-based assets
and visuals such as images and video.
Many developers concentrate on the
latter and neglect the former, but words
are important too. They tell the story of
your product, give a project its voice,
He adds that publishers will

devote time post-launch to
pushing an app and getting it
discovered, whereas developers
might be already immersed in
technical updates or their next
product. However, engaging a
publisher isnt something you
should jump into blind, and
successful app creator Zach
Gage (www.stfj.net) warns
about the necessity of doing
your research: I personally
wouldnt work with a publisher
unless theyre someone with
a good reputation that you
know very well, and whom
you trust implicitly.
Chillingo has fostered quirky games, including the nude surreal biking of Icycle: On Thin Ice.
and are found by search engines.

If youre wary and havent done much
writing before, those immersed in the
industry offer some important pointers.
Finding a clear, unified voice for your
company and product is difficult, but
once you do find it, the rest comes
easily, believes developer and designer
Neven Mrgan (www.mrgan.com). Then
all questions of how to handle aspects
of marketing can be answered by
referring to that voice. Although this is
easier for some than others, Mrgan says
youll know when what youre writing
feels right and the things your company
says and does are things youd say or do
yourself. That kind of honesty resonates
with people, he adds.
Ismail recommends being focused,
targeting specific audiences differently,
rather than aiming for a one-size-fits-all
solution: For the press, write succinctly
in the third-person and add personable
quotes, which can be re-used. For
consumers, thematics rather than
specifics can work well; a small amount
of fluff helps your text to be more
readable to casual readers. Again, Ismail
says to consider writing as an extension
of your project, and that nothing should
contradict or dismiss what youve done.
Although negative copy should
be avoided, balance positivity with
modesty. Never cross the line into
fabrication or deception, churning out
fictions designed to make a product
appear something other than it is or
be reviewed more favourably. Press and
consumer reactions alike are hostile to

developers who lie or over-exaggerate.
Avoid hyperbole, too: theres little point
claiming your product is the best in
class, when better positive terms exist:
WorldMags.net
Neven Mrgn of Blackbar fame

believes that you need to find
a clear, unified voice for your
company and product.
| 147
WorldMags.net
DO
Get to the
point quickly in
all your
marketing
output
Build a
website to boost
your apps
discoverability in
search engines
Embrace the
community and
take advantage
of social media
Create clean
assets that show
off what your
app or game
does
Employ
professionals to
assist if youre
unsure about
what to do
engaging, exciting and terrific, for

instance. And never be afraid to get
professionals involved if you happen to
be a terrible writer, adds Ismail. There
are separate disciplines for a reason.
Get to the point

Something else to understand in your
marketing is that no one likes their time
being wasted. Its fine to have character
in marketing material, but its vital to
get to the point and answer important
questions. What is the product? Why
are you making it? How will it benefit
whoever buys it? Keep those kinds of
thoughts in mind when approaching
all marketing material, from copy
through to videos.
What about applying this reasoning
to press releases? Matthew Bolton,
deputy editor of MacFormat magazine
(www.macformat.com), advises to
consider them akin to the infamous
Hollywood elevator pitch: Imagine you
have 15 seconds to convince someone
your app or game is the best thing ever.
Youve got three or four sentences and
thats it. If you cant distil your thinking
into something sharp in that space,
your vision might not be totally nailed.
Beyond that, Bolton says all you really
need is an email address (one that will
actually be monitored) for queries, and
links to app stores, videos and images.
Advice on acquiring a promo code is
useful, too, if youve not included one.
For App Store descriptions, you have
more scope for play, but less space to
make an immediate impact. Very little
of an App Store description is visible
on many devices before expanding it,
explains Bolton. Therefore, you need
a really strong hit right up front, rather
than setting the scene for your story
or banging on about a great review you
got on some random website. (Truth be
told, almost every app gets four out of
five from somewhere.) Instead, provide
a key phrase that implies your product is
worthy of consideration; when relevant
(and truthful), use phrases such as
award-winning, featured by Apple
and number one app in its category.
Its about making people recognise
that other people liked the app and so
maybe they will, too. You can convince
them further once theyve opened up
the full description, says Bolton.
Keep it simple
As already noted, keeping things simple
also extends to your visual marketing
148 |
When Vlambeer launched Ridiculous Fishing, it also created a fake social network to generate interest.
material. Icons must communicate
your apps message, and be easy to
recognise. Rami Ismail advises trying
different designs on images of devices
and App Store pages to see how they
fare. Overcomplication is easy, so resist
the temptation where possible.
Likewise, screen grabs shouldnt be
over-thought, yet are routinely muddied,
with developers and publishers skewing
them at jaunty angles, squashing them
inside stock images of smartphones and
tablets, and overlaying marketing blurb.
But obscuring and shrinking imagery
lessens its impact during important first
impressions, along with reducing clarity
Get to the point

What is the product?
Why are you making
it? How will it benefit
whoever buys it?
WorldMags.net
for those browsing on small screens.

The key consideration should be who
benefits from additions made to vanilla
images. Unless extra content is essential
for someone to understand what your
app or game is about, lead with a clean
shot of its most interesting or exciting
view or moment. If you do stray from
clean grabs, ensure uncompressed cruftfree alternatives are readily accessible
to the press on your apps website.
Videos should be approached
similarly, efficiently showcasing how
your product works. Twenty or thirty
seconds of gameplay footage is
especially valuable for games, says
journalist Stuart Dredge (www.
appsplayground.com). If a game
has passed the hurdle of sounding
interesting, being able to see how it
moves rather than just static screens
is great for press and consumers alike.
But dont go pretending youre Pixar,
blowing time and money on elaborate
animations, or Michael Bay, adding more
cut-scenes than you can throw an

WorldMags.net
The website for endless runner Boson X includes a big video front and centre, to help people get a feel for it.
action movie hero at. Nicely designed
titles and footage of the app in use
should suffice; if more depth is needed,
take advantage of modern video
platforms such as YouTube to link
directly to more expansive footage.
Equally, dont neglect your website.
Each app should at least have its own
page or, ideally, its own site and URL.
Aim for clarity, and prominently display
your apps name, icon and some other
visuals. Keep the introductory text
succinct, and ensure that links to stores
where the product can be bought are
easily seen. Never make potential
customers search manually on stores
where there are thousands of other
ways they can spend their money.
Chillingos Ed Rumley reckons you

wont have as much time as youd think
to put icons, imagery and web pages
in front of people for feedback and
iteration, so if youre going to selfpublish, have a plan and ensure
complete attention to detail. He adds
that mobile platforms are ruthlessly
competitive, so you typically get only
one shot to grab peoples attention.
Community spirit
Talking to people is the last major piece
of the puzzle. Too many developers hide
from the community, ignoring email
and Twitter feeds. A smarter move is
immersing yourself in various
communities, dealing rapidly with
problems, and ensuring that your fans

become your advocates. Social media
is of paramount importance, says Ismail.
The community is the first line of attack
and last line of defence you have. They
are evangelists the people who care.
This is why some developers go it
alone regarding public relations. We
deliberately dont advertise our apps
widely, because we find investment
WorldMags.net
A social network account for

your game can help you to
tease new things for fans
and galvanise interest.
Ridiculous Fishings website

is great: it evokes the game,
features a video, and has big
links to the game in stores.
| 149
WorldMags.net

The website of game Threes
includes lots of information
for the press, including a
range of branding-free
screenshots.
DONT
Lie or be false
when dealing
with the press
Lead copy,
videos and
images with
meaningless
reviews
Assume that
marketing is
a one-size-fitsall solution
Make people
jump through
hoops to access
info or your app
Interest in Realmac Softwares Clear app spread

through word of mouth rather than advertising.
in advertising doesnt earn its keep,
advises Nik Fletcher of Realmac Software
(www.realmacsoftware.com). Its better
to focus on more organic ways of
discovery, he says. Make well designed
apps, keep updating them, and ensure
that the media and your customers
know about them. Engaging with
customers is a great way to then build
your user base. Additionally, use press
contacts at every opportunity, using
promo codes as appropriate, and if

your own site doesnt include a press
kit, make use of the likes of the presskit()
system (dopresskit.com) to provide
app information more widely and in
a standardised format.
Dont do it yourself
If youre unwilling or unable to do
your own PR, you might want to
consider bringing in the professionals
TriplePoint (www.triplepointpr.com)
account supervisor Rich Jones says that
working with an agency can be a great
way to have your game seen by a fresh
set of eyes, beyond your dev team,
friends and family. New opinions and
perspectives can improve the final
product, based on a broad knowledge
of existing apps, from mainstream hits
to under-the-radar indie titles.
Jones adds that PRs can also pitch
Press darlings: dealing with the fourth estate

The press can help get your
product known, but you must
understand how to approach
journalists. When making a
personal contact, you can be
friendly, but being pally rings
false on a mass email, warns

MacFormat (www.macformat.
com) deputy editor Matthew
Bolton. Also, get my name and
the publications name right;
dont call to ask if you can
To increase the likelihood of getting coverage, make a journalists job as easy as possible.
150 |
email; and dont send a press

release more than once.
Stuart Dredge, journalist and
founder of Apps Playground
(www.appsplayground.com),
remarks how developers
often apologise for getting in
touch and advises: Dont. An
interesting-sounding app
pitched by a developer has
the same priority as an agency
pitch. Finding out about cool
stuff is a privilege, not a
burden. However, Dredge adds
that modern journalists are
generally snowed under (like
most people), so you shouldnt
expect feedback nor hassle
them about pitches.
Instead, to increase the
likelihood of coverage, make
WorldMags.net
their job easier: App Store

grabs are often plastered in
marketing blurb, but if you
supply non-altered screenshots,
I can use them in my articles.
Additionally, send me a promo
code and Im likely to redeem
it and at least try the app,
which is less likely if youre
sending out TestFlight
invitations or ad hoc builds.
Occasionally, Dredge adds
that a journo might respond
negatively or rudely. If so,
shrug your shoulders and
move on. No single writer is a
kingmaker. There are too many
other ways, and people, for
promoting your app to waste
time on someone with an
entitlement complex.

WorldMags.net
Try bringing in
the professionals
new opinions and
perspectives can
improve the product
your product from app-store
gatekeepers to editorial contacts
who make the final decisions about
prominent placement, rather than the
developer relations teams that merely
assist with app submissions and
acceptance. Featured placement can
make all the difference, because app
stores are now the main way people
discover new apps, he says.
Above and beyond

The final tip from a marketing
perspective is to think about all these
things from day one and not at the last
minute. We put a lot of effort into our
app launches, and the launch window
is the biggest opportunity youll get to
earn back some of your investment,
says Fletcher. We ensure interested
media parties have a copy ahead of
launch, a full press-pack and a review
guide. Thats a lot of work, but it always
pays for itself. Then after the launch, we
review the plan, and then adapt the
playbook based on what worked.
Above all, though, recognise that
great marketing cannot compensate

for a poor product. Artist and developer
Zach Gage (www.stfj.net) thinks the best
tip of all albeit one he thinks sounds a
bit contrived is to be unique and work
hard: Dont make work [for yourself ]
to get attention, but do it because the
world doesnt have the thing you want.
Make things to share, because its
important that other people have the
experience you want to have. Make sure

your work is good and you do a lot of it.
On that basis, instead of focusing too
heavily on PR, Gage says to not lose
sight of what you believe in
You should ensure anyone who
finds your work loves it, is thrilled by
its quality, and will want to follow it in
the future. Contrived it may be, but it
still rings true in every walk of life.
WorldMags.net
Make use of the likes of

presskit() which is free to
provide clear, standardised
press pages.
Get your app talked about,

increase your downloads, and
you could jump to the front
of the App Store listings
| 151
WorldMags.net
APP MARKETING | App trackers

Keep on top of your sales, refunds, promotions and most importantly, profits
SKILL LEVEL
Anyone can do it
IT WILL TAKE
5 minutes
YOULL NEED
An App Annie account
ouve come up with the

killer app idea, sweated
blood and shed tears over
the design and the code
and now youre ready to deploy it to the
Store and reap the rewards. Of course,
you have to run the gauntlet of Apple
approval for your lovingly crafted work,
but once the app goes live you just
want to sit back and watch the count
of downloads climb.
App Store reviews will give you a
good idea of the response to your app,
but beware of the 5 star vs 1 star split
giving you a false impression: most
users who like your app probably wont
leave a review, and of those who leave
a 1 star rating a good proportion often
arent complaints, more feature requests.
You only have to look at apps with
hundreds of thousands of downloads
and a handful of reviews to see how
opinion can be skewed. Plus, any buzz
your app gets on social media or word
of mouth can help give you a good idea
of whats going on behind the scenes.
Finding the facts

Theres no substitute for real numbers,
however, and getting the data behind
your apps performance is something
that every app developer should make a
priority. Understanding when and where
your app is selling well can make the
difference between an also-ran and a
chart-topper. What if, for example, it
turns out that the French really like your
The App Annie Analytics Dashboard

helps publishers track all of their
data across iTunes and other stores
app and download it in droves? How
will you maximise on that potential?
There are a number of ways to keep
track of how your app is performing.
These tools let you see when and where
your app is being downloaded, help you
analyse how successful any advertising
or promotions have been, and offer an
indication of when it may be best to
advertise your app for maximum impact
and when to hold off so as not to waste
precious marketing budget. You can
152 |
Track sales and

data to try to get
your app to the top
of the charts!
also compare your app against other

similar apps and look at how the most
successful ones out there are doing
region by region.
Naturally the first port of call for many
iOS developers who want to see how
well their app is doing will be iTunes
Connect. Here you can see your sales
within a chosen timescale and by area,
and also filter sales by a range of other
values. The simple layout displays a
graph outlining which devices are the
most popular, and you can see at a
glance whether sales are up or down on
the chosen period. If you have a few
different apps the categories section will
show you which one is performing best.
If you want to view your data in some
other way, analyse it in more detail or
distribute it, then you can export the
numbers to a spreadsheet. This does
mean youll have to spend some time
making it look better than just a list of
figures, but you do have access to your
raw data if you want it.
Other trackers
For the basics, iTunes Connect is simple
and (in typical Apple style) elegant, but
its not for everyone. There are a number
WorldMags.net
of alternatives that offer simple and yet

useful analysis of all your sales data. The
following tools are all straightforward to
implement and make tracking your sales
information really easy.
App Annie is perhaps the best known
app tracker. To date it has recorded over
36 billion downloads and over $8 billion
in revenue, and its used by 90 percent
of the top 100 publishers. What is it that
draws those publishers to the service?
A spokesperson said: The App Annie
Analytics Dashboard helps publishers
track all of their data across iTunes,
Google Play and Amazon. Rather than
going to all of these disparate sites and
downloading CSV files of data, App
Annies dashboard includes revenue,
downloads, ratings, reviews and
rankings data in one spot. App Annie
also lets you see hourly updates of
your rankings for free.
According to the company, App
Annie is tracking more than 350,00 apps
daily and keeps tabs on more sales,
rankings and customer reviews than
any other service of its type. Thats a lot
of data, and this can only help you to
compare and contrast where you are
against the competition. That said, there
App trackers | APP MARKETING

WorldMags.net
are alternatives to App Annie, and they
are certainly worth considering if youre
interesting in knowing your store stats.
AppViz is a standalone application
that imports all your data and gives
you local access, so it even lets you
view and analyse your data when the
web connection is down or you cant
get online (assuming youve synced
your stats recently, of course). AppViz is
completely free if you just want to track
a single app, but youll need to pay to
track more: it costs $10 a month for up
to 20 apps, $20 for 21-50 and $30 for
51-100. Thats not exactly extortionate
and, with luck, if you have anywhere
close to 100 apps on the go then youll
be making more than enough revenue
to justify the cost.
Downloading details
According to the company, the way that
AppViz calculates payment data also
means it has the edge on accuracy in
your reports too. Because of fluctuations
in exchange rates its possible to see
large gaps between estimated sales and
actual deposits paid by Apple, but the
way AppViz collates data means this is
less likely than with other options.
If neither App Annie nor AppViz takes

your fancy then consider appFigures
this service offers similar tools. You can
track multiple stores, so if you should
decide to branch out, the service will
grow with you. The appFigures service
offers the usual graphs and charts to
make your data look sexy, plus theres
still the option to export everything to
Excel should you need to. There are
Even if youre not in

app development for
the cash you should
keep an eye on how
your app is doing
daily email reports, and ranks are
updated on the hour. Theres even a
translation service for reviews on stores
where you sell, although these arent
necessarily fluent in the local tongue.
The appFigures service offers a free
trial that will let you track up to five
apps for a couple of weeks, but it then
costs $15 a month as standard. For this
subscription price you have access to
all the features and tracking of five apps.

To track more than five apps, appFigures
charges an extra $1.49 each.
Which of the services you use is, of
course, entirely up to you. Which tool
you choose will probably come down to
something as simple as which one you
most like the look of. To be fair, the really
essential figures, like total sales and
revenue, may be the only ones youre
actually interested in knowing. However,
the more you understand exactly how
and where your sales are strongest, the
better youll be able to get to grips with
matters like targeting your marketing
spend and so on.
Even if youre not in app development
for the cold hard cash, you should keep
at least an eye on how your app is
doing. After all, if youve made it as far as
designing and developing an app, youll
want to get some idea of how the world
is responding to your efforts, if only for
curiositys sake. The range of data
available is interesting if nothing else,
and even if you get only a handful of
downloads in some random places
around the globe youll be able to
claim that youre an internationally
downloaded iOS app developer!
QUICK TIP
Don't get too
worried about
your app
reviews. Its easy
to obsess over
a few one-star
ratings, but if
you have
thousands of
downloads
theres a real
chance that not
everyone feels
that way. If the
reviews do ring
true, though,
think about
making changes
to your app.
QUICK LOOK | THE APP ANNIE DASHBOARD

Graph view
See all your app data on one
graph to help you identify
trends in your downloads. All the
raw data is here too.
1
Track options
By default, all apps you are

tracking are shown, but you
can see individual performances.
2
Revenue
The revenue column shows
you just how rich youre
going to be when Apple deposits
your money in your account (but
beware of currency fluctuations).
3
Reviews
You can see how many
reviews have been submitted
in the Reviews column this covers
the last seven days activity.
4
WorldMags.net
| 153
WorldMags.net
APP MARKETING | App trackers
HOW TO | VIEW YOUR DATA IN A GIVEN TIMEFRAME
1 Timescale graph
As standard, youll be able to see the last

months worth of data when you log in to App
Annie. There will be times when you need to see
a wider or narrower selection of dates. All your
historic data is easily accessed, and there are a
number of ways to see date specific numbers.
2 Automatic date range 3 Single app data

You can choose your own time scales to
view: click on the date range box and make a
selection on the calendar. Alternatively, there
are some predefined ranges for ease of use
For the last year, click on Last 365 Days. Or
there's Last 7 Days, All Time, and so on.
With a full year selected, the more apps

you have on display the more confusing all that
data can become, even with a handy graph to
show the peaks and troughs. To add or remove
an app from the chart, simply click on its title
underneath the graph, giving you a clearer view.
HOW TO | SEE THE FULL PICTURE BEHIND APP REVENUE
1 Count your riches
Click on the Revenue tab to see how

much money youre making from each of the
apps you have on the store. You can see a graph
of all your apps together or separate them out.
In the default view, you get an overall view of all
territories and total profits from all sales.
2 Revenue by country
One of the real benefits of selling on

Apples App Store is that you can instantly build
an international following. Keeping an eye on
country or territory sales is simple in App Annie.
Click All Countries to see the available options
or type in the country you want to see.
3 Break revenue down
Measuring your total revenue in one

large chunk is great, but you can drill down to
see more precise info. Click on IAP Revenue to
see which apps do best for in-app purchases. If
you carry ads you can see the money you make
here, and theres plain old sales revenue too.
HOW TO | MONITOR YOUR DATA PROPERLY

Tracking your app is great and
seeing the sales roll in even
better, but there are a couple of
things you need to keep in mind
to make the most of the data you
get back. First, if sales start to drop
off then, before you panic, think
about seasonality. Public holidays
around the world can result in
fewer downloads or less activity in
154 |
general. Keep this in mind when

doing any promotions theres
no point paying for advertising or
doing a big marketing push if the
day you launch everyone is at the
beach. As you continue selling,
it's an idea to keep track of any
particular events that could affect
year-on-year performance. If
Apple launches a new iPhone or
iPad, this is something you should

keep a note of. Its a good idea to
record such things either as notes
in your figures or with a diary of
events. This will help you to
monitor various download
fluctuations say, for example,
you run a promotion in July one
year, your sales may not be as
high the following July.
WorldMags.net
WorldMags.net
Try the new issue of MacFormat

free* in the award-winning app!
macformat.com/ipad
Packed with practical tutorials and independent advice discover why
MacFormat has been the UKs best-selling Apple magazine for seven years!
* New app subscribers only
WorldMags.net
WorldMags.net
APP MARKETING | Hall of fame
The App
Hall of Fame
These inspirational apps do clever things in innovative ways
156 |
Tweetbot
Fantastical 2
This is a Twitter client that doesnt compromise on

experience. Its designed around interaction and speed,
meaning that many common actions are just a single
gesture or swipe away, instead of hidden behind menus.
Its customisable, and has a real personality of its own its
familiar to iOS 7 users, but has fun touches that set it apart.
Rather than fitting a full, dense calendar into the small

space of the iPhone, Fantastical 2 shows how you can work
around the limits of a little screen. Offering a weekly view
or a monthly view that can be switched between easily, it
also shows your forthcoming appointments in an easy-tobrowse list which also, usefully, incorporates Reminders.
WorldMags.net
Hall of fame | APP MARKETING

WorldMags.net
Little Digits
Little Digits is the perfect example of how
new technology can create whole new,
brilliant experiences. The iPad can detect
up to 10 fingers touching its screen
simultaneously, so to help kids learn to
count, this app shows a big number to
match how many fingers are touching it
its tactile and memorable.
Dark Sky
Dark Sky uses real-time
weather data from the
cloud (no pun intended)
not only to display easily
understood timelines of
when it will rain over the
day, but also to send you
a notification to warn
you if youre about to get
caught in a downpour.
Its a brilliant use of the
connectivity features of
the iPhone to provide a
massively useful feature.
Due
Although Due has yet to
be updated for iOS 7, its
still one of the best to-do
apps on the Store. The
key is its speed it
makes it really easy to
add reminders with little
hassle, so youre more
likely to actually use it.
Its full of one-tap
options and clever
presets (which can be
customised) so that
using it is low-friction.
WorldMags.net
| 157
WorldMags.net
The Pyramids
The Pyramids is an incredible exploration
of the ancient Egyptian pyramids at Giza.
It lets you explore the tombs in 3D, gives
you details of many of the paintings, and
even shows what these tombs would
have looked like when they were first
created. It adds exploration and wonder
to a subject thats been covered before.
Noteshelf
This app for taking hand-written notes on your iPad
excels because it gets the feel of scribbling notes right.
The ink spreads convincingly, and palm-detection
means you can rest your wrist on the bottom of the
screen and write at the top without issue. Best of all is
a magnifier, so you fit lots of precise writing on a page.
FiLMiC Pro
FiLMiC Pro is a great example of how you dont need to
reinvent the wheel to make something great. The iPhones
video camera is great, but Apples app lacks features.
FiLMiC Pro has them. It starts with separate focus and
exposure control, and spreads through to higher-quality
video, audio level monitoring and even framerate options.
158 |
WorldMags.net
Hall of fame | APP MARKETING

WorldMags.net
Instagram
Instagrams popularity
comes from its simplicity
take a basic photo,
make it look better,
share it. But that
simplicity extends
elsewhere: the menu bar
along its bottom, with
the obvious button in
the middle for taking a
snap, has been aped by
many other apps and is
a great bit of design
easy-to-use and simple.
Zombies, Run!
Zombies, Run! combined
the popularity of zombie
games and running apps
brilliantly. Take your
phone with you when
you go for a run, and
Zombies, Run! rewards
you with points, which
you can spend on
defending your
settlement against
zombies in-game. It was
a great, original spin on
common app types.
Evernote
Evernote is a great demonstration of
how mobile apps can be vital part of
a bigger service. The iPhone app is
heavily focused on taking notes (in
text, photo or audio form), rather
than referencing them which
matches the idea of a takeanywhere device perfectly.
Drafts
Drafts is a note-taking app thats
focused on convenience. In this
one app, you can write something
hurriedly, then choose what to do
with that text post it on a social
network, email it, store in the Notes
app the list is customisable and
nearly endless!
WorldMags.net
| 159
WorldMags.net
RedLaser
RedLaser shows how
the iPhones sensors (the
camera, in this case) can
be used in surprising
ways. Here, it becomes
a barcode scanner,
identifying products
and then grabbing
information about
where theyre available
online and what the
best price is. It makes
checking for bargains
easy and fast.
UK Train Times
UK Train Times is a great
demonstration of how
you can turn a simple
data source into a
brilliantly useful app.
This app gets live train
information, including
timetables, delays and
platforms, and makes it
easy to follow. It also has
a clever Next train home
button, using GPS to
locate you and picking
out local train times.
Sky Guide
Sky Guide is a wonderful
use of the iPads
hardware as a learning
tool or just for fun. It
uses your location to
give you an overlaid
view of the stars in
your area, picking out
constellations, satellites
and other interesting
celestial objects. Just
move the iPad around
the sky to get an insight
into whats above you.
Status Board
Status Board shows how simple ideas can
include advanced tools. At its most basic,
Status Board is a simple screen-saver type
information display for iPad, showing you
calendar appointments, social media and
so on. But it can also display custom data
sources, so you could show real-time sales
data or analytics in businesses.
160 |
WorldMags.net
WorldMags.net
THE COMPLETE GUIDE TO EBOOKS ON THE iPAD

EACH ISSUE JUST 2.99 / $4.99,
SUBSCRIPTIONS FROM 1.99 / $2.99
http://goo.gl/fuXZt
JOIN US ON TWITTER: @iPadUserMag
Only
on Apple
Newsstand!
New is
WorldMags.net
sue every
six weeks
WorldMags.net
Future Publishing Limited
30 Monmouth Street, Bath, BA1 2BW, UK
www.futureplc.com
www.myfavouritemagazines.co.uk
Phone +44 (0)1225 442244 Fax +44 (0)1225 732275
All email addresses take the form firstname.lastname@futurenet.com
EDITORIAL
EDITORINCHIEF Graham Barlow
EDITOR Christian Hall
DEPUTY EDITOR Matthew Bolton
ASSISTANT EDITOR Alex Summersby
ART EDITOR Seth Singh
DESIGN & LAYOUT Nick Aspell, Cormac Jordan
OPERATIONS EDITORS Jo Membery, Ed Ricketts
CONTRIBUTORS Chris Brennan, Martin Cooper, Tim Duckett,
Matt Gemmell, Craig Grannell, Rob Hampson, Lou Hattersley,
Alexander Klein, Keith Martin, Tom May, Jaimee Newberry,
Martin Pilkington, Gary Riches, Alex Thomas, Dave Verwer
IMAGES Apple, iStock, ThinkStock, Future Photo Studio,
Chris Hedley, Panayotis Vryonis
FUTURE
HEAD OF COMPUTING GROUP Ian Robson
MANAGING DIRECTOR, TECHNOLOGY GROUP Nial Ferguson
CHIEF EXECUTIVE Mark Wood
GROUP SENIOR ART EDITOR Steve Gotobed
CREATIVE DIRECTOR Bob Abbott
EDITORIAL DIRECTOR Jim Douglas
9000
9001
MARKETING
GROUP MARKETING MANAGER Philippa Newman
CIRCULATION
TRADE MARKETING MANAGER Colin Hornby
PRINT & PRODUCTION
LOGISTICS MANAGER Mark Constance
PRODUCTION CONTROLLER Vivienne Turner
LICENSING
LICENSING & SYNDICATION DIRECTOR Regina Erak
INTERNATIONAL ACCOUNTS Michael Peacock
Printed in the UK by William Gibbons on behalf of Future.

Distributed in the UK by Seymour Distribution Ltd,
2 East Poultry Avenue, London EC1A 9PT. Phone: 020 7429 4000
Future produces high-quality multimedia products
which reach our audiences online, on mobile and
JOQSJOU'VUVSFBUUSBDUTPWFSNJMMJPODPOTVNFSTUP
JUT CSBOET FWFSZ NPOUI BDSPTT mWF DPSF TFDUPST
5FDIOPMPHZ &OUFSUBJONFOU .VTJD $SFBUJWF BOE
4QPSUT"VUP8FFYQPSUBOEMJDFOTFPVSQVCMJDBUJPOT
Future plc is a public
Chief executive .BSL8PPE
company quoted on the
Non-executive chairman Peter Allen
-POEPO4UPDL&YDIBOHF &KLHIQDQFLDORIFHUZillah Byng-Maddick
TZNCPM'653

5FM
-POEPO
www.futureplc.com
5FM
#BUI
All contents copyright 2014 Future Publishing Limited or published under licence.
All rights reserved. No part of this magazine may be reproduced, stored, transmitted
or used in any way without the prior written permission of the publisher.
iPhone, iOS, iPad, iPod, iTunes, iCloud, iWork, OS X and other terms are trademarks
or registered trademarks of Apple Inc. This is an independent publication and has
not been authorised, sponsored, or otherwise approved by Apple Inc.
Future Publishing Limited (company number 2008885) is registered in England and
Wales. Registered office: Beauford Court, 30 Monmouth Street, Bath BA1 2BW. All
information contained in this publication is for information only and is, as far as
we are aware, correct at the time of going to press. Future cannot accept any
responsibility for errors or inaccuracies in such information. You are advised to
contact manufacturers and retailers directly with regard to the price and other
details of products or services referred to in this publication. Websites mentioned
in this publication are not under our control. We are not responsible for their
contents or any changes or updates to them.
If you submit unsolicited material to us, you automatically grant Future a licence to
publish your submission in whole or in part in all editions of the magazine, including
licensed editions worldwide and in any physical or digital format throughout the world.
Any material you submit is sent at your risk and, although every care is taken, neither
Future nor its employees, agents or subcontractors shall be liable for loss or damage.
We encourage you to recycle this magazine,
either through your usual household recyclable
waste collection service or at recycling site.
We are committed to using only magazine paper
which is derived from well managed, certified
forestry and chlorine-free manufacture. Future
Publishing and its paper suppliers have been
independently certified in accordance with the
rules of the FSC (Forest Stewardship Council).
WorldMags.net

You Can Make An App 2014

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

You Can Make An App 2014

Uploaded by

Copyright:

Available Formats

e d y!

You can make an

Everything you need from sketch to store!

Create apps for

Make your apps stand

Learn the pros tools:

Get more from the Get started in iPhoto,

Available at all good newsagents or visit

Its never been easier to make and

ver since Apple launched the App Store for the

Before you even think about coding, start here!

Principles of app design

Building apps with Xcode

Dynamic tables with Data Source

Start making your own apps

Make a basic card database

Create a game in Unity

Move and animate the player

Design & Testing

Designing and prototyping

Case study: Place your bets

The art of crowdfunding

Track your app sales

MAKING AN APP | Design principles

Principles of app design

formality. Here are a few important

Refining the idea

hundreds if not thousands of other

Design principles | MAKING AN APP

Every type of app has been done

device. For mobile apps, the best

you really need multiple lists?), or data

Designing the interface

Direct interaction can be

MAKING AN APP | Design principles

Every app has already been

serve to delay and irritate the user.

Take your essential features and

human being using the device, rather

about how objects behave in the real

Animation and physics

Design principles | MAKING AN APP

of interface elements with the thumb

visual acuity, hearing or motor control

Simple interfaces make

Adapting your interface

MAKING AN APP | Design principles

MAKING IT WORK | APP DESIGN DOS AND DONTS

Too many apps arent useful when

Apps shouldnt need to be scrutinised

It can be very difficult to imagine how

The only thing more valuable than the

No-one likes being locked in, because

Gestures are an excellent way to

7 Animate with care

It can be tempting to sprinkle animations

8 Wood and leather

Weve recently seen a trend away from

such skeuomorphic designs in themselves,

9 Room for one more

Its almost impossible to think of a

Its difficult to recover from a breach

The Ultimate Guide for