Как вставить картинку в unity 3d

8

Importing Textures

A texture An image used when rendering a GameObject, Sprite, or UI element. Textures are often applied to the surface of a mesh to give it visual detail. More info
See in Glossary is a bitmap image. You can create textures in a digital content creation application, such as Photoshop, and import them into Unity.

In a 3D Project, Unity imports image and movie files in the Assets folder as Textures. In a 2D Project, Unity imports image and movie files in the Assets folder as Sprites A 2D graphic objects. If you are used to working in 3D, Sprites are essentially just standard textures but there are special techniques for combining and managing sprite textures for efficiency and convenience during development. More info
See in Glossary .

As long as the image meets the specified size requirements, Unity imports and optimizes it for game use. This extends to multi-layer Photoshop PSD or TIFF files.

To import image and movie files as Textures and Sprites in Unity:

1. Select the image file in the Project window A window that shows the contents of your Assets folder (Project tab) More info
   See in Glossary .
2. In the Inspector A Unity window that displays information about the currently selected GameObject, asset or project settings, allowing you to inspect and edit the values. More info
   See in Glossary , set the Texture Import Settings.
3. Click the Apply button to save the changes.
4. To use the imported Assets in your Project:
   • For 3D Projects, create a Material and assign the Texture to the new Material.
   • For 2D Projects, use the Sprite Editor.

Recommendations and limitations

The following topics offer recommendations and detail any limitations on importing Textures:

HDR Textures

When importing from an EXR or HDR high dynamic range
See in Glossary file containing HDR information, the Texture Importer automatically chooses the right HDR format for the output Texture. This format changes automatically depending on which platform you are building for.

Texture dimension sizes

Ideally, Texture dimension sizes should be powers of two on each side (that is, 2, 4, 8, 16, 32, 64, 128, 256, 512, 1024, 2048 pixels (px), and so on). The Textures do not have to be square; the width can be different from height.

It is possible to use NPOT (non-power of two) Texture sizes with Unity. However, NPOT Texture sizes generally take slightly more memory and might be slower for the GPU to sample, so it’s better for performance to use power of two sizes whenever you can.

If the platform or GPU does not support NPOT Texture sizes, Unity scales and pads the Texture up to the next power of two size. This process uses more memory and makes loading slower (especially on older mobile devices). In general, you should only use NPOT sizes for GUI purposes.

You can scale up NPOT Texture Assets at import time using the Non Power of 2 option in the Advanced section of the Texture Importer.

Note: Specific platforms may impose maximum Texture dimension sizes. For DirectX, the maximum Texture sizes for different feature levels are as follows:

Notes:

• The Texture Importer only allows you to choose dimension sizes up to 16384 (16384 × 16384 pixels).
• Most Mali GPUs support Texture dimension sizes up to 4K for cubemaps.

Normal maps

Normal maps are used by normal map Shaders to make low-polygon models look as if they contain more detail. Unity uses normal maps encoded as RGB images. You also have the option to generate a normal map from a grayscale height map image.

Alpha maps

An alpha map is a Texture that contains only alpha information. You can use an alpha map to apply varying levels of transparency to a Material.

You can create an alpha map by creating a Texture with information in the alpha channel, or by creating a grayscale Texture and converting the grayscale values to alpha in Unity.

See the documentation on Texture Import Settings for more information.

Detail maps

If you want to make a Terrain The landscape in your scene. A Terrain GameObject adds a large flat plane to your scene and you can use the Terrain’s Inspector window to create a detailed landscape. More info
See in Glossary , you normally use your main Texture to show areas of terrain such as grass, rocks and sand. If your terrain is large, it may end up very blurry. Detail Textures hide this fact by fading in small details as your main Texture gets closer.

When drawing Detail Textures, a neutral gray is invisible, white makes the main Texture twice as bright, and black makes the main Texture completely black.

See documentation on Secondary Maps (Detail Maps) for more information.

Reflections (cubemaps)

