Time for action – styling the game

If you do not want to look far, the assets used for this chapter are found along with the resources for the book. All of the needed images are available, and they will work just well, until you have an opportunity to create some of your own.

  1. First, we need five small textures: ButtonActive, ButtonNormal, ONormal, XNormal, and Title. To create these, you will have to use a separate photo-editing program or use the ones supplied with the included projects.
  2. The easiest way to get the images into your Unity project is to simply save them into the Assets folder that is created when you create a new project. Alternatively, you can go up to the top and click on Assets followed by Import New Asset. This will open a file browser and let you navigate to the asset you want. When you have found the asset you desire to import and have clicked on the Import button, a copy of the asset is put in your project. Unity will not move or remove files that exist outside of the current project.
    • And now a note about import settings for textures. By default, Unity assumes any image files imported to your project are going to be used as game model textures. Because of that, Unity compresses them and adjusts them to fit a power of two.

      Tip

      In case you didn't know, in computer graphics it is much faster to render images that can be divided in half evenly, down to a single unit. There are deeper reasons, but suffice it to say that it is because of the binary switches that actually make up a computer.

      Time for action – styling the game
    • Making our images recognized as being for the GUI is quite simple. To the right of Texture Type, click on Texture and select GUI from the drop-down menu.
    • You will notice that we were given a new Filter Mode drop-down menu. This is essentially how much effort Unity will put into making the image look nice as it is resized for the various GUI elements. Trilinear is the best, Point is the fastest, and Bilinear is in the middle.
    • Once the import settings have been changed, be sure to click on Apply, or Unity will complain when you try to do anything else. If you do not want to commit the changes, clicking on Revert will discard any changes just made and set back the Import Settings window to the last configuration that was used.
  3. So, set all of Texture Types for your images to GUI and we will get on with it.
  4. Let us start with the beginning of the game. Open your TicTacToeControl script and add the following lines of code at the beginning. These allow us to attach references to other assets inside of the Unity Editor. The first will hold our GameSkin, so we can style all of our GUI elements. The second, as you can see in the following lines of code, will hold our fancy title image: 
    public GUISkin guiSkin;
