PDF de programación - Arte en videojuegos para dispositivos móviles

Arte en videojuegos para

dispositivos móviles

Daniel G. Blázquez
Director de arte y diseño
Exelweiss Ent.



Antes de empezar a dibujar...

¿Quién es nuestro target?

Niño, hombre, adulto, adolescente, jugador casual, mujeres
maduras, preadolescente, hardcore, padres, educadores..

Imaginemos un juego de coches...



Antes de empezar a dibujar...



Antes de empezar a dibujar...

¿Disponemos de suficiente documentación

o referencias?

Internet
películas
Libros
Licenciatario
¡Otros juegos!

Saca el otaku que hay en ti

Ojo con querer reinventar la rueda



Malditos móviles

-Desarrollo sencillo para un sólo modelo.
¡complicado para el resto!
(8 marcas, +30 gamas, cientos de dispositivos).
-Cada operadora tiene su lista de móviles
prioritarios.
¡No admite un juego con menos del 95% de la lista cubiertos!
-Falta de compatibilidad real
-Limitaciones de JAR, Memoria y proceso
-Controles limitados (ley de los 5 botones)
-Portabilidad, portabilidad, portabilidad...



Malditos móviles

Diseño y arte, dependencia limitaciones de los
dispositivos.
Desarrollar de arriba hacia
abajo (de más potente a
menos), teniendo en cuenta
siempre las limitaciones.
Separa código de arte

Extensiones
(móviles + potentes)

Funcionamiento

básico

¡La clave es la automatización!



Resoluciones de pantalla

96×65 (Nokia)
101×80 (Siemens)
120×147 (Sharp)
128×110 (Samsung)
128×116 (Motorola)
128×128 (Nokia, SonyEriccson,
Panasonic, Alcatel, …)
128×142 (Samsung)
128×160 (Nokia, SonyEricsson, Alcatel,
…)
130×130 (Siemens)
132×176 (Siemens)
176×204 (Motorola)
176×208 (Nokia)
176×220 (SonyEriccson, LG, …)
208×208 (Nokia)
240×262 (Panasonic)
240×294 (Sharp)
240×298 (Motorola)
240×320 (Nokia, SonyEricsson, …)
352×416 (Nokia)



Resoluciones de pantalla

Unificar resoluciones
(dependerá del tipo
de juego)

Reducir al máximo los
“packs” de sprites.

Menos packs =
mayor productividad =
menos problemas



Resoluciones de pantalla

Versión en alta

automatización

Versiones
reducidas



Proceso de desarrollo

Brainstorming

Desarrollo

gráfico

Arte conceptual

y bocetos

Diseño

Mapeado

Optimización

Implementación



Diseño de personajes



Diseño de personaje principal

Personaje para juego “X”
-Idea de referencia: “Incredible Machine”
-Carismático
-Entrañable
-Loco
-Divertido
-Pequeño
-Estilo muy cartoon.
-Proporciones: 2 cabezas (SD)
-Jugador casual. Especialmente niños y mujeres



Diseño de personajes

Primeros bocetos...



1ª selección



Desarrollo del personaje



Últimos cambios...



Personaje final



Enemigos (Stress Attack)



Enemigos (Mr Bean)



A partir de 3D (Scalextric)



A partir de 3D (Stormgunner)



Arte conceptual y

ambientación



Arte conceptual y ambientación



Arte conceptual y ambientación



Arte conceptual y ambientación



Arte conceptual y ambientación



Montajes (House)



Color para diferenciar (Goody)



Animación de sprites



Animación de sprites

¿Qué necesitamos?

-Sprites (sin espacios en blanco para optimizar)
-Identificador de la animación
-Script con secuencia de animación (1º, 2º, 2º, 3º,
1º,...)
-Coordenadas referencia
-Independencia del programador
3

1

2



Animación de sprites

La coordenada de referencia cambia de un sprite a otro...



¡Flash! Todo son ventajas

-Accesible: Es el programa de animación más
utilizado del mundo. El animador sólo se
preocupa de animar.
-SWF: formato abierto (que no opensource).

-Herramienta exportación de sprites y
datos de animación de un SWF

-Reutilizar sprites
-Combinar sprites con elementos vectoriales.
-Tranformación de sprites (volteos,
rotaciones...)

Seguimos necesitando un script para definir las secuencias de

animación



Secuencia de animación



Sprites compactados

Se extraen los sprites
del SWF y se
compactan en un
pack.

Hay multiples
versiones de un
mísmo pack,
dependiendo del
tamaño de la pantalla
y de las capacidades
del móvil.



Versión MIDP1

2 versiones del
mismo pack de
sprites (normal y
versión MIPD1)



Multiples paletas



v



Portadas e interface



“La portada es la cara del juego”

Darle la importancia
que se merece.
Muchos juegos de
móvil no le prestan la
suficiente atención.

Muchas veces, es lo
único que ve el futuro
comprador.

-Más de 10 versiones
diferentes de
portadas.
-Usar elementos
móviles.
-Ser productivo



“La portada es la cara del juego”

El mejor diseñador
gráfico, no es aquel
que mejor sabe
dibujar, si no el que
mejor sabe
aprovechar los
recursos de los que
dispone.



Otras portadas...



Mapeado



Mapeado Isométrica

-Isométrica: doble de ancho que de
alto
-En 3D, la cámara se eleva 30
grados desde el suelo sin
perspectiva (proyección ortográfica)



Mapeador isométrica



Mapeador isométrica



Mapeador de tiles



Optimización gráficos

Reducir el espacio de los gráficos en disco
(KB) y en memoria (pixels totales)
Compactar sprites (menos pixels)
Reducir el nº de colores y utilizar colores planos
Herramientas de optimización: PNGOUT, PNGCRUSH, ...
Pocos ficheros vs trocear en ficheros
Compartir paletas

No se recomienda el formato JPG, ya que da problemas en algunos

móviles



JUEGOS MÓVIL
Algunos de nuestros desarrollos



¿Preguntas?