Arte 2D
Tema 2 – Pixel Art
Desenvolupament d’Aplicacions
Multiplataforma
Pixel Art
• Tipos de Arte 2D
• ¿Qué es Pixel Art?
• Pixel Art básico
• Sombras
Arte 2D – Tipos/Técnicas
• En los videojuegos
podemos encontrar
varios tipos o “técnicas”
de arte 2D
– Pixel Art
– Vectorial
• “Flash”
– Dibujado a mano
Arte 2D - Sprites
• Estos tres tipos de arte se prerenderizan y se
introducen en el juego como tiras de imágenes
– Spritesheets
– Tilesets
– Atlas
• Los gráficos vectoriales en principio pueden ser
creados en tiempo real, pero eso es costoso a
nivel computacional
– Por lo que también se suelen prerenderizar
Arte 2D
• Nos centraremos en crear sprites con técnicas
Pixel Art
– No sois artistas
– Más sencillo de hacer
• Aunque sea “mal”
– Lo que aprendamos es aplicable a las otras
técnicas
Qué es Pixel Art
• La unidad mínima de representación visual en
una pantalla es el pixel
– Los píxeles se disponen en rejilla de forma
uniforme a lo largo y ancho de la pantalla
• No hay píxeles diagonales
• No hay píxeles de diferentes tamaños
• No hay medios píxeles
• Cada pixel tiene un color asignado en base a
sus valores RGB
Qué es Pixel Art
• Por lo tanto, podríamos definir el Pixel Art
como “aquellos gráficos cuya unidad mínima,
el pixel, es significativa”
– El píxel es visible a simple vista
• Más grande o más pequeño
– Un pixel “mal puesto” rompe la estética
– La paleta de colores suele estar limitada
• Los degradados no son “seamless”
Pixel Art “analógico”
• Mosaicos
Pixel Art “analógico”
• Punto de cruz
Pixel Art “analógico”
• Hama beads
Qué es Pixel Art
• Pixel art no significa
hacer muñecos de palo
• Tampoco es coger una
imagen y reducirla
– Aunque se puede usar
como base para el Pixel
Art
• El Pixel Art se trabaja
pixel a pixel
Qué es Pixel Art
Pixel art real Resolución 25%
Imagen HD Paleta 15 colores
YU-NO: A Girl Who Chants Love at the Bound of this World
Pixel Art básico
• “NES graphics”
– O “Game Boy Graphics”
• Paleta muy limitada
– Incluso llegando a solo 4 colores
– Entendible en escala de grises
– Muy útil para aprender lo básico
• Resolución pequeña
– 32x32 px
Pixel Art básico - Ejercicio
• Hacer un sprite “NES
Graphics” de Kohimaru
– 32x32 px
– Usando solo 4 colores
• Escala de grises
– Podéis obviar detalles
como la placa de la
bandana, o los dedos
– Simplificad
– Tiempo: 30 minutos
Pixel Art básico - Ejercicio
Pixel Art básico - Ejercicio
Hecho en 5 minutos, se podría mejorar mucho, pero ya es funcional
Me he permitido el “lujo” de usar sombras
Las sombras ayudan a detallar, 4 colores parecen más por cómo se usan
Sombras
• La sombra depende del color de la luz que
incida sobre los objetos
• Para simplificar, usaremos luces blancas
– Lo que significa que las zonas iluminadas serán del
mismo tono pero más claras
– Y las zonas de sombra serán del mismo tono pero
más oscuras
Sombras
• Cuando sepamos más, ya podremos hacer
sombras más interesantes
– En realidad la sombra es del color complementario
al del color de la luz
• Y muchas otras propiedades
– Incluso añadir luz reflejada por el propio objeto, o
luz ambiental
Sombras
Pillow Shading
• ALGO TOTALMENTE A EVITAR
• El Pillow Shading se produce cuando no
establecemos un lugar claro para el foco de luz
– Así sombreamos lo que está más cerca de los bordes
por igual
– Lo que hace que parezca una nube o una almohada
(de ahí el nombre)
• La luz siempre viene de un lugar
– Incluso si viene de frente, no creará unas sombras
similares a las del pillow shading
• No tengáis miedo a dejar zonas de color plano
Pillow Shading
Pillow Shading
Pillow Shading
Fuente: [Link]
Entrega
• Elegir uno de los personajes de la
derecha
– O uno inventado vuestro
• Hacer un sprite de 32x32
• 2 versiones
– Escala de grises de 4 colores
– Paleta de color de 10 máximo
• Los que queráis
• Usad lo que sabéis de teoría del color
• Con sombras
• Para la semana que viene
