Con este tutorial aprenderemos a crear de forma sencilla nuestras propias texturas para, más tarde, crear ondas para el XMB. Lo primero que tendremos que tener en cuenta, es que deberemos tener unas nociones mínimas de Photoshop (u otro programa de edición de imagenes que trabaje con archivos ".tga" y ".psd"). Este tutorial NO es válido para crear ondas 3D ni con efectos de tunel y demás.

Lo primero de todo, gracias a kytu, por iluminarme y darme los conceptos básicos para crear las texturas y las ondas.

Qué necesito:

• Archivo ".psd" modificable. Templates.psd.
• Editor de imagenes que trabaje con archivos ".tga" y ".psd" como el Photoshop.
• TGA Wave Creator. Para crear las ondas a partir de nuestra nueva textura.

Toma de contacto

Primero aprenderemos a saber de qué va la movida de crear ondas y demás, para así poder entender mejor porqué pasa esto y porqué no pasa lo otro. Además, si entendemos porque las cosas son como son, podremos investigar por nuestra propia cuenta y crear cosas realmente espectaculares.

Tamaño y formato de la textura:

Lo primero que deberemos saber, es que las texturas de las ondas se componen de una imagen de fondo negro, cuyo tamaño es 128x128. Lo que pintemos en esta imagen se representará (de la forma que la PSP buenamente pueda) como ondas. Aunque la imagen sea de 128x128, deberemos imaginarnos un marco interior en esa imagen de 11x14 pixels, es decir, que podremos pintar "lo que queramos" dentro de la imagen, pero nunca más cerca del borde que 11 pixels por los lados y 14 por arriba y abajo. No os preocupeis, el archivo "Templates.psd" ya trae una capa que nos crea el marco.

Los colores de la textura deberán ser indexados y no sobrepasar los 256 colores. Se guardará como archivo ".tga" y su tamaño deberá ser exactamente de 16,7Kb (17.196 Bytes).

Número de ondas:

Lo segundo que deberemos saber, es el número de ondas que podemos hacer. En un principio, diremos que la PSP solo es capaz de reproducir 2 o 4 ondas independientes. Pongamos el ejemplo más sencillo de todos. Si pintamos una linea, la PSP reproducirá 2 ondas que se moverán independientemente la una de la otra. Si pinto 4 lineas paralelas, la PSP reproducirá 8 ondas, pero se comportarán como 2, es decir, 4 ondas se moverán igual y al mismo tiempo, y las otras cuatro, diferentes a las 4 primeras pero iguales entre si. Espero que se entienda, pero no os preocupeis, en cuanto "jugueis" un poquito con esto lo entendereis enseguida. Las lineas que pintemos, deberán estar pintadas en horizontal "______". Si las dibujamos en diagonal, dependiendo de la inclinación se difuminarán/distorsionarán más o menos, si las ponemos en vertical "|", saldrán unas cosas un tanto raras :P.

Nos quedamos con que pintamos tan solo 1 linea. Resulta que la PSP nos muestra 2 ondas. ¿Cómo podemos hacer para que la PSP nos reproduzca 4 ondas?. Lo que deberemos hacer es, en vez de pintar una linea, pintaremos un circulo. De esta forma, la PSP nos reproducirá 4 ondas independientes entre si (2 arriba y 4 abajo). Lo mismo que pasaba pintando solo una linea, pasa con los circulos. Si pintamos 1 circulo y dentro de este otro y así hasta tener 4 circulos. La PSP nos reproducirá 16 ondas que se organizarán en 4 grupos de 4, moviendose las ondas de cada grupo iguales entre si, y diferente entre las ondas de los otros grupos. Repito, cuando investigueis un poco lo entendereis mejor ;).

Colocando las ondas:

Algo importante a tener en cuenta a la hora de hacer las ondas, es el sitio en el que queremos que aparezcan. Si más arriba o más abajo de la pantalla. Dependiendo de si pintamos lineas o circulos (creamos 2 o 4 ondas) la colocación se podrá variar de distintas formas. Esto servirá tambien, para cuando hagamos ondas de dos colores, saber donde pintar las lineas o circulos para que queden en los lados que deseemos. Seguidamente veréis que es realmente sencillo.

Lineas (2 ondas): Para poner las ondas más arriba o más abajo, bastará con pintar nuestra linea horizontal más arriba o más abajo. Si, tan sencillo como eso.

