Posted on Leave a comment

Behind the Design: Sayonara Wild Hearts

Art can reflect emotions we can’t process in spoken word alone: Paintings capture these feelings in color and scale, films reflect our world back to us through new light, and music puts melody to the words we don’t know how to — or cannot — say.

The road of relationships is particularly well-traveled where art is concerned. Sayonara Wild Hearts, however, uses the approachability of the topic and transforms it into an exploration on lost love, finding independence, and moving on. Ever-shifting gameplay and an electrifying beat capture the stages of reflecting on a broken relationship, illuminated by a psychedelic canvas of bright rainbow colors and geometric shapes.

“This is a game that is very much about the music,” says Simon Flesser, who along with his co-founder Gordon Gardebäck makes up the game company Simogo. While the two have often created playlists of brainstorm music and scoring for their games, the conceit for Sayonara was unique: What if you could take the ubiquity of the breakup album and make it interactive through the best tropes of 80s and 90s arcade games?

“We wanted everything in the game to echo that sense of approachability,” Flesser says. “[And] we naturally fell into the idea of wanting to make something that felt like the arcade games we great up with and played when we were young.” Games like Star Fox provided inspiration for the team, as did the musical integration through titles like Rez. “We [also] often try to find inspiration in things we don’t necessarily like, but see the potential in,” Flesser says. “We looked at games that use video a lot… where those game fail in interactivity, they really succeed in spectacle. So we wanted to try and capture that feeling, while not losing the feeling of being in constant control of the game.”

To capture the musical foundation for the game, Simogo began with a large playlist of music that represented the essence of the project. “It started very differently, with a much more sinister tone,” Flesser tells us. The game’s prototype reflected this darker style — until, one day, an overly energetic pop song from the playlist came into rotation during a playtest.

Early concept art for Sayonara Wild Hearts.

“It just clicked,” Flesser says. “I literally said [to the team], ‘This is it.’” They began writing original pop songs around this new tone the very next day. And as the new songs came into focus, the prototype’s color scheme began to shift as well. “[The songs] were in hues of purple and pink and blue,” Flesser says. “It painted the game for us, the music.”

Go with what your heart tells you and what your gut tells you… Because I think that’s the only way that you will get something that feels like it has something to say or that it’s an honest piece of work… once you start thinking too much about what you’re making and what you’re trying to say with it, then there’s some kind of intangible magic lost because the project needs to tell you what it is instead of you telling the project what it is.

Simon Flesser, Simogo

Simogo continued playing with recognizable themes and objects as the team refined characters for Sayonara. “[Characters] are all based on cards from the Major Arcana deck,” Flesser says. The tarot cards also influenced some of the broader conceptual designs and bigger items like the vehicles driven by various game characters.

Within the tarot card frame, Sayonara’s distinctive colors and geometric shapes create contrast between characters and the background, providing crisp views as people play through the game’s chapters with taps and swipes. “We needed to work with very simple shapes and distinctive colors because it’s just swooshing by… you can’t have much detail,” says Flesser. “We worked a lot with the contrast between dangerous stuff, positive stuff, characters, vehicles.” Each of these items was both differently colored and shaped to provide the maximum best possible contrast.

Because the game moves so fast, it was imperative to create controls both easy to follow and intuitive to use. As such, the team intentionally kept the controls platform agnostic. This also helps the game live equally at home on a touchscreen, third-party game controller, or Apple TV remote. “We opted for a more swiped base input for gameplay so that the player avatar moves when the player actually moves their finger,” Flesser says.

Swipe controls continued to evolve as the team tested prototypes, with the game’s constant camera movements and zooms being a particular challenge. “We definitely learned a lot about feedback in 3D space versus 2D space,” Flesser says. “The same type of movement will feel radically different depending on how far away the camera is [and] how much the camera moves versus how much it rotates around its own axis or around the player avatar axis.”

To smooth the experience, Simogo adjusted swipe responsivity and feedback to the camera’s active perspective and zoom level, while keeping the character in the same relative space.

Together, this kind of care and design work in harmony to make Sayonara Wild Hearts a standout game on Apple platforms. Flesser had this to say about the game’s journey to Apple Design Award-winner:

We always just want to make something that you enjoy yourself. And if you do something you enjoy yourself, then chances are that there might be one or two other people that will enjoy it as well.

Sayonara Wild Hearts

Download Sayonara Wild Hearts

Learn more about Sayonara Wild Hearts on the App Store

Posted on Leave a comment

Enhance SMS-delivered code security with domain-bound codes

Many websites and apps offer additional login security in the form of SMS-delivered codes. On iPhone, Security Code AutoFill makes it easy for people to quickly supply these codes by offering them in the QuickType bar. On a Mac running macOS Big Sur, Mac Catalyst and AppKit apps can take advantage of this feature as well.

Additionally, starting with iOS 14 and macOS Big Sur, we’re adding an extra layer of security to SMS-delivered codes by allowing you to associate codes with a specific web domain.

How domain-bound codes work

When you use a domain-bound code, AutoFill will suggest the code if — and only if — the domain is a match for the website or one of your app’s associated domains. For example, if you receive an SMS message that ends with @example.com #123456, AutoFill will offer to fill that code when they interact with example.com, any of its subdomains, or an app associated with example.com. If instead you receive an SMS message that ends with @example.net #123456, AutoFill will not offer the code on example.com or in example.com’s associated app. This makes it harder for an attacker to trick someone into entering one-time codes into a phishing site.

While iOS and macOS will also display regular SMS-delivered codes in addition to domain-bound codes, we encourage everyone employing this authentication method to adopt this standard to provide a more secure experience for people on your website or app. If a message contains no domain information, it will continue to be offered in all relevant fields through AutoFill.

How to set up SMS domain-bound codes

You can take advantage of domain-bound codes on both websites and apps with associated domains.

Set up domain-bound codes for your website
In most cases, AutoFill should work automatically on Safari for iOS and macOS Big Sur, and requires no additional information from you. In cases where it does not, you can add the autocomplete=one-time-code attribute to your web page’s text field. This cues Safari to offer applicable codes in that field.

Set up domain-bound codes for your app
You can support domain-bound codes by providing an associated domain for your app. If you support Universal Links for your domain, or if AutoFill is currently suggesting saved passwords for your domain in your app’s login screens, your app is already associated with your domain.

Learn more about supporting associated domains

Note: If you’re running into issues when testing your app’s login flows, you may need to provide an additional hint about which fields in your app are one-time code fields. For iOS and Mac Catalyst apps, set the field’s textContentType property to UITextContentType.oneTimeCode. For AppKit apps on macOS, NSTextField has a contentType property that you should set to NSTextContentTypeOneTimeCode.


How to format SMS domain-bound codes

Once your app or website is set up to receive domain-bound codes, you’ll need to provide a simple addition to the SMS messages you send through your backend service to include both the domain and code. Here’s what the text you’ll send looks like:

123456 is your Example code. @example.com #123456

Everything above the last line of the message is freeform. You’re free to customize this part however you like, but it should be something that makes sense to people receiving the code.

The last line of this message gives AutoFill on iPhone, iPad, or Mac the information it needs to bind the domain and code together and suggest the code for the appropriate website or app.

In order for domain-bound codes to work properly, you must include this information in the last line of the message, and it must contain the domain and code in the correct order.

@example.com

This is the first part of that last line, and contains the domain of the app or website where you want the code to fill in. Make sure to put a single space after your domain before you begin the segment with your one-time code.

#123456 (represents the code 123456)

The second part of the last line begins with # and contains the string with your app or website’s one-time code.

Improve your SMS-delivered codes

Domain-bound codes are straightforward for developers to implement, easy for people using your apps and websites to understand, and add more security to the SMS-delivered codes. You can also learn more about domain-bound codes and the development of the message format in the W3C’s Web Platform Incubator Community Group.

Resources

Learn more about domain-bound codes

Allowing Apps and Websites to Link to Your Content

Posted on Leave a comment

Verify your app’s integrity with the new App Attest API

Part of the DeviceCheck services, the new App Attest API helps protect against security threats to your apps on iOS 14 or later, reducing fraudulent use of your services. With App Attest, you can generate a special cryptographic key on a device and use it to validate the integrity of your app before your server provides access to sensitive data.

Learn more

Posted on Leave a comment

Behind the Design: Shapr3D

Five years ago, István Csanády hung a piece of paper on the wall of his nascent company’s all-too-small office. Scrawled upon it: “Easy should be easy. Hard must not be impossible.”

Though this phrase was written on sheet paper, it might have well been etched into stone. It became the founding principle for Csanády’s app, Shapr3D — a reinvention of computer-assisted design (CAD) systems, created exclusively with Multi-Touch and Apple Pencil in mind.

While inspirational phrases have spawned many a weightless office poster (and a smattering of snarky variations), this one was weighted in truth by the frustrating real-world digital design experiences of Csanády’s family. “We have eight or nine architects in three generations in the family,” he says.

As a child, he remembers his mother grousing over the arduous multi-month process of getting new CAD software, which often involved enrolling in a costly school to understand how the program worked. “Instead, eventually, she [would just hire] a couple of CAD draftsmen.”

