The native iOS controls manage this particular navigation animation for you, but there will be many times when you’re using custom controls where you might want to manually manage opacity. That’s usually no problem, but occasionally you’ll find controls that don’t allow you to change the opacity. Fear not! This just requires some extra math. Let’s get to it!

The Formula

We’ll need to think of colors in terms of RGB values for the purposes of this calculation. If you’re using hex codes or predefined system colors, you’ll need to convert them to RGB values to proceed with this calculation. Once you’ve got the red, green, and blue values for your color, use the following formula on each R, G, and B units.

adjustedColor = opacity * foregroundColor + (1 - opacity) * backgroundColor

Let’s start with a quick sanity check to make sure this makes sense. Let’s say we have a black button against a white background. We want it to change to 50% opacity when it’s pressed. The RGB for black is (0, 0, 0) and white is (255, 255, 255). Consequently, the formula looks the same for each of the R, G, and B channels.

.50 * 0 + (1 - .50) * 255 = 127.5

We’ll round that up and get (128, 128, 128). That’s gray, and that’s the color we want. This equation will work with any foreground, background, and opacity combination that you need!

Backing Out the iOS Opacity

Apple is known for their polished app design, so let’s calculate what opacity they’re using on their button animation. We might like to use the same opacity adjustment with our custom controls.

The starting shade of blue is #3478F6. We need to convert that to RGB, which gives us (52, 120, 246). The pressed state is #CDE0FA, otherwise known as (205, 224, 250). The background gray is #FBFBFC or (251, 251, 252). Please note that I’m getting these color values from taking a screenshot and picking off the hex values in Inkscape. They might not be perfect, but should be extremely close. Let’s go to the formula. We should expect opacity to equal the same thing whether we perform the calculation with the red, green, or blue values. We’ll use the red channel.

205 = opacity * 52 + (1 - opacity) * 251

opacity = 23%

After a little algebra, opacity = 23%. As a test, what happens if we do the same thing with the green channel?

224 = opacity * 120 + (1 - opacity) * 251

opacity = 21%

Simplified, opacity = 21%. That’s close. Let’s try the blue channel.

250 = opacity * 246 + (1 - opacity) * 252

opacity = 33%

That’s puts opacity at 33%! So much for all of these opacity values being the same! Here’s the deal, though. RGB values are all integers, while opacity is a decimal. Inevitably, this will create some rounding error. This is especially true with the blue channel because all of the parameters in the equation are so close together. For instance, you could split the difference between the red and green channel calculations and assume an opacity of 22%. Let’s plug that in the blue equation to calculate an adjusted value.

.22 * 246 + (1 - .22) * 252 =  250.68

You can see this is within a fraction of 250, the correct value. I suppose that makes 22% a fine choice for an opacity change on your button animations!

Conclusion

Opacity is a great tool to have at your disposal. We’ve talked about using it in the context of button transitions, but the possibilities are endless. You’ll often adjust opacity to give disabled controls a more transparent appearance, for example. In the event that you find a troublesome control without an opacity property, now you’ll be prepared.

Thanks for reading the HangZone blog, and have a great 2020!

The post How to Calculate the Implied RGB Color for Opacity Changes appeared first on HangZone.

If you’ve been developing mobile apps for a few years on the same computer, I suspect you also have a glut of these opaque system files on your machine. Unlike pictures and music, it’s not so obvious how to clean them up. First, we have to identify what these files are, and then we need to figure out a safe way to dispose of them. Be advised that these files reside in the infamous Library folder. Apple hid it for a reason, so be careful!

Navigating the Library Folder

If you’re a developer, you’re probably accustomed to opening the Library folder every once in a while. Just in case you’ve forgotten how to get there, open up a Finder window, hold down the option key, and click on the Go menu at the top. Holding down the option key reveals the Library folder. Go ahead and click it.

From here, you can right click any of the folders inside and click Get Info. That will show you how much space each item takes up. As a mobile developer, Xcode and Android Studio are going to be the primary targets for the purge. Feel free to look around and see if you have any other massive file hoards, but we’ll be focusing on the Android and Developer folders.

Xcode Developers

Let’s start by dealing with our build-up of Xcode files. Navigate to Library/Developer/Xcode/iOS DeviceSupport. This folder is about 95 GB for me, and it contains symbol files dating back to iOS 6! This is more than a little unnecessary. Keep the folders for the iOS versions you still care about. You can safely delete everything in the folder for the other iOS versions. Even if you accidentally delete the support files for your favorite development device, Xcode will download the appropriate symbol files for that device again the next time you plug it in.

The other major storage hog in the Xcode environment is all of the old simulator data. Go to Library/Developer/CoreSimulator/Devices. I’ve got hundreds of old simulators in here, and they take up about 35 GB of space combined. To make things more complicated, their names are all lengthy strings of seemingly random letters and numbers. I have no easy way of knowing which ones are new and which ones are old.

Fortunately, Xcode tracks which simulators are no longer in use for your current Xcode version. Even better, we can purge them all it once through the Terminal. Open up Terminal and enter the command.

xcrun simctl delete unavailable

You’ll find a much shorter list of simulators in the Devices folder now. Mine take up less than 500 MB now! Between these two maneuvers, I’ve saved over 100 GB of space!

If you were to open Xcode now, you might find some problems. My storyboards turned black, and Xcode showed a vague error. We’re going to remedy this problem by deleting more files! Head over to Library/Developer/Xcode/DerivedData. This is a cache of files created when you build Xcode projects. You can safely delete everything in here. If you do happen to still get an Xcode error, clean your project, close Xcode, delete the DerivedData again, and restart your computer. You should be good as new!

There are other space saving options for Xcode, but they’re less meaningful and some are potentially more dangerous. For instance, you could delete some archives, but you might want them for debugging. I’m going to stop here for now, and call this a win on the Xcode front.

Android Developers

