Примеры использования CanvasGroup в Unity.

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

Компонента – CanvasGroup.

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

Я же коснусь всех настроек “CanvasGroup” чуть подробнее и с примерами, дабы в памяти остался визуальный слепок и легко извлекся в последствии, когда понадобится.

Основное предназначение “CanvasGroup” – это управление группой UI-элементов, которые находятся ниже по иерархии (“внутри” CanvasGroup). Так же, эти настройки распространяются на сам “GameObject”, содержащий компоненту “CanvasGroup”.
Например, мы хотим управлять сразу всеми элементами в окне, группой кнопок или группой картинок.

Настройки “CanvasGroup”

Как видно из картинки выше, “CanvasGroup” содержит всего четыре настройки, о назначении которых можно легко догадаться из названий. Однако, пройдемся подробнее:

1. Alpha.

Управление прозрачностью группы UI-элементов. Изменяет прозрачность как корневого UI-элемента, на котором находится компонента CanvasGroup, так и всех дочерних UI-элементов.

Один из сценариев использования – сделать группу объектов полупрозрачными, не изменяя цвет каждого объекта:

Меняем прозрачность группы UI-элементов


Другой часто встречающийся сценарий – эффект исчезновения (FadeOut) и эффект появления (FadeIn) окна. Для реализации такого эффекта, без использования CanvasGroup, нам бы пришлось получать все UI-элементы, которые расположены на окне, и изменять параметр alpha у цвета для каждого найденного элемента (например, с помощью метода CrossFadeAlpha). Но и этого было бы не достаточно, так как некоторые UI-элементы на окне могут быть в полупрозрачном состоянии, и после того, как мы применили эффект исчезновения, путем изменения alpha до нуля, нам бы пришлось по завершению восстанавливать изначальный параметр alpha. Таким образом, необходимо было бы сохранять все параметры alpha для каждого UI-элемента, потом применять эффект и по завершению восстанавливать все параметры alpha для каждого UI-элемента. Много ненужной работы.

CanvasGroup упрощает процесс создания таких эффектов.

Эффекты Fade Out и Fade In

Для себя я написал два твина, которые реализуют эффекты исчезновения (FadeOutTween) и появления (FadeInTween) с помощью CanvasGroup и которые можно использовать “в одну строчку”:

public void OnGUI()
{
    if (GUILayout.Button("Fade Out/In"))
    {
         TweenSequence.Run(
            () => FadeOutTween.Run(Panel, Duration),
            () => FadeInTween.Run(Panel, Duration).SetDelay(0.25f));
    }
}

2. Interactable.

Позволяет сделать группу UI-элементов недоступными для взаимодействия (эквивалент enable/disable из множества других UI-фреймворков). Например, сделать невосприимчивыми к клику набор кнопок или все элементы на окне.

Делаем недоступной для ввода группу кнопок

3. Blocks Raycasts.

Блокирует все пользовательские действия над UI-элементами, которые реализованы через “Raycasts”. К примеру, отображаем поверх одного окна другое, и если вышележащее окно по размеру не перекрывает нижележащее, то возможность взаимодействовать с UI-элементами нижележащего окна останется. И для блокировки этой возможности мы можем использовать параметр “BlocksRaycast” на нижележащем окне.

Блокируем возможность взаимодействовать с UI-элементами нижележащего окна

Отличие от параметра “Interactable” в том, что “Interactable” переводит все UI-элементы в состояние “disabled”, и если UI-элемент имеет отдельный внешний вид для состояния “disabled”, то он меняет свой внешний вид на “disabled”. “BlockRaycasts” же просто блокирует весь пользовательский ввод без изменения внешнего вида.

4. Ignore Parent Groups.

Игнорируем все настройки CanvaGroup, которые находятся вверх по иерархии UI-элементов (своеобразная перегрузка-сброс всех настроек CanvasGroup).

Одна из кнопок использует настройки Ingore Parent Group

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

Все примеры можно взять на github.

39
Leave a Reply

avatar
39 Comment threads
0 Thread replies
0 Followers
 
Most reacted comment
Hottest comment thread
1 Comment authors
lotus dev. db2 connect ent ed v8.1 mp en bb0afnafwindows live messenger 9.0 with add ons miyanowindows hotfix downloader v3 4.3образцы заявлений на аттестацию педагога дополнительного образованиядомашняя солянка суп рецепт Recent comment authors
  Subscribe  