As both a 3D modeling enthusiast and a budding software engineer, Csanády was instantly drawn to the problem. “A great product is characterized by a minimal tool time,” Csanády says. “Nobody really wants to [take time to] learn to use their software.“

He founded his first CAD startup in 2010 after a brief stint as an iPhone developer. While this first venture was unsuccessful, Csanády kept thinking. He took long bike rides. He pondered the problem in the late hours of the night. And he began creating the first prototypes of a touch-based 3D modeling system for iPad.

“I got obsessed,” he confesses. In 2014, out of pure faith in the endeavor, Csanády quit his job as a senior software engineer and got to work. While iPad Pro and Pencil had at the time yet to be introduced, he started exploring what a touch-and-stylus interface might look like.

“The best interactions are always the ones that have physical analogies,” Csanády says. He drew inspiration from tactile tools, creating digital controls for each modeling operation that mimicked their real-world counterparts. And when iPad Pro and Apple Pencil launched, Csanády and team quickly brought the drawing tool into their planning.

“What makes the Apple Pencil and its stylus interaction super powerful is that both are metaphors for the real world,” he says. “And because they are metaphors for the physical world around us, we just don’t have to educate [someone] about the function of these input devices… That radically shortens the learning curve.”

Csanády and his newly-growing team used Multi-Touch and Apple Pencil to build a solid foundation for Shapr3D. Perfecting it, however, was a years-long affair. “There are no shortcuts,” he says. “We did hundreds of prototypes.”

The team interviewed professional 3D modelers and architects, running case studies and inviting them to use — and sometimes break — their software. “You need to see them fail a thousand times,” he says. “And based on those failures, we can tweak tiny little things, and step-by-step get to the right solution.”

Csanády has more than a few lessons he and his team have learned when it comes to designing a professional multitouch interface. “Explicit is always better than implicit,” he says. As an example, he references Shapr3D’s push-pull interface, which displays arrow-handles on items that people can ‘grab’ to move something around the screen. “Until a couple of years ago, we didn’t show those arrows,” he says. “That was one of the greatest learnings of all time… if we explicitly show these handles, that increases the success rate by two orders of magnitude.”

Four years after launch, Shapr3D maintains this obsessive focus on building the perfect tool for its professionals. “What works for Shapr3D works because we have a very specific audience in a very specific context,” Csanády says. “The product works for our audience because we designed it with them in mind.”

The Shapr3D team has grown significantly since its early days in that cramped office. Csanády employs a staff of 55 in Budapest, all of whom are working tirelessly to keep iterating and improving upon the app to make it an even better tool for professionals. They’ve added exhaustive tutorials, contextual and adaptive controls, keyboard shortcuts, and continue to adjust the workflow to be an even smoother process for everyone who uses the app. ”It’s about always raising the bar and always being a little unhappy,” he says. “You can always do 10 percent better… Never be satisfied with what you have built.”

In addition to field studies, the team incorporates analytics, usage data, and App Store reviews into its long-term product planning. They continuously evaluate opportunities, identify the gaps where the company is now, and look at where they want to be in the future. It’s a complex multidimensional puzzle, but Csanády’s vision is clear — and just a little bit ambitious. “We want to become a verb, like Xerox.”


Learn more about Shapr3D

Read about Shapr3D on the App Store

Download Shapr3D on the App Store

Posted on Leave a comment

Should I use WKWebView or SFSafariViewController for web views in my app?

Whether your app needs to provide a full web browsing experience, display richly-styled content, or incorporate external websites without taking people out of your app, you can make the experience smooth and seamless by choosing the right API.

You can display web content inside of your app with both the WKWebView and SFSafariViewController APIs. But which is the best for your app’s needs?

WKWebView is part of the WebKit framework: It allows you to embed web content into your app as a seamless part of your app’s UI. You can present a full or partial view of web content directly in your app by loading a view that leverages existing HTML, CSS, and JavaScript content or create your own if your layout and styling requirements are better satisfied by using web technologies.


Note: If your app uses the deprecated UIWebView API to display web content, you will need to update your code as soon as possible for improved security, performance, and reliability. Learn more:

Updating Apps that Use Web Views


SFSafariViewController is part of the SafariServices framework, and lets your users browse a web page, or a website right inside your app. With it, people can enjoy the same web browsing experience they get in Safari — including features like Password Autofill, Reader, and Secure Browsing — without ever having to leave your app.

These two APIs can provide a lot of the heavy lifting for web technologies in your app, though there are a few instances where we recommend alternative frameworks. For example, when presenting a web-based login screen for your app, use ASWebAuthenticationSession to provide people with the most secure experience.

When should I use WKWebView?

