En esta guía lograremos pasar esto: a esto:
Requerimientos:
- Debes tener instalado el programa Paint.NET. Si no lo tienes, simplemente búscalo en Google
- Debes saber como usar un programa de edición de imágenes; tienes que haber usado por lo menos el Paint normal antes Saber usar la herramienta de selección, bote de pintura, copiar y pegar, etc.
- Tener un lugar de donde sacar sprites. Recomiendo Ace Attorney Spain (página en español bien completa, para facilitar la navegación) y Court-Records (la que uso, la más completa).
- Para cuando hayas terminado tu sprite, y la quieras mostrar en internet; necesitarás una cuenta en un servidor de imágenes. Recomiendo para sprites Imgur (la que uso), Fileden y Photobucket.
1. Fijar la base
2. Recoloreo¡Comenzemos! Al hacer una sprite, siempre comienzas con una base. Con "base", nos referimos a una sprite del juego (ejemplo, si vas a hacer una sprite que va a usar el cuerpo de Larry, tomarías la sprite de Larry como base). Hay varios caminos que se pueden tomar para poner tu base en la hoja Paint.NET (una animación, tomarle un pantallazo a la sprite y luego aislarla del resto de la pantalla...). El camino que tomaremos es el que recomiendo, pero antes un concepto:
Hoja de Sprite: Es una imagen que contiene todas las "frames" (o fotogramas) de las animaciones de un personaje, todo estático. En mi opinión, es práctico spritear a base de estas hojas ya que todas las frames están en una sola imagen, asi que por ejemplo, si le haces una modificación a una frame, se hará al resto de las frames en la hoja (si le cambias el color de piel a una frame utilizando el bote de pintura, puedes aplicar ese mismo cambio al resto de las frames de una vez).1.1) Consigue las hojas de sprite de los personajes que crees que vas a usar; y luego abre Paint.NET. Una vez hecho, abre la hoja de sprite de tu base con el icono de la carpeta con una flecha verde saliendo en la barra de herramientas.Spoiler : Ejemplo :1.2) Selecciona la herramienta "Varita Mágica" y haz las siguiente modificaciones en la barra que apareció: dale click al bombillo para cambiarlo a modo global (como has de saber, la varita mágica selecciona todo una sección que tenga el mismo color de forma continua. Al fijarlo en modo global, seleccionarás cualquier zona en toda la imagen que tenga el color que seleccionas Herramienta perfecta para quitar el fondo) y fija la tolerancia a 0%. Selecciona el fondo de la hoja de sprite y suprime, de esta forma tendrás un fondo transparente (todas las sprites en AA tienen el fondo transparente, asegúrate de que tus sprites siempre tengan el fondo transparente)Spoiler : Imagen :1.3) Con la herramienta seleccionar (cualquiera de las herramientas de seleccionar sirve, yo usé en rectángulo), selecciona la pose base del personaje (selecciona la pose que tenga los ojos abiertos y la boca cerrada, para evitar problemitas después). Cópiala. Dale a "nuevo", el ícono en la barra de herramientas que es una hoja con una cruz verde, y pon el ancho/alto de la imagen en 256x192 (este es el tamaño de todas las sprites en AA, ya que es el tamaño exacto de la pantalla de DS). Quita el fondo blanco de la nueva imagen y pega la base en ella. Alíneala más o menos en el centro y que toque el borde inferior del lienzo.Spoiler : Imagen :Spoiler : Imagen :
3. Frankenspriting"Recoloreo" consiste en, como obviamente indica el nombre, recolorear una sprite con un nuevo color, para de esa forma darle un toque original.Utilizando programas de edición de imágenes sencillos, recolorear puede ser un infierno, ya que tienes que recolorear tal color por uno nuevo en cada rincón en donde esté en la imagen manualmente. Sin embargo, y gracias a los dioses de Paint.NET, tenemos a nuestra disposición la opción "global" para el bote de pintura. ¿Recuerdas lo que expliqué antes del modo global para la varita mágica? ¿Cómo selecciona el color al que le diste click en todo lugar en donde aparezca en el lienzo? Bueno, aplica esa lógica al bote de pintura......... Si lo pensaste bien, entonces si! ¡El bote de pintura global te permite intercambiar el color al que le des click en todo lugar en donde aparezca en la imagen por el color que escojas! Este es el secreto; sin embargo, esto por si solo no te va ayudar, ya que tenemos que lidiar con la degradación de los colores en la sprite. Aquí vamos.Spoiler : Ejemplo :
Si le prestas atención a una sprite, verás como va iendo de un color más claro a más oscuro (ejem: va de un azul claro, a uno medio claro, a uno oscuro, hasta llegar a un muy oscuro azul que son los bordes).Sin embargo, hay ocasiones en las que puede haber un problema al recolorear con el método global del bote de pintura. Muchas sprites tienen un color en varias partes de su cuerpo, lo cual hace que esas partes también se recoloreen y queda mal (recolorear un negro del traje de alguien puede resultar cambiando de color un negro en su cabello).Spoiler : Imagen y resto de lección :La solución es el llamado-por-mi "Marco Contenedor de Pintura" Verás, Paint.NET tiene cierta regla. Cualquier trazo o cambio o lo que sea que hagas en el lienzo nada más se hará si está dentro del área que está seleccionada. Cuando recien abres un nuevo lienzo, todo el lienzo está seleccionado (o más precisamente dicho, nada está seleccionado, por lo tanto todo se registra). El truco consiste en encerrar con el "Selección con Lazo" la parte que quieres que se recoloree, de modo que todo lo que esté fuera del marco no se recoloree!Spoiler : Imagen de error :Muy bien, como ya tenemos las reglas y trucos claras, continuemos con nuestro Larry:Spoiler : Imagen :
2.1) Toma la paleta de colores de otro personaje (los colores de otro personaje, en pocas palabras) utilizando el "seleccionar color" (el gotero) para las distintas parte de tu sprite. Yo voy a cambiar la chaqueta de color con un blanco de Shadi. Como puedes ver, he marcado los distintos grados del color comenzando con 1, el más claro, y bajando.La idea es cambiar el 1 por el 1, 2 por 2, y asi sucesivamente. Sucede el problema de que se colorea el color de piel al cambiar el color de la chaqueta, asi que utilizaré el Marco Contenedor de Pintura para recolorear la chaqueta nada más También, Larry tiene un sexto grado en su chaqueta que decidí no cubrir con el color de Shadi. Asi que seleccione el color 5, le reste 10 en el V, y apliqué el nuevo color en 6Spoiler : Imagen :
2.2) Identifica los distintos tonos de los colores. En otras palabras, marca el "1", el "2", "3"... y esos distintos grados según su nivel de luminosidad.
2.3) Recolorea las partes finalmente. Yo decidí recolorear también la camisa de adentro (y le quité con el lápiz las raras caras que tenía) y el cabello (con el color de Edgeworth). ¡Nuestro resultado!¡Me alegra que hayas llegado tan lejos! Puede que se te dificulte el recoloreo al principio, pero todo va con la experiencia, irás mejorando conforme lo vayas haciendo Pero aquí llegamos spriters... Lo que en mi opinión es... LO MÁS VITAL.Spoiler : Resultado de Lección :
4. Emote/Frames Extra y Animación"Frankenspriting" consiste en ponerle a una sprite una parte de otra (ponerle encima al cuerpo de A, la cabeza de B).Frankenspriting es la clave para conseguir hacer sprites para personajes originales. No importa lo perfecto que sea tu recoloreo, al final sigue siendo el mismo personaje solo que con colores distintos. Aquí trabajaremos con capas. Este paso es intercambiable con el recoloreo (puedes primero recolorear todas las partes que vas a usar y luego unirlas, o unirlas y luego recoloreo. Yo personalmente las uno primero y luego las recoloreo )Spoiler : Ejemplo :
3.1) Abre en distintas imágenes las hojas de sprite que vas a usar. Luego haz los pasos de Fijar base (si es que no lo has hecho todavía).
3.2) Usando el borrador (arriba en la barra que apareció, dale click a la línea en zis-zag azul para deshabilitar el suavizado), separa las partes que vas a usar/reemplazar del resto del cuerpo.3.3) Una vez separadas, crea una nueva capa (en la ventana de capas, un rectángulo con una cruz verde) en la imagen base (en este caso, el ex-Larry). EN esa capa, pega la parte nueva (siempre que le añadas algo a una sprite, SIEMPRE ponlo en una capa diferente, facilita bastante la edición y evita problemas de transparencia). Por el momento, dejaremos la diferencia del color de piel para después.Spoiler : Imagen :NOTA: Al agregar partes, recuerda siempre unir las partes que no estén conectando con el lápiz y bote de pintura; y borrar partes que sobresalen de mala manera.Spoiler : Imagen :
¡Muy bien! Tenemos lo básico listo. Con esto ya puedes hacer poses extras de personajes. La verdad es que en cuanto a la dificultad de la ejecución, frankenspritear es fácil. El problema viene a continuación, ya que aquí tienes que usar tu creatividad Si quieres hacer personajes originales, aqui vamos!
Tenemos una cabeza y cuerpo diferentes, pero todavía no es original. Primero, vayamos con el cabello.
3.4) El cabello es una de las partes más fáciles de reconocer (reconocer a que personaje pertenece). Al hacer un personaje original, la idea es lograr que su base y todas las partes que usaste sean irreconocibles (no perfectamente irreconocibles, pero si al menos haces que el jugador dude para saber a quien pertenece, está aceptable ). En cuánto al cabello, un buen truco es combinar un estilo de cabello con otro.3.5) Ahora pasamos a la parte más importante para un personaje original. LA CARA.Spoiler : Imagen y siguiendo al personaje Larry :
Tienes que buscar cejas, ojos, nariz, boca y si quieres algún vello facial de otros personajes. El truco es buscar los que te parecen encajan bien con la idea que tienes en tu mente (si vas a hacer a un personaje alegre y confiado, tendrías que buscarte ojos abiertos como los de Apollo). Encuentra esos personajes, borra la zona alrededor de la parte que quieres sacar (si quieres los ojos, borra todo excepto los ojos con cuidado), y luego pégaselos a tu sprite!¡Pero no quiero terminar! Quiero hacerle más cambios al cuerpo Voy a cambiarle un brazo con el de otro personaje, recolorear la camisa y ponerle un logo de un Goomba xD También recoloreé el cuello para que finalmente fuera del mismo color de piel que la cabeza (que no se te olvide hacer esto siempre que añadas algo que muestra piel).Spoiler : Imagen :Y ahí lo tienes... Un personaje original, todo a base de otras sprites.Spoiler : Resultado de Lección :
Lo último que falta es lo de emotes extra!Emotes: Así llamaremos a las distintas poses de un personaje. La gran mayoría de los personajes en AA tienen distintas expresiones y poses en su repertorio:Frames: Si entendiste el concepto de las hojas de sprite, entonces ya has de entender esto, pero de todas maneras. Es cada una de las imágenes estáticas que al correr seguidas, crean una animación.Spoiler : Ejemplo :
Si has hecho correctamente los pasos anteriores, has de tener la imagen base de tu personaje a crear. Sin embargo, ésta se trata de una imagen estática, y es una sola pose. No está en condiciones para ponerse en un caso.
Primero trataremos con lo que es animar ESA pose que ya tenemos hecha. Esto quiere decir: hacer que sus ojos parpadeen y que su boca se mueva para hablar.
Tanto hacer que el personaje parpadee como hacer que hable es solo un asunto de frankenspriting Tienes que pegarle encima al personaje que tenemos hecho el ojo entrecerrado, el cerrado; la boca abierta por completo como la boca abierta a medias.
En el caso de mi personaje ex-Larry, lo tengo más difícil porque escogí ojos y bocas de personajes que no tienen animación (me agarré los ojos de una víctima, la cual nunca se muestra como parpadea; y la boca de alguien que nunca se muestra de frente como habla). Para hacer la demostración simplemente supondremos que su boca es el de otro. Los ojos los reemplazaré para hacer la demostración.
4.1) Consigue la hoja de sprite del personaje del que sacaste los ojos (si sacaste los ojos de Matt Engarde, entonces abre de nuevo esa hoja de sprite).
4.2) Tal como harías para sacar el pelo o la boca u otra cosa, borra los alrededores del ojo entrecerrado. (Las animaciones de parpadeo tienen 4 frames: ojo abierto - ojo entrecerrado - ojo cerrado - ojo entrecerrado. De ahí se repite)4.3) Usando la práctica del frankenspriting, pégale encima a los ojos de tu sprite hecha los ojos entrecerrados que sacaste. ASEGÚRATE DE QUE ENCAJEN BIEN, no solo los pongas a lo loco, tiene que sobreponerlo lo mejor posible. Haz el proceso anterior para también pegar encima los ojos cerrados.Spoiler : Imagen :Cuando peguen con éxito los ojos entrecerrados, GUARDEN CON UN DIFERENTE NOMBRE esa sprite; y luego cuando peguen los ojos cerrados, guárdenlo EN OTRO NOMBRE. La idea es que entonces tengas 3 imágenes .png de los 3 movimientos de ojos (una imagen abierta, otra entrecerrada, y otra cerrada).Spoiler : Imagen y detalles de sprite :
4.4) *aplausos* ¡Bien! Ya tienes las frames de la animación lista. Ahora es momento de juntarlas!
Hay distintos métodos para unir una animación. Algunos utilizan GIMP, otros Photoshop y demás. Yo les recomendaré utilizar cierta página en línea.
http://www.myspacegens.com/handler.php? ... matedimage
En esta página subes las distintas imágenes estáticas, y ajustas la velocidad en milisegundos en la que pasa cada una. Más que todo lo útil que tiene esta página es lo de la velocidad ajustable; además del hecho de que como es una página, no debes descargar nada de nada. Ahora les enseñaré el paso a paso de como manejar este servicio.
Para el hablar, es casi lo mismo, solo que una de las frames tiene un paso de más. Ahora, en vez de manejar los ojos abiertos-entrecerrados-cerrados-entrecerrados; manejaremos boca cerrada-abierta-entreabierta-abierta.Spoiler : Imagen y el resto de la Lección :
Tal como hiciste para sobreponer los ojos abiertos antes; sobrepón la boca cerrada normal de tu personaje con la boca entreabierta.
Agregar la boca abierta, por otra parte, es un negocio distinto. Esto se debe a que en esa frame, no solo la boca cambia, si no que la quijada del personaje también baja 1 o 2 píxeles. Les dejaré a ustedes como tarea por unos días el averiguar como se hace xD Si no lo logran regresaré a poner en imágenes como se hace.
Aunque un detalle: si van a animar el habla del personaje en la página que les dí, hagan esta modificación en las velocidades.DOBLE TA DAAA!!:Spoiler : Imagen :Spoiler : Hablar Finalizado :