Създаване на лента за умения

Тази статия започва поредица от публикации за създаване на панел с умения за вашата игра. Панели за умения се намират в много RPG игри и не само.

С изграждането на лентата с умения ще бъдат обхванати много поддържащи компоненти, като работа с потребителския интерфейс или Unity UI (потребителски интерфейс); използване на Event System, Grid Layout Group, Outline компоненти; настройка на платно; използване на интерфейси IPointerDownHandler, IPointerEnterHandler, IPointerExitHandler; и още много. Резултатът е игра като тази:

Тъй като материалът излезе доста обемен, се наложи да го разделим на части. Днес ще обърнем специално внимание на работата с настройките на Unity UI и Canvas.

Създайте сцената и настройте платното:

Първо трябва да създадем празен 3d проект и да добавим нова камера за потребителския интерфейс (GameObject > Camera), нека я кръстим UICamera. Нека променим проекцията на камерата на ортографична (размерът на обектите не зависи от разстоянието). Задаване на ясни флагове > Само дълбочина, това ще ви даде прозрачна камера без ненужни добавки към фона. Тъй като потребителският интерфейс трябва да рисува върху всичко, трябва да променим дълбочината на камерата (Дълбочина = 1).

След това ще създадем Canvas (GameObject > UI > Canvas), заедно с елемента Canvas, ще създадем система за събития, необходима е за обработка на събития, които се случват на Canvas (повече за това по-късно). Какво е Canvas и за какво служи. Canvas се превежда като „Платно“ и е абстрактно пространство за персонализиране и изобразяване на потребителския интерфейс. Всички елементи на потребителския интерфейс трябва да бъдат наследници на Canvas. Препоръчително е да използвате следните настройки (те автоматично ще се настроят към разширяването на екрана, многоудобни за мобилни устройства):

Изберете „Render Mod > Пространство на екрана – Camera»UI. В полето „Render Camera“ изберете UICamera, която създадохме. След това остава да промените Sctipt на Canvas Scaler, а именно полето „UI Scale Mode > Мащабиране с размер на екрана", който автоматично променя потребителския интерфейс в зависимост от размера на екрана.

Това завършва настройките на Canvas.

Работа с потребителския интерфейс на Unity:

Удобно е да работите с UI елементи в 2d режим (това не е необходимо, но значително ще опрости процеса на разработка на UI), можете да превключвате между 2d и 3d режими, като използвате „Scence > 2D".

Всички елементи на потребителския интерфейс съдържат следния компонент Rect Transform (включително Canvas). Това е "Rect Transform", което контролира позицията на потребителския интерфейс спрямо разширението на екрана.

Разгледайте възможностите на "Rect Transform" на прост пример. Първо, нека създадем бутон (щракнете с десния бутон върху елемента Canvas > UI > Button). Първото нещо, което хваща окото ви, е син кръг и четири триъгълника в центъра на бутона.

Четири триъгълника се наричат ​​"Anchor", тъй като в зависимост от местоположението и настройките, UI елементите променят поведението си при промяна на размера на екрана. Синият кръг е "центърът" на бутона (или друг UI елемент), спрямо него се извършва завъртането (Rotation) или мащабирането (Scale) на елемента.

Местоположението на "центъра" на бутона се съхранява в определен формат и за него отговаря полето "Pivot". Къде е местоположението на "центъра" в съотношението (координатите на "центъра" x и y, разделени съответно на ширината и височината) спрямо долния ляв ъгъл. Това е съотношението на страните на зеления и червения квадрат на фигурата по-долу.

Например „Опорна точка X = 0,5, Y = 0,5“ означава, че центърът на бутона е в средата на бутона.„Връзка X=0, Y=0“ означава, че центърът на бутона е в долния ляв ъгъл.

След това помислете за работата на "Котва", тя може да работи в 2 режима.

Режим 1 - е, когато и четирите триъгълника са в една и съща точка. Тогава компонентът "Rect Transform" има следните полета: Pos X, Pos Y, Pos Z, Width, Height. Както може би се досещате, Width, Height съхраняват стойността на ширината и височината на UI елемента (в нашия случай бутона).

Поз X, Поз Y, Поз Z са отговорни за разстоянието между центъра на "Anchor" и "центъра" на UI елемента.

Възниква въпросът защо се нуждаем от тази "Котва". Отговорът е прост, когато родителският UI елемент се преоразмери, "Anchor" променя разстоянието до "центъра" на текущия UI елемент пропорционално на тези промени. „Котвата“, подобно на „центъра“, съхранява своите координати в корелирана форма в полето „Котви“.

За режим 1 „Котви > Мин.“ и „Котви > Макс" съвпада. Много е важно да запомните, че в този режим се променя само разстоянието между „Котва“ и „център“, а полетата „Ширина“, „Височина“ остават ниски (тъй като платното е конфигурирано в режим „Мащаб с размер на екрана“, с промяна в размера на екрана, всички елементи на потребителския интерфейс ще променят размерите си поради автоматичната промяна на параметъра „Мащаб“ в самото платно).

Режим 2 - е, когато четирите триъгълника са разделени. И първото нещо, което хваща окото ви, е промяната на нашите полета Pos X, Pos Y, Pos Z, Width, Height съответно на Left, Top, Pos Z, Right, Bottom. Сега четири триъгълника образуват въображаем квадрат и разстоянието от страната на този квадрат до нашия UI елемент се съхранява в полетата отляво, отгоре, отдясно, отдолу (функцията Pos Z остава непроменена и отговаря за дълбочината на обекта).

Промяната на стойностите на тези полета променя размера на UI елемента, а не котвите. За "Котва"все още съответства на полето Anchors, но сега „Anchors > Мин.“ и „Котви > Макс" не винаги ще съвпада.

Сега полето „Котви > Min" отговаря за разстоянието между лявата и долната страна на родителския и текущия UI елемент, а "Anchors > Max" - за разстоянието между горната и дясната страна.

Сега, когато родителският обект се промени, нашият UI елемент ще промени размера си (тъй като Canvas е конфигуриран в режим „Scale With Screen Size“, тогава с промяна в разширението на екрана, всички UI елементи ще променят размерите си чрез автоматична промяна на параметъра Scale в самото Canvas и това ще даде допълнителни промени на всички елементи в режим 2).

За да не плъзгате постоянно "Anchor" и "center" ръчно, разработчиците на Unity направиха няколко стандартни настройки. Те могат да бъдат достъпни чрез щракване върху следния елемент:

Ще се отвори следният прозорец, където можете да зададете местоположението на "Котва".

Ако искате да промените позицията на „центъра“ заедно с промените в „Котва“, тогава трябва да задържите клавиша „Shift“ (появява се син кръг, който отговаря за „центъра“).

Също така е възможно незабавно да преместите елемента на потребителския интерфейс в желаната позиция, за това трябва да задържите клавиша "Alt" (можете да задържите едновременно "Alt" и "Shift").

Работас Grid Layout Group.

Първо, нека създадем тестова сцена, създадем Canvas и добавим Plane (по същия начин като бутон). Самолетът трябва да бъде позициониран по следния начин:

Групата за оформление на мрежата може да се добави с помощта на „Добавяне на компонент“:

Сега всички дъщерни обекти на равнината автоматично ще се коригират (променят размера и позицията си) в зависимост от настройките на групата Grid Layout. За визуален пример, нека добавим 4 изображенияелемент като деца на Plane.

За да разграничим изображението, нека заредим различни спрайтове в него.

На Image1, Image2, Image3, Image4 бяха присвоени съответно снимки с номера 1, 2, 3, 4. Сега, след като знаем кой елемент кой е, нека започнем да учим за Grid Layout Group.

Padding е отговорен за подпълването на дъщерните елементи от страните на родителския обект.

Както можете да видите на фигурата, 4-тото изображение не се вписва в избраните граници, така че беше преместено на нов ред. Полето Разстояние отговаря за разстоянието между дъщерните обекти.

Полето Cell Size отговаря за размерите на дъщерните обекти.

Полето "Начален ъгъл" отговаря за реда, в който са поставени дъщерните обекти.

Горен ляв поставя дъщерни обекти отляво надясно и отгоре надолу.

Горен десен поставя дъщерните обекти отдясно наляво и отгоре надолу.

Долен ляв поставя дъщерните обекти отляво надясно и отдолу нагоре.

Долен десен поставя дъщерните обекти отдясно наляво и отдолу нагоре.

Полето "Начална ос" показва в каква посока ще бъдат поставени дъщерните елементи (по подразбиране е "Хоризонтално").

Тоест, ако дъщерните обекти не се вписват в ширината на родителя, тогава се получава преход към нов ред.

За Vertical, напротив, ако дъщерните обекти не се вписват във височината на родителя, тогава се извършва преход към нов ред.

Полето "Child Alignment" отговаря за автоматичното подравняване на дъщерните обекти. Това поле не е сложно и наподобява подравняването на текст в Word.

Последното поле „Ограничение“ остава, то дава възможност за създаване на фиксиран брой редове или колони (по подразбиране е „Гъвкаво“, т.е. няма фиксиране).

Както можете да видите, елементът Grid Layout Group е много прост, но понякога може значително да опрости работата и потребителския интерфейс.

Заключение.

В тази част беше обърнато специално внимание на работата с новия потребителски интерфейс на Unity, той стана много по-удобен и по-добър. Сега няма нужда да използвате приставки на трети страни, просто трябва да разберете малко и можете да създадете всеки интерфейс, който се адаптира към размера на екрана (много полезно за мобилни устройства).

Това завършва първата част на статията, опитайте да си поиграете с различни UI елементи (не забравяйте да промените размера на екрана за експериментиране).

Можете да промените разширението на екрана в прозореца Игри, както е показано на фигурата по-долу:

---