Unity UICookbook：60+实用教程打造沉浸式游戏界面

5星 · 超过95%的资源需积分: 9 116 浏览量更新于2024-07-21 4 收藏 17.62MB PDF 举报

"《Unity UI Cookbook》(PACKT, 2015)是一本专为游戏开发者设计的实用指南，随着游戏开发领域的日益兴盛，设计与实现一个与游戏设置相符且能有效传达信息的用户界面变得至关重要。本书以Unity系统为核心，帮助读者从零基础学习如何创建复杂而美观的用户界面，提升游戏的专业外观和用户体验。书中包含超过60个配方式教程，涵盖了从基础UI组件概念到高级功能的全方位指导。首先，读者将学习如何构建常见的界面元素，如计数器和生命值条，这些是游戏交互的基础。接着，会深入探讨如何利用定时器管理游戏时间，并掌握其格式化技巧，以增强游戏的实时性。进一步的内容将引导读者装饰和动画化UI元素，赋予它们生动和专业感，提升沉浸式体验。书中还会涉及3D UI世界和头部显示器(HUD)脚本的编写，这对于现代游戏的UI设计尤为重要。最后，读者将学习如何在界面上实现复杂的迷你地图，这在战略或探索类游戏中尤其关键。该书由经验丰富的作者Francesco Sapio编撰，旨在解决实际开发中的问题，适合希望通过Unity UI系统提升游戏设计能力的开发者。尽管新版本的Unity UI系统易用且功能强大，但通过结合C#脚本，可以发掘出更多的可能性，打造出令人印象深刻的UI效果。需要注意的是，所有内容版权属于PACKT Publishing，未经出版商书面许可，不得复制、存储或以任何形式传播。尽管作者和出版社已尽最大努力确保信息的准确性，但本书提供的信息并不构成法律保障，也不承担因使用本书内容导致的任何直接或间接损失的责任。在阅读过程中，读者可以参考www.allitebooks.com获取更多资源和支持。《Unity UI Cookbook》是一本实用的工具书，对于追求游戏UI设计质量和沉浸式体验的开发者来说，是不可或缺的参考资料。"

Preface

Customer support

Now that you are the proud owner of a Packt book, we have a number of things to help you to

get the most from your purchase.

Downloading the example code

You can download the example code les from your account at http://www.packtpub.com

for all the Packt Publishing books you have purchased. If you purchased this book elsewhere,

you can visit http://www.packtpub.com/support and register to have the les e-mailed

directly to you.

Downloading the color images of this book

We also provide you with a PDF le that has color images of the screenshots/diagrams used

in this book. The color images will help you better understand the changes in the output.

You can download this le from http://www.packtpub.com/sites/default/files/

downloads/UnityUICookbook_ColorImages.pdf.

Errata

Although we have taken every care to ensure the accuracy of our content, mistakes do happen.

If you nd a mistake in one of our books — maybe a mistake in the text or the code — we

would be grateful if you could report this to us. By doing so, you can save other readers from

frustration and help us improve subsequent versions of this book. If you nd any errata, please

report them by visiting http://www.packtpub.com/submit-errata, selecting your book,

clicking on the Errata Submission Form link, and entering the details of your errata. Once your

errata are veried, your submission will be accepted and the errata will be uploaded to our

website or added to any list of existing errata under the Errata section of that title.

To view the previously submitted errata, go to https://www.packtpub.com/books/

content/support and enter the name of the book in the search eld. The required

information will appear under the Errata section.

UI Essentials

Getting ready

To get started with this chapter, we will need to have Unity 5 running, and we must create

a new project. The project can be set in 3D or 2D, depending on which one better suits the

game that we wish to make. However, if it is set in 2D, Unity will automatically import our

images as sprites. Lastly, ensure that you have some nice images of your choice for use

in the examples, such an ancient map.

Setting up a 2D texture to be a bordered

sprite

To properly scale a 2D texture to the screen size, we may need to make it bordered. This

allows us to force the resolution, but not scale all the parts of our image, in order to maintain

the original appearance of the image. Buttons are often bordered because their appearance

depends strongly on how corners are scaled, and we don't generally want them to scale.

How to do it...

1. To begin, we need to import our image. We can do this by right-clicking on the Project

panel and then selecting Import new asset....

2. Using the navigation menu on your computer, locate an image and import it. As a

result, the image will be in our project and it can be used everywhere within the

current project.

Another way to add images to the project is by dragging and dropping

them into the Project panel.

3. Next, we need to select our image in the Project panel. In fact, this allows us to

display all the import settings in the Inspector window, which we can then tweak.

4. In order to use images as part of the UI, Texture Type must to be set in Sprite (2D

and UI). This can be changed through the Inspector window after we have selected

them. However, if our project is set as a 2D project, the image in the project will have

already been imported with Texture Type set correctly.

5. Once we have done this, we click on the Sprite Editor button.

6. In each side of the gure, we can nd four green points. By dragging them, it is

possible to divide the image into sections. By doing this, we create the borders of

our image. Therefore, let's drag them a bit inside the picture so that we can see the

borders. We have to pay attention when we have curved corners, which can be the

case if we are working on a button. In fact, we need to ensure that all the green lines

that belong to the border are beyond the curvatures of the corners. Otherwise, they

will not be scaled as they should.

Chapter 1

7. Finally, we can click on the Apply button in the top-right corner of the Sprite Editor

to save all our changes. After this, we can close the Sprite Editor, since we don't

need it anymore.

8. As a result, the image has borders, and therefore can be scaled as it should. How

to properly place this inside our UI, since it requires us to set the Image (Script)

component to Sliced.

How it works...

Sometimes, some components of our UI need to be scaled. However, not all of them can be

scaled freely. Otherwise, it could look different from what we thought it should be. Therefore,

bordered images are used to scale everything as it should be. Borders tell Unity how it has

to scale the picture. When we drag the green points in the Sprite Editor, we are dividing the

image into nine sections. Each of these sections is scaled differently. The central sections

are scaled in both x and y directions (vertically and horizontally). The side sections are scaled

in only one direction: vertically for the right/left sections and horizontally for the upper/lower

sections). Finally, the corners do not scale at all. You can see these nine sections and the

scales in the following image:

Let's consider an example to understand why a bordered sprite is important for the UI.

Imagine that we have a button like the one in the preceding image and we have placed it

on the screen. When the game runs on different devices, the resolutions will be different

and Unity will scale our UI accordingly (see the next recipe for more information). Ideally, we

want the button to look like the original one that we have designed as much as possible.

This means, for instance, that we want to preserve the original curvatures of the corners,

and therefore, we need to force them not to scale. This can be communicated to Unity using

borders. In this way, the rest of the button can scale along with the screen size in order to t it,

but as a result, the button will look like the original one.

www.allitebooks.com

剩余283页未读，继续阅读

vanridin

粉丝: 108
资源: 1187

Unity UICookbook：60+实用教程打造沉浸式游戏界面

Unity UI Cookbook - Francesco Sapio, 2015.pdf

Unity UI Cookbook (Francesco Sapio 2015)

Unity UI Cookbook pdf 2016新书 0分

unity uiframework.unitypackage

unity ui游戏框架

unity ui blur urp

unity ui界面demo

unity ui界面源文件

unity ui 多级菜单

unity ui多级菜单

最新资源