The first thing I did when making this file is set the resolution. The resolution is automatically set to free aspect, however I want to set a custom resolution that would be appropriate for mobile devices. I have set the resolution of my game to 180×320 to be appropriate for 16:9 display mobile devices.
This image above displays all of the elements that I added to the UI for my Cookie Clicker game. I have included a Weatherspoons chip theme to separate my game from the original Cookie Clicker. The first button in the hierarchy is called “BtnCollectChips”. I added text on top of this button which says “Collect Chips”, this displays the function of the button to the player. I also added a child object called “ImgChips” which contains a custom texture that I made. All of this comes together to create a button that looks like this:
This button can be pressed, however it is useless on its own so I need to add both code, and additional UI elements that will work alongside it. The most important of these UI elements is the text called “TxtChipTally”. This text is important as it displays the number of chips that have been collected by the player. When the game is ran, the chip count initially looks like this:
As you can see, the initial text says “0 chips”, however I need to add code that will increase this number every time I click on “BtnCollectChips”.
The image above displays the code that controls the chip tally. This script is called “scr_clicking”. I declare all of my variables on lines 8, 9 and 10. The first of these is “public Text counter”. This variable will contain a reference to “TxtChipTally” which will display the current cookie count. The second of these three variables is “public float counterNumber” which will contain the value of the current cookie count. The third of these is “public float ammountPerClick”. This variable contains the value of how many cookies we need to add to our cookie count for every click. It is listed as 1.0f because with float variables, f must be added to the end of the number. Later on we will be adding buttons that will increase the value of ammountPerClick. In void update, I have added added code that will display the number of chips that I have collected. The code in public void controls the chip counter as it adds the value in ammountPerClick to counterNumber every time the button that this script is attached to is pressed.
After this code is finished, I need to attach this script to my button element. Once I’ve done this, I can see the values for the public variables in the inspector window as shown in the image below.
I also need to set the counter as “TxtChipTally” which I can do by simply dragging from the item from the hierarchy onto the box for Counter. After this I need to add an on click function. This shows the list of functions that the button will do when clicked so I have set it to activate the script when the button is clicked.
While everything I’ve done here leaves me with a functional game, it is a very uninteresting game so I will have to add more to it to flesh it out. The first additional function that I added was an upgrade button that increases the number of chips that you get from a single click. The button that this upgrade uses is called “BtnUpgradePerClick” and it looks like this.
While this button can be pressed, it currently doesn’t do anything as it doesn’t have any code attached to it. The code for this next button is much longer than the previous one so I’ll split this up into multiple images. This script is called “scr_upgradeperclick”.
I start off by declaring my variables as shown in the image above. The first variable is “public scr_clicking click” which is a reference to the clicking script which I made previously. the second variable is “public Text upgradeInfo” which is a reference to the text box which will display the information about the upgrade. The next two variables are “currentPrice” and “clickPower” which hold the value of the current cost of the upgrade and how much extra will be added after the upgrade respectively. After that I have “private float powerOf” which can be used to increase the price of the upgrade after the upgrade has been purchased. Next is “public string upgradeName” which stores the name of the upgrade. Finally there is “public float basePrice” which stores the initial price of the upgrade.
In the image above I have an if statement that will check if the player has enough chips to purchase the upgrade. If they do, then the price will be subtracted from the players’ current tally and the ammountPerClick will be increased.
All of the code shown in the image above handles displaying the information about the upgrade when the player hovers their mouse over the button. “private void Start()” handles when the player is not hovering over the button, meaning the text box will be empty and price of the upgrade will be equal to the base price of the upgrade. “public void onMouseEnter()” handles when the player hovers their mouse cursor over the button. This will display the information displayed in the function “void updateText()” which I’ll get to later. “public void onMouseExit()” makes is so that the text box is empty again when the player takes their mouse cursor off the button. The final function is “void updateText()” which is used to display the current price of the upgrade and the power of the upgrade. After my script was finished, I attached it to the button in the same way I attached my previous scripts.
Once I attach it, I can alter my variables as shown in the image above. I set the element “BtnCollectChips” as Click so that the number of chips acquired after every click increases when the upgrade is purchased. I set Upgrade Info as “TxtUpgradeInfo” as this is the text box that will display the information about the upgrade. I have also set Current Price as 10 and Base Price as 0 as Base Price will be changed to be equal to Current Price. I have also set Click Power as 5 as this is the inital amount that the upgrade will increase the power of each click by. The Upgrade Name is set as “Bigger Bag”.
I will also need to set up my event triggers.
These events will be triggered to run the onMouseEnter and onMouseExit functions when the player hovers their mouse cursor over the button.
While this upgrade makes the game more intereseting, I could still definitely add more to it. An upgrade that I will add is an autoclick upgrade. For this I will need two scripts, one to make the button itself function and one to make the autoclicking function.
I started by adding the button as shown in the image above. This button can be clicked but currently does nothing. To make this button functional I will need to add scripts to it.
The first of these scripts is called “ScrAutochip” and handles the autoclicking function. I start off by declaring my variables.
“addingChips” is a boolean, meaning it can only be one of two states. This one checks whether or not we are adding additional chips to the tally. “increaseAmmount” controls the number of additional chips to add every second and “public scr_clicking click” is a reference to our clicking script.
This code controls the autoclicking function. In “void update()”, I have included an if statement that checks whether addingChips is true or false and then if it’s true, it starts a coroutine called “CollectChips()”. CollectChips adds the value of counterNumber to the value of increaseAmmount and then waits one second before adding more. I attached this autoclick script to BtnCollectChips.
In the script above, I declare all of my variables. Most of these are similar to the previous ones, however there are some new ones. There is a new float for the multiplier, a value for the number of chips per second and a reference to the autochip script.
This is the code for buying a new upgrade, however it’s almost identical to the previous button so I’ll skip over it.
This code handles when the player hovers their cursor over the button, however this is also identical to the previous button so I’ll skip over it.
I attached this code to the button and sorted out all the components, however this is the same as with the previous button so I will skip over it. Finally with that, my game works and has two functional upgrades. While this game is functional, I could definitely add more to improve it. The first thing that I would like to do is rebalance the buttons as currently, the autoclick upgrade is very weak compared to the upgradeperclick. The second thing that I would like to do is add unique graphics to the buttons, however this is not essential as the game still functions properly without them. Another feature that I would like to add is audio which will improve the player experience.