1. technology and computing
2. programming languages
3. javascript

Vol. 1 No. 1 Monthly
3D ENGINES IN iOS DEVELOPMENT
How To Use Unity 3D, SIO2
and ShiVa 3D?
How To Develop Applications For iOS Using PhoneGap?
Issue 01/2012 (1) January
What’s Going On The Game Development Market?
Interesting feature
HOW TO TAKE FULL ADVANTAGE OF MOBILE LOCATION FOCUSED APPLICATIONS?
What Should You Know About Component Based Programming And Flex SDK?
Editor’s Note
Happy New Year!
The January issue of Codersky Magazine features great articles about current trends in Mobile
Development. Let’s see, what 2012 will bring for us!
In the first article Anton Trubianov and Maxim
Kershengolts talk about 3D engines for iOS
Development. It’s a great opportunity for you to
find out, what are the advantages and disadvantages of using Unity 3D, SIO2 and ShiVa3D. The
article includes some good pieces of advice and
technical descriptions from the developers’ point
of view, which may be very useful for your own 3D
Development projects.
The second article, authored by Stefan
Horochovec focuses on Developing for iOS using
PhoneGap. Thanks to this tutorial, you can easily
start using PhoneGap for mobile development.
If you are a fan of Flex, you can check the article
written by Gábor Csomák. The author shows us that
Flex project can target Flash Player and Adobe AIR
as well, therefore you can run a project on Android,
iOS, BBX, Windows, Mac and Linux.
Matt Sheehan’s article concentrates on location
focused mobile apps. The topics are really refreshing! Find out more about location based services
(LBS) and geographic information systems (GIS).
Managing Editor: Judyta Leputa
[email protected]
Proofreadres: Kimberly Voll, Shola
Sadiku, James Alabi, Duncan Keir
Betatesters: Kimberly Voll, Francesco Consiglio,
Marco Carranza, Pawel Brzek, Dzmitry
Rusak, John C. Bland II, Blake Shearer
Art Director: Anna Wojtarowicz
DTP: Anna Wojtarowicz
Webmaster: Jakub Tschierse
[email protected]
Technical Manager: Andrzej Kuca
[email protected]
Managing Director: Ewa Dudzic
[email protected]
Marketing Director: Grzegorz Tabaka
[email protected]
Publisher: Software Media Sp. z o.o. SK
02-682 Warszawa, ul. Bokserska 1
www.codersky.com
If you are interested in Game Development, you
will also find some very interesting articles. The article, authored by Aleksander Lyskovsky, will surprise
you with the variety of solutions created for games.
The mysterious Embrace the Abstraction by Richard
Terrell talks about gaining perspective on game
design choices by examining the source of creativity and the process of communicating through
a medium.
Whilst every effort has been made to ensure the
high quality of the magazine, the editors make no
warranty, express or implied, concerning the results
of content usage. All trade marks presented in the
magazine were used only for informative purposes.
All rights to trade marks presented in the magazine
are reserved by the companies which own them.
All articles are very interesting and they need to
be marked as Need to be Read!
The techniques described in our articles may
only be used in private, local networks. The
editors hold no responsibility for misuse of the
presented techniques or consequent data loss.
DISCLAIMER!
Enjoy reading!
Judyta Leputa
& Codersky Team
4
01/2012
Table Of Content
06
Using of 3D Engines in iOS
Development
By Anton Trubianov and Maxim Kershengolts
Which 3D engine to select? In this overview we will try to give a brief description of several 3D
engines that we have examined while solving such a
question. The task was to implement an application
which loads a 3D model with skeletal animation and
allows us to switch among several animations during
different events such as: user interaction, geolocation
updates, camera and accelerometer events, etc.
12
Developing for iOS using
PhoneGap
By Stefan Horochovec
The PhoneGap provides a lot of resources
in it’s API, with it you will have access to: Accelerometer,
Camera, Capture, Compass Connection, Contacts,
Device Events, File, Geolocation, Media, Notification,
Storage. All this using just HTML + JavaScript for development. If you are already familiar with the web
environment, you can easily start using PhoneGap for
mobile development.
18
Why should you use Flex?
By Gábor Csomák
Flex is a powerful application framework
based on Adobe ActionScript. A Flex project can be
exported as Adobe Flash (.swf) object, for a website,
or as an Adobe Integrated Runtime (.air) program, to
run as application on OS X, Windows, iOS, and Android.
Would you like to develop multi-platform RIA and
enterprise apps like never before?
26
32
Games as products and
services
By Aleksander Lyskovsky
We can speak upon the new casual games, leaving the hardcore realm for the corresponding
specialists to discuss. Casual 2.0 incorporated the best
of online and offline approaches. The casual 2.0 business lines include Smartphone, pad, social network,
console, MMO, traditional PC casual downloadable and
future PC casual games. Most of the casual market is
growing now thanks in part to the mobile segment that
should reach 10 billion in 2013, according to analytics.
40
Embrace the Abstraction
By Richard Terrell
Though some games simulate real life
objects and interactions with great detail, most video
games fall somewhere in the middle of the extremes of
the purely abstract and simulation. This middle ground
is an abstraction, a key concept in the foundation of
game design. Abstraction. Stylization. Simplification.
These are terms that describe the act of creating a
representation with some, but not all, aspects of the
existing subject.
Review of Games as products and services
by Aleksander Lyskovsky
First, and most importantly, this is a really
interesting article!
“Surely enough, this requires a serious rethinking of the
whole game process, not just to port it to a new engine.” This is such a huge point, I would even add a bit
to it. I think you’ve hit the nail on the head with a lot
of the problems of porting; not recognizing the need
for a comprehensive look at the platform for which
you are now developing and how that relates to the
dynamics (and mechanics, even), as well as the user
experience and expected user experience, etc.
Kimberly Voll
Mobile location focused
Applications
By Matt Sheehan
This article discusses location focused
mobile apps and applications which take advantage of
the built in GPS on most mobile devices. In particular
we will consider location based services (LBS) and geographic information systems (GIS). With GPS now so
common on mobile devices, so called geo-location can
be used to provide a slew of new services.
codersky.com
Review of 3D Engines in iOS
Development
by Anton Trubianov and
Maxim Kershengolts
The article is pretty interesting. The
structure is classical for this kind of
presentations, no arguments about it.
It is a niche article, which is really
appreciated and the pros and cons
after each paragraphs are great
and will attract a lot of readers.
Francesco Consiglio
5
Using of 3D Engines in iOS
Development
3D Engines for iOS Overview
Which 3D engine to select? This is the first question
that appears in front of a developer when it comes to
the development of a 3D graphics application or game
for iOS/Android. In this overview we will try to give
a brief description of several 3D engines that we’ve
examined while solving such a question.
The task was to implement an application which
loads a 3D model with skeletal animation and allows
us to switch among several animations during different
events such as: user interaction, geolocation updates,
camera and accelerometer events, and so on. The main
criterions for selection were: multi-platform support
(i.e. an ability to redistribute the developed code and/
or scene among iOS and Android platforms), and full
support of all OpenGL ES 2.0 features.
Unity 3
Unity is more like a 3D game development tool than
a simple 3D engine. In fact you can’t even use it like
most other 3D engines, including it in your Xcode project. Unity provides its own development environment
which handles all stages of development, from creating 3D models and scenes, to building an application
binary (Figure 1).
Such an approach makes Unity a great tool for developing ordinary 3D games. But when you need some
extended features in your 3D application, you may lack
an ability to write your code in Objective C. For example, if you need to scan QR-codes into your application,
zxing is a great open-source library for that, but you
can’t just include it in your Unity project. Unity allows
us to build a plugin with Xcode and then to use it
within our application. To note, you have to purchase
Figure 1: Bootcamp.unity
6
01/2012
Using of 3d Engines in iOS Development
Unity first in order to be able to use plugins within it.
Thus, if you are only gauging to see if Unity fits your
goals, there’s no way for you to try building your own
plugin for testing.
Advantages:
•
•
•
Really cool game development environment
which makes building 3D games an easy and visual experience
Full support of all the latest graphics technologies.
Great base for learning: documentation, tutorials, examples, community, etc.
Disadvantage:
•
A developer is limited, able to only use the Unity
game editor, and unable to use Xcode and write
his own Objective C code.
SIO2
SIO2 is positioned as an in-expensive, but fully functional 3D engine. It encourages developers to use
Blender as a 3D modelling tool and provides all necessary tools for exporting scenes from Blender to SIO2.
However you can convert scenes to SIO2 from any 3D
editor you like via the use of converting scripts.
ShiVa3D
ShiVa3D is a 3D engine with a modelling environment, but unlike Unity it is able to export projects to
Xcode and other development tools (depends on platform). It is very useful because with it you can first develop your game scene and logics in ShiVa3D editor,
and then continue project development in Xcode using
native iOS frameworks. The only negative aspect is that
ShiVa3D editor tool only exists for the Windows OS.
ShiVa3D is also very useful in that you only have to
pay for a license when you want to publish your application onto the AppStore. Before this step you are able
to test all of the engine’s features for free.
A great feature of this engine is its Authoring Tool.
This function solidifies ShiVa3D as the most fully
cross-platform compatible engine in the world. The
Authoring Tool compiles a project generated by ShiVa
into an executable application for the following device
platforms: Windows, Linux, Mac, IPhone, IPad, Android,
Palm and Wii.
may be implemented with SIO2.
ShiVa uses the Lua script language for programing.
Lua is very simple, taking only a few minutes to get a
grasp of if you have C++ or Java experience. After building a project for some specified platform, all scripts
are converted into C++, ensuring solid performance.
You will find a lot of very useful information about this
script at: http://www.stonetrip.com. The site includes a
large developer forum, and is the perfect place to have
specific questions and/ or concerns answered.
A weak point of SIO2 is that it’s still pretty raw as for a
commercial product. Some features like loading a MD5
format and playing skeletal animations will sometimes
not work, freezing a device or crashing it with BAD_
ACCESS without throwing any exceptions suitable for
efficient debugging.
Additionally, ShiVa has a great API. It is well documented, giving examples for each function and the
like. The API includes support of many types of hardware as well, including: accelerometers, microphones,
joysticks, touch detection for touch displays, and etc
(Figure 2).
On the engine’s web-resource, http://sio2interactive.
com, you can find examples for almost any task that
Additionally, Android support is quite new to SIO2,
and as so it’s also fairly raw, sometimes refusing to run
on various devices without explanation.
Advantages:
•
•
•
May be easily included within a Xcode project.
Full license includes source codes.
Good examples for almost any task on SIO2
web-resource.
Disadvantages:
•
•
Engine is still in a fairly raw state, especially considering Android support.
Poor support service; unable to help solve serious problems with engine usage effectively.
codersky.com
Advantages:
•
•
•
Useful game development environment with
the possibility of exporting projects to Xcode
and continue developing in Objective C.
Fully supports all the latest graphics technologies.
License required only for publishing, otherwise
usage is free.
Disadvantage:
•
Editor tool available only for Windows OS.
Moving forward, we would like to tell you about
platforms where you can develop applications with
the assistance of ShiVa 3D. The engine can successfully launch products onto Windows, Mac, Linux, iOS,
Android, Palm OS, and Web OS, despite the fact that
ShiVa itself exists solely in a Windows OS version.
7
Figure 2: ShiVa Editor 1.9.0.1
The aforementioned Authoring Tool is a software
product that accompanies ShiVa 3D for further application development and subsequent launch onto a specific platform. It exists in two variants; one for Windows
and one for Mac. Creating applications on any platform
with this engine is a three step process (Figure 3):
1. Download initial files exported from ShiVa,
2. Enter information regarding the app name, provision file, and bundle depending on platform.
3. Define folders where the application would be
saved and specify certain graphics settings, for
instance the use of OpenGL.
All these actions take roughly 3 minutes.
We’d like to say a few words about importing resources to ShiVa. First of all ShiVa can import 3D
models in DAE format. In order to do that, you’ll need
to download the Collada DAE plug-in -- it installs
onto and works with the most popular 3D graphics packages, including 3ds Max and Maya. QrCode
contains the link to a website where a more detailed
8
description of the Collada DAE format is provided.
To note, while working in this format we were confronted with certain difficulties while importing our
model into ShiVa 3D. When saving 3D model textures, they remained in the same folders where they
were initially located and subsequently opened by
the program for modeling. Since a file in DAE format
represents a XML file, paths to textures are in the
same way. This means that if its transferred to another computer, the user will encounter path conflicts.
As a result, only models without textures are able to
be imported. After some time with the engine we’ve
found 2 possible solutions to this problem. The first
solution is to correct manually texture paths within
the DAE file itself. The second solution is to convert
textures to a TGA format and import them into ShiVa
separately from the model. It’s important to also
note that the size of textures should be aliquot to an
n-power of two. This same requirement applies when
creating iOS applications as well, and relates heavily
to overall operational optimization and application
speed. Regarding sounds: ShiVa accepts different
sound resources in MP3 and WAV formats.
01/2012
Using of 3d Engines in iOS Development
Figure 3: ShiVa 3D Authoring Tool1.
Discussing the graphic interface which ShiVa allows
you to create: On the ShiVa website -- in the section
for developers -- we will find graphic files where all native elements of Android and iOS apps are displayed.
Elements such as: Scroll-bars, Buttons, and etc. This enables you to fully reconstruct the GUI of necessary platforms. We carried out experiments creating buttons
using ShiVa, as well as the usual iPhone buttons that
are located over a 3D scene. Our results showed 1-0 in
ShiVa’s benefit. Our FPS counter showed a difference
of 5 fps with ShiVa implementation. Support for different fonts also exists; in certain cases this feature greatly
simplifies tasks at hand.
The ability to add animated textures is another a
very useful feature. It allows us to create beautiful effects when developing menus and the like. Another serious advantage of ShiVa is the fact that it enables you
to add different resources such as music and textures
during run-time, into fully realized projects for certain
platforms with the help of several script lines.
Stepping back, we ought to outline some more general opportunities ShiVa 3D provides. As noted, tits
script language is Lua, which is a script with C-type and
is not unusual, and makes your work much easier and
more fluid overall. You won’t have to puzzle over learning its syntax as long as you are on of the 99% of developers experienced in Java or C+. Lua is a very simple,
codersky.com
laconic, and intuitively understandable language.
A brief guide is provided on ShiVa’s website in the
API section.
While creating the project for any platform, all scripts
you’ve developed will be converted into C++ code. This
secures their immediate performance and legibility.
Special wrappers with the wide set of functions that allow
you to call your script event agents are provided as well.
There are many wrappers, but in our experience the C
function could be utilized to call any scripts we required.
Importantly, both OpenGL - 1.0 and OpenGL 2.0
- are used in ShiVa 3D. While ShiVa itself doesn’t provide an opportunity to program shaders or program
on OpenGL, it controls their usage in in projects for
maximum optimization and in no way influences final
quality.
ShiVa’s API provides numerous advantages as well,
encapsulated via the following features
•
•
•
•
Microphone support.
Multitouch Support.
Support for working with accelerometers.
Functions to work with XML.
This is by no means a small bonus. It frees you from
needing to program on the iPhone as you are able to
build your application right in ShiVa, solve issues, and
9
resolve the problem of developing different interfaces
via scripts that work with the above mentioned hardware, namely multi-touch screens and accelerometers.
You can review a step-by-step example of how a
fully featured game was built using ShiVa 3D by visiting
http://www.stonetrip.com/developer/242-the-huntthe-making-of. The game itself is a casual 3D shooter
created more-so as a tool to raise awareness for the
ShiVa 3D engine than anything else. This game, titled
The Hunt, is also helpful to prospective developers
interested in using ShiVa 3D, as they can utilize completed portions of code used to make this game in their
own projects.
Conclusion
Overall, ShiVa API includes several categories of
lessons, such as lessons from developers and users.
A number of instructional videos on YouTube are available as well, and despite the fact that they last only 60
seconds each, contain plenty of useful information.
e, the basic version of ShiVa costs roughly 160
Euro, with a Pro version which costs 1500 Euro.
That said, a free version which inprints a travelling line
in the bottom part of your application explaining that
the app was developed by means of ShiVa Free is available as an economic alternative as well. Buying a full
license allows you to develop apps on the plenty of machines, ultimately producing the app in full.
ShiVa appeared relatively recently but has already
gained a considerable client base, including multiple
notable ones. Currently, there have been over nine
thousand applications developed via the use of ShiVa.
Listing 1: Sample of ocean dynamics
local hScene = application.
getCurrentUserScene ( )
local hObject = this.getObject ( )
local x, y, z = object.getTranslation
( hObject, object.kGlobalSpace )
-- Update the translation of the buoy,
according to the height of the ocean
at the buoy position
object.setTranslation( hObject, x,
scene.getOceanHeight ( hScene, x, z ),
z, object.kGlobalSpace )
-- Update the rotation of the buoy,
according to the normal of the ocean
at the buoy position
local nx, ny, nz = scene.
getOceanNormal ( hScene, x, z )
local rx = math.asin ( nx )
local rz = math.asin ( nz )
object.setRotation ( hObject, rx, 0,
-rz, object.kGlobalSpace )
Listing 2: Sample of camera swap
-- [...]
if ( nNum == 1 )
then
tag = "Flash1"
time = 0.8
end
-- [...]
Authors:
Anton Trubianov, iPhone developer, 2 years,
application.setCurrentUserActiveCamera
( cam )
Maxim Kershengolts, Team Lead, 6 years,
this.postEvent ( time, "onSetFlash",
nNum + 1 )
C/C++, Objective C, Shiva3D
C/C++, Objective C (both employed at
Intersog).
10
local cam = application.
getCurrentUserSceneTaggedObject ( tag
)
end
01/2012
Developing for iOS
using PhoneGap
Hello everybody! This is my first article in Codersky
Magazine, and I want to use this article to talk with you
about developing applications for iOS using the HTML
T
oday there are several platforms in the mobile
world and each one with a specific language, so
that there is a high cost to port the same application for all platforms, the high cost of development
projects ended up creating a barrier too great for small
businesses to take advantage of this environment that
grows exponentially each day.
However it is entirely possible you create an application using HTML as a programming language and run
it natively within the environment iOS. This condition is
valid for both, iPhone and iPad. To make this possible,
we use a framework called PhoneGap.
The PhoneGap provides a lot of resources in its API,
with it you will have access to: Accelerometer, Camera,
Capture, Compass Connection, Contacts, Device
Events, File, Geolocation, Media, Notification, Storage.
All this using just HTML + JavaScript for development.
If you are already familiar with the web environment,
you easily start using PhoneGap for mobile development.
Figure 1
12
01/2012
Developing for iOS using PhoneGap
Figure 2
Figure 3
codersky.com
13
Development
For this tutorial, you will needs to do two downloads. The first is XCode, available for download
from the Apple Store (http://developer.apple.com/
xcode/) and PhoneGap, available at the PhoneGap
website (http://phonegap.com/).
Figure 4
This tutorial assumes that you already have XCode
installed on your Mac, and that has the iOS SDK.
Once you download of PhoneGap through its
website, you must unzip the file and copy the directory iOS to your Mac. This directory contains a file
called PhoneGap-1.2.0.pkg. This file is an extension
Figure 5
Figure 6
14
01/2012
Developing for iOS using PhoneGap
Figure 7
to XCode, which will facilitate the creation of projects that will be distributed with PhoneGap.
After running the PhoneGap-1.2.0.pkg, you can
start your XCode and start creating a project for iOS
format PhoneGap-based Application, as the image
below:
After this step, you must define some options for
your project, as the name of your application and an
identifier. For the identifier, it is suggested that you
enter the domain of your company, in my case, I will
use the domain (in reverse) in my blog in Portuguese:
br.com.horochovec, and another identifier, in this
case, .phoneGap, as the image below:
After this stage, XCode will open your project,
enabling it to coding. Note that you do not need
any coding in Objective-C, and also do not need to
change anything in the settings generated by XCode
for our project.
codersky.com
Now, you must first run our project. For this, you
must select a platform that will build the project,
in my case, I’m opting for iPhone Simulator 5.0, and
run the project (click on “Run”). This operation will
be completed successfully, the build project do not
have errors, the emulator is started and the application will be installed, but when it is opened in the
simulator, an error will be displayed saying that the
file index. html was not found in the www folder.
This error occurs that is deliberate. What happens
is that when you create a project of type PhoneGap,
it does not automatically add this folder with this
content on your project. You must do this manually,
what happens is that the content is generated only
when you try to run your first project within the emulator. That is, you end up being “forced” to generate this error so that the content is generated by the
plugin’s PhoneGap.
After that, you can stop the emulator project
through the “Stop” button. After stopping the
project, you should go to the folder where your
15
project was created, in my case, it was created on
my Desktop. You will find a new folder was created,
called “www”.
This folder “www” should be added to your project. To do so, drag it into your project in XCode.
When you drop the folder “www” in the root folder
of your project, a confirmation screen will appear.
Select the “Create folder references for any added
folders” and click Finish.
Inside the folder “www”, we will find two files.
The first, the file index.html, has a small example
of an Alert. Basically the file is to import the file
PhoneGap-1.2.0.js and prints an Alert in a Listener
added on the event “deviceready”. The EventListener
method was added in onload () of <body> as image
below:
After these steps, just run your project again and
have the following response from the emulator:
In the next opportunity, I want to address a little more PhoneGap demonstrating some of their
specific APIs.
Until next time!
Stefan Horochovec
Stefan Horochovec is a Software Engineer,
founder of MediaGlobe
(http://www.mediaglobe.com.br),
a company specializing in the development
of RIAs and Mobile solutions.
([email protected])
Figure 8
16
01/2012
Why Should You Try Flex?
Develop multi-platform RIA and enterprise apps like never before!
Desktop, mobile and web development fast and easy with component
based model!
What is Flex?
Flex is a powerful application framework based on
Adobe ActionScript. It had changed a lot in the past
few years, so as the Adobe Flash Platform. Adobe had
recently donated Flex to the Apache Foundation, so the
roadmap is not in Adobe’s hands any more, but Flash
Builder will still be part of Adobe’s Creative Suite. In the
next few pages, I will reveal the future of Flash, introduce you to component based programming and the
awesome Flex SDK. A Flex project can be exported as
Adobe Flash (.swf) object, for a website, or as an Adobe
Integrated Runtime (.air) program, to run as application
on OS X, Windows, iOS, and Android.
But Flash is the devil’s tool, isn’t it?
Not a bit. The public media often criticize the Adobe
Flash Platform, some of them already talking about a
funeral, and how HTML5 is winning the war. Obsequies
are always sad, especially one who is to be buried is
alive. Why am I saying this? Flash had never aimed to
replace HTML, but to make the web better, inspire, and
help prototyping. Flash is the innovation. A few years
ago, if you saw an animated menu on a website, you
knew it must be Flash. Then it became a standard with
JavaScript and HTML. Flash was used to develop many
cool products, like video players, and so on, which are
implemented now in HTML5. But that is no problem
for the Flash community, because there are many areas
where Flash still excels HTML5, like massive 3D support.
The key is to know when to use Flash and when to use
HTML. Unfortunately people are thrilled with the canvas tag of HTML5 more than what should really matter. For example the local storage tag. Imagine, if Gmail
would only download the application when it updates,
and would only download the new letters. It would be
faster, and available offline.
I’m sure, you think something like this: “yes, you’ve
got a point, but Flash is slow”. That’s because the classic
Flash is a designer tool. And designers sadly think that
you want to see the banner they’re working on shiny,
18
with lots of bitmap filters. If you ever used Photoshop,
you know that applying a Filter takes a few seconds.
These ‚clever’ designers apply multiple filters to a banner, so Flash Player has a hard time calculating all the
filters in runtime, for every frame, meaning 24 times a
second. It sure uses a lot of CPU. If somebody would
put an endless loop in a .Net program, I didn’t blame
Microsoft, for the slowness of .Net, but the programmer for being stupid.
Did you know, that when Prezi started to make the
iOS version, they tried it with HTML5, but it was so
slow, that in the end they rather made it with openGL?
Now think of the good stuff made with Flash: prezi.
com, YouTube, logmein, join, me, tweetdeck, Google
Analytics, Photoshop Touch, Picknick, games, showcases, websites, and so on.
The future of Flash
Well, I don’t want to be an oracle, but in my opinion
Flash is here to stay for years. Currently Flash is available on 99% of internet enabled desktop computers,
and on all of the medium and high category Android
devices, and with AIR you can package for iOS as well.
Yes, Flash on iOS is not a myth, the best known example is the AppStore #1 paid in December: Machinarium.
HTML5’s feature list is now closed, but Flash is improving with every new version. With Flash Player 11’s
3D API, you can run Unreal Engine in the browser, or
even on iOS with Adobe AIR. This will cause a new golden age for Flash games.
If you write a Flash program, you can code once, and
deploy it to Android, iOS, Mac, Win, Linux, and with
a bit of modification, you can target the classic Flash
Player in any browser. The sharedboard.net app I wrote
is complied from one program project to all platforms.
Flash will still be the default video player on the
web, because the browsers couldn’t agree on a codec,
01/2012
Why Should You Try Flex?
so now half of them support WebM, and the others
H.264, and for example Safari on Windows supports
none. Flash supports both. Serving Flash videos are
also easier on the servers. The other reason for it, is that
you can’t full-screen the HTML5 videos, only if you fullscreen the browser as well.
The other proof of Flash will be alive, is that it can
be exported to HTML5. Both Adobe and Google developed a tool, to convert swf files to HTML5. With Adobe’s
Wallaby, you can convert animations to HTML5 canvas
+ JavaScript animations, and the instance names will
remain the same, making it easy to code afterwards.
With Google’s Swiffy you can convert ActionScript 2 as
well to HTML5+JavaScript.
Flex Rocks!
Flex is an SDK, similar to .Net, and Qt. It is the Flash
in the coder’s hands. A Flex project can target Flash
Player and Adobe AIR as well, therefore you can run a
project on Android, iOS, BBX, Windows, Mac and Linux.
Sadly Bada and Windows Phone stands out, but it’s still
a massive target area, and saves a lot of rewriting code.
Flex stands of the open source framework, what
stands of components, ActionScript 3 libraries, and
MXML coding language. The MXML is a declarative user-interface definition language, what is used to define
components’ views. The business logic of a component
can be defined in ActionScript, within the <fx:Script>
tag, of course within CDATA section, to ensure the XML’s
validity. Flex also stands of the SDK, what includes the
compiler, and the debugger, what is also open-source
since it’s become an Apache program. A framework is
powerful with a good environment, and that is what
Flash Builder is for. Flash Builder still remains commercial, and in hands of Adobe. Flash Builder helps coding,
monitors network, has emulators, and on-device, interactive debuggers. The Builder is an Eclipse-based program, and also has a visual design interface, data access
wizards (which are really impressive), and memory and
performance profiles (only in premium version).
Flex is a coder-friendly developer environment. You
don’t even need to close lines with semicolons (;) in
most cases, you can have in-line functions and definitions, local variables and all the goodies are allowed.
Since Flash Builder is an Eclipse based environment, you
can of course use the code-completion to get you code
faster, and many plug-ins, such as Perforce, to get you
the most productive environment you’ve ever worked
with. Both Flash Builder and Flex is updated and developed continuously, making the framework always upto-date keeping the pace with the technology.
The debugging is very easy with Flex and Flash
Builder. With the trace() method you can easily write
debug strings to the console, and if you need serious
codersky.com
debugging, the Eclipse-based debugger allows stepby-step debugging as expected, and the variable
browser is perfect for finding what you need. If an array
has thousands of items in it, it will group them for you
for easier access. Furthermore, the next version of Flash
Builder will support reverse debugging. This means
two things: if you click a variable in debug mode, you
can see its history, the changes it went through, and
the code lines what caused them. The other feature will
allow not only to step forward a line, but to step backwards, even before the breakpoint! This is a huge thing,
it will save lots of engineering hours, so working with
Flex will pay off in time and money.
All in all, it’s a modern, high-level framework, most
suitable for RIA (rich internet application) development, and also the quickest solution for business application development.
Component based programming
Nowadays you mostly use MVC programming architecture, and you can use Flex with MVC as well, but
Flex’s power comes out, when you start programming
in Component/Module based architecture. What does
that mean? Basically, the Model and the View are put
together in a component. A component has attributes,
functions, and visuals as well. A component can be a
whole program, a window, or even a button or a text
box. Components stand of more, smaller components.
By default, every component in Flex has a data attribute (it can be any type of object), and by convention,
it should describe everything in the model, therefore
in the view. For example, if I’m designing a video player
module, the data object will be the video’s URL, or the
video file itself. The view will be some buttons, and the
video; the model will be the state of the video. There
can be also public functions, like play() and pause(), etc.
This approach saves time, and it is easier to develop.
Furthermore, you can reuse components in other products far more likely, because a component is dependent on only one variable (which can be an instance of
a very big class as well).
Flash Builder gives you the opportunity to edit
the component in a view-based editor as well as the
code itself.
What makes Flex very useful is the data binding, and
item renderers. With Databinding you can connect a
variable to a component, for example you can bind the
message variable to a text-input. If the message changes, the text-input will also change, and will show the
new message from them. What is even more fantastic,
is the two-way databinding. If you bind the same example than before, but in two-way, the variable will follow
the changes made in the text-input as well. Another
example, if you bind an array of variable’s, which has
19
data and text attributes, for a list, you can use the text
attributes to display in the list, and use the data, when
an event occurred.
Item renders are also exciting stuff. If you use a list
or a DataGrid (table) you can specify the rendering
of the rows and cells. This means, you can fill a table,
and render the needed cells as components, even with
ActionScript in them. For example, if you create a list
of tweets, for a Twitter application, you pass the item’s
data as the whole tweet node of the API (with not only
the text, but the link of pictures, profile name, etc.) In it,
you can make the item renderer to display the avatar
from the image’s url, and the tweet itself in text, and
add custom events to the tweets.
24 FPS out of the box. It may only be my opinion,
but I think the 24 frames per second programming will
become a standard in years. If your application has a
tween, or a video in it, or the data is changing constantly, it should be shown at 24 frames per second, because
the less seems rend, but the more will not make a difference in user experience, but take more processing
time. Flex is 24 fps and has double buffering by default. Thanks to the Flash grounds, it handles the frame
changes very efficiently. Only redraws when needed,
and only, where needed. If you make lots of changes
between two frames, the next frame will only show the
Listing 1: Example of a flex component
<?xml version=”1.0” encoding=”utf-8”?>
<s:Panel xmlns:fx=”http://ns.adobe.com/
mxml/2009”
xmlns:s=”library://ns.adobe.com/flex/spark”
width=”300” height=”95”
backgroundColor=”0x464646” title=”chat
sending panel”>
<fx:Script>
<![CDATA[
import mx.core.FlexGlobals
import mx.events.FlexEvent
import mx.managers.PopUpManager
protected function chatSend_clickHan
dler(event:MouseEvent):void { FlexGlobals.topLevelApplication.
sendChatMessage(chatInput.text)
}
]]>
</fx:Script>
<s:TextInput id=”chatInput” left=”10”
right=”77” top=”10” bottom=”10”/>
<s:Button id=”chatSend” right=”10” top=”10”
bottom=”10” width=”59” label=”send”
click=”chatSend_clickHandler(event)”/>
</s:Panel>
20
latest one, saving lots of processing time. If you look at
other applications, they are likely to tween with all of
the cpu’s and gpu’s power, leading to 60 fps’s, what are
unnecessary in most cases. You may think, that if nothing changes, displaying 24 fps is the processing overhead, but for one, you can control that within code, and
for the other - as I said – it is optimized, and well made
enough not to make noticeable overhead (Listing 1).
This is the chat window from my sharedboard.net
application. I’ve underlined what I had to fill in while
writing the component. The others was generated by
the view-based editor.
The component describes a text-input, and a button, and a function called with the text-input’s value,
when the keyboard’s enter or the button is hit. The id of
a component is the variable’s (instance’s) name.
Mobile programming simplified
If you create a mobile application with Flex, you only
have to write the code once, and deploy it on the major platforms. You can simulate devices on the desktop,
as well as try the app on a connected device. You can
develop iOS apps under Windows (unfortunately to debug on device, you need a Mac). Sadly not all Android
devices are capable of AIR, but the medium and highend phones will have no problem running your app.
The others will struggle with running the phone app itself. (Not kidding, I have a low end Android device, and
sometimes have to wait minutes before I can call anybody.) All in all, this means that you don’t have to write
the same code in Objective-C and Java, only in Flex. If
Flex somehow doesn’t satisfy your needs, you can create and call native extensions as well, so you only have
to write these platform specifically.
Also, you can reuse the majority of the mobile program’s code for a desktop application as well, you will
only need to rewrite the view specific components.
If you create a Flex mobile component, the SDK’s default components will translate into the mobile, touch
optimized version, so a list will scroll on swipe, and a
TextInput will bring up the keyboard, and so on. It really works like it should.
A Flex mobile project helps you with the development as well. You can choose to create a tabbed, or a
view-based application besides the classic project. The
tab-based adds a tab bar – like on iOS- to the bottom
of the program, and the view-based project adds you a
view navigator stack. It is a very cool feature, if you enter a new view, you push() it in the viewstack, to be displayed, and if you want to return to the previous screen,
you just pop() the screen you don’t need anymore. The
Android’s native menu is not part of the SDK, but you
can use lots one of the templates on the Internet.
01/2012
Why Should You Try Flex?
By default, the applications will look like a Flex application, and none like a native app on the phone. You
can make your application like native with native calls,
and also with E-skimo.com, a 3rd party library providing native control patterns to Flex.
Flex is open-source
Flex has been open-source since version 3, and this
open-source does not only mean that you can see the
code. It means, that anyone can contribute. In fact,
Adobe had proposed Flex to the Apache foundation
in December, and Apache accepted it to its incubator
program. The roadmap won’t depend on the profit of
a company, but only on the needs of the developers.
Although Flex is now Apache Flex, it still depends on
Adobe Flash Player and AIR, and Adobe will still be contributing and working on Flex, and Adobe Flash Builder
will still be the best tool to develop Flex.
Real life examples
The first example is a simple the chat window from
my sharedboard.net application. I’ve underlined what I
had to fill in while writing the component. The others
was generated by the view-based editor.
The component describes a text-input, and a button, and a function called with the text-input’s value,
when the keyboard’s enter or the button is hit. The id
of a component is the variable’s (instance’s) name. The
output will look like Figure 1
The second example will be a bit more complicated.
It will allow you to search YouTube, and display the results thumbs and ratings as well. If you will click on a result, it will open it in your browser. Of course you could
display it in the application as well, but it is a good
example for now. The output of the example will be
something like Image 2. Please keep in mind, that this
article is not a tutorial, but I wanted to show you a bigger example. Don’t be afraid of the length of the code,
because more than half of it is generated automatically,
and other part is edited in the view-based editor, and
the Eclipse based environment also helps a lot, so all
together the code you actually write is really short.
In Listing 2, you can see the main class. The resultVideos variable is applied with the [Bindable] tag, because we will bind it to a chart. The onResult function
catches YouTube’s JSON based search API (that’s why it
is a bit messy), and create a variable for all the results, to
store it in the resultVideos collection. You can see the
VideoDescriptor class in Listing 3. If the API connection
failed, the onFault function gets called, what displays
an error popup to notify users. The button1_clickhandler gets called when we click on the button. It starts
the search based on what is written in the textfield.
The dataGrid datagrid1_selectionChangeHandler gets
called when we click on a row.
After the script tag, you see a declarations tag. It is
used for declaring services, like the HTTPService in this
example. The query of the service will be the text of
the text-input, and we sign up for the result and fault
events here. This is the call for the YouTube API.
After the end of the declarations, I’ve placed the visual components, like the text-input, the search button, and the chart, where the results will be displayed.
In the data grid, (what is the chart), we have to define
the dataProvider (the resultVideos collection), and the
columns. Each column will display the attribute of the
data described with the dataField tag, and by default it
will show it as a Label, but I’ve changed that with itemrenderer classes, described in Listings 4-6. So instead of
displaying the thumbnail’s url as string, the thumbRenderer (Listing 4) will show an image instead. (Figure 2)
Listing 2: Youtube searcher
Figure 1: The ouptut of Listing 1
Figure 2: The ouptut of Listing 2
codersky.com
<?xml version=”1.0” encoding=”utf-8”?>
<s:WindowedApplication xmlns:fx=”http://ns.adobe.
com/mxml/2009”
xmlns:s=”library://ns.adobe.com/
flex/spark”
xmlns:mx=”library://ns.adobe.com/
flex/mx”>
<fx:Script>
<![CDATA[
import com.adobe.
serialization.json.JSONDecoder;
import mx.collections.
ArrayCollection;
import mx.controls.Alert;
import mx.core.FlexGlobals;
import mx.managers.
CursorManager;
import mx.rpc.events.*;
21
import spark.events.GridSelectionEvent;
[Bindable]
private var resultVideos:ArrayCollection = new ArrayCollection()
protected function onResult(event:ResultEvent):void {
var feed:JSONDecoder = new JSONDecoder(event.result as String, true)
var feedres:Object=feed.getValue().feed;
var vids:Array = new Array(feedres.entry);
for ( var i:uint=0;i<vids[0].length;i++ ) {
var desc:VideoDescriptor=new VideoDescriptor;
desc.title=vids[0][i].title.$t
desc.lengthInSeconds=vids[0][i].media$group.yt$duration.seconds
desc.ratingAvg=vids[0][i].gd$rating.average
desc.theid=vids[0][i].id.$t
desc.url=vids[0][i].link[0].href
desc.thumbUrl=vids[0][i].media$group.media$thumbnail[0].url
desc.playerUrl=vids[0][i].playerURL
resultVideos.addItem(desc)
}
}
protected function onFault(event:FaultEvent):void {
Alert.show(„Fault: „ + event.fault.faultString,”Fault”);
}
protected function button1_clickHandler(event:Event):void {
youTubeService.send()
}
protected function datagrid1_selectionChangeHandler(event:GridSelectionEvent):void
{
navigateToURL(new URLRequest(dataGrid.selectedItem.url));
}
]]>
</fx:Script>
<fx:Declarations>
<s:HTTPService id=”youTubeService” url=”http://gdata.youtube.com/feeds/api/videos”
resultFormat=”text” result=”onResult(event)”
fault=”onFault(event)”>
<s:request>
<q>{searchTxt.text}</q>
<alt>json</alt>
</s:request>
</s:HTTPService>
</fx:Declarations>
<s:DataGrid id=”dataGrid” selectionChange=”datagrid1_selectionChangeHandler(event)”
left=”10” right=”10” top=”40” bottom=”10” requestedRowCount=”4”
dataProvider=”{resultVideos}” >
<s:columns>
<s:ArrayList>
<s:GridColumn itemRenderer=”thumbRenderer” dataField=”thumbUrl”
headerText=”Thumb”/>
<s:GridColumn dataField=”title” headerText=”Title”/>
<s:GridColumn itemRenderer=”lengthRenderer”
dataField=”lengthInSeconds” headerText=”Length”/>
<s:GridColumn itemRenderer=”ratingRenderer”
dataField=”ratingAvg” headerText=”Rating”/>
</s:ArrayList>
22
01/2012
Why Should You Try Flex?
</s:columns>
</s:DataGrid>
<s:TextInput enter=”button1_clickHandler(event)” id=”searchTxt” left=”10” right=”88”
top=”10”/>
<s:Button click=”button1_clickHandler(event)” right=”10” top=”10” label=”Szimat”/>
</s:WindowedApplication>
Listing 3: The VideoDescriptor class: helper class to store search results as objects.
package
{
public class VideoDescriptor
{
public var title:String;
public var lengthInSeconds:Number;
public var ratingAvg:Number;
public var url:String;
public var thumbUrl:String;
public var playerUrl:String;
public var theid:String;
public function VideoDescriptor() {
}
}
}
Listing 4: ThumbRenderer class: renders images from the input url.
<?xml version=”1.0” encoding=”utf-8”?>
<s:GridItemRenderer xmlns:fx=”http://ns.adobe.com/mxml/2009”
xmlns:s=”library://ns.adobe.com/flex/spark”
xmlns:mx=”library://ns.adobe.com/flex/mx”
clipAndEnableScrolling=”true”>
<fx:Script>
<![CDATA[
override public function prepare(hasBeenRecycled:Boolean):void {
img.source = data[column.dataField]
}
]]>
</fx:Script>
<s:Image id=”img” height=”{480/4}” width=”{360/4}” />
</s:GridItemRenderer>
Listing 5: ratingRenderer class: renders filled stars according to the rating.
<?xml version=”1.0” encoding=”utf-8”?>
<s:GridItemRenderer xmlns:fx=”http://ns.adobe.com/mxml/2009”
xmlns:s=”library://ns.adobe.com/flex/spark”
xmlns:mx=”library://ns.adobe.com/flex/mx”
clipAndEnableScrolling=”true”>
<fx:Script>
<![CDATA[
protected var rating:Number;
override public function prepare(hasBeenRecycled:Boolean):void {
rating = data[column.dataField]
if(rating<4.5 && rating>4) img5.source=”ico/star_half.png”
if(rating<4){
if(rating>3.5) img4.source=”ico/star_half.png”
img5.source=”ico/star_empty.png”
}
if(rating<3){
codersky.com
23
if(rating>2.5) img3.source=”ico/star_half.png”
img4.source=”ico/star_empty.png”
}
if(rating<2){
if(rating>1.5) img2.source=”ico/star_half.png”
img3.source=”ico/star_empty.png”
}
if(rating<1)
img2.source=”ico/star_empty.png”
}
]]>
</fx:Script>
<mx:HBox>
<s:Image id=”img1” source=”ico/star.png” />
<s:Image id=”img2” source=”ico/star.png” />
<s:Image id=”img3” source=”ico/star.png” />
<s:Image id=”img4” source=”ico/star.png” />
<s:Image id=”img5” source=”ico/star.png” />
</mx:HBox>
</s:GridItemRenderer>
Listing 6: The lengthRenderer class renders the number to time formatted string.
<?xml version=”1.0” encoding=”utf-8”?>
<s:GridItemRenderer xmlns:fx=”http://ns.adobe.com/mxml/2009”
xmlns:s=”library://ns.adobe.com/flex/spark”
xmlns:mx=”library://ns.adobe.com/flex/mx”
clipAndEnableScrolling=”true”>
<fx:Script>
<![CDATA[
override public function prepare(hasBeenRecycled:Boolean):void {
var mp:int=data[column.dataField]
var a:int=mp/60, b:int=mp-int(mp/60)*60
var bele:String=””
if(b<10) bele=”0”
lblData.text = a+”:”+bele+b
}
]]>
</fx:Script>
<s:Label id=”lblData” top=”9” left=”7”/>
</s:GridItemRenderer>
Where to go from here?
If I have successfully got your interest in Flex, you
should start with downloading Flash Builder 60 day trial
from adobe.com. If you are a student, or unemployed,
to get a free key, go to freeriatools.adobe.com! While
it downloads, check out Lee Brimelow’s Introduction
to Flex series at http://gotoandlearn.com/, and check
out the free ebook Getting Started with Flex 3 ( http://
www.adobe.com/content/dam/Adobe/en/devnet/
flex/pdfs/getting_started_with_Flex3.pdf ). After that,
go ahead, and connect an Android or iOS device, to see
mobile development in action. If you don’t believe Air
is running on iOS, try http://flex.org/flexgame/ ! The
most interesting things are item-renderers and databinding, what you should definitely learn from Flex.
Don’t be afraid to google, if you need help, and you’ll
soon understand why Flex is awesome!
24
Gábor Csomák
22 years old, Student at Budapest University of
Technology and Economics. Initial Committer
for Apache Flex. Works for LogMeIn, on the join.
Me project. He is also the developer of sharedboard.net, a multiplatform instant draw-messaging client. In his free-time he plays rugby,
and listens to ska music.
01/2012
Mobile Location Focused
Applications
Life is never boring as a mobile application developer. Looking back at 2011,
there were both opportunities and challenges. The maturing of HTML5,
release of cross platform development solutions such as Adobe Flex Mobile,
and opening of the Android market have dramatically improved the life
of mobile developers.
T
his article will discuss location focused mobile
apps, or applications which take advantage of
the built in GPS on most mobile devices. In particular we will consider location based services (LBS)
and geographic information systems (GIS).
The Mobile Market in 2011
The year started with the dominance of the Apple
iOS mobile platform. This maintained the demand
for Objective-C developers; the native language of
iOS. The steady growth in popularity of devices running the Android platform over the year, saw more
demand for Java mobile apps. Apple continued to
throw their weight around, maintaining their stance
on preventing third party plug-ins to be included
in any iOS browser. Effectively stymieing Adobe’s
Flash Player and Microsoft’s Silverlight. The growth
of mobile cross browser solutions has been one of
the biggest changes this year. For installed applications, Adobe put their weight behind Flex Mobile.
On the Web HTML5/Javascript seems the emerging
favored choice. Indeed at their end of the year MAX
show, Adobe hinted at refocusing the company (one
can speculate in part due to the Apple plug-in decision). They even went as far as to buy PhoneGap, a
technology to convert a web HTML5 mobile app to
one which is installable. Then to maintain the open
source status of the product, under the Apache
license. We are a long way from seeing the end of
PC’s, but should that day come so ends the Flash
Player. Some of the Adobes end of the year decisions
makes one wonder whether they have seen the
writing on the wall.
26
Mobile Application Developer
Challenges in 2011
There were plenty of challenges for mobile developers in 2011, these included:
1. Project issues – changes in spec/scope
creep, incomplete specs, and app
complexity.
2. Distribution & update issues – the challenges of multiple markets (Apple, Android,
Blackberry), submission policy too long
(particularly Apple’s), painful certificate
process (again particularly applicable to
Apple), expensive and long distribution.
3. Other issues – security, back-end integration, mobile web is a different beast to PC
web must design accordingly (UI/work
flow).
Debate continued over the benefits of native installed apps, such as Objective-C, over the newer
hybrid cross platform apps. Adobe recently released
Native Extensions, to help hybrid Flex Mobile apps
bridge this gap. But overall we ended 2011 with native installed apps dominating the apps stores.
Those developers involved in B-to-C mobile development were busy in 2011. Social networking
and check-in type apps were very popular. On the
B-to-B side, spending was less. As in the early days of
the Internet, business adoption has been slow. This
should change in 2012.
01/2012
Mobile Location Focused Applications
Geo-location and Mobile Apps
With GPS now so common on mobile devices, so
called geo-location (the identification of the realworld geographic location of an object) can be used
to provide a slew of new services. Mobile users can
now ask what or who is near them. They can update,
edit and collect data at a specific location. These new
mobile applications can provide answers beyond
what is currently available on a PC. Key areas include:
• Visualization – Users can now use mobile map
viewers to see their surrounding area. Imagine a
civil engineer on site, wondering where the underground pipes run. He can now overlay a pipe
layer over a base map and see exactly what is
under his feet. One wonders about the future of
companies like Tom Tom when users can now use
apps on any mobile device to plan travel, and get
updated info on traffic and routing.
• Query and Search – One can conduct simple or
complex spatial queries and searches relating to
the current location. In the field, forest managers
can search for trees by species, and relate these
results to soil type and slope.
• Data Collection – Many workers need to record
information at a particular location. Today much
of this is done with pen and paper. This will soon
change; resulting in greater accuracy, saved time
and richer data. Surveyors in the field can now
use a mobile app to gather data at a location, including text, images, voice even video.
• Updating and Editing – Often data sources need
updating. Again using geo-location, mobile apps
will become indispensable tools. Agricultural
workers in California, for example, can now update a central server, maybe a GIS, using their
mobile with new crop type, acreage planted, and
pest control in real time.
• Offline & Online – There remain many areas where
Wi-Fi coverage is limited. Mobiles can now store
much data locally.
• Management and Coordination – Knowing workers locations, optimizing their travel, viewing data
gathered in real time, coordinating their activity
in the field will lead to big savings and increased
efficiency in many industries.
To illustrate how mobile apps can take advantage
of geo-location, we will look at its potential use in
the field of politics, and within the facility management industry.
codersky.com
Mobile Location Focused Apps in Politics
Politics revolves around organization. The increasing popularity of mobiles; iPhones, IP Ads and
Android devices will revolutionize political organization and campaigning. It is now possible to provide field workers with mobile applications which
will allow better organization and coordination of
campaigns. Further, these applications will let users
dynamically collect and upload data from the field.
Campaigns and unit committees will be able to access this centralized data in real time. Improving
both the speed and the accuracy of the decision
making process. Data collection and access is one
thing, visualizing this data is quite another. The ability to search, query and tabulate this data is huge.
But maps provide a very intuitive way to view this
type of data.
Mobile Political Campaigning & Voter
Data Management
Much in the world of political campaigning is centered on canvassing, phone banks and walk lists.
Walk lists are for campaign field workers, essentially
their voter contact list. Mobile applications running
on smartphones can provide canvassers their walk
list. Maybe on maps as optimized, or most efficient,
routes. In addition, canvassers can interview voters
and capture responses dynamically on their smartphones; tie the data to that location and upload it to
a central database.
Historically, spreadsheets have been the mainstay
of political campaign organizing. Those days will
soon be gone. New software applications will become available for use on traditional PC’s and mobile devices which will tap into the central campaign
data source and allow questions to be answered or
viewed quickly; the concentrations of likely voters or
supporters for more efficient targeting, identifying
locations for events, planning and moving collateral, generating and viewing walk-lists, and plotting
sign locations. Interactive maps will prove important
in visualizing much of this data. Field Directors will
be able to almost instantly see the progress of sign
placement operations, volunteer recruitment, and
literature distribution. They will also be able to see
the location of field workers while they are interacting with voters and view responses in real time.
Mobile GIS Maps & Politics
Mobile devices, as we have said, will be increasingly more important to political campaigns.
Viewing maps, boundaries, and voter locations on a
smartphone or mobile tablet will be crucial to field
workers. As will recording data while in the field. We
have already mentioned a few, but we can imagine a
27
range of different questions we want answered and
displayed on a map:
• Show me an optimized route of my walk list
Systems (GIS) offer tools which will help manage,
organize, search, query and display campaign data.
MapQuest offers both PC focused and mobile optimized tools ideal for political campaigns.
• Display registered voter data on a map by definable region
The Use of GIS in Politics
• Search and display by a set of criteria - Show all
2008 Primary Voters
• Search, filter and display - Show 2008 Primary
Voters who voted in the last 3 elections or show
only hard Democratic voters
• Spatial query - Selecting a group of voters, by
drawing a square on the map, will provide a voter
summary. Maybe the number of voters selected,
average distance between voters, total number
of Republicans or Conservatives in this group,
and number of perfect voters
There are many options and tools which can be
used for maps in politics. Geographic Information
We have discussed the querying and display of
campaign data. Often, at least in a GIS, this would
involve either shapefiles or GIS endpoints. These
are both spatial data sources which contain features
(voters and their point location), and attributes (a
voter party allegiance for example). Rendering or
displaying a shapefile or GIS endpoint adds a layer to
the map. Thus we can add points to the map which
represent voters. Click on a point and the attributes
of that voter are displayed. Querying is also possible
against these spatial data sources; show me all hard
Republican voters in a certain postcode.
This discussion can be extended to data editing
and updating. Thus it is quite possible to update our
spatial data sources using a mobile device. Maybe
a voter has switched allegiances and is no longer
Figure 1: A cross platform mobile ArcGIS viewer
28
01/2012
Mobile Location Focused Applications
Existing Political Software Systems and
the New Mobile Paradigm
Existing, let’s call them legacy, political software
systems are slow and clunky. Mapping capabilities
are limited. As already mentioned, decisions are
still often made with the help of spreadsheets. Field
workers rely on printed sheets, phones and notepads for organization and data gathering. In short,
current software applications used for political campaigns are inadequate.
Current systems can be dramatically improved.
Centralising data and extending, maybe rewriting,
existing software applications to allow easier management, querying and visualisation of this data will
be crucial. Mobile applications in politics will provide
both access to the data while in the field (no more
pens, papers and printed maps), and the ability to
edit and add new data. Mobiles provide up to date
information dynamically. Maybe, querying by voter
attributes using a fixed distance from your current
location. Canvassing could then be planned around
these dynamic queries.
Mobile Politics Application
Development
Figure 2: Accessing basemaps and shapefiles on
an offline smartphone
a democrat; update that voters attributes on your
smartphone which updates the central data store.
Maybe a new area of homes has been built and voters here need to add to the data store. Again this
can all be done by field workers using their mobile
devices.
ESRI is the largest provider of GIS software in the
world. Their flagship ArcGIS product offers a complete GIS solution, both for desktop and networked
GIS. Mobile ArcGIS has become increasingly important. Figure 1 shows GeoMobile for ArcGIS, a sample map viewer available for free in the app stores,
which demonstrates some of the mobile functionality of ArcGIS.
Open source mobile GIS options are also available. Openlayers, OpenScales and GeoServer are
excellent examples. Finally offline mobile use may
be required, in areas where Wi-Fi is not available. We
can now store basemap tiles, routes and field data
on the devices itself (Figure 2).
codersky.com
So how would you build such a system? There are
a number of proprietary and open source content
management and constituent relationship management solutions. Joomla and CivicCRM are two
excellent open source options. These can serve as
the central system. PC based work can utilise the
modules available in these types of frameworks. The
key mobile and mapping portions of this picture will
need custom development. These would be integrated into the central system. So whether it be leveraging the power of MapQuest or a full GIS, these
could be integrated into the PC based system, and
custom built for mobile.
Mobile Location Focused Apps for
Mobile Workers
Another example of a location focused mobile
app is the check-in. This has become very popular
in marketing and advertising. To date this has been
a consumer focused phenomena. But enterprises
are now looking at the potential use of the check-in.
Facility management companies, surveyors, multilevel marketing, insurance claims, pipeline companies, water utilities; all have field workers who would
benefit from this type of mobile application. Not
only checking in to work sites, but keeping a record
of the work done; notes, pictures, video, even voice
records. Figure 3 shows the home screen of a mobile
application built using the new MapQuest Flash mobile API targeting the facilities management sector.
29
Figure 3: Enterprise Mobile Check-In Application
Home Screen
Figure 5: Directions and Local Search
Not only does the application include check-in
and data collection, but routing, local search and a
geo-coder. Functionality of the application is tied to
either a point of interest or GPS location. The application allows a field worker to start the day by viewing an optimized route of the day’s calls. On arrival at
each call, the user can use the check-in/out screen to
register job location and provide data relating to the
call, see Figure 4.
Related Information
Check-In Application Demo
http://www.youtube.com/watch?v=L5R
Uh5ZcxQ8&feature=player_embedded
Free GeoMobile for ArcGIS app
http://www.webmapsolutions.com/wpadmin/post.php?action=edit&post=3389
Mobile Data Collection
http://www.webmapsolutions.com/ipadgis-android-gis-mobile-data-collection
Figure 4: Check-In/Out Screen
30
01/2012
The local search and geocoder provide additional
tools for discovering who or what is nearby and address search capabilities respectively (Figure 5).
Using the tools provided by MapQuest, these
types of applications have many potential mobile
worker applications.
Summary
There are exciting times ahead for mobile developers. We may be on the verge of a revolution as
impactful as the Internet. Mobiles have the potential
to change both the way we work and the way we
live. Geo-location will be at the core of many of the
new mobile apps released. Consumer focused apps
including those for social networking, check-in, and
coupons continue to be very popular. Enterprises are
now looking at mobile adoption. Companies and individuals providing mobile software solutions have
a bright future.
Viva la revolution!
Matt Sheehan
Matt Sheehan is a Principal and Senior
Developer at WebMapSolutions. The company is focused on mobile application development, with a particular emphasis on location
based services (LBS), mobile Geographic
Information Systems (GIS) and maps.
Feel free to contact Matt:
[email protected]
Games as Products and Services
by Aleksander Lyskovsky
Chairman of the Board of Directors, Alawar Entertainment
The history of games
The first electronic games appeared in the middle of
the 1960s. The major games for the consoles of this time
period were simple arcades with short game sessions.
In 1966, Sega created one of the first electronic games
entitled Periscope. A few years later, the first modernday game consoles emerged. In 1983, the first game
console for home use, Nintendo Family Computer, or
Nintendo Entertainment System, was released. The low
performance of consoles, coupled with low cartridge
capacities determined the genres of possible games.
Simple, short arcades, similar to those used in earlier
periods were the only options for games due to the
lack of available technology. Updates were not supported on either the games or the consoles. After an
electronic game or cartridge was released, it was nearly
impossible to introduce any changes. In the event of
a serious flaw or error, the withdrawal of the series as
a whole was necessary, and would have serious repercussions for the studio releasing the title.
The potential to change a computer game after
it was published appeared in the 1970s. It is worth
Figure 1: Battle citygame screen shot
32
mentioning that the first games were mainly distributed by programmers and the game’s authors themselves
via computer magazines, such as Creative Computing,
in the form of the original code. Later on, map editors
and modifiers appeared that were sometimes delivered along with the boxed version. This contributed
to the longer lifespan of the game. In the 1990s, when
PCs began to appear in almost every household, CDs
ruled the industry. Since bugs and imperfect gameplay
caused the sales to decrease and withdrawing an entire series was a difficult prospect, developers began
creating patches and updates for players to download
from the official game sites. Unfortunately, not everything can be patched, so the publishers placed their
best on producing the perfect game. This meant that
they sought to minimize bugs from the very beginning.
They also sought to refine the game further, including its storyline, gameplay and overall concept. Even
though many publishers are not prepared to wait for
the desired perfection of a game (meaning when all
bugs have been fixed, etc.), the time spent on polishing
a game was and still is growing.
In 2001, casual games and the first examples of digital distribution appeared. While the term “casual” was
Figure 2: Duke Nukem Forever game
01/2012
Games as Products and Services
not yet familiar to those in the game development sector, the term “PC shareware” was. That was when the
digital distribution appeared on the developer sites,
which were used to sell these games. Even though it
may just have been a catalog of games and software,
the developer still controlled the hosting. He could
thus easily change the distribution as needed. The
“barrier” between users and developers became thin
as game creators and the end users started to communicate (Figure 2).
Portals then appeared, which united products from
various developers: BigFish, RealArcade and others. The
user-developer communication began to breakdown
helping to solidify this time frame as the “box” era. The
portals were interested in the quantity of games rather
than in expanding a game’s sales cycle. The business
model for portals could be summed up as the following: the user buys the game, plays it, forgets about
it and buys the next one. According to our stats, the
average casual games player buys 3 to 5 new games
per month, so new games must keep flowing, and all
marketing activity must aim to increase the number of
purchases and not to expand the time of his interest in
a particular product.
At the same time casual games were gaining traction, the Java Micro Edition platform, J2ME, appeared,
allowing the first fully featured games to appear on
mobile phones.
In 2002, the first phones supporting J2ME appeared.
For example, in Europe the Nokia 3410 and Siemens
M50 were released. In these early models, the J2ME
games were downloaded from portals via WAP; such
slow connection obviously did not allow for the downloading patches or updates, diminishing the ability for
publishers to keep extending the users engagement.
Online
Another reality developed alongside all of this: the
online reality. At first, its share was pretty small, but the
very technologies at its base could enchant users. A
sense of place within the global network, the invisible
presence of the game’s author who could add some
new and fascinating features to the game at anytime
lured the gamers en masse (Figure 3).
After all, the first online game experiments (text
adventures that started at the end of 70s), PC games
Figure 3: Farm Frenzy game screen shot
codersky.com
33
Figure 4: Quake 2 game screen shot
34
01/2012
Games as Products and Services
started to include a multiplayer mode via the local server (as in a computer club) or via dial-up. Even though
the CD game still could not be completely updated, the
game process now included one more important element: another player who could make the game more
fun (Figure 4).
The appearance of the first browser MMOs became
a major milestone in online development. In this variation, 99% of the game was on the developer’s side and
only 1% (the browser itself) – on the user’s side. The oldest browser MMO was Earth: 2025, developed in 1996,
but a subsequent and extremely popular such MMO
was the Utopia strategy game that appeared in 1999.
What enticed that many people to play a game with
such an extreme minimum of gameplay? All they were
equipped with was statistics and by pushing one key
a calculation would begin that then produced a short
message of “You won/lost”! The reason was and is still
the same: people like to feel the camaraderie and see
the unexpected changes in the game process, making the old familiar gameplay attractive once again. A
striking example of this type of genre is Mafia Wars. The
initial offering of the game contained no traditional
multiplayer component; it was implemented by virality.
The social networks format determined the genres and
ways of game consumption: 5 minutes a day (Figure 5).
The first fully featured client ММО was Ultima Online,
the alpha version of which was published on April 2,
1996. Since the game’s birth, 2 sequels, 10 add-ons and
4 clients have been published. An add-on is not just
a patch that changes part of the game. Such add-ons
provide new locations, characters, game and battle options, etc. The first add-on appeared a year after the final version release, in 1998. This constant enrichment
of the game world and gameplay has allowed the developers to retain the users’ interest in their game for
14 years already.
The cardinal change in online gaming was introduced by digital distribution. It became available for
large games too, as the average Internet connection
speed increased. The largest and most successful platform was Steam, developed by Valve, which accepted
other publishers’ products for distribution in 2005.
Once there, the user can download purchased games
from Steam servers using any computer supporting
their client. The fans of multiplayer hits could play
them on Steam supported servers that performed better than many amateur and even professional counterparts did.
Casual 2.0
Figure 5: Mafia Wars screen shot
Nowadays Internet is such an immanent part of our
life that it is no longer correct to divide games into online and offline. We should discuss hardcore and casual
gamers, though some projects erase this boundary.
[Since Alawar’s expertise lies in casual games] we can
speak upon the new casual games, leaving the hardcore realm for the corresponding specialists to discuss.
Casual 2.0 is not the casual that was meant earlier,
speaking of the casual era and the portals. Casual 2.0
incorporated the best of online and offline approaches.
First, the traditional PC casual downloadable provided short game sessions, simple tutorials and understandable gameplay, just like in good old arcade electronic games and consoles. Offline also contributed the
notion of achievements, offering up various trophies,
stars, coins and other ways to motivate the gamer.
Figure 6: Treasures of Montezuma game screen shot
codersky.com
Online provided casual 2.0 with fully featured digital
distribution implying product development and support along with the way of delivery. The presence of an
online connection also lead to the “socialization” of the
games. It is casual 2.0 (especially the mobile niche) that
revived the regular updates model, providing the “long
selling tail” for each game (Figure 6).
35
The casual 2.0 business lines include smartphone,
tablet, social network, console, MMO, as well as traditional PC casual downloadable content and future
PC casual games. Most of the casual market is growing now thanks in part to the mobile segment that
should reach 10 billion in 2013, according to analytics.
The social network segment has also increased the casual 2.0 market volume by approximately 3 billion, but
has slowed down recently. As for the classic PC casual
downloadable market, alas, the growth slowed down.
Thus, nowadays continuing with PC casual downloadable without porting the game to at least mobile
platforms seems to me, at the very least, strange. Yet
market changes should also force the developers to
change their approach to developing and supporting
products (Figure 7).
to port their products to other platforms. That is why,
for them, until now, entering new markets meant leaving the comfort zone and plunging into the unknown.
As a result, such a PC casual team would produce 2
HOPAs or 2 time managers per year. These two products are developed using the familiar slot system: the
team finishes one project and immediately turns to the
next one.
Developers
Work with a number of platforms. Port your successful PC titles to Mac, iOS, Android, social networks, MMO.
Surely enough, this requires a serious rethinking of the
whole game process, not just to port it to a new engine. This is why a team should invite new people that
are experienced in other realms. Let us examine the
experience of the most successful teams in the market
today: ZeptoLab, for example, incorporates ex-mobile
development experts; so too does Rovia; Game Insight
is made up of ex-MMO developers. In Alawar, we strive
to gather people who worked in J2ME development,
So who are our PC casual developers?
40% of them live and work in the big cities of Russia,
Ukraine and Belarus, but most likely not in Moscow.
Teams of 5-15 people cooperate with a publisher or
they use the advance payment from a distributor.
There is no strict division of roles, which means that the
whole team specializes in PC development and will not
hire specialists from the mobile or social niches in order
At the moment, most PC casual teams have trouble
growing. They still make good products, sell them for
a good price, but they have noticed that the games
no longer attract the interest they used to, meaning a
decrease in income. This is predictable as the market
has changed, and not all teams have managed to adapt
to the new reality and the new gamer needs. It is high
time to pay attention to the after-sales.
Figure 7: Shake Spears game screen shot
36
01/2012
Games as Products and Services
created social networks and MMOs. They continue to
do this now. We have united our efforts in order to create successful products that can be released to all platforms at once. Ideally, in the future, our user will not
choose a game for a specific device, but rather he will
pick a title that interests him, assured that the version
for his device has already been released.
Change the approach to development. The drawback of the slot system is that once the developer is
done with his tasks for one project, he must switch to
another project very quickly. I am convinced that the
project should have a team specifically dealing with
updates. The goal is to expand each project’s lifespan,
not chase after quantity. Moreover, in case of a successful project, perhaps the whole team should concentrate on supporting it even by means of putting the
release of new games on hold.
QA, QA and QA. Both hardcore and casual developers polish their products to perfection now. Those who
published games, say, for consoles, are aware of the importance of even the smallest of details relating to the
game’s quality. Therefore, the fossil developers should
better divide their projects into stages and monitor the
quality of each level in order not to have to deal with
a bunch of bugs the day prior to release. That’s right,
proper QA requires documentation and one must not
be lazy in doing so. Take heed of the deadlines, meet
them and discipline yourselves. Remember: bugcaused updates are of utmost importance to the developer and publisher. Users notice even the most minor of bugs. This will then lower the game’s ratings in
stores and causes negative feedback. The game’s quality and timely correction of bugs should be offered as
complimentary service to the gamer who downloaded
your product.
Do have a clean scheme of updates
before the release?
Of course, updating is not just about the bugs. It is
also about adding new features to retain your audience, such as new outfits for the characters, additional
locations, themed “gifts” for the holidays – anything
you can think of. Release is not the end of development; it is only half of the battle (and speaking of freemium, it’s only 20%)! The game should be updated in
order to retain the gamer. Increase monetization by
including new traffic retention tools and arranging the
sales promotions.
Advise? Analyze your feedback. Read comments,
count stars, draw download diagrams. Do not wait for
an email with acknowledgments or curses: register
with Twitter and Facebook, let your players communicate and leave feedback.
codersky.com
Portals
Suppose we have ideal developer teams. They create great games for many platforms, release updates
with new content regularly. How do they sell their wonderful games? How are PC casual portals doing?
As always, the games are flowing. A hit game’s popularity peak typically spans from 4 to 5 weeks, but this
is only true for the hits. The lifespan of the rest of the
games is even shorter. This is why distributor portals
continue to pursue lots of games at once. Such portals
do not support micro transactions and this is why only
premium versions of games are published there. All the
developers and publishers can do in these portals is to
allow the players to play a trial version of the game.
Updating is also a sad business since approval takes
too long. The great thing is that distributors perform
the testing and QA from their side. This takes 1 to 6
weeks of their precious time, but at least players may
rest assured that the quality of their downloaded
games has not suffered.
Leading distributors, such as Big Fish Games, Real
Arcade, Alawar and others have become interested in
MMOs and mobile games. They are experimenting with
various genres to find new audiences. Unfortunately,
this process is slow because it means leaving their comfort zone.
An ideal portal should be multiplatform and support the saving of the history of cross-platform portal
dialogs. Ideally, a portal should save the game’s progress regardless of the initial device used to play.. What
a player has achieved in a game on his Mac, should be
able to be accessed and continued on his iPad, all from
the same exact spot he left off..
Of course, all portals should support the freemium
distribution model. This game-selling model has already proved popular in mobile games, so it should
be implemented into PC casual downloadable! We can
experiment with our good old premium, too. For example, we can provide a free trial for 10 minutes every
day, so that a user who is not yet ready to pay can get
attached to the character and gameplay, eventually
reaching the conclusion to purchase the game. People
like free stuff. This allows us additional opportunities
in terms of initial contact. Later on people will buy
something in addition to the games they have already
tried and got to know. Alawar’s experience proves that
people not only want as much free content as possible,
but in certain cases are also ready to pay for special and
premium content. Fans are prepared to pay a lot for
such things as, i.e., a more expensive Collector’s Edition
of the title.
Players like communicating with each other, so portals should consider introducing various social services.
37
Let us recall the Steam’s experience of creating its own
gaming community; a large social network that people sometimes visit even more frequently than their
Facebook accounts. The players want to share their
achievements and opinions with their friends. The
MMO experience taught us that the most addictive
games are those that turn the gaming process into a
form of communication with new, virtual friends.
social network. Players may already use this section to
leave feedback and to see what was downloaded by
others at what time.
Case study
New game
In November, Alawar launched the Russian version
of new portal, Alawar.ru. We are trying to implement
all the aforementioned. We have only implemented a
small portion of our ideas thus far, but with time, we will
add more nice features to the site, thus increasing its
functionality. You will be able to find games for several
platforms all in one place: for Windows, Mac, Android
and iPhone/iPad. The Alawar portal will support a wide
variety of business models. We do our best to provide
our visitors with a choice between game versions to
play: premium or freemium. Each registered user will
have their own “member’s area” that can be accessed
through their social network accounts. In the future,
this “members’ area” will become a page of the game’s
The new version of the portal is running in test mode
and available in Russian only for the time being, but in
the near future it will be translated into 30+ languages,
just like the previous version (Figure 8).
We have ideal, sophisticated developer teams and
modern portals. What should the game be like then?
The game should certainly be one of high quality.
Specialized developers and QA specialists participate
in its creation. This is why the development of a game
can take anywhere from 9 to 14 months (not more than
that because the market is constantly changing) and
the budget is approximately USD 500,000. A game will
contain blitz game sessions and there should be several versions including freemium and premium (depending on the platform and distribution channel) and
a Collector’s Edition for bestsellers.
Figure 8: www.alawar.ru new website
38
01/2012
Alawar has already started developing these new
types of games including Farm Frenzy – 4 (to be released by the end of 2012), The Treasure of Montezuma
– 4 and two not yet announced super hits.
I also believe that after all of our projects and goals
become a reality, our players will be happy. Our future
successes lie in pleasing our customers. We must listen
to them and treat them with care so that they will frequently return to their accounts on the game distribution portal, as they do with their Facebook pages, to
happily purchase their new favorite, high-quality game.
Aleksander Lyskovsky
is a Chairman of the Board of Directors, Alawar
Entertainment.
Founded in 1999, Alawar Entertainment specializes in the development, publication and
distribution of casual games, reaching players
in over 60 countries. The company is the leading distributor of casual titles in Eastern Europe
and has published more than 200 casual PC
games globally, including leading downloadable brands like Farm Frenzy, Stray Souls and
The Treasures of Montezuma. Alawar games
are now available for the Mac, iPhone, iPad,
Android, PlayStation 3, Nintendo DS, bada,
BlackBerry and other platforms. The company
also releases entertainment products for social
networks and MMO audiences. For more information, visit www.alawar.com.
codersky.com
Embrace The Abstraction
Gaining perspective on game design choices by examining the source
of creativity and the process of communicating through a medium.
C
onsider the purpose of the creative arts; to manifest or express one’s creativity. Every book, film,
play, painting, commercial, joke, and video game
is the direct result of at least one creator. At the core of all
of these mediums of expression is the idea of creation.
We know that the individual parts of a creative work do
not need to be unique inventions in themselves. Rather
it’s the bigger picture that we examine for its creativity. By taking bits and pieces from the world, creators
filter their experiences and memories down to unique
representations. And when we play video games, we’re
not actually controlling real characters and objects, but
merely the creator’s virtual representations. Though
some games simulate real life objects and interactions
with great detail, most video games fall somewhere in
the middle of the extremes of the purely abstract and
simulation. This middle ground is an abstraction, a key
concept in the foundation of game design.
Abstraction. Stylization. Simplification. These are
terms that describe the act of creating a representation
with some, but not all, aspects of the existing subject.
Abstraction is an important part of the creative arts.
How abstraction fits into game design can best be
explained in a three part direction: creator, medium,
and audience.
be thrown into a completely foreign environment and,
one trial at a time, come to some kind of profound understanding. Video games test and engage us in more
ways than any non-interactive medium can. For these
reasons, video games have a unique way of communicating ideas and conveying experiences, which are
intangibles worth playing and making video games for.
It’s easy to think of gaming as an activity very far removed from reality. Gamers naturally draw a clear line
between real life and the virtual, fantasy, and abstract
game worlds of video games. When I shoot a red exploding barrel (can they be any other color?) I’m not
releasing hazardous chemicals into the air. When I steal
from a local shop, I’m not disrupting an actual economy. And when I clear a line in Tetris, I’m not defying the
conversation of energy (Figure 1).
On the other hand, though the game worlds are
virtual, human players and creators bring a very personal and a very real element into the mix. Art, in this
case video games, reflects the creator who reflects the
world. The creators use their thoughts and feelings to
create interactive experiences, and the player interacts
The Creator
Why do you make video games? You could be in it
for the money or the fame. Working in the game industry may just be a job for you. But even if you feel this
way, you should understand the motivation behind
the game designers you work with. Personally, I make
games because there are certain ideas and experiences
I want to convey that are only possible in an interactive
medium. As a writer, artist, and musician I have options.
So I don’t feel pressured to create experiences in a video
game that are incompatible with the medium. To understand what kinds of experiences are compatible for
video games you have to understand that video games
are learning systems. Using the same learning methods we’ve used since childhood, gamers can explore
ideas in video games by interacting and observing the
causes and effects of actions within the system. We can
40
Figure 1: Stealing in The Legend of Zelda: Link’s
Awakening
01/2012
Embrace The Abstraction
with the creator’s ideas. Thinking about game creation
this way, it’s clear that along with the creator’s thoughts
and opinions comes the creator’s biases. And it is because of these biases and personal views that we must
embrace the abstraction within creative works like video games.
Embracing the abstraction is not about blindly
agreeing with others. It’s not about making compromises to what you like or what you value most in
a video game. It’s not necessarily about expanding
the range of genres and features that you appreciate.
Embracing the abstraction is a willingness to take that
critical first step of opening your mind to, at the very
least, consider points of view other than your own.
It’s about encountering something different in a creative
work, something unexpected perhaps, and considering
its purpose and the good that can come of it before dismissing it. We have to realize that everyone sees things
differently and value things differently. Embrace the
abstraction by seeing first, understanding second, and
only judging if you have enough energy left.
“Lend your ears to music, open your eyes to painting, and… stop thinking! Just ask yourself whether the
work has enabled you to walk about into a hitherto unknown world. If the answer is yes, what more do you
want?” Wassily Kandinsky, a master of abstract painting.
Creative arts have little to do with presenting accurate to life representations or merely reminding us of
things that already exist. Rather, creativity is better understood as the remixing of known elements to present the unique perspective of the creator. Video games
are almost entirely fake, abstracted representations.
The player is real. Player actions and consequences are
real. The math that powers the system is real. But everything else is an abstraction. It’s all an artifice designed
to present a consistent system of familiar elements.
So it makes sense for us to focus on how gamers relate
to game elements rather than dwell on how realistic
they are. Once you understand this fundamental level
of abstraction in video games, you’ll understand what
it truly means to design. To design is to create a specific
kind of bridge for a specific audience. Good design involves knowing what you have (the medium), what your
options are (the decisions and elements you pick), and
how these things will affect the end user. Now we have
to consider the medium that contains our abstractions.
The Medium
The hardest part about being creators or game designers is getting an outside perspective on our own
perspective. As much as we refine our craft, our blind
spots remain out of sight. Some use theory to compensate. Others use feedback from their audience or their
co-creators and adjust accordingly. Ultimately creators
want to know if their ideas are coming across like they
codersky.com
think they are. We want to know if the medium is successfully transferring their ideas. The tricky part is there
is no one way or right way to to get the job done.
Embracing abstraction, the core of creativity, in video
games requires understanding that there are no standards or universal feature sets that all game creators
work toward. There are no standards for video games
because there are no standards for people. In the same
way that one designer can prefer turn-based gameplay
over real-time gameplay, or shooting games over puzzle games, one can have a preference for any style or
feature in a video game. Nothing is out of bounds here.
Nothing is behind the times, obsolete, or antiquated.
For example, the Japanese development studio
Treasure is known for creating shoot-em-ups that feature slowdown. While many consider slowdown as an
unwanted relic of the hardware limitations of our past,
not everyone shares this opinion. If eliminating slowdown was a standard for video games, we would never
have games like Bangai-O Spirits on the Nintendo DS.
This game features a sort of smart-slowdown that is
contextual to the intensity of the gameplay. The more
missiles, enemies, and explosions on screen the slower
the game moves. Because the slowdown is always proportional to the chaos of the gameplay, players are able
to keep up with massive amounts of action rather than
having it all overwhelm their senses.
There may be no one way to create a video game,
but many developers feel pressure from another
source; technology. As a game designer you should
take care to separate the aims and demands of technology from the personal expressivity and abstraction that is the creative arts. Video games are a unique
medium. Never before has an art form been so closely
tied to a rapidly increasing wave of development and
innovation. Moore’s law states the number of transistors that can be placed affordably on a circuit doubles
every two years or so. This means that we don’t have
to wait long before there will be a newer, flashier, more
powerful system to run our games on. Since the retro
days of the NES, I’ve witnessed that colors have gotten
brighter. Graphics have gotten sharper. Control devices
have been upgraded with higher ranges of sensitivity.
And enemies have gotten more numerous and intelligent. Any hardware limitation we face today will likely
be a non issue in two years time.
The hardware limitations a game developer works
with may set the technical limitations on the types of
interactions, graphics, sound, and other features, but
it doesn’t necessarily limit the ideas and execution of
the final product. Just because Super Mario Bros was
made on the NES doesn’t make it inferior to every
Mario game released since. After studying it or years,
I can confidently say that the design and execution of
Super Mario Brothers is still well beyond the quality of
41
Figure 2: A Random Battle in Pokemon HeartGold
many modern games. Regardless of the hardware that
games are made on, at the end of the day great developers refine and tune their games into a high quality
product. All creative arts are made under limitations of
one kind or another. Time, money, people, space, and
other resources are not unlimited. It is up to the creator
to understand the medium including its limitations
and the limitations of the current circumstances to put
together a product that expresses their ideas. This is an
easy concept to understand, but your reaction to the
following examples may reveal your true feelings.
Random battles (also known as random encounters).
In 2D and 3D role-playing games (RPGs) random battles
are a feature that randomly pulls the player into a battle without warning. The Pokemon RPG series, one of
the most successful long running RPG series, features
random battles when players walk through tall grass,
caves, and other areas. Pokemon is one of the few examples of a highly successful modern RPG with random battles. I must add that there are plenty of quality downloadable and indie titles with random battles
like Serious Sam: The Random Encounter. Concerning
the design feature, many have expressed that there
is no reason for random battles in any modern video
game. Arguments against random battles claim that no
matter the platform there should be enough processing power to render enemies on the overworld so the
player can engage or avoid them at will.
Put simply, technology is not a governing factor of
design, merely a limiter of its technical upper boundary. For random battles, like any creative decision, there
are pros and cons. The pros of random battles are its
simplicity and sense of surprise. If you think about it
random battles are the abstraction of a confrontation
that’s suddenly thrust onto the player. Random battles
only focus on a few features of the enemy encounter;
the surprise and the battle (Figure 2).
You don’t know exactly what happens in the transition
between the overworld and the battle scene. You’re
not sure why the background looks different or where
the characters are. You can’t say exactly where the enemy came from or where it goes after you defeat it. But
you can imagine what happens, a type of engagement
possible because of the lack of specificity. This invitation for interpretation can also be viewed as a con.
Maybe you’re the kind of player who doesn’t want to
use your imagination to fill in the gaps. That’s fine. Just
know that filling in the gaps, coming up with theories,
and pondering about events is what humans do naturally to recognize patterns and bring order to their lives.
And because we do this in our everyday lives, we also
do it with the books, films, and video games we consume. So even if you don’t like random battles don’t assume that all players and developers are like you in this
regard. And certainly don’t think that random battles
are inferior in every way to enemies that are visible on
the overworld. To make this point clear, let’s consider
the opposite of random battles.
Figure 3: Enemy visible on the overworld in Final
Fantasy 13
In Pokemon, by whisking the player randomly off to
a special battle space, the game play is compartmentalized, specialized, and focused all of which make the
game play easier to develop than a large, seamless
game play experience.
Notice how this abstraction invites a certain level of
imagination or filling in the blanks on the player end.
42
Figure 4: Enemy battle in Final Fantasy 13
01/2012
Embrace The Abstraction
Figure 5: Dialog from The Legend of Zelda: Ocarina of Time
Visible overworld enemies are much harder to
implement into an RPG development-wise than random battles. With visible overworld enemies as a
designer you have to worry about enemy size, animation, vision cones, AI, model collision, and other
factors. Without a doubt these additional features
complicate the development (Figure 3, Figure 4).
Of course, a developer doesn’t have to implement all of these features into their visible overworld
enemy design. In general, the more features one
does add to their game to decrease the amount of
abstraction, the harder it is to execute a highly polished product. If any component of visible overworld
enemy design is designed poorly, the entire feature
can lose its believability and its impact. If you’ve ever
seen an overworld enemy walk endlessly against
a wall completely unaware of what it’s doing, you
know that poor AI design can make an enemy smart
enough to be stupid.
If you are unfamiliar with the RPG tropes discussed
above then consider this example of text based dialog versus voice acted dialog. It’s not hard to find a
gamer or critic who confidently believes that almost
every piece of dialog in a video game should be
voiced. To these gamers texts are a relic of the past
that we don’t have to live with anymore. Why read
when the game can read to us? The counter argument is simple. Because reading is unique and interesting in its own way, and there are pros and cons to
every creative decision. There is no standard of features that all games are measured by.
codersky.com
Figure 6: Dialog from The Legend of Zelda:
Skyward Sword
Consider the following pros and cons of text versus
voiced dialog. Text takes up less storage space and processing power. Text can easily be edited. Text can be
easily entered by the player using virtual keyboards.
Text leaves the experience open for the player to assign
voices and their own sense of delivery to the dialog.
Text lets the player experience the dialog at their own
pace, which may include some rereading. Text doesn’t
clutter the soundscape of a game. Text can draw upon
a wealth of literary techniques that have been refined
for hundreds of years. Unfortunately, getting more
out of text dialog or writing in general requires good
writers and good reading comprehension of the players, two things which may be very difficult to come by
(Figure 5, Figure 6).
43
Voiced speech allows the creator to deliver powerful performances to the player via voice acting.
All the interesting inflections, tones, and accents of
an actor can be captured in a video game voice performance. The voiced speech also frees the player’s
eyes so they can focus on other parts of the screen.
Aside from higher production and technical costs,
voiced speech takes over the pacing and delivery
of lines. When playing, if a character talks too quickly for you to keep up, tough luck. If the delivery is
too slow, you may be stuck with it. With voice acting it’s tricky to skip ahead or slow down the verbal
information. It can be difficult to understand voice
performances because of accents or audio balance.
I have the hardest time understanding radio chatter
in shooters because the gunfire and the explosions
often crowd the soundscape. And like with visible
overworld enemies, there are more components
of voice performances that must all work together
to maintain its effectiveness. With a powerful, lively voice performance in a video game, if the story,
tone, graphical style, or the character animations
don’t match the voice performance, the result can
be somewhat dissonant.
It’s up to the game designers to figure out if a
feature is a good fit for the experience they want to
create. There are a lot of options out there. Knowing
what options are available and how they stress a
game’s design requires a deep understanding of different fields, tends, and concepts. Learning what the
video game medium can sustain is essential for understanding how video games work. And by “work”
I mean, how the gamer fits into the equation.
Figure 7: World 1-1 from Super Mario Bros
The Audience
Playing video games take a lot of player participation because games are interactive. Interactivity
stresses many skills that the passive entertainment
cannot. Such skill includes knowledge and adaptation skills in addition to dexterity, reflex, and timing
skills for real-time gameplay. Building up one’s skills
is a rich and engaging process that game designers
should never underestimate. Every abstraction and
idea the creator wants to convey passes through
the medium before the player can experience it.
From here the player must observe, analyze, and
possibly memorize the concept. This takes much
time and effort.
To significantly aid the learning process of the
player most games are designed using familiar
objects and actions. I call these familiar representations “forms.”
So when we see Mario in the NES game Super
Mario Brothers, we quickly understand that Mario is
a man, which means he’s a solid object capable of
44
Figure 8: Invert Y-axis controls on the bottom
screen of Star Fox 64 3DS
01/2012
Embrace The Abstraction
moving and other actions. His jump may be superhuman (hence the name), but it is still similar enough
to real life jumping. What goes up must come down.
Likewise, we can assume that Mario can’t move
through solid objects and gets hurt when he touches fire. Such is the power of using forms and other elements the player can recognize. Beware. While abstractions can simplify the gameplay experience for
the player, they can also arbitrarily work against the
player by making the familiar seem foreign (Figure 7).
By recognizing forms players can quickly create
frameworks of intuited rules and expectations to support their learning process. In other words, we anticipate how gameplay interactions work based on how
objects and actions look. Overall the goal of intuitive
game design is to line up with the intuition of your target audience as much as possible. This is an extremely
important goal to keep in mind. As a designer, know
that if you abstract too much or alter the right combinations of features of the thing you’re representing, you
can make the learning experience very difficult for the
player. If you have ever played two games in the same
genre that have different control schemes, you know
how difficult it can be to adjust to small differences. For
in general, it’s difficult to learn something, and even
more difficult to unlearn what has been learned.
I think of intuitive design as a great boost to the
quality of a game, but not necessarily a drawback
when absent. Think about it this way. In the same
way that there isn’t a standard for video games,
there isn’t a standard of intuitive rules.
To illustrate, consider the long running invertednot-inverted debate. For first person shooters and
some shoot-em-ups like Star Fox 64, it’s possible to
play with with the y-axis aiming controls inverted
or not-inverted. For a long time people have tried
to explain why one is more intuitive than the other.
The non-inverted camp reason that the inverted
gamers come from a background of PC flight simulators where the y-axis is inverted just like in real aircrafts (Figure 8).
Therefore, non-inverted is the normal type of control. The inverted camp explains that to invert is to
control the back of one’s virtual head. But the heart
of the matter is, any of these reasons can be true for
any person. Some gamers actually are used to flight
simulators, some gamers prefer non-inverted controls, and some gamers just adjust to the default settings which vary from game to game.
Zooming in on the issue, it’s clear that your preference just depends on what you think you’re controlling. If you think you’re controlling the aiming
reticule on the screen, you probably prefer noninverted controls so that moving the D-pad, stick,
codersky.com
or mouse up moves the reticule up. If a player
visualizes controlling the rotation of an aircraft or the
pivoting action of a gun in an FPS, then they probably prefer their controls inverted. There is no right
or wrong way to visualize interfacing with a virtual
system. Another reason why it’s not worth critiquing a game’s design on a lack of intuitiveness in most
cases is even if you work hard making your game
play as intuitive as possible to real life, other games
and activities may train players to the contrary. In the
end, how quickly and comfortably a player is able
to learn and adapt to the particular complexities
of a video game is more of an issue of difficulty
design and conveyance, both of which are topics
for other articles.
Conclusion
When you understand game design including the
limitations of the medium, you can understand how
the concepts of the creators are transferred to the
player through interactive experiences. When you
consider that nearly everything you put in a video
game is a simplification or abstraction designed to
focus the experience around what matters most,
you’re free to design across the entire range of abstraction. When you understand how far you can abstract, you have the power to create more effective
games that are easier to develop.
For my final example, consider the difference
in the end result between the following two ways
of modeling bullet ballistics in a shooting game.
Starting on the simulation end, you can spend large
amounts of time and development resources developing bullets that are affected by the wind physics,
temperature, and gravity as they travel through the
air. Unless you’re designing a military combat simulator, such a complex design is probably unnecessary.
Most gamers do not understand ballistics to this fine
of a degree to appreciate such a design. So, it would
be good to consider a more abstract design. Hit scan
is a simplification of projectile weaponry that registers a hit on targets in the cross hairs the instant the
trigger is pressed. There is no travel time calculated
for the bullet. So, you never have to lead your shots
ahead of targets with hit scan weapons. Such a design is easier to program as well because it takes
into account less variables. Some weapons in Halo:
Combat Evolved and Halo Reach use hit scan design.
The sniper rifle in particular registers an instant hit
when fired no matter the distance between rifle and
target. Hit scan ballistic design makes sense to players because it’s so simple. If the target is within aim
when the player pulls the trigger, the target is hit.
Because what you see is what you get, this abstraction of bullet physics may feel more accurate and
realistic to players.
45
As designers and players we should embrace the
abstraction within video games. Being open to different points of views, styles, and interpretations
of systems, objects, and interactive elements will
only allow us to enjoy more games and design better games. Embracing the different ways designers
can communicate ideas through these relatable
yet, in some ways, simplified representations is also
a way to gain clarity and perspective on one’s own
thoughts and ideas. Be proud of video games and
such abstractions.
Richard Terrell (KirbyKid)
Richard Terrell (KirbyKid) is an indie game developer, video game consultant, tournament
organizer, competitor, writer, musician, artist,
and teacher. He has worked as a tester for
a video game QA company and a software
tester/designer for a law firm. Richard’s main
writing focus is his blog Critical-Gaming.
After four years of writing, the blog is now
over 1.5k pages. A gamer since the age of
three, Richard has put his years of passion
and experience behind his words. His English
degree along with strong academic interests
in every subject allows Richard to approach
the multi-faceted medium of video games
from a wide angle.
Figure 9: Cover image by Richard Terrell
46
01/2012
Vol. 1 No. 1 Monthly
In the Upcoming Issue of Codersky
Magazine...
HTML, XHTML and CSS
th
Available to download on February 20
SOON IN CODERSKY MAGAZINE!
•CSS Techniques
•HTML5 apps for iOS
•Web Development
essentials
•Practical
Applications
and more...
If you would like to contact Codersky Team, just send an email to [email protected]
or [email protected]. We will reply a.s.a.p.