To use a Texture for reflection maps (for example, in Reflection Probes A rendering component that captures a spherical view of its surroundings in all directions, rather like a camera. The captured image is then stored as a Cubemap that can be used by objects with reflective materials. More info
See in Glossary or a cubemapped Skybox A special type of Material used to represent skies. Usually six-sided. More info
See in Glossary , set the Texture Shape to Cube. See documentation on Cubemap Textures for more information.

Anisotropic filtering

Anisotropic filtering increases Texture quality when viewed from a grazing angle. This rendering is resource-intensive on the graphics card. Increasing the level of anisotropy is usually a good idea for ground and floor Textures. Use Quality settings to force anisotropic filtering for all Textures or disable it completely. Although, if a texture has its Aniso level The anisotropic filtering (AF) level of a texture. Allows you to increase texture quality when viewing a texture at a steep angle. Good for floor and ground textures. More info
See in Glossary set to 0 in Texture Import Settings, forced anisotropic filtering does not appear on this texture.

» />

Supported file formats

Unity can read the following file formats:

• BMP
• EXR
• GIF
• HDR
• IFF
• JPG
• PICT
• PNG
• PSD
• TGA
• TIFF

Unity automatically flattens multi-layer Photoshop PSD or TIFF files on import so that there is no size penalty for your game. This flattening happens to the imported data in Unity, not to the file itself, so you can continue to save and import your PSD or TIFF files without losing any of your work when using these file types natively. This allows you to have one copy of each Texture which you can use in Photoshop, your 3D modelling application, and in Unity.

Add an image to object in Unity editor

How do I add an image to an empty object? Which component should I add?

I’ve tried adding an «Image» component but I can’t figure out what to do afterwards.

4 Answers 4

Drag the image you want into the project directory and this will create a sprite from that image. Then drag that image onto the empty gameobject and it will create a sprite renderer component and will automatically add the image as the sprite for the sprite renderer. You can also do this manually by adding the sprite renderer and selecting your image as the sprite for the sprite renderer.

Note that if you are talking about Unity’s UI system, simply do this.

click «Add Canvas»

tip, be sure to select «Scale with screen size» there. (In 99.99999% of cases, you want that option. It’s bizarre Unity don’t make it the default; just one of those whacky things about Unity.)

simply click «Add Image»

Add images like the crazy — it’s that easy. You’ll have to learn to use Unity’s (superb) reactive layout system to position stuff on the screen in an advanced way. (Allow 3-4 months of study on that to become a hobbyist-level engineer on that system.)

Adding and displaying a background

Pixelnest 18 nov. 2013

Using the empty project we created in the previous part, we will now learn how to add a background and some fancy clouds.

Adding a background

Your first background will be static. We will use the following image:

(Right click to save the image)

Import the image in the “sprites” folder. Simply copy the file in it, or drag and drop it from the explorer.

Do not worry about the import settings for now.

In Unity, create a new Sprite game object in the scene.

What is a sprite?

In general, we call “sprite” a 2D image displayed in a video game. Here, it’s a Unity specific object made for 2D games.

Add the texture to the sprite

We will now select the actual sprite to display. Make sure that “New Sprite” is selected and look at the inspector. Set the Sprite property to the “background” image:

(You have to click on the small round icon at the right of the input box to show the “Select Sprite” inspector)

You can see that some other sprites are there. Those are the default images used by uGUI (the Unity UI system).

“My sprite doesn’t show up in the dialog?”: first, make sure you are in the “Assets” tab of the “Select Sprite” dialog.

Some readers have reported that, in their project, this dialog was empty. The reason is that for some Unity installations, even with a fresh new 2D project, images are imported as “Texture” and not “Sprite”.

To fix this, you need to select the image in the “Project” pane, and in the “Inspector”, change the “Texture Type” property to “Sprite”:

We don’t know why everybody doesn’t seem to have the same behavior.

Well, we have set a simple sprite displaying a cloudy sky background. You can think it was a bit complicated just for that. In fact, we could have dragged the sprite from the “Project” tab directly right into the “Scene”.

Let’s reorganize the scene.

In the “Hierarchy” pane, select the New Sprite . Rename it in Background1 or something you will easily remember.

Then move the object to where it belongs: Level -> Background . Change its position to (0, 0, 0) .

A quick exercise: duplicate the background and place it at (20, 0, 0) . It should fit perfectly with the first part.

Tip: you can duplicate an objet with the cmd + D (OS X) or ctrl + D (Windows) shortcuts.

Sprite layers

The next statement will seem pretty obvious, but it has some consequences: we are displaying a 2D world.

This means that all images are at the same depth, ie. 0 . And you (as well as the graphics engine) don’t really know who’s going to be displayed first.

Sprite layers allow us to tell Unity what is in the front and what is in the back.

In Unity, we can change the “Z” of our elements, and this will allow us to have layers. This is actually what we were doing in this tutorial before the Unity 5 update.

But we thought that it was a good idea to use Sprite Layers.

On your “Sprite Renderer” component, you have a field named… “Sprite Layer”, currently set to Default .

If you click on it, a short list will show:

Let’s add some layers to fit our needs (use the “+” button):

Apply the Background layer to our background sprite:

Tip: the settings “Order in Layer” is a way to limit sub-layers. Sprites with lower numbers are rendered before sprites with greater numbers.

Note: the “Default” layer cannot be removed, because this is the layer used by 3D elements. You can have 3D objects in your 2D game. Particles are considered as 3D objects by Unity, so they will be rendered on this layer.

Adding background elements

Also known as props. These elements aren’t used to improve the gameplay but to visually enhance the scene.

Here are some simple flying platform sprites:

(Right click to save the image)

As you can see, we got two platforms in one file. This is a good way to learn how to crop sprites with the Unity tools.

Getting two sprites from one image

1. Import the image in your “sprites” folder
2. Select the “platforms” sprite and go to the inspector
3. Change “Sprite Mode” to “Multiple”
4. Click on “Sprite Editor”

In the new window (“Sprite Editor”), you can draw rectangles around each platform to slice the texture into smaller parts:

Call the platforms “platform1” and “platform2”.

Tip: the top-left button “Slice” allows you to quickly and automatically make this tedious task.

Unity will find the objects inside the image and will slice them automatically. You can specify the default pivot point, or set a minimum size for a slice. For a simple image without artifacts, it’s really efficient. However, if you use this tool, be careful and check the result to be sure to get what you want.

Now, under the image file, you should see the two sprites separately:

Adding them to the scene

We will proceed like for the background sprite: create a new Sprite and select the “platform1” sprite (or drag them one by one from the “Project” to the “Scene” tab). Repeat for “platform2”.

Set their “Sprite Layer” to “Platforms”.

Place them in the Middleground object.

And… it’s working! I’m still amazed how simple it is now (to be honest, it was a bit tricky without the 2D tools, involving quad and image tiling).

Prefabs

Save those platforms as prefabs. Just drag’n’drop them inside the “Prefabs” folder of the “Project” pane from the “Hierarchy”:

By doing so, you will create a Prefab based exactly on the original game object. You can notice that the game object that you have converted to a Prefab presents a new row of buttons just under its name:

Note on the “Prefab” buttons: if you modify the game object later, you can “Apply” its changes to the Prefab or “Revert” it to the Prefab properties (canceling any change you’ve made on the game object). The “Select” button move your selection directly to the Prefab asset in the “Project” view (it will be highlighted).

Creating prefabs with the platform objects will make them easier to reuse later. Simply drag the Prefab into the scene to add a copy. Try to add another platform that way.

You are now able to add more platforms, change their positions, scales and planes.

You can put some in background or foreground too. Remember that the “Background”, “Middleground” and “Foreground” objects are just folders. So you need to set the right “Sprite Layer” (Platforms) and change the “Order in Layer”.

Use -10 for far platforms, and increase this number as you reach the foreground. An example:

It’s not very fancy but in two chapters we will add a parallax scrolling and it will suddenly bring the scene to life.

Camera and lights

Well. In the previous version of this tutorial (for Unity 4.2), we had a long and detailed explanation on how to set the camera and the lights for a 2D game.

The good news is that it’s completely useless now. You have nothing to do. It just works™.

Aside: if you click on the Main Camera game object, you can see that it has a “Projection” flag set to “Orthographic”. This is the setting that allows the camera to render a 2D game without taking the 3D into account. Keep in mind that even if you are working with 2D objects, Unity is still using its 3D engine to render the scene. The gif above shows this well.

Next step

You have just learned how to create a simple static background and how to display it properly. Then, we have taught you how to make simple sprites from an image.

In the next chapter, we will learn how to add a player and its enemies.

© 2016 Pixelnest Studio — we craft games and apps

Как вставить картинку в unity 3d

Рисование, Дизайн и Разработка игр

Главная » Введение в пользовательский интерфейс Unity — часть 1

Введение в пользовательский интерфейс Unity — часть 1

В этой первой части серии уроков, состоящей из трех частей, вы познакомитесь с Unity UI, позволяющим добавлять пользовательские интерфейсы в свои игры.

Версия: C# 6, Unity 2018.3, Unity

Вы помните старую систему пользовательского интерфейса Unity? Нужно было написать весь код графического интерфейса в OnGUI . Это было медленно, неэффективно и ориентировано на программистов, что противоречило визуальной природе Unity. Многие разработчики предпочли вместо этого использовать сторонние инструменты, такие как NGUI.

К счастью, Unity Technologies прислушалась к отзывам сообщества и разработала новую систему, выпущенную в Unity 4.6.

В этой серии из трех частей вы познакомитесь с новой системой пользовательского интерфейса Unity, добавив интерактивный интерфейс в игру под названием Rocket Mouse.

Чтобы удовлетворить тягу пользователей к привлекательному интерфейсу, вы также научитесь:

• Анимировать кнопки.
• Создавать диалоговое окно настроек, которое вставляется в сцену.
• Использовать больше элементов управления графическим интерфейсом, таких как текст, слайдер, панель и маска.

Приступая к работе

Это руководство предназначено для тех, кто знаком с редактором Unity. Загляните в серию уроков «Введение в Unity», если это ваше первое родео. Хорошая новость заключается в том, что, поскольку руководство посвящено системе пользовательского интерфейса, оно на 95% не содержит скриптов!

Примечание. Имейте в виду, что в уроке не рассматривается создание самой игры. Цель здесь — предоставить введение в систему пользовательского интерфейса Unity и познакомить вас с ее компонентами.

Вам понадобятся изображения для фона, кнопок и других элементов пользовательского интерфейса, а также несколько шрифтов для меток и кнопок. Не волнуйтесь, вам не придется ничего рисовать самостоятельно или рыскать по сети в поисках нужных ресурсов. Я подготовил специальный пакет, в котором есть все необходимое. Пожалуйста.

Чтобы получить пакет и файлы начального проекта, нажмите кнопку «Скачать материалы урока» вверху страницы.

Это все, что вам нужно!

Создание MenuScene

Откройте в Unity начальный проект Introduction to Unity UI Part 1 Starter.

Игра RocketMouse уже настроена, и все ее ресурсы находятся в отдельной папке. Вы будете работать в папке RW, которая содержит папку Scenes. Теперь вы создадите новую сцену для работы. В строке меню выберите File > New Scene, чтобы создать новую пустую сцену.

Лучше всего сразу сохранить сцену. Откройте диалоговое окно Save Scenes, выбрав File > Save Scenes. Затем введите MenuScene в качестве имени сцены и сохраните в папке RW / Scenes рядом со сценой RocketMouse.

Импортирование изображений и шрифтов

Первым делом в вашем списке дел нужно добавить ресурсы в сцену, поэтому распакуйте пакет UI Assets в проводнике файлов. Там вы найдете две папки: Menu и Fonts.

Примечание. Папка Menu содержит фоновые изображения, кнопки, значки и другой игровой арт, который предоставлен сайтом Game Art Guppy, где вы можете найти множество другой графики для тренировочных игр. Вдобавок два шрифта от DaFont. находятся в папке Fonts. Вы можете поблагодарить Rodrigo Fuenzalida за шрифт Titan One и Draghia Cornel за шрифт DCC Dreamer.

Приятно поддерживать аккуратную структуру папок, поэтому в окне Project создайте новую папку внутри RW с именем UI.

Из проводника файлов перетащите папки Menu и Fonts в папку UI в окне Project:

Как только ассеты будут в проекте, проверьте их настройки импорта. Убедитесь, что все ресурсы в UI / Menu установлены на тип текстуры Sprite (2D и UI).

У-у-у! Вы закончили настройку и готовы создать свой первый элемент пользовательского интерфейса с помощью системы Unity UI.

Добавление вашего первого элемента пользовательского интерфейса

Первый элемент, который вы создадите — это фоновое изображение для сцены меню.

На верхней панели выберите GameObject > UI > Image. Это добавляет в сцену объект с именем Image. Вы должны увидеть его в Иерархии как дочерний элемент Canvas. Все элементы должны быть размещены на холсте. Если у вас его нет, Unity создаст его автоматически.

Выберите изображение и установите его положение на (X: 0, Y: 0). Вы только что открыли для себя Rect Transform:

Примечание. Rect Transform — это пользовательский интерфейс, эквивалентный Transform. Он позиционирует, вращает и масштабирует элементы пользовательского интерфейса на холсте. Вы будете часто использовать его в этом руководстве.

Вы сразу же установите правильное положение и размер. Прямо сейчас нужно помнить о трех вещах. В Иерархии вы увидите три новых объекта сцены:

1. Image
2. Canvas
3. EventSystem

Image — это неинтерактивный элемент управления, который отображает спрайт с множеством опций для настройки.

Например, вы можете применить цвет к изображению, назначить ему материал, контролировать, какая часть изображения будет отображаться, или даже оживить его на экране с помощью протирания по часовой стрелке.

Canvas — это корневой объект для всех ваших элементов пользовательского интерфейса. Помните, Unity создает его за вас, когда вы добавляете свой первый элемент пользовательского интерфейса. Он имеет несколько свойств, которые позволяют вам управлять отрисовкой пользовательского интерфейса.

EventSystem обрабатывает и направляет входные события объектам в сцене. Он также отвечает за управление Raycasting. Как и в случае с Canvas, пользовательскому интерфейсу требуется система событий, поэтому Unity автоматически добавляет ее.

Настройка фонового изображения меню

Первое, что нужно сделать, это переименовать изображение. В Иерархии выберите Image и переименуйте его в Background.

Затем откройте RW > UI > Menu в окне проекта и найдите изображение menu_background. Перетащите его в поле Source Image компонента Image, игрового объекта Background, в окне Inspector:

Теперь у вас есть фоновое изображение вместо белого изображения по умолчанию. Но такой фон слишком маленький, а соотношение сторон неправильное.

Чтобы исправить ситуацию, найдите кнопку Set Native Size в Инспекторе и нажмите на нее для установки размера 1136 x 640.

Теперь это похоже на правильный фон.

Ой-ой. Есть еще одна проблема.

Уменьшите вид сцены, и вы увидите, что белый прямоугольник холста покрывает только часть изображения. Если вы переключитесь в режим просмотра игры, вы увидите только часть фонового изображения, как будто камера находится слишком близко к изображению, чтобы полностью его захватить.

Примечание. Изначально игра была разработана для iPhone с дисплеями диагональю 3,5 и 4 дюйма. Вот почему вся игровая графика поддерживает разрешения 1136 x 640 и 960 x 640. Скоро вы увидите, как пользовательский интерфейс может адаптироваться к различным разрешениям игры.

Вы решите эту проблему, используя Canvas Scaler.

Использование масштабатора холста

Вы воспользуетесь инструментом Canvas Scaler, чтобы настроить фоновое изображение.

Во-первых, вам нужно знать, что отображение не является результатом ошибки. С точки зрения Unity, у вас есть игровое представление — или окно просмотра — настолько маленькое, что оно отображает только ту часть изображения, которая умещается в игровом представлении.

Если бы вы запускали игру на устройстве с достаточно большим разрешением или растягивали окно Game до размеров всего изображения, вы бы увидели все фоновое изображение.

Хотя настройки Unity имеют смысл в большинстве случаев, бывают так, что вам нужно другое поведение. Например, у вас небольшой монитор, который не соответствует разрешению вашего целевого устройства.

Кроме того, многие игры поддерживают только одно разрешение. Дизайнеры используют это эталонное разрешение для определения размеров, положения и других данных. Когда вы разрабатываете игру, основанную на единственном эталонном разрешении, обязательно вводите спецификации дизайнера без дополнительных вычислений, чтобы пользователь видел все, как задумано.

Если вы когда-либо игнорировали указания своего дизайнера, вы знаете, что за это нужно платить. Удобство работы и различные разрешения важны, но постарайтесь сделать так, чтобы ваш дизайнер тоже был доволен.

Canvas Scaler спешит на помощь! По умолчанию каждый холст включает масштабатор холста.

Выберите Canvas в Hierarchy, и в Inspector вы должны увидеть компонент Canvas Scaler:

Canvas Scaler имеет три режима масштабирования:

• Constant Pixel Size: заставляет элементы пользовательского интерфейса сохранять одинаковый размер пикселя независимо от размера экрана. Это значение Canvas по умолчанию.
• Scale With Screen Size: размеры и расположение элементов пользовательского интерфейса в соответствии с указанным разрешением. Если текущее разрешение больше, чем указанное разрешение, холст сохранит исходное разрешение, увеличивая при этом размеры элементов для соответствия целевому разрешению.
• Constant Physical Size: позиции элементов пользовательского интерфейса указываются в физических единицах, таких как миллиметры или точки. Это требует правильного сообщения о разрешении экрана.

Измените режим компонента на Scale With Screen Size и установите для Reference Resolution значение (X: 1136, Y: 640). Также сдвиньте Match Width or Height до упора вправо или просто введите 1 в поле ввода.

После внесения этих изменений вы увидите полное фоновое изображение даже в небольшом окне просмотра игры.

Измените разрешение просмотра игры, чтобы увидеть, как ваша игра может выглядеть в другом разрешении, например, на iPhone Wide 480 x 320. Вы заметите, что игра по-прежнему выглядит хорошо!

Примечание. Если вы не видите ни одного из вариантов iPhone, скорее всего, вы работаете для другой платформы. В строке меню выберите File > Build Settings. В диалоговом окне настроек сборки под настройками платформы обязательно выберите iOS.

Unity повторно обработает все ассеты, и это может занять некоторое время. В итоге, у вас должен быть доступ к различным размерам экрана iOS.

Теперь переключитесь в режим просмотра Scene, и вы увидите, что размер холста не изменился при изменении размера представления Scene. Боковые края экрана аккуратно обрезаны, а центральная часть полностью видна. Это результат установки Match Width or Height на 1. Он отлично работает для ваших целевых разрешений.

Это старые версии дизайна! В «альбомном» режиме экраны современных телефонов намного шире. Переключитесь на такой режим iPhoneX, и возникнет совершенно новая проблема.

Если вы измените значение Match Width or Height обратно на ноль, оно будет работать для iPhone 5 и iPhoneX, но будет отображаться в виде почтового ящика на iPhone 4.

К счастью, для этого есть другие решения. Хотя у Canvas Scaler есть два других режима масштабирования, Expand и Shrink, есть еще один полезный компонент, который мы можем использовать специально для фоновых изображений.

Верните Canvas Scaler в положение Match Width or Height со значением 1 и установите для игрового представления значение iPhoneX. Ему снова должно понравиться изображение выше.

Теперь выберите Background и добавьте компонент Aspect Ratio Fitter. Он автоматически установит значение Aspect Ratio на текущее соотношение Rect Transform изображения. Переключите Aspect Mode на Envelope Parent. Размер изображения автоматически изменится, чтобы снова заполнить весь экран.

Уф, проделано много работы. И мы только добавили фоновое изображение! Но правильная настройка Canvas Scaler и фона упростит работу в будущем. Сделав это несколько раз, вы обнаружите, что настройка настолько проста, что у вас едва ли будет время моргнуть, прежде чем вы закончите.

А что с кнопками? Что произойдет, если они окажутся слишком близко к левому или правому краю экрана? Вы не хотите их обрезать или скрывать.

К счастью, в Unity есть функция, которая поможет вам избежать этой ошибки новичков. Вы скоро об этом узнаете.

Добавление изображения заголовка

Прежде чем перейти к кнопкам и другим элементам управления пользовательского интерфейса, вы добавите изображение заголовка. В этом упражнении вы будете использовать неполноэкранное изображение, чтобы продемонстрировать несколько других важных концепций новой системы пользовательского интерфейса Unity.

Откройте окно Scene и на верхней панели выберите GameObject > UI > Image. Это добавит еще одно изображение в качестве дочернего элемента Canvas:

Примечание. Если вы не видите изображение в режиме просмотра сцены, установите для его свойств Pos X и Pos Y значение 0, чтобы центрировать его.

Теперь превратите этот белый прямоугольник в реальное изображение, выполнив следующие действия:

1. Выберите Image в иерархии и переименуйте его в Header.
2. Откройте папку Menu в окне проекта и найдите изображение header_label.
3. Перетащите изображение в поле Source Image в Инспекторе.
4. Нажмите Set Native Size в Инспекторе.

Теперь вы будете работать с компонентом Rect Transform, чтобы расположить изображение.

Rect Transform, Anchors и Pivot

Если вы работали с Unity до этого или прошли другие уроки по Unity на этом веб-сайте, возможно, вы имели некоторое представление о компоненте Transform. Если нет, ничего страшного. Transform — это инструмент, который может позиционировать, вращать и масштабировать объекты в сцене. Вот как это выглядит:

Вы увидите компонент Transform, когда выберете любой тип GameObject, не относящийся к пользовательскому интерфейсу, в окне Hierarchy. Однако, если вы выберете любой элемент пользовательского интерфейса, например заголовок, вы увидите другой компонент с именем Rect Transform.

Как видите, Transform и Rect Transform выглядят по-разному. Кроме того, Rect Transform может изменять свой внешний вид в зависимости от настроек привязки. Например, это может выглядеть так:

Здесь вместо Pos X, Pos Y, Width и Height у вас есть Left, Top, Right и Bottom.

Вас интересует настройка привязки, которая так резко меняет внешний вид Rect Transform? Продолжайте читать!

Anchors

Установка якорей — это простой, элегантный и мощный способ управления положением и размером элементов пользовательского интерфейса относительно их родительских элементов. Это особенно удобно, когда нужно изменить размер родительских объектов.

Когда вы устанавливаете якоря, вы указываете несколько позиций в родительском элементе, обычно по одной в каждом углу родительского элемента пользовательского интерфейса Rect. Когда это происходит, то элемент пользовательского интерфейса будет пытаться поддерживать постоянное расстояние до точек привязки, заставляя его перемещаться или изменять размер вместе со своим родительским элементом.

Чтобы увидеть различные Anchors Presets, выберите Header в Иерархии и щелкните прямоугольник над полем Anchors в компоненте Rect Transform.

После нажатия вы увидите различные предустановки привязки. Это наиболее распространенные настройки для якорей, но вы можете их настроить. Вы также можете выбрать различное горизонтальное и вертикальное поведение для своего элемента пользовательского интерфейса.

Все это будет иметь больше смысла, когда вы с этим поработаете. Если вы посмотрите на следующее изображение с отключенным фоновым изображением, вы увидите, что размер холста немного изменился.

Как видите, настройки якорей управляют тем, как ваш элемент пользовательского интерфейса адаптируется к изменениям размера экрана.

Четыре треугольные направляющие в виде якорей, напоминают цветок. Вот как это выглядит с якорями, установленными на предустановку по центру вверху:

Прежде чем начать экспериментировать с различными настройками, прочтите следующий раздел. Это поможет вам немного лучше понять якоря и извлечь больше пользы из экспериментов.

Пользовательские якоря

Вы можете вручную переместить якоря в произвольное положение. Предустановки предназначены только для вашего удобства.

Примечание. Вы можете оказаться в ситуации, когда гизмо перемещения закрывает значок якоря, поэтому не получается выбрать привязку.

Здесь пригодится еще один инструмент Unity UI. Если вы знакомы с Unity, то знаете, что сочетания клавиш Q, W, E и R позволяют переключать инструменты Hand, Move, Rotate и Scale соответственно. В новой системе пользовательского интерфейса RectTool был добавлен для кнопки T. При выбранном RectTool Gizmo превращается в поле 2D масштабирования / перемещения, которое действует так, как вы ожидаете от любого программного обеспечения для редактирования графики.

Теперь вы можете брать якоря и перемещать их.

Видите, как изображение перемещается вправо при изменении размера холста? Он лишь немного перемещается по отношению к правому краю холста, потому что эти привязки установлены на 25% ширины холста.

Разделение анкеров

Вы можете разделить якоря, чтобы они растягивали элемент пользовательского интерфейса по горизонтали, вертикали или по обоим направлениям.

Примечание. На самом деле вы не изменяете размер холста при перетаскивании его краев. Фактически, вы не можете изменить размер холста таким образом.

Ищите слово Preview рядом с курсором, когда вы пытаетесь изменить его размер. Используйте эту технику, чтобы поэкспериментировать и посмотреть, как элементы пользовательского интерфейса адаптируются к разным размерам экрана.

Rect Transform зависит от текущей настройки якорей

В зависимости от настройки привязки Rect Transform предоставляет различные способы управления размером и положением элемента пользовательского интерфейса.

Если вы установите привязку к одной точке без растяжения, вы увидите свойства Pos X, Pos Y, Width и Height.

Однако, если вы установите привязки таким образом, чтобы растягивать элемент пользовательского интерфейса, вы получите Left и Right вместо Pos X и Width, если вы настроите его на растяжение по горизонтали. Вы получите Top и Bottom вместо Pos Y и Height, если установите растяжение по вертикали.

На этом скриншоте якоря заголовка настроены на среднее растяжение. Это означает, что изображение остается в середине холста по вертикали и растягивается по горизонтали.

Точка опоры

Последнее свойство, которое нужно обсудить в компоненте Rect Transform, — это Pivot.

Pivot — это точка, вокруг которой производятся все преобразования. Другими словами, если вы измените положение элемента пользовательского интерфейса, вы также измените положение точки поворота. Если вы повернете элемент пользовательского интерфейса, он будет вращаться вокруг этой точки.

Поворот использует нормализованные координаты. Это означает, что он изменяется от 0 до 1 как для высоты, так и для ширины, где (0, 0) — нижний левый угол, а (1, 1) — верхний правый угол.

Примечание. Вы также можете установить Pivot за пределами границ элемента пользовательского интерфейса. В этом случае Pivot будет вне диапазона (0, 0) — (1, 1). Это может быть полезно. Например, вы можете захотеть повернуть ваш объект вокруг некоторой точки сцены. Чтобы изменить поворот, вы должны убедиться, что кнопка Pivot / Center переключена на Pivot следующим образом:

Вы можете изменить поворот в компоненте Rect Transform в Инспекторе или использовать инструмент Rect Tool.

Следующие два изображения демонстрируют элемент пользовательского интерфейса с одинаковыми значениями Pos X и Pos Y, но каждое из них показывает разное расположение в сцене.

На первом изображении показана точка поворота со значением по умолчанию (0,5, 0,5), которое является центром элемента пользовательского интерфейса. Позиция установлена на (0, 0), а якоря установлены в верхний левый угол.

Примечание. Важно понимать, что положение элемента пользовательского интерфейса устанавливается относительно привязок. Позиция (0, 0) означает расстояние от якорей, которые установлены в верхнем левом углу холста.

Теперь взгляните на второе изображение. Как вы можете видеть, позиция все еще находится в (0, 0), но поскольку точка поворота установлена в нижний левый угол (0, 0), вы можете видеть, что нижний угол изображения, а не центр, теперь находится в верхний левый холст.

Сложнее показать, как точка опоры влияет на поворот и размер, используя неподвижное изображение, поэтому вот несколько анимаций:

Обратите внимание, как изображение вращается вокруг точки поворота, обозначенной синим кружком, который является элементом, который вы можете свободно перемещать.

Примечание. Удерживайте нажатой клавишу Option / ALT во время масштабирования для масштабирования вокруг точки поворота.

Как видите, поворот также влияет на изменение размера элемента пользовательского интерфейса.

Примечание. Когда вы меняете размер элемента пользовательского интерфейса, вы не меняете его масштаб. Вместо этого вы изменяете его размер, используя отступы «Ширина и высота» или «Верхнее, правое, левое и нижнее».

Имейте в виду, что есть несколько различий между размером и масштабом. Например, размер не может быть отрицательным, а масштаб может быть отрицательным. Кроме того, использование отрицательного значения масштаба отразит элемент пользовательского интерфейса. В большинстве случаев вам следует изменить только размер элементов пользовательского интерфейса.

Размещение изображения заголовка

Уф! Так много информации о Rect Transform, Anchors и Pivot. Поверьте, вы будете благодарны, что потратили время на выполнение упражнения, поскольку эти концепции необходимы для создания потрясающего пользовательского интерфейса в ваших играх.

В дальнейшем вы сконцентрируетесь на создании сцены меню. Остальная часть этого урока пройдет быстрее!

Все эти манипуляции истощили бедный маленький заголовок. Пришло время поместить его на место и оставить в покое, чтобы он восстановился.

Прежде чем продолжить, повторно включите фон, если вы отключили его, чтобы увидеть границу холста.

Выберите Header в Иерархии и установите его свойства в Инспекторе следующим образом:

1. Нажмите на Set Native Size, чтобы сбросить размер, поскольку вы, вероятно, испортили его, играя с поворотом.
2. Установите якоря по центру вверху.
3. Установите Pos X на 0 и Pos Y на -100.

Вы должны увидеть что-то вроде этого в режиме просмотра Scene:

Вот так! Теперь оставьте изображение заголовка в таком положении.

Теперь, когда вы знаете о привязках и точка опоры, вернитесь к фоновому изображению. Вы заметили, что когда вы добавили установщик соотношения сторон, часть текстуры пола теперь обрезана за пределами экрана? Мы можем использовать Aspect Ratio Fitter в сочетании с опорной точкой, чтобы исправить это:

1. Отключите Aspect Ratio Fitter
2. Установите Pivot на (X: 0,5, Y: 0)
3. Повторно активируйте Aspect Ratio Fitter

Теперь не только фон всегда соответствует размеру телефона, но и пол всегда остается на виду!

Добавление кнопки запуска

Теперь, когда у игры есть красивый фон с надписью, пора добавить несколько кнопок.

На верхней панели выберите GameObject > UI > Button. Это добавит в сцену объект Button, который вы должны увидеть в Иерархии. Если вы развернете кнопку, то увидите, что она содержит дочерний элемент Text — об этом вы узнаете позже.

Посмотрите на кнопку в инспекторе, и вы увидите, что в ней есть тот же компонент изображения, который вы использовали для добавления фона и метки заголовка.

Кроме того, есть компонент Button. Другими словами, кнопка — это просто изображение с дочерним элементом Text и прикрепленным скриптом кнопки.

Примечание. Элемент Text является необязательным, поэтому, если у вас есть изображение кнопки с текстом, нарисованным прямо на изображении, вы можете удалить его.

Размещение кнопки

Теперь все о расположении и изменении размера кнопки. Следуйте этим шагам:

1. Выберите кнопку в окне Иерархии и переименуйте ее в StartButton.
2. Установите его Anchors на растяжение снизу, так как вы хотите, чтобы он растягивался по горизонтали при изменении размера экрана. Совет: удерживайте Alt / Cmd и Shift при выборе привязки, чтобы также установить положение и точку опоры.
3. Для дальнейшей настройки якорей установите для X значение (Min:0.2, Max:0.8).
4. Установите для Left и Right значение 123.
5. Установите Pivot на (X: 0,5, Y: 0)
6. Установите Height на 80.
7. Установите Pos Y на 300.

Затем выберите вложенный Text element и установите его параметру Text значение Start Game. Измените Font Size на 32, чтобы увеличить текст кнопки.

Вот что вы должны увидеть в режиме просмотра сцены:

Теперь у вас есть кнопка, но ее нужно обновить! Чтобы кнопка выглядела хорошо, вы установите изображение в качестве фона, а затем используйте более красивый шрифт.

9-сегментное масштабирование

Таким же образом вы устанавливаете изображения для кнопок и изображений, так как они используют один и тот же компонент. Однако изображения редко масштабируются, особенно неравномерно. С другой стороны, кнопки часто бывают разных размеров.

Вы можете создать фоновое изображение для каждого размера кнопки в игре, но зачем тратить все это пространство? Вы воспользуетесь техникой 9-сегментного масштабирования, которая позволяет получить одно маленькое изображение, масштабируемое под любой нужный размер.

Здесь нет никакой магии. Этот метод работает путем создания разных изображений для каждой из девяти областей, каждая из которых масштабируется по-разному.

Это гарантирует, что изображение будет хорошо смотреться в любом масштабе.

Подготовка изображений кнопок

Прежде чем вы сможете использовать нарезанное изображение, вам нужно установить его девять областей. Для этого откройте папку Menu в окне Project и выберите изображение btn_9slice_normal.

В Import Settings инспектора установите для параметра Texture Type значение Sprite (2D and UI) и примените изменения. Затем нажмите на кнопку Sprite Editor, чтобы открыть окно редактора спрайтов.

В редакторе спрайтов установите значения Border на L: 14, R: 14, B: 16, T: 16. Не забудьте нажать Apply!

Повторите эти же действия для изображений btn_9slice_highlighted и btn_9slice_pressed, которые вы будете использовать для других состояний кнопок.

Настройка изображений кнопок

После подготовки всех изображений перетащите их в соответствующие поля в Инспекторе. Выберите StartButton в Иерархии и выполните следующие действия:

1. Измените Image Type на Sliced в компоненте Image.
2. Измените свойство Transition в компоненте Button на SpriteSwap.
3. Перетащите btn_9slice_normal в Source Image в компоненте Image.
4. Перетащите btn_9slice_highlighted в Highlighted Sprite в компоненте Button.
5. Перетащите btn_9slice_pressed в Pressed Sprite в компоненте Button.

Примечание. Если вы столкнулись с этим сообщением об ошибке, вы, вероятно, забыли установить границу в редакторе спрайтов в настройках импорта.

Прежде чем запускать сцену и наслаждаться прикольными кнопками, вы собираетесь изменить шрифт, используемый вложенной текстовой меткой. Это сделает кнопку мега-крутой.

Установка пользовательского шрифта для кнопки

Использовать собственный шрифт очень просто. Помните папку Fonts в пакете, который вы скачали и добавили в проект? Пришло время разбить его и использовать один из этих шрифтов.

Выберите элемент Text, вложенный в StartButton в Иерархии. Затем откройте папку Fonts в окне Project и перетащите шрифт TitanOne-Regular в поле Font. Также установите белый цвет.

Теперь запустите сцену и наслаждайтесь своей новой мега-крутой кнопкой!

Добавление кнопки настроек

Осталось сделать еще несколько вещей. Сначала добавьте кнопку Settings.

Вы, вероятно, сможете сделать это сами, так что для начала вам нужен только размер и положение кнопки. Остальное почти идентично тому, как вы создали кнопку Start Game.

Примечание. Самый простой способ — продублировать кнопку и настроить некоторые свойства, но на этот раз попробуйте создать кнопку с нуля.

Эти свойства кнопки Settings различаются:

• Name: SettingsButton
• Rect Transform: левый и правый — 400, высота — 70, а положение Y — 180.
• Text: Settings
• Fontsize: 24

Если у вас не получается, просто выполните следующие действия:

1. На верхней панели выберите GameObject > UI > Button. Это создаст объект Button в сцене.
2. Выберите кнопку в окне Иерархии и переименуйте ее в SettingsButton.
3. Установите кнопке Anchors на bottom-stretch. Затем обновите X до (Min:0.2, Max:0.8)
4. Установите Pivot на (X: 0,5, Y: 0)
5. Установите для Left и Right в Rect Transform значение 173.
6. Установите Height на 70 и Pos Y на 180.
7. Установите для параметра Transition в компоненте Button значение Sprite Swap.
8. Убедитесь, что для параметра Image Type в компоненте Image установлено значение Sliced.
9. Откройте папку Menu в окне Project и перетащите btn_9slice_normal в Source Image.
10. Затем перетащите btn_9slice_highlighted в Highlighted Sprite.
11. И, наконец, перетащите btn_9slice_pressed в Pressed Sprite.
12. Дважды нажмите на Color внутри компонента Image и проверьте, установлено ли для A значение 255, чтобы удалить любую прозрачность.

Вот что вы должны увидеть в режиме просмотра сцены после добавления кнопки настроек:

Теперь сохраните сцену.

Запуск игры

Последняя задача в этой части — нажать кнопку Start Game и запустить вторую сцену в самой игре.

Добавление сцен в сборку

Прежде чем вы сможете запускать различные сцены, вам необходимо добавить их в список Scenes in Build в настройках проекта.

Для этого в меню выберите File > Build Settings. Откроется диалоговое окно Build Settings. Затем откройте папку Scenes в браузере проектов. Сначала перетащите сцену MenuScene, а затем сцену RocketMouse в списке Scenes in Build.

Наконец, закройте диалоговое окно Build Settings.

Создание UIManager

А вот и 5% часть урока с кодом!

Когда вы добавляете обработчик событий к кнопке, вам необходимо указать, какой метод вызывать при нажатии кнопки. Поскольку вы не можете использовать статические методы, вам нужно будет выбрать общедоступный метод из скрипта, прикрепленного к GameObject.

На верхней панели выберите GameObject > Create Empty. Затем выберите GameObject в окне Hierarchy и переименуйте его в UIManager.

Создайте папку Scripts внутри RW, а затем создайте в ней новый скрипт C# с именем UIManager. Как только Unity скомпилирует скрипт, прикрепите его в качестве компонента к игровому объекту UIManager.

Вот что вы должны увидеть в окне Hierarchy и Inspector:

Дважды нажмите на UIManagerScript в Инспекторе, чтобы открыть скрипт в редакторе кода. После загрузки скрипта удалите как Start () , так и Update () .

Затем добавьте следующий оператор под предыдущими операторами using .

Это позволяет загружать другие сцены. Теперь добавьте следующее:

Сохраните скрипт и переходите к следующему шагу:

Вызов StartGame при нажатии кнопки

Вернитесь в Unity и выполните следующие действия:

1. Выберите StartButton в Иерархии и прокрутите вниз в Инспекторе до списка On Click().
2. Нажмите кнопку +, чтобы добавить новый элемент.
3. Перетащите UIManager из Иерархии на новый добавленный элемент в списке.
4. Нажмите на раскрывающийся список, чтобы выбрать функцию. Сейчас установлено значение No Function.
5. В открывшемся меню выберите UIManagerScript и в открывшемся меню выберите StartGame ().

Сохраните сцену и затем нажмите кнопку Play, чтобы запустить игру. Нажмите на кнопку Start Game в меню. Это должно открыть игровую сцену.

Куда двигаться дальше?

Возникают сложности по каким-либо вопросам? Не стесняйтесь скачивать завершенный проект для этой части, используя кнопку «Скачать материалы урока» вверху данного урока.

Может показаться, что вы мало что сделали в этом последнем разделе, но взгляните еще раз: вы настроили пользовательский интерфейс, добавили изображения и кнопки и даже написали код, запускающий игру при нажатии на кнопку!

Во многих играх это все, что составляет пользовательский интерфейс.

Вы также узнали много нового о Rect Transform, Anchors и Pivot. Теперь, когда вы их поймете, вы сможете действовать намного быстрее, если примените эти навыки в своих собственных проектах.

Во второй части этой серии вы узнаете, как анимировать элементы пользовательского интерфейса, создавать диалоги и использовать такие элементы управления, как Slider и Toggle. К концу серии у вас будет рабочая сцена меню.

Если у вас есть вопросы или комментарии, оставьте их ниже! Увидимся во второй части урока!

Комментариев: 3 на “ Введение в пользовательский интерфейс Unity — часть 1 ”

Нажимаю на кнопку sprite editor, но почему то не открывается редактор спрайтов, а выходит какое то сообщение, подскажите

Возможно не установлен плагин Sprite Editor. Зайдите в window/package manager, нажмите сверху на Packages: Unity Registry и выберите 2D sprite, установите нажав на кнопку install.

так может зависеть от версий юнити, некоторые плагины нужно устанавливать, и интерфейс отличается