If you need to customize or control the display of web content — or interact with the content itself — WKWebView will be most flexible in helping you build the implementation that suits your needs. (If your app is designed to be used offline, make sure any WKWebView content has appropriate fallbacks and alerts.)

Additionally, consider WKWebView if you need to display HTML or CSS content inline or as part of rest of your app’s user interface.

The Washington Post’s development team implemented WKWebView to display content from the Washington Post website within their app.

In short, WKWebView is an incredibly powerful technology that works in tandem with iOS and macOS frameworks. That said, WKWebView is not designed to outright replace system technologies and frameworks. For example, you should avoid using it in place of device-optimized UIKit classes like UITableView, UIImage, and UIButton, as you lose out on core system behaviors and provide a subpar experience for people who use your app.

When should I use SFSafariViewController?

When you want display websites inside your app without sending people to Safari, the best tool is SFSafariViewController. By using this API, you can effectively embed the Safari interface — and many of its key features and privacy protections — into your app.

The Apple Developer app displays web links through SFSafariViewController.

SFSafariViewController is best used when you need to display interactive web experiences on websites you don’t own, or showcase parts of your web content that are generally outside the scope of your app.


Resources

WKWebView

SFSafariViewController

Customized Loading in WKWebView

WKWebView allows you to seamlessly integrate web content into your app. Learn how new features in WKWebView allow you to manage cookies, filter unwanted content, and give you more control over loading web content.

What’s New in Safari View Controller

Safari View Controller brings Safari’s features into your app for browsing the web and logging in with 3rd party services. Learn how to use new APIs to customize Safari View Controller’s UI to fit your app’s style.

Posted on Leave a comment

Design a great in-app purchase experience for Apple Watch

Your Apple Watch apps can help people achieve their personal fitness goals, monitor their health, get actionable information straight to their wrist, and so much more. And with watchOS 6.2, you can further expand your customers’ experiences by offering in-app purchases and subscription flows directly on Apple Watch.

These interactions use the same StoreKit APIs available for iOS app development, allowing you to quickly implement them in your watchOS apps, and they can be added to both independent watchOS apps (which can function fully independently of an iOS app) and dependent watchOS apps (which need an iOS companion app to function).

Let’s take a look at why and when you might want to offer purchases within your app, as well as some best practices around implementing a great flow for your customers.

When to offer in-app purchases and subscriptions

In-app purchases and subscriptions can make your Apple Watch apps even better by offering both additional content and purchasing flexibility.

If you have an independent app, people can already download it directly through the Watch App Store, and in-app purchases and subscriptions build upon that independence. Apps dependent on the companion iOS app can benefit, too, as these give people more power to purchase additional content without having to reach for their iPhone.

When deciding whether to bring an in-app purchase or subscription flow to your app, consider what you’re offering. Does this purchase or subscription unlock anything specific to Apple Watch? Fitness apps, for instance, might supply additional workouts, or let your customers subscribe to a monthly program.

Once you’ve decided to add an in-app purchase or subscription, give some thought to when your app should display it. These prompts are most helpful when they provide a next step for your customers to unlock further functionality within your app.

Best practices for a great in-app purchase and subscription experience

Effective purchase flows on Apple Watch are concise and clear. Your messaging must be easily scannable, and your options must be easy to compare with each other on a small screen. Keeping things short and sweet will help ensure that people can evaluate the choices, make a decision quickly, and carry on with the task at hand.

Make your choices clear
When offering one-time purchases and subscriptions alongside each other, ensure that every option is defined clearly. Adding written overviews can help people differentiate between the two and make an informed choice.

We recommend including the following information in your overview:

  • What this purchase enables on your Apple Watch app
  • Whether it’s a one-time purchase or recurring subscription

Restore the past
Whenever you offer subscription or in-app purchase content, provide a way for people to restore their subscriptions or purchases. The same goes for Apple Watch: Make sure your app presents a button below the option to purchase that can check for previously purchased content and restore it.

Don’t forget the fine print
While reading your subscription’s terms and conditions on Apple Watch may not sound like the most fun way for someone to spend their time, it’s important that your customers know exactly what they’re getting when they purchase something within your app. Every time you include a purchase screen on Apple Watch, you must include an option to read terms and conditions.

Review the App Store guidelines
There are specific requirements you need to include in your Watch app before you make in-app purchases and subscriptions available to your customers; check the App Store’s Guidelines and Resources for more information.


Resources

Watch “Creating Independent watchOS apps”

Learn more about auto-renewable subscriptions

Learn more about in-app purchases

Posted on Leave a comment

Behind the Design: StaffPad

