Unity - Ръчно Създаване на интерфейс (UI) за различни резолюции на екрана
Съвременните игри и приложения често трябва да поддържат широка гама от различни разделителни способности на екрана, а интерфейсите на тези игри особено се нуждаят от тази възможност. Системата за създаване на интерфейс на Unity предоставя редица различни инструменти за прилагане на тези функции, които също могат да се комбинират по различни начини.
В това ръководство „как да го направя“ ще използваме прост пример, за да разгледаме и сравним различни инструменти в контекста на този въпрос. В нашия случай, както е показано по-долу, имаме три бутона в ъглите и нашата цел е да адаптираме това оформление към различни резолюции.
За това ръководство „как да го направя“ избрахме да използваме четири разделителни способности на екрана: Phone HD в портрет (640 x 960) и пейзаж (960 x 640) и Phone SD също в портрет (320 x 480) и пейзаж (480 x 320). Първоначално оформлението беше настроено на Телефон HD портретна ориентация и разделителна способност.
Използване на Snaps за адаптиране към различни пропорции
Елементите на потребителския интерфейс са закотвени към центъра на родителския правоъгълник по подразбиране. Това означава, че те поддържат постоянно изместване от центъра.
Ако разделителната способност е била променена на пейзажно съотношение с тази настройка, бутоните може да изпаднат от своите правоъгълни области, където първоначално е трябвало да бъдат.
Един от начините да запазите местоположението на бутоните в областта на екрана е да промените оформлението, така че техните местоположения да са свързани със съответните им ъгли на екрана. Свързването на горния ляв бутон също може да бъде настроено нагорния ляв ъгъл, когато използвате падащия списък Предварително зададени котви в инспектора или чрез плъзгане на триъгълните манипулатори за котва в изгледа на сцена. Най-добре е да направите това, докато текущата разделителна способност на екрана, зададена в Game View, е разделителната способност, която е била първоначално предназначена да бъде, където местоположенията на бутоните ще бъдат по-разумно и подходящо разположени. (Вижте страницата с основното оформление на потребителския интерфейс за повече подробности относно свързванията.). Също така, например, връзките за долния ляв и долния десен бутон могат да бъдат зададени съответно в долния ляв и долния десен ъгъл.
След като бутоните са закотвени към ъглите си, по-нататъшните промени в разделителната способност на екрана и пропорциите ще запазят позициите си спрямо тези ъгли.
Когато разделителната способност на екрана се променя на по-голяма и по-малка спрямо текущата, бутоните все още трябва да запазят първоначалната си позиция спрямо ъглите, към които са закотвени. Въпреки това, запазвайки първоначалната си разделителна способност, дадена в пиксели, те могат да станат или по-големи, или по-малки, съответстващи на пропорциите на текущата разделителна способност на екрана. Всичко това може или може да не е желателно, в зависимост от това как искате вашият интерфейс да реагира на промените в разделителната способност на екрана.
В това ръководство „как да го направя“ вече знаем, че малката разделителна способност на портретната и пейзажната ориентация на устройствата Phone HD не съответства на екрани, които са физически по-малки в сравнение с тях, докато самото това съответствие е по-изразено в плътността на пикселите на 1 инч от самия екран. На тези екрани с по-ниска плътност бутоните не го правяттрябва да се показват по-големи, отколкото на екраните на устройства с по-висока плътност на пикселите - те трябва да са с абсолютно същия размер, нито повече, нито по-малко.
Това означава, че бутоните трябва да станат по-малки със същия процент, с който самият екран става по-малък. С други думи, мащабът на бутоните трябва да бъде обвързан с мащаба на размерите на екрана. Това е мястото, където компонентът Reference Resolution може да помогне
Мащабиране с компонента Размер на екрана
Компонентът Canvas Scaler може да бъде добавен към основата на Canvas - Game Object с вграден компонент Canvas, всички елементи на интерфейса на който са негови деца. Също така се създава по подразбиране при създаване на нов компонент Canvas чрез менюто GameObject.
В компонента Canvas Scaler можете да зададете неговия режим на мащабиране на потребителския интерфейс на Мащабиране с размер на екрана. В този режим на мащабиране можете да определите коя резолюция да използвате като основна. Ако текущата разделителна способност е по-голяма или по-малка от основната разделителна способност, коефициентът на мащабиране на компонента Canvas се задава съответно, така че всички елементи на потребителския интерфейс да се мащабират нагоре или надолу с разделителната способност на екрана.
В нашия случай сме задали Reference Resolution на Phone HD, пейзажна разделителна способност от 640 x 960 пиксела. Сега, когато променим разделителната способност и съотношението на екрана към портрет, което е 320 x 480, нашето оформление трябва да бъде мащабирано пропорционално на екрана, но в същото време равномерно, както при пейзажна разделителна способност. Всичко ще намалее: размерът на бутоните, разстоянието им от краищата на екрана, графичният компонент и текстовите елементи. Това означава, че оформлението, което беше в портретна телефонна HD резолюция, ще се показва на екрана по същия начин, както в пейзажнаразрешение; само с разлика в плътността на пикселите.
Едно нещо, за което трябва да внимавате, е, че след добавяне на компонента Reference Resolution е също така важно да проверите как ще изглежда оформлението с други пропорции. Като зададете разделителната способност обратно на Phone HD пейзаж, можете да видите как бутоните са по-големи, отколкото трябва да бъдат (и за какво е трябвало да се използват).
Причината, поради която бутоните стават по-големи в пейзажно съотношение, е свързана с това как работи настройката за референтна резолюция. По подразбиране те сравняват ширината на текущата разделителна способност с ширината на основната разделителна способност и в резултат на това всичко на екрана се мащабира въз основа на коефициента на мащабиране, получен от тази разлика. Ако текущата хоризонтална разделителна способност от 960 x 640 е 1,5 пъти по-голяма от ширината на основната портретна разделителна способност от 640 x 960, тогава цялото оформление ще бъде увеличено с 1,5 пъти.
Компонентът има свойство, наречено Match, което може да бъде зададено на 0 (ширина), 1 (височина) или всяка стойност между 0 и 1. По подразбиране това е зададено на 0, което означава, че текущата ширина на екрана съвпада с основната ширина на основната разделителна способност, обсъдена по-рано.
Ако свойството Match има стойност, различна от 0,5, то ще сравни текущата ширина с основната ширина, текущата височина с основната височина и ще избере коефициент на мащаб, който е близък до двете разделителни способности.
Понастоящем оформлението поддържа и четирите разделителни способности, като използва комбинация от подходящи обвързвания и компонент Reference Resolution заедно с компонент Canvas.
За повече информация относно други начини за мащабиране на елементиинтерфейс по отношение на различните резолюции на екрана, посетете страницата с документация на Canvas Scaler.