com.wallstop-studios.unity-helpers
Version:
Treasure chest of Unity developer tools
192 lines • 94.5 kB
HTML
<!doctype html><html lang=en class=no-js> <head><meta charset=utf-8><meta name=viewport content="width=device-width,initial-scale=1"><meta name=description content="Production-ready Unity utilities: 10-15x faster PRNGs, O(log n) spatial queries, zero-allocation pooling, Odin-level inspector tooling, and data-driven effects."><meta name=author content="Wallstop Studios"><link href=https://wallstop.github.io/unity-helpers/features/inspector/visual-components/ rel=canonical><link href=../utility-components/ rel=prev><link href=../../relational-components/relational-components/ rel=next><link rel=icon href=../../../assets/images/favicon.png><meta name=generator content="mkdocs-1.6.1, mkdocs-material-9.7.3"><title>Visual Components - Unity Helpers</title><link rel=stylesheet href=../../../assets/stylesheets/main.484c7ddc.min.css><link rel=stylesheet href=../../../assets/stylesheets/palette.ab4e12ef.min.css><style>:root{--md-admonition-icon--note:url('data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20448%20512%22%3E%3C%21--%21%20Font%20Awesome%20Free%207.1.0%20by%20%40fontawesome%20-%20https%3A//fontawesome.com%20License%20-%20https%3A//fontawesome.com/license/free%20%28Icons%3A%20CC%20BY%204.0%2C%20Fonts%3A%20SIL%20OFL%201.1%2C%20Code%3A%20MIT%20License%29%20Copyright%202025%20Fonticons%2C%20Inc.--%3E%3Cpath%20d%3D%22M64%20480c-35.3%200-64-28.7-64-64V96c0-35.3%2028.7-64%2064-64h320c35.3%200%2064%2028.7%2064%2064v213.5c0%2017-6.7%2033.3-18.7%2045.3L322.7%20461.3c-12%2012-28.3%2018.7-45.3%2018.7zm325.5-176H296c-13.3%200-24%2010.7-24%2024v93.5z%22/%3E%3C/svg%3E');--md-admonition-icon--abstract:url('data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20448%20512%22%3E%3C%21--%21%20Font%20Awesome%20Free%207.1.0%20by%20%40fontawesome%20-%20https%3A//fontawesome.com%20License%20-%20https%3A//fontawesome.com/license/free%20%28Icons%3A%20CC%20BY%204.0%2C%20Fonts%3A%20SIL%20OFL%201.1%2C%20Code%3A%20MIT%20License%29%20Copyright%202025%20Fonticons%2C%20Inc.--%3E%3Cpath%20d%3D%22M384%20512H96c-53%200-96-43-96-96V96C0%2043%2043%200%2096%200h304c26.5%200%2048%2021.5%2048%2048v288c0%2020.9-13.4%2038.7-32%2045.3V448c17.7%200%2032%2014.3%2032%2032s-14.3%2032-32%2032zM96%20384c-17.7%200-32%2014.3-32%2032s14.3%2032%2032%2032h256v-64zm32-232c0%2013.3%2010.7%2024%2024%2024h176c13.3%200%2024-10.7%2024-24s-10.7-24-24-24H152c-13.3%200-24%2010.7-24%2024m24%2072c-13.3%200-24%2010.7-24%2024s10.7%2024%2024%2024h176c13.3%200%2024-10.7%2024-24s-10.7-24-24-24z%22/%3E%3C/svg%3E');--md-admonition-icon--info:url('data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20512%20512%22%3E%3C%21--%21%20Font%20Awesome%20Free%207.1.0%20by%20%40fontawesome%20-%20https%3A//fontawesome.com%20License%20-%20https%3A//fontawesome.com/license/free%20%28Icons%3A%20CC%20BY%204.0%2C%20Fonts%3A%20SIL%20OFL%201.1%2C%20Code%3A%20MIT%20License%29%20Copyright%202025%20Fonticons%2C%20Inc.--%3E%3Cpath%20d%3D%22M256%20512a256%20256%200%201%200%200-512%20256%20256%200%201%200%200%20512m-32-352a32%2032%200%201%201%2064%200%2032%2032%200%201%201-64%200m-8%2064h48c13.3%200%2024%2010.7%2024%2024v88h8c13.3%200%2024%2010.7%2024%2024s-10.7%2024-24%2024h-80c-13.3%200-24-10.7-24-24s10.7-24%2024-24h24v-64h-24c-13.3%200-24-10.7-24-24s10.7-24%2024-24%22/%3E%3C/svg%3E');--md-admonition-icon--tip:url('data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20384%20512%22%3E%3C%21--%21%20Font%20Awesome%20Free%207.1.0%20by%20%40fontawesome%20-%20https%3A//fontawesome.com%20License%20-%20https%3A//fontawesome.com/license/free%20%28Icons%3A%20CC%20BY%204.0%2C%20Fonts%3A%20SIL%20OFL%201.1%2C%20Code%3A%20MIT%20License%29%20Copyright%202025%20Fonticons%2C%20Inc.--%3E%3Cpath%20d%3D%22M292.9%20384c7.3-22.3%2021.9-42.5%2038.4-59.9C364%20289.7%20384%20243.2%20384%20192%20384%2086%20298%200%20192%200S0%2086%200%20192c0%2051.2%2020%2097.7%2052.7%20132.1%2016.5%2017.4%2031.2%2037.6%2038.4%2059.9h201.7zm-4.9%2048H96v16c0%2044.2%2035.8%2080%2080%2080h32c44.2%200%2080-35.8%2080-80zM184%20112c-39.8%200-72%2032.2-72%2072%200%2013.3-10.7%2024-24%2024s-24-10.7-24-24c0-66.3%2053.7-120%20120-120%2013.3%200%2024%2010.7%2024%2024s-10.7%2024-24%2024%22/%3E%3C/svg%3E');--md-admonition-icon--success:url('data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20448%20512%22%3E%3C%21--%21%20Font%20Awesome%20Free%207.1.0%20by%20%40fontawesome%20-%20https%3A//fontawesome.com%20License%20-%20https%3A//fontawesome.com/license/free%20%28Icons%3A%20CC%20BY%204.0%2C%20Fonts%3A%20SIL%20OFL%201.1%2C%20Code%3A%20MIT%20License%29%20Copyright%202025%20Fonticons%2C%20Inc.--%3E%3Cpath%20d%3D%22M434.8%2070.1c14.3%2010.4%2017.5%2030.4%207.1%2044.7l-256%20352c-5.5%207.6-14%2012.3-23.4%2013.1s-18.5-2.7-25.1-9.3l-128-128c-12.5-12.5-12.5-32.8%200-45.3s32.8-12.5%2045.3%200l101.5%20101.5%20234-321.7c10.4-14.3%2030.4-17.5%2044.7-7.1z%22/%3E%3C/svg%3E');--md-admonition-icon--question:url('data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20512%20512%22%3E%3C%21--%21%20Font%20Awesome%20Free%207.1.0%20by%20%40fontawesome%20-%20https%3A//fontawesome.com%20License%20-%20https%3A//fontawesome.com/license/free%20%28Icons%3A%20CC%20BY%204.0%2C%20Fonts%3A%20SIL%20OFL%201.1%2C%20Code%3A%20MIT%20License%29%20Copyright%202025%20Fonticons%2C%20Inc.--%3E%3Cpath%20d%3D%22M256%20512a256%20256%200%201%200%200-512%20256%20256%200%201%200%200%20512m0-336c-17.7%200-32%2014.3-32%2032%200%2013.3-10.7%2024-24%2024s-24-10.7-24-24c0-44.2%2035.8-80%2080-80s80%2035.8%2080%2080c0%2047.2-36%2067.2-56%2074.5v3.8c0%2013.3-10.7%2024-24%2024s-24-10.7-24-24v-8.1c0-20.5%2014.8-35.2%2030.1-40.2%206.4-2.1%2013.2-5.5%2018.2-10.3%204.3-4.2%207.7-10%207.7-19.6%200-17.7-14.3-32-32-32zm-32%20192a32%2032%200%201%201%2064%200%2032%2032%200%201%201-64%200%22/%3E%3C/svg%3E');--md-admonition-icon--warning:url('data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20512%20512%22%3E%3C%21--%21%20Font%20Awesome%20Free%207.1.0%20by%20%40fontawesome%20-%20https%3A//fontawesome.com%20License%20-%20https%3A//fontawesome.com/license/free%20%28Icons%3A%20CC%20BY%204.0%2C%20Fonts%3A%20SIL%20OFL%201.1%2C%20Code%3A%20MIT%20License%29%20Copyright%202025%20Fonticons%2C%20Inc.--%3E%3Cpath%20d%3D%22M256%200c14.7%200%2028.2%208.1%2035.2%2021l216%20400c6.7%2012.4%206.4%2027.4-.8%2039.5S486.1%20480%20472%20480H40c-14.1%200-27.2-7.4-34.4-19.5s-7.5-27.1-.8-39.5l216-400c7-12.9%2020.5-21%2035.2-21m0%20352a32%2032%200%201%200%200%2064%2032%2032%200%201%200%200-64m0-192c-18.2%200-32.7%2015.5-31.4%2033.7l7.4%20104c.9%2012.5%2011.4%2022.3%2023.9%2022.3%2012.6%200%2023-9.7%2023.9-22.3l7.4-104c1.3-18.2-13.1-33.7-31.4-33.7z%22/%3E%3C/svg%3E');--md-admonition-icon--failure:url('data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20384%20512%22%3E%3C%21--%21%20Font%20Awesome%20Free%207.1.0%20by%20%40fontawesome%20-%20https%3A//fontawesome.com%20License%20-%20https%3A//fontawesome.com/license/free%20%28Icons%3A%20CC%20BY%204.0%2C%20Fonts%3A%20SIL%20OFL%201.1%2C%20Code%3A%20MIT%20License%29%20Copyright%202025%20Fonticons%2C%20Inc.--%3E%3Cpath%20d%3D%22M55.1%2073.4c-12.5-12.5-32.8-12.5-45.3%200s-12.5%2032.8%200%2045.3L147.2%20256%209.9%20393.4c-12.5%2012.5-12.5%2032.8%200%2045.3s32.8%2012.5%2045.3%200l137.3-137.4%20137.4%20137.3c12.5%2012.5%2032.8%2012.5%2045.3%200s12.5-32.8%200-45.3L237.8%20256l137.3-137.4c12.5-12.5%2012.5-32.8%200-45.3s-32.8-12.5-45.3%200L192.5%20210.7z%22/%3E%3C/svg%3E');--md-admonition-icon--danger:url('data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20512%20512%22%3E%3C%21--%21%20Font%20Awesome%20Free%207.1.0%20by%20%40fontawesome%20-%20https%3A//fontawesome.com%20License%20-%20https%3A//fontawesome.com/license/free%20%28Icons%3A%20CC%20BY%204.0%2C%20Fonts%3A%20SIL%20OFL%201.1%2C%20Code%3A%20MIT%20License%29%20Copyright%202025%20Fonticons%2C%20Inc.--%3E%3Cpath%20d%3D%22M416%20427.4c58.5-44%2096-111.6%2096-187.4C512%20107.5%20397.4%200%20256%200S0%20107.5%200%20240c0%2075.8%2037.5%20143.4%2096%20187.4V464c0%2026.5%2021.5%2048%2048%2048h32v-40c0-13.3%2010.7-24%2024-24s24%2010.7%2024%2024v40h64v-40c0-13.3%2010.7-24%2024-24s24%2010.7%2024%2024v40h32c26.5%200%2048-21.5%2048-48zM96%20256a64%2064%200%201%201%20128%200%2064%2064%200%201%201-128%200m256-64a64%2064%200%201%201%200%20128%2064%2064%200%201%201%200-128%22/%3E%3C/svg%3E');--md-admonition-icon--bug:url('data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20576%20512%22%3E%3C%21--%21%20Font%20Awesome%20Free%207.1.0%20by%20%40fontawesome%20-%20https%3A//fontawesome.com%20License%20-%20https%3A//fontawesome.com/license/free%20%28Icons%3A%20CC%20BY%204.0%2C%20Fonts%3A%20SIL%20OFL%201.1%2C%20Code%3A%20MIT%20License%29%20Copyright%202025%20Fonticons%2C%20Inc.--%3E%3Cpath%20d%3D%22M192%2096c0-53%2043-96%2096-96s96%2043%2096%2096v3.6c0%2015.7-12.7%2028.4-28.4%2028.4H220.5c-15.7%200-28.4-12.7-28.4-28.4V96zm345.6%2012.8c10.6%2014.1%207.7%2034.2-6.4%2044.8l-97.8%2073.3c5.3%208.9%209.3%2018.7%2011.8%2029.1H544c17.7%200%2032%2014.3%2032%2032s-14.3%2032-32%2032h-96v32c0%202.6-.1%205.3-.2%207.9l83.4%2062.5c14.1%2010.6%2017%2030.7%206.4%2044.8s-30.7%2017-44.8%206.4l-63.1-47.3c-23.2%2044.2-66.5%2076.2-117.7%2083.9V280c0-13.3-10.7-24-24-24s-24%2010.7-24%2024v230.2c-51.2-7.7-94.5-39.7-117.7-83.9l-63.1%2047.3c-14.1%2010.6-34.2%207.7-44.8-6.4s-7.7-34.2%206.4-44.8l83.4-62.5c-.1-2.6-.2-5.2-.2-7.9v-32H32c-17.7%200-32-14.3-32-32s14.3-32%2032-32h98.8c2.5-10.4%206.5-20.2%2011.8-29.1l-97.8-73.3c-14.1-10.6-17-30.7-6.4-44.8s30.7-17%2044.8-6.4L192%20184c12.3-5.1%2025.8-8%2040-8h112c14.2%200%2027.7%202.8%2040%208l108.8-81.6c14.1-10.6%2034.2-7.7%2044.8%206.4%22/%3E%3C/svg%3E');--md-admonition-icon--example:url('data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20448%20512%22%3E%3C%21--%21%20Font%20Awesome%20Free%207.1.0%20by%20%40fontawesome%20-%20https%3A//fontawesome.com%20License%20-%20https%3A//fontawesome.com/license/free%20%28Icons%3A%20CC%20BY%204.0%2C%20Fonts%3A%20SIL%20OFL%201.1%2C%20Code%3A%20MIT%20License%29%20Copyright%202025%20Fonticons%2C%20Inc.--%3E%3Cpath%20d%3D%22M288%200H128c-17.7%200-32%2014.3-32%2032s14.3%2032%2032%2032v151.5L7.5%20426.3C2.6%20435%200%20444.7%200%20454.7%200%20486.4%2025.6%20512%2057.3%20512h333.4c31.6%200%2057.3-25.6%2057.3-57.3%200-10-2.6-19.8-7.5-28.4L320%20215.5V64c17.7%200%2032-14.3%2032-32S337.7%200%20320%200zm-96%20215.5V64h64v151.5c0%2011.1%202.9%2022.1%208.4%2031.8L306%20320H142l41.6-72.7c5.5-9.7%208.4-20.6%208.4-31.8%22/%3E%3C/svg%3E');--md-admonition-icon--quote:url('data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20448%20512%22%3E%3C%21--%21%20Font%20Awesome%20Free%207.1.0%20by%20%40fontawesome%20-%20https%3A//fontawesome.com%20License%20-%20https%3A//fontawesome.com/license/free%20%28Icons%3A%20CC%20BY%204.0%2C%20Fonts%3A%20SIL%20OFL%201.1%2C%20Code%3A%20MIT%20License%29%20Copyright%202025%20Fonticons%2C%20Inc.--%3E%3Cpath%20d%3D%22M0%20216C0%20149.7%2053.7%2096%20120%2096h8c17.7%200%2032%2014.3%2032%2032s-14.3%2032-32%2032h-8c-30.9%200-56%2025.1-56%2056v8h64c35.3%200%2064%2028.7%2064%2064v64c0%2035.3-28.7%2064-64%2064H64c-35.3%200-64-28.7-64-64zm256%200c0-66.3%2053.7-120%20120-120h8c17.7%200%2032%2014.3%2032%2032s-14.3%2032-32%2032h-8c-30.9%200-56%2025.1-56%2056v8h64c35.3%200%2064%2028.7%2064%2064v64c0%2035.3-28.7%2064-64%2064h-64c-35.3%200-64-28.7-64-64z%22/%3E%3C/svg%3E');}</style><link rel=preconnect href=https://fonts.gstatic.com crossorigin><link rel=stylesheet href="https://fonts.googleapis.com/css?family=Inter:300,300i,400,400i,700,700i%7CJetBrains+Mono:400,400i,700,700i&display=fallback"><style>:root{--md-text-font:"Inter";--md-code-font:"JetBrains Mono"}</style><link rel=stylesheet href=../../../css/timeago.css><link rel=stylesheet href=../../../stylesheets/custom.css><script>__md_scope=new URL("../../..",location),__md_hash=e=>[...e].reduce(((e,_)=>(e<<5)-e+_.charCodeAt(0)),0),__md_get=(e,_=localStorage,t=__md_scope)=>JSON.parse(_.getItem(t.pathname+"."+e)),__md_set=(e,_,t=localStorage,a=__md_scope)=>{try{t.setItem(a.pathname+"."+e,JSON.stringify(_))}catch(e){}}</script></head> <body dir=ltr data-md-color-scheme=slate data-md-color-primary=teal data-md-color-accent=deep-orange> <input class=md-toggle data-md-toggle=drawer type=checkbox id=__drawer autocomplete=off> <input class=md-toggle data-md-toggle=search type=checkbox id=__search autocomplete=off> <label class=md-overlay for=__drawer></label> <div data-md-component=skip> <a href=#visual-components-guide class=md-skip> Skip to content </a> </div> <div data-md-component=announce> </div> <header class="md-header md-header--shadow md-header--lifted" data-md-component=header> <nav class="md-header__inner md-grid" aria-label=Header> <a href=../../.. title="Unity Helpers" class="md-header__button md-logo" aria-label="Unity Helpers" data-md-component=logo> <svg xmlns=http://www.w3.org/2000/svg viewbox="0 0 24 24"><path d="M12 8a3 3 0 0 0 3-3 3 3 0 0 0-3-3 3 3 0 0 0-3 3 3 3 0 0 0 3 3m0 3.54C9.64 9.35 6.5 8 3 8v11c3.5 0 6.64 1.35 9 3.54 2.36-2.19 5.5-3.54 9-3.54V8c-3.5 0-6.64 1.35-9 3.54"/></svg> </a> <label class="md-header__button md-icon" for=__drawer> <svg xmlns=http://www.w3.org/2000/svg viewbox="0 0 24 24"><path d="M3 6h18v2H3zm0 5h18v2H3zm0 5h18v2H3z"/></svg> </label> <div class=md-header__title data-md-component=header-title> <div class=md-header__ellipsis> <div class=md-header__topic> <span class=md-ellipsis> Unity Helpers </span> </div> <div class=md-header__topic data-md-component=header-topic> <span class=md-ellipsis> Visual Components </span> </div> </div> </div> <form class=md-header__option data-md-component=palette> <input class=md-option data-md-color-media data-md-color-scheme=slate data-md-color-primary=teal data-md-color-accent=deep-orange aria-label="Switch to light mode" type=radio name=__palette id=__palette_0> <label class="md-header__button md-icon" title="Switch to light mode" for=__palette_1 hidden> <svg xmlns=http://www.w3.org/2000/svg viewbox="0 0 24 24"><path d="m17.75 4.09-2.53 1.94.91 3.06-2.63-1.81-2.63 1.81.91-3.06-2.53-1.94L12.44 4l1.06-3 1.06 3zm3.5 6.91-1.64 1.25.59 1.98-1.7-1.17-1.7 1.17.59-1.98L15.75 11l2.06-.05L18.5 9l.69 1.95zm-2.28 4.95c.83-.08 1.72 1.1 1.19 1.85-.32.45-.66.87-1.08 1.27C15.17 23 8.84 23 4.94 19.07c-3.91-3.9-3.91-10.24 0-14.14.4-.4.82-.76 1.27-1.08.75-.53 1.93.36 1.85 1.19-.27 2.86.69 5.83 2.89 8.02a9.96 9.96 0 0 0 8.02 2.89m-1.64 2.02a12.08 12.08 0 0 1-7.8-3.47c-2.17-2.19-3.33-5-3.49-7.82-2.81 3.14-2.7 7.96.31 10.98 3.02 3.01 7.84 3.12 10.98.31"/></svg> </label> <input class=md-option data-md-color-media data-md-color-scheme=default data-md-color-primary=teal data-md-color-accent=deep-orange aria-label="Switch to dark mode" type=radio name=__palette id=__palette_1> <label class="md-header__button md-icon" title="Switch to dark mode" for=__palette_0 hidden> <svg xmlns=http://www.w3.org/2000/svg viewbox="0 0 24 24"><path d="M12 7a5 5 0 0 1 5 5 5 5 0 0 1-5 5 5 5 0 0 1-5-5 5 5 0 0 1 5-5m0 2a3 3 0 0 0-3 3 3 3 0 0 0 3 3 3 3 0 0 0 3-3 3 3 0 0 0-3-3m0-7 2.39 3.42C13.65 5.15 12.84 5 12 5s-1.65.15-2.39.42zM3.34 7l4.16-.35A7.2 7.2 0 0 0 5.94 8.5c-.44.74-.69 1.5-.83 2.29zm.02 10 1.76-3.77a7.131 7.131 0 0 0 2.38 4.14zM20.65 7l-1.77 3.79a7.02 7.02 0 0 0-2.38-4.15zm-.01 10-4.14.36c.59-.51 1.12-1.14 1.54-1.86.42-.73.69-1.5.83-2.29zM12 22l-2.41-3.44c.74.27 1.55.44 2.41.44.82 0 1.63-.17 2.37-.44z"/></svg> </label> </form> <script>var palette=__md_get("__palette");if(palette&&palette.color){if("(prefers-color-scheme)"===palette.color.media){var media=matchMedia("(prefers-color-scheme: light)"),input=document.querySelector(media.matches?"[data-md-color-media='(prefers-color-scheme: light)']":"[data-md-color-media='(prefers-color-scheme: dark)']");palette.color.media=input.getAttribute("data-md-color-media"),palette.color.scheme=input.getAttribute("data-md-color-scheme"),palette.color.primary=input.getAttribute("data-md-color-primary"),palette.color.accent=input.getAttribute("data-md-color-accent")}for(var[key,value]of Object.entries(palette.color))document.body.setAttribute("data-md-color-"+key,value)}</script> <label class="md-header__button md-icon" for=__search> <svg xmlns=http://www.w3.org/2000/svg viewbox="0 0 24 24"><path d="M9.5 3A6.5 6.5 0 0 1 16 9.5c0 1.61-.59 3.09-1.56 4.23l.27.27h.79l5 5-1.5 1.5-5-5v-.79l-.27-.27A6.52 6.52 0 0 1 9.5 16 6.5 6.5 0 0 1 3 9.5 6.5 6.5 0 0 1 9.5 3m0 2C7 5 5 7 5 9.5S7 14 9.5 14 14 12 14 9.5 12 5 9.5 5"/></svg> </label> <div class=md-search data-md-component=search role=dialog> <label class=md-search__overlay for=__search></label> <div class=md-search__inner role=search> <form class=md-search__form name=search> <input type=text class=md-search__input name=query aria-label=Search placeholder=Search autocapitalize=off autocorrect=off autocomplete=off spellcheck=false data-md-component=search-query required> <label class="md-search__icon md-icon" for=__search> <svg xmlns=http://www.w3.org/2000/svg viewbox="0 0 24 24"><path d="M9.5 3A6.5 6.5 0 0 1 16 9.5c0 1.61-.59 3.09-1.56 4.23l.27.27h.79l5 5-1.5 1.5-5-5v-.79l-.27-.27A6.52 6.52 0 0 1 9.5 16 6.5 6.5 0 0 1 3 9.5 6.5 6.5 0 0 1 9.5 3m0 2C7 5 5 7 5 9.5S7 14 9.5 14 14 12 14 9.5 12 5 9.5 5"/></svg> <svg xmlns=http://www.w3.org/2000/svg viewbox="0 0 24 24"><path d="M20 11v2H8l5.5 5.5-1.42 1.42L4.16 12l7.92-7.92L13.5 5.5 8 11z"/></svg> </label> <nav class=md-search__options aria-label=Search> <a href=javascript:void(0) class="md-search__icon md-icon" title=Share aria-label=Share data-clipboard data-clipboard-text data-md-component=search-share tabindex=-1> <svg xmlns=http://www.w3.org/2000/svg viewbox="0 0 24 24"><path d="M18 16.08c-.76 0-1.44.3-1.96.77L8.91 12.7c.05-.23.09-.46.09-.7s-.04-.47-.09-.7l7.05-4.11c.54.5 1.25.81 2.04.81a3 3 0 0 0 3-3 3 3 0 0 0-3-3 3 3 0 0 0-3 3c0 .24.04.47.09.7L8.04 9.81C7.5 9.31 6.79 9 6 9a3 3 0 0 0-3 3 3 3 0 0 0 3 3c.79 0 1.5-.31 2.04-.81l7.12 4.15c-.05.21-.08.43-.08.66 0 1.61 1.31 2.91 2.92 2.91s2.92-1.3 2.92-2.91A2.92 2.92 0 0 0 18 16.08"/></svg> </a> <button type=reset class="md-search__icon md-icon" title=Clear aria-label=Clear tabindex=-1> <svg xmlns=http://www.w3.org/2000/svg viewbox="0 0 24 24"><path d="M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/></svg> </button> </nav> <div class=md-search__suggest data-md-component=search-suggest></div> </form> <div class=md-search__output> <div class=md-search__scrollwrap tabindex=0 data-md-scrollfix> <div class=md-search-result data-md-component=search-result> <div class=md-search-result__meta> Initializing search </div> <ol class=md-search-result__list role=presentation></ol> </div> </div> </div> </div> </div> <div class=md-header__source> <a href=https://github.com/wallstop/unity-helpers title="Go to repository" class=md-source data-md-component=source> <div class="md-source__icon md-icon"> <svg xmlns=http://www.w3.org/2000/svg viewbox="0 0 512 512"><!-- Font Awesome Free 7.1.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2025 Fonticons, Inc.--><path d="M173.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6m-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3m44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9M252.8 8C114.1 8 8 113.3 8 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C436.2 457.8 504 362.9 504 252 504 113.3 391.5 8 252.8 8M105.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1m-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7m32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1m-11.4-14.7c-1.6 1-1.6 3.6 0 5.9s4.3 3.3 5.6 2.3c1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2"/></svg> </div> <div class=md-source__repository> wallstop/unity-helpers </div> </a> </div> </nav> <nav class=md-tabs aria-label=Tabs data-md-component=tabs> <div class=md-grid> <ul class=md-tabs__list> <li class=md-tabs__item> <a href=../../.. class=md-tabs__link> Home </a> </li> <li class=md-tabs__item> <a href=../../../overview/getting-started/ class=md-tabs__link> Getting Started </a> </li> <li class="md-tabs__item md-tabs__item--active"> <a href=../inspector-overview/ class=md-tabs__link> Features </a> </li> <li class=md-tabs__item> <a href=../../../performance/random-performance/ class=md-tabs__link> Performance </a> </li> <li class=md-tabs__item> <a href=../../../guides/odin-migration-guide/ class=md-tabs__link> Guides </a> </li> <li class=md-tabs__item> <a href=../../../project/contributing/ class=md-tabs__link> Contributing </a> </li> <li class=md-tabs__item> <a href=../../../project/license/ class=md-tabs__link> Project </a> </li> </ul> </div> </nav> </header> <div class=md-container data-md-component=container> <main class=md-main data-md-component=main> <div class="md-main__inner md-grid"> <div class="md-sidebar md-sidebar--primary" data-md-component=sidebar data-md-type=navigation> <div class=md-sidebar__scrollwrap> <div class=md-sidebar__inner> <nav class="md-nav md-nav--primary md-nav--lifted md-nav--integrated" aria-label=Navigation data-md-level=0> <label class=md-nav__title for=__drawer> <a href=../../.. title="Unity Helpers" class="md-nav__button md-logo" aria-label="Unity Helpers" data-md-component=logo> <svg xmlns=http://www.w3.org/2000/svg viewbox="0 0 24 24"><path d="M12 8a3 3 0 0 0 3-3 3 3 0 0 0-3-3 3 3 0 0 0-3 3 3 3 0 0 0 3 3m0 3.54C9.64 9.35 6.5 8 3 8v11c3.5 0 6.64 1.35 9 3.54 2.36-2.19 5.5-3.54 9-3.54V8c-3.5 0-6.64 1.35-9 3.54"/></svg> </a> Unity Helpers </label> <div class=md-nav__source> <a href=https://github.com/wallstop/unity-helpers title="Go to repository" class=md-source data-md-component=source> <div class="md-source__icon md-icon"> <svg xmlns=http://www.w3.org/2000/svg viewbox="0 0 512 512"><!-- Font Awesome Free 7.1.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2025 Fonticons, Inc.--><path d="M173.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6m-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3m44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9M252.8 8C114.1 8 8 113.3 8 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C436.2 457.8 504 362.9 504 252 504 113.3 391.5 8 252.8 8M105.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1m-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7m32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1m-11.4-14.7c-1.6 1-1.6 3.6 0 5.9s4.3 3.3 5.6 2.3c1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2"/></svg> </div> <div class=md-source__repository> wallstop/unity-helpers </div> </a> </div> <ul class=md-nav__list data-md-scrollfix> <li class=md-nav__item> <a href=../../.. class=md-nav__link> <span class=md-ellipsis> Home </span> </a> </li> <li class="md-nav__item md-nav__item--nested"> <input class="md-nav__toggle md-toggle md-toggle--indeterminate" type=checkbox id=__nav_2> <div class="md-nav__link md-nav__container"> <a href=../../../overview/ class="md-nav__link "> <span class=md-ellipsis> Getting Started </span> </a> <label class="md-nav__link " for=__nav_2 id=__nav_2_label tabindex=0> <span class="md-nav__icon md-icon"></span> </label> </div> <nav class=md-nav data-md-level=1 aria-labelledby=__nav_2_label aria-expanded=false> <label class=md-nav__title for=__nav_2> <span class="md-nav__icon md-icon"></span> Getting Started </label> <ul class=md-nav__list data-md-scrollfix> <li class=md-nav__item> <a href=../../../overview/getting-started/ class=md-nav__link> <span class=md-ellipsis> Quick Start </span> </a> </li> <li class=md-nav__item> <a href=../../../overview/glossary/ class=md-nav__link> <span class=md-ellipsis> Glossary </span> </a> </li> <li class=md-nav__item> <a href=../../../overview/roadmap/ class=md-nav__link> <span class=md-ellipsis> Roadmap </span> </a> </li> </ul> </nav> </li> <li class="md-nav__item md-nav__item--active md-nav__item--section md-nav__item--nested"> <input class="md-nav__toggle md-toggle " type=checkbox id=__nav_3 checked> <label class=md-nav__link for=__nav_3 id=__nav_3_label tabindex> <span class=md-ellipsis> Features </span> <span class="md-nav__icon md-icon"></span> </label> <nav class=md-nav data-md-level=1 aria-labelledby=__nav_3_label aria-expanded=true> <label class=md-nav__title for=__nav_3> <span class="md-nav__icon md-icon"></span> Features </label> <ul class=md-nav__list data-md-scrollfix> <li class="md-nav__item md-nav__item--active md-nav__item--section md-nav__item--nested"> <input class="md-nav__toggle md-toggle " type=checkbox id=__nav_3_1 checked> <label class=md-nav__link for=__nav_3_1 id=__nav_3_1_label tabindex> <span class=md-ellipsis> Inspector </span> <span class="md-nav__icon md-icon"></span> </label> <nav class=md-nav data-md-level=2 aria-labelledby=__nav_3_1_label aria-expanded=true> <label class=md-nav__title for=__nav_3_1> <span class="md-nav__icon md-icon"></span> Inspector </label> <ul class=md-nav__list data-md-scrollfix> <li class=md-nav__item> <a href=../inspector-overview/ class=md-nav__link> <span class=md-ellipsis> Overview </span> </a> </li> <li class=md-nav__item> <a href=../inspector-button/ class=md-nav__link> <span class=md-ellipsis> Buttons </span> </a> </li> <li class=md-nav__item> <a href=../inspector-grouping-attributes/ class=md-nav__link> <span class=md-ellipsis> Grouping Attributes </span> </a> </li> <li class=md-nav__item> <a href=../inspector-selection-attributes/ class=md-nav__link> <span class=md-ellipsis> Selection Attributes </span> </a> </li> <li class=md-nav__item> <a href=../inspector-conditional-display/ class=md-nav__link> <span class=md-ellipsis> Conditional Display </span> </a> </li> <li class=md-nav__item> <a href=../inspector-validation-attributes/ class=md-nav__link> <span class=md-ellipsis> Validation Attributes </span> </a> </li> <li class=md-nav__item> <a href=../inspector-inline-editor/ class=md-nav__link> <span class=md-ellipsis> Inline Editor </span> </a> </li> <li class=md-nav__item> <a href=../inspector-settings/ class=md-nav__link> <span class=md-ellipsis> Inspector Settings </span> </a> </li> <li class=md-nav__item> <a href=../utility-components/ class=md-nav__link> <span class=md-ellipsis> Utility Components </span> </a> </li> <li class="md-nav__item md-nav__item--active"> <input class="md-nav__toggle md-toggle" type=checkbox id=__toc> <label class="md-nav__link md-nav__link--active" for=__toc> <span class=md-ellipsis> Visual Components </span> <span class="md-nav__icon md-icon"></span> </label> <a href=./ class="md-nav__link md-nav__link--active"> <span class=md-ellipsis> Visual Components </span> </a> <nav class="md-nav md-nav--secondary" aria-label="Table of contents"> <label class=md-nav__title for=__toc> <span class="md-nav__icon md-icon"></span> Table of contents </label> <ul class=md-nav__list data-md-component=toc data-md-scrollfix> <li class=md-nav__item> <a href=#tldr-why-use-these class=md-nav__link> <span class=md-ellipsis> TL;DR — Why Use These </span> </a> </li> <li class=md-nav__item> <a href=#animatedspritelayer class=md-nav__link> <span class=md-ellipsis> AnimatedSpriteLayer </span> </a> <nav class=md-nav aria-label=AnimatedSpriteLayer> <ul class=md-nav__list> <li class=md-nav__item> <a href=#when-to-use class=md-nav__link> <span class=md-ellipsis> When to Use </span> </a> </li> <li class=md-nav__item> <a href=#basic-usage class=md-nav__link> <span class=md-ellipsis> Basic Usage </span> </a> </li> <li class=md-nav__item> <a href=#editor-only-creating-from-animationclip class=md-nav__link> <span class=md-ellipsis> Editor-Only: Creating from AnimationClip </span> </a> </li> <li class=md-nav__item> <a href=#important-notes class=md-nav__link> <span class=md-ellipsis> Important Notes </span> </a> </li> </ul> </nav> </li> <li class=md-nav__item> <a href=#layeredimage class=md-nav__link> <span class=md-ellipsis> LayeredImage </span> </a> <nav class=md-nav aria-label=LayeredImage> <ul class=md-nav__list> <li class=md-nav__item> <a href=#when-to-use_1 class=md-nav__link> <span class=md-ellipsis> When to Use </span> </a> </li> <li class=md-nav__item> <a href=#basic-usage_1 class=md-nav__link> <span class=md-ellipsis> Basic Usage </span> </a> </li> <li class=md-nav__item> <a href=#manual-frame-control class=md-nav__link> <span class=md-ellipsis> Manual Frame Control </span> </a> </li> <li class=md-nav__item> <a href=#changing-animation-speed class=md-nav__link> <span class=md-ellipsis> Changing Animation Speed </span> </a> </li> <li class=md-nav__item> <a href=#visual-demo class=md-nav__link> <span class=md-ellipsis> Visual Demo </span> </a> </li> <li class=md-nav__item> <a href=#how-compositing-works class=md-nav__link> <span class=md-ellipsis> How Compositing Works </span> </a> </li> <li class=md-nav__item> <a href=#pixel-cutoff-parameter class=md-nav__link> <span class=md-ellipsis> Pixel Cutoff Parameter </span> </a> </li> <li class=md-nav__item> <a href=#important-notes_1 class=md-nav__link> <span class=md-ellipsis> Important Notes </span> </a> </li> </ul> </nav> </li> <li class=md-nav__item> <a href=#enhancedimage-ugui class=md-nav__link> <span class=md-ellipsis> EnhancedImage (UGUI) </span> </a> </li> <li class=md-nav__item> <a href=#best-practices class=md-nav__link> <span class=md-ellipsis> Best Practices </span> </a> <nav class=md-nav aria-label="Best Practices"> <ul class=md-nav__list> <li class=md-nav__item> <a href=#animatedspritelayer_1 class=md-nav__link> <span class=md-ellipsis> AnimatedSpriteLayer </span> </a> </li> <li class=md-nav__item> <a href=#layeredimage_1 class=md-nav__link> <span class=md-ellipsis> LayeredImage </span> </a> </li> <li class=md-nav__item> <a href=#enhancedimage class=md-nav__link> <span class=md-ellipsis> EnhancedImage </span> </a> </li> </ul> </nav> </li> <li class=md-nav__item> <a href=#related-documentation class=md-nav__link> <span class=md-ellipsis> Related Documentation </span> </a> </li> <li class=md-nav__item> <a href=#faq class=md-nav__link> <span class=md-ellipsis> FAQ </span> </a> </li> </ul> </nav> </li> </ul> </nav> </li> <li class="md-nav__item md-nav__item--section md-nav__item--nested"> <input class="md-nav__toggle md-toggle md-toggle--indeterminate" type=checkbox id=__nav_3_2> <label class=md-nav__link for=__nav_3_2 id=__nav_3_2_label tabindex> <span class=md-ellipsis> Relational Components </span> <span class="md-nav__icon md-icon"></span> </label> <nav class=md-nav data-md-level=2 aria-labelledby=__nav_3_2_label aria-expanded=false> <label class=md-nav__title for=__nav_3_2> <span class="md-nav__icon md-icon"></span> Relational Components </label> <ul class=md-nav__list data-md-scrollfix> <li class=md-nav__item> <a href=../../relational-components/relational-components/ class=md-nav__link> <span class=md-ellipsis> Overview </span> </a> </li> </ul> </nav> </li> <li class="md-nav__item md-nav__item--section md-nav__item--nested"> <input class="md-nav__toggle md-toggle md-toggle--indeterminate" type=checkbox id=__nav_3_3> <label class=md-nav__link for=__nav_3_3 id=__nav_3_3_label tabindex> <span class=md-ellipsis> Spatial Data Structures </span> <span class="md-nav__icon md-icon"></span> </label> <nav class=md-nav data-md-level=2 aria-labelledby=__nav_3_3_label aria-expanded=false> <label class=md-nav__title for=__nav_3_3> <span class="md-nav__icon md-icon"></span> Spatial Data Structures </label> <ul class=md-nav__list data-md-scrollfix> <li class=md-nav__item> <a href=../../spatial/spatial-trees-2d-guide/ class=md-nav__link> <span class=md-ellipsis> 2D Spatial Trees </span> </a> </li> <li class=md-nav__item> <a href=../../spatial/spatial-trees-3d-guide/ class=md-nav__link> <span class=md-ellipsis> 3D Spatial Trees </span> </a> </li> <li class=md-nav__item> <a href=../../spatial/hulls/ class=md-nav__link> <span class=md-ellipsis> Hull Algorithms </span> </a> </li> <li class=md-nav__item> <a href=../../spatial/spatial-tree-semantics/ class=md-nav__link> <span class=md-ellipsis> Spatial Tree Semantics </span> </a> </li> </ul> </nav> </li> <li class="md-nav__item md-nav__item--section md-nav__item--nested"> <input class="md-nav__toggle md-toggle md-toggle--indeterminate" type=checkbox id=__nav_3_4> <label class=md-nav__link for=__nav_3_4 id=__nav_3_4_label tabindex> <span class=md-ellipsis> Effects System </span> <span class="md-nav__icon md-icon"></span> </label> <nav class=md-nav data-md-level=2 aria-labelledby=__nav_3_4_label aria-expanded=false> <label class=md-nav__title for=__nav_3_4> <span class="md-nav__icon md-icon"></span> Effects System </label> <ul class=md-nav__list data-md-scrollfix> <li class=md-nav__item> <a href=../../effects/effects-system/ class=md-nav__link> <span class=md-ellipsis> Overview </span> </a> </li> <li class=md-nav__item> <a href=../../effects/effects-system-tutorial/ class=md-nav__link> <span class=md-ellipsis> Tutorial </span> </a> </li> </ul> </nav> </li> <li class="md-nav__item md-nav__item--section md-nav__item--nested"> <input class="md-nav__toggle md-toggle md-toggle--indeterminate" type=checkbox id=__nav_3_5> <label class=md-nav__link for=__nav_3_5 id=__nav_3_5_label tabindex> <span class=md-ellipsis> Serialization </span> <span class="md-nav__icon md-icon"></span> </label> <nav class=md-nav data-md-level=2 aria-labelledby=__nav_3_5_label aria-expanded=false> <label class=md-nav__title for=__nav_3_5> <span class="md-nav__icon md-icon"></span> Serialization </label> <ul class=md-nav__list data-md-scrollfix> <li class=md-nav__item> <a href=../../serialization/serialization/ class=md-nav__link> <span class=md-ellipsis> Overview </span> </a> </li> <li class=md-nav__item> <a href=../../serialization/serialization-types/ class=md-nav__link> <span class=md-ellipsis> Serializable Types </span> </a> </li> </ul> </nav> </li> <li class="md-nav__item md-nav__item--section md-nav__item--nested"> <input class="md-nav__toggle md-toggle md-toggle--indeterminate" type=checkbox id=__nav_3_6> <label class=md-nav__link for=__nav_3_6 id=__nav_3_6_label tabindex> <span class=md-ellipsis> Utilities </span> <span class="md-nav__icon md-icon"></span> </label> <nav class=md-nav data-md-level=2 aria-labelledby=__nav_3_6_label aria-expanded=false> <label class=md-nav__title for=__nav_3_6> <span class="md-nav__icon md-icon"></span> Utilities </label> <ul class=md-nav__list data-md-scrollfix> <li class=md-nav__item> <a href=../../utilities/math-and-extensions/ class=md-nav__link> <span class=md-ellipsis> Math & Extensions </span> </a> </li> <li class=md-nav__item> <a href=../../utilities/data-structures/ class=md-nav__link> <span class=md-ellipsis> Data Structures </span> </a> </li> <li class=md-nav__item> <a href=../../utilities/random-generators/ class=md-nav__link> <span class=md-ellipsis> Random Generators </span> </a> </li> <li class=md-nav__item> <a href=../../utilities/singletons/ class=md-nav__link> <span class=md-ellipsis> Singletons </span> </a> </li> <li class=md-nav__item> <a href=../../utilities/reflection-helpers/ class=md-nav__link> <span class=md-ellipsis> Reflection Helpers </span> </a> </li> <li class=md-nav__item> <a href=../../utilities/helper-utilities/ class=md-nav__link> <span class=md-ellipsis> Helper Utilities </span> </a> </li> <li class=md-nav__item> <a href=../../utilities/pooling-guide/ class=md-nav__link> <span class=md-ellipsis> Pooling Guide </span> </a> </li> </ul> </nav> </li> <li class="md-nav__item md-nav__item--section md-nav__item--nested"> <input class="md-nav__toggle md-toggle md-toggle--indeterminate" type=checkbox id=__nav_3_7> <label class=md-nav__link for=__nav_3_7 id=__nav_3_7_label tabindex> <span class=md-ellipsis> Logging </span> <span class="md-nav__icon md-icon"></span> </label> <nav class=md-nav data-md-level=2 aria-labelledby=__nav_3_7_label aria-expanded=false> <label class=md-nav__title for=__nav_3_7> <span class="md-nav__icon md-icon"></span> Logging </label> <ul class=md-nav__list data-md-scrollfix> <li class=md-nav__item> <a href=../../logging/logging-extensions/ class=md-nav__link> <span class=md-ellipsis> Logging Extensions </span> </a> </li> <li class=md-nav__item> <a href=../../logging/unity-main-thread-dispatcher/ class=md-nav__link> <span class=md-ellipsis> Main Thread Dispatcher </span> </a> </li> </ul> </nav> </li> <li class="md-nav__item md-nav__item--section md-nav__item--nested"> <input class="md-nav__toggle md-toggle md-toggle--indeterminate" type=checkbox id=__nav_3_8> <label class=md-nav__link for=__nav_3_8 id=__nav_3_8_label tabindex> <span class=md-ellipsis> Editor Tools </span> <span class="md-nav__icon md-icon"></span> </label> <nav class=md-nav data-md-level=2 aria-labelledby=__nav_3_8_label aria-expanded=false> <label class=md-nav__title for=__nav_3_8> <span class="md-nav__icon md-icon"></span> Editor Tools </label> <ul class=md-nav__list data-md-scrollfix> <li class=md-nav__item> <a href=../../editor-tools/editor-tools-guide/ class=md-nav__link> <span class=md-ellipsis> Tools Guide </span> </a> </li> <li class=md-nav__item> <a href=../../editor-tools/unity-method-analyzer/ class=md-nav__link> <span class=md-ellipsis> Unity Method Analyzer </span> </a> </li> <li class=md-nav__item> <a href=../../editor-tools/asset-change-detection/ class=md-nav__link> <span class=md-ellipsis> Asset Change Detection </span> </a> </li> <li class=md-nav__item> <a href=../../editor-tools/failed-tests-exporter/ class=md-nav__link> <span class=md-ellipsis> Failed Tests Exporter </span> </a> </li> </ul> </nav> </li> </ul> </nav> </li> <li class="md-nav__item md-nav__item--nested"> <input class="md-nav__toggle md-toggle md-toggle--indeterminate" type=checkbox id=__nav_4> <label class=md-nav__link for=__nav_4 id=__nav_4_label tabindex=0> <span class=md-ellipsis> Performance </span> <span class="md-nav__icon md-icon"></span> </label> <nav class=md-nav data-md-level=1 aria-labelledby=__nav_4_label aria-expanded=false> <label class=md-nav__title for=__nav_4> <span class="md-nav__icon md-icon"></span> Performance </label> <ul class=md-nav__list data-md-scrollfix> <li class=md-nav__item> <a href=../../../performance/random-performance/ class=md-nav__link> <span class=md-ellipsis> Random Generators </span> </a> </li> <li class=md-nav__item> <a href=../../../performance/spatial-tree-2d-performance/ class=md-nav__link> <span class=md-ellipsis> Spatial Trees 2D </span> </a> </li> <li class=md-nav__item> <a href=../../../performance/spatial-tree-3d-performance/ class=md-nav__link> <span class=md-ellipsis> Spatial Trees 3D </span> </a> </li> <li class=md-nav__item> <a href=../../../performance/relational-components-performance/ class=md-nav__link> <span class=md-ellipsis> Relational Components </span> </a> </li> <li class=md-nav__item> <a href=../../../performance/reflection-performance/ class=md-nav__link> <span class=md-ellipsis> Reflection Helpers </span> </a> </li> <li class=md-nav__item> <a href=../../../performance/ilist-sorting-performance/ class=md-nav__link> <span class=md-ellipsis> IList Sorting </span> </a> </li> <li class=md-nav__item> <a href=../../../performance/baseline-tests-performance/ class=md-nav__link> <span class=md-ellipsis> Baseline Tests </span> </a> </li> </ul> </nav> </li> <li class="md-nav__item md-nav__item--nested"> <input class="md-nav__toggle md-toggle md-toggle--indeterminate" type=checkbox id=__nav_5> <label class=md-nav__link for=__nav_5 id=__nav_5_label tabindex=0> <span class=md-ellipsis> Guides </span> <span class="md-nav__icon md-icon"></span> </label> <nav class=md-nav data-md-level=1 aria-labelledby=__nav_5_label aria-expanded=false> <label class=md-nav__title for=__nav_5> <span class="md-nav__icon md-icon"></span> Guides </label> <ul class=md-nav__list data-md-scrollfix> <li class=md-nav__item> <a href=../../../guides/odin-migration-guide/ class=md-nav__link> <span class=md-ellipsis> Odin Migration </span> </a> </li> </ul> </nav> </li> <li class="md-nav__item md-nav__item--nested"> <input class="md-nav__toggle md-toggle md-toggle--indeterminate" type=checkbox id=__nav_6> <label class=md-nav__link for=__nav_6 id=__nav_6_label tabindex=0> <span class=md-ellipsis> Contributing </span> <span class="md-nav__icon md-icon"></span> </label> <nav class=md-nav data-md-level=1 aria-labelledby=__nav_6_label aria-expanded=false> <label class=md-nav__title for=__nav_6> <span class="md-nav__icon md-icon"></span> Contributing </label> <ul class=md-nav__list data-md-scrollfix> <li class=md-nav__item> <a href=../../../project/contributing/ class=md-nav__link> <span class=md-ellipsis> Overview </span> </a> </li> <li class=md-nav__item> <a href=../../../contributing/testing-patterns/ class=md-nav__link> <span class=md-ellipsis> Testing Patterns </span> </a> </li> </ul> </nav> </li> <li class="md-nav__item md-nav__item--nested"> <input class="md-nav__toggle md-toggle md-toggle--indeterminate" type=checkbox id=__nav_7> <label class=md-nav__link for=__nav_7 id=__nav_7_label tabindex=0> <span class=md-ellipsis> Project </span> <span class="md-nav__icon md-icon"></span> </label> <nav class=md-nav data-md-level=1 aria-labelledby=__nav_7_label aria-expanded=false> <label class=md-nav__title for=__nav_7> <span class="md-nav__icon md-icon"></span> Project </label> <ul class=md-nav__list data-md-scrollfix> <li class=md-nav__item> <a href=../../../project/license/ class=md-nav__link> <span class=md-ellipsis> License </span> </a> </li> <li class=md-nav__item> <a href=../../../project/third-party-notices/ class=md-nav__link> <span class=md-ellipsis> Third-Party Notices </span> </a> </li> <li class=md-nav__item> <a href=../../../project/llms-txt/ class=md-nav__link> <span class=md-ellipsis> LLMs.txt </span> </a> </li> </ul> </nav> </li> </ul> </nav> </div> </div> </div> <div class=md-content data-md-component=content> <nav class=md-path aria-label=Navigation> <ol class=md-path__list> <li class=md-path__item> <a href=../../.. class=md-path__link> <span class=md-ellipsis> Home </span> </a> </li> <li class=md-path__item> <a href=../inspector-overview/ class=md-path__link> <span class=md-ellipsis> Features </span> </a> </li> <li class=md-path__item> <a href=../inspector-overview/ class=md-path__link> <span class=md-ellipsis> Inspector </span> </a> </li> </ol> </nav> <article class="md-content__inner md-typeset"> <a href=https://github.com/wallstop/unity-helpers/edit/main/docs/features/inspector/visual-components.md title="Edit this page" class="md-content__button md-icon" rel=edit> <svg xmlns=http://www.w3.org/2000/svg viewbox="0 0 24 24"><path d="M20.71 7.04c.39-.39.39-1.04 0-1.41l-2.34-2.34c-.37-.39-1.02-.39-1.41 0l-1.84 1.83 3.75 3.75M3 17.25V21h3.75L17.81 9.93l-3.75-3.75z"/></svg> </a> <a href=https://github.com/wallstop/unity-helpers/raw/main/docs/features/inspector/visual-components.md title="View source of this page" class="md-content__button md-icon"> <svg xmlns=http://www.w3.org/2000/svg viewbox="0 0 24 24"><path d="M12 9a3 3 0 0 0-3 3 3 3 0 0 0 3 3 3 3 0 0 0 3-3 3 3 0 0 0-3-3m0 8a5 5 0 0 1-5-5 5 5 0 0 1 5-5 5 5 0 0 1 5 5 5 5 0 0 1-5 5m0-12.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5"/></svg> </a> <h1 id=visual-components-guide>Visual Components Guide<a class=headerlink href=#visual-components-guide title="Permanent link">¶</a></h1> <h2 id=tldr-why-use-these>TL;DR — Why Use These<a class=headerlink href=#tldr-why-use-these title="Permanent link">¶</a></h2> <ul> <li><strong>AnimatedSpriteLayer</strong>: Data structure for packaging sprite animation frames with per-frame offsets and transparency</li> <li><strong>LayeredImage</strong>: UI Toolkit element that composites multiple sprite animation layers into a single animated image</li> <li><strong>EnhancedImage</strong>: Extended Unity UI Image with HDR color support and shape masking</li> </ul> <p>These components solve the problem of creating complex, multi-layer sprite animations without pre-rendering every combination into massive sprite sheets.</p> <hr> <h2 id=animatedspritelayer>AnimatedSpriteLayer<a class=headerlink href=#animatedspritelayer title="Permanent link">¶</a></h2> <p><strong>What it is:</strong> An immutable data structure (struct) that packages a sprite animation sequence with per-frame position offsets and layer-wide alpha transparency.</p> <p><strong>Why it exists:</strong> When building complex sprite animations (like a character with equipment, effects, or layered body parts), you need a standardized way to represent each layer with its timing, positioning, and transparency. This struct is the building block for the LayeredImage composition system.</p> <p><strong>Problem it solves:</strong></p> <ul> <li>Eliminates manually syncing sprite frames, offsets, and alpha values across multiple systems</li> <li>Provides type-safe storage for animation layer data</li> <li>Automatically converts world-space offsets to pixel-space for rendering</li> <li>Validates texture readability at construction time (catches import setting errors early)</li> </ul> <h3 id=when-to-use>When to Use<a class=headerlink href=#when-to-use title="Permanent link">¶</a></h3> <p>✅ <strong>Use when:</strong></p> <ul> <li>Building <code>LayeredImage</code> compositions</li> <li>Creating character animations with separate layers for body parts</li> <li>Combining sprite effects (glow, shadow, outline) with base sprites</li> <li>You need frame-by-frame position adjustments (bobbing, recoil, etc.)</li> <li>Working with sprite-based animations that need dynamic layering</li> </ul> <p>❌ <strong>Don't use when:</strong></p> <ul> <li>You only have a single sprite sequence (just use <code>Animator</code>)</li> <li>Sprites don't need per-frame offsets (just use sprite arrays)</li> <li>You're working with UI Toolkit animations (use USS transitions)</li> <li>Performance is critical and you can pre-render combinations</li> </ul> <h3 id=basic-usage>Basic Usage<a class=headerlink href=#basic-usage title="Permanent link">¶</a></h3> <div class="language-csharp highlight"><table class=highlighttable><tr><th colspan=2 class=filename><span class=filename>C#</span></th></tr><tr><td class=linenos><div class=linenodiv><pre><span></span><span class=normal><a href=#__codelineno-0-1> 1</a></span>
<span class=normal><a href=#__codelineno-0-2> 2</a></span>
<span class=normal><a href=#__codelineno-0-3> 3</a></span>
<span class=normal><a href=#__codelineno-0-4> 4</a></span>
<span class=normal><a href=#__codelineno-0-5> 5</a></span>
<span class=normal><a href=#__codelineno-0-6> 6</a></span>
<span class=normal><a href=#__codelineno-0-7> 7</a></span>
<span class=normal><a href=#__codelineno-0-8> 8</a></span>
<span class=normal><a href=#__codelineno-0-9> 9</a></span>
<span class=normal><a href=#__codelineno-0-10>10</a></span>
<span class=normal><a href=#__codelineno-0-11>11</a></span>
<span class=normal><a href=#__codelineno-0-12>12</a></span>
<span class=normal><a href=#__codelineno-0-13>13</a></span>
<span class=normal><a href=#__codelineno-0-14>14</a></span>
<span class=normal><a href=#__codelineno-0-15>15</a></span>
<span class=normal><a href=#__codelineno-0-16>16</a></span>
<span class=normal><a href=#__codelineno-0-17>17</a></span>
<span class=normal><a href=#__codelineno-0-18>18</a></span>
<span class=normal><a href=#__codelineno-0-19>19</a></span>
<span class=normal><a href=#__codelineno-0-20>20</a></span>
<span class=normal><a href=#__codelineno-0-21>21</a></span>
<span class=normal><a href=#__codelineno-0-22>22</a></span>
<span class=normal><a href=#__codelineno-0-23>23</a></span>
<span class=normal><a href=#__codelineno-0-24>24</a></span>
<span class=normal><a href=#__codelineno-0-25>25</a></span>
<span class=normal><a href=#__codelineno-0-26>26</a></span>
<span class=normal><a href=#__codelineno-0-27>27</a></span>
<span class=normal><a href=#__codelineno-0-28>28</a></span>
<span class=normal><a href=#__codelineno-0-29>29</a></span>
<span class=normal><a href=#__codelineno-0-30>30</a></span></pre></div></td><td class=code><div><pre><span></span><code><span id=__span-0-1><a id=__codelineno-0-1 name=__codelineno-0-1></a><span class=k>using</span><span class=w> </span><span class=nn>WallstopStudios.UnityHelpers.Visuals</span><span class=p>;</span>
</span><span id=__span-0-2><a id=__codelineno-0-2 name=__codelineno-0-2></a><span class=k>using</span><span class=w> </span><span class=nn>UnityEngine</span><span class=p>;</span>
</span><span id=__span-0-3><a id=__codelineno-0-3 name=__codelineno-0-3></a>
</span><span id=__span-0-4><a id=__codelineno-0-4 name=__codelineno-0-4></a><span class=c1>// Create a layer from sprite sequence</span>
</span><span id=__span-0-5><a id=__codelineno-0-5 name=__codelineno-0-5></a><span class=n>Sprite</span><span class=p>[]</span><span class=w> </span><span class=n>walkCycleFrames</span><span class=w> </span><span class=o>=</span><span class=w> </span><span class=n>LoadWalkCycleSprites</span><span class=p>();</span><span class=w> </span><span class=c1>// Must have Read/Write enabled!</span>
</span><span id=__span-0-6><a id=__codelineno-0-6 name=__codelineno-0-6></a>
</span><span id=__span-0-7><a id=__codelineno-0-7 name=__codelineno-0-7></a><span class=c1>// Optional: per-frame offsets in world space (e.g., for bobbing motion)</span>
</span><span id=__span-0-8><a id=__codelineno-0-8 name=__codelineno-0-8></a><span class=n>Vector2</span><span class=p>[]</span><span class=w> </span><span class=n>walkBobOffsets</span><span class=w> </span><span class=o>=</span><span class=w> </span><span class=k>new</span><span class=p>[]</span>
</span><span id=__span-0-9><a id=__codelineno-0-9 name=__codelineno-0-9></a><span class=p>{</span>
</span><span id=__span-0-10><a id=__codelineno-0-10 name=__codelineno-0-10></a><span class=w> </span><span class=k>new</span><span class=w> </span><span class=nf>Vector2</span><span class=p>(</span><span class=mi>0</span><span class=p>,</span><span class=w> </span><span class=mf>0.1f</span><span class=p>),</span><span class=w> </span><span class=c1>// Frame 0: slight up</span>
</span><span id=__span-0-11><a id=__codelineno-0-11 name=__codelineno-0-11></a><span class=w> </span><span class=k>new</span><span class=w> </span><span class=nf>Vector2</span><span class=p>(</span><span class=mi>0</span><span class=p>,</span><span class=w> </span><span class=mi>0</span><span class=p>),</span><span class=w> </span><span class=c1>// Frame 1: neutral</span>
</span><span id=__span-0-12><a id=__codelineno-0-12 name=__codelineno-0-12></a><span class=w> </span><span class=k>new</span><span class=w> </span><span class=nf>Vector2</span><span class=p>(</span><span class=mi>0</span><span class=p>,</span><span class=w> </span><span class=mf>0.1f</span><span class=p>),</span><span class=w> </span><span class=c1>// Frame 2: slight up</span>
</span><span id=__span-0-13><a id=__codelineno-0-13 name=__codelineno-0-13></a><span class=w> </span><span class=k>new</span><span class=w> </span><span class=nf>Vector2</span><span class=p>(</span><span class=mi>0</span><span class=p>,</span><span class=w> </span><span class=mi>0</span><span class=p>)</span><span class=w> </span><span class=c1>// Frame 3: neutral</span>
</span><span id=__span-0-14><a id=__codelineno-0-14 name=__codelineno-0-14></a><span class=p>};</span>
</span><span id=__span-0-15><a id=__codelineno-0-15 name=__codelineno-0-15></a>
</span><span id=__span-0-16><a id=__codelineno-0-16 name=__codelineno-0-16></a><span class=n>AnimatedSpriteLayer</span><span class=w> </span><span class=n>bodyLayer</span><span class=w> </span><span class=o>=</span><span class=w> </span><span class=k>new</span><span class=w> </span><span class=n>AnimatedSpriteLayer</span><span class=p>(</span>
</span><span id=__span-0-17><a id=__codelineno-0-17 name=__codelineno-0-17></a><span class=w> </span><span class=n>sprites</span><span class=p>:</span><span class=w> </span><span class=n>walkCycleFrames</span><span class=p>,</span>
</span><span id=__span-0-18><a id=__codelineno-0-18 name=__codelineno-0-18></a><span class=w> </span><span class=n>worldSpaceOffsets</span><span class=p>:</span><span class=w> </span><span class=n>walkBobOffsets</span><span class=p>,</span>
</span><span id=__span-0-19><a id=__codelineno-0-19 name=__codelineno-0-19></a><span class=w> </span><span class=n>alpha</span><span class=p>:</span><span class=w> </span><span class=mf>1f</span><span class=w> </span><span class=c1>// Fully opaque</span>
</span><span id=__span-0-20><a id=__codelineno-0-20 name=__codelineno-0-20></a><span class=p>);</span>
</span><span id=__span-0-21><a id=__codelineno-0-21 name=__codelineno-0-21></a>
</span><span id=__span-0-22><a id=__codelineno-0-22 name=__codelineno-0-22></a><span class=c1>// Create equipment layer (same frame count, different sprites)</span>
</span><span id=__span-0-23><a id=__codelineno-0-23 name=__codelineno-0-23></a><span class=n>Sprite</span><span class=p>[]</span><span class=w> </span><span class=n>helmetFrames</span><span class=w> </span><span class=o>=</span><span class=w> </span><span class=n>LoadHelmetSprites</span><span class=p>();</span>
</span><span id=__span-0-24><a id=__codelineno-0-24 name=__codelineno-0-24></a><span class=n>AnimatedSpriteLayer</span><span class=w> </span><span class=n>helmetLayer</span><span class=w> </span><span class=o>=</span><span class=w> </span><span class=k>new</span><span class=w> </span><span class=n>AnimatedSpriteLayer</span><span class=p>(</span>
</span><span id=__span-0-25><a id=__codelineno-0-25 name=__codelineno-0-25></a><span class=w> </span><span class=n>sprites</span><span class=p>:</span><span class=w> </span><span class=n>helmetFrames</span><span class=p>,</span>
</span><span id=__span-0-26><a id=__codelineno-0-26 name=__codelineno-0-26></a><span class=w> </span><span class=n>worldSpaceOffsets</span><span class=p>:</span><span class=w> </span><span class=k>null</span><span class=p>,</span><span class=w> </span><span class=c1>// No offsets</span>
</span><span id=__span-0-27><a id=__codelineno-0-27 name=__codelineno-0-27></a><span class=w> </span><span class=n>alpha</span><span class=p>:</span><span class=w> </span><span class=mf>0.9f</span><span class=w> </span><span class=c1>// Slightly transparent</span>
</span><span id=__span-0-28><a id=__codelineno-0-28 name=__codelineno-0-28></a><span class=p>);</span>
</span><span id=__span-0-29><a id=__codelineno-0-29 name=__codelineno-0-29></a>
</span><span id=__span-0-30><a id=__codelineno-0-30 name=__codelineno-0-30></a><span class=c1>// Combine in LayeredImage (see below)</span>
</span></code></pre></div></td></tr></table></div> <h3 id=editor-only-creating-from-animationclip>Editor-Only: Creating from AnimationClip<a class=headerlink href=#editor-only-creating-from-animationclip title="Permanent link">¶</a></h3> <p>In editor code, you can create layers directly from AnimationClips:</p> <div class="language-csharp highlight"><table class=highlighttable><tr><th colspan=2 class=filename><span class=filename>C#</span></th></tr><tr><td class=linenos><div class=linenodiv><pre><span></span><span class=normal><a href=#__codelineno-1-1> 1</a></span>
<span class=normal><a href=#__codelineno-1-2> 2</a></span>
<span class=normal><a href=#__codelineno-1-3> 3</a></span>
<span class=normal><a href=#__codelineno-1-4> 4</a></span>
<span class=normal><a href=#__codelineno-1-5> 5</a></span>
<span class=normal><a href=#__codelineno-1-6> 6</a></span>
<span class=normal><a href=#__codelineno-1-7> 7</a></span>
<span class=normal><a href=#__codelineno-1-8> 8</a></span>
<span class=normal><a href=#__codelineno-1-9> 9</a></span>
<span class=normal><a href=#__codelineno-1-10>10</a></span></pre></div></td><td class=code><div><pre><span></span><code><span id=__span-1-1><a id=__codelineno-1-1 name=__codelineno-1-1></a><span class=cp>#if UNITY_EDITOR</span>
</span><span id=__span-1-2><a id=__codelineno-1-2 name=__codelineno-1-2></a><span class=k>using</span><span class=w> </span><span class=nn>UnityEditor</span><span class=p>;</span>
</span><span id=__span-1-3><a id=__codelineno-1-3 name=__codelineno-1-3></a>
</span><span id=__span-1-4><a id=__codelineno-1-4 name=__codelineno-1-4></a><span class=n>AnimationClip</span><span class=w> </span><span class=n>walkClip</span><span class=w> </span><span class=o>=</span><span class=w> </span><span class=n>AssetDatabase</span><span class=p>.</span><span class=n>LoadAssetAtPath</span><span class=o><</span><span class=n>AnimationClip</span><span class=o>></span><span class=p>(</span><span class=s>"Assets/Animations/Walk.anim"</span><span class=p>);</span>
</span><span id=__span-1-5><a id=__codelineno-1-5 name=__codelineno-1-5></a><span class=n>AnimatedSpriteLayer</span><span class=w> </span><span class=n>layer</span><span class=w> </span><span class=o>=</span><span class=w> </span><span class=k>new</span><span class=w> </span><span class=n>AnimatedSpriteLayer</span><span class=p>(</span>
</span><span id=__span-1-6><a id=__codelineno-1-6 name=__codelineno-1-6></a><span class=w> </span><span class=n>clip</span><span class=p>:</span><span class=w> </span><span class=n>walkClip</span><span class=p>,</span>
</span><span id=__span-1-7><a id=__codelineno-1-7 name=__codelineno-1-7></a><span class=w> </span><span class=n>worldSpaceOffsets</span><span class=p>:</span><span class=w> </span><span class=k>null</span><span class=p>,</span>
</span><span id=__span-1-8><a id=__codelineno-1-8 name=__codelineno-1-8></a><span class=w> </span><span class=n>alpha</span><span class=p>:</span><span class=w> </span><span class=mf>1f</span>
</span><span id=__span-1-9><a id=__codelineno-1-9 name=__codelineno-1-9></a><span class=p>);</span>
</span><span id=__span-1-10><a id=__codelineno-1-10 name=__codelineno-1-10></a><span class=cp>#endif</span>
</span></code></pre></div></td></tr></table></div> <h3 id=important-notes>Important Notes<a class=headerlink href=#important-notes title="Permanent link">¶</a></h3> <p><strong>Texture Readability:</strong> All sprites must have <strong>Read/Write Enabled</strong> in their texture import settings. The constructor validates this and logs errors for non-readable textures.</p> <p>To fix:</p> <ol> <li>Select the texture asset</li> <li>In Inspector, check "Read/Write Enabled"</li> <li>Click Apply</li> </ol> <p><strong>Frame Rate:</strong> Default frame rate is 12 fps (stored in <code>AnimatedSpriteLayer.FrameRate</code> constant). This matches classic sprite animation timing.</p> <p><strong>Offset Conversion:</strong> World-space offsets are automatically converted to pixel-space using sprite pixels-per-unit. This ensures offsets scale correctly with sprite resolution.</p> <hr> <h2 id=layeredimage>LayeredImage<a class=headerlink href=#layeredimage title="Permanent link">¶</a></h2> <p><strong>What it is:</strong> A UI Toolkit <code>VisualElement</code> that composites multiple <code>AnimatedSpriteLayer</code> instances into a single animated image with alpha blending, automatic cropping, and frame timing.</p> <p><strong>Why it exists:</strong> Creating character customization systems (body + equipment), visual effects (base + glow), or any multi-layer sprite animation traditionally requires pre-rendering every combination into massive sprite sheets. LayeredImage composes layers dynamically at runtime.</p> <p><strong>Problem it solves:</strong></p> <ul> <li><strong>Sprite sheet explosion</strong>: Instead of 10 bodies × 20 helmets × 15 armors = 3,000 pre-rendered sprites, you have 10 + 20 + 15 = 45 source sprites</li> <li><strong>Memory efficiency</strong>: Only active layers are loaded, not every possible combination</li> <li><strong>Runtime flexibility</strong>: Change equipment/effects without new assets</li> <li><strong>Automatic composition</strong>: Handles alpha blending, pivot alignment, and cropping</li> </ul> <h3 id=when-to-use_1>When to Use<a class=headerlink href=#when-to-use_1 title="Permanent link">¶</a></h3> <p>✅ <strong>Use when:</strong></p> <ul> <li>Character customization systems (swap equipment, clothing, accessories)</li> <li>Visual effects that layer over base sprites (shields, auras, damage flashes)</li> <li>Procedural sprite generation from components</li> <li>UI that needs animated, multi-layer sprites</li> <li>You want to avoid combinatorial explosion of pre-rendered sprites</li> </ul> <p>❌ <strong>Don't use when:</strong></p> <ul> <li>Single-layer animations (use Unity's <code>Image</code> or <code>Animator</code>)</li> <li>3D models (use skinned mesh renderers)</li> <li>Performance is absolutely critical and you can afford pre-rendered sheets</li> <li>Sprites don't share the same frame count/timing</li> <li>Working in UGUI (use <code>EnhancedImage</code> for UGUI, though it doesn't support layering)</li> </ul> <h3 id=basic-usage_1>Basic Usage<a class=headerlink href=#basic-usage_1 title="Permanent link">¶</a></h3> <div class="language-csharp highlight"><table class=highlighttable><tr><th colspan=2 class=filename><span class=filename>C#</span></th></tr><tr><td class=linenos><div class=linenodiv><pre><span></span><span class=normal><a href=#__codelineno-2-1> 1</a></span>
<span class=normal><a href=#__codelineno-2-2> 2</a></span>
<span class=normal><a href=#__codelineno-2-3> 3</a></span>
<span class=normal><a href=#__codelineno-2-4> 4</a></span>
<span class=normal><a href=#__codelineno-2-5> 5</a></span>
<span class=normal><a href=#__codelineno-2-6> 6</a></span>
<span class=normal><a href=#__codelineno-2-7> 7</a></span>
<span class=normal><a href=#__codelineno-2-8> 8</a></span>
<span class=normal><a href=#__codelineno-2-9> 9</a></span>
<span class=normal><a href=#__codelineno-2-10>10</a></span>
<span class=normal><a href=#__codelineno-2-11>11</a></span>
<span class=normal><a href=#__codelineno-2-12>12</a></span>
<span class=normal><a href=#__codelineno-2-13>13</a></span>
<span class=normal><a href=#__codelineno-2-14>14</a></span>
<span class=normal><a href=#__codelineno-2-15>15</a></span>
<span class=normal><a href=#__codelineno-2-16>16</a></span>
<span class=normal><a href=#__codelineno-2-17>17</a></span>
<span class=normal><a href=#__codelineno-2-18>18</a></span>
<span class=normal><a href=#__codelineno-2-19>19</a></span>
<span class=normal><a href=#__codelineno-2-20>20</a></span>
<span class=normal><a href=#__codelineno-2-21>21</a></span>
<span class=normal><a href=#__codelineno-2-22>22</a></span>
<span class=normal><a href=#__codelineno-2-23>23</a></span></pre></div></td><td class=code><div><pre><span></span><code><span id=__span-2-1><a id=__codelineno-2-1 name=__codelineno-2-1></a><span class=k>using</span><span class=w> </span><span class=nn>WallstopStudios.UnityHelpers.Visuals.UIToolkit</span><span class=p>;</span>
</span><span id=__span-2-2><a id=__codelineno-2-2 name=__codelineno-2-2></a><span class=k>using</span><span class=w> </span><span class=nn>UnityEngine.UIElements</span><span class=p>;</span>
</span><span id=__span-2-3><a id=__codelineno-2-3 name=__codelineno-2-3></a>
</span><span id=__span-2-4><a id=__codelineno-2-4 name=__codelineno-2-4></a><span class=c1>// Create layers (see AnimatedSpriteLayer section above)</span>
</span><span id=__span-2-5><a id=__codelineno-2-5 name=__codelineno-2-5></a><span class=n>AnimatedSpriteLayer</span><span class=p>[]</span><span class=w> </span><span class=n>layers</span><span class=w> </span><span class=o>=</span><span class=w> </span><span class=k>new</span><span class=p>[]</span>
</span><span id=__span-2-6><a id=__codelineno-2-6 name=__codelineno-2-6></a><span class=p>{</span>
</span><span id=__span-2-7><a id=__codelineno-2-7 name=__codelineno-2-7></a><span class=w> </span><span class=n>bodyLayer</span><span class=p>,</span><span class=w> </span><span class=c1>// Base character</span>
</span><span id=__span-2-8><a id=__codelineno-2-8 name=__codelineno-2-8></a><span class=w> </span><span class=n>armorLayer</span><span class=p>,</span><span class=w> </span><span class=c1>// Equipment layer 1</span>
</span><span id=__span-2-9><a id=__codelineno-2-9 name=__codelineno-2-9></a><span class=w> </span><span class=n>helmetLayer</span><span class=p>,</span><span class=w> </span><span class=c1>// Equipment layer 2</span>
</span><span id=__span-2-10><a id=__codelineno-2-10 name=__codelineno-2-10></a><span class=w> </span><span class=n>glowLayer</span><span class=w> </span><span class=c1>// Effect layer</span>
</span><span id=__span-2-11><a id=__codelineno-2-11 name=__codelineno-2-11></a><span class=p>};</span>
</span><span id=__span-2-12><a id=__codelineno-2-12 name=__codelineno-2-12></a>
</span><span id=__span-2-13><a id=__codelineno-2-13 name=__codelineno-2-13></a><span class=c1>// Create LayeredImage</span>
</span><span id=__span-2-14><a id=__codelineno-2-14 name=__codelineno-2-14></a><span class=n>LayeredImage</span><span class=w> </span><span class=n>characterImage</span><span class=w> </span><span class=o>=</span><span class=w> </span><span class=k>new</span><span class=w> </span><span class=n>LayeredImage</span><span class=p>(</span>
</span><span id=__span-2-15><a id=__codelineno-2-15 name=__codelineno-2-15></a><span class=w> </span><span class=n>inputSpriteLayers</span><span class=p>:</span><span class=w> </span><span class=n>layers</span><span class=p>,</span>
</span><span id=__span-2-16><a id=__codelineno-2-16 name=__codelineno-2-16></a><span class=w> </span><span class=n>backgroundColor</span><span class=p>:</span><span class=w> </span><span class=k>null</span><span class=p>,</span><span class=w> </span><span class=c1>// Transparent background (or use Color for solid background)</span>
</span><span id=__span-2-17><a id=__codelineno-2-17 name=__codelineno-2-17></a><span class=w> </span><span class=n>fps</span><span class=p>:</span><span class=w> </span><span class=mf>12f</span><span class=p>,</span><span class=w> </span><span class=c1>// Animation speed</span>
</span><span id=__span-2-18><a id=__codelineno-2-18 name=__codelineno-2-18></a><span class=w> </span><span class=n>updatesSelf</span><span class=p>:</span><span class=w> </span><span class=k>true</span><span class=p>,</span><span class=w> </span><span class=c1>// Automatically advances frames (uses Unity editor ticks or coroutines)</span>
</span><span id=__span-2-19><a id=__codelineno-2-19 name=__codelineno-2-19></a><span class=w> </span><span class=n>pixelCutoff</span><span class=p>:</span><span class=w> </span><span class=mf>0.01f</span><span class=w> </span><span class=c1>// Alpha threshold for cropping transparent pixels</span>
</span><span id=__span-2-20><a id=__codelineno-2-20 name=__codelineno-2-20></a><span class=p>);</span>
</span><span id=__span-2-21><a id=__codelineno-2-21 name=__codelineno-2-21></a>
</span><span id=__span-2-22><a id=__codelineno-2-22 name=__codelineno-2-22></a><span class=c1>// Add to UI Toolkit hierarchy</span>
</span><span id=__span-2-23><a id=__codelineno-2-23 name=__codelineno-2-23></a><span class=n>rootVisualElement</span><span class=p>.</span><span class=n>Add</span><span class=p>(</span><span class=n>characterImage</span><span class=p>);</span>
</span></code></pre></div></td></tr></table></div> <h3 id=manual-frame-control>Manual Frame Control<a class=headerlink href=#manual-frame-control title="Permanent link">¶</a></h3> <p>If you need precise control over frame advancement:</p> <div class="language-csharp highlight"><table class=highlighttable><tr><th colspan=2 class=filename><span class=filename>C#</span></th></tr><tr><td class=linenos><div class=linenodiv><pre><span></span><span class=normal><a href=#__codelineno-3-1> 1</a></span>
<span class=normal><a href=#__codelineno-3-2> 2</a></span>
<span class=normal><a href=#__codelineno-3-3> 3</a></span>
<span class=normal><a href=#__codelineno-3-4> 4</a></span>
<span class=normal><a href=#__codelineno-3-5> 5</a></span>
<span class=normal><a href=#__codelineno-3-6> 6</a></span>
<span class=normal><a href=#__codelineno-3-7> 7</a></span>
<span class=normal><a href=#__codelineno-3-8> 8</a></span>
<span class=normal><a href=#__codelineno-3-9> 9</a></span>
<span class=normal><a href=#__codelineno-3-10>10</a></span>
<span class=normal><a href=#__codelineno-3-11>11</a></span>
<span class=normal><a href=#__codelineno-3-12>12</a></span>
<span class=normal><a href=#__codelineno-3-13>13</a></span>
<span class=normal><a href=#__codelineno-3-14>14</a></span>
<span class=normal><a href=#__codelineno-3-15>15</a></span>
<span class=normal><a href=#__codelineno-3-16>16</a></span></pre></div></td><td class=code><div><pre><span></span><code><span id=__span-3-1><a id=__codelineno-3-1 name=__codelineno-3-1></a><span class=n>LayeredImage</span><span class=w> </span><span class=n>manualImage</span><span class=w> </span><span class=o>=</span><span class=w> </span><span class=k>new</span><span class=w> </span><span class=n>LayeredImage</span><span class=p>(</span>
</span><span id=__span-3-2><a id=__codelineno-3-2 name=__codelineno-3-2></a><span class=w> </span><span class=n>inputSpriteLayers</span><span class=p>:</span><span class=w> </span><span class=n>layers</span><span class=p>,</span>
</span><span id=__span-3-3><a id=__codelineno-3-3 name=__codelineno-3-3></a><span class=w> </span><span class=n>backgroundColor</span><span class=p>:</span><span class=w> </span><span class=k>null</span><span class=p>,</span>
</span><span id=__span-3-4><a id=__codelineno-3-4 name=__codelineno-3-4></a><span class=w> </span><span class=n>fps</span><span class=p>:</span><span class=w> </span><span class=mf>12f</span><span class=p>,</span>
</span><span id=__span-3-5><a id=__codelineno-3-5 name=__codelineno-3-5></a><span class=w> </span><span class=n>updatesSelf</span><span class=p>:</span><span class=w> </span><span class=k>false</span><span class=p>,</span><span class=w> </span><span class=c1>// Disable automatic updates</span>
</span><span id=__span-3-6><a id=__codelineno-3-6 name=__codelineno-3-6></a><span class=w> </span><span class=n>pixelCutoff</span><span class=p>:</span><span class=w> </span><span class=mf>0.01f</span>
</span><span id=__span-3-7><a id=__codelineno-3-7 name=__codelineno-3-7></a><span class=p>);</span>
</span><span id=__span-3-8><a id=__codelineno-3-8 name=__codelineno-3-8></a>
</span><span id=__span-3-9><a id=__codelineno-3-9 name=__codelineno-3-9></a><span class=c1>// In your update loop</span>
</span><span id=__span-3-10><a id=__codelineno-3-10 name=__codelineno-3-10></a><span class=k>void</span><span class=w> </span><span class=nf>Update</span><span class=p>()</span>
</span><span id=__span-3-11><a id=__codelineno-3-11 name=__codelineno-3-11></a><span class=p>{</span>
</span><span id=__span-3-12><a id=__codelineno-3-12 name=__codelineno-3-12></a><span class=w> </span><span class=n>manualImage</span><span class=p>.</span><span class=n>Update</span><span class=p>(</span><span class=n>force</span><span class=p>:</span><span class=w> </span><span class=k>false</span><span class=p>);</span><span class=w> </span><span class=c1>// Advances frame based on elapsed time</span>
</span><span id=__span-3-13><a id=__codelineno-3-13 name=__codelineno-3-13></a><span class=p>}</span>
</span><span id=__span-3-14><a id=__codelineno-3-14 name=__codelineno-3-14></a>
</span><span id=__span-3-15><a id=__codelineno-3-15 name=__codelineno-3-15></a><span class=c1>// Or force immediate frame advance</span>
</span><span id=__span-3-16><a id=__codelineno-3-16 name=__codelineno-3-16></a><span class=n>manualImage</span><span class=p>.</span><span class=n>Update</span><span class=p>(</span><span class=n>force</span><span class=p>:</span><span class=w> </span><span class=k>true</span><span class=p>);</span>
</span></code></pre></div></td></tr></table></div> <h3 id=changing-animation-speed>Changing Animation Speed<a class=headerlink href=#changing-animation-speed title="Permanent link">¶</a></h3> <div class="language-csharp highlight"><table class=highlighttable><tr><th colspan=2 class=filename><span class=filename>C#</span></th></tr><tr><td class=linenos><div class=linenodiv><pre><span></span><span class=normal><a href=#__codelineno-4-1>1</a></span>
<span class=normal><a href=#__codelineno-4-2>2</a></span>
<span class=normal><a href=#__codelineno-4-3>3</a></span></pre></div></td><td class=code><div><pre><span></span><code><span id=__span-4-1><a id=__codelineno-4-1 name=__codelineno-4-1></a><span class=c1>// Set frames per second at runtime</span>
</span><span id=__span-4-2><a id=__codelineno-4-2 name=__codelineno-4-2></a><span class=n>characterImage</span><span class=p>.</span><span class=n>Fps</span><span class=w> </span><span class=o>=</span><span class=w> </span><span class=mf>24f</span><span class=p>;</span><span class=w> </span><span class=c1>// Speed up animation</span>
</span><span id=__span-4-3><a id=__codelineno-4-3 name=__codelineno-4-3></a><span class=n>characterImage</span><span class=p>.</span><span class=n>Fps</span><span class=w> </span><span class=o>=</span><span class=w> </span><span class=mf>6f</span><span class=p>;</span><span class=w> </span><span class=c1>// Slow down animation</span>
</span></code></pre></div></td></tr></table></div> <h3 id=visual-demo>Visual Demo<a class=headerlink href=#visual-demo title="Permanent link">¶</a></h3> <blockquote> <p><strong>LayeredImage in Action</strong></p> <p><img alt="LayeredImage showing multi-layer character animation compositing in real-time" src=../../../images/inspector/layered-image-animation.gif></p> <p><em>Character with dynamically composited layers animating at runtime</em></p> <p><img alt="LayeredImage layer swapping demo showing layers being changed and animation updating instantly" src=../../../images/inspector/layered-image-layer-swap.gif></p> <p><em>Swapping equipment layers at runtime without pre-rendered sprite sheets</em></p> </blockquote> <h3 id=how-compositing-works>How Compositing Works<a class=headerlink href=#how-compositing-works title="Permanent link">¶</a></h3> <p>LayeredImage performs these steps each frame:</p> <ol> <li><strong>Allocates canvas</strong>: Creates a texture large enough to hold all layers with their offsets</li> <li><strong>Alpha blending</strong>: Layers are composited back-to-front with alpha blending</li> <li><strong>Pivot alignment</strong>: Each sprite's pivot point is respected during positioning</li> <li><strong>Offset application</strong>: Per-frame pixel offsets are applied</li> <li><strong>Cropping</strong>: Transparent borders are trimmed (configurable via <code>pixelCutoff</code>)</li> <li><strong>Rendering</strong>: Final composited texture is displayed</li> </ol> <p><strong>Performance optimization:</strong></p> <ul> <li>Uses parallel processing for large sprites (2048+ pixels total)</li> <li>Employs array pooling to minimize GC allocations</li> <li>Caches composited frames when possible</li> </ul> <h3 id=pixel-cutoff-parameter>Pixel Cutoff Parameter<a class=headerlink href=#pixel-cutoff-parameter title="Permanent link">¶</a></h3> <p>Controls how aggressive transparent pixel cropping is:</p> <div class="language-csharp highlight"><table class=highlighttable><tr><th colspan=2 class=filename><span class=filename>C#</span></th></tr><tr><td class=linenos><div class=linenodiv><pre><span></span><span class=normal><a href=#__codelineno-5-1>1</a></span>
<span class=normal><a href=#__codelineno-5-2>2</a></span>
<span class=normal><a href=#__codelineno-5-3>3</a></span>
<span class=normal><a href=#__codelineno-5-4>4</a></span>
<span class=normal><a href=#__codelineno-5-5>5</a></span>
<span class=normal><a href=#__codelineno-5-6>6</a></span>
<span class=normal><a href=#__codelineno-5-7>7</a></span>
<span class=normal><a href=#__codelineno-5-8>8</a></span></pre></div></td><td class=code><div><pre><span></span><code><span id=__span-5-1><a id=__codelineno-5-1 name=__codelineno-5-1></a><span class=c1>// More aggressive cropping (removes near-transparent pixels)</span>
</span><span id=__span-5-2><a id=__codelineno-5-2 name=__codelineno-5-2></a><span class=n>layeredImage</span><span class=p>.</span><span class=n>pixelCutoff</span><span class=w> </span><span class=o>=</span><span class=w> </span><span class=mf>0.05f</span><span class=p>;</span>
</span><span id=__span-5-3><a id=__codelineno-5-3 name=__codelineno-5-3></a>
</span><span id=__span-5-4><a id=__codelineno-5-4 name=__codelineno-5-4></a><span class=c1>// Less aggressive (keeps more semi-transparent pixels)</span>
</span><span id=__span-5-5><a id=__codelineno-5-5 name=__codelineno-5-5></a><span class=n>layeredImage</span><span class=p>.</span><span class=n>pixelCutoff</span><span class=w> </span><span class=o>=</span><span class=w> </span><span class=mf>0.001f</span><span class=p>;</span>
</span><span id=__span-5-6><a id=__codelineno-5-6 name=__codelineno-5-6></a>
</span><span id=__span-5-7><a id=__codelineno-5-7 name=__codelineno-5-7></a><span class=c1>// No cropping (includes fully transparent border)</span>
</span><span id=__span-5-8><a id=__codelineno-5-8 name=__codelineno-5-8></a><span class=n>layeredImage</span><span class=p>.</span><span class=n>pixelCutoff</span><span class=w> </span><span class=o>=</span><span class=w> </span><span class=mf>0f</span><span class=p>;</span>
</span></code></pre></div></td></tr></table></div> <p>Higher values = smaller final image, but may clip soft edges (glows, shadows).</p> <h3 id=important-notes_1>Important Notes<a class=headerlink href=#important-notes_1 title="Permanent link">¶</a></h3> <p><strong>Frame Synchronization:</strong> All layers must have the same number of frames. Mixing 4-frame and 8-frame animations will cause visual glitches.</p> <p><strong>Performance Considerations:</strong></p> <ul> <li>Compositing happens every frame for animated images</li> <li>Large sprite resolutions (1024×1024+) will impact performance</li> <li>Consider pre-rendering if targeting low-end devices</li> <li>Parallel processing threshold is 2048 pixels (width × height)</li> </ul> <p><strong>Editor vs Runtime:</strong></p> <ul> <li>In Editor: Uses Unity's editor update ticks for animation</li> <li>In Runtime: Uses coroutines for frame timing</li> <li>Both honor <code>updatesSelf</code> setting</li> </ul> <hr> <h2 id=enhancedimage-ugui>EnhancedImage (UGUI)<a class=headerlink href=#enhancedimage-ugui title="Permanent link">¶</a></h2> <p><strong>What it is:</strong> An extended version of Unity's UI <code>Image</code> component with HDR color support and texture-based shape masking.</p> <p><strong>Why it exists:</strong> Unity's standard <code>Image</code> component doesn't support:</p> <ul> <li>HDR colors (for bloom/glow effects)</li> <li>Complex shape masks (beyond sprite masks)</li> <li>Shader-based shape rendering</li> </ul> <p><strong>See full documentation:</strong> <a href=../../editor-tools/editor-tools-guide/#enhancedimage-editor>Editor Tools Guide - EnhancedImage</a></p> <blockquote> <p><strong>Visual Demo</strong></p> <p><img alt="EnhancedImage HDR color intensity slider being adjusted, showing bloom effect increasing" src=../../../images/inspector/enhanced-image-hdr-bloom.gif></p> <p><em>HDR color values above 1.0 create bloom effects when post-processing is enabled</em></p> </blockquote> <p><strong>Quick example:</strong></p> <div class="language-csharp highlight"><table class=highlighttable><tr><th colspan=2 class=filename><span class=filename>C#</span></th></tr><tr><td class=linenos><div class=linenodiv><pre><span></span><span class=normal><a href=#__codelineno-6-1>1</a></span>
<span class=normal><a href=#__codelineno-6-2>2</a></span>
<span class=normal><a href=#__codelineno-6-3>3</a></span>
<span class=normal><a href=#__codelineno-6-4>4</a></span>
<span class=normal><a href=#__codelineno-6-5>5</a></span>
<span class=normal><a href=#__codelineno-6-6>6</a></span>
<span class=normal><a href=#__codelineno-6-7>7</a></span>
<span class=normal><a href=#__codelineno-6-8>8</a></span>
<span class=normal><a href=#__codelineno-6-9>9</a></span></pre></div></td><td class=code><div><pre><span></span><code><span id=__span-6-1><a id=__codelineno-6-1 name=__codelineno-6-1></a><span class=k>using</span><span class=w> </span><span class=nn>WallstopStudios.UnityHelpers.Visuals.UGUI</span><span class=p>;</span>
</span><span id=__span-6-2><a id=__codelineno-6-2 name=__codelineno-6-2></a>
</span><span id=__span-6-3><a id=__codelineno-6-3 name=__codelineno-6-3></a><span class=n>EnhancedImage</span><span class=w> </span><span class=n>image</span><span class=w> </span><span class=o>=</span><span class=w> </span><span class=n>GetComponent</span><span class=o><</span><span class=n>EnhancedImage</span><span class=o>></span><span class=p>();</span>
</span><span id=__span-6-4><a id=__codelineno-6-4 name=__codelineno-6-4></a>
</span><span id=__span-6-5><a id=__codelineno-6-5 name=__codelineno-6-5></a><span class=c1>// HDR color for bloom</span>
</span><span id=__span-6-6><a id=__codelineno-6-6 name=__codelineno-6-6></a><span class=n>image</span><span class=p>.</span><span class=n>HdrColor</span><span class=w> </span><span class=o>=</span><span class=w> </span><span class=k>new</span><span class=w> </span><span class=n>Color</span><span class=p>(</span><span class=mf>2f</span><span class=p>,</span><span class=w> </span><span class=mf>0.5f</span><span class=p>,</span><span class=w> </span><span class=mf>0.1f</span><span class=p>,</span><span class=w> </span><span class=mf>1f</span><span class=p>);</span><span class=w> </span><span class=c1>// RGB values > 1 for bloom</span>
</span><span id=__span-6-7><a id=__codelineno-6-7 name=__codelineno-6-7></a>
</span><span id=__span-6-8><a id=__codelineno-6-8 name=__codelineno-6-8></a><span class=c1>// Shape mask</span>
</span><span id=__span-6-9><a id=__codelineno-6-9 name=__codelineno-6-9></a><span class=n>image</span><span class=p>.</span><span class=n>shapeMask</span><span class=w> </span><span class=o>=</span><span class=w> </span><span class=n>myMaskTexture</span><span class=p>;</span><span class=w> </span><span class=c1>// Black areas are transparent</span>
</span></code></pre></div></td></tr></table></div> <hr> <h2 id=best-practices>Best Practices<a class=headerlink href=#best-practices title="Permanent link">¶</a></h2> <h3 id=animatedspritelayer_1>AnimatedSpriteLayer<a class=headerlink href=#animatedspritelayer_1 title="Permanent link">¶</a></h3> <ul> <li><strong>Always enable Read/Write</strong> on source textures (build will fail otherwise)</li> <li><strong>Keep frame counts consistent</strong> across layers for the same animation</li> <li><strong>Use world-space offsets</strong> for consistent motion across different sprite resolutions</li> <li><strong>Cache layer instances</strong> when using the same animation repeatedly (they're immutable)</li> </ul> <h3 id=layeredimage_1>LayeredImage<a class=headerlink href=#layeredimage_1 title="Permanent link">¶</a></h3> <ul> <li><strong>Layer order matters</strong>: Layers are rendered front-to-back in array order</li> <li><strong>Optimize sprite sizes</strong>: Trim transparent borders before importing (use Sprite Editor's "Tight" mode)</li> <li><strong>Profile on target hardware</strong>: Mobile devices may struggle with 512×512+ composites at 60fps</li> <li><strong>Use manual updates</strong> when syncing with non-UI systems (like gameplay state)</li> <li><strong>Pre-render</strong> if combinations are limited and performance is critical</li> </ul> <h3 id=enhancedimage>EnhancedImage<a class=headerlink href=#enhancedimage title="Permanent link">¶</a></h3> <ul> <li><strong>Don't mix with Image</strong>: EnhancedImage replaces Unity's Image, don't use both</li> <li><strong>Material cleanup</strong> is automatic but test in edit mode transitions</li> <li><strong>HDR requires post-processing</strong>: Ensure Bloom is enabled in your camera's post-processing</li> </ul> <hr> <h2 id=related-documentation>Related Documentation<a class=headerlink href=#related-documentation title="Permanent link">¶</a></h2> <ul> <li><a href=../../editor-tools/editor-tools-guide/ >Editor Tools Guide</a> - EnhancedImage editor integration</li> <li>Samples - Example projects in <code>Samples~</code> folder in the repository</li> <li><a href=../../utilities/math-and-extensions/ >Math & Extensions</a> - Color utilities used internally</li> </ul> <hr> <h2 id=faq>FAQ<a class=headerlink href=#faq title="Permanent link">¶</a></h2> <p><strong>Q: Can I mix different frame counts in LayeredImage?</strong> A: No, all layers must have the same frame count. Pad shorter animations with duplicate frames if needed.</p> <p><strong>Q: Why are my layers not aligned correctly?</strong> A: Check that sprite pivots are set correctly (usually center). LayeredImage respects sprite pivot points.</p> <p><strong>Q: Can I change layers at runtime?</strong> A: Currently no, LayeredImage is immutable after construction. Create a new instance with updated layers.</p> <p><strong>Q: Performance impact vs pre-rendered sprites?</strong> A: Compositing costs ~1-3ms per image on modern hardware. Pre-rendered is faster but uses more memory/storage.</p> <p><strong>Q: Does this work with Unity's Animator?</strong> A: No, LayeredImage is independent. It's designed for UI Toolkit programmatic control.</p> <p><strong>Q: Can I export the composited result?</strong> A: Not directly, but you could capture the rendered texture using <code>Texture2D.ReadPixels</code> in a render texture setup.</p> <aside class=md-source-file> <span class=md-source-file__fact> <span class=md-icon title="Last update"> <svg xmlns=http://www.w3.org/2000/svg viewbox="0 0 24 24"><path d="M21 13.1c-.1 0-.3.1-.4.2l-1 1 2.1 2.1 1-1c.2-.2.2-.6 0-.8l-1.3-1.3c-.1-.1-.2-.2-.4-.2m-1.9 1.8-6.1 6V23h2.1l6.1-6.1zM12.5 7v5.2l4 2.4-1 1L11 13V7zM11 21.9c-5.1-.5-9-4.8-9-9.9C2 6.5 6.5 2 12 2c5.3 0 9.6 4.1 10 9.3-.3-.1-.6-.2-1-.2s-.7.1-1 .2C19.6 7.2 16.2 4 12 4c-4.4 0-8 3.6-8 8 0 4.1 3.1 7.5 7.1 7.9l-.1.2z"/></svg> </span> <span class="git-revision-date-localized-plugin git-revision-date-localized-plugin-timeago" title="January 24, 2026 21:39:53 UTC"><span class=timeago datetime=2026-01-24T21:39:53+00:00 locale=en></span></span><span class="git-revision-date-localized-plugin git-revision-date-localized-plugin-iso_date" title="January 24, 2026 21:39:53 UTC">2026-01-24</span> </span> <span class=md-source-file__fact> <span class=md-icon title=Created> <svg xmlns=http://www.w3.org/2000/svg viewbox="0 0 24 24"><path d="M14.47 15.08 11 13V7h1.5v5.25l3.08 1.83c-.41.28-.79.62-1.11 1m-1.39 4.84c-.36.05-.71.08-1.08.08-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8c0 .37-.03.72-.08 1.08.69.1 1.33.32 1.92.64.1-.56.16-1.13.16-1.72 0-5.5-4.5-10-10-10S2 6.5 2 12s4.47 10 10 10c.59 0 1.16-.06 1.72-.16-.32-.59-.54-1.23-.64-1.92M18 15v3h-3v2h3v3h2v-3h3v-2h-3v-3z"/></svg> </span> <span class="git-revision-date-localized-plugin git-revision-date-localized-plugin-timeago" title="October 14, 2025 18:04:27 UTC"><span class=timeago datetime=2025-10-14T18:04:27+00:00 locale=en></span></span><span class="git-revision-date-localized-plugin git-revision-date-localized-plugin-iso_date" title="October 14, 2025 18:04:27 UTC">2025-10-14</span> </span> </aside> </article> </div> <script>var tabs=__md_get("__tabs");if(Array.isArray(tabs))e:for(var set of document.querySelectorAll(".tabbed-set")){var labels=set.querySelector(".tabbed-labels");for(var tab of tabs)for(var label of labels.getElementsByTagName("label"))if(label.innerText.trim()===tab){var input=document.getElementById(label.htmlFor);input.checked=!0;continue e}}</script> <script>var target=document.getElementById(location.hash.slice(1));target&&target.name&&(target.checked=target.name.startsWith("__tabbed_"))</script> </div> <button type=button class="md-top md-icon" data-md-component=top hidden> <svg xmlns=http://www.w3.org/2000/svg viewbox="0 0 24 24"><path d="M13 20h-2V8l-5.5 5.5-1.42-1.42L12 4.16l7.92 7.92-1.42 1.42L13 8z"/></svg> Back to top </button> </main> <footer class=md-footer> <nav class="md-footer__inner md-grid" aria-label=Footer> <a href=../utility-components/ class="md-footer__link md-footer__link--prev" aria-label="Previous: Utility Components"> <div class="md-footer__button md-icon"> <svg xmlns=http://www.w3.org/2000/svg viewbox="0 0 24 24"><path d="M20 11v2H8l5.5 5.5-1.42 1.42L4.16 12l7.92-7.92L13.5 5.5 8 11z"/></svg> </div> <div class=md-footer__title> <span class=md-footer__direction> Previous </span> <div class=md-ellipsis> Utility Components </div> </div> </a> <a href=../../relational-components/relational-components/ class="md-footer__link md-footer__link--next" aria-label="Next: Overview"> <div class=md-footer__title> <span class=md-footer__direction> Next </span> <div class=md-ellipsis> Overview </div> </div> <div class="md-footer__button md-icon"> <svg xmlns=http://www.w3.org/2000/svg viewbox="0 0 24 24"><path d="M4 11v2h12l-5.5 5.5 1.42 1.42L19.84 12l-7.92-7.92L10.5 5.5 16 11z"/></svg> </div> </a> </nav> <div class="md-footer-meta md-typeset"> <div class="md-footer-meta__inner md-grid"> <div class=md-copyright> <div class=md-copyright__highlight> Copyright © 2024-2026 Wallstop Studios - MIT License </div> </div> <div class=md-social> <a href=https://github.com/wallstop/unity-helpers target=_blank rel=noopener title="Unity Helpers on GitHub" class=md-social__link> <svg xmlns=http://www.w3.org/2000/svg viewbox="0 0 512 512"><!-- Font Awesome Free 7.1.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2025 Fonticons, Inc.--><path d="M173.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6m-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3m44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9M252.8 8C114.1 8 8 113.3 8 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C436.2 457.8 504 362.9 504 252 504 113.3 391.5 8 252.8 8M105.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1m-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7m32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1m-11.4-14.7c-1.6 1-1.6 3.6 0 5.9s4.3 3.3 5.6 2.3c1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2"/></svg> </a> </div> </div> </div> </footer> </div> <div class=md-dialog data-md-component=dialog> <div class="md-dialog__inner md-typeset"></div> </div> <div class=md-progress data-md-component=progress role=progressbar></div> <script id=__config type=application/json>{"annotate": null, "base": "../../..", "features": ["navigation.instant", "navigation.instant.prefetch", "navigation.instant.progress", "navigation.tracking", "navigation.tabs", "navigation.tabs.sticky", "navigation.sections", "navigation.expand", "navigation.path", "navigation.indexes", "navigation.top", "navigation.footer", "toc.follow", "toc.integrate", "search.suggest", "search.highlight", "search.share", "header.autohide", "content.code.copy", "content.code.annotate", "content.tabs.link", "content.tooltips", "content.action.edit", "content.action.view"], "search": "../../../assets/javascripts/workers/search.2c215733.min.js", "tags": null, "translations": {"clipboard.copied": "Copied to clipboard", "clipboard.copy": "Copy to clipboard", "search.result.more.one": "1 more on this page", "search.result.more.other": "# more on this page", "search.result.none": "No matching documents", "search.result.one": "1 matching document", "search.result.other": "# matching documents", "search.result.placeholder": "Type to start searching", "search.result.term.missing": "Missing", "select.version": "Select version"}, "version": null}</script> <script src=../../../assets/javascripts/bundle.79ae519e.min.js></script> <script src=../../../js/timeago.min.js></script> <script src=../../../js/timeago_mkdocs_material.js></script> <script src=https://unpkg.com/mermaid@10/dist/mermaid.min.js></script> </body> </html>