Great composers bring forth melody from the silence of their imaginations. Long before the orchestra strikes its first chord, an intermixed whisper of invisible strings, brass and percussion lives within a composer’s mind. Transforming those melodic machinations into sheet music, however, is its own special challenge.

The classical greats relied on the tried-and-true method of writing on sheet paper, letting their creativity flow unabashed onto the page. Once written, however, each part had to be painstakingly copied and reproduced for each musician — and revisions were far from easy.

In contrast, modern digital composition software provides an incredible array of tools for composers and musicians. Despite the many benefits of these apps, however, they can come across as cold and complicated, creating unnecessary barriers between the music in someone’s mind and the notes that end up on a music stand.

“I was spending more time learning these notation programs… than I was actually writing the music,” composer and designer David William Hearn tells us. This dissonance provided him with the beginnings of a different sort of musical idea: an app that provided the inspirational and inviting structure of pen and paper with the powerful features of a digital notation app.

“[It] started out as quite a selfish endeavor,” Hearn shares with a smile. “The dream app that I always wanted.” He envisioned something that would not only allow him to write music quickly and with ease, interfacing and interacting with other musicians, but also presented the opportunity to record and playback.

With the help of cofounder and collaborator Dr. Matthew Tesch, Hearn’s dream app became StaffPad, an innovative approach to musical notation. Since its 2015 launch, StaffPad has continually evolved to take advantage of the latest technology, including a full rebuild and relaunch for iPad and Apple Pencil in early 2020.

“Musicians and composers generally appreciate power through simplicity,” says Hearn. “They want to focus on one thing only — the music. Every aspect of StaffPad’s design, both invisible and visible, was built with a no-compromise approach to enable that focus.” Subtle design choices create a feeling of unity between the composer’s environment and the interface as they transition into the app. The main screen’s background even changes color based on the weather and time of day to provide a welcoming atmosphere for creativity.

The paradox of choice is fascinating, but personally I feel being offered a couple of great choices beats having loads of potentially poor ones. You do need bravery in the design to believe the few choices you offer are the right ones.

David William Hearn, cofounder of StaffPad

The composition interface is free-form and inviting. The team specifically decided against the idea of a fixed page layout, knowing that people could use StaffPad on a device in any orientation or zoomed at any size. Instead, the app presents composers with an infinitely scrolling digital canvas of sheet music. Rather than ask the creator to pick specific styles or sizes before writing a new composition, they can just start notating, then share the correct size on export.

“There’s certainly a place for having perfect pixel, perfect layout control over every layer,” Hearn says. “But whilst you’re in a creative flow, you really don’t want to be thinking about page breaks or line breaks.”

While StaffPad is quite powerful in the options it provides composers, the app intentionally uses adaptive toolsets to help declutter its interface and guide composers to the right tool at the right moment. “We designed the most common things you do to be the most natural,” Hearn says. If a composer is writing for piano, for example, the app won’t display tools designed for percussion instruments.

That includes notational writing itself. StaffPad requires Apple Pencil — its precision is instrumental to interacting within the app. While the team considered alternative tools, they ultimately went with the methods that mapped accurately to how someone might write on paper. Pencil gives the composer differentiation, whereas touch is a complement to the overall process. “Touch to move. Pencil to draw. We make it very nuanced, but the dual concept is the key,” Hearn says.

That exploration also helped identify one of StaffPad’s defining features: toggling the erase tool through drawing pressure. They knew it would break the creative flow to add an extra button to toggle the erase tool. Instead, they relied upon an otherwise unused feature in the app — Apple Pencil’s pressure sensitivity, which isn’t needed for writing notation — and designed an erase toggle when pushing firmly on the Pencil. “I knew it had to be light enough that it didn’t feel dangerous, but also strong enough that it didn’t trigger accidentally while writing,” Hearn says. “We kept trying until it felt right.”

Another key feature of the app is its text recognition, which translates handwritten strokes or shapes into digital notes, rests, accidentals, articulations, and dynamics. “It’s actually consulting its own sort of music-theory brain,” Hearn says. Even with a scattering of scrawled notes, StaffPad is able to draw upon Core ML frameworks and models to decipher and craft digital orchestrations.

Despite the app’s ‘selfish’ origins, StaffPad has found support from people across the musical world. “One of my favorite things about the app is that it’s fostered this sense of kind of community ownership,” Hearn says. “People are really quite emotionally attached to it in a lot of ways.”

Hearn and team receive regular suggestions, feedback, and stories from their community. His favorite emails are those from teachers and students: “That raw inspiration that comes from the education sector is really amazing.”

StaffPad continues to explore new ways to support its audience, including its companion app, StaffPad Reader. The app allows musicians to digitally view and play scores from StaffPad, and even automatically turns pages in unison as they rehearse or perform. If the composer edits or transposes a score on StaffPad, the app also receives changes over the air, reformatting the parts in realtime.

Hearn and Tesch have even begun the process of introducing another natural input interface into the app: voice. “I believe voice will become a primary input method for most apps in the near future,” says Hearn. “Voice provides a vector into a nearly unlimited command set — and one that we already know how to use.”

Winning an Apple Design Award is just one note on the team’s musical journey. “There’s always more to do,” Hearn says. But over the last few years, he’s found joy in helping craft both the app and working with the team behind it. “A composer is a solitary animal,” he notes. An app-building team, less so. “[My] main learning has been how best to work to create a cohesive design and then explain that to a team of people.”


Learn more about StaffPad

Learn more about StaffPad on the App Store

Download StaffPad on the App Store

Posted on Leave a comment

Behind the Design: Sky: Children of the Light

The greatest pieces of art resonate within your mind and capture your heart. They pull you into lush, beautiful narratives, and keep you dreaming about their stories long after you walk away. And they can take many forms. “Many people cry for a movie or novel,” Jenova Chen tells us. “The first entertainment that made me cry was a game.”

A former film student, Chen never planned on a career in game development — he wanted to tell captivating stories and touch people’s lives. But while in school, he soon found himself gravitating toward interactive media. Together with co-founder Kellee Santiago, Chen created thatgamecompany to enhance human connection by expanding the range of emotional experiences possible in video games.

The world of Sky: Children of the Light.

“For the first 30 to 40 years, games were more designed for the core audience, the enthusiasts who embrace the new things,” Chen says. “But we are really now entering a new era… Everybody plays games.”

The studio’s first six years in operation resulted in Flow, Flower, and Journey, three award-winning games for Sony’s Playstation console. Their fourth game, Sky: Children of the Light, is the first created exclusively for iPhone and iPad. Though the artwork, controls, and story are new, the game’s spirit remains aligned with its predecessors: Make interactive art, designed for everyone.

We want to be the ultimate advocate for the human who plays our games.

Jenova Chen, creative director of Sky: Children of the Light

“At its core, Sky is a game about compassion and generosity,” Chen, the game’s creative director, says. “It’s about connecting people and nudging them to do good for each other.”

In Sky, players begin as a child of light, seeking fallen stars — the ancestral spirits of the realms. Players fly across cloudy dreamlike spaces, solving puzzles cooperatively and socializing within an enchanting world. While solo play is possible, Sky shines when fellow players work together. “It tries to evoke the bright side of humanity over the dark or the gray in an online game,” Chen says.

The multiplayer game celebrates collaboration and connection over competition.

Early on, it was clear that Sky would be an ambitious title for Chen and the creative team. This would be their first game for a mobile device, the first that relied on touch instead of console controllers, and their first attempt at an online multiplayer experience — one that celebrated connection over conflict. The team ultimately worked for seven years before bringing Sky to life, with more than 70 people contributing to the game over its creative development.

Chen was drawn to mobile gaming for Sky in part because of the approachability of iPhone and iPad. “When we design games, we should really think about accessibility and inclusion, to allow the game to be enjoyed by everyone,” he says. Consoles are expensive, and families generally only have a single piece of hardware and a few controllers within their household. In contrast, almost everyone owns a mobile device — it was the perfect platform for a multiplayer game that was open to all.

The transition from console to iPhone and iPad was a challenge for the entire studio. When the team began working on Sky in 2012, they were limited by the mobile hardware and screen sizes of that era — a far cry from the powerful Playstation infrastructure supporting their previous titles.

“Today, the iPhone is actually more powerful than the PlayStation that we developed for in the past,” Chen says, and Sky runs beautifully on both it and iPad. But to get there, the team had to iterate over multiple years of hardware and software updates. They were constantly refining the game’s look and feel, including developing a custom Metal engine to render Sky’s ethereal scenes, all while making sure the game would perform well and preserve battery life on device.

While engineers worked on the technical challenges, the game’s designers got to work creating the right control mechanisms and interface. “There are many, many barriers and design principles [on mobile] that are quite alien to console developers,” Chen says.

Chief of these was the touch screen: Players needed to traverse a three-dimensional space without physical buttons, triggers, or joysticks, and without on-screen controls blocking the game’s graphics or interface. “You’re trying to find the right combination of design and feedback that is actually better than a real controller,” Chen explains.

A player’s past gaming history was also an important factor in designing the controls. While console gaming often requires players to interact with a physical controller using both hands, that wasn’t the case for casual gamers. “Players without a console controller experience would never put two hands on the screen at the same time,” Chen says.