newest oldest most voted
Notify of
литература 7 класс г.с.меркин ответы на вопросы часть
Guest

Hello, i feel that i noticed you visited my site so i got here to return the want?.I am trying to to find issues to enhance my website!I suppose its ok to use a few of your ideas!!| а

гост накидные гайки
Guest

I think this is among the most significant info for me. And i’m glad reading your article. But want to remark on some general things, The website style is wonderful, the articles is really excellent : D. Good job, cheers| а

unreal tournament iii serial key
Guest

Informative article, exactly what I wanted to find.| а

windows 7 ultimate oem slp product key
Guest

This excellent website certainly has all of the information and facts I needed about this subject and didn’t know who to ask. | а

приказ о персональных данных в школе
Guest

Appreciating the time and effort you put into your website and in depth information you present. It’s nice to come across a blog every once in a while that isn’t the same old rehashed information. Great read! I’ve saved your site and I’m adding your RSS feeds to my Google account.| а

трудовой договор с единственным учредителем генеральным директором ооо образец
Guest

Hi there, for all time i used to check webpage posts here in the early hours in the break of day, as i enjoy to gain knowledge of more and more.| а

отдельная спецификация является отдельным договором
Guest

Hey would you mind stating which blog platform you’re working with? I’m looking to start my own blog soon but I’m having a difficult time making a decision between BlogEngine/Wordpress/B2evolution and Drupal. The reason I ask is because your layout seems different then most blogs and I’m looking for something unique. P.S Apologies for being off-topic but I had to ask!| а

black label society full album youtube
Guest

Excellent post. I was checking continuously this blog and I am impressed! Extremely helpful information particularly the last part 🙂 I care for such info a lot. I was seeking this particular info for a very long time. Thank you and good luck.| а

скачать программу для обновления карт навител
Guest

Hello there! This post couldn’t be written much better! Looking at this article reminds me of my previous roommate! He continually kept talking about this. I’ll forward this article to him. Fairly certain he’s going to have a very good read. Thanks for sharing!| а

радиоуправление игрушек схема
Guest

Howdy! Would you mind if I share your blog with my myspace group? There’s a lot of people that I think would really appreciate your content. Please let me know. Cheers| а

характеристика на врача анестезиолога реаниматолога
Guest

Hello, Neat post. There is a problem with your website in web explorer, would check this? IE still is the market leader and a big component to folks will pass over your magnificent writing due to this problem.| а

bad dogz windows xp sp3 vista vistavge
Guest

It’s amazing to go to see this website and reading the views of all colleagues regarding this post, while I am also zealous of getting knowledge.| а

сборник задач по общей биологии 11 класс дубков богачева
Guest

This post provides clear idea for the new visitors of blogging, that truly how to do running a blog.| а

бланк командировки
Guest

Thanks for sharing your thoughts on %meta_keyword%. Regards| а

businesscards mx v3.98 mlb
Guest

Thanks for sharing your thoughts on %meta_keyword%. Regards| а

tuneup utilities 2019 ger keygen free download crack patch
Guest

I like the valuable info you supply for your articles. I will bookmark your weblog and check again right here regularly. I am rather sure I will be told many new stuff proper here! Best of luck for the next!| а

сочинение-сказка 5 класс
Guest

Greetings from California! I’m bored at work so I decided to check out your website on my iphone during lunch break. I love the info you present here and can’t wait to take a look when I get home. I’m shocked at how quick your blog loaded on my mobile .. I’m not even using WIFI, just 3G .. Anyhow, great blog!| а

adobe reader latest version for windows 7 filehippo
Guest

What’s up to all, it’s actually a good for me to pay a quick visit this web site, it contains valuable Information.| а

гдз по истории 8 класс ведюшкин без скачивания
Guest

Pretty nice post. I just stumbled upon your blog and wanted to say that I’ve truly enjoyed browsing your blog posts. In any case I will be subscribing to your rss feed and I hope you write again soon!| а

гдз по биологии-суматохин. кучменко
Guest

Interesting blog! Is your theme custom made or did you download it from somewhere? A theme like yours with a few simple adjustements would really make my blog jump out. Please let me know where you got your theme. Appreciate it| а

бланк официальный протокол хоккейного матча
Guest

Hey I know this is off topic but I was wondering if you knew of any widgets I could add to my blog that automatically tweet my newest twitter updates. I’ve been looking for a plug-in like this for quite some time and was hoping maybe you would have some experience with something like this. Please let me know if you run into anything. I truly enjoy reading your blog and I look forward to your new updates.| а

