loading...
Cover image for Xamarin WatchOS, create a game for Apple Watch

Xamarin WatchOS, create a game for Apple Watch

andreslopezrm profile image ALR ・3 min read

Xamarin is a development platform that goes beyond making cross-platform applications for iOS and Android.

In this tutorial we will see how to create an application for WatchOS in Xamarin.

Requirements

  • Visual Studio for Mac
  • Xcode 10
  • Mac OS Mojave
  • iPhone Simulator
  • Apple Watch Simulator

Creation of the solution

In this tutorial, you will create a small game for the Apple Watch based on the game of rock, paper and scissors and show a little of the great possibilities that Xamarin provides when creating a solution.

To start, we created a new solution in Visual Studio for Mac.

alt xamarin

Once the solution is created we will add the WatchOS project.

alt xamarin

We select Watchkit application.

alt xamarin

Uncheck the Include Notification option.

alt xamarin

Design

The graphical interface should be as follows:

alt xamarin

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 (rock, 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 Container is assigned with a value of 0.4, which will take 40% of the clock's height.

alt xamarin

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

alt xamarin

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.

alt xamarin

Code

  • Declares an arrangement with the 3 options and a 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.


using System;

using WatchKit;
using UIKit;
using Foundation;

namespace RockPaperScissorsXamarin.RockPaperScissorsWatchExtension
{

    public partial class InterfaceController : WKInterfaceController
    {

        private int Counter = 0;

        private enum Results { TIE, WIN, LOSE };
        private enum Moves { Rock, Paper, Scissors }

        private Moves[] Options = { Moves.Rock, Moves.Paper, Moves.Scissors };

        protected InterfaceController(IntPtr handle) : base(handle)
        {

        }

        public override void Awake(NSObject context)
        {
            base.Awake(context);

            RockButton.SetBackgroundImage(new UIImage("rock"));
            PaperButton.SetBackgroundImage(new UIImage("paper"));
            ScissorsButton.SetBackgroundImage(new UIImage("scissors"));

            Timer.Start();
        }

        public override void WillActivate()
        {
            Console.WriteLine("{0} will activate", this);
        }

        public override void DidDeactivate()
        {
            Console.WriteLine("{0} did deactivate", this);
        }

        partial void RockButton_Activated()
        {
            Check(Moves.Rock);
        }

        partial void PaperButton_Activated()
        {
            Check(Moves.Paper);
        }

        partial void ScissorsButton_Activated()
        {
            Check(Moves.Scissors);
        }

        private void Check(Moves selection) 
        {
            var random = new Random();

            var position = random.Next(0, Options.Length);
            var machineChoose = Options[position];


            if (selection == machineChoose)
            {
                ResultLabel.SetText(Results.TIE.ToString());
            }
            else if (selection == Moves.Rock && machineChoose == Moves.Scissors)
            {
                ResultLabel.SetText(Results.WIN.ToString());
                Counter += 1;
            }
            else if (selection == Moves.Rock && machineChoose == Moves.Paper)
            {
                ResultLabel.SetText(Results.LOSE.ToString());
            }
            else if (selection == Moves.Paper && machineChoose == Moves.Rock)
            {
                ResultLabel.SetText(Results.WIN.ToString());
                Counter += 1;
            }
            else if (selection == Moves.Paper && machineChoose == Moves.Scissors)
            {
                ResultLabel.SetText(Results.LOSE.ToString());
          }
            else if (selection == Moves.Scissors && machineChoose == Moves.Paper)
            {
                ResultLabel.SetText(Results.WIN.ToString());
                Counter += 1;
          }
            else if (selection == Moves.Scissors && machineChoose == Moves.Rock)
            {
                ResultLabel.SetText(Results.LOSE.ToString());
          }

            WinnerLabel.SetText($"Wins: {Counter}");
            OponentLabel.SetText($"Oponent: { machineChoose }");

        }
    }

}

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

alt xamarin

Conclusion

In this example we saw the wide possibilities offered by Xamarin when creating applications, adding support for WatchOS, TVOS, Android Wear and even Android TV applications. 😄

You can check the application code on Github

Posted on by:

andreslopezrm profile

ALR

@andreslopezrm

TvOS, WatchOS, Android, Mobile Developer

Discussion

markdown guide