Making a Cookie Clicker game for iOS

In this tutorial we will make a Cookie Clicker game for iOS mobile devices using Xamarin.We made the same app for Android in a previous tutorial and now we are going to make it for iOS devices. You will also learn how to use images for buttons instead of plain text.

This is what the basic working app will look like but you can improve the look of it by change the text and background colours and by adding more options.

iOS Cookie Clicker app
iOS Cookie Clicker app

Watch the video below or scroll down for the full instructions and sample code.

Video

Step 1

Start a new Solution (File > New > Solution). Select App under iOS and then select Single View App. Click on Next.

ioscc1

Step 2

Give your app a name, select the minimum iOS version you want to support and click Next.

ioscc2

Step 3

Give your project and solution a name (you can keep it as the default) and then choose the location where you will store your project (eg. the Projects folder). Then click on Create.

ioscc3

Step 4

Open the Main.storyboard file (in the Resources directory). Change the view from Generic to the iPhone model you are targeting (eg. iPhone 6S).

ioscc4

Step 5

Drag a Button element on to the screen from the Toolbox.

ioscc5

Step 6

You will need a cookie image for your app. Once you have an image on your computer, select the Resources folder. Click the cog icon, then Add > Add Files from Folder.

ioscc6

Step 7

Find the folder that contains your cookie image. Then click on Open.

ioscc7

Step 8

Click the checkbox next to the image you want to use and then click OK.

ioscc8

Step 9

Choose Copy the file to the directory and then click OK.

ioscc9a

You should now see the image in the Resources directory.

ioscc9b

Step 10

Now select the Button you added earlier and from the Widget tab on the Properties panel, scroll down until you see the Background property. Click the dropdown box and choose the image you want to use (eg. cookie.png). Alternatively, type in the filename in the text box.

ioscc10

Now you have a cookie image as the background for your button. However, the button is very small so it will need resizing.

ioscc10b

Step 11

Click and drag the corners of the button to enlarge it so that the background image of the cookie is nice and clear.

ioscc11

Step 12

Now go and remove the Default title value under Title on the Properties panel so that the button text is no longer visible on the button.

ioscc12

Step 13

Add a Label element to the screen under your cookie button and change its Text value to say ‘0 clicks’.

ioscc13

Step 14

Change the Name of the Button element to cookieButton.

ioscc14

Step 15

Change the Name of the Label element to clicksLabel.

ioscc15

Step 16

Now all that remains is adding the code that will count and display the number of clicks. Open the ViewController.cs file to begin coding.

ioscc16

Step 17

Firstly, create a variable called clicks that will contain an integer value. Its initial value should be 0 before any clicks have been recorded. Inside the public partial class ViewController : UIViewController section, add the following line of code:

int clicks = 0;

ioscc17

Step 18

Now you need to add a button touch event so that every time the cookie button is touched, the clicks variable’s value will increase by 1. To do this, go to the ViewDidLoad method and make some new space under the base.ViewDidLoad() line. Start typing cookieButton.TouchUpInside+= and then press the Spacebar. As you do this, you will see a list of options. Double click the CookieButton_TouchUpInside option to create a new method.

ioscc18

After creating the new CookieButton_TouchUpInside method, you can now add code inside the method that will run when the cookie button is touched by the user. This code should increase the clicks variable by 1 and display the number of clicks every time the button is touched.

ioscc18b

Step 19

Add the following code inside the CookieButton_TouchUpInside method:

clicks++;
clicksLabel.Text = clicks.ToString() + “ clicks!”;

This code will increase the clicks variable by 1 every time the button is tapped as well as displaying the value of the variable and concatenating (joining) the value to the text ‘ clicks!’ – for example 20 clicks! Note that the clicks variable’s value has to be converted to a string before it can be displayed on the button.

ioscc19

Now you can test the app!

ioscc19b

When you test the app, click or touch the cookie button and you should see the number of clicks displayed increased, as shown below.

iOS Cookie Clicker app
iOS Cookie Clicker app

Try extending the app by adding some buttons with the options to ‘buy’ items or unlock items after a certain number of clicks. You could also use a timer to increase the number of clicks automatically over a period of time (eg. 5 clicks every second). You might also like to change the colour of the text and the background of the app.

Sample C# code

Here is the sample C# code for the ViewController.cs file (please note that the namespace should match the project/solution/app name of your app. It is called CookieClickerIOS in this example.

using System;

using UIKit;

namespace CookieClickerIOS
{
  public partial class ViewController : UIViewController
  {
    int clicks = 0;

    public ViewController (IntPtr handle) : base (handle)
    {
    }

    public override void ViewDidLoad ()
    {
      base.ViewDidLoad ();
      // Perform any additional setup after loading the view, typically from a nib.

      cookieButton.TouchUpInside+= CookieButton_TouchUpInside;

    }

    void CookieButton_TouchUpInside (object sender, EventArgs e)
    {
      clicks++;
      clicksLabel.Text = clicks.ToString () + " clicks!";
    }

    public override void DidReceiveMemoryWarning ()
    {
      base.DidReceiveMemoryWarning ();
      // Release any cached data, images, etc that aren't in use.
    }
  }
}