After several years of experimentation — including, at one point, a fully-functional flight simulator — the team landed on a simple set of familiar controls designed to appeal to everyone. For extra guidance, Chen and team even provided subtle interface rings in each corner, which expand and contract to indicate range and speed control.

That wasn’t the last of the controller changes, however. After Sky’s initial release and feedback from players, the team also added a two-hand mode to the game for those who wanted more of a console-like feel. “This is the first time I’ve made a game where the control scheme was not finite,” Chen says. But he also acknowledges the beauty in creating a game on a living platform. “We are actually making changes because the habit of how people use their phone is changing.”

It’s this relationship between player and creator that Chen finds fascinating about games. As with any artistic medium, the creator has the power to help amplify feelings and guide people through a story — its rises and falls, surges and sudden stops. “For design and for entertainment, it is all about that change of acceleration,” Chen says. “That pulse is what touches us emotionally.”

The interactivity of a game, however, creates a unique challenge for designers not to weigh too heavily upon the frame — to guide, but not to restrict. “The best design is a nudge, rather than a leash,” he says. “We want to make whomever is experiencing the [game] feel they are in control… We are not here to distract you. We are not here to force and bully you to do anything. We want to let you to make that [step]… and 100 percent own that experience.”

The designer is a powerful influence of what happens between the player who touches your interface and interacts with your game. With very small changes in the design, you can change how this person behaves, how they treat each other in your game. It’s your responsibility… how are these players going to interact with your app, with your game, on a daily basis?

Jenova Chen, creative director of Sky: Children of the Light

It’s this balance and fervent commitment to storytelling and inclusivity that makes Sky a joy for all to play — and a 2020 Apple Design Award winner. “Hearing from people that they appreciate the work that we’ve done is the best reward, really,” says Chen. “Ultimately, we are serving others.”


Learn more about thatgamecompany

Learn more about Sky: Children of the Light

Download Sky: Children of the Light

Read more about Sky: Children of the Light on the App Store

Posted on Leave a comment

Updates to Coding Terminology

At Apple, we’re working to remove and replace non-inclusive language across our developer ecosystem, including within Xcode, platform APIs, documentation, and open source projects. These changes began on June 22 with the beta software and developer documentation released at WWDC20 moving to terms such as allow list and deny list, and main as the default SCM branch in Xcode 12. An updated Apple Style Guide reflects these and other changes.

Developer APIs with exclusionary terms will be deprecated as we introduce replacements across internal codebases, public APIs, and open source projects, such as WebKit and Swift. We encourage you to closely monitor deprecation warnings across your codebases and to proactively move to the latest APIs available in the platform SDKs.

Posted on Leave a comment

Behind the Design: Where Cards Fall

Staking your future on a house of cards may not seem like the best idea for a career. And yet, Sam Rosenthal dealt himself a winning hand with his studio’s game, Where Cards Fall — one more than nine years in the making. “Where Cards Fall was a labor of love for the better part of my life,” he says. Originating as a student project while Rosenthal attended USC, the game evolved over years of late-night coffee shop sessions into a 2020 Apple Design Award winner.

“We wouldn’t let [Where Cards Fall] go,” he says. “We had confidence that we were making something special and different and interesting.” Despite early rejections from publishers, Rosenthal and his collaborators cut through a deck stacked against them to make the kind of game they wanted to see more of in the world.

Growing up, Rosenthal had an early passion for games and game design. But he found little he could share with his friends or family, who weren’t as interested in the medium. “There weren’t many experiences that they could really relate to,” he says. So Rosenthal set out to create some. In college, he dreamed up the idea for Where Cards Fall — a story about growing up and “the messiness of life” — while listening to Radiohead’s “House of Cards.”

The game mechanics are intentionally simple, using common system gestures on each platform to explore the story and its card-based puzzles. It’s both a core part of Where Cards Fall and the founding principle of Rosenthal’s studio The Game Band: Make beautiful games that resonate with the world.

“We’re creating these little boxes of exploration for people,” Rosenthal says. “Little places for them to discover something that might delight them, or might teach them something about themselves.” In Where Cards Fall, people explore the memories of the protagonist, an aspiring architect. Those memories are wordlessly described through sound, music, and exquisitely crafted 3D spaces, along with the game’s eponymous cards — which provide glimpses into the past as you build them into structures, doorways, reconstructed spaces, and bridges.

The game’s architectural motif, in many ways, illustrates Rosenthal’s entire philosophy around game design, which he describes an invisible art. “When you go into a beautifully designed building, the way that you navigate through the space is not an accident,” he says. Game design, too, provides the player with that structure — giving them the framework to experience feelings, ideas, and interactions within a living story.

Often the invisible arts are the ones that affect us the most, or they just change our perception.

