¿Cómo hacer tú mismo la piel de Qianqianjingting?

Tutorial completo sobre cómo crear máscaras para Qianqianjingting

Qianqianjingting (en adelante, "Qianqian") ha admitido la función de cambio de máscara desde la versión 2.0, y ahora hay muchas máscaras. Es comparable a Winamp, pero debido a que Qianqian actualmente no admite scripts ni formatos de imagen png, el efecto no se puede comparar con la máscara moderna de Winamp o la máscara de Windows Media Player. Sin embargo, la máscara de Qianqian es mucho más simple de hacer. No requiere ningún conocimiento de programación ni tecnología compleja. Siempre que domines las operaciones básicas de edición de imágenes (Photoshop) y tengas suficiente paciencia (Paciente), podrás crear máscaras hermosas. En el siguiente tutorial, creo que también podrás diseñar una máscara única y exquisita para Qianqian.

1. Estructura del skin

El skin de Qianqian se encuentra en la carpeta Skin en el directorio de instalación. La extensión puede ser .skn o .zip. Todos son archivos comprimidos en formato zip. Para el primero, primero puede cambiar la extensión de .skn a .zip (para mostrar la extensión del archivo en el sistema, haga clic en "Herramientas" - "Opciones de carpeta" - "Ver" y luego cambie "Ocultar tipos de archivos conocidos". elimine la pequeña marca de verificación delante de la extensión) y luego descomprímalo en una carpeta separada. Ingrese a la carpeta y encontrará que contiene muchas imágenes en formato bmp y varios archivos xml, el más importante de los cuales es Skin Las funciones de. el archivo xml .xml y otros archivos xml se mencionarán más adelante.

La imagen bmp es el fondo y la imagen del botón de cada ventana, y Skin.xml es el archivo de configuración, que define la información básica de la máscara, la posición y el tamaño de la ventana y el botón, etc. Es un archivo basado en formato XML. Se puede abrir directamente con el Bloc de notas integrado del sistema u otras herramientas de edición de texto. Después de abrirlo, podemos ver su estructura básica:

...

. ..

...

...

...

Un análisis cuidadoso muestra que cada línea comienza con "<" y termina con ">", con varios elementos y Parámetros, se pueden dividir en dos tipos. La primera estructura es como:

Elementos. como XXX se denominan elementos, elementos como AAA y BBB se denominan atributos y aaa y bbb son los valores de los parámetros de los atributos.

Aquí, AAA y BBB son atributos de XXX, que se utilizan para modificar XXX. Por ejemplo, el atributo de posición se utiliza para definir la posición del elemento y el atributo de imagen se utiliza para definir el mapa de bits del elemento.

En este tipo, y deben usarse al mismo tiempo para formar un bucle cerrado. Es decir, si usas al principio, debes usar. cerrado, todos los elementos incluidos en el medio pertenecen a este elemento. Los tipos principales que utilizan este tipo son la ventana principal (es decir, el elemento player_window), la ventana del ecualizador (es decir, el elemento ecualizador_ventana), la ventana de visualización de letras (es decir, el elemento lyric_window), la ventana de lista de reproducción (es decir, el elemento playlist_window) y la ventana de modo mini (es decir, el elemento mini_window) Hay 5 ventanas básicas, y todas estas 5 ventanas están incluidas entre y .

La segunda estructura es como:

De hecho, esta es una abreviatura, es decir, , son los elementos de unidad más básicos, que se incluyen en cada ventana básica y se utilizan para varios botones, barras de arrastre, etc.

Con respecto al formato de los archivos XML, puede consultar los documentos relevantes. Lo que quiero mencionar aquí es que el orden de cada elemento y atributo no tiene ningún orden en particular y el número de espacios no importa. , siempre que contenga y sea Solo asegúrese de no cometer errores en la ubicación incluida y el formato básico (por ejemplo, los valores de los parámetros de atributo deben estar entre comillas dobles en inglés, etc.), pero para facilitar Al leer, editar y modificar, es mejor escribir estrictamente de acuerdo con el formato estándar. Analicemos Skin.xml en detalle, la primera línea:

