|
| 1 | +# [Unity-Theme (Paleta de Colores)](https://github.com/IvanMurzak/Unity-Theme) |
| 2 | + |
| 3 | +[](https://openupm.com/packages/extensions.unity.theme/) |
| 4 | +[](https://github.com/IvanMurzak/Unity-Theme/actions/workflows/release.yml) |
| 5 | +[](https://unity.com/releases/editor/archive) |
| 6 | +[](https://unity.com/releases/editor/archive) |
| 7 | + |
| 8 | +[](https://github.com/IvanMurzak/Unity-Theme/stargazers) |
| 9 | +[](https://github.com/IvanMurzak/Unity-Theme/blob/main/LICENSE) |
| 10 | +[](https://stand-with-ukraine.pp.ua) |
| 11 | + |
| 12 | +Crea paletas de colores y componentes para cambiar colores específicos en elementos visuales específicos. Muy útil para UI. |
| 13 | + |
| 14 | + |
| 15 | + |
| 16 | +<div align="center" width="100%"> |
| 17 | + |
| 18 | +<b>[English](https://github.com/IvanMurzak/Unity-Theme/blob/main/README.md) | [中文](https://github.com/IvanMurzak/Unity-Theme/blob/main/docs/README.zh-CN.md) | [日本語](https://github.com/IvanMurzak/Unity-Theme/blob/main/docs/README.ja.md)</b> |
| 19 | + |
| 20 | +</div> |
| 21 | + |
| 22 | +## Características |
| 23 | + |
| 24 | +- ✔️ Nombrar colores |
| 25 | +- ✔️ Crear temas personalizados con nombres |
| 26 | +- ✔️ Agregar tantos colores como necesites |
| 27 | +- ✔️ Nombrar temas como quieras |
| 28 | +- ✔️ Cambiar tema en cualquier momento por nombre |
| 29 | +- ✔️ Vincular color a: `Image`, `SpriteRenderer`, `TextMeshPro`, etc |
| 30 | +- ✔️ Forma fácil de agregar vinculador de color personalizado con una nueva clase C# con solo unas pocas líneas de código |
| 31 | +- ✔️ Renombrar color incluso después de vincular a un componente, sin enlaces rotos |
| 32 | + |
| 33 | +## Estado de estabilidad |
| 34 | + |
| 35 | +| Versión Unity | Prueba Editor | Prueba Player | Prueba Build | |
| 36 | +|---------------|-------------|-------------|------------| |
| 37 | +| 2022.3.57f1 |  |  |  | |
| 38 | +| 2023.1.20f1 |  |  |  | |
| 39 | +| 2023.2.20f1 |  |  |  | |
| 40 | +| 6000.0.37f1 |  |  |  | |
| 41 | + |
| 42 | +# Instalación |
| 43 | + |
| 44 | +### Opción 1 - Instalador |
| 45 | + |
| 46 | +- **[⬇️ Descargar Instalador](https://github.com/IvanMurzak/Unity-Theme/releases/download/4.1.3/Unity-Theme-Installer.unitypackage)** |
| 47 | +- **📂 Importar instalador al proyecto Unity** |
| 48 | + > - Puede hacer doble clic en el archivo - Unity lo abrirá |
| 49 | + > - O: Puede abrir Unity Editor primero, luego hacer clic en `Assets/Import Package/Custom Package`, luego elegir el archivo |
| 50 | +
|
| 51 | +### Opción 2 - OpenUPM-CLI |
| 52 | + |
| 53 | +- [⬇️ Instalar OpenUPM-CLI](https://github.com/openupm/openupm-cli#installation) |
| 54 | +- 📟 Abrir línea de comandos en la carpeta del proyecto Unity |
| 55 | + |
| 56 | +```bash |
| 57 | +openupm add extensions.unity.theme |
| 58 | +``` |
| 59 | + |
| 60 | +### Opción 3 - Asset Store |
| 61 | + |
| 62 | +- **[▶️ Abrir Asset Store](https://u3d.as/3DQp)** |
| 63 | + |
| 64 | +--- |
| 65 | + |
| 66 | +# Uso |
| 67 | + |
| 68 | +- Ir a `Window/Unity-Theme` |
| 69 | +- Personalizar paletas de colores como desees |
| 70 | +- Agregar componentes `ColorBinder` al GameObject de destino |
| 71 | + |
| 72 | +### Vinculador de Color |
| 73 | + |
| 74 | +Un componente que vincula un color a un objetivo específico, como `Image`, `SpriteRenderer`, `TextMeshPro`, o cualquier otra cosa. |
| 75 | + |
| 76 | +Hay una lista de vinculadores de color incorporados: |
| 77 | + |
| 78 | +- ✔️ Light |
| 79 | +- ✔️ Image |
| 80 | +- ✔️ Button |
| 81 | +- ✔️ Shadow |
| 82 | +- ✔️ Toggle |
| 83 | +- ✔️ Outline |
| 84 | +- ✔️ Renderer |
| 85 | +- ✔️ Selectable |
| 86 | +- ✔️ TextMeshPro |
| 87 | +- ✔️ LineRenderer |
| 88 | +- ✔️ MeshRenderer |
| 89 | +- ✔️ SpriteRenderer |
| 90 | +- ✔️ SkinnedMeshRenderer |
| 91 | +- ✔️ SpriteShapeRenderer |
| 92 | + |
| 93 | + |
| 94 | + |
| 95 | +### Paletas de colores |
| 96 | + |
| 97 | +Modifica paletas, respuesta instantánea con todos los GameObjects conectados. |
| 98 | + |
| 99 | + |
| 100 | + |
| 101 | +## API de C# |
| 102 | + |
| 103 | +### Colores |
| 104 | + |
| 105 | +```csharp |
| 106 | +using Unity.Theme; |
| 107 | + |
| 108 | +Theme.Instance.AddColor("Primary", "#6750A4"); |
| 109 | +Theme.Instance.AddColor("Primary", Color.white); |
| 110 | + |
| 111 | +Theme.Instance.SetColor("Primary", "#6750A4"); |
| 112 | +Theme.Instance.SetColor("Primary", Color.white); |
| 113 | + |
| 114 | +Theme.Instance.SetOrAddColor("Primary", "#6750A4"); |
| 115 | +Theme.Instance.SetOrAddColor("Primary", Color.white); |
| 116 | + |
| 117 | +Theme.Instance.RemoveColorByName("Primary"); |
| 118 | +Theme.Instance.RemoveColor(colorData); |
| 119 | +Theme.Instance.RemoveAllColors(); |
| 120 | +``` |
| 121 | + |
| 122 | +### Temas |
| 123 | + |
| 124 | +```csharp |
| 125 | +using Unity.Theme; |
| 126 | + |
| 127 | +Theme.Instance.AddTheme("Light"); |
| 128 | +Theme.Instance.SetOrAddTheme("Light"); |
| 129 | + |
| 130 | +Theme.Instance.CurrentThemeName = "Light"; |
| 131 | +Theme.Instance.CurrentThemeIndex = 0; |
| 132 | + |
| 133 | +Theme.Instance.RemoveTheme("Light"); |
| 134 | +Theme.Instance.RemoveAllThemes(); |
| 135 | +``` |
| 136 | + |
| 137 | +### Crear un `ColorBinder` personalizado |
| 138 | + |
| 139 | +Si necesita vincular color a otra cosa, puede extender desde `BaseColorBinder` como se indica a continuación. |
| 140 | + |
| 141 | +```C# |
| 142 | +using UnityEngine; |
| 143 | +using TMPro; |
| 144 | + |
| 145 | +namespace Unity.Theme.Binders |
| 146 | +{ |
| 147 | + [AddComponentMenu("Theme/TextMeshPro Color Binder")] |
| 148 | + public class TextMeshProColorBinder : GenericColorBinder<TextMeshProUGUI> |
| 149 | + { |
| 150 | + protected override void SetColor(TextMeshProUGUI target, Color color) |
| 151 | + => target.color = color; |
| 152 | + |
| 153 | + protected override Color? GetColor(TextMeshProUGUI target) |
| 154 | + => target.color; |
| 155 | + } |
| 156 | +} |
| 157 | +``` |
| 158 | + |
| 159 | +## Otros |
| 160 | + |
| 161 | +- **[Constructor de paleta de colores](https://m3.material.io/theme-builder#/custom)** de Material Design V3 de Google |
| 162 | + |
| 163 | +--- |
| 164 | + |
| 165 | +## Migración desde la versión `2.x.x` |
| 166 | + |
| 167 | +La versión `3.x.x` o más reciente tiene una estructura de base de datos diferente, por lo que necesita migrar sus datos manualmente si desea mantener los vinculadores existentes conectados al color correcto. Los vinculadores utilizan GUIDs para conectarse a los colores. |
| 168 | + |
| 169 | +> ❗❗❗**Por favor, siga el orden exacto de los pasos** |
| 170 | +
|
| 171 | +### Paso 1 |
| 172 | + |
| 173 | +Cerrar el proyecto Unity para evitar cualquier pérdida de datos. |
| 174 | + |
| 175 | +### Paso 2 - copia de seguridad |
| 176 | + |
| 177 | +- Hacer una copia de seguridad de `Assets/Resources/Unity-Theme Database.asset`, colocarla fuera del proyecto. |
| 178 | +- Hacer una captura de pantalla de los colores en cada tema para reproducirlos más tarde con el selector de color. |
| 179 | + |
| 180 | +### Paso 3 - plantilla de base de datos |
| 181 | + |
| 182 | +- Descargar [Unity-Theme-Database.json](https://raw.githubusercontent.com/IvanMurzak/Unity-Theme/refs/heads/main/Assets/Resources/Unity-Theme-Database.json). |
| 183 | +- Guardarlo en `Assets/Resources/Unity-Theme-Database.json`. |
| 184 | +- Usarlo como plantilla. Siéntase libre de eliminar todos los colores existentes si lo desea. |
| 185 | + |
| 186 | +### Paso 4 - migración de datos |
| 187 | + |
| 188 | +**Necesita copiar los GUIDs** desde `Assets/Resources/Unity-Theme Database.asset` a `Assets/Resources/Unity-Theme-Database.json`. Para hacerlo, consulte los ejemplos a continuación. Puede ver cuál es el formato de datos de las bases de datos antiguas y nuevas, y cómo copiar los GUIDs. Puede ignorar el color por ahora, es más fácil cambiar los valores de color más tarde usando la herramienta de selector de color y la captura de pantalla de la paleta de colores antigua. |
| 189 | + |
| 190 | +#### Ejemplo de `Assets/Resources/Unity-Theme Database.asset` - archivo antiguo (origen) |
| 191 | + |
| 192 | +Observe el `guid: 6b934efb-0b9b-42fd-82fd-7a0dbd1de53c`, el archivo lo contiene 3 veces, dependiendo de su configuración. Necesitará copiar el guid al archivo `Unity-Theme-Database.json`. |
| 193 | + |
| 194 | +```yaml |
| 195 | + colors: |
| 196 | + - guid: 6b934efb-0b9b-42fd-82fd-7a0dbd1de53c |
| 197 | + name: Primary |
| 198 | + - guid: 520b0288-c5e4-4106-95ae-095ad2dcceb8 |
| 199 | + name: Primary Text |
| 200 | + - guid: 465741bc-25d8-4722-a981-7e4a18074d83 |
| 201 | + name: Primary Container |
| 202 | + themes: |
| 203 | + - guid: 6d1fce4e-1938-4d6d-93b0-b4b9f6497293 |
| 204 | + expanded: 1 |
| 205 | + themeName: Light |
| 206 | + colors: |
| 207 | + - guid: 6b934efb-0b9b-42fd-82fd-7a0dbd1de53c |
| 208 | + color: {r: 0.40392157, g: 0.3137255, b: 0.6431373, a: 1} |
| 209 | + - guid: 520b0288-c5e4-4106-95ae-095ad2dcceb8 |
| 210 | + color: {r: 1, g: 1, b: 1, a: 1} |
| 211 | + - guid: 465741bc-25d8-4722-a981-7e4a18074d83 |
| 212 | + color: {r: 0.91764706, g: 0.8666667, b: 1, a: 1} |
| 213 | + - guid: 54c71f36-6023-4d84-bce7-c8192cf7ba40 |
| 214 | + expanded: 1 |
| 215 | + themeName: Dark |
| 216 | + colors: |
| 217 | + - guid: 6b934efb-0b9b-42fd-82fd-7a0dbd1de53c |
| 218 | + color: {r: 0, g: 0.4784314, b: 1, a: 1} |
| 219 | + - guid: 520b0288-c5e4-4106-95ae-095ad2dcceb8 |
| 220 | + color: {r: 1, g: 1, b: 1, a: 1} |
| 221 | + - guid: 465741bc-25d8-4722-a981-7e4a18074d83 |
| 222 | + color: {r: 0.15294118, g: 0.15294118, b: 0.15686275, a: 1} |
| 223 | +``` |
| 224 | +
|
| 225 | +### Ejemplo de `Assets/Resources/Unity-Theme-Database.json` - archivo nuevo (destino) |
| 226 | + |
| 227 | +Este es el archivo que necesita crear al final del proceso de migración. |
| 228 | +Cuando termine, es posible que deba cerrar y abrir el proyecto Unity para permitir que Unity-Theme recargue los datos. |
| 229 | + |
| 230 | +```json |
| 231 | +{ |
| 232 | + "debugLevel": 2, |
| 233 | + "currentThemeIndex": 1, |
| 234 | + "colors": [ |
| 235 | + { "guid": "6b934efb-0b9b-42fd-82fd-7a0dbd1de53c", "name": "Primary" }, |
| 236 | + { "guid": "520b0288-c5e4-4106-95ae-095ad2dcceb8", "name": "Primary Text" }, |
| 237 | + { "guid": "465741bc-25d8-4722-a981-7e4a18074d83", "name": "Primary Container" } |
| 238 | + ], |
| 239 | + "themes": [ |
| 240 | + { |
| 241 | + "guid": "4cfe4185-bc3e-4247-969f-1da1d3f2bdec", |
| 242 | + "expanded": true, |
| 243 | + "themeName": "Light", |
| 244 | + "colors": [ |
| 245 | + { "guid": "6b934efb-0b9b-42fd-82fd-7a0dbd1de53c", "colorHex": "#6750A4FF" }, |
| 246 | + { "guid": "520b0288-c5e4-4106-95ae-095ad2dcceb8", "colorHex": "#FFFFFFFF" }, |
| 247 | + { "guid": "465741bc-25d8-4722-a981-7e4a18074d83", "colorHex": "#EADDFFFF" } |
| 248 | + ] |
| 249 | + }, |
| 250 | + { |
| 251 | + "guid": "dca52c83-4f79-4fee-854e-0defe9ccbe07", |
| 252 | + "expanded": true, |
| 253 | + "themeName": "Dark", |
| 254 | + "colors": [ |
| 255 | + { "guid": "6b934efb-0b9b-42fd-82fd-7a0dbd1de53c", "colorHex": "#007AFFFF" }, |
| 256 | + { "guid": "520b0288-c5e4-4106-95ae-095ad2dcceb8", "colorHex": "#FFFFFFFF" }, |
| 257 | + { "guid": "465741bc-25d8-4722-a981-7e4a18074d83", "colorHex": "#272728FF" } |
| 258 | + ] |
| 259 | + } |
| 260 | + ] |
| 261 | +} |
| 262 | +``` |
| 263 | + |
| 264 | +### Paso 5 - actualización del paquete |
| 265 | + |
| 266 | +- Eliminar Unity-Theme `2.x.x` del proyecto mientras Unity está cerrado |
| 267 | + |
| 268 | +```bash |
| 269 | +openupm remove extensions.unity.theme |
| 270 | +``` |
| 271 | + |
| 272 | +- Instalar Unity-Theme más reciente |
| 273 | + |
| 274 | +```bash |
| 275 | +openupm add extensions.unity.theme |
| 276 | +``` |
| 277 | + |
| 278 | +### Paso 6 - limpieza |
| 279 | + |
| 280 | +- Eliminar el archivo `Assets/Resources/Unity-Theme Database.asset` (original y copia). |
| 281 | +- ✅ migración completada, ¡bien hecho! |
0 commit comments