{"id":96,"date":"2014-12-02T23:34:35","date_gmt":"2014-12-02T23:34:35","guid":{"rendered":"http:\/\/nbodyphysics.com\/blog\/?p=96"},"modified":"2015-03-06T12:40:34","modified_gmt":"2015-03-06T12:40:34","slug":"the-unity-4-6-ui-some-tidbits","status":"publish","type":"post","link":"https:\/\/nbodyphysics.com\/blog\/the-unity-4-6-ui-some-tidbits\/","title":{"rendered":"The Unity 4.6 UI – Some Tidbits"},"content":{"rendered":"

Unity 4.6 provides a fantastic new UI framework. I will never<\/em><\/strong> use the old OnGui() again! I have been using the new framework for the past several months while Unity 4.6 was in beta. During this time I have collected a few tidbits on working with the framework.<\/p>\n

Getting Started<\/h2>\n

The tutorials<\/a>\u00a0<\/a>\u00a0are very good and the information in the\u00a0manual<\/a> is getting better all the time. I found the tutorials on Canvas, RectTransform, Button and Event System a bare minimum to get the idea of the whole thing.<\/p>\n

Adapting for Mobile Screen Sizes<\/h2>\n

This was one of my first “care-abouts”. There are two things that are important to know. The first is the anchor system for the layout of elements \u00a0(see the RectTransform tutorial) but that is only part of the solution. The crucial other element is adding a CanvasScaler to your root canvas.<\/p>\n

\"Screen<\/a><\/p>\n

Once attached to a Canvas this can then be set to give a reference size and you’re good to go. As the device screen size change your UI element will scale appropriately.<\/span><\/p>\n

UI interactions with Scripts<\/h2>\n

In the C# world the Unity elements can be created and modified as you would expect. You will want one or both of the following includes:<\/p>\n

using UnityEngine.UI;\r\nusing UnityEngine.EventSystems;<\/pre>\n
ColorBlock: Changing Button Colors<\/h2>\n
The ThreeBody game I am creating makes use of collections of buttons as radio boxes. I set the disabled and highlighted colors to reflect the color I want for unselected and selected. When it is time to enable a button, then the normal color of the button is set to the value in the highlighted color. It would be reasonable to expect that:<\/p>\n
button.colors.normalColor = Color.white; \/\/ DOES NOT WORK!<\/pre>\n
would work. It does not. Instead you need to make a temporary copy of the ColorBlock and then modify its elements and copy back the ColorBlock:<\/p>\n
\u00a0\u00a0\u00a0\u00a0<\/span>\/\/<\/span>\u00a0<\/span>flip<\/span>\u00a0<\/span>to<\/span>\u00a0<\/span>highlighted<\/span>\u00a0<\/span>color<\/span>\r\n\u00a0\u00a0\u00a0\u00a0<\/span>private<\/span>\u00a0<\/span>void<\/span>\u00a0<\/span>EnableButton<\/span>(<\/span>GameObject<\/span>\u00a0<\/span>go<\/span>)\u00a0{<\/span>\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span>Button<\/span>\u00a0<\/span>b2<\/span>\u00a0=\u00a0<\/span>go<\/span>.<\/span>GetComponent<\/span><<\/span>Button<\/span>>();\u00a0<\/span>\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span>ColorBlock<\/span>\u00a0<\/span>cb2<\/span>\u00a0=\u00a0<\/span>b2<\/span>.<\/span>colors<\/span>;<\/span>\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span>cb2<\/span>.<\/span>normalColor<\/span>\u00a0=\u00a0<\/span>cb2<\/span>.<\/span>highlightedColor<\/span>;<\/span>\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span>b2<\/span>.<\/span>colors<\/span>\u00a0=\u00a0<\/span>cb2<\/span>;\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span>\r\n\u00a0\u00a0\u00a0\u00a0}\r\n<\/span>\r\n<\/span><\/pre>\n
Touch Events and Buttons<\/h2>\n
Button touch events will still fall through into code that handles touches so it becomes important to screen out those touches that are over top of buttons. A technique that works for both mouse and touch events is:<\/p>\n
\u00a0\u00a0\u00a0\u00a0<\/span>private<\/span>\u00a0<\/span>bool<\/span>\u00a0<\/span>IsTouchOnButton<\/span>()\u00a0{<\/span>\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span>GameObject<\/span>\u00a0<\/span>go<\/span>\u00a0=\u00a0<\/span>EventSystem<\/span>.<\/span>current<\/span>.<\/span>currentSelectedGameObject<\/span>;\u00a0<\/span>\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span>if<\/span>\u00a0(<\/span>go<\/span>\u00a0!=\u00a0<\/span>null<\/span>)\u00a0{<\/span>\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span>if<\/span>\u00a0(\u00a0<\/span>go<\/span>.<\/span>GetComponent<\/span><<\/span>Button<\/span>>()\u00a0!=\u00a0<\/span>null<\/span>)\u00a0{<\/span>\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span>return<\/span>\u00a0<\/span>true<\/span>;<\/span>\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}<\/span>\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}<\/span>\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span>return<\/span>\u00a0<\/span>false<\/span>;\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span>\r\n\u00a0\u00a0\u00a0\u00a0}<\/span><\/span><\/pre>\n
\u00a0Panel Fading and CanvasGroup<\/h2>\n
There is not a lot said about panels in the tutorials or online docs. These appear to be containers for holding a subset of the UI being developed. I found them useful for Settings Menus and High Score panes.\u00a0In order to run a fade effect on these panels, you can add a CanvasGroup (which then has a field “alpha” that allows direct control over fading). An example of such a fade coroutine is:<\/p>\n
\u00a0\u00a0\u00a0\u00a0public<\/span>\u00a0GameObject<\/span>\u00a0menuPanel;\u00a0\r\n\u00a0   <\/span>private<\/span>\u00a0<\/span>const<\/span>\u00a0<\/span>float<\/span>\u00a0<\/span>FADE_TIME<\/span>\u00a0=\u00a0<\/span>0.5f<\/span>;<\/span>\r\n\u00a0\u00a0\u00a0\u00a0<\/span>private<\/span>\u00a0<\/span>const<\/span>\u00a0<\/span>float<\/span>\u00a0<\/span>FADE_STEPS<\/span>\u00a0=\u00a0<\/span>10f<\/span>;<\/span>\r\n\u00a0\u00a0\u00a0\u00a0<\/span>private<\/span>\u00a0<\/span>const<\/span>\u00a0<\/span>float<\/span>\u00a0<\/span>FADE_INCR<\/span>\u00a0=\u00a0<\/span>FADE_TIME<\/span>\/<\/span>FADE_STEPS<\/span>;<\/span>\r\n\u00a0\u00a0\u00a0\u00a0<\/span>\r\n\u00a0\u00a0\u00a0\u00a0<\/span>private<\/span>\u00a0<\/span>IEnumerator<\/span>\u00a0<\/span>FadeMenuPanel<\/span>(<\/span>bool<\/span>\u00a0<\/span>visible<\/span>)\u00a0{<\/span>\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span>CanvasGroup<\/span>\u00a0<\/span>cg<\/span>\u00a0=\u00a0<\/span>menuPanel<\/span>.<\/span>GetComponent<\/span><<\/span>CanvasGroup<\/span>>();<\/span>\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span>if<\/span>\u00a0(!<\/span>visible<\/span>)\u00a0{<\/span>\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span>for<\/span>\u00a0(<\/span>float<\/span>\u00a0<\/span>i<\/span>=<\/span>FADE_STEPS<\/span>;\u00a0<\/span>i<\/span>\u00a0>\u00a0<\/span>0<\/span>;\u00a0<\/span>i<\/span>--)\u00a0{<\/span>\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span>cg<\/span>.<\/span>alpha<\/span>\u00a0=\u00a0<\/span>i<\/span>\/<\/span>FADE_STEPS<\/span>;<\/span>\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span>yield<\/span>\u00a0<\/span>return<\/span>\u00a0<\/span>new<\/span>\u00a0<\/span>WaitForSeconds<\/span>(<\/span>FADE_INCR<\/span>);<\/span>\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}<\/span>\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span>cg<\/span>.<\/span>alpha<\/span>\u00a0=\u00a0<\/span>0.0f<\/span>;<\/span>\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span>menuPanel<\/span>.<\/span>SetActive<\/span>(<\/span>false<\/span>);<\/span>\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}\u00a0<\/span>else<\/span>\u00a0{<\/span>\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span>menuPanel<\/span>.<\/span>SetActive<\/span>(<\/span>true<\/span>);\u00a0<\/span>\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span>cg<\/span>.<\/span>alpha<\/span>\u00a0=\u00a0<\/span>0f<\/span>;<\/span>\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span>for<\/span>\u00a0(<\/span>float<\/span>\u00a0<\/span>i<\/span>\u00a0=\u00a0<\/span>0f<\/span>;\u00a0<\/span>i<\/span>\u00a0<=\u00a0<\/span>FADE_STEPS<\/span>;\u00a0<\/span>i<\/span>++)\u00a0{<\/span>\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span>cg<\/span>.<\/span>alpha<\/span>\u00a0=\u00a0<\/span>i<\/span>\/<\/span>FADE_STEPS<\/span>;<\/span>\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span>yield<\/span>\u00a0<\/span>return<\/span>\u00a0<\/span>new<\/span>\u00a0<\/span>WaitForSeconds<\/span>(<\/span>FADE_INCR<\/span>);<\/span>\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}<\/span>\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span>cg<\/span>.<\/span>alpha<\/span>\u00a0=\u00a0<\/span>1.0f<\/span>;\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span>\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}<\/span>\r\n\u00a0\u00a0\u00a0\u00a0}\r\n\r\n<\/span><\/span><\/pre>\n
Note that in my case I\u00a0also change the panel active status. This needs to be done at the end of the fade out or the start of the fade in for the object to stay visible during the fade.<\/p>\n
Off-Topic: Trail Renderers<\/h2>\n
This is not part of the new Unity UI theme but as part of getting ThreeBody ready I had to learn a bit about TrailRenders. I use these to leave paths behind the “stars” in ThreeBody so the orbital paths can be seen. I always had weird issues with setting materials and colors until I finally found some clear advice on the forums about the material choice. I need to choose a particle material and the trails look best with a mobile\/particle\/vertex-lit shader on that material. To get solid colors I have created a simple 128×128 solid color PNG, imported as a texture.<\/p>\n
Another tidbit is how to recycle objects once you have used trail generation. To get rid of the trail I ended up setting the trail length to -1, then counting 5 update cycles before setting the object inactive and putting it back into my object pool. I played around with coroutines for this but they ended up creating more complications – and a simple synchronous design won out.<\/p>\n
Hope some of these save you some time.<\/p>\n
[social4i size=”large” align=”float-right”]<\/p>\n","protected":false},"excerpt":{"rendered":"
Unity 4.6 provides a fantastic new UI framework. I will never use the old OnGui() again! I have been using the new framework for the past several months while Unity 4.6 was in beta. During this time I have collected a few tidbits on working with the framework. Getting Started The tutorials\u00a0\u00a0are very good and […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","enabled":false},"version":2}},"categories":[1],"tags":[],"class_list":["post-96","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/p3pCRa-1y","_links":{"self":[{"href":"https:\/\/nbodyphysics.com\/blog\/wp-json\/wp\/v2\/posts\/96","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/nbodyphysics.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/nbodyphysics.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/nbodyphysics.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/nbodyphysics.com\/blog\/wp-json\/wp\/v2\/comments?post=96"}],"version-history":[{"count":5,"href":"https:\/\/nbodyphysics.com\/blog\/wp-json\/wp\/v2\/posts\/96\/revisions"}],"predecessor-version":[{"id":181,"href":"https:\/\/nbodyphysics.com\/blog\/wp-json\/wp\/v2\/posts\/96\/revisions\/181"}],"wp:attachment":[{"href":"https:\/\/nbodyphysics.com\/blog\/wp-json\/wp\/v2\/media?parent=96"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/nbodyphysics.com\/blog\/wp-json\/wp\/v2\/categories?post=96"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/nbodyphysics.com\/blog\/wp-json\/wp\/v2\/tags?post=96"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}