самолетики в бухгалтерском учете бланк скачать
Guest

Amazing blog! Is your theme custom made or did you download it from somewhere? A theme like yours with a few simple tweeks would really make my blog shine. Please let me know where you got your design. Thank you| а

как научить ребёнка решать задачи в 5 классе
Guest

Hello there! Do you know if they make any plugins to assist with SEO? I’m trying to get my blog to rank for some targeted keywords but I’m not seeing very good success. If you know of any please share. Thank you!| а

рецепт борща с сельдереем
Guest

My brother suggested I might like this blog. He used to be totally right. This post truly made my day. You can not consider just how much time I had spent for this information! Thank you!| а

история средних веков крючкова все д з
Guest

Hi, I do think your blog might be having web browser compatibility issues. When I take a look at your web site in Safari, it looks fine however when opening in IE, it’s got some overlapping issues. I merely wanted to give you a quick heads up! Other than that, fantastic website!| а

решебник по немецкому языку 10 класс бим садомова лытаева смотреть
Guest

I have read so many articles regarding the blogger lovers but this post is actually a nice piece of writing, keep it up.| а

структурная схема микропроцессора кр580вм80а
Guest

I will immediately take hold of your rss as I can’t find your e-mail subscription link or e-newsletter service. Do you have any? Please let me recognize in order that I may subscribe. Thanks.| а

warcraft 3 frozen throne free download full version 1.26
Guest

Hello, I read your blogs like every week. Your writing style is awesome, keep up the good work!| а

oo defrag 17 pro keygen
Guest

I think this is one of the most important information for me. And i’m glad reading your article. But want to remark on few general things, The website style is great, the articles is really great : D. Good job, cheers| а

acer aspire 5920 lan drivers download
Guest

I am really loving the theme/design of your weblog. Do you ever run into any browser compatibility problems? A handful of my blog audience have complained about my website not working correctly in Explorer but looks great in Firefox. Do you have any ideas to help fix this problem?| а

техническая характеристика кондиционеры сплит системы
Guest

I’m gone to inform my little brother, that he should also pay a visit this blog on regular basis to get updated from most recent news.| а

texet tm 9741 характеристики
Guest

I am sure this paragraph has touched all the internet people, its really really nice piece of writing on building up new webpage.| а

схемa ресурсов мирового океaнa
Guest

I have been browsing online more than 2 hours today, yet I never found any interesting article like yours. It’s pretty worth enough for me. In my view, if all website owners and bloggers made good content as you did, the internet will be a lot more useful than ever before.| а

tuneup utilities 2020 spanish full mega portable
Guest

There is definately a lot to learn about this subject. I love all the points you made.| а

домашняя солянка суп рецепт
Guest

I know this if off topic but I’m looking into starting my own weblog and was wondering what all is required to get setup? I’m assuming having a blog like yours would cost a pretty penny? I’m not very web smart so I’m not 100% positive. Any recommendations or advice would be greatly appreciated. Cheers| а

образцы заявлений на аттестацию педагога дополнительного образования
Guest

Hey! I understand this is sort of off-topic but I had to ask. Does managing a well-established blog such as yours require a massive amount work? I am brand new to operating a blog however I do write in my diary on a daily basis. I’d like to start a blog so I can share my personal experience and feelings online. Please let me know if you have any suggestions or tips for new aspiring bloggers. Appreciate it!| а

windows hotfix downloader v3 4.3
Guest

Hey! This is kind of off topic but I need some guidance from an established blog. Is it very hard to set up your own blog? I’m not very techincal but I can figure things out pretty quick. I’m thinking about creating my own but I’m not sure where to start. Do you have any ideas or suggestions? Appreciate it| а

windows live messenger 9.0 with add ons miyano
Guest

My brother recommended I might like this web site. He was entirely right. This post truly made my day. You can not imagine just how much time I had spent for this info! Thanks!| а

lotus dev. db2 connect ent ed v8.1 mp en bb0afnaf
Guest

Hi! I know this is kinda off topic nevertheless I’d figured I’d ask. Would you be interested in exchanging links or maybe guest writing a blog article or vice-versa? My site goes over a lot of the same topics as yours and I feel we could greatly benefit from each other. If you are interested feel free to shoot me an e-mail. I look forward to hearing from you! Fantastic blog by the way!| а