tutorial pixel art2

8/13/2019 Tutorial Pixel Art2

1/20

TUTORIAL

PIXEL ART

DISEO DE PERSONAJE Y ANIMACIONES PO

Fernando Castillo Cris


2/20

UTORIAL PIXEL ARTT

El Arte de los Pixeles:

ntes de comenzar, me gustaria hacer una introduccin, sobre el PIXEL ART, el cual es una

rma de diseo digital que comenz en el desarrollo de los videojuegos y en la creacin deonos para software, pero sobre todo en el Diseo de Videojuegos.

ntigamente los diseadores dedicado a la creacin de Sprite, no tenin Software deetoque de imagen (a mediado de los 80s) entre los primeros juegos en Pixeles (Spacevaders, Pac Man y Donkey Kong), todos ellos comenzarn a base de limitacionescnica de hardware, entre los problema fueron las resticciones de uso pixeles en pantalla,

capacidad de memoria y de colores, por lo que el programador les pasaba las

erramienta dependiedo de esta restricciones para que el diseador dibujara a base

e pixeles, el cual era un desafio enorme para la poca.

1.Concept Art por Shigeru Miyamotopara Donkey Kong (Arcade) 1981 Nintendo

2.Concept Art por Tori Iwatani

para Pac-Man (Arcade) 1980 Namco

2

1

uando los diseadores tenin estas restricciones y no tenin alguna herramienta digital,

os en el Game Document Design (GDD), dibujaban en unas plantillas cuadriculadas elseos de sus sprite (personajes y niveles).

n cada cuadro de la cuadricula representaba un pixel, por lo cual se diseaban los

oncepto de los sprite,con los colores pensado en la limitada paleta que tenin disponible

a memoria que podin alamcenar en el hardware (animaciones por Frame).


3/20

UTORIAL PIXEL ARTT

El Arte de los Pixelesmediado del 1985, los diseadores pudieron lograr desarrollar de forma ms fcil los

xeles para la creacin de sprite, por medio de herramientas digitales, uno de los primeros

oftware de diseo, fue desarrollado por Dan Silva paraElectronic Arts (EA), publicadoara la consolaAmiga, su nombre es Deluxe Paint, tambin el uso de otros software dedicin de Mapa de bits como elMAC Paint y elMS Paint, todo esto acompaado deejoras de los computadores (aumento de la resolucin, ms colores en pantalla y ms

emoria de procesar animaciones por frame).

1 2

1.Deluxe Paint para la Amiga 1985 EA

2.Moneky Island (PC) us Deluxe Paint1990 Lucas Arts

n la actualidad hemos visto que gracias a los avances tecnolgico han mejorado la

rma de disear Pixel Art, siendo ms fcil poder crear Sprite Sheetpara los juegos,n este Tutorial, pueden usar cualquier herramienta que edite Mapa de bits, desde el

moso Adobe Photoshop hasta el MS Paint, la base de diseo es la misma en todo

dos, pero lo importante es que cada diseador aprenda y pueda ser capaz de crear

u propia metodologa de Diseo, lo importante es el resultado.

o usar Idraw 3 (Freeware el cual Daisuke Amayadiseo los sprite y Tiles de Cavetory), Adobe Photoshop yAdobe Fireworks.

3. Cave Story (PC, Wiiware, DSi Ware, Mac y Linux)2005 Daisuke Amaya/ 2009 Nicalis

3


4/20

UTORIAL PIXEL ARTT

Comenzando a Crear un Personaje :rimero antes de comenzar ha disear cualquier sprite, lo primero es ver el Arteonceptual y el GDD, el cual nos definira como ser el personaje y que tipo decciones tendra dentro del juego, por que?, la respuesta es fcil, no es lo mismo disear

ara un juego que se usara en PC o Consola que en plataforma Prtatiles o Mviles, se

ene que estudiar las limitaciones o las ventajas que usan estas plataforma.