Esta línea se utiliza para definir los atributos básicos y la información del skin, donde versión="2" se refiere al número de versión del skin y no No es necesario cambiar los siguientes atributos de nombre, autor, URL y correo electrónico que se refieren al nombre de la máscara, el nombre del autor, la dirección de la página de inicio del autor y la dirección de correo electrónico del autor, respectivamente. Esta información se mostrará en la ventana de la máscara de la aplicación. Opciones de Qianqian; y el siguiente color_transparente es un atributo muy importante, es decir, "color transparente". Después de definir el color transparente, las partes de la piel con este color se mostrarán como transparentes. Debido a que las imágenes en formato bmp no admiten transparencia, para crear ventanas y botones con fondo irregular, es necesario utilizar colores transparentes para lograrlo. El método consiste en rellenar las partes que se van a mostrar como transparentes con un color transparente definido. Una máscara solo puede definir un color transparente fijo, que está representado por el código RGB del color. Por ejemplo, el código RGB de púrpura puro es #FF00FF. El código RGB se puede ver en herramientas como Photoshop. (El color transparente debe intentar elegir un color con una gran diferencia en el tono de la piel, de lo contrario duplicará fácilmente el color de la piel, provocando que las partes necesarias sean transparentes. Generalmente, el morado puro será suficiente)

Siguiente Es la configuración de 5 ventanas básicas. La ventana del modo mini se explicará en detalle más adelante. En Skin.xml, primero debe configurar los ajustes relevantes de las cuatro subventanas: la ventana principal, la ventana de visualización de letras, la ventana del ecualizador y la ventana de lista de reproducción, y luego configurar los botones en cada ventana respectivamente.

2. Introducción a los parámetros de atributos

El siguiente es el diagrama correspondiente y la descripción de atributos de los elementos en cada ventana:

Posición: Esta es la más básica. atributo entre los elementos. Uno, utilizado para definir la posición y el tamaño del fondo de la ventana y los botones. El formato del valor del parámetro es "a, b, c, d". elemento pero también determina su tamaño, entre los cuales (a, b) es la coordenada de la esquina superior izquierda, (c, d) es la coordenada de la esquina inferior derecha, c-a es la longitud, d-b es la altura, el origen de las coordenadas se pueden dividir en dos situaciones: si es la posición de las tres subventanas del programa de letras, ecualizador y lista de reproducción, la esquina superior izquierda de la ventana principal se usa como origen de sus coordenadas; la posición de los botones dentro de cada ventana, la esquina superior izquierda de la ventana correspondiente se utiliza como origen de las coordenadas. Por ejemplo, el botón "Cerrar" en la ventana de visualización de letras es la imagen de fondo de la visualización de letras. es el origen, ¡y así sucesivamente para el resto!

En particular: ① El elemento de la barra de desplazamiento en la lista de reproducción no necesita definir el atributo de posición, y su posición se fijará automáticamente en el lado derecho de la lista de reproducción ② Los elementos de progreso y volumen en la lista de reproducción principal; ventana y ventana del ecualizador Los atributos de posición de los elementos de equilibrio, sonido envolvente y preamplificador representan las coordenadas del rango en el que se puede mover el control deslizante ③ Los atributos de posición del elemento de la lista de reproducción en la ventana del instrumento de la lista de reproducción y el elemento de letra en la letra; Mostrar ventana de instrumento representa la lista de reproducción y el rango de visualización, cuando la ventana de lista de reproducción y la ventana de visualización de letras cambian de tamaño, estos dos elementos cambiarán de tamaño automáticamente, pero la distancia entre sus cuatro lados y los cuatro lados de la ventana se refleja en esta posición. ;

resize_rect: Un atributo único de las ventanas de visualización de letras y lista de reproducción. Se utiliza para definir las partes extensibles de estas dos ventanas. Su formato de parámetro es el mismo que la posición, lo que significa que cuando el tamaño de la ventana. se cambia, solo se estirará la parte dentro del marco rectangular y la parte fuera de este rango no cambiará. También hay un atributo resize_tile que se usa en consecuencia. Su valor de parámetro puede ser 0 o 1, donde 0 significa que el estiramiento. El método se usa al cambiar el tamaño de la ventana. , 1 significa que se usa el método en mosaico, este atributo se puede omitir, es decir, se usa el valor predeterminado 0

Además, se muestran las ventanas de letras y listas de reproducción; También tiene un elemento opcional: título, que se puede usar cuando hay un Úselo cuando sea necesario (como mantener el título centrado al cambiar el tamaño de la ventana, etc.), el formato es el siguiente: