Aseprite: Cómo hacer un tema

Hola y bienvenidos a mi guía sobre cómo ajustar un tema en aseprite. En Aseprite Themes determina el aspecto del programa usando este tutorial podrás personalizar aseprite para tu estilo. Los temas no afectan los colores utilizados en el lienzo, como el tablero de ajedrez que indica el fondo transparente y la cuadrícula, que se pueden ajustar en sus propias secciones en el menú Preferencias. Necesitará un programa como Winrar para hacer archivos Zip. Soy un tonto en cualquier tipo de codificación, por lo que esto es principalmente un tipo de tutorial de "reemplazar este número con un número diferente para este efecto", nada demasiado loco.
———————————————————————-

De todos modos, primero para crear su propio tema, simplemente haremos una copia del tema aseprite predeterminado. La forma más sencilla de hacer esto es navegar al menú Temas (Editar->Preferencias->Temas), luego seleccione "predeterminado" y haga clic en Abrir carpeta.
———————————————————————-

Copie todos los archivos y luego navegue a algún lugar accesible como documentos/descargas/imágenes. Allí creará su propia carpeta, puede nombrarla como desee, aunque recomiendo adherirse al esquema de nombres que parece tener aseprite ("nombre del tema-tema").
———————————————————————-

Los archivos son los siguientes: el archivo "LICENCIA" es un archivo de texto con el que realmente no necesita meterse a menos que esté planeando distribuir/vender su tema probablemente. El archivo del "paquete" es algo así como información del proyecto sobre su tema. El archivo "sheet.aseprite-data" es un archivo que genera aseprite, creo que no necesita meterse con esto en absoluto. El archivo de "hoja" es una imagen de todos los íconos/elementos de la interfaz de usuario, ¡todo aquí se puede volver a colorear o redibujar completamente a su gusto! Luego, por último, el archivo de "tema" es lo que usa para ajustar colores, tamaños, fuentes, tamaño de iconos/elementos de interfaz de usuario, la ubicación de iconos/elementos de interfaz de usuario en el archivo de "hoja" y sus nombres, y estoy seguro de que mucho más. Primero, debemos centrarnos en el archivo "paquete" para comenzar. Selecciónelo, luego haga clic con el botón derecho y Abrir con el Bloc de notas o un equivalente. (sugerencia especial, puede ajustar el tamaño del texto en el Bloc de notas manteniendo presionada la tecla Ctrl y desplazándose)
———————————————————————-

Se encontrará con algún código, pero no demasiado afortunadamente. Al cambiar el texto, asegúrese de no eliminar las comas y las comillas. Afortunadamente, estamos cambiando una copia del archivo predeterminado, por lo que el archivo predeterminado real siempre debería estar allí para recurrir. De todos modos, primero querrá cambiar el nombre de "aseprite-theme" al nombre de la carpeta en la que se encuentran estos archivos. Luego, "Aseprite Default Theme" al nombre de su tema. También puede ajustar el resto de las cosas, pero en su mayoría solo son importantes si está distribuyendo o compartiendo su tema con otros. Por último, verá un "predeterminado" junto a las palabras "id" y "ruta", esto es algo que debe cambiar de nombre, cámbielo por el nombre de su tema. Luego guarde el archivo y salga.
———————————————————————-

En cualquier momento, ahora puede comprimir la carpeta del tema que creó en un zip usando winrar y agregarlo a aseprite como una nueva extensión/tema. Recomiendo probar tu tema con mucha frecuencia mientras lo creas, lo que puede ser un fastidio. Pero mejor que ajustar algo mal y no saber qué era. Entonces, antes de mostrar cómo ajustar visualmente su tema, le mostraré cómo agregar su tema a aseprite para que pueda ver cómo se ve mientras lo hace más adelante. Primero deberá convertirlo en un ZIP, para comprimirlo simplemente haga clic derecho en la carpeta con winrar instalado y haga clic en "Agregar al archivo..." todo lo que debe hacer es seleccionar ZIP en formato de archivo. Esto debería hacer una copia ZIP de su proyecto. No necesita preocuparse por el nombre del ZIP, por lo que incluso si se llama mytheme(19645) estará bien debido a lo que ajustamos en el archivo "paquete".
———————————————————————-

Después de eso, para instalar un tema en aseprite, vaya al menú Extensiones (Editar-> Preferencias-> Extensiones) y haga clic en Agregar extensión. Luego navegue a la carpeta fácil de ubicar en la que colocó su carpeta zip/proyecto y haga doble clic en su ZIP para agregarlo como una extensión. Luego, para aplicar su tema, cambie al menú "Tema" y haga doble clic en él de la lista (el doble clic es muy importante si selecciona el tema y presiona Aceptar o Aplicar no cambiará el tema, esta pequeña peculiaridad me hizo creo que no estaba haciendo mi propio tema correctamente durante una hora). Luego recuerda volver al menú de extensiones y desinstalar tu tema si no está listo.
———————————————————————-

Ahora deberías estar listo para cambiar las cosas de tu tema. Vuelve a la versión descomprimida de tu proyecto. Primero el archivo de "hoja", no abra este archivo en MS Paint ya que MS Paint no admite transparencia. ¡Querrás ajustar este archivo de forma automática, por supuesto! En primer lugar, notará muchas líneas que indican cortes (si no desea verlos, puede ir a ver->mostrar->Cortes). El creador de aseprite incluyó esto para nosotros y muestra el tamaño de los sprites para cada ícono/9splice/ect. Trate de mantenerse dentro de los cuadros indicados por ellos para temas de cambio de color simples. También puede hacer su propia hoja de sprites y cuando lleguemos al archivo de "tema" puede redirigir las ubicaciones de lo que está reemplazando a esa imagen en lugar de a esta. Probablemente reconocerá la mayoría de los íconos aquí si ha usado mucho aseprite, busque cualquier cosa con bordes redondeados en la interfaz de usuario. Si tiene bordes redondeados, es probable que sea un empalme 9 y se indique en esta hoja. Tenga en cuenta que algunos de los colores tienen transparencias que podrían no verse bien en el tablero de ajedrez gris predeterminado de aseprite.
———————————————————————-

Aquí hay algunas imágenes incluidas para tener una idea de dónde podrían estar ubicados algunos de los 9 empalmes en la hoja. Hay un empalme 9 para los botones en un estado no presionado, sobre el que se pasa el mouse y presionado, así que tenlo en cuenta. Las barras de desplazamiento, las selecciones en los menús desplegables y los cuadros de entrada también tienen sus propios colores. Para qué se usa exactamente cada empalme está en el archivo de "tema" si desea ajustar los colores desde una dirección más estilo programador.
———————————————————————-

 

Puede ser difícil adivinar qué va en qué lugar de la hoja de sprites, por lo que hacer que las cosas tengan un color impactante puede ayudar a solucionar bastantes problemas. También puede consultar la sección Partes del archivo "Tema" para encontrar los nombres y las coordenadas x/y de la esquina superior izquierda de cada sprite, pero los nombres no siempre son muy claros sobre qué va a dónde en aseprite.
———————————————————————-

El archivo de "tema" se abre de manera similar al archivo de "paquete". Seleccionas y abres en el Bloc de notas. Este archivo es donde realiza todos los demás ajustes y puede ser muy abrumador. Haré todo lo posible para romperlo. Primero, puede ajustar el nombre de su tema (para fines organizativos) y la escala de pantalla y la escala de la interfaz de usuario. Creo que la escala de pantalla ajusta el lienzo y la escala de la interfaz de usuario ajusta la ventana de la interfaz de usuario. Lo que pones aquí solo se almacena como valores completos y luego se multiplica a la escala original... ejemplo: la escala de pantalla 1 se traduciría en un 100 % de aumento, la escala de pantalla 1.9 se traduciría en un 100 % de aumento, la escala de pantalla 2 se traduciría en un 200 % de aumento . No es excepcionalmente útil para el monitor promedio, pero probablemente sea útil si está usando un proyector mientras está acostado en la cama y demás. A continuación, otro lugar para deslizar su nombre como crédito por hacer este tema.
———————————————————————-

Luego la opción de cambiar la fuente utilizada en aseprite. Las opciones de fuentes predeterminadas para deslizar aquí son limitadas, si desea cambiar la fuente, navegue a la carpeta de fuentes en la carpeta de datos de aseprite (Aseprite\data\fonts) Allí verá 2 imágenes que muestran la fuente predeterminada personalizada de aseprite y un archivo llamado "fuentes". Al abrir el archivo de "fuentes" con el bloc de notas, se mostrarán las opciones predeterminadas para cambiar la fuente. Si no está en esta lista, no puede usarlo en aseprite. Si está decidido a crear su propia fuente, probablemente pueda hacer una copia de las hojas de sprites para la fuente personalizada de aseprite y usarlas como guía para crear una nueva fuente. No sé mucho sobre cómo hacer fuentes personalizadas, lo siento. Para agregar una fuente instalada existente a esta lista, simplemente copie y pegue la entrada Arial y reemplace "Arial" con el nombre de archivo de la fuente instalada en el archivo "fuentes" de su sistema operativo y luego escriba el nombre de la fuente en el archivo "tema". Asegúrese de reiniciar aseprite si instaló la fuente con aseprite abierto.
———————————————————————-

Lo siguiente son las dimensiones de los elementos de la interfaz de usuario en lo que creo que son píxeles. Los elementos de la interfaz de usuario están bastante bien etiquetados, por lo que deberían ser bastante fáciles de distinguir.
———————————————————————-

Después de eso, Colores. Seré honesto, es muy difícil decir qué va a dónde para mí. Probablemente llevará mucho tiempo ajustar esto. Lo que ve aquí es una lista de secciones de la interfaz de usuario a las que se les asigna un código de color hexadecimal.
———————————————————————-

Por suerte, puede averiguar fácilmente los códigos de color hexadecimales para los colores en aseprite y copiar los códigos hexadecimales desde allí a su archivo.
———————————————————————-

Aquí hay una lista de los colores predeterminados en el archivo para ayudar a visualizar qué colores podría intercambiar. Una cosa útil que encontré fue presionar ctrl + F para abrir el menú de búsqueda en el bloc de notas y buscar los colores hexadecimales exactos si quería decir cambiar todas las cosas que son blancas a negras y todas las cosas que son negras a blancas. Por último, obviamente hay un esquema de nombres y las áreas de la interfaz de usuario parecen estar agrupadas. Las caras son como el color de fondo para las secciones de la interfaz de usuario y las caras activas son, creo, partes en las que se puede hacer clic. El texto activo es texto en el que se puede hacer clic, la radio se refiere a los menús de la radio, creo, los "seleccionados" son elementos de interfaz de usuario obviamente seleccionados, se desplazan para obtener color cuando se pasa el mouse sobre ellos, etc.
———————————————————————-

Las partes son todos los iconos/elementos de la interfaz de usuario en el archivo de "hoja". Primero dará su coordenada x e y en la hoja de sprites donde comienza el icono, luego dará una altura y un ancho en píxeles para ese icono. Esto lo cambiarías si hicieras íconos más grandes o más pequeños. Los que tienen múltiples anchos y altos son íconos/elementos empalmados (como 9 empalmes), usted es la longitud de identificación de cada sección.
———————————————————————-

Por último está la sección de estilo. Esto es decidir qué elementos van a dónde de lo que ha definido en todas las demás secciones. Puede ser útil para averiguar hacia dónde se dirige un color o una parte. También puede ajustar aquí el relleno, la longitud del margen y la alineación del texto.