Sam Rosenthal, creative director of Where Cards Fall

When crafting the mechanics and design of Where Cards Fall, Rosenthal and his team took inspiration from both gaming and the larger art world. Games like Portal, The Witness, and the Zelda series helped the studio as they explored onboarding, pacing, and the game’s puzzle structure, while Inside and Journey brought the team new ideas on crafting an “unforgettable atmosphere.”

Art director Joshua Harvey designed the game’s moody, moving artwork, which is partially influenced by the Bauhaus movement — a celebration of the mathematical underpinning in shapes and lines. The art is designed to work in tandem with the game’s interface, blending everything together to create the perfect atmosphere while still providing helpful guidance for the player.

“We often think of UI as this separate layer on top of the game’s art style, but a successful art style is simultaneously beautiful and functional,” Rosenthal says. In Where Cards Fall, the grass nibs in the forest and the tiles in the city are specifically arranged to help the player see the grid for planning their structures, while the brickwork on the sides of certain platforms provides subtle cues to help players discern heights.

The game’s icon further stylizes the protagonist of Where Cards Fall during the story’s present-day winter forest. “It’s not somebody that is lost in the past, but somebody that maybe has learned from what happened, has reflected, and is looking towards what could be,” says Rosenthal.

The game’s hand-drawn aesthetic also ties back into the main character’s interest in art and architecture. “Drawing is [their] way of processing the world and imagining what it could be,” Rosenthal says. “It gives the player a stronger connection to the protagonist and the passion that drives them.”

Despite the many influences the team drew upon to craft *Where Cards Fall, the game has its own unique style and tone, in part due to the work they put in to stay aligned across game mechanics, sound, music, and art design. “We found it crucial to create a set of internal rules so that we could stay cohesive,” Rosenthal says.

The cards and their puzzles were a big part of creating these guidelines. “I originally thought big, sprawling puzzles would be intriguing, but quickly realized that smaller ones created the most interesting challenges,” he explains. “Once I had an overarching style, I began to develop smaller rules: A pile of cards should be used in at least two different places, otherwise it feels extraneous. And players should never have to restart a puzzle, since that discourages experimentation.”

The card interactions themselves went through multiple revisions during the game’s development. The team used a physical deck to experiment with the physics and interaction of card-based structures, exploring both single-card draws and a multi-card spread — the latter of which became the game’s core mechanic. (It even had precedent within iOS: At the time, the Photos app allowed people to skeuomorphically splay their images from a stack with a pinch and spread gesture.)

“Players tend to interact with the platforms in the ways that they’re used to, especially if they don’t play many games,” Rosenthal says. They followed that same philosophy when moving Where Cards Fall over to Mac and Apple TV, identifying platform-specific gestures that would be easy for a player to adopt.

One downside of platform-specific adaptation: the player needs to relearn how to interact with the game. Fortunately, Rosenthal and his team had thought through an excellent tutorial and gameplay system. They created a hand-drawn overlay to animate paths, controls, and future actions, and used the main character to physically communicate possible destructive interactions — a shake of the head when attempting to tear down a card structure, for instance.

The music and the soundscape provide their own cues as the player works their way through the game. The cards have distinctive, fluttery sounds as they’re built and collapsed — audio director Kristi Knupp purchased stacks of card stock to find the perfect tone — while the background blends the naturalistic and physical noises of the forest and cityscape environments with Torin Borrowdale’s score. “It’s very easy to manipulate people’s emotions with music,” Rosenthal says. “But we wanted the experience to be the main thing that was setting the emotional weight.”

Instead, Where Cards Fall tells its story through the player’s journey. It eschews audible dialogue or on-screen text for similar reasons. “There’s a lot of empty space for reflection,” Rosenthal says — a core theme of the game.

Now, Rosenthal, The Game Band, and their publishing partner Snowman have the opportunity to reflect on winning an Apple Design Award. “It [was] beyond my wildest expectations,” he says. “There are so many different hands that touched it, and every one of them put their personal stamp on it.”

His advice to fellow creators? Find your collaborators and keep going — even when it feels impossible.

We’re all working so hard just to make beautiful things exist.

And it’s a really, really hard thing to do; to really believe in something, especially when it’s something that’s not obvious. Right? A lot of times when you’re working on something, you know it needs to be out there. You know what its value is. But you’ve got to convince a lot of other people that it’s going to be valuable, especially when it’s in its early stages and is not beautiful yet, but it will be.

Sam Rosenthal, creative director of Where Cards Fall

Where Cards Fall

The Game Band

Snowman

Download Where Cards Fall on Apple Arcade

Read more about Where Cards Fall on the App Store