Space management on Android is a little more transparent than on Xcode. Considering you manually download which SDKs you want and create individual emulators for testing, you probably have a good idea of what’s taking up space here. Even so, sometimes it’s hard to know exactly how big an SDK or simulator actually is without looking it up. We’ll do that now.

Go to Library/Android/sdk/system-images. This has all of the Android SDKs that you’ve downloaded. Check the size on them. Mine are anywhere from 6 GB to 25 GB. Rather than deleting directly from here, I’ll use Android Studio. Click Configure from the opening dialog, and select SDK Manager. Delete SDKs that you don’t use for testing anymore, particularly if they’re exceptionally large.

Lastly, emulators aren’t going to take up as much space, but head over to the AVD Manager under the Tools menu. Delete the old devices you don’t use, and you’ll be awarded with a few free GB for your effort.

Conclusion

I’ve always enjoyed how Xcode downloads everything I need automatically compared to Android Studio forcing me to decide what I need. Of course, the downside is that Xcode will eventually take up a ton of space before you realize it. No worries! You can clean-up everything in a couple of minutes. If you waited as long as I did, you too may have 150 GB of new free space! So much room for activities!

The post How to Free Space in Xcode and Android Studio appeared first on HangZone.

General Mac Highlights

A new operating system was introduced called MacOS Catalina. This continues the California theme that has been used to name the recent versions of MacOS. After a long run, the iTunes app is being replaced with separate Music, Podcast, and Apple TV apps. This isn’t especially meaningful for developers, but it’s alway interesting to take note of changes that Apple makes to its first party apps. The Mac and iPad will also be able to work better together than ever before. Through a new app called Sidecar, the iPad will be able to be used as a second display for your Mac either wirelessly or with a wired connection. This has been possible through third-party apps before, but it’s exciting to have Apple support and extend the functionality. Besides traditional second screen use, this has some cool possibilities for using the iPad as a drawing tool with the Apple Pencil where the devices are both working in the same app. 

Although this isn’t typically a hardware conference, a new Mac Pro computer was also introduced. The computer is available with up to a 28-core processor and is an impressive high-end machine. To go along with it, a new 32 inch 6K monitor was announced. My favorite tidbit about the monitor is the stand that Apple made for it. The stand can be purchased for an additional $999. At that price, I can only imagine how majestic it sits on a desk and caresses your monitor (but it seems like it should probably make your coffee too).

General iOS Highlights

The new operating system, iOS 13, comes with a number of enhancements as well. A new dark mode has been one of the most talked about features. A dark mode has already been available for Mac, but this is its first appearance on mobile. The feature will darken your background and change to a lighter text color so that it is easier on your eyes at night. This is absolutely relevant to developers, as it offers a new appearance for users to view your app. Typically if users are requesting a dark mode, you would like to have your app enabled to show a mode consistent with that display. 

Apple has also introduced a new “swipe” keyboard named QuickPath. This has been in Android for some time and can be handy for one handed typing. The issue has always been how well it can guess what you are trying to type. We’ll gauge its quality with time. Apple also announced a new “Sign in With Apple” feature. This is to compete with Facebook, Google, and other third party log-ins that are used in apps, and it will be based on users existing Apple IDs. This is of particular note because it will be required as an option for log-in in apps where third party log-in options are offered.

iPadOS

All of these are nice, but what I really want to highlight is iPadOS and then quickly mention Project Catalyst. First, we will start with iPadOS. For the last several years, Apple has been slowly positioning the iPad as something closer to a full blown computer. This involved giving it a “Files” folder, attaching a keyboard, several enhancements to multitasking, and drag and drop features while using multiple apps to name a few things. Well, Apple is taking a step further in differentiating the iPad from the iPhone by giving it a dedicated operating system called iPadOS. This immediately brings a lot of questions to mind, so let me clear a few things up before going any further.

First, your current iPad apps will continue to work on iPadOS. This operating system is based on iOS, and is still in parallel with iOS. It is called iPadOS 13 to mirror iOS 13. The primary reason for the renaming is to better differentiate that the iPad and iPhone have different sets of features. As a basic example, Apple pencil support is only available on the iPad, so it’s easier to understand that it’s an iPadOS feature. As more and more features are only available for the iPad, and specifically new iPads, compatibility is easier to understand through the operating system.

Speaking of compatibility, what devices are eligible to upgrade to iPadOS 13? It requires devices that use an Apple A8/A8X chip or later and have over 1 GB of RAM. This includes all iPad Pro models, iPad Air 2nd generation and newer, iPad mini 4th generation and newer, and iPad 5th generation and newer.

What’s new with iPadOS

Now that we’ve covered compatibility and reasoning for the operating system name, what exactly does is it do? Well, the first thing that you will notice is a new home screen. You will still see a grid of app icons like before, but they have been moved to the right. This frees up the left side for the time, date, and Apple’s widgets. The dock of app’s is still at the bottom. None of the elements are exactly new, but it seems to be a nice design and a further departure from the traditional iOS look to accompany the new name.

Safari has also gotten a substantial upgrade. It retrieves full versions of websites, same as you would expect on a Mac. You can still easily request the mobile version from a toolbar button if that’s what you’re after. We also now have the ability to easily manage and see downloads, just like on the Mac version of Safari. Having greater control and ability to manage files is a crucial piece to being able to use the iPad more like a full computer.

This bring us nicely into talking about the Files app. You can now connect a USB drive to your Mac, and it shows up nicely in your Files app. Along with integration with Google Drive and Dropbox, the Files app finally allows you to manage apps like you would expect. It may not seem like a lot, but again, this is key to using an iPad for greater productivity. The Files app also lets you drill down by columns, like in Finder on Mac, so you can navigate with ease.

