Thursday, October 28, 2021

Making Word Share for SharePlay

Word Share is a "swipe the letters to make a word" game that is based on a popular genre on the App Store. I decided to make a version of this game that would work with Apple's new SharePlay feature.

It requires iOS 15 and above as it uses new SwiftUI features, and of course, SharePlay which are exclusive to the new iOS.

You can download Word Share for free on the App Store.

Word Share game play

Development Time

The game had a relatively short development time. I started building the game on the 21st of July 2021, a few weeks after the 2021 Apple Worldwide Developers Conference, and shipped it on October 27th, 2021. Development time was 98 days from conception to being on the App Store.

The project was a part time effort, with the actual working days spent on the project totalling around 18 eight hour days. I have a full time job, so work was done after 8pm every night. I also have a number of projects on the go - so I often switch between projects depending on the state they are in.

Design Goals

I wanted to make Word Share as minimal as possible.

One thing I noticed with a lot of competitor word games is that over time their UI has become cluttered. A typical competitor screen can have:

  • Daily bonus claim button
  • Social standing statistic (eg. Solved by 25% of players)
  • Currency counter and buy more currency button
  • Shuffle button
  • Use a hint button
  • Special power up button
  • Word definition button
  • Quest status button
  • Watch video for currency button
  • Banner ad

Below are some example screenshots.

Word Cookies example game screen

Word Trip example game screen

I added only what was necessary. 

Monetization

Word Share is a free game supported by ads.

I did debate over wether I should have a banner ad. For Snappy Word they account for  around 8% of revenue, which is still a reasonable amount of money. I decided to not have banner ads for a less cluttered screen. 

For the launch I went with interstitial ads between levels, and rewarded ads to earn 3 hints. I introduce the ads after the player has played a number of levels, and only show interstitials if they haven't used rewarded ads.

SharePlay

This game was built for SharePlay. Apple gave a great demo of SharePlay in one of their WWDC sessions and released sample code of the demo project. This was invaluable in getting up and running.

The biggest challenge I had was trying to figure out the best way to get players into the SharePlay experience. Because SharePlay was so new, there were no other games to look to for guidance or inspiration. So I had to make up the onboarding experience myself and hope that it was to Apple's liking!

I also had to figure out how a multi-player word game would work with FaceTime. How do you identify the users to each other? What is the scoring system like? Can players use hints while competing?

I opted for a simple system. A player starts a FaceTime call and then a big button appears on the front screen letting them know they can start a SharePlay game.

I decided on 3 rounds with the highest scoring player winning the game. Scores are based on 1 point per letter for a solved word. No hints are available to any players.

In my planning I was considering adding taunt buttons to the game - but quickly realised SharePlay is built on FaceTime - so players can smack talk each other, or even help each other using video and voice.

Building on a Foundation

I have another word game on the App Store called Snappy Word. This project began as an Apple Watch launch game and I wrote about it here: Making Snappy Word for Apple Watch

I updated Snappy Word to add in a new "swipe the letter to make a word" mode to keep up with the growing word game genre in the App Store. I used this existing codebase to help give me a headstart in making Word Share.

I took the base code for showing the unsolved word tiles and handling the word building input and added it to the new Word Share project. This code is built using the SpriteKit framework.

In my previous game I had used Storyboards for all the menu and UI screens, but for the new game I decided to use SwiftUI. I've used Flutter and SwiftUI a lot and I love reactive programming. It makes creating screens so much easier!

Storyboards for Level Select in Snappy Word


SwiftUI for Level Select in Word Share

I used the same level select screen format in Word Share as I did in Snappy Word. Writing it in SwiftUI took me around an hour compared to almost 2 days it took in Storyboards for Snappy Word. Of course that may just be me. For some reason I could never get my head around Storyboard and its use of constraints, layout margins, insets and all the stuff that had to be set inside the inspector. I love being able to lay out the UI in code which is why SwiftUI appeals to me.

I wrote about SwiftUI and Flutter here: Flutter vs SwiftUI

Since writing that blog post SwiftUI has seen a number of great improvements, and I have to say that I would rank Flutter and SwiftUI as both excellent choices for development with SwiftUI edging out Flutter in terms of ease of use and code simplicity, and Flutter edging out SwiftUI in terms of platform reach. I have another word game coming out soon that has been written in Flutter - expect a blog post about it when it launches!

I have to give a big shout out to James Swiney, another iOS developer from Brisbane, Australia who helped me get my head around using SpriteKit with SwiftUI. James had done a lot of the groundwork in his game Aruna's Adventure.

Visual Style

A big part of this genre of word game is the background images on each screen. I'm an Aussie developer, so for the images I chose a bunch of photos I had taken from my trips around Australia - with many of them taken around the suburb where I live.

I'm quite lucky that we have access to a lot of beautiful beaches - so the game is full of lots of sand and inviting blue waters :-)

It's great to have these views within driving distance :-)

I also chose yellow as the primary colour in the game. It pops well agains the predominately blue and green photos I chose.

The icon was a challenge. I did attempt to create something new and original but I settled on a simple W on a yellow background. I may update this but it's hard to get a word game icon that stands out from the rest.

Creating New Content

Another thing that helped speed up the development process is that I had created tools for Snappy Word that I could easily re-use and extend for Word Share. I built a bespoke app that would generate lists of anagrams from a dictionary, checking for duplicates and offering me the ability to output in a format that my game used.

This utility allowed me to create over 400 brand new levels for launch, with another 500 or so waiting for future updates.

I plan to add new level packs regularly and address any issues found by players.

Conclusion

I had a lot of fun making the game, and while implementing SharePlay was challenging, I'm proud of what I achieved. 

It was also great to get a New Games We Love feature from Apple in the launch week!

Thank you Apple!

Please check out Word Share on the App Store and let me know what you think!

Cheers,

John






No comments: