Ebook Learn unity for 2D game development: Part 2

Chapter 7 UVs and Animation The previous chapter explained how to develop a GUI editor add-in that allows users to add selected textures in the project panel to a larger atlas texture. Atlas Textures help us improve the performance of our 2D games. In generating the atlas, we also saved meta-data. This included all filenames of textures inside the atlas, and their UV positions within the atlas. In closing that chapter, we tested the add-on functionality by assigning an Atlas Texture to a procedural Quad Mesh in the scene, to see how it looked in the Viewport. The problem we faced was that the quad mesh rendered the complete atlas texture, rather than just a region of it (see Figure 7-1). The problem was not with the Atlas Texture, but with the mesh itself; with its UV mapping. By default, the UV mapping for Quad Meshes is configured to show a complete texture. To show only a region, the UV mapping must be adjusted at the vertex level. That is, we must dig deeper into the mesh construction and edit its vertices. We’ll do that in this chapter, as we create a new editor add-in to control mesh UV mapping. This add-on lets us select a textured quad in the scene and entirely customize its UV mapping to show any region within the Atlas Texture (or within any texture!). In addition, we’ll also create another class to change UV mapping over time, creating a flipbook animation effect or an animated sprite effect. 139 140 CHAPTER 7: UVs and Animation Figure 7-1. By default, textured quads are generated with UV mapping to show a complete texture, from the top-left corner to the bottom-right corner. This does not meet the needs of Atlas Textures. To fix this, we’ll need to edit the mesh UV mapping Creating a Dockable Editor So far in this book we’ve built three editor add-ons (if you’ve been following every chapter): a Batch Rename tool, a Create Quad tool, and a Create Atlas Texture tool. Despite the enormous differences in behavior between these tools, they still have an important characteristic in common relating to their usability and design. Specifically, a developer uses them all to run one-hit operations; that is, a “one click and you’re done” paradigm. For example, to rename multiple objects, just select the objects in the scene and then run the rename tool. To generate a Quad Mesh, open up the Create Quad window and press the Create button, and so on. This workflow has served us well so far. But, the task that faces us now (editing mesh UVs) is different in this regard. Our scene may have potentially many different Quad Mesh objects that must be edited (not just one or two), and we’ll want to perform those edits quickly and intuitively from the editor, without having to visit the application menu, launching different ScriptableWizard windows one after the other. Instead, it would be great if we could have a non-modal and dockable window, such as the Object Inspector, showing all relevant UV properties we can edit and have applied to the selected object (see Figure 7-2). Fortunately for us, we can achieve this behavior using the EditorWindow class. CHAPTER 7: UVs and Animation 141 Figure 7-2. The Object Inspector is an Editor window typically docked in the interface. It offers intuitive property editing features So let’s create an EditorWindow class for the UV editing feature. To do this, follow the standard procedure for creating any new editor class, except this time the class should descend from EditorWindow and not ScriptableWizard. ScriptableWizard works fine for pop-up dialogs launched from the menu, but for more integrated behavior we need EditorWindow. Take a look at Listing 7-1 for our class skeleton. Figure 7-3 shows the project at this stage, configured and ready for coding. Listing 7-1. UVEdit.cs using UnityEngine; using UnityEditor; using System.Collections; public class UVEdit : EditorWindow { [MenuItem ("Window/Atlas UV Editor")] static void Init () 142 CHAPTER 7: UVs and Animation { //Show window GetWindow (typeof(UVEdit),false,"Texture Atlas", true); } } Figure 7-3. Ready to code the UV editing Editor class. This class is stored inside the Editor folder and descends from EditorWindow, not ScriptableWizard The script files created in this chapter can be found in the book companion files at: Project_Files/Chapter07/. Note If you save and compile the code in Listing 7-1, a new entry will be added the Unity Application menu: Window ➤ Atlas UV Editor. Clicking this shows an empty but dockable window.All controls and widgets for this window must be drawn manually inside an OnGUI event, which is shown soon. CHAPTER 7: UVs and Animation 143 Starting an Editor GUI — Selecting an Atlas The ScriptableWizard class really makes it easy for us to incorporate GUI elements into an Editor window. Using ScriptableWizard, we don’t need to create any GUI code—it automatically creates GUI fields for every public and serializable variable in the class, allowing us to quickly generate a GUI. The EditorWindow class, in contrast, doesn’t play by those rules. If you add public variables to an EditorWindow class, they will not automatically show up in the Editor window, even if they’re serializable variables. The EditorWindow class expects you to create the GUI manually using OnGUI event, and using the GUI and EditorGUI classes in the Unity API. This makes creating an EditorWindow a more cumbersome task, but it offers us more control and flexibility over how the add-on will look. More information on the GUI, EditorGUI, GUILayout,and EditorGUILayout classes can be found in the Unity documentation here: Note http://docs.unity3d.com/Documentation/ScriptReference/GUI.html http://docs.unity3d.com/Documentation/ScriptReference/GUILayout.html http://docs.unity3d.com/Documentation/ScriptReference/EditorGUI.html http://docs.unity3d.com/Documentation/ScriptReference/EditorGUILayout.html Unity offers us the classes GUI, EditorGUI, GUILayout, and EditorGUILayout for creating and rendering GUIs. The classes GUI and GUILayout are typically used to make GUIs for your games, and EditorGUI and EditorGUILayout are used for creating Editor add-on GUIs. However, GUI and GUILayout can also be used for making Editor GUIs—these are dual purpose classes. UV Editor—Adding an Input for the Atlas Prefab So let’s get started. The UV Editor add-on, when in use, is supposed to be permanently open and docked beside the Object Inspector. It should allow users to select Quad Meshes and then edit their UV mapping to render the intended regions of the Atlas Texture. To achieve this, our editor interface will need lots of widgets. This includes: labels for giving instructions and for labelling elements, and text fields to accept user input, such as UV coordinates. One of the most important fields, however, lets the user choose which Atlas Texture we’re using for the selected object (a project can have more than one Atlas Texture). This value is important because it gives us a context for editing mesh UVs. When we know the atlas we’re using we can show the user a list of textures within the atlas. One of these can be selected to configure the mesh UVs. So because this value is so important, let’s add it as the first field in the Editor interface. The atlas data (such as texture names and mesh UVs) is stored inside the AtlasData Prefab object, which is generated alongside the Atlas Texture (see Chapter 6 for more information). Therefore, we’ll need to create a GUI field that lets the user pick this AtlasData object. We can achieve this by adding the following OnGUI event to our UVEdit class, as shown in Listing 7-2. ... - tailieumienphi.vn