Circulos (4 ondas): Con los circulos no es más complicado que con las lineas. Tan solo debemos imaginarnos que el centro del circulo es el centro de la pantalla. Cuanto más pequeño sea el radio del circulo, las ondas (tanto las 2 de arriba como las 2 de abajo) se acercarán más al centro, si el radio del circulo es mayor, las ondas se separarán.

Creando nuestra primera textura

Bueno, despues de haber aumentando nuestra cultura y, ahora que ya tenemos información suficiente y sabemos, más o menos, porque pasan las cosas y porqué de ese modo, vamos a ir ya por fin a darle caña a las ondas propiamente dicho.

Lo primero que podemos hacer, a modo de prueba inicial, es crear una imagen "ondas.bmp" con el MS Paint mismo lo más sencilla posible. Como muestra, yo he creado una de 2 lineas, una de cada color:

Como veis, según lo que hemos aprendido más arriba, las ondas resultantes de esta imagen deberán ser 4 ondas (2 blancas y 2 azules) que se comportarán como 2 ondas blanquiazules. Esto, amigos, deberíais ser capaces de saberlo por vuestra propia cuenta ;).

Una vez tenemos la imagen en formato ".bmp" (recordad que podéis utilizar directamente el photoshop para crear las lineas o circulos), la abrimos con el photoshop (o programa similar). Ahora, abrimos también el archivo "Templates.psd". Fijaros en las capas que tiene este archivo:

Nota: Si no veis las capas, pulsamos F7.

Aquí podemos ver que el "Templates.psd" tiene varias capas, nos centraremos en la que se llama "Drawing" que está seleccionada por defecto. Esta, será la capa sobre la que trabajaremos y sobre la que podremos pintar.

Como ya tenemos una imagen previamente pintada con el MS Paint, bastará con seleccionar TODA la imagen "ondas.bmp" (Control+A) y con la herramienta "Mover" la llevamos hasta la ventana de "Templates.psd". Veréis que la imagen se ha colocado en la capa "Drawing", la cuadramos y listos.

Si os fijais, veréis que en la ventana de la imagen completa (no en las capas), las lineas no llegan hasta el borde, ha aparecido un marco negro (os acordais, no?). La cosa nos debería quedar algo parecida a esto:

Ahora, pinchamos en "Archivo" => "Guardar como..." y elegimos destino. En el campo "Nombre" ponemos el nombre que nos apetezca, por ejemplo "ondas" y en el campo "Tipo" escogemos "Targa (*.TGA;*.VDA;*.ICB;*.VST)". Finalmente, pinchamos en "Guardar". Ahora, nos aparecerá una ventana con opciones de resolución, escogemos "24 bits/pixel" y pinchamos en "Aceptar".

Bien, ya tenemos nuestra textura practicamente acabada. Solo nos falta que cumpla los requisitos de color y tamaño. Para ello, abrimos nuestro archivo "ondas.tga" con el Photoshop. Nos dirigimos a "Imagen" => "Modo" y seleccionamos "Color indexado..." nos aparecerá la siguiente pantalla:

En el primer cajetín seleccionamos "Local (Selectiva)" y el resto lo dejamos tal cual. Nos debe quedar así:

Finalmente pinchamos en "Ok"

Ya solo nos queda guardar esta "nueva" imagen. "Archivo" => "Guardar como..." y elegimos destino. En "Tipo" volvemos a elegir "Targa (*.TGA;*.VDA;*.ICB;*.VST)" y en nombre MUY IMPORTANTE le ponemos uno DISTINTO al que tenia (por ejemplo "ondas2"), es decir, crearemos un NUEVO archivo. NO SUSTITUR!!!

Bien, ya hemos acabado! Podemos cerrar el Photoshop y nos aseguramos que el nuevo archivo tiene un tamaño exacto de 16,7Kb. Si todo es correcto, ya tenemos la textura preparada para crear nuestras ondas con el TGA Wave Creator.

Aquí, tenemos el resultado de nuestras nuevas ondas partiendo de la imagen inicial "ondas.bmp".

Nota: Las imagenes que creemos, las podremos pasar por filtros y podremos ponerle efectos que queramos con el photoshop. Pero no es conveniente "pintar" demasiado o la textura será INCOMPATIBLE.