![Cover image for It's time to Apple Watch, create a game with WatchOS [Swift] ⌚️](https://media2.dev.to/dynamic/image/width=1000,height=420,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fcdn-images-1.medium.com%2Fmax%2F2600%2F1%2AnN1QGFkxyASASPU84MCY-w.jpeg)
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.
Fill the Product Name input with the value "RockPaperScissorsSwift" and then uncheck the option Include Notification Scene.
🖥 A normal iOS solution is created with two additional projects.
- WatchKit App (where the storyboard goes)
- WatchKit Extension (code of the controllers)
The graphics interface of the project should be as follows:
🖐❇️ 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.
A GroupView is a view that accommodates each control side by side horizontally.
To align a control within a GroupView to the right in the toolbox within the Aligment section with right value.
The timer is a control that shows a type of clock in the form of Label.
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:
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
Top comments (8)
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:
enums for your game moves ("rock", "paper", "scissors") and results ("TIE", "WIN", "LOSE").switchstatement to determine the results.An additional improvement that should be pretty trivial is to localize it for Spanish.
Thank you very much for the suggestions, they help me to continue improving the posts
Happy to help!
Thanks for the pull request 😀😄
Really cool tutorial Andres! Thanks so much for sharing!
I've got two small pointers for you...
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!
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.
Thank you very much for the points, I will continue to improve the post.
It was a great lesson. I'd want to try it this way. I've already attempted to install a scheduling interface controller that isn't required for survival. However, I've recently gone back to the classic 레플리카시계. Except for the SpO2 blood oxygen saturation, there are no additional functionalities on the smartphone. All precisely cannot ensure the measurement's medical correctness and is not designed to diagnose or treat disease. As a result, I'm looking for a single exceptional attribute that will go well with the outfit.
Amazing tutorial :) thanks for spanish version!!