or ejemplo un juego para tlefono mviles tiene limitaciones (dependiendo la marca), ya

ea cuando colores usan, la resolucin de Pantalla y el almacenamiento de memoria,

abiendo bien estas limitaciones, podemos resolver varios problemas y saber como

olucionarlo para poder llegar al resultado deseado, el diseo debe ser funcional para la

canica del juego.

n en mi caso, supongamos que ser un juego descargable de Aventura/Plataforma, que

e jugara para iPad y que nuestro Target o Pblico Objetivo son nios 7 aos hacia arriba

veryone), por lo que debemos definir el Arte y concepto del juego.

gamos que el concepto del juego se basa en un mundo de Fantasia, usandos colores

lidos y la ambientacin sea Caricaturezca, ideal la direccin de Arte para un juego dirigido

los nios ( intenta crear tu propio personaje).

Yo dise el personaje principal del juego (es una

conejita), su caracteristica son de ser simptica y

alegre, su forma es redondeada, primodrial en un

juego para un publico infntil, ya que la protagonista

debe ser atractiva visualmente para crear interes al

jugador, adems de usar una paleta de colores

clido para que sea ms llamativo.

Recuerda usar Colores RGB de 16 bits a 32 bits

Un Estudio de color del personaje.


5/20

UTORIAL PIXEL ARTT

Comenzando a Crear un Personaje en Pixel Art:a teniendo el concepto rtistico de nuestro personajes principal, podemos comenzar a ver

n el GDD lo movimiento que debe realizar en el juego, en este caso les mostrare los

ovimientos bsico que tiene un personaje de plataforma.

brimos el software (debe ser editor de Mapa de bits) y veremos nuestra herramienta que

ay que utilizar (Casi todos los software tienen estas herramientas heredadas de una a la

ra):

1.Paleta de colores2.Grosor del lpiz 3.Barra de herramienta

4.Navegador

stas herramientas son necesaria para poder empezar crear nuestro personaje,

mportante recalcar que en el lienzo de trabajo se usa cuadriculas(que representans pixeles en pantalla) y un fondo de color (puede ser Magenta, Verde, Cyan oegro dependiendo de los colores que el sprite use) para poder generar el Canalfa (Transparencia)

omenzemos abrir un nuevo archivo de un tamao 76 x 109 px, usando colores 32

ts (los 256 colores que trae Windows)


6/20

UTORIAL PIXEL ARTT

Comenzando a Crear un Personaje en Pixel Art:hora acercamos el lienzo para visualizar la cuadricula y con el lpiz (con grosor de 1 px de

mao) empezamos a dibujar la forma, como el personaje es de forma redondeada

odemos usar la herramienta para crear circunferencia para hacer la cabeza y luego

eguimos con el lpiz marcando la forma del cuerpo, brazos, pies y demas detalles.

Es importante que el sprite que se esta dibujando

sera el Frame base para crear las animaciones,

por lo que ser lo que genere la postura del

personaje inicial, el cual debe trasmitir la

personalidad del personaje al primer contacto

visual de jugador.

ambin debo aclarar de que depende de la situacin del diseo,los bordes de los

ersonajes pueden marcar diferencias, por ejemplo dependiendo de las paleta de colores,el fondo y de la resolucin de pantalla, a los sprite le dan un color fuerte a los bordes, en m

aso elej el negro para resaltar mi sprite del fondo, pero tambin si mi personaje tuviera en

na pantalla pequea (como de mviles o de consola prtatil), es importante marcar los

orde del sprite en negro para que resalte en estas pequea pantalla, ya que estaran en

onstante movimientos, claramente para nuestro usuario debe ser fcil y comodo de

sualizar sobre todo en pantallas para Porttiles y Mviles, donde lo peor para el jugador es

ue en pantalla el personaje se pierda y es molesto.

Ya al terminar de marcar la forma de nuestro personaje, empezamos

a colorear el sprite con colores planos para hacer la primera capa de

