loading...
Cover image for It's time to Apple Watch, create a game with WatchOS [Swift] ⌚️

It's time to Apple Watch, create a game with WatchOS [Swift] ⌚️

andreslopezrm profile image ALR Updated on ・2 min read

In this tutorial, you will create a small game 👾 for the Apple Watch based on the game of rock, paper, and scissors 👊✂ 📃.

Requirements

  • Mac OS Mojave or higher.
  • Xcode 10 or higher.
  • iPhone simulator.
  • Apple Watch simulator.

To start, we created a new project in Xcode of the WatchOS type.

alt text

Fill the Product Name input with the value "RockPaperScissorsSwift" and then uncheck the option Include Notification Scene.

alt text

🖥 A normal iOS solution is created with two additional projects.

  • WatchKit App (where the storyboard goes)
  • WatchKit Extension (code of the controllers)

alt text

The graphics interface of the project should be as follows:

alt text

🖐❇️ The construction of the interface is the same as in iOS dragging controls and should be as follows:

  • Label to see who chose the watch (stone, paper or scissors)
  • Label to see the result (win, lose, draw)
  • White thin line separator
  • GroupView with three buttons
  • GroupView with a label on the left and a timer on the right

The Label to see the result must have a height proportional to the size of the clock, to assign these values in the Size section.

  • Width, is assigned Relative to Container with a value of 1, which will take 100% of the width
  • Height, Relative to the Container is assigned with a value of 0.4, which will take 40% of the clock's height.

alt text

A GroupView is a view that accommodates each control side by side horizontally.

alt text

To align a control within a GroupView to the right in the toolbox within the Aligment section with right value.

alt text

The timer is a control that shows a type of clock in the form of Label.

alt text

Code 🛠

  • Declares an array options with the 3 elements and a variable counter to bring the number of games won.
  • When initializing we place the images to the buttons and the timer starts to show the elapsed time.
  • A function is created with the logic of how to determine the winner.

The complete code of the controller is as follows:

The project is executed and the application is executed as follows:

alt text

Conclusion

Creating an application for the Apple Watch is very similar to building an iOS application, in this example we saw that with basic controls you can create great things.

🌎 You can check the application code on Github

Discussion

pic
Editor guide
Collapse
jrtibbetts profile image
Jason R Tibbetts

This was really helpful, since I'm considering adding a Watch version to one of my apps. I also have a few recommendations, which I put together in a pull request against your repo:

  • Use enums for your game moves ("rock", "paper", "scissors") and results ("TIE", "WIN", "LOSE").
  • Use a switch statement to determine the results.

An additional improvement that should be pretty trivial is to localize it for Spanish.

Collapse
andreslopezrm profile image
ALR Author

Thank you very much for the suggestions, they help me to continue improving the posts

Collapse
jrtibbetts profile image
Jason R Tibbetts

Happy to help!

Thread Thread
andreslopezrm profile image
ALR Author

Thanks for the pull request 😀😄

Collapse
michaeltharrington profile image
Michael Tharrington (he/him)

Really cool tutorial Andres! Thanks so much for sharing!

I've got two small pointers for you...

  1. This game is more commonly called "rock, paper, scissors" in English (or apparently rock–paper–scissors according to Wikipedia... pretty much the same thing.) Still though, I really like the idea of calling it stone, paper, scissors. That's a really charming translation and sounds great!

  2. I remember reading this post by @sauloco a while back and thinking it was a cool idea. Just wanted to point it out in case you'd like to follow suit with the translated tag.

Collapse
andreslopezrm profile image
ALR Author

Thank you very much for the points, I will continue to improve the post.

Collapse
calo0012 profile image
ςคгɭ๏ร ɭ๏קєչ

Amazing tutorial :) thanks for spanish version!!