Finally, mouse support has been added. It doesn’t appear to be a core feature by any means, but the support exists. It’s an AssistiveTouch feature under the Accessibility section of Settings.  Given where and how it is included, mouse support inside your app is not necessary as the system still works off of touches and gestures. It is certainly something to note as it is likely a sign of something to come in the future though.

There are a number of other multitasking and performance improvements that go along to round out the changes for iPadOS.

Project Catalyst

Finally, let’s talk about Project Catalyst. This is new, but it was mentioned at WWDC 2018 under the name of Project Marzipan. Apple was using the project internally to build a single app that would work for iOS and macOS. That’s a big deal! Many of Apple’s apps, such as News, Home, and Stocks are apparently built with the the technology. Cross platform building between the Mac and iOS isn’t fully there yet, but this certainly is an encouraging step in the right direction.

Project Catalyst is an SDK for Xcode that will allow developers to convert iPad apps to Mac apps. The app must have an iPad version (it doesn’t work for iPhone only apps). The developer would then be able to submit versions to the iOS and Mac app stores separately. A universal app between the platforms is not available at this time. I have yet to use it, so I can’t speak to the ability to tweak changes to make your app more Mac friendly and whatnot, but it is certainly exciting and could make developing cross platform software for the two systems substantially faster.

Conclusion

WWDC 2019 was packed with many exciting new features. For app developers, any time we hear about completely new operating systems, like iPadOS, there is an initial fear of backwards compatibility for our current apps and excitement for what’s new. Luckily, iPadOS isn’t too much of a deviation from the previous version and is more about an exciting future. If you are interested in learning more about any of these features or other happenings from WWDC, I strongly recommend checking out Apple’s site. We didn’t come close to covering everything. As always, thanks for reading the HangZone blog!

The post iPadOS and More from WWDC 2019 appeared first on HangZone.

What’s Causing the Problem

If your outgoing data is is dramatically more than you expected, you should stop and consider what exactly your queries are returning. Imagine a database with two tables: Customers and Orders. The corresponding classes look like this (we’ll use C# today):

public class Customer
{
    public Customer() { }

    public int ID { get; set; }

    public string FirstName { get; set; }

    public string LastName { get; set; }

    public string Address { get; set; }

    public string City { get; set; }

    public string State { get; set; }

    public string ZipCode { get; set; }

    public string Phone { get; set; }

    public string Email { get; set; }
}

public class Order
{
    public Order() { }

    public int ID { get; set; }

    public int CustomerID { get; set; }

    public DateTime Date { get; set; }

    public decimal Cost { get; set; }
}

The Customer class holds several pieces of information about each customer. Whenever a customer places an order, we get a new Order object that has some information about the order. Among the information stored in each Order is a CustomerID foreign key, which we can use to get the related customer information for that order.

After storing some data, we might like to query all of the Orders. Let’s say we want to display them in a table that includes a Customer Name column. Unfortunately, we don’t have the customer’s name stored directly in the Order model. In addition to querying the Orders, we’ll also have to query the Customer table for the CustomerIDs found on our Orders.

If you’re using an Object Relational Mapper (ORM) like Entity Framework to execute your database actions, you’ll probably use a navigation property to get the extra Customer information. You just add a new Customer property on the Order model with the following format.

public class Order
{
    public Order() { }

    public int ID { get; set; }

    public int CustomerID { get; set; }

    public Customer Customer { get; set; }

    public DateTime Date { get; set; }

    public decimal Cost { get; set; }
}

The Customer property isn’t stored in the database as a field on Order. It’s merely added to the Order object if you choose to include it as part of your query. If you’re using Entity Framework, the code in your web API might look like this.

return await _db.Orders
    .Include(Order => Order.Customer)
    .AsNoTracking()
    .ToListAsync();

Now if we want to get the customer’s name off of the order, we can easily get it as follows.

string customerName = order.Customer.FirstName + " " + order.Customer.LastName;

That’s all good and well. It works. It’s just really inefficient. We’re returning all sorts of address and contract information for the customer on each Order object that we don’t need. If a customer has multiple orders, we’re returning all of that excess information multiple times!

This example only has one include, but things can get much worse if you layer more includes on top of includes. It’s time to rethink this approach with DTOs.

What’s a DTO?

Data Transfer Objects—DTOs for short—are objects that are optimized for sending information efficiently over the wire. Essentially, they cut out extra information. Your web API grabs the regular objects that you know and love out of the database. Before it sends them to your local application, the web api converts the objects to DTOs. Once your local application receives the DTOs, it converts the objects into a suitable format for display within the project’s UI.

This final UI form of the object may resemble the original model you got out of the database before the DTO conversion. It might also have some extra business logic on it. There are some people with very strong opinions about the stylebook surrounding DTO conversions, but there isn’t a definitive answer here. As long as the DTO carries an efficient amount of information and doesn’t have business logic, we’re doing just fine.

Implementing a DTO solution

Let’s return to our Customer and Order models. In order to avoid returning an entire Customer object along with each Order object, let’s write an OrderDTO model.

public class OrderDTO
{
    public OrderDTO() { }

    public int ID { get; set; }

    public int CustomerID { get; set; }

    public string CustomerName { get; set; }

    public DateTime Date { get; set; }

    public decimal Cost { get; set; }

    OrderDTO(Order model)
    {
        ID = model.ID,
        CustomerID = model.CustomerID,
        Date = model.Date,
        Cost = model.Cost,
        CustomerName = model.Customer.FirstName + model.Customer.LastName;
    }
}

Notice that this model only has a string for CustomerName instead of an entire Customer property. We’ve also added a constructor to convert our Orders to OrderDTOs. Let’s see how that works with an Entity Framework call on the web API with orders of $100 or more.

return await _db.Orders
    .Include(Order => Order.Customer)
    .AsNoTracking()
    .Where(Order => Order.Cost >= 100)
    .Select(Order => new OrderDTO(Order))
    .ToListAsync();

We still do the same include as last time, so our initial Order object does have an entire Customer property on it. This version adds the conversion before we return the list, however, which flattens out our Orders to more efficient OrderDTOs. When we receive the OrderDTOs, we can go to town with them however we see fit. If we have a different Order model we want to use for the UI, we just write a constructor in our UI version of the model to convert the DTOs. We can even use the DTOs directly in the UI if we’re not worried about some stylebook vigilantes raising an eyebrow!

Conclusion

It’s easy to get carried away with queries that start compounding more queries and returning gigantic objects. These are the sort of situations where sending DTOs can be literally thousands of times more efficient from a data transfer standpoint than sending the original objects. I’ve primarily focused on flattening data with DTOs, but they’re also used for combining data into a single object that would otherwise require querying your API multiple times, effectively eliminating some roundtrips. Be creative. The fewer calls made and less data transferred, the better your app will perform!

The post How to Transfer Data More Efficiently with DTOs appeared first on HangZone.

Let’s kick things off by congratulating some of the most accomplished users. Here are the top users in Spelldom’s competitive categories.

The Daily Champ

1. Dante  412
2. AdamPlays  159
3. JosephdePalmy  126
4. Leela  86
5. Bandor  31

Scrolls

1. Dante  4,279
2. Baba  3,331
3. DavidRicky  3,239
4. Rat  3,234
5. Pandemonium  3,041

Team Scrolls

1. Water Lizards  15,814
2. Village Orphans  11,473
3. Repus Dren  10,353
4. Del Ray  9,528
5. Winterfell  8,375

Congratulations to everyone!

Lessons From Spelldom

Spelldom was the most complex game we’ve ever built, both from a technology standpoint and a game design perspective. Now that we’ve wrapped up the magical woods, we wanted to share some of the lessons we learned along the way.

Choosing the Right Backend

Starting with technology, we built Spelldom’s backend with Kinvey’s mobile backend-as-a-service (BaaS). The BaaS market was and still is highly fragmented, so it’s often tough to choose the best option. Parse was likely the largest player in the BaaS market at the time, followed by Kinvey and StackMob. Gaming centric backends like GameSparks hadn’t taken off yet, so we had to build out all of our team mechanics, matchmaking, and leaderboard code from scratch. Ultimately, we chose Kinvey over Parse because we needed to make a ton of server calls to power the game. Parse charged per call, while Kinvey charged a flat fee. Also, we didn’t want to risk using a smaller player, for fear that they would go out of business. Over the life of Spelldom, it seemed nearly everyone disappeared except Kinvey. Parse was bought by Facebook, then shut down. StackMob closed up shop. Countless smaller players went under. We think we made the right decision given the options in 2014.

If we were doing it again today, however, there are many other compelling options. Amazon Web Services (AWS) has built out a more mobile friendly set-up, which allows you to save costs compared to BaaS companies that are running their own interface on top of AWS. Couple that with Kinvey’s shift in emphasis toward higher cost enterprise plans, and the cost savings are significant.

GameSparks, who Amazon just bought last month, specifically targets games by offering lots of prebuilt gaming functionality. This allows you to save time building out a lot of multiplayer features yourself. There are some drawbacks. It’s nice to have the granular control that comes with writing all of your own server code from scratch, plus you can more easily move it to another platform if necessary. Nevertheless, the time savings are hard to ignore.

Finally, Google Firebase’s real-time database is ideal for powering team chat. It’s definitely an easier set-up than the intermittent querying approach we wrote for Spelldom. Regardless of which platform you use, you can build a multiplayer game backend cheaper and more quickly than you could just a few years ago.

On-Boarding Users

Day one retention—otherwise known as the percentage of users that continue to play your game the day after they download it—is key for mobile games. While console gamers have a monetary investment that makes them more likely to give games a thorough chance, mobile gamers will casually move to the next free-to-play game if the experience doesn’t immediately suit them.

Consequently, a lot of thought and testing goes into the on-boarding process. Mid-core strategy games like Spelldom require a good deal of explanation for users to grasp all of the rules and nuances of the game. You want to make sure users learn everything quickly so they can enjoy the game to its maximum potential. On the other hand, you don’t want to bog users down in a tutorial for too long, or they’ll get bored. It’s helpful to make the tutorial as interactive as possible to keep players’ interest high, but you’ll still need to grant the player more freedom quickly or they’ll move on to something else.

Our original goal was to make sure the tutorial was no longer than the tutorial for Clash of Clans. We accomplished that, and had plenty of guided player interaction. Unfortunately, day one retention was still a little light of what we wanted. We had already built a lot of analytics into the app in order to check for bottlenecks in the game flow. Oddly enough, there wasn’t an obvious churning point where players were more likely to leave the game. Departures were spread out pretty evenly throughout the tutorial. It was simply too long.

After a lot of experimentation, we shortened the tutorial dramatically, leaving out some of the less critical information. To offset this, we added a series of early game achievements that players could pursue at their own speed. These goals effectively taught players how to upgrade their towns and improve their attacks without the heavy-handed nature of a formal tutorial. It worked too! When in doubt, keep the tutorial as short as possible, and let the players learn the other rules in a fun organic way.

Critical User Mass

One of the most challenging parts of managing a multiplayer game is the need for a large user base. You need players at all stages of progression, so that you can match players of similar skills for attacking. A competitive team tournament scene requires a lot of teams, which requires a lot of players. Whenever you make changes to the on-boarding process or some other aspect of the game, you’ll want a lot of new players to test whether your changes made sense. As soon as the player base starts to dip, players don’t get attacked as much, which lessens their incentive to build their defenses. They also don’t have to log-in as often to collect their resources. What’s the rush if nobody is going to steal their gold!

Indeed, Spelldom players launched fewer attacks as the active player base shrunk in the latter days. The majority of player activity started to center around the Daily Champ competition, which didn’t require as many players to foster a competitive leaderboard as the team competition.

The moral of the story? You’ll have to acquire a lot of users on a continuous basis to make your multiplayer game work. Unlike a single player game that can randomly catch fire without a large user base, a multiplayer game needs to already be on fire to attract more users organically. Test which ads get you the best quality users for the price—you’ll need all the users you can get! Also, be careful not to build a multiplayer game that is too niche. Spelldom appealed to fans who liked both word games and strategy games. This is a smaller population than fans of more vanilla strategy games, which made it harder for us to keep a large player base.

Daily Champ Competition

The Daily Champ competition was arguably the most popular aspect of Spelldom, although we didn’t even have it at launch. Our original daily game—the Gem Grab— was a purely single player experience that allowed players to get some extra gems. It was more of a side game than a major attraction like the Daily Champ.

There are a few takeaways here.

First, don’t underestimate the power of a great daily game. Anything that really encourages the user to open your game everyday is great. Honestly, this is probably even more true for a single player game, considering a successful multiplayer game should have other incentives for daily logins, such as team chat.

Second, the enduring popularity of the Daily Champ beyond the main multiplayer game probably suggests that Spelldom’s core users who played for months, and in some cases years, were more passionate about the word game aspect than the strategy. Yes, the Daily Champ had an advantage over our main game, as it didn’t require as many users to create good competition. Nevertheless, even the users that played the main game heavily for the longest time largely had incredible word game skills.

Spelldom was challenging. We’ve written about it in previous posts, but it’s always easy to misjudge the difficulty of a game that you play for countless hours during development. Mark that as a bonus lesson. Spelldom did a good job of retaining serious word game players. In the end, it just didn’t capture enough of the casual audience to keep the player base sufficiently high.

Conclusion

Thank you to everyone who played Spelldom. The game was a huge undertaking, and we’re humbled by all time people spent in our game. We hope to provide you with more entertainment in the future. Until then, keep your skills sharp. We usually like to make things challenging!

The post Spelldom Final Thoughts appeared first on HangZone.

Escape & Avenge will be released in the App Store worldwide on April 4, 2018. To help you understand the game, this is the App Description from the App Store:

You’re trapped in the dungeon of a medieval town. The king imprisoned you and killed the wizard—your magical friend and accomplice—for trying to overthrow the crown. At least that’s what the note on the wall says. You can’t remember anything, including who you are or how you got here. Can you escape the dungeon, return to the castle, and avenge your friend’s death? 

Escape and Avenge is an unconventional text-based adventure that reimagines the genre for mobile. With a couple quick taps, you can chain together any command you want—the perfect blend of speed, accuracy, and range of actions! Throw in some minimalist visual mini games and puzzles and you’ve got a new spin on interactive fiction! 

There are no ads or IAP—just a poor soul trapped in a dungeon who is looking for help.

Now that you know a little about the game, let’s pull back the curtain, and give you a brief look at our thought process in creating E&A.

Initial Thoughts on Creating the Game

Our initial wish for a new game was to make a text adventure using completely native iOS UI elements. We wanted a no frills look that would take complete advantage of the clean, understated beauty of the native UI. Any iOS user would feel comfortable and at home with the appearance and function of the UI. Also, a text adventure should take place primarily in the user’s imagination. By going with as standard of a UI as possible, we hoped to let the user’s mind fully engage in the game and create a completely unique view of the world of E&A.

Besides that wish, we knew we wanted to have a map. For anyone who has played Zork, the lack of a map can be either extremely frustrating or it add to the mystique of the game. Maybe both. Regardless, we wanted something as user friendly as possible. Our hope for the map was that the player could understand the layout of the world, they could quickly warp around the world, and they could gauge some idea of progress.

We also wanted players to be able to see their inventory. You pick up all kinds of items, and we wanted a streamlined way for players to see what they had and get a quick description. Given the desire to have a couple of views, we immediately felt that a tabViewController would be a great native fit to display the views. Next, we needed to figure out how to execute them.

Creating the Story and Text Input View

The first and most glaring problem that we faced was finding a graceful way to deal with text/command input. As you probably know, most traditional text adventures have a text entry spot where the user can enter literally any command. The game certainly can’t respond appropriately to everything, but it can give a response of at least, “you can’t do that,” no matter what. The beauty is that nothing is given away to the user. The player must figure out every command, and there can even be cool easter egg responses when entering certain commands.

Unfortunately, mobile devices are not the easiest for inputing a large amount of text. We aren’t just talking about a few quick sentences. There’s a lot of guessing and failed attempts involved in text adventures. You’re going to try to give or use a certain item in all kinds of ways before you finally find the solution. In my mind, typing all inputs for a mobile text adventure will only appeal to a dedicated subset of regular text adventure players. You’re cannibalizing a large part of your potential audience by doing straight user text input on mobile.

Nevertheless, the alternative isn’t suited either. Simply giving a choice of possible commands completely written out takes away much of the allure of the text adventure. Sure, you’re still making choices and progressing through the story, but it minimizes how you think through items and how to use them.

Our Answer to Text Input

We are extremely happy with how our text input solution turned out. Our solution leverages native iOS tableViews, and allows the user to construct their sentences piece by piece with simple, quick taps.

The user is presented with all possible action verbs to begin with. Upon tapping one, they are given options for an object or modifier to go with that action. Sentences can build even further as you might start with “Use,” and then have to select an object, then a person or place to put or give the object to. It’s simple, quick, and very open-ended. Yes, it does restrict certain off the wall text inputs, but we feel the speed, accuracy, and efficiency make it the ideal solution for a mobile text adventure. We can’t wait for you to try it and get your feedback!

Other Design Choices

The design of the other elements of the game are a little more straightforward. The map and mini games (Yes, mini games!) get laid out in a storyboard along with all of the other views. Some of them are certainly nice exercises in constraints, but all were designed to be as fluid, simplistic, and minimalist as possible.

On-Boarding New Players

That gives you some idea on the interface design choices behind the game. There is still the issue of on-boarding new players, though. Do we need a tutorial? Do players already know how text adventures work well? There’s always the worry of on-boarding players too slowly with content that is too easy, or throwing players recklessly into a challenging, confusing world with unknown controls. Both are problems and are quick ways to lose users.

Our solution is one that I feel is optimal for all games if you can make it work. There is no tutorial. Players jump immediately into the game. However, the game restricts their movement as they try to solve puzzles to understand how to navigate the game. A quick mini-game opens the experience, and then, players find themselves locked in a dungeon with no way out. Both of these tasks allow the player to focus completely on a known problem as they understand the feel and objective of the game.

The Story

Don’t worry, no spoilers here, but know that the story is beautiful. There are a vibrant cast of characters, dropped hints, red herrings, and the satisfaction of solving puzzles to advance the story. And the twists, oh the twists! We hope that you will be engaged and brimming with emotion throughout.

To add more flavor to the experience, we have a number of minimalist mini games throughout the story. These will hopefully add action, fun, and excitement to the game. They also help bring the story to life. You can’t always just say you want something; sometimes you have to get it yourself!

Conclusion

Thanks so much for reading about our latest game, Escape & Avenge. We hope that you enjoy playing the game as much as we enjoyed making it for you! You can see more about the game at our dedicated Escape & Avenge page. If you have any questions about the game, please feel free to reach out to us. As always, thanks for reading the HangZone blog!

The post Escape & Avenge: A Developer Preview appeared first on HangZone.

iOS 11 for Users

Let’s walk through some new features that iOS 11 users may find interesting. This is far from a comprehensive breakdown of everything that is new in the operating system, but these are some of the major changes.

Redesigned Control Center

One of the first things you probably noticed about the new iOS is a fancy new Control Center. As you may know, the Control Center is the options menu that appears when you swipe up from the bottom of your phone. On iOS 10, the Control Center had two pages of options that you could swipe between. The first page contained a handful of connectivity, brightness, and utility shortcut options (you can see a picture below), while the second page was solely music options. With iOS 11, the Control Center is down to one page, but it has more options. You see more icons, fewer words, and a couple of missing commands. Lucky for us, nothing is actually gone. There is extensive use of force touch on this menu to unlock additional options. If you force touch the connectivity section in the top left, you will find an option for AirDrop and Personal Hotspot as well. FYI, the new green icon in this section is for toggling cellular data. You can also force touch the brightness bar to toggle night shift, and get quick selections for mirroring and different utilities with force touch.

Aside from everything you see out of the box, you can further customize your Control Center on iOS 11. By going to Settings->Control Center->Customize Controls, you are able to select additional controls to appear at the bottom of the Control Center. You can be one swipe away from Notes, Alarm, Wallet, or many other apps. All in all, I’m a fan of the new Control Center, but the heavy use of force touch without much in the way of instructions is a pretty big leap for the average user.

Files

The other thing that jumped out to me in iOS 11 is that there is a new app that’s automatically downloaded! This app is called “Files”. It allows for a single place to browse, search, and organize all of you files on your iOS device. You can quickly find and edit your files saved to iCloud as well as files on third party apps such as Box, Dropbox, Google Drive, and more. In my opinion, this is a move by Apple to make the iPad more of a productivity device. You can select the files that you want to work in like you would on a computer. I believe this will have minimal utility for the average iPhone user though. Nevertheless, it is a nice update, and hopefully good news for the work that can be accomplished from your iOS devices going forward.

Messages Updates

The messages app got a slight facelift. Notably, apps are presented slightly different in the App Drawer by using a horizontal sliding bar of icons. It’s a nice presentation and allows for easy selection. A new feature was also added where you can hold down the languages button on the keyboard and change to a one hand keyboard. This simply moves the keys closer to either the left or right side of the screen so that they are easier to reach with one hand

The most interesting messages feature, in my mind, isn’t available yet, but should be soon. Apple Pay is going to be used to allow users to send money to other people through messages. There will be an Apple Pay app icon in the App Drawer that allows you to send money to friends from any card that is set up in your Wallet app. You will also be able to receive money into a new Apple Pay Cash account that will be available in your Wallet app. This money can be spent via Apple Pay, or it can be transferred to the user’s bank account. This is a huge feature! Watch out Venmo!

Photos Updates

The camera uses new compression technology to take photos of the same quality but that have a smaller file size. Definitely a good improvement! Live Photos are also getting a fun upgrade this year. You can add some more excitement to the photos by putting a loop, bounce, or long exposure effect on them. There are also new filters, and lots of new editing options for both live photos and standard photos.

My favorite new imaging feature is that screen capture recording is now available on the phone. Before, the easiest way to do this was to connect your phone to a computer and do a screen capture video through QuickTime. Now, it can be as quick as adding screen recording to your Control Center, and you are a swipe away. What a time to be alive!

Notes Update

A document scanner is added to the Notes app! Seems like a funny place to hide it, but that’s where it is. If you create a new note or enter an existing note (from your phone or iCloud, not email), press the plus sign button above the keyboard, and select “Scan Documents”. It seems a long time coming for Apple to have their own document scanner on iOS, but it is fantastic.

iPad Updates

There are a number of new features that are only for the iPad. The general idea in all of these features seems to be an improvement of the device’s productivity. A new dock that includes more apps allows the ability to swipe from anywhere and instantly switch to a new app. There is a Slide Over feature that enables you to open an app over another without fully switching to the new app. For example, open Messages from the dock and continue a conversation over whatever app you’re currently using. Drag and drop is also now available! With pictures and email open in split view, simply drag and drop and image to add it to an email. Multitasking on the iPad is better than ever.

Miscellaneous

I only highlighted a handful of changes, but there are many more minor tweaks and new features. Siri, the App Store, Maps, and the Home app all got nice upgrades to mention a few. Apple is also helping you stay safer with a new “Do Not Disturb While Driving” option. If you’re interested in learning about what else iOS 11 has in store, check out Apple’s website for more information.

iOS 11 for Developers

So far, we’ve mainly touched on features that users can take advantage of while using an iOS device. While awesome for the user, we haven’t touched on much that can be incorporated into your new or existing apps (other than video recording, which is awesome for making preview videos). Don’t fret. There are some exciting new frameworks for you to take advantage of.

ARKit

ARKit is a new framework for iOS 11 that allows developers to more easily create augmented reality apps. Pokemon Go was the first highly successful AR app for iOS, and it has only added to the excitement and fervor over what can be accomplished through AR. Apple is extremely high on augmented reality at the moment. Aside from pushing the new framework, the top highlighted sections in both the Games and Apps sections in the App Store are for Augmented Reality apps.

ARKit uses Core Motion data with camera sensor data to allow the device to understand how it moves in a room with precision. Aside from it’s positioning, ARKit allows the device to find horizontal planes like tables and floors from analyzing the scene that is presented through the camera view. Being able to instantly recognize flat surfaces and floors is what makes the framework so dynamic. You can instantly place objects correctly on the ground, on a table, or wherever needed. Your AR zombies can easily walk instead of fly! ARKit does require the Apple A9 processor or higher, so it isn’t available for all legacy devices. It is available for use in third party development tools such as Unity!

Core ML

The other exciting new framework available with iOS 11 also happens to be a big tech buzzword. Core ML is a new foundational machine learning framework that is already used across Apple products. It helps with things such as suggesting the next word in QuickType or matching faces when using the Photos app. Realtime image recognition and handwriting recognition are also exciting uses that are leveraging machine learning to become a reality. Prior to this framework, trying to conduct machine learning live on your app would require a great deal of code and computing power. As you may of guessed, machine learning is very technical and going into full explanations of the different avenues this framework can be taken is beyond the breadth of this blog post. There are really exciting things here, though, as the vision and natural language processing frameworks allow you to do very interesting things with image and language detection. You can also integrate learned models into you app, to immediately analyze data.

Miscellaneous

The Camera has a new Depth Map API, which is created for portrait mode and allows for custom depth features. You may have seen Apple’s demonstration at their latest iPhone event where they demoed apps that leveraged this technology. Business Chat is a new tool that will allow businesses to chat with customers through Messages. Customers will also be able to make purchases directly through Messages. This could be a great to way for businesses and customers alike to better engage one another about products, questions, and purchases.

iPhone X Design

Although iOS 11 likely won’t require updates to existing apps in the App Store, iPhone X likely will. Apple’s newest phone has a design, which is unlike anything we’ve seen from Apple. The screen goes to the edges of the screen except for a cutout around the new sensor housing for the true depth camera. This is Apple’s attempt to create an iPhone that is entirely screen. Not only do you need to work around the new cutout section, but all of the corners are now beveled and there is no home button. In lieu of the home button, there is a bar that you can press/slide up from inside apps that will allow you to return to the home screen. Also, the screen is 1125 pixels wide by 2436 pixels tall. This is a much taller aspect ratio than any other Apple device.

So, how do you go about designing/redesigning your app to look good on such a unique screen? If your app consists only of standard, system-provided UI elements, you are in luck. These elements will keep the content in the “safe area” of the screen, where none of the content gets too close to the top or bottom, but the background will extend to these areas. Supporting iPhone X should also be relatively easy if your app uses Auto Layout with safe area and margin layout guides. You may have some custom background issues, but all of you UI elements should be appropriately positioned because of theses guides. The real issue comes in custom games. Most games are not made with auto layout, and HUD elements and buttons are oftentimes positioned against edges of the screen. You will also need redesigns or new cuts of your backgrounds because the new aspect ratio is so much taller than the any previous device, scaling existing background likely will not work well. Overall games will likely need a larger background to fill the top and bottom of the screen, and they will need to target the “safe area” for their gameplay.

Conclusion

There are a lot of new features that are available in iOS 11. I covered many, but certainly not all of the new things available to both users and developers with the new operating system. If you wish to learn more about any of the features, I strongly encourage you to visit Apple’s website. Until next time, thanks for reading the HangZone blog!

The post What’s New from Apple with iOS 11 appeared first on HangZone.

The Fix

We need to tell our project to compile for other architectures. In order to do so, we need to edit two files. First, head over to your application.mk. Open it up and find this line.

APP_ABI := armeabi

Change it to the following.

APP_ABI := armeabi armeabi-v7a x86

Now find your gradle.properties, and locate the following line.

PROP_APP_ABI=armeabi

Add the other architectures, separated by colons, and we’re good to go!

PROP_APP_ABI=armeabi:armeabi-v7a:x86

Time to Recompile

Open up Terminal and navigate to your project’s directory. Type in the following.

cocos compile -pandroid —android-studio

Note that you might see other people specify building for a specific architecture as part of this command. We don’t need to do that here. The changes we just made will allow us to build for multiple architectures within a single APK file. This build will take about three times longer, since we’re building for three times as many architectures. Watch as the lines zip by on the Terminal window. You’ll see it build everything for armeabi first, just like it always did. Then followed by repeating all the same classes for armeabi-v7a, then the same for x86.

Now you have a debug APK file. You can drag it into your x86 emulator and watch it run! When you’re ready to deploy your app out in the wild, open your Build menu in Android Studio and select Generate Signed APK. The release APK will be ready to go!

Some Final Thoughts

After you add the extra architectures, your APK size will increase. This could present an issue if you’re trying to stay under 100MB, and this pushes you over the threshold. Don’t worry—you have options! You can use multiple APK files to handle different architectures. They need to have the same package name and be signed with the same code, but they should have different version numbers. You can read Google’s instructions for handling multiple APKs here.

Setting up Cocos2d-x in Android is trickier than iOS. If you found your way here trying to troubleshoot the INSTALL_FAILED_NO_MATCHING_ABIS error, I hope you’re back on track!

The post How to Build a Cocos2d-x Android App for Multiple Architectures appeared first on HangZone.

The Code

For starters, you need a little code to show the prompt. Here’s the Objective-C approach.

if ([SKStoreReviewController class]) {
    [SKStoreReviewController requestReview];
}

The class is brand new, so first we have to check if the user’s operating system can handle it. Then, we fire off the review request. That’s it! If you’re using Swift, the code looks like this.

if #available( iOS 10.3,*) {
    SKStoreReviewController.requestReview()
}

