Case Study: PixelMogul, A Simulation Game For iOS
- July 7th, 2014
- 1 Comment
Are we a web engineer or developer who dreams about formulating a mobile diversion and bringing it to a app store? We have good news: Your highway to a app store competence be shorter than we think! And if we can remember your knowledge with ActionScript and a Flash tallness from days of old, afterwards you’ll even have a shortcut.
Building a internal app with Flash competence sound uncanny during first. In this article, we will share some insights on how we built a diversion for iOS that is combined wholly in ActionScript.
1First things first. Before stealing to a technical aspects, let’s speak about ubiquitous considerations that each diversion developer has to face, as good as some settlement decisions we were confronted with.
Developer’s Dilemmas
Android, iOS or Both?
Making a diversion sounds fun — and it unequivocally is! But a garland of vicious decisions need to be done that do not directly describe to a diversion itself. Let’s start with a preference about that platform(s) to support. Even if many diversion ideas are not utterly firm to one tallness (for example, due to hardware requirements), focusing on a singular platform3 for launch is a good approach. This will revoke a time and responsibility of a initial growth cycle.
From a developer’s perspective, iOS-first is unequivocally a preferable path. Just consider of a fragmentation in a Android universe: a outrageous operation of shade sizes, processors and OS versions to understanding with. iOS users are easier to serve: customarily a handful of devices, standardised shade proportions, a user bottom that updates a OS unequivocally quickly, and a certainty that a subsequent era of inclination won’t curve out of line dramatically. Development is positively easier if all upheld inclination fit on your desk.
On tip of this, investigate as of late 2012 shows that Apple’s App Store pulls in distant some-more income than Google’s Play store, nonetheless Google is throwing up. Our finish was to go with iOS first, yet to be prepared to pier to Android quickly. The palliate of porting a app was an vicious cause when a time came to select a framework.
If you’re meddlesome in some total on how a marketplace developed while we were operative on a game, check out Distimo’s “2013 Year in Review4” and App Annie’s “Top Trends of 20135.”
Which Business Model To Choose
We hear we saying, “What business model?! Games are fun, not business!” We’re with you. If creation games is not fun, one should certainly stay divided from it. However, building a diversion is also a severe and time-consuming adventure, and some arrange of financial remuneration should be involved. The doubt of how to make income from it will move we to 4 common business models. Pick a right one early on, since this preference will establish how focused your settlement and growth routine is:
- paid apps
- freemium (i.e. giveaway app that offers in-app purchases)
- paid apps with in-app purchases
- in-app advertising
We spoke with a few people who play games on iOS, and it turns out that many cite a paid indication since it is a many pristine understanding adult front. Sounds tantalizing to a developer since a paid indication doesn’t need any additional effort, like implementing in-app purchases or advertising. But we were astounded to find that the freemium indication creates adult a biggest share in revenue by distant (92% in Nov 2013, according to Distimo’s news mentioned above). So, we motionless to give it a try.
A outrageous regard for us was scaring divided players or even stealing bad reviews for charity in-app purchases, that some players still consider are a fraud — substantially since some publishers went too distant with them. To forestall such a hassle, we directed for customer-friendly in-app purchases and attempted to equivocate vicious mistakes.
- Recurring payments (such as for consumables) can beget a continual tide of income, yet they also risk irritating people if implemented aggressively.
- The impulse during that a actor decides to spend income is unequivocally personal. Paywalls will shock divided some players if set too early. On a other hand, players competence remove seductiveness in a diversion before reaching a paywall if it is set too late.
- In-app purchases that give profitable players unbeatable advantages over non-paying players could lead to frustration. This cause is generally vicious in multiplayer games in that players are in proceed competition.
- An misleading outline on what’s enclosed in in-app purchases army players to consider instead of buy.
- Some games get bad reviews for extreme pricing. Sounds obvious, yet what’s “excessive”? Mobile games have gotten unequivocally inexpensive, and players are used to stealing good games for little money. For example, $10 feels costly for a diversion that one will have fun with for hours, while a same chairman will simply spend $8 for a film sheet (which is customarily 90 mins of fun).
We’re new to a business and we’re still learning. At a moment, attracting as many people as probable and stealing certain reviews is some-more vicious than squeezing each final penny out of a game. Hence, we competence optimize a pricing indication in future.
How to Introduce Players to a App?
When we revisit a city you’ve never been to before, carrying someone deliver we to a village and a people creates we feel acquire and confident. The same goes for jumping into a new diversion — welcoming new players with a guided debate is common. Such tours are mostly presented by a impression in a game. Guess why?!
As good as a guided debate of a city is, on a second day you’ll substantially wish a few hours to try a city on your own, right? This relates to players, too. They wish to try a diversion during their possess pace. They’ll customarily skip a extensive introduction. We kept a imperative educational as brief as possible. The idea was to deliver a categorical mechanics and finish it with a transparent yet easy-to-complete mission. However, after operative on a diversion for utterly a while, determining that mechanics indispensable to be introduced was formidable since we were customarily too low into it.
User contrast is a useful proceed to find out where players need hints. Some early testers played a diversion yet any introduction or help. It incited out that a spin of assistance they wanted was unequivocally personal. As a outcome of a feedback, we detached a in-game assistance into 4 levels:
- New players are given a brief educational during a commencement of a game.
- Progress-aware hints seem customarily if compulsory by a game’s state (for example, if a actor misses an vicious action). Players who get it right from a commencement aren’t ever interrupted by these.
- User are guided in formidable panels. An charcterised dot indicates where to daub when a actor is regulating a quarrel for a initial time.
- Gestures are shadowed. Swipeable elements are somewhat charcterised to prompt a user to perform a swiping gesture.
- An in-game assistance menu explains a definition of icons in a diversion and clarifies a game’s mechanics and UI elements.
- The dash shade (during loading) offers ubiquitous hints.
Verify that your hints work as intended! One proceed would be to ask questions of your testers. Keep in mind that testers customarily won’t contend things like, “I can’t find a turbo boost,” since in many cases they won’t even comprehend that there is turbo boost!
Ask your questions thoughtfully. A doubt like “Which symbol activates a turbo booster?” will force a tester to think, and you’ll get deceptive feedback. Ask for a player’s fastest path time instead. Based on a answer, you’ll be means to establish either they used a turbo boost, so provident them from disappointment and a vigour to give a scold answer.
Of course, watching testers play is even improved than seeking questions. But from a experience, looking over their shoulder will make many testers feel worried and will change their behaviour. In this case, ask to constraint their sessions. If you’re on site, AirPlay mirroring is good for testing. We used Apple TV to counterpart on a TV. You can also use a apparatus like Reflector6, that turns your PC into an AirPlay receiver. As a final resort, find gameplay videos published by players on YouTube and Twitch.
7We optimized a in-game superintendence formed on feedback yet did not accurately determine a result. After a initial chronicle was publicly released, some players still got stranded since they didn’t get adequate assistance. A reviewer in a US App Store epitomised his examination as, “Great yet needs help.” We addressed a emanate in dual updates, and a infancy of players seem to feel gentle now.
Design And Graphics
Combining Interface Styles
What’s a initial thing that comes to mind when you’re meditative of creation a game? The user interface, perhaps! Of course, a UI will not be a reason that people consciously select to play your game, yet depending on a form of game, a UI could be vicious (perhaps a panels or settings are complex). A neat UI could also assistance your diversion mount out from competitors. And, hey, UI settlement is your domain as a shade designer, and we can move your full knowledge from a web!
When conceptualizing for little touchscreens, equivocate clutter. You competence not rest on gestures for elementary tasks on a mobile website, solely if it’s a common gesticulate (such as splash to zoom). In a diversion internal to a OS, we have a event to take things one step offer since we can deliver a user to a diversion by a guided tour.
We drew a painting covering in a game, that essentially defines a look, in a pixelated style. Adopting a pixelated character for a UI seemed apparent during first, yet we quick satisfied that this was not a best choice, utterly for a some-more formidable panels. We finished adult with a purify prosaic settlement and anti-aliased form for a UI, that gives a diversion a contemporary and app-like look. (The multiple of pixelated art and prosaic anti-aliased settlement had a few consequences for how we rubbed textures. We’ll cover this in a technical territory below.)
Multi-Resolution Design
Is there such a thing as manageable settlement for games? Yes… kind of. Mobile games are displayed in full shade on all devices. If you’re targeting iOS, afterwards you’ll be traffic with 3 shade proportions: iPad (4:3), iPhone (3:2) and iPhone 5+ (16:9). Sounds like bliss for a web engineer or developer, right? However, this calls for some vicious settlement decisions, and gripping Android’s some-more fragmented star in mind could save we many difficulty if we confirm to pier a diversion later.
For games with elementary interfaces, scaling is a good option. But scaling alone won’t do since shade proportions vary. In further to holding caring of a additional space (for example, by repeating a credentials pattern), our group had to reposition several elements formed on shade size (for example, a player’s measure had to insist in a upper-right corner).
PixelMogul is displayed during a same scale on all devices. iPad users have a incomparable viewport and, thus, advantage from a improved altogether perspective and reduction scrolling.
9The settlement routine focused on a iPad, yet we had “passe-partout” layers in a Photoshop files, that enabled us to quick check either a settlement works on smaller iPhone screens, too. This proceed compulsory us to fit pivotal elements on a smallest shade (480 × 320 pixels). In some cases, we used a additional room on incomparable screens for settlement enhancements, and afterwards “compressed” a settlement for smaller devices.
Usability of a City Map
We mentioned progressing what it feels like to revisit a new city. Losing one’s course is utterly easy. That’s accurately how a early testers felt when they arrived on a city map, one of a categorical elements of a game. The map is 37 × 37 blocks and roughly 4 pixels in breadth and height. Getting mislaid on it is utterly easy, generally on a little screen, that provides customarily a demeanour during a little apportionment of a huge map.
Our initial fortitude was to capacitate users to splash to wizz out from a map. But around a same time, we were confronted by another problem: Players warranted proceed too many income as shortly as they owned around a dozen buildings. We analyzed a math indication and discussed a emanate with a genuine estate professional, who explained to us that this is customarily a proceed a business works. Good to know!
11We found a elementary fortitude to both issues. At a unequivocally commencement of a game, all buildings on a map solely a initial 4 are lonesome by clouds and can't be accessed. The actor is forced to concentration on a 4 buildings, that helps to say their attention. Because stealing clouds and expanding a permitted buildings requires in-game money, increasing gain are rewarded to a certain extent.
Technology
Choosing The Right Framework
Picking a diversion engine or horizon has similarities to dating. In “The Game Engine Dating Guide: How to Pick Up an Engine for Single Developers13,” Steffen Itterheim covers vicious points on how to “date” frameworks. We followed some of a pivotal recommendations, that helped a lot. The tips are not specific to games and could be practical when we have to collect a horizon of any kind.
- Choose a informed programming language.
Learning a basis of a programming denunciation competence not be a vast deal, yet it takes knowledge to learn all of a nitty-gritty sum that lead to improved code, fewer bugs, faster opening and tighter security. Use your knowledge whenever possible! - Match a horizon to your needs, not to a project.
Mastering a collection we have is some-more vicious than receiving a ideal tools. And a customarily proceed to master a apparatus is to use it frequently. Choose a horizon that’s stretchable adequate to offer a far-reaching operation of projects. Low-level frameworks are customarily some-more versatile than full-blown engines. Don’t demeanour for worldly built-in facilities — rather, demeanour for frameworks that can be extended with tradition features. - Documentation, maintenance, village and support
Before we shortlist a framework, dump by a documentation. Check a change logs, repositories and forums for activity. Make certain we get support that is adequate and that fits your needs and budget.
You will substantially have additional requirements. In a case, we were looking for a horizon that works with both iOS and Android.
Our Choice: Starling
The Starling14 horizon seemed to be a ideal fit. It’s a pristine ActionScript horizon that mimics a DisplayList design of Flash, while digest all calm directly from a GPU. That’s good news for ActionScript veterans, who get to work with a informed API and get smashing digest opening as a bonus.
GPU digest is formed on Stage3D, that became partial of a Flash tallness in 2011. It’s proceed faster than a classical DisplayObject digest yet uses Adobe’s Graphics Assembly Language (AGAL), a low-level cross-platform shader language, instead of a dear DisplayList architecture. Like many ActionScript developers, we’re unequivocally into a DisplayList concept, and that’s one proceed Starling came in unequivocally handy.
Because Starling takes caring of all things AGAL, it enabled us to take advantage of a ActionScript knowledge and to work with a DisplayList design that we’re used to, while enjoying a advantages of GPU rendering. Even improved is that Starling is built on tip of Adobe Flash and AIR and runs for iOS and Android (both wrapped in a internal app) and in a browser (via a Flash plugin).
Convenience comes during a price, though. ActionScript does not yield a developer with entrance to all device-specific facilities and libraries as a internal SDK would (for example, battery spin or GameCenter on iOS). AIR internal extensions (ANE) overpass that gap. An ANE is a package containing internal formula and an ActionScript API. Several blurb and open-source ANEs15 are accessible for common tasks16, yet we can always write your own17.
Improving Performance
Optimizing a opening of Flash calm mostly feels like looking for a needle in a haystack. Isolating and identifying problems can be utterly time-consuming and frustrating. Adobe Flash Builder (an ActionScript-flavoured chronicle of Eclipse) has a profiling apparatus that provides discernment into a covering of your possess ActionScript code, yet all of a middle operations of a Flash actor are hidden.
Scout18, Adobe’s new profiling tool, comes in accessible here. Scout gives finish discernment into each fact of your app’s middle life: support rate, GPU and CPU memory usage, a relapse of ActionScript performance, digest sum (DisplayList and GPU), and debugging output. All of a information is orderly in a timeline, that gives a severe overview and allows we to concentration on particular frames or sequences of frames.
19In a timeline, each support is visualized as a straight bar. A plane red line outlines a limit execution time for a support (for example, around 17 milliseconds for a support rate of 60 frames per second). This enables we to quick brand a many vicious opening issues (i.e. a top spikes) and prioritize your efforts.
The GPU renders each support step by step (similar to a layers in a Photoshop document). Fewer layers customarily means faster rendering. Enabling Stage3D recording allows we to reconstruct each singular support and see how a GPU renders a support by toggling by each step (i.e. layer) manually. Aside from opening optimization, this “replay” functionality comes in accessible when you’re fine-tuning things like collision showing (“Did a bullet unequivocally strike that obstacle?”).
Scout comes with messenger apps for iOS, Android and Kindle, enabling we to form calm using on inclination in further to a calm on your internal machine. Thibault Imbert’s essay “Getting Started With Adobe Scout21” offers a finish introduction.
Multilingual Interface
The ability to offer apps in a internal languages of users has been a vital cause in a success of a tellurian App Store. Aside from a apparent advantage of multi-language support, localization provides a infrastructure to detached calm from logic.
Our group works with plain-text files, that is accessible since we can simply email a files to a translators. When a translated files are returned, we customarily dump them in a plan and register a new denunciation in a program.
Localization is a common task, and a ActionScript API even offers a ResourceManager category that takes caring of loading and parsing resources and delivering localized content. The initial doing took us reduction than a day, and it worked — many of a time. For some reason, a app infrequently picked a wrong locality and displayed a calm in a pointless language. Other developers have had identical unsolved problems22 and have finished adult essay their possess ResourceManager.
We would have elite to rest on a built-in class, yet we couldn’t find a problem after debugging for roughly 3 days. So, we finished adult — we guessed it! — essay a possess AS3-ResourceManager, accessible on GitHub23.
Tabular Data
Technically speaking, a diversion is a formidable UI that manages a elementary database. Many user actions need information from a database or refurbish that data, so we need a arguable and quick connection. ActionScript works palm in palm with internal SQLite databases, that perform good if we follow some elementary rules:
- Access asynchronously.
Accessing a database synchronously competence demeanour tantalizing during initial since it’s easier to exercise (no listeners or callbacks required). But be wakeful that AIR runs single-threaded (workers are in growth during time of writing). Thus, formula will stop executing while accessing a database synchronously, and even a UI will be blocked. This is a deal-breaker for any app.
Reuse statements.
In AIR, SQL statements are prepared (i.e. compiled) before execution. As prolonged as a statement’s content (i.e. a query) does not change, a gathered matter will be reused, that formula in faster execution. Parameterized queries are reusable for opposite information sets, as shown in a representation formula below:// Create a matter if not available
if (addStmt == null)
addStmt = new SQLStatement();
addStmt.sqlConnection = conn;
// query with parameters
addStmt.text =
"INSERT INTO tenants (name, income)" +
"VALUES (:name, :income)";
// set parameter values
addStmt.parameters[":name"] = "Mark";
addStmt.parameters[":income"] = "4000";
addStmt.execute();- Use exchange instead of singular statements.
Every time information is updated or added, a database record contingency be combined to disk. This is customarily a many time-intensive partial of a whole operation. When we use transactions, all statements in a transaction are executed in memory before a database record is combined — a vital time-saver! Be certain to supplement a queuing complement to your condensation layer, since SQLite will chuck an blunder if we start a new transaction while another is still executing. A elementary matrix or array will do fine. - Do not replace database or mainstay names.
This is a teenager enhancement, yet categorically naming databases and mainstay names minimizes runtime processing.// DON'T
SELECT * FROM tenants;
// DO
SELECT name, income FROM gameDB.tenants; - Retrieve vast outcome sets in parts.
When we need to benefaction query formula immediately to a user, it competence be value violation detached vast outcome sets and presenting a initial formula while estimate a rest. In a representation formula below, we’re attractive a formula in blocks of 10 rows during a time:// Create a matter if not available
if (getTenants == null)
getTenants = new SQLStatement();
getTenants.sqlConnection = conn;
getTenants.text = "SELECT name, income FROM gameDB.tenants";
getTenants.addEventListener(SQLEvent.RESULT, buildTenants);
getTenants.execute(10); // earnings 10 rows (or fewer)
function buildTenants(event:SQLEvent):void
var result:SQLResult = getTenants
.getResult();
if (result.data != null)
// Loop by a outcome rows and routine quarrel by row
if (!result.complete)
getTenants.next(10); // collect a subsequent 10 rows
else
getTenants.removeEventListener(SQLEvent.RESULT, buildTenants);
Non-Tabular Data
When building a game, we typically have to understanding with non-tabular data. When a user closes a game, we store a x and y position of a city map within a viewport, so that we can arrangement a same essay of a map perspective when they return.
In a initial prototype, we stored all non-database information in content files, that were combined whenever a given intent was likely or a app was deactivated. We suspicion this proceed would yield a many flexibility. But it incited out not to be arguable enough. Sometimes when a app deactivated suddenly (for example, since of an incoming phone call), a charge of essay a files was invoked yet not successfully completed, with a outcome being depraved information files.
We didn’t conduct to imitate a problem scrupulously since it frequency occurred, and so we transposed a content files with internal SharedObjects (LSO). When operative with an LSO, keep in mind that it can reason customarily a obsolete information forms (such as string, array and date) and is singular to 100 KB in size. Do not store any objects (in a case, a tenants) — customarily store an object’s properties (for example, tenant.name and tenant.income), and reconstruct a intent from those properties when needed.
Avoid Overhead With Texture Atlases
When traffic with GPU-based rendering, images (i.e. textures) are typically orderly in hardness atlases (or goddess sheets). Similar to how atlases in CSS revoke HTTP requests, atlases revoke a time used to upload images to a GPU and revoke pull calls (i.e. a series of layers a GPU has to pull in a frame).
Supporting high-resolution (i.e. Retina) screens is a square of cake. Just bucket a hardness atlas according to a device’s resolution. The AssetManager class, that is partial of a Starling horizon (represented as assets in a representation formula below), offers a contentScale skill that we can use for this purpose.
// Loading resources from "atlas1x/" or "atlas2x/" according to shade resolution
assets.enqueue(
File.applicationDirectory.resolvePath(
"assets/atlas" + assets.scaleFactor + "x/",
)
);
If your character of graphics is pixelated, afterwards scheming high-resolution design for high-resolutions screens would not make sense, since a striking would stay a same yet during double a distance (i.e. 4 times a aspect area). It’s a rubbish of hoop space and estimate time.
To equivocate overhead, we distant a pixelated textures from a UI textures, that enclose anti-aliased graphics. A singular set of pixelated textures is used for all resolutions yet afterwards is scaled adult for high-resolution displays during runtime, while a UI textures are resolution-aware (i.e. detached textures for high-resolution devices).
By default, Starling uses bilinear filtering, that creates well-spoken transitions between pixels when textures are scaled. That’s ideal in many cases, yet it looks becloud when practical to pixelated art. If we spin off smoothing in a Image class, you’ll finish adult with nearest-neighbor scaling for all images.
mSmoothing = TextureSmoothing.NONE;
Conclusion
PixelMogul is a initial diversion that we combined wholly in house. Adobe AIR and Starling done it probable for us to lift over a knowledge with ActionScript and a Flash tallness and to concentration on development. The fast-growing and active Starling village was a vast plus, too. We would definitively go a same track for another plan of allied scope.
What do we think? We demeanour brazen to conference your opinions!
Further Resources
- PixelMogul24, iTunes App Store
- Starling Wiki25
This primer is a ideal starting point. - Gamua26
This HTML5 horizon in a creation uses a same API as Starling. - TexturePacker27
This is a versatile apparatus to emanate hardness atlases. It can even be used to emanate CSS goddess sheets for a web, as explained in “Creating CSS Sprites With TexturePacker28.”
(al, il, ml)
Footnotes
- 1 http://www.smashingmagazine.com/wp-content/uploads/2014/06/PixelMogul-iPad-opt.jpg
- 2 http://www.smashingmagazine.com/wp-content/uploads/2014/06/PixelMogul-iPad-opt.jpg
- 3 http://www.everyinteraction.com/develop-ios-or-android-first/
- 4 http://www.distimo.com/blog/2013_12_publication-2013-year-in-review/
- 5 http://blog.appannie.com/app-annie-index-retrospective-2013/
- 6 http://www.airsquirrels.com/reflector/
- 7 http://www.smashingmagazine.com/wp-content/uploads/2014/06/help-menu-large-opt.jpg
- 8 http://www.smashingmagazine.com/wp-content/uploads/2014/06/help-menu-large-opt.jpg
- 9 http://www.smashingmagazine.com/wp-content/uploads/2014/06/multiresolution-large-opt.jpg
- 10 http://www.smashingmagazine.com/wp-content/uploads/2014/06/multiresolution-large-opt.jpg
- 11 http://www.smashingmagazine.com/wp-content/uploads/2014/06/map-unlock-large-opt.jpg
- 12 http://www.smashingmagazine.com/wp-content/uploads/2014/06/map-unlock-large-opt.jpg
- 13 http://www.learn-cocos2d.com/2012/05/the-game-engine-dating-guide-how-to-find-the-right-engine-for-your-game/
- 14 http://gamua.com/starling/
- 15 http://www.adobe.com/devnet/air/native-extensions-for-air.html
- 16 http://distriqt.com/native-extensions
- 17 http://www.adobe.com/devnet/air/articles/building-ane-ios-android-pt1.html
- 18 http://gaming.adobe.com/technologies/scout/
- 19 http://www.smashingmagazine.com/wp-content/uploads/2014/06/Adobe-Scout-large-opt.png
- 20 http://www.smashingmagazine.com/wp-content/uploads/2014/06/Adobe-Scout-large-opt.png
- 21 http://www.adobe.com/devnet/scout/articles/adobe-scout-getting-started.html
- 22 https://forums.adobe.com/thread/1165882
- 23 https://github.com/rekomat/AS3-LocaleManager
- 24 https://itunes.apple.com/app/id711358248
- 25 http://wiki.starling-framework.org
- 26 http://gamua.com/blog/2013/05/a-bird-for-the-modern-web/
- 27 http://www.codeandweb.com/texturepacker
- 28 http://www.codeandweb.com/blog/2011/07/28/creating-css-sprites-with-texturepacker
↑ Back to topShare on Twitter
Case Study: PixelMogul, A Simulation Game For iOS
Nenhum comentário:
Postar um comentário