+{"pageProps":{"content":"[[\"$r\",\"MaxWidth\",\"last\",{\"children\":[[\"$r\",\"p\",null,{\"children\":\"ReactUnity provides bindings to different Unity UI frameworks. We call the implementation of those UI frameworks as UI backends. React code communicates with UI backends to create the actual UI.\"}],\"\\n\",[\"$r\",\"p\",null,{\"children\":\"The three supported UI backends are:\"}],\"\\n\",[\"$r\",\"ul\",null,{\"children\":[\"\\n\",[\"$r\",\"li\",null,{\"children\":[\"Unity UI (aliased \",[\"$r\",\"code\",null,{\"children\":\"ugui\"}],\")\"]}],\"\\n\",[\"$r\",\"li\",null,{\"children\":[\"UI Toolkit for Runtime (aliased \",[\"$r\",\"code\",null,{\"children\":\"uitoolkit\"}],\")\"]}],\"\\n\",[\"$r\",\"li\",null,{\"children\":[\"UI Toolkit for Editor (aliased \",[\"$r\",\"code\",null,{\"children\":\"editor\"}],\")\"]}],\"\\n\"]}],\"\\n\",[\"$r\",\"p\",null,{\"children\":[[\"$r\",\"code\",null,{\"children\":\"ugui\"}],\" and \",[\"$r\",\"code\",null,{\"children\":\"uitoolkit\"}],\" can be used in runtime UI, whereas \",[\"$r\",\"code\",null,{\"children\":\"editor\"}],\" can be used to create editor UI such as windows and inspectors.\"]}],\"\\n\",[\"$r\",\"p\",null,{\"children\":[\"In the React project, \",[\"$r\",\"code\",null,{\"children\":\"tsconfig.json\"}],\" must contain the following \",[\"$r\",\"code\",null,{\"children\":\"types\"}],\" array in order to show correct component types. (Replace \",[\"$r\",\"code\",null,{\"children\":\"ugui\"}],\" with desired UI backend)\"]}],\"\\n\",[\"$r\",\"pre\",null,{\"children\":[\"$r\",\"code\",null,{\"className\":\"language-json\",\"children\":\"\\\"types\\\": [\\n \\\"@reactunity/scripts/main\\\",\\n \\\"@reactunity/scripts/ugui\\\"\\n]\\n\"}]}],\"\\n\",[\"$r\",\"p\",null,{\"children\":[[\"$r\",\"code\",null,{\"children\":\"ugui\"}],\" backend can be used by adding \",[\"$r\",\"code\",null,{\"children\":\"ReactUnityUGUI\"}],\" component to a GameObject and configuring it via inspector. Similarly, \",[\"$r\",\"code\",null,{\"children\":\"uitoolkit\"}],\" backend can be used by adding \",[\"$r\",\"code\",null,{\"children\":\"ReactUnityUIDocument\"}],\" to a GameObject.\"]}],\"\\n\",[\"$r\",\"p\",null,{\"children\":[\"In order to use the \",[\"$r\",\"code\",null,{\"children\":\"editor\"}],\" backend, you must extend a class from either \",[\"$r\",\"code\",null,{\"children\":\"ReactWindow\"}],\", \",[\"$r\",\"code\",null,{\"children\":\"ReactInspector\"}],\" or \",[\"$r\",\"code\",null,{\"children\":\"ReactProperty\"}],\", and then implement its \",[\"$r\",\"code\",null,{\"children\":\"GetScript\"}],\" method to load the React script\"]}],\"\\n\",[\"$r\",\"h2\",null,{\"id\":\"comparison-of-ui-backends\",\"children\":\"Comparison of UI backends\"}],\"\\n\",[\"$r\",\"p\",null,{\"children\":\"When create a runtime UI, developers have the option to either use Unity UI, or UI Toolkit. These two UI frameworks are entirely different and they have their own advantages and disadvantages.\"}],\"\\n\",[\"$r\",\"p\",null,{\"children\":[\"In general, UI Toolkit has better performance while Unity UI has more flexibility. This characteristic of the two frameworks are true for ReactUnity as well. ReactUnity can extend the features of \",[\"$r\",\"code\",null,{\"children\":\"ugui\"}],\" to provide more features with each new version. Adding new features to \",[\"$r\",\"code\",null,{\"children\":\"uitoolkit\"}],\" is often not possible, since UI Toolkit does not allow such flexibility.\"]}],\"\\n\",[\"$r\",\"p\",null,{\"children\":[\"Also, each UI backend has its own set of supported components. For example, \",[\"$r\",\"code\",null,{\"children\":\"video\"}],\" tag is supported by \",[\"$r\",\"code\",null,{\"children\":\"ugui\"}],\" while it is not supported by others. This is just one example and there are many components like this that are incompatible between backends.\"]}],\"\\n\",[\"$r\",\"h2\",null,{\"id\":\"read-more\",\"children\":\"Read more\"}],\"\\n\",[\"$r\",\"p\",null,{\"children\":\"Visit these useful links to learn more about the differences between these UI frameworks:\"}],\"\\n\",[\"$r\",\"ul\",null,{\"children\":[\"\\n\",[\"$r\",\"li\",null,{\"children\":[[\"$r\",\"a\",null,{\"href\":\"https://prographers.com/blog/unity-ui-toolkit-is-better-than-expected\",\"target\":\"_blank\",\"rel\":\"nofollow noopener noreferrer\",\"children\":\"Unity UI Toolkit is better than expected\"}],\" - By Prographers \",[\"$r\",\"a\",null,{\"href\":\"https://prographers.com/blog/unity-ui-toolkit-is-better-than-expected\",\"target\":\"_blank\",\"rel\":\"nofollow noopener noreferrer\",\"children\":\"Unity 3D Developers\"}]]}],\"\\n\",[\"$r\",\"li\",null,{\"children\":[[\"$r\",\"a\",null,{\"href\":\"https://docs.unity3d.com/2023.1/Documentation/Manual/UI-system-compare.html\",\"target\":\"_blank\",\"rel\":\"nofollow noopener noreferrer\",\"children\":\"Comparison of UI systems in Unity\"}],\" - By Unity Documentation\"]}],\"\\n\"]}]]}]]","toc":"[{\"url\":\"#\",\"text\":\"Overview\",\"depth\":2},{\"url\":\"#comparison-of-ui-backends\",\"depth\":2,\"text\":\"Comparison of UI backends\"},{\"url\":\"#read-more\",\"depth\":2,\"text\":\"Read more\"}]","meta":{"title":"Supported UI Backends"}},"__N_SSG":true}
0 commit comments