public Texture2D titleImage;
  5. Now go to the Unity Editor and select Main Camera from the Hierarchy window.
    • Every object that you see listed in the Hierarchy window is a GameObject. A GameObject is given a purpose and a meaning by the various components that are attached to it, for example, our TicTacToeControl script.
    • An empty GameObject is just a point in space, as defined by the Transform component that is always the first component on any GameObject.
    • You can see in the Inspector window, the Main Camera object has a Camera component. It gives a purpose to the GameObject and controls how the Camera component functions, just as our TicTacToeControl component at the bottom lets it control our Tic-tac-toe game.
    • The Inspector window also lets us see all of the public variables that can be changed in the Unity Editor. If they are changed, those values are saved and used when the game is played. So, by creating a variable in our script, we can add the reference to our GameSkin and it will be used in the game. To add the reference, simply click-and-drag the object to the desired variable on the component in the Inspector window.
  6. Drag GameSkin to the GUI Skin slot and our title image to the Title Image slot.

    Tip

    Be sure to save. Saving regularly is the only thing that stands between you and premature baldness, the next time your computer decides to die.

  7. Inside of our TicTacToeControl script, add the following line of code at the beginning of the OnGUI function. It first checks to make sure there is a GUI Skin available. If it is, it is set into the GUI.skin variable. This variable controls the GUI Skin that is used in the game. Once set, any GUI elements drawn after that will use the new GUI Skin. This could allow you to set one GUI Skin and draw half of the GUI, then set a different GUI Skin and draw the other half in a completely different style. 
    if(guiSkin != null) GUI.skin = guiSkin;
  8. If you play your game now, it won't look like much. The defaults of a new GUI Skin are the exact same as the default GUI Skin that Unity uses. Let us change that by selecting our GameSkin and expanding Button and Label in the Inspector window.
  9. For Button we created a ButtonNormal and ButtonActive image. By dragging those to the Background properties of the respective states, the look of the buttons will change.
  10. The supplied button images have a yellow background, which will make the white text hard to read. So, by clicking on the color next to the Text Color property, the Color Picker window will open and we can select a new color. A navy blue for the Normal state and a faded blue for the Active state works well.
  11. Also, to keep it from looking weird in the Unity Editor, remove the Hover state. With a touch interface, there is no cursor to hover over buttons; therefore, there is no need for a hover state. To remove it, first click on the little circle to the right of the Background image.
    Time for action – styling the game
  12. The new window that pops up allows us to select any image that is currently in our project. However, since we want nothing to be in there select None, the first option in the list.
  13. The borders on the button images are much larger than those of the default buttons. So, we need to adjust the Border attribute to accommodate them. Values of 15 for each side works well.
  14. The text is also too small, so for the Font Size attribute choose a value of 40. This will give us a large and easily readable text.
  15. For the Label element, we are only going to make two changes. First, the text is too small. So, it will also get a value of 40 for its font size. Second, we want the text to be centered in the GUI elements. That requires setting the alignment to middle center.
    Time for action – styling the game
  16. Play the game now. It is already looking better or at least different. However, it is a little difficult to tell at a glance who controls which square. To fix this we are going to create two custom GUI Styles. To do this, expand the Custom Styles attribute of our GameSkin in the Inspector window. By default, one blank style is already in there. We are going to need two, but don't change the quantity just yet.
  17. Expand the custom GUI Style, by default called Element 0.
  18. On clicking to the right of the Name attribute, more or less in the middle of the Inspector window, will allow us to rename the style. The name is very important. Whatever we call it here we need to call it exactly the same in code or it won't be used. Give it the name XSquare because it will be used to mark which squares are controlled by the X player.
  19. Inside of the Normal state, add the XNormal image to the Background attribute. The Text Color attribute can be left as black. We also need to adjust the font size and alignment properties to the same as we did for the Label element. So, set them to 40 and MiddleCenter respectively.
  20. Now that we have created the first style, creating the second becomes fast and easy. Collapse the XSquare style.
  21. Set the size of the Custom Styles attribute to 2. When increasing the size of arrays in the Unity Editor, Unity duplicates whatever was the last item in the array to each of the new slots. So, we should now have two XSquare GUI Styles.
  22. Expand the second GUI Style and change its name to Osquare.
  23. Also, replace the XNormal Background image with the ONormal image.

    Tip

    If you are having trouble in dragging-and-dropping in the Inspector window, the GameSkin keeps losing focus perhaps; there is a lock at the top of the Inspector window. Clicking on that will stop the window from changing to anything else when a new object is selected. Clicking it again will toggle off this feature.

  24. Just because we have our spiffy new custom GUI Styles, doesn't mean they will work automatically. But, just a little bit of coding will make them work. Inside our DrawGameBoard function of the TicTacToeControl script, we need to change the line that draws our label by adding a little bit to the end of it. The addition of a second string will tell the GUI system to look for a specific GUI Style. A little bit earlier in the function, we figure out who owns the square, is it X or O. By adding this to Square we create the names of our two custom GUI Styles, XSquare and OSquare. 
    else GUI.Label(square, owner, owner + "Square");
  25. If you play the game now, you will see that when a player claims control of a square, our custom styles appear.
    Time for action – styling the game
  26. There is one more thing to do to change the look of our Tic-tac-toe game. Do you remember the title image that was created and for which we added a variable? Now is the time to place that. Inside of TicTacToeControl go to the DrawOpening function. To draw our image, we need to replace the call to GUI.Label with a call to GUI.DrawTexture. Instead of using GUI Styles, this function simply draws an image to the screen. It uses a Rect class, just as with all of our Buttons and Labels, to define a size and position. The image is, by default, stretched to fill the whole Rect class. For now, this suits us just fine. 
    GUI.DrawTexture(titleRect, titleImage);
  27. We can fix the stretching by updating the previous line of code, where we defined the Rect class for our title to accommodate. As you can see by the following code snippet, we use the width and height of titleImage to determine the width and height of titleRect. The Rect class now automatically determines how large it should be based on the size of our title image. If the Rect class is of the same size and shape as the image, it won't be stretched. In addition to that, because of the way we defined the Rect class for our New Game button, it will still be directly under and just as wide as our title image. 
    Rect titleRect = new Rect(0, 0, titleImage.width, titleImage.height);
  28. That is all there for styling our Tic-tac-toe game. Click on the Play button and take a look at all your hard work.
    Time for action – styling the game

What just happened?

We made our Tic-tac-toe game look great, or at least not like the defaults. We achieved this through the use of a handful of images and some custom GUI Skins and GUI Styles. With the addition of a special function for drawing textures on screen, we also add a unique title image to our opening screen.

Have a go hero – backgrounds

Your challenge here is to make a background image and draw it behind the game. It also has to cover the whole of the screen. The default blue is great, but we could do so much better. As a note, whichever GUI element was drawn last is drawn on top, so think carefully about where to call the function to have the image drawn in the background. Also, since stretching is only good for exercising and rubber bands, take a look at also passing the function a ScaleMode, which is a special value type that Unity uses to determine how images should stretch. Look in the scripting reference or search online to find more information about it.

上一章目录下一章