color (Recuerda de que con la paleta obtenida en el Concept Art,se puede obtener en la paleta de tu lienzo de trabajo).


7/20

UTORIAL PIXEL ARTT

Comenzando a Crear un Personaje en Pixel Art:a teniendo el sprite con la primera capa de color, empezamos darle detalles con los demas

olores, para crear sombras y brillo, as tenemos un sprite bien definido.

Siempre mientras trabajas en un zoom del

lienzo de trabajo, es bueno ver tu sprite en su

tamao original desde el Navegador para ver

como va quedando en pantalla, asi no tendras

que cambiar el aumento de la lupa constante-

mente, cuando termines el Sprite, guarda tu

archivo en un formato BMP (Mapa de Bits),

para poder volver a editar tu archivo cuantas

veces sea necesario y luego en este mismoarchivo aumenta el tamao del lienzo en unos

800 X 900 px, para generar el Sprite Sheet


8/20

UTORIAL PIXEL ARTT

Comenzando a Crear las Animaciones

hora realizaremos nuestra primera animacin, es la ms sencilla, el cual es la animacine los ojos, cuando pestaea.

lo copia el primer sprite y pegalo hacia al lado, es importante que los sprite deben estar

ineados para que la animacion funcion, ya que esta alineado, modifica un poco los ojos

hora copia y pega para generar el tercer sprite y de la misma forma borra el ojo y haz una

nea cerca de las mejillas, para dar la sensacin que tiene los ojos cerrados.

Despus, selecciona la ventana de

animacin y comprueba como se

visualiza en pantalla la primera

instancia de animacin.

Luego empezamos a generar la

siguiente tira de animacin, el cual

el personaje camina o corre,copia y

pega el sprite como se ve en la foto

luego antes de disear estos frame

se debe hacer lo siguiente:


9/20

UTORIAL PIXEL ARTT

Bocetos de Animacinntes de generar esta animacin es importante crear en un papel y lpiz el Walking Cycle

para el Art Bible que seria parte del GDD), el cual es la plantilla de como seria lanimacin del personaje corriendo o caminando, el ejemplo que yo hice una muestra comoago que Bunny ( as la bautiz) pudiera mover los pies y brazos de forma que se

era natural.

Anora como vemos en la foto, el sprite

que fue copiado es modificado, dibujando

en los pies y en los brazo un cambio de

postura, tal como se ve en el dibujo del

Walking Cycle de Bunny, donde nuestro

personaje levanta la rodilla y encoje

el brazo, la otra pierna queda un pocohacia atras, ya que debe dar la sensacin

de que esta apoyando el pie en el suelo.


10/20

UTORIAL PIXEL ARTT

Corre Bunny, Corre!!!

Lo siguiente es generar otra copia,siempre alineadas como est en el

navegador, para que la animacin s

pueda realizar en la misma posicin

que los dems sprite.

Ahora como antes visto en el

Walking Cycle, empezamos a

modificar este Sprite, manteniendo

la proporcin y tamao delos dems Frame.

Ahora dibujamos desde la rodillla del personaje para hacer que pie se levante,

colocamos el brazo hacia atras y el otro lo levantamos, le hace el ponpon en su

cola, y levantamos un poco el pelo, todo esto usando el lpiz y el cuentagotas

(para poder usar los mismos colores sin ir a la libreria o tambin reutilizar loscolores guardados en tu paleta).


11/20

UTORIAL PIXEL ARTT


cto seguido copiamos solo la mitad del primer sprite de la fila de nuestra segunda

nimacin, y luego copiamos las piernas del primer sprite de la primera fila (la de arriba),

n ese momento agrega pixeles donde se sobrepuso los pies, asi completas la mano.

hora vuelve a copiar este sprite y alineal con el sprite anterior, as empezaremos arear el siguiente cuadro de animacin.


12/20

UTORIAL PIXEL ARTT


lo modificamos el pie borrando la zapatilla, dibujando una curva redondeada, dando la

ensacin de que nuestro personaje esta colocando el pie hacia atras y el otro pie loantenemos intacto, de ahi se levanta el brazo un poco, y el pelo es modificado para

arle sensacin de movimiento, eso le da un dinmismo a la animacin

o siguiente es copiar el sprite anterior, luego comenzamos a borrar la mano, subir el

razo, levantar las dos piernas y copiar el ponpon de la cola,tal como se puede apreciar

n las dos fotos de arriba.

ara finalizar slo hacemos una copia del tercer sprite y lo colocamos como el ltimo

uadro de animacin tal como se ven en la foto de abajo (generamos 6 cuadro de

nimacin.


13/20

UTORIAL PIXEL ARTT

Al infinito y al Ms all!!!

uestra siguiente animacin es cuando el personaje salta, por lo que copiamos el primerprite de la primera fila,se modifica los pies y un poco el pelo (1), copiamos y cambiamos,mbos pies levantados, el brazo se sube y empuamos la mueca, modificamos el pelo y

or ltimo cerramo la boca(2).

1 2

3 4

uego nuevamente copiamos y modificamos, los pies estirado los brazo alzandose, el

elo de igual forma y la mirada hacia abajo esto por que el cuadro cuando el personaje

ae al suelo (3)y por ltimo copiamos el tercer sprite de la segunda fila y lo colocamosacia adelante de la fila de animacin para el salto (4).


14/20

UTORIAL PIXEL ARTT

Bunny se defiende!!!

Que seria de nuestra heroina sin su fiel Yo-Yo?, ahora es turno de creara animacin cuando el personaje se defiende de posible y temible enemigos que no

udaran en atacarla, comenzemos copiando el primer sprite de la tercera fila, y lo

ineamos, para luego hace nuevamente una copia, y modificamos la mano para dar la

ensacin que sostiene algo, y dibuja una pequea circunferencia, para pintarla, ya que

se sera el Yo-Yo.

hora porsupuesto copiamos el sprite, le damos uan secuencia diferentre, as que

ndremos que modificar los pixeles, as que lo primero es cambiar la posicin de los

razos (uno hacia atras y el otro estirado) con la mano empuada, luego las piernas

olocanndo una piernas hacia atras,la cabeza se modifica, las orejas se dibujaran como si

stuviera en otra posicin, en el gorro cambia la lnea y se borra el icono, el pelo se

odifica para que se de la sensacin de (una vez ms) de movimiento, el Yo-Yo se dibuja

on una circunferencia y se hace una linea blanca para que se conecte con la mano,

opiamos el mismo sprite y simplemente seleccionamos el Yo-Yo, lo movemos un poco,ara dar la sensacin que el Yo-Yo se estira por cordel y la boca la abrimos.


15/20

UTORIAL PIXEL ARTT

Que pas si Bunny colisiona con otro personaje y pierde HP? o El jugador pierde laartida?, debe haber una animacin que al usuario le comuniqu que este peridendo (o

ue ya perdi), por lo que es importante informarle al jugador del estado del personaje.

implemente se hace la misma accin que en otras animaciones copiamos y

modificamos, tanto la pose como la expresin facial nos contara lo que sucede en

antalla.

Ups!!...Try Again??

You Winner!!!Cuando un personaje llega a la meta Final de un nivel, siempre se demuestra con una

animacin de una expresin victoriosa y triunfante, por lo que ser necesario comunicar

al jugador que logro llegar a la meta, en este caso dos cuadro de animaciones son

suficiente.


16/20

UTORIAL PIXEL ARTT

os Sprite Sheet son plantillas donde se ordenan las animaciones de algn personaje,stas animaciones son fundamentales para la mecnica del juego y debe ser funcionales,

a que debe ser una respuesta a una interaccin dentro del juego (nada en el juego es

or que si, todo tiene un sentido), por lo mismo en el GDD se va definiendo las acciones

ue los personajes tendran y con el Concept Art se define el estilo visual y conceptual

ue el usuario ver en pantalla, siempre guarda el original de la plantilla en BMP, para

ue puedas modificar o agregar ms animaciones.

Sprite Sheet


17/20

UTORIAL PIXEL ARTT

ara que los sprite pueda ser integrado en el juego, se debe crear carpetas para que elogramador lo utilize como Asset ( compilacin de carpetas con trabajo digitales) para

ue los integre en el engine y programe su funcin, as que lo primero que debemos

acer es crear una carpeta que diga el nombre del sprite, y luego crear dos sub carpetas,

na donde almacenan los sprite de animacin y el otro mantiene el original en formato

MP.

Llevar los sprite al juego

En la carpeta de Sprite, crea las sub carpeta que contendran las animaciones, ya sea la

de correr, saltar, atacar, ganar, perder, nadar etc.....Lo siguiente es abrir (en mi caso)

Adobe Fireworks, con el archivo BMP y ac realizaremos lo siguiente:


18/20

UTORIAL PIXEL ARTT

on la herramienta varita Mgica, selecciona el fondo y eliminalo, te daras cuenta que elndo tiene Canal Alfa, ahora antes de cualquier cosa revisa todos los contornos de los

rite, ya que no debe contener resto del fondo que se elimin, selecciona y borra.

levar los sprite al juego

hora que el fondo tiene transparencia, lo que vamos hacer, es guardar el Sprite Sheet

un formato que nos permita tener Canal Alfay que no tenga perdida de informacin,or lo que se selecciona en la ventana de optimizar el formato PNG 32, esto es por lalidad del color y por que en este formato crea el Anti-aliasing ( tambin se puedeardar en formatoTGA) y sin Mate, ahora colocamosGuardar comoy elije el foramto

NG dentro del la Carpeta de los sprite.


19/20

UTORIAL PIXEL ARTT

hora en Adobe Photoshop, empezaremos a crear los archivos que el programadorecesitara, hay dos formas de crear los archivos, dependiendo del engine de juego, del

nguaje de programacin o de la plataforma en que se realizara.

a primera es entregarle la plantilla entera de una animacin, por lo mismo deben estar

ineados todos los sprite del mismo tamao (como en la foto) y la segunda es por cuadro

e animacin, toda de la misma instancia del personaje.

Llevar los sprite al juego

Las plantillas de cada animacin deben

compartir la misma dimensin, ademasde que deben estar alineados.

o siguiente ser como guardar los sprite cuadro por cuadro para luego unirlas en un

ngine de juego, primero debemos observar el sprite que ocupe ms espcacio para que

ean todos los cuadro de animacin del mismo, as que del Sprite Sheet en PNG

opiamos esa instancia, creamos un nuevo archivo, el cual estara con la dimensin del

prite seleccionado y al aceptar insertamos el primer cuadro, para guardar el sprite en la

arpeta asignada en PNG, luego hacemos lo mismo con la segunda instancia, pero en elismo lienzo que el anterior sprite, para que se acomode y se pueda centrar con el

nterior sprite (trabajando por capas es fundamental), repite la misma accin con cada

prite hasta completar la animacin, el cual debe estar todas en la carpeta ( que en este

aso es la de correr)

As finalizamos este Tutorial sobre Pixel art para la

creacin de personajes y animacin, recuerden siempre

practicar, ya sea usando Pixeles, Modelos 3D o Vectores,

tambin quiero agradecer a Oscar, por darnos un espacio

para compartir nuestro conocimiento en el Blog, siempre

es bueno aprender del otro.

Muchas gracias por leer este tutorial!.


20/20

TUTORIAL

PIXEL ART

@Pixelart_ kid

Portafolio Web:

http://ferxfer.carbonmade.com/about

Recomendaciones de Libros

Por: Fernando Castillo Cristi

tutorial pixel art2

Documents