For either of these approaches, make sure to import StoreKit. If you fire up in a blank app, it looks like this.

What’s Different

The most exciting reason to implement the SKStoreReviewController prompts is that users can leave a rating without leaving your app. Previously, you had to redirect users to the App Store to leave a review. That’s a much more cumbersome experience, because few users want to leave the game. Consequently, the conversion rate on getting users to leave a review when prompted should increase dramatically.

Moreover, there is a good chance that these incremental ratings will trend to the higher side. The users who were motivated to quit playing the app and leave a review are often the ones having a negative experience. Now you can collect ratings from users who are having too much fun to leave the app!

While conversions will go up, the number of prompts will go down. The new requestReview method doesn’t guarantee that the user will even see a prompt. In fact, you can only show a user three prompts per year! On the whole, this will be a major improvement for users who are tired of apps bombarding them with review requests. If the user didn’t review the app after the third request, they probably weren’t going to anyway, so this shouldn’t be a tremendous loss for developers. Just make sure to use your requests wisely. If you’ve developed a game, try throwing a review prompt after the user has beaten a level or done something else rewarding. You’ll have a better conversion rate. Also, don’t hook up the requestReview method to a button in your interface. Since the method doesn’t guarantee the prompt to appear, you don’t want a user tapping away at a button with nothing happening!

