Starting our project

To get started, let's create a new project for us to work with:

  1. With Unity started from the launcher, select File | New Project. From there, give it a name (I used ClickerGame) and a Project Location of your choice and make sure that 2D is selected. Afterwards, click on Create project:
    Starting our project
  2. Now that we are inside the editor, let's start off by creating our button, which we will use to click. From the Project tab, create a folder named Sprites and open it up. Then, right-click from the folder and select Import New Asset… and select the button.png file from inside of the Art Assets folder. Alternatively, you can use your own asset as it's just a way to make the button different from the default one.
  3. To create the basic button, we will customize start off by going to GameObject | UI | Button. From the Hierarchy tab, open up the Button object by clicking on the triangle next to the name and then delete the Text object by selecting it and then pressing the Del key. Then, select the Button object and drag and drop the button Sprite from the Project tab into the Inspector tab's Source Image property from the Image component.
  4. From there, click on the newly created Set Native Size button, and the image will resize to be the same as the image provided:
    Starting our project
  5. This will be the button that we will be using to click on in order to write a line of code. Currently, if we were to play the game, we would note that the button uses changing colors to indicate it's been pressed, due to the Button component's Transition property being set to Color Tint. However, I feel that instead of just being confined to the color or the sprite to use, it would be more impressive for it to modify other properties as well. So with that in mind, we are going to learn about Unity's Animation window and how to create basic animations.
  6. With the Button object selected, move to the Inspector tab and scroll down to the Button component. From there, change the Transition to Animation. Afterwards, click on the Auto Generate Animation button. It will ask you where you'd like to save the controller; create a new folder named Animations and save it there.
  7. This creates an Animator Controller, which allows us to dictate how animations should be played and when while allowing them to blend together by using something called a state machine. Now, this one is automatically created for us due to the selection that we just made, but later on, we can learn how to create our very own from scratch.

    Note

    For more information on the Animator Controller asset, check out http://docs.unity3d.com/Manual/Animator.html.

  8. Now select the Button object from the Hierarchy and then go to Window | Animation or hit Ctrl+6. This will bring up a new window or show a tab where we can animate. Optionally, drag the tab on top of the bottom-left side where the Project tab is to place it inside that area to make it easier to see in the future:
    Starting our project
  9. From the Hierarchy tab, select the Button object and you will notice that the Animation tab will no longer be grayed out. Under the record button, you will notice it'll display the name of the currently selected animation (Normal by default). Click on the Normal selection to then select Highlighted to switch animations to look at:
    Starting our project
  10. Next, click on the red circle Record button to save any changes we make to the object. Afterwards from the Inspector, set Scale to 1.25, 1.25, 1 by typing it in and then from the Image component's Color property, change it to green:
    Starting our project

    Note

    Note that even though I just modified these properties, any public property from any of the components on the object or its children can be modified from here.

    For more information on the Animation view and how to build more complex animations, check out http://docs.unity3d.com/Manual/AnimationEditorGuide.html.

  11. We can just keep this as a single frame change, but I want to modify it a bit so click on the 0:20 section of the Animation tab to move the red line there, then click on the Add Keyframe button or right-click and select Add Frame. This will save all of the properties that we changed at the 0:00 time.
  12. Now click on the 0:20 section and create another key for the Image component's Color property (Image.Color), and this time decrease the Alpha of the color to have the animation change over time:
    Starting our project
  13. To get an idea of what the animation looks like, go ahead and hit the Play button and you will notice the effect playing.
  14. Now, we want to modify the animation when we click as well so go to where it says Highlighted and then click on it to bring up a drop-down menu to change the animation to Pressed and click on the Record button (the red circle) again if it isn't selected already while also moving the red bar back to 0:00. From there, change Scale to .75, .75, 1 and the color to a darker gray:
    Starting our project
  15. This works great, but once we click on the button, it no longer will go to the Normal state, so let's disable the navigation options of the EventSystem by going to the Inspector tab and changing the Button component's Navigation property to None.
  16. Finally, the button always stays the same size, which is fine now, but for a larger screen may cause issues down the line so let's use the Canvas Scaler component that we used before. Select the Canvas object, and from the Canvas Scaler component, change UI Scale Mode to Scale With Screen Size and change the Reference Resolution to 1920 x 1080.
  17. Save your scene as CodeClicker (creating a new folder named Scenes to hold it) and then hit the Play button to see your project!
    Starting our project

At this point, we have a button that can be interacted with!

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset