You are previewing Learning NGUI for Unity.
O'Reilly logo
Learning NGUI for Unity

Book Description

Leverage the power of NGUI for Unity to create stunning mobile and PC games and user interfaces

In Detail

NGUI is a robust UI system both powerful and optimized. It is an effective plugin for Unity, which gives you the power to create beautiful and complex user interfaces while reducing performance costs.

This book is a practical tutorial that will guide you through creating a fully functional and localized main menu along with 2D and 3D in-game user interfaces. The book starts by teaching you about NGUI's workflow and creating a basic UI, before gradually moving on to building widgets and enhancing your UI. You will then switch to the Android platform to take care of different issues mobile devices may encounter. By the end of this book, you will have the knowledge to create ergonomic user interfaces for your existing and future PC or mobile games and applications developed with Unity 3D and NGUI.

What You Will Learn

  • Build customizable 2D and 3D in-game user interfaces
  • Use NGUI to save options, implement volume modification, launch animations, and change variables
  • Enhance your UI using draggable panels, animations, content alignment, and localization
  • Implement your own sprites and fonts to customize your user interface
  • Move elements through code and handle collisions to create a game
  • Create an effective and user-friendly cross-platform main menu
  • Deal with different screen sizes and aspect ratios
  • Downloading the example code for this book. You can download the example code files for all Packt books you have purchased from your account at http://www.PacktPub.com. If you purchased this book elsewhere, you can visit http://www.PacktPub.com/support and register to have the files e-mailed directly to you.

    Table of Contents

    1. Learning NGUI for Unity
      1. Table of Contents
      2. Learning NGUI for Unity
      3. Credits
      4. About the Author
      5. About the Reviewers
      6. www.PacktPub.com
        1. Support files, eBooks, discount offers, and more
          1. Why subscribe?
          2. Free access for Packt account holders
      7. Preface
        1. What this book covers
        2. What you need for this book
        3. Who this book is for
        4. Conventions
        5. Reader feedback
        6. Customer support
          1. Downloading the example code
          2. Downloading the color images of this book
          3. Errata
          4. Piracy
          5. Questions
      8. 1. Getting Started with NGUI
        1. Overview
          1. Licenses
          2. UnityGUI versus NGUI
          3. Atlases
          4. Events
          5. Localization
          6. Shaders
        2. Final build
        3. Importing NGUI
          1. Importing from the Asset Store
          2. Importing from a disk
          3. Package importing
        4. Creating the UI Root
        5. Displaying text
          1. Creating the Label widget
          2. Selecting a font
          3. UILabel parameters
          4. Configuring the label
        6. Widget parameters
        7. Displaying a sprite
          1. Creating the sprite widget
          2. UISprite parameters
          3. Configuring the sprite
            1. Selecting an atlas
            2. Selecting a sprite
          4. Sprite types
            1. Sliced
            2. Simple
            3. Tiled
            4. Filled
        8. Under the hood
          1. UIRoot
            1. Scaling styles
              1. Flexible
              2. Constrained
              3. ConstrainedOnMobiles
            2. Configuration
          2. UIPanel
          3. The camera system
            1. Orthographic Camera
            2. UICamera
              1. Purpose
              2. Parameters
              3. Configuration
        9. Summary
      9. 2. Creating NGUI Widgets
        1. Control prefabs
          1. Background
        2. The Prefab Toolbar
        3. Buttons
          1. Creating a button
          2. The UIButton parameters
          3. The Play button
          4. The Options button
          5. The Exit button
        4. The Options window
        5. Popup List
          1. Creating the Popup List
          2. Parameters of UIPopup list
          3. Creating a language selection box
            1. Creating a background sprite
            2. The title
            3. The Popup list
        6. The input field
          1. Creating the input field
          2. Parameters of UIInput
          3. The nickname box
            1. The input field
        7. Adding a checkbox
          1. Creating the checkbox
          2. Parameters of UIToggle
          3. The sound toggle box
            1. The checkbox
        8. Slider
          1. Creating the slider
          2. The parameters of UISlider
          3. Volume adjustment
            1. The SFX slider
            2. The music slider
        9. Summary
      10. 3. Enhancing Your UI
        1. NGUI components
        2. Enlarging buttons on hover
          1. UIButton Scale
            1. Usage
            2. Parameters
        3. Menu appearance
          1. The tweening concept
          2. Tween Scale
            1. Usage
            2. Parameters
            3. Configuration
        4. Menu disappearance
          1. UIPlay Tween
            1. Usage
            2. Parameters
            3. Configuration
          2. Game exit
            1. MenuManager Script
            2. Linking the tween to Exit()
        5. Switching to options
          1. Tween Position
          2. Hiding the menu
            1. Configuring the Tween Position component
            2. Playing Tween Position
          3. Showing options
            1. Configuring the Tween Position component
            2. Playing Tween Position
        6. Back to the menu
          1. The Confirm button
          2. Hiding options
          3. Showing the menu
        7. Scene initialization
          1. Centering the options page
          2. The initialization script
          3. The MenuManager script
        8. Hiding and showing the volume box
          1. Tween Alpha
          2. Volume box fade
            1. Configuring Tween Alpha
            2. Playing Tween Alpha
        9. More tween components
        10. Draggable windows
          1. UIDragObject
            1. Usage
            2. Parameters
            3. Configuration
          2. Jumping windows glitch
            1. The Main menu
        11. Scrollable text
          1. Textbox
          2. Welcome label
          3. Clipping
        12. Close buttons
          1. UIForward events
            1. Closing the main menu
            2. Closing options
          2. UIEvent Trigger
            1. Force-saving the nickname
        13. Localization system
          1. Localization file
          2. UILocalize
          3. Selecting the language
          4. Remaining keys
          5. Final corrections
        14. Anchors
          1. Purpose
          2. Parameters
          3. Configuration
        15. Summary
      11. 4. C# with NGUI
        1. Events
          1. Available methods
          2. Example
        2. Creating tooltips
          1. The tooltip object
            1. Widgets
            2. UITooltip
          2. Displaying the tooltip
          3. Adding the remaining tooltips
        3. Tweens
          1. Tween Scale
            1. DisappearOnClick Script
            2. Tween effects
        4. Event delegates
          1. The callback
          2. Linking a callback to an event
            1. Code
            2. Inspector
        5. Keyboard keys
          1. UIKey binding
            1. Parameters
            2. Configuration
          2. UIKey navigation
            1. Parameters
            2. Configuration
              1. The Exit button
              2. The Options button
              3. The nickname input field
              4. The volume sliders
            3. Mouse and keyboard behavior
        6. Saving options
          1. The UISaved option
            1. Configuration
          2. The sound checkbox
        7. Persistent UI
          1. Singleton
            1. The Singleton class
            2. The MenuManager implementation
          2. Removing the welcome text
        8. Summary
      12. 5. Atlas and Font Customization
        1. Texture atlas
          1. The atlas prefab
        2. Creating a new atlas
          1. Atlas maker
          2. New atlas
            1. Necessary assets
            2. The Game atlas
          3. The play icon
        3. Adding sprites to the atlas
          1. Simple sprites
            1. Updating the atlas
            2. The options icon
            3. The exit icon
          2. Sliced sprites
            1. Updating the Atlas
            2. The button background
              1. Sprite parameters
              2. Nine-sliced configuration
          3. Tiled sprites
            1. Updating the atlas
            2. Wood texture
        4. Fonts
          1. Dynamic fonts
          2. Bitmap fonts
            1. Font Maker
            2. The UIFont component
            3. The Tooltip label
        5. Displaying large textures
          1. The UITexture component
            1. Parameters
            2. Configuration
        6. Summary
      13. 6. The In-game User Interface
        1. The game
          1. Pitch
          2. Necessary assets
          3. Importing the Unity package
        2. Draggable power sources
          1. UICamera
          2. UIDragObject
          3. Box Collider
        3. Moving the player
          1. Ground movement
          2. Reaching an object
        4. Player name display
          1. In-game 2D UI root
          2. The nickname prefab
          3. The PlayerName component
          4. The FollowObject component
        5. The elemental source switch
          1. The elemental switch UI
            1. The Fire button
            2. The remaining elemental buttons
              1. The Ice button
              2. The Lightning button
              3. The Water button
            3. The FollowObject component
          2. The GameManager component
          3. The PowerSource component
          4. Hiding the elemental switch UI
        6. The elemental switch charging process
          1. The progress prefab
          2. Progress slider implementation
          3. Linking elemental buttons
        7. The unavailable button
          1. The EnableAllButtons() method
          2. The SetButtonState() method
          3. Changing button states
        8. Launch from the main menu
        9. Summary
      14. 7. 3D User Interface
        1. Introduction to 3D user interface
          1. The 3D UI Root
          2. Scale calibration
          3. The score counter
            1. The text label
            2. The background
            3. The border sprite
            4. The position and rotation
            5. The ScoreController component
          4. The pause button
          5. The pause menu
            1. The panel and box
            2. The title bar
            3. Buttons
              1. Resume
              2. Exit
            4. Displaying the pause menu
              1. The tween alpha
              2. The Play Tween
            5. Linking the buttons
              1. Methods
              2. Link
            6. Key bindings
            7. Interaction override
        2. The 3D environment text
        3. Lighting effects
        4. Summary
      15. 8. Going Mobile
        1. Switching to Android
        2. Preparations
        3. Testing the game
          1. Bundle Identifier
          2. Building the package
            1. Manual build
            2. Build and run
          3. Testing
        4. Corrections
          1. Autorotation
          2. Back button
          3. Character movement
          4. The elemental switch UI
            1. The waiting feedback icon
            2. Code implementation
              1. The PowerSource component
              2. The GameManager component
              3. The ApproachOnClick component
        5. Customizable UI
          1. Draggable UI elements
          2. Activating drag
            1. The CustomizableUIElement component
            2. The GameManager component
          3. Why is this happening?
        6. Unity Remote
          1. Requirements
          2. Setting it up
          3. Testing our game
        7. The profiler
          1. Functionalities
          2. Run the profiler on device
        8. Debugging on the device
        9. Summary
      16. 9. Screen Sizes and Aspect Ratios
        1. The adaptive UI
        2. The flexible UI
        3. Multiple bitmap fonts
          1. The SmallLato font
          2. The MediumLato font
          3. The LargeLato font
          4. Displaying the fonts
        4. Multiple atlases
          1. Creating the atlases
            1. SDAtlas
            2. HDAtlas
            3. SHDAtlas
            4. ScreenAtlas
          2. The test button
            1. Changing the reference atlas
          3. Renaming sprites
        5. Switching atlases
          1. The AtlasSwitchController component
          2. Configuration
          3. Pixel snapping
        6. Switching fonts
          1. ScreenFont
          2. Assigning ScreenFont
        7. Summary
      17. 10. User Experience and Best Practices
        1. How it all started
        2. Definitions
          1. User experience
          2. Personas
          3. Usability
          4. Flow
          5. User interface design
        3. User interfaces in games
        4. Heuristics
          1. Guidance
            1. Affordance
            2. Prompting
            3. Categorization
            4. Feedback
          2. Workload
            1. Brevity
            2. Information density
          3. Explicit control
            1. Explicit actions
            2. User control
          4. Adaptability
            1. Flexibility
            2. Customization
          5. Error management
            1. Protect
            2. Inform
            3. Correct
          6. Consistency
        5. Testing your game
          1. Test advice
          2. When and what
            1. Concept prototypes
            2. Test the rest early
            3. Vertical slices
            4. Readability
            5. Guidance
            6. Test occurrences
          3. The usability testing method
            1. Preparation
              1. Goal
              2. Using personas
              3. New features
              4. Guide, don't help
              5. Observation grid
            2. Invite players!
            3. Environment
            4. Take notes
            5. Prioritize
        6. Summary
      18. Index