Finally, Apple added an option under Settings that allows users to disable all SKStoreReviewController prompts. Many users will certainly go this route, but these are likely the same users that wouldn’t have reviewed your app anyway. Nevertheless, this will have negative impact on the number of reviews you could have potentially accumulated under the new system.

Conclusion

On the whole, the new system is a big win for users. It prevents developers from displaying users with too many review requests without giving them a way to turn off the prompts. The ability to rate without exiting the app is sure to improve conversion rates, which will help developers out too.

This will bring an end to some of the elaborate custom solutions of the past. Some developers had grown fond of asking users if they were enjoying the app before directing happy users to the App Store to leave a review and directing unhappy users to an email address to leave a complaint. That kept some of the negative reviews out of the App Store. I’m sure these developers are sad to see Apple do away with this. Nevertheless, forcing everyone onto a standard system improves the integrity of App Store ratings, so I’m for it!

The post SKStoreReviewController: The New Review Prompt for iOS appeared first on HangZone.

Regardless of how involved you want to get into the art element of app development, it’s helpful to have some basic skills with the different types of graphics you might require. You may think that you need expensive software, but there are some free alternatives that are worthy substitutes. Between the following three free programs, you’ll be equipped to handle whatever type of image you want to create.

GIMP

The most well-known image editing program is Adobe Photoshop, while the most well-known free counterpart is GIMP. These programs allow you to make raster graphics. You’re essentially drawing an image that’s composed of several pixels. This is ideal for drawing realistic images. You can handle intricate shading, run a variety of filters, and manage layers of complex art.

While GIMP is tremendous for making detailed art for a 2D game, it has two major limitations. First, you’re restricted to a 2D canvas, so you’re not going to make any models for a 3D game. Second, the raster graphics that you create in GIMP cannot be scaled up without losing quality. Since there are so many different device sizes to accommodate with your app, you need to create your images in a variety of sizes. If you’re making your images in GIMP, you want to make your images as large as possible, and scale down smaller copies as needed. If a device comes out in the future that needs a larger size image than your original, however, you’ll have to recreate the image.

You can download GIMP here.

Inkscape

Unlike GIMP’s raster graphics, Inkscape (the free alternative to Adobe Illustrator) creates vector graphics. Instead of storing individual pixels, vector graphics store the shapes that compose the image as a series of equations. This makes for dramatically smaller file sizes, and it allows you to scale images up without distortion. Consequently, Inkscape is a fantastic tool to create images for your app. It is ideal for the cartoonish 2D artwork that’s popular in many classic mobile games.

On the negative side, you can’t create the same level of texture and realism that GIMP allows. That doesn’t necessarily mean you won’t use Inkscape for an app that requires detailed art. It’s often easier to create untextured images in Inkscape, then finish up the texture and detail in GIMP. Between these two programs, you’ve got 2D graphics covered.

You can download Inkscape here.

Blender

When you want a 3D model, Blender is the solution. It has most of the same functionality as paid alternatives, such as Maya. You can rig your 3D models for animation and run physics simulations. If you’re creating a 3D game in Unity, this is a handy tool to have in your arsenal.

That’s not to say you should ignore the other graphic tools, just because you’re making a 3D app. You will likely have 2D interface elements that are better suited for GIMP or Inkscape. You also might want to apply a 2D texture to one of your 3D models. There’s a good chance you’ll make that in GIMP.

You can download Blender here.

Free Art Software Recap

If you’re into app development, you’re eventually going to want to create some art assets. These  three programs are all free. There’s no reason not to check them out. Even if you do have the paid version of one of these softwares, you might still want to check out the programs I highlighted here. Personally, I find Inkscape dramatically quicker than Illustrator for exporting a bunch of images stored in one project. Have fun with the artistic side of mobile app development!

The post The Three Free Image Tools You Need for App Development appeared first on HangZone.