Tutorial Pixel Traducido
Tutorial Pixel Traducido
Tutorial Pixel Traducido
com
Versión 1.0
Reservados todos los derechos. Ninguna parte de este libro puede reproducirse de
Todas las imágenes utilizadas en este libro se utilizan con fines estrictamente educativos.
06Introducción
38 Capítulo 2: Suavizado
Suaviza tus contornos y haz que tus sombras y curvas se vean más suaves.
60 Capítulo 3: Color
Cree y ajuste paletas de colores adecuadas para sprites y fondos.
86 Capítulo 4: Legibilidad
Mejorando la claridad del sprite, grande o pequeño.
238 Epílogo
Epílogo, Bibliografía, Artistas invitados.
Introducción
Empezando
Prólogo
Puede seguir usando el software que ya conoce o cambiar a uno nuevo. Algunos programas hacen
más que pixel art, otros no.Al final, no importa cuán avanzada o sofisticada sea su tecnología.
¡Incluso MS Paint hace el truco! Chequepágina 14para algunos ejemplos de software.
En pixel art, tienes el control total y puedes manipular cada píxel tú mismo. Las herramientas avanzadasno
Hacer el trabajo. Por supuesto, eso hace que su obra de arte sea más nítida porque no tiene el desenfoque suave
de los pinceles. Sin embargo, el pixel art no se trata solo de las herramientas. Aprender técnicas es igualmente
No significa que tengas que colocar No requiere que hagas mucho zoom.
cada píxel como un ladrillo. No requiere precisión de píxeles.
Utiliza pinceladas y presión de pluma.
Hay atajos. ¡No te preocupes!
6
El pixel art nació de las limitaciones.
Es por eso que muchas técnicas manuales todavía se usan hoy en día.
El progreso tecnológico brindó nuevas posibilidades en los juegos 2D: imágenes y fotografías digitalizadas,
modelos 3D renderizados previamente, video de movimiento completo y mucho más. Una vez que los sprites
dejaron de editarse a nivel de píxeles, ya no se consideraron pixel art.Todavía son objetos de sprite en la
El pixel art a menudo se confunde con otros medios artísticos como Oekaki o Binary art. Eso es porque a
menudo usan gráficos con alias: arte hecho con herramientas que no suavizan. Los pinceles regulares
suavizan las líneas. El arte con alias mantiene todo píxel y nítido.
Este diagrama es un resumen. Para obtener más información, consulte las herramientas en la página...
7
Entonces, ¿por dónde empiezo?
Puede comenzar de varias maneras y tomar diferentes caminos. Incluso puedes mezclar caminos.Si ya
haces ilustraciones, ¡apégate a tu método preferido!Si te sientes aventurero, prueba algo nuevo.
Sin embargo, el pixel art suele ser de una sola capa.
Si no se siente cómodo trabajando en una sola capa, no se preocupe; aún puede usar capas, pero asegúrese de
combinarlas para no volverse demasiado dependiente. Especialmente con la animación, tener capas te dificultará
más que nada. Si creas escenas completas o capturas de pantalla de juegos simulados, ¡aunque las capas son
necesarias! Como resultado, esto acerca el pixel art a las obras de arte más tradicionales.
8
Aquí hay algunos ejemplos de las múltiples formas de hacer tus sprites/pixelart.
por Michafrar
9
herramientas de ferreteria
¡OK! ¡OK!
Un mouse es bueno con los clics. Una Tablet es buena con trazos. Más difícil
precisión de clic. Bueno para pero más fácil para el control intuitivo.
Apéguese a las herramientas que le permiten trabajar de manera más eficiente y rápida.
10
Hardware de la “vieja escuela”
Aquí hay algunos ejemplos de cómo se hicieron los sprites en los años 80 y
90. No son tan diferentes del hardware actual, ¡solo más arcaicos!
Los artistas de Capcom dibujaron marcos en papel cuadriculado y los pixelaron con digitalizadores.
Arte de Felicia de Akira "Akiman" Yasuda presentado en Darkstalkers (1994).
Y del monitor.
pantalla.
No se requiere una configuración de monitor dual ya que las computadoras modernas tienen altas resoluciones.
12
Capturas de pantalla de un comercial promocional de 1995 paraFuria fatal 3CD de Neo Geo (Japón).
Espacio de trabajo de un artista en SNK para hardware Neo Geo alrededor de 1995
Del folleto "Neo-Geo Hardware Specification", página 93, publicado por SNK Playmore Corporation
13
Programas de software
Como se mencionó previamente,tus herramientas no te definirán como artista. Estos programas están ahí para ayudar a que el
proceso de pixel art sea más fácil para que puedas mejorar tus habilidades. Cada programa enumerado a continuación ofrece sus
propios beneficios únicos y es posible que encuentre un programa que se adapte a su proceso más que otros.
¡Es importante que los pruebe usted mismo y vea lo que disfruta!
Galeria de gráficos
14
por Michafrar
aseprita
Precio: $10
Versión gratuita disponible pero funciones limitadas.
Promoción
Precio: $78
Versión gratuita disponible pero funciones limitadas.
15
CAÑUTILLO
Precio: Gratis
Una aplicación de software de código abierto
Adobe Photoshop
Precio: $699+
¡Programa extremadamente caro!
dieciséis
Herramientas de software
Herramienta Lápiz
cuentagotas
Borrador
Cubeta
17
Algunos programas no incluyen goma de borrar y agrupan el cuentagotas con el pincel.
¡Eso te da 2 herramientas que combinan el poder de 4!
Evitar:
¿Por qué evitar las herramientas automáticas? Porque el artista no puede predecir cómo resultará el resultado.
Recuerda: Pixel art se trata de tener un 100 % de control sobre lo que haces.
18
¿Qué tamaño de lienzo?
“¿De qué tamaño hago mis sprites y fondos?” es una pregunta común. Los gráficos de
computadora antiguos tenían una resolución baja, por lo que el pixel art suele ser
pequeño. Al hacer pixel art, tendrás que decidir el tamaño del lienzo desde el principio.
Para obtener más información sobre los tamaños de sprites, leaCapítulo 4: Legibilidad
Dibuja lo grande o pequeño que quieras que sea tu obra de arte o animación. Un
19
Metroid II: El retorno de Samus(Gameboy) hcomo una proporción GRANDE de sprite a lienzopara un personaje jugable.
El sprite es 1:24, alrededor del 4% de la pantalla. No es muy adecuado para maniobrar en nivel.
Súper Metroid (Super Nintendo)tiene una proporción de sprites a lienzo BAJApara un personaje jugable.
El sprite es 1:38, alrededor del 2,5% de la pantalla. Permite que el jugador vea más de su entorno.
Historia de la cueva/Doukutsu Monagatari(ORDENADOR PERSONAL)tiene una proporción PEQUEÑA de sprite a lienzopara un personaje jugable. El
sprite es 1:300, alrededor del 0,33% de la pantalla. Los personajes siguen siendo visibles pero minimalistas debido a su pequeño tamaño.
20
Esto puede sonar obvio para muchos artistas,pero cuando cambias el tamaño SIEMPRE mantente enNÚMEROS ENTEROS.
Avanzando...
Este breve prólogo solo estaba arañando la superficie.
21
Capítulo r
Arte lineal
1
Introducción
Encadenado/Madre 3 (SNES)
23
Mantenga el mismo grosor de línea en todo elentero¡duende!
¡Los sprites suelen ser pequeños gráficos! Como resultado, notarás que en los juegos...
por Michafrar
24
Líneas y curvas
¿Alguna vez notó que al dibujar una línea o curva de píxeles en 1 trazo, no se ve tan suave como desea?
Eso es debido ajaggies. Estas son partes irregulares de una línea o curva.
25
¿La clave para recordar con jaggies? No rodees
una fila de píxeles con otros más grandes.
¡Nota IMPORTANTE!
26
Arte de pixelamalíneas que tienen las mismas “escaleras”, escaleras con el
27
Las líneas están en todas partes
Incluso cuando no tienes líneas, cualquier forma dentro de tu pixel art tiene un borde.
Gráficos sin arte lineal, comoMaldiciones y caos(PC/PS4), todavía tienen pixelart de aspecto limpio.
Es bastante efectivo para los fondos. Para ver más ejemplos, consultepágina 30.
28
Bonificación de lógica de píxeles n.º 1
Como he descrito, cincelar tus líneas es mucho más natural que ser perfeccionista.
¡Esto funciona para todos los problemas, y puedes ver a continuación algunos ejemplos que hice para enfatizar eso!
Reparado
Originales
Dentado...
¡Reparado!
Algunos programas lo ayudan a hacer líneas más suaves con opciones de "píxel perfecto". Sin embargo, el
el resultado no es perfecto. No confíe en estas opciones, píxel por píxel sigue siendo el camino a seguir.
Es posible que haya notado que pixelart viene en muchas formas y formas. ¡Como cualquier arte!
sin contorno
y contornos rotos.
jaggies!(lo siento...)
30
Traducido del inglés al español - www.onlinedoctranslator.com
Negroen línea
31
Negrocontorno
WarioLand 4 (GBA), Kirby Superstar Ultra (DS), Mario & Luigi: Bowser's Inside Story (DS), Magical
Taruruuto-Kun (Génesis), Chrono Trigger (SNES), Kirby Squeek Squad (DS), Boktai 3 (GBA) ,
Riviera: La tierra prometida (GBA)
32
De colores
Las aventuras de Batman y Robin (SNES), Encantada (GBA), La travesura del Congo (SNES),
Mario All Stars (SNES), Hamelin No Violin Damaki (SNES) Metroid Fusion (GBA), DK King of Swing (GBA),
Castlevania: AoS (GBA), Monster World IV (Génesis)
33
contorno selectivo
¡El contorno selectivo es un arte lineal sombreado con una fuente de luz! es lo mas
tipo común de contorno en pixel art, y funciona muy bien con fondos.
Ristar (Génesis), Pulseman (Génesis), Alundra (PS1), Parodius Da (SNES), LoZ: Minish Cap (GBA),
Super Pocket Fighter (Saturno), Shantae: Risky's Revenge (DSi)
Ve a estudiarlos.
35
Namco x Capcom (PS2)
contornos coloreados
Contornos selectivos
37
Capítulo
Suavizado
2
r
Introducción
Una imagen vale mas que mil palabras. Entonces para elpróximas páginas…Acercarse!
Anti-aliasing te ayuda a suavizar los bordescolocando píxeles en pequeños rincones. Presta atención a
dónde están estos pequeños bloques: generalmentemezclazonas oscuras con zonas claras. A veces
39
¿A AA o no a AA?
uno no es mejor que el otro, pero el suavizado es demayorimportancia para el pixelart. ¿Debo
usar suavizado o no? ¿Vale la pena mi tiempo?Hagamos un estudio caso por caso.
Un pixel art personalizado de Metaknight de Nintendo. Originalmente creé esto con suavizado. Sin
embargo, al eliminar todo el suavizado, la imagen no perdió mucha calidad. Es difícil notar la diferencia.
decir la diferencia? Apenas se nota. Estos sprites no se benefician del suavizado. El estilo del
40
gráficos originales sin suavizado
Un sprite del Rey Dedede deKirby Super Star Ultra(NDS). Aquí es donde la falta de suavizado se vuelve
dolorosamente perceptible. Este estilo tiene que ver con formas suaves y suaves.Sin suavizado, se
Un desconocido dePokémon Cristal(GBC). El sprite sin AA se siente bloqueado. Los gráficos originales
tenían una gran cantidad de AA. En el juego, el sprite se mostraba sobre un fondo blanco.Dado que los
sprites podían tener un total de 4 colores, maximizaron AA. El sprite negro sin AA se siente duro
Retrato deFuria fatal 2(GB). Eliminar el AA hace que el sprite sea más legible, pero tiene un costo: hay menos
41
gráficos originales suavizado
Objetos deRitmo Cielo/Paraíso(NDS). La mayoría de los gráficos de este juego tienen alias, son nítidos y
dentados. Esto se hizo para imitar el estilo artístico de Ko Takeuchi. Sin embargo, al agregar un ligero AA, los
Retratos deMetal Gear: Fantasma de Babel(GBC). Aquí, la diferencia solo se nota cuando se acerca el zoom.
Cuando estos retratos se muestran a una resolución pequeña, apenas se puede notar la diferencia.Las formas
Fuka Kazamatsuri deDisgaea 4(PS3). Estos sprites son dibujos reducidos que han sido retocados por
artistas de píxeles. Si elimina todo el AA, hay poca diferencia. Los colores con bajo contraste no
necesitan mucho AA. No obstante, dado que esto se mostró en resolución HD en una Playstation 3, el
suavizado suave es imprescindible.
42
gráficos originales sin suavizado
Guerras avanzadas(GBA). Al igual que conDisgaea, este arte fue reducido y retocado manualmente para
adaptarse a sus limitaciones.Usaron AA para preservar el detalle del arte original..Sin él, es solo un
desastre pixelado.
SMW2: La isla de Yoshi (SNES). ¡Ay! El estilo artístico del juego claramente buscaba una apariencia de crayón.
Conclusión
+ Animación subpixelada
alias
+ Hace que los sprites pequeños sean - Crea lineart irregulares
43
¿Cuándo es necesario?
estratégica.
Claridad Detalle
Los personajes, las caras y los ojos Esta área contiene muchas curvas
personas. Lo mejor es hacerlos claros, suelen ser más irregulares. Requiere más
44
Cómo aplicar
AA simplemente coloca píxeles en los rincones pequeños para suavizar las líneas y las formas.
es comocojines en un sofá!
45
curvas planas
A continuación se muestran algunos ejemplos decurvas planas. Son raros para pequeños sprites, pero son más comunes
con pixel art más grande. Si no está satisfecho con el aspecto con alias, aún puede agregar AA.
Darkstalkers 3 (Arcade/PS1)
Recordar
46
Aunque los dibujos no son pixel art, técnicamente están hechos de píxeles en
Por supuesto, para el arte de píxeles, sería demasiado borroso con demasiados colores. no se parecería
Resumen
47
líneas de 45°
El antialiasing en líneas de 45° es poco común¡pero hay excepciones! Aquí, las limitaciones de NES
mostrar la falta de AA muy bien. Conmenos colores, hay poco queno hay necesidad de AA.
Desafío de fichas de batalla de Mega Man (GBA) Super Star Ultra de Kirby (3DS)
48
curva convexa
curva cóncava
Los píxeles más oscuros o más claros cambian lapesode la parte de 45°.
49
Bonificación de lógica de píxeles n.º 2
¿Aún no estás seguro de cómo hacer que una línea de 45° se curve ligeramente?¡No hay problema!
1. 2. 3. 4.
5. 6. 7. 8.
50
Traducido del inglés al español - www.onlinedoctranslator.com
Líneas irregulares
¿Qué hacer con una línea irregular naturalmente? Son raros, pero existen, no obstante. Prueba este truco.
51
Algunos ejemplos de esta técnica.
Darkstalkers 3 (Arcade/PS1)
52
Grosor de línea
Manipulando colorespuedo ayudartehacer que las líneas se vean más gruesas omás delgada, ¡incluso a 1 px!
Las bocas generalmente tienden a ser solo una línea simple. ¡Así que tomemos cubrebocas como ejemplo!
yo
Los hoyuelos sonderecho, los labios sonoscuro.
LIGERO=MÁS DELGADA
Incluso puede agregar líneas más claras en la punta de una curva para recrear pinceladas.
53
Observa las líneas en los siguientes sprites.Centrarse en sus caras.
Recordar
capítulo: “subpixelado”.
54
bandas
. . . es malo.
Esto sucede cuando dos filas de píxeles perfectamenteabrazoEl uno al otro. Suena lindo, pero esrealmente no lo es!
Puede empeorar:
Cazafantasmas (Génesis/Megadrive)
55
¿Por qué es tan malo?
Hace que aparezcan líneasmás gruesode lo que originalmente querías que fueran. Eso
56
¿Cómo lo soluciono?
UsarSuavizado.
¡Consulte las flechas codificadas por colores para ver estas correcciones!
A veces es inevitable.
Cuando lo veas… ¡arréglalo!
¡Solo trata de eliminarlo tanto como puedas!
Hay tipos de bandas menos significativos, como las bandas paralelas, difuminadas y
57
Bonificación de Pixel-Logic #3
Tenga en cuenta que esto es solo celda sombreada. Sería mucho peor si tuviera una sombra suave.
Otra forma de probar que las bandas son un dolor en el cuello esal difuminar la imagen.
Sólo...nuevo!
58
Conclusión
tecnicasse volverá instintivo con el tiempoa medida que haces más pixel art.
¡Algunas personas hacen pixel art sin AA y hacen un trabajo increíblemente hermoso!
Líneas irregulares
Grosor de línea
En el próximo capítulo vamos a echar un buen vistazo acoloresy cómo elegir paletas!
59
Capítulo
Color
3
Traducido del inglés al español - www.onlinedoctranslator.com
Introducción
Los colores son muy divertidos, pero pueden ser complicados. Ellos son lasmás subjetivoparte de los sprites mientras
Batman (1989, NES) Shin Megami Tensei Mega hombre 6 (1994, NES)
(1992, SNES)
Súper Metroid (1994, SNES) Cuentos de fantasía (1995, SNES) SMW2: La isla de Yoshi (1995, SNES)
61
Izquierda:Dibujado a la vida (2007, NDS)
Parte superior derecha:Shovel Knight (2014, varios) Abajo a la
derecha:Poderosa fuerza de cambio (2013, WiiU/3DS)
Se puede aplicar a todo tipo de artes: desde la pintura y la fotografía hasta el diseño de interiores.No entraremos en
muchos detalles aquí., porque es algo que ya se enseña en las escuelas y los tutoriales sobre la teoría del color están
muy difundidos en Internet. Los colores pueden hacer o deshacer una imagen, así que asegúrese de conocer sus
Para Pixel-logic solo haremoscentrarse en los aspectosespecíficamentepara pixel art y diseño de juegos.
62
Cómo elegir colores
El pixel art es un arte digital. A diferencia de los medios tradicionales, hacer que los colores funcionencon deslizadores.
Estos son los 3 factores que componen un color para el arte digital. Puede encontrarlos en todo el software.
Matiz
Saturación
Valor
Nota: Algunos programas utilizanBrilloen vez deValor.Es solo un nombre diferente. Cuando
el tercer control deslizante diceLuminosidadva hacia el blanco en lugar del tono puro.
63
Método 2 ‒Rojo verde azul
Para obtener purogrises, darel mismo valor para cada control deslizante.
64
¿Por qué hacer paletas?
Tener una paleta no significa necesariamente tener colores a un lado. Todavía puedes ver los
colores de tu pixel art. No te preocupes.
te ahorra tiempo
te mantiene organizado
obras de arte.
Facilita la animación.
paleta aquí, ¡solo gotas para los ojos! requiere una paleta
Algunos programas generarán automáticamente una paleta para ti, ¡así que no tienes que hacerlo tú!
sesenta y cinco
rampas de color
X=colores compartidos
Paleta de Cocefi
Podrías pensar: “Esto es confuso para mí”. No importa cómo muestres tu paleta.
66
¡Aún puedes mezclar rampas!
cambio de tono
cambio de tono, también conocidas como “sombras de colores”, también se pueden aplicar a cualquier otro
arte visual. Hace que tu arte sea más colorido y atractivo a la vista.
Castaño claro, utilizado para todos los tonos. Con cada tono, se vuelven más rojos. La
La sombra es negra y aburrida. sombra es ahorarojo cálido
A B A B
Puede cambiar el tono hacia la izquierda o hacia la derecha en el control deslizante de color.
ElAEl tono de las rampas cambia ligeramente hacia el amarillo, mientras que elBel tono de las rampas cambia hacia el púrpura.
ElALas rampas se ven un poco extrañas. ElBlas rampas son probablemente con lo que estás familiarizado.
67
Sonic Rush Adventure (2007, NDS) Seiken Densetsu 3 (1995, SNES)
68
El amarillo es el color más brillante del arcoíris. El morado es el más oscuro.
Puede tener un cambio de tono sutil o un cambio de tono drástico. Es una cuestión de preferencia.
En lugar de cambiar manualmente el tono cada rampa de color, puede experimentar con sombras mediante el uso
Paleta de Cocefi
Una vez que hayas encontrado algunas combinaciones geniales, ¡solo deja caer los ojos!
Los ejemplos solo muestran azul, verde y magenta, ¡pero puedes usar otros colores!
69
Bonificación de Pixel-Logic #3
El cambio de saturación no es solo como el cambio de tono. El tono se utiliza para crear una atmósfera o sentimiento.
70
Conclusión
Echa un vistazo a este sprite de Tentacruel, tanto en su forma original como en sus versiones editadas manualmente.
¿Ves las diferencias?Las pequeñas elecciones de color pueden tener grandes efectos!
71
Tonos negros
Emblema de fuego (GBA), Mega Man 7 (SNES), Mario Party Advance (GBA), Leyenda de Zelda: Enlace al pasado (SNES),
Mario & Luigi: Dream Team (NDS), Earthbound (SNES), Chrono Trigger (SNES), Breath of Fire IV (PS1)
No hay una razón técnica por la que los artistas de píxeles o los juegos elijan hacer esto.
No tiene nada que ver con las limitaciones. ¡Es puramente estético!
De izquierda a derecha:Super Mario Kart (SNES), SMW2: Yoshi's Island (SNES), SMA3: Yoshi's Island (GBA), Mario &
Luigi: uperstar Saga (GBA), Mario Party Advance (GBA), Mario & Luigi: Partners in Time (NDS) , Isla de Yoshi DS (NDS)
72
Los tonos negros no están limitados por juego o estilo.
Incluso dentro del mismo juego odentro del mismo estilo, tu puedes tenerdiferencias sutiles:
Aunque su monitor no muestre estos colores, recuerde que su pixel art se comparte en línea, en
diferentes plataformas o diferentes sistemas.El brillo variará de cada dispositivo.
73
usando grises
Especialmente con una paleta limitada.. Funciona bien con paletas que
tienen atmósferas de fuentes de luz especiales: paletas nocturnas,
ambientes rojos intensos, brillo verde tóxico y mucho más.
gris puro. Hace que el gris sea perfecto para difuminar. ¡No es
Los grises anulan los
bonito, pero es útil!
colores. Los hace neutrales.
una luz diferente. Es por eso que los grises pueden mezclarse
fácilmente.
74
Elección de colores I
Escritor invitado:cocefi
Tonos negros
Intente evitar los negros puros a menos que sea realmente necesario.
¡Puedes usar marrón oscuro, morado oscuro, verde oscuro o incluso gris
oscuro en su lugar!
Oscuridad
El techo de color rosa suave tiene una sombra morada opaca. Las
experimentando
No tengas miedo de probar combinaciones de colores extrañas. Hay mucho ensayo y error involucrado. Asegúrate de
jugar con los controles deslizantes Tono/Saturación, no solo con el brillo para sombrear.
75
Elegir colores II
Escritor invitado:Siosa (しょさ)
76
Cambio de colores durante el progreso
Cambio de color constantemente. Tómate un tiempo para mirar hacia atrás. Mire el arte de píxeles de otros y luego mire su
propia imagen nuevamente. Si todavía me siento incómodo después de mirar los colores, los cambio uno por uno.
Corrección de color
Syosa se refiere aquí a la limitación de impresión CYMK que viene con la impresión de trabajos digitales. Los colores
cambiarán de acuerdo con esta paleta, así que tenga cuidado al usar RGB para imprimir.
Inserto la imagen en unsRGBPerfil ICC que me permite ver y manejar los efectos del cambio de
color dentro del navegador.
Para juegos
A veces, los colores no coinciden con los de otras imágenes, por lo que incluso cuando el color de
la imagen está bien en sí mismo, a veces termino ajustándolo.
Escritor invitado:Genios
Si bien el lenguaje corporal y la expresión facial pueden establecer el estado de ánimo, ¡pintar con colores más cálidos o más fríos puede
Diversificar tus colores hará que tu trabajo sea más interesante de ver. Romperá el
mirada monocromática. Puede lograr esto usando diferentes tonos en la misma rampa.
Solo asegúrate de que los colores aún se mezclen bien. ¡La experimentación es la clave!
78
Contraste
El pez (izquierda) esmayormente verde. Uso unamarillo para resaltarsu boca y aletas
para enfatizar su apariencia de pez. El amarillo más brillante contrasta bien con el
verde.
79
Diferentes limitaciones
El pixel art nace de las limitaciones. Los colores pueden verse afectados por los límites. Hoy en día, no hay límites, ¡pero a
los artistas todavía les gusta desafiarse a sí mismos! A veces puede crear hermosos efectos.
Las consolas con la misma potencia de microprocesador no tienen las mismas reglas de color.
gráficos de consolas anteriores a 1990 como8 bits, y 16 bits Incluso a partir de 2015, hoy en día.Los
pero no conocen las reglas y limitaciones exactas. El formato se actualizó por última vez en 1989
80
Traducido del inglés al español - www.onlinedoctranslator.com
Esta sección es para personas que quieren replicar videojuegos antiguos, hackear un videojuego 2D o les gusta
divertirse con limitaciones. 1 color que siempre incluye en el recuento total de colores es la transparencia. Por
conveniencia, lo excluiré de los siguientes ejemplos.
15 colores. Esta es la versión final que decidí usar. 10 colores. El sprite sigue intacto.
16 colores suele ser el límite para la mayoría de los sprites. No se ve raro….todavía.
• Fusionó los tonos de piel con el cabello castaño. • Cambié el amarillo por un tono de piel.
• El verde y el verde azulado ahora comparten el mismo punto culminante. • Recoloreado los verdes con la rampa verde azulado.
• Quitó el AA naranja: apenas se veía. • Fusionó los tonos más oscuros entre sí
81
Más allá de los 10 colores, este sprite en particular pierde su calidad, colores y detalles.
Sin embargo, cada sprite es diferente. No existe una “regla única para todos” con los colores.
82
Escenas con colores limitados
Escritor invitado:Genios
Los colores se pueden reutilizar en la misma pieza sin perder su valor. ¡Puedes colocar colores juntos que de
La clave es diversificar tus colores tanto como sea posible.Tener diferentes objetos con el mismo color
tocándose directamente hará que se mezclen. Las sábanas y la cama tienen colores diferentes, por lo que no se
mezclan, mientras que el tono de la piel y las sábanas son del mismo color, por lo que se sienten como un todo. El
83
Limitación extrema
Escritor invitado:cocefi
A veces, por alguna razón extrema, tenemos que trabajar con una paleta fea severamente limitada.
¡EWWW!
Afortunadamente, podemos hacer que su uso sea más intuitivo reorganizando los colores según cómo percibimos
los colores en términos de luminosidad. Algunos colores del arcoíris se “sienten” más oscuros y más claros.
maravilloso ~
Supongo que podrías llamarloExtremoCambio de tono. Puede ampliar la paleta aún más con difuminadotambién. Pero
tenga cuidado: el difuminado excesivo puede hacer que una superficie se vea rugosa o texturizada.
84
Conclusión
El color tiene que ver con el contexto. No solo crea el estado de ánimo o la atmósfera de tu pixel art, sino que
también define el estilo. Los colores pueden engañar fácilmente a la vista y, con un poco de práctica, podrás
usarlos a tu favor.
Contraste
Colorear no se detiene en este capítulo. Muchos otros aspectos utilizan los colores a su favor para sacar el máximo
partido al pixel art. Solo asegúrate de actualizar tu teoría del color y recuerda:
Experimentar!
85
Capítulo
Legibilidad
4
86
Introducción
87
El tamaño importa...
Con 16x16 píxeles, es difícil decir que está sorprendido por su bigote.
PYME (NES) SMB3 (NES) SMB2 (NES) SMW (SNES) SML (GB) SML2 (GB)
Los sprites grandes necesitan líneas limpias y dibujos sólidos. Los sprites pequeños necesitan
en pequeños sprites, así que asegúrate de adaptar los diseños de los personajes.
88
Estudio de caso: Cryamore
Una de las decisiones más importantes en el desarrollo de Cryamore fue el tamaño de los sprites.
“
lo mucho que nos enamoró este look.
fácilmente!
La línea entre el arte binario y el arte de píxeles comienza a desdibujarse cuando los sprites se vuelven demasiado grandes.
Juegos comoDengeki Bunko Fighting Climax(PS3) están en el límite del arte binario.
90
Traducido del inglés al español - www.onlinedoctranslator.com
Los sprites más grandes tienen pocos problemas de legibilidad. Los sprites más pequeños tienden a ser un poco más complicados.
super mario kart(SNES) había mejorado los sprites de Yoshi para la versión japonesa.
personas ven esto como un niño sosteniendo una taza.. La mayor parte del
Podemos extender la copa y moverla hacia arriba cubriendo aún más la cara, peroesta podría
verse fácilmente como una barba o todo tipo de otras cosas. Está demasiado embarrado.
Ahora tenemos una forma gris plana con una línea blanca de 4 px de ancho.El resaltado
blanco hace que el objeto sea más 3D. Pero todavía parece un cubo/prisma al azar
¡Simplemente agregando una línea de 2px para definir la ranura del cartucho de Game Boy,
92
¿Por qué cada píxel importa?
Cambiar solo unos pocos píxeles puede hacer que este murciélago:
93
Por qué cada píxel importa II
Los gráficos de videojuegos más antiguos pueden ser pequeños, ¡pero el lugar de cada píxel no es trivial!
¡Un área pequeña como 6 por 6 píxeles puede ofrecerle una gran cantidad de variedad!
Personajes de Technōs' Crash 'n' the boys y River City Ransom (NES/Famicom)
La serie Kunio-kun¡hizo que cada personaje se viera diferente ajustando ligeramente los píxeles de solo sus ojos
Incluso el píxel más pequeño puede marcar la diferencia en los gráficos de baja resolución.Los escarabajos zumbidos de SMB
algo parecidas a conchas con un gran ojo negro parecido a una perla.
En elSuper Mario All-Starsrehacer (en la foto abajo a la izquierda ), se parecen más al arte conceptual.
94
Características reconocibles
Escritor invitado:ellián
Entonces necesitas crear un nuevo sprite. ¿Qué tamaño realmente necesita ser?
¿Necesito ver sus manos moviéndose?? ¿Sus bocas deben ser visibles o animadas?debe facial
expresión ser legible? ¿Usan o sostienen un artículo? ¿La espada tiene una gema mágica en ella?
La parte más pequeña que quiero aquí son las expresiones faciales.
Intenta decifrarlola parte más pequeña que necesita ser visible. Una vez que tienes eso abajo, es fácil descifrar el
No te concentres en incluir cada detalle en tu sprite. Descubra qué hace que el personaje sea único y
represente mejor el concepto. A menudo escuchará “menos es más”, y tiende a ser cierto.
Si tienes la más mínima duda sobre si tu sprite es legible o no,Preguntale a alguien mas, ¡y no les digas lo que
se supone que es! Aún mejor, pregúntele a alguien con poco o ningún conocimiento de pixel art.
95
Símbolos fáciles de leer
por Michafrar
Con menos espacio, hay poco espacio para muchos rasgos faciales o manos.
Todavía puede agregarlos, pero harán que su trabajo se vea abarrotado y embarrado.
Trabajar en resoluciones más grandes puede parecer más fácil, pero todo es posible con resoluciones pequeñas. Elige
Las próximas páginas discutiránmanosyojos. Abordaremos más en capítulos futuros. Son los
más complicados a pequeña escala. ¡No tendrás suficiente espacio para pixelar cada dedo!
¡El arte lineal es complicado con apenas espacio! Te confundirá aún más.Usa formas planas,
entoncesdetalle.¡Más fácil! Le ayudará a visualizar las manos en 3D en su cabeza.
No tiene sentido resaltar cada dedo.No tendrás espacio para Enfócate en las formas
básicas. Incluso cuando tenga los dedos extendidos, comience con guantes.
Un pulgar oponible y un dedo índice definen la mano humana.Esos dos dedos son
suficientespara mostrar agarrar, pellizcar, señalar y mucho más.
97
4. Dibuja solo 3 dedos y un pulgar si es necesario.
Los dibujos animados a veces dibujan 4 dedos para simplificar la animación. El pixel art también.Solo
Trabajar a pequeña escala puede ser complicado porque no se puede "dibujar" espontáneamente. Si
realmente tiene problemas o trabaja con una fecha límite, dibuje una mano en su programa de pintura
habitual y redúzcala. Luego úsalo como referencia. También puedes estudiar el suavizado para ayudarte
un poco.
98
Símbolos II - Ojos
Los sprites que no tienen suficiente espacio para ningún rasgo facial generalmente no caben en los ojos
porque serían más pequeños que 1 px. Si es así,concéntrese en las sombras proyectadas en la cara
para crear el área de los ojos. Si no está seguro, busque algunas referencias de juegos.
Investigaciones de Ace Attorney: Miles Edgeworth (NDS) + Tales of the World: Narikiri Dungeon 3
Puede que tengas que sacrificar detalles dependiendo del tamaño del sprite. O te enfocas en
Es difícil decirlo a primera vista, pero una diferencia de unos pocos píxeles puede tener muchos resultados.
Cuando se acerca, es posible que la ubicación de algunos píxeles no tenga NINGÚN sentido para usted. Puede
parecer poco natural si estás acostumbrado a las pinceladas. Cuando se aleja, algunas combinaciones de píxeles
pueden dar a los ojos una sensación completamente diferente.AA y sub-pixeling realmente son útiles aquí!
5. Los ojos vienen en muchos estilos, pero no evites los detalles de píxeles.
Los ojos suelen definir tu estilo.Con los píxeles puedes hacer lo que quieras en términos de
ojos.. No hay limitaciones además de su lienzo. Puedes desarrollar aún más tu estilo, pero al
igual que el arte normal, asegúrate de pulir tu técnica.
6. UsarsutilSuavizado si es necesario.
Grandes cabezastener muchas ventajas. Ellosdar espacio a las emociones y expresionesy mostrar claramente quién
es el personaje. Es una elección estilística, por lo que puede no ser adecuada para todas las situaciones.Las cabezas
resultado, debe prestar atención al volumen, el sombreado y la anatomía dentro de estas áreas restringidas.
101
Diferentes proporciones tienen diferentes funciones.
Las proporciones que elijas dependerán principalmente de para qué se use tu sprite. Obras de arte generales, íconos
de usuario, sprites del mundo exterior, sprites de diálogo, diferentes perspectivas: ¡lo que sea!
Pixelart encuentra una manera de adaptar todos los diseños de personajes para que se ajusten a áreas pequeñas.
102
siluetas
Logro. escritor invitado:Glauber Kotaki
Una silueta clara muestra características importantes como la cabeza, las extremidades, la tela, etc.
Cualquier cosa que resalte la acción o función del personaje u objeto es un buen
comienzo. Esto también es muy útil si vas a animarlo más.
calles de rabia-como la mayoría de las secuelas, mejoraría sus sprites con el tiempo. la silueta
deSeñales mejor en la 3ra entrega ya que se resalta su postura, su puño y su peinado.
103
diseño de colores
dando a tus personajesun color principal y secundario,te da buenos efectos secundarios. Su diseño
se vuelve más reconocible y más legible. No incluyas detalles innecesarios en tus sprites. Divídalos en
2 o 3 colores principales como otros personajes reconocibles.
Los personajes conocidos que se ven en muchos juegos tienen diseños con colores vibrantes.
Elige los colores adecuados para representar las características de tus personajes. Los colores incorrectos llevan a la confusión.
(SNES) son murciélagos. Sin embargo, su Probablemente para que los brazos no se mezclen con
nariz era de color naranja, lo que hace que el cuerpo principal, pero, por desgracia, se ven como el
parezca un pájaro con pico. Más tarde estribo de su silla de montar.Creador de Super Mario
los juegos arreglaron esto. (WiiU) lo arregló. Este problema es similar al de Link
Dibujar contornos puede ocupar mucho espacio valioso, por lo que jugar con tonos oscuros y claros podría
ser la solución.
La luz y la oscuridad pueden cambiar de función según el color de fondo o la fuente de luz.Use ambos
juntos para formar forma, volumen y profundidad..
Los tonos más oscurosse utilizan no solo como sombra, sino también para dar profundidad y elementos de contorno.
105
Espaciamiento y tangentes
El espaciado se refiere alo lejos que están las cosas. Si dos áreas del dibujo de píxeles se tocan, el espectador puede
tener dificultades para saber qué está pasando. El espaciado utiliza un espacio limitado para incluir la mayor cantidad
de información posible. Si usas demasiado espacio en tu sprite,dale más espacio para respirar!
Por ejemplo: una boca necesita espacio por encima y por debajo, para que puedas decir que es una boca. Si la
boca tocara la barbilla, o incluso la nariz, no estaría claro qué se supone que debe ser.
Pueden dificultar la legibilidad como se ve enCapítulo 1(p9) ,Capítulo 3(p20) y en este capítulo de la página
anterior que acabas de leer! No son malos por decir, pero pueden ser molestos.
106
Otra forma es reorganizar los píxeles.
arreglar esto.
107
Mover áreas y agregar más espacio
La paleta no permite un castaño oscuro. Así que para pintar el cabello tenemos que usar el más oscuro
108
Sprites y Fondos
Los sprites siempre deben destacarse de los fondos para fines de juego.
¿En qué quieres que se centre tu audiencia?
Si no estás haciendo un juego,aún desea distinguir los fondos de los objetos.Esto sucede
en otros medios como la Fotografía. Esto es para legibilidad.
Adición de contornos
Corrección de colores
109
Estudio de caso: Kirby y el espejo asombroso
Kirby y el espejo asombroso(GBA) tomó la decisión de incluir pinturas muy detalladas como fondos. No
es de extrañar que se usaran las 3 técnicas:
Los colores del fondo son más suaves para complementar el primer plano.
110
Suavizado y tramado
Es posible que no se puedan utilizar técnicas más avanzadas, como AA y tramado, ya que
tomar espacio crítico.
El sprite King Dedede original (izquierda) tiene AA sutil para limpiar las curvas. El sprite de la derecha es igual de
El tramado (sombreado a cuadros) es bastante inútil en sprites de pequeña escala.El tramado funciona bien en pixel
art o superficies texturizadas más grandes. Hace que tu sprite se vea más áspero y menos suave.
111
Cómo detectar problemas de legibilidad
en su resolución real.
por Michafrar
Borrando la imagen.
por Michafrar
Waifu2x
bueno.
112
Conclusión
Grande o pequeño, el pixel art ocasionalmente puede crear confusión. Con espacio limitado a veces tenemos que
hay que sacrificar los detalles para mantener las cosas claras y legibles.
Si no está seguro de qué tan legible es su sprite,no tengas miedo de volver atrás y arreglar las cosas!
Trabajar en pequeño es un desafío, pero te hará darte cuenta de lo importante que es cada píxel.
Por qué importa cada píxel I Por Espaciamiento y tangentes Sombra suave
qué importa cada píxel II Anti-Aliasing & Dithering Cómo sprites y fondos
Características reconocibles detectar problemas de legibilidad
¡Con solo unos pocos colores puedes crear la ilusión de 3 colores o más!
115
Cuándo usar tramado
PERO
Grandegradientes sombreados en celdas sin tramadoresulta enPLANOyA RAYASáreas
Con el tiempo, los gráficos del juego agregaron más y más colores. El tramado es menos común ahora.
Requiere mucho espacio para ser utilizado correctamente, por esorara vez se encuentra en sprites
el arte del juego y aprende de tus favoritos.Aprenderás mucho con solo observar.
• Antecedentes: cielos, espacio, vastas áreas que de otro modo podrían parecer vacías o planas.
116
Este es un duende deMonstruo en mi bolsillo(NES). La versión completamente tramada en la parte superior izquierda es la
original tal como aparece en el juego dentro de las limitaciones de NES. Los demás son versiones modificadas.
PROS CONTRAS
- Textura innecesaria
SOMBREO SUAVE
+ Pequeños sprites y mosaicos - Puede parecer plano
117
tramado a cuadros
Estos son los patrones más comunes que encontrará, ya que ofrecen la mayor variedad.
tramado desea entre 2 tonos. Todo aplicar estilo libre al tramado un poco,
longitud del degradado o cuántos (2x1 o 2 píxeles que se tocan entre sí).
tonos tienes.
118
Tramado para curvas
Las curvas pueden ser más difíciles de tramar, así que asegúrese de jugar para ver cómo se ve.
Algunas veces puede obtener píxeles doblesque parecen fuera de lugar. Cuando esto pasa,puede
seleccionar y deslizar el tramado que ya tiene, en lugar de rehacerlo.
Si su tramado es parte de un
ser inevitable.
par de píxeles.
1 mosaico, duplicado 2 fichas, una
2 mosaicos diferentes.
Cuando no tenga limitaciones de color, debe utilizar el difuminado con precaución. Lo mejor es
evitarlo.Su objetivo es que el tramado mezcle los colores a la perfección sin que se destaquen..
Si la diferencia entre 2 colores es demasiado alta (alto contraste), probablemente no deba tramar.
Con bajo contraste, se siente más suave. con alto contraste, ¡es bastante duro!
120
Otros patrones
Lineas paralelas
Un tipo de tramado que se encuentra en los juegos de Genesis/Mega Drive, pero que se puede usar hoy en día con fines estilísticos.
Para los televisores CRT, son 50-50 difuminados más efectivos que las fichas regulares.
Las líneas se pueden usar como manchas o desenfoquecon paletas limitadas. Las líneas funcionan mejor para el desenfoque que
los tableros de ajedrez sí.Esto solo funciona para animaciones limitadas, NO para animaciones fluidas..
Las damas son más adecuadas para degradados. Las líneas paralelas eran para sombras intermedias y los trucos de opacidad para
121
Líneas descontinuadas
un efecto limpio.
Mazmorra misteriosa de Pokémon Strip Poker: aSGoC (PC-DOS) lombriz de tierra jim
3: EoS (NDS) (Génesis/Mega Drive)
abolladuras
Este tramado es útil para texturas si tiene poco espacio. Este tipo
122
tramado entrelazado
El tramado entrelazado (tejido, superpuesto, etc.) tiene parches de tramado que entran en parches mucho
más oscuros o más claros. El degradado a veces regresa a parches más claros en su camino hacia el tono
Si tiene problemas para hacer esto manualmente, haga 2 capas de tramado y haga que se superpongan.
Todavía puede hacer esto manualmente, ¡pero tener 2 capas hace que sea más fácil no perderse!
El difuminado aleatorio no tiene mucho que pensar.. Aún debe asegurarse de que el degradado
fluya sin problemas de claro a oscuro. El tramado aleatorio se puede obtener colocando píxeles al
azar aquí y allá. Sin embargo, por lo general es el resultado de herramientas de filtros, manipulación
fotográfica o pintura en aerosol.
Por supuesto, el tramado aleatorio se puede hacer a mano. Puedes crear este efecto desde cero, si lo deseas.
Comienzas pintando varios tonos de colores y terminas mezclando los bordes con ruido aleatorio.
124
Tramado estilizado
¡Se creativo!
Las formas anteriores de tramado eran bastante toscas. Con difuminado estilizado,puede aplicar
sus propias texturas para crear degradados sin esa sensación arenosa! Recuerda que necesitas
espacio para usarlos.
¡El tramado estilizado es una excelente manera de comenzar y divertirse con las texturas!
La aventura de Kirby (NES) Street Fighter Alpha: El sueño de los guerreros (GBC)
125
Incluso puede tomar difuminados aleatorios (de la página 10) y convertirlos en conjuntos de mosaicos repetitivos
para evitar que se vean caóticos. Esta aleatoriedad esrevisado, en vez desuelto.
Los degradados son la transición de la luz a la oscuridad. Las texturas son la sensación del material. El
tramado estilizado puede ser una combinación o ambos, o simplemente gradientes regulares. Las
El tramado puede proporcionar textura si lo usa para parches, pero no como degradados..
126
Estudio de caso: SMW2: Isla de Yoshi
La isla de Yoshi está repleta de difuminados estilizados. Solo en esta captura de pantalla hay muchos ejemplos.
Otra cosa a notar es quela isla de yoshioptó por tener degradados suaves con sombreado de celdas para el cielo.
127
Más que gradientes
Una forma moderna de usar el tramado es romper el sombreado de celdas. Incluso con colores ilimitados, el
difuminado a veces imita un sombreado suave. Piense en este uso de tramado como unpincel para difuminar.
El punto culminante del cuerno de Gengar se funde con el tono principal más oscuro, en lugar de estar sombreado en
celdas. Puedes hacer la misma técnica, pero solo usando un tono de búfer en tus rampas de color.
mezclando colores
El difuminado puede ayudarte a mezclar colores, especialmente en pantallas borrosas. Sin embargo, solo
128
Veamos esta técnica en uso con algo de interpolación paralela utilizada en este sprite de Genesis/Mega Drive.
Los resultados no se ven bonitos según los estándares modernos, perose veía bien en CRT TV's.
Los gráficos por computadora después de este punto tendrían más colores e incluso capas transparentes (alfa), por
lo queesta técnica es extremadamente rara hoy en día. Sin embargo, las pantallas gráficas más antiguas, como
el modo CGA de 4 colores, se beneficiaron enormemente de tener valores adicionales al combinar cian, magenta,
blanco y negro.
Hablamos brevemente de esto encapítulo 3 (página 25)¡donde con 4 colores puedes obtener fácilmente más
valores!
129
Pinceles para tramado?
Cuando el difuminado requiere mucho tiempo, ¡hay formas de usar pinceles de difuminado! Algunos de
estos programas usan patrones de tramado o pinceles que lo ayudan a acelerar las cosas.
Pintura de índice para Photoshop que hace que el difuminado sea más fácil de manipular.
Artículo: danfessler.com/blog/hd-index-painting-in-photoshop
Vista previa de vídeo: youtu.be/7Q36EyvaYG8 Apoya el
juego independiente¡Abismo!www.chasmgame.com
Recuerde que el arte de píxeles se trata de control, ¡así que asegúrese de corregir manualmente sus resultados!
130
Antes de las capas transparentes...
El Sega Genesis (Mega Drive) se basó en gran medida en el tramado alineado.Combina colores cuando
El Super Nintendo tuvo dithering al principio de su ciclo de vida, pero los juegos posteriores usaron capas alfa adecuadas.
131
El tramado no es nuevo
(Rayado transversales la forma más antigua deusar patrones para mostrar el tono y el valorusando solo 1
color. Se puede encontrar en dibujos a lápiz, grabados, grabados, bloques de madera, etc.
Puntillismotambién requiere pequeños puntos distintos para crear una imagen. El arte tradicional no se limita a una
Gráficos monocromáticos, como MacPaint, solo puede mostrar 2 colores: blanco y negro. Muchos
132
Conclusión
Lo más probable es que no lo uses mucho. Puede llevar bastante tiempo y ser complicado hacerlo bien.
Sin embargo, el tramado es una herramienta poderosa. Hay algunas cosas maravillosas para
crear con cada patrón.Si elige tener tramado, utilícelo con moderación. No debe sobresalir
ni chocar con otras imágenes.
133
Capítulo
Perspectivas de juego
6
Introducción
En la mayoría de los juegos 2D, no hay una perspectiva real ni puntos de fuga. Como artistas y diseñadores, ¡necesitamos
pensar fuera de la caja para crear mundos explorables! Muchas de las perspectivas del juego en este capítulo
son proyecciones pseudo 3D, lo que significa queimplicar3 dimensiones -largo, ancho y profundidad-
135
Vocabulario de perspectiva
He aquí un repaso rápido de algún vocabulario de perspectiva que se usará con frecuencia en este capítulo.
Avión
Eje
Una línea geométrica con una dirección fija.
El eje Y es hacia arriba y hacia abajo, el eje X es hacia la izquierda y hacia la derecha, y el eje Z va
Punto de fuga
Debido a la perspectiva, dos líneas paralelas se encuentran en un solo
en un solo punto.
Proyección
Ortográfico
Vistas planas sin perspectiva.
Evitaremos las matemáticas tanto como podamos, pero nos referiremos aAncho como
136
Proyecciones ortográficas
Desplazamiento lateral
Cima
isométrica
45° dimétrico
Oblicuo
137
Dibujos multivista
Estas vistas carecen de profundidad, por lo que puede usardesplazamiento de paralajepara agregar perspectiva.
Con solo 2 planos visibles y sin puntos de fuga, todo parece unrejilla
138
Vista lateral
Este es elperspectiva más común para juegos 2D.A menudo se asocia con juegos de plataformas.
y shoot'em ups, ya que se centra en el movimiento vertical y horizontal en 1 solo plano.
Los desplazamientos laterales 2D vienen en muchos géneros, pero generalmente se adhieren a vistas similares, no solo 1:
vista de arriba hacia abajo (La cámara está ligeramente por encima del suelo)
vista oblicua (La parte delantera es plana, pero los lados están inclinados)
139
Crónicas de Castlevania (PS1) País de Donkey Kong 3 (SNES)
140
vista de arriba hacia abajo
La cuadrícula está formada por mosaicos cuadrados, lo que hace que la creación de mundos y entornos sea muy sencilla.
A menudo se asocia con el mundo exterior de itinerancia libre y es adecuado para la exploración.
Frente > Superior Frente ≈ Arriba Frente = Superior Arriba > Frente
Como los Beat em' ups. ángulo común. Más fácil para juegos de fichas. Bueno para la altitud.
Mercenario (Arcade) Arriba (LR): Mother 3 (GBA), Pocky & Rocky (SNES)
Abajo (LR): Advance wars (GBA), The Story of Thor 2 (Sega Saturn)
141
Los juegos de arriba hacia abajo generalmente ven el mundo desde arriba, a 45 °.
Los zombis se comieron a mis vecinos (SNES) Mario & Luigi: Superstar Saga (GBA)
Sin embargo, algunos juegos de rastreo de mazmorras (como 2Dzeldatítulos) mire en una habitación con una cámara colocada directamente
encima. Esta vista superior ya no es ortográfica y se asemeja a una vista en perspectiva de 1 punto. Como resultado, la habitación está en
perspectiva mientras que los objetos no lo están. Aparecen en un ángulo de arriba hacia abajo en su lugar.
Por extraño que parezca,fuera de las mazmorras, los juegos de Zelda adoptan la vista tradicional de arriba hacia abajo. Esto se ve
Todos los objetos se ven en una cámara inclinada a 45°, pero la habitación está a 90°. Todo parece correcto cuando los
sprites están cerca del muro norte (A). Cuando los sprites están cerca de la pared sur (B), no tienen sentido.
Técnicamente, el personaje debería aparecer como (C) pero no serías capaz de verlo muy bien.
Al voltear la pantallaal revés, podemos ver por qué los sprites enBse ven muy mal, pero la perspectiva
sigue siendo la misma. Es como si Link estuviera tirado en el suelo.
143
Vista superior
Esta es una subcategoría de vistas de arriba hacia abajo. Esta vista esEXACTAMENTE 90°(si estuvieras
mirando directamente hacia abajo). Esta elección de diseño es poco común y solo funciona para un
conjunto particular de tipos de juego. Puede encontrar ejemplos del mundo real de este estilo en mapas
Cobra gemela II (Arcade) Contra 3 (etapa 2) (SNES) Línea Directa Miami (PC)
Algunos juegos del Modo 7 tienen mapas en esta vista transformados en el juego para simular otras vistas.
Esta vista es buena para vistas aéreas, pero carece de profundidad. Si desea centrarse
en la altura, las siguientes vistas son mejores opciones:De arriba hacia abajo,
144
Vistas paralineas
Estas son vistas que dan una calidad tridimensional en una pantalla 2D. Esta
axonométricaformas*
avión. avión.
está inclinado.
* Hay más vistas axonométricas, como "trimétrica", por lo que si desea una lectura más profunda, busque libros de Francis DK Chi ng. 145
Vista isométrica
El pixel art isométrico a menudo se asocia con el movimiento diagonal, ya que la cuadrícula tiene
forma de diamante en ángulos múltiplos de 30°. Sin embargo,no puedes tener líneas exactas
de 30° en pixel art, por lo que todos usan escaleras de 2 píxeles. Esto es técnicamente 26,5°,
pero es lo más parecido a las líneas de 30°.Construir mundos es mucho más fácil con este
Arriba (LR): Landstalker (Megadrive), Final Fantasy Tactics Advance (GBA), Solstice (NES) Abajo
(LR): Harry Potter 1 (GBA), Final Fantasy Tactics Advance (GBA), Kingdom Hearts: CoM (GBA)
El aspecto único aquí es quela rejilla está hecha de mosaicos de diamantes, no cuadrados.
Esto hace que sea más difícil encajar en cuadrículas cuadradas y alinearlas.
Estos mosaicos no se alinean bien en cuadrículas cuadradas, pero son mejores para el
arte de píxeles de forma libre. El área donde se conectan las líneas está limpia.
conjuntos de mosaicos. Desafortunadamente, las áreas donde las líneas se cruzan son
No importa si prefieres conjuntos de fichas o no.Siempre necesitarás una cuadrícula que te ayude a guiarte.
Si usa fondos de forma libre para juegos, deberá convertirlos en un mapa jugable. Puede parecer más único,
pero puede ser una pesadilla programarlo si tiene que convertirlo en un mapa. Asegúrese de que lo que dibuje
Una pieza isométrica de forma libre Invitado Los fondos isométricos en mosaico de
artista: Temmie Chang Arco luminoso (NDS)
Dentro de una cuadrícula isométrica, puede construir todo tipo de elementos. No todo tiene que ser necesariamente en bloques.
Los cubos y cilindros pueden tener mucha personalidad y vienen en todas las formas y tamaños.
Cuando los observa, usted: Cuando los construyas, tú: Serás más
Nota al margen: la observación es tan buena como el conocimiento del artista, se recomienda construir primero para que comprenda bien cómo observar.
1. 2. 3. 4.
148
Dibujar un círculo en un plano vertical
1. 2. 3. 4.
1. 2.
3. 4.
5. 6.
149
Convirtiendo sprites a una vista isométrica
1. 2. 3. 4.
1.Tenga listo su sprite de desplazamiento lateral (use líneas para guiarlo si es necesario).
2.Sesgarpor30°(0.5)
150
Traducido del inglés al español - www.onlinedoctranslator.com
La mayoría de los campos isométricos tienen áreas planas. Puede tener diferentes altitudes, pero a menudo tendrá
plataformas cúbicas, torres o mesetas. Los terrenos planos son los más fáciles de programar y dibujar. No muchos videojuegos
2D tienen pendientes. Este ejemplo a continuación deEl curso de los sueños de Kirbyes una buena referencia para pendientes
isométricas.
151
45° dimétrico
Esta es una vista muy poco común.funciona bien siun mapa tiene estructuras altas
que no quieres que tu obra de arte se interponga en el juego.
Se aplican las mismas técnicas de arte isométrico, pero en lugar de 30°, solo 2 lados son 45°, por
lo que esencialmente sus pautas son series de píxeles individuales de 1x1. El eje vertical es de 90°
LR: Earthbound (SNES - Fourside SOLAMENTE), Boktai 2: Solar Boy Django (GBA), Nox (PC)
152
Oblicuo
Los planos frontales son ortográficos, por lo queplano y sin perspectiva. Sin embargo, todos los
demás planos se inclinan hacia un lado y permanecen paralelos. Por lo general, tienen una
+
inclinación de 45°, pero ocasionalmente pueden ser líneas de 2x1.
Los planos frontales siguen las reglas ortográficas de una cuadrícula de 90°.
La parte superior y el lateral siguen líneas de cuadrícula de 45° de 1x1 píxeles (pero a vecespoder
Si tiene problemas con esta vista, puede usar la técnica de sesgo (mencionada anteriormente en la página 17) para convertir los
mapas de arriba hacia abajo en oblicuos. Simplemente incline el mapa verticalmente por45° (o 1 unidad) en lugar de 30°.
153
Perspectiva verdadera
El arte de píxeles que no se usa para juegos generalmente sigue las reglas del arte, la
mismo tamaño.
R: Perspectiva verdadera
Un objeto visto desde un ángulo de arriba hacia abajo también obedecerá las reglas normales de las perspectivas y tiene
su forma sesgada hacia un punto de fuga. No importa qué punto de vista, las líneas estarán sesgadas. Los juegos que
tienen entornos 3D con texturas de sprites se pueden manipular para que parezcan una vista tradicional de arriba hacia
True Perspective no es exclusivo de los juegos en 3D. En las ilustraciones del juego se puede imitar fácilmente la perspectiva.
general, lleva demasiado tiempo y energía hacer esto manualmente, por lo que los juegos más nuevos usan sus motores para cambiar el
Aquí hay algunos juegos que cuentan con sprites escalados, manuales y/o automáticos.
155
Bonificación de lógica de píxeles n.º 6
durante unIwata preguntaacerca deLa Leyenda de Zelda: Un Vínculo entre Mundos(N3DS), el director Hiromasa
Shikata y su equipo informaron que pasaron por muchas pruebas y errores con la vista de arriba hacia abajo. Con
esta perspectiva en 3D, en realidad no ves gran parte de la cara del personaje, sino solo la parte superior de su
serie) reveló que muchos objetos en el juego se colocaron en ángulo para mejorar la visibilidad.
lidad
“
cabeza. Tendrías problemas para decir que era el personaje jugable Link. Más tarde, Eiji Aonuma (productor de la
“
problemas. Si lo haces con sinceridad, no parece interesante en absoluto.
Satoru Iwata
un ángulo de 45°.
156
Cyo
unproblemas de ridad
Engatillo cronoen SNES (y más tarde en PS1 y NDS), viajas por el mundo en una vista de arriba hacia abajo.
En la última parte del juego, un barco volador conocido como "El presagio negro” aparece y flota sobre la
tierra. La forma de esta construcción es bastante peculiar.Es fácil de malinterpretar.
Cuando construyes una escena isométrica,usa una cuadrícula y líneas de guía para ayudarte.
1. 2. Sigue el exterior
esqueleto de nuestro
3. 4. 5.
Formas de bloque dentro del árbol. Definir detalles y sombreado. Añade reflejos y sombras.
Esto no es solo un tutorial sobre cómo dibujar árboles. El punto aquí esdeconstruir
158 formas y ayúdalos a guiarte.Puedes usar esto para CUALQUIER PERSPECTIVA!
Mostrando escala
La mayoría de las proyecciones muestran el mundo del juego a vista de pájaro. Los videojuegos 2D generalmente te hacen mirar
una caja de zapatos desde arriba o desde un lado, ya que son los ángulos de cámara más fáciles. Sin embargo, mostrar un
En los juegos 3D, ves tomas de ángulo bajo enSombra del coloso(
de historias, por lo que en los juegos de pixel art 2D solo los verás
Metroid Zero Mission (GBA)
en las escenas.
Puede distinguir las vistas en 2 planos para dar una idea de la escala.
LoZ: Gorra Minish (GBA)
Con los juegos, la proyección que uses terminará definiendo la experiencia del jugador. No se sienta limitado
por las 7 proyecciones discutidas en este capítulo. Recuerda que el jugador observará esta vista del mundo
durante todo el juego. Con ilustraciones, siéntase libre de dibujar en cualquier perspectiva que desee. ¡Tienes
más libertad pero aún tienes que seguir las reglas básicas de la perspectiva!
160
Traducido del inglés al español - www.onlinedoctranslator.com
Capítulo
Limpiar
7
Introducción
La limpieza describetodos los toques finalesy posiblemejoras. Incluso cuando crea que ha terminado,
puede haber algunos ajustes que podría hacer antes de dar por terminado el día.
evalúen.
Si desea ponerse al día con los consejos de limpieza, eche un vistazo atrás y verifique:
Hardware de la "vieja escuela" Líneas irregulares Escogiendo colores II más las siluetas
Algunos videojuegos dejan gráficos sin terminar en sus datos para usarlos como
cerca a ellos.
refinado al final.
Estos sprites eran muy toscos en sus primeras etapas. Son fotogramas intermedios de una animación. Es
más fácil de usar manchas de colores para los intermedios. De esta manera, se trabaja más con
completamente diferentes.
Versión temprana Versión final
164
Estos duendes deLa tienda de animalesyZangiefhan visto múltiples cambios. Las
Jojo's Bizzare Adventure (Arcade; DC, PS1) y Street Fighter Alpha 2 (Arcade)
Cuando no hay mucho espacio para las líneas, los artistas no confían mucho en el arte lineal.
Con pixel art, es común que la versión final se vea completamente diferente
del boceto, como se puede ver con Zangief.
Si tiene problemas para obtener detalles en su arte lineal, intente usar formas en lugar de arte lineal.
165
Ajustando tu sprite
Siempre puedes hacer mejoras en el mismo estilo artístico. En elmega hombre xjuegos en super
Nintendo, el protagonista no ha realizado cambios en su sprite predeterminado. Sin embargo, el personaje
A Zero se le dan colores más brillantes, una postura mejorada, una silueta y formas más limpias.
ESTAS NO SON UNA LISTA DE VERIFICACIÓN. Usaremos estos ejemplos para simplificar en las siguientes páginas.
La paleta no es muy
La silueta es más fácil.
diferente, pero los reflejos Las posturas de cada pose son menos rígidas, más
distinguir y
y las sombras son intimidante Tienen más personalidad.
mucho más ancho
más pronunciado.
La cara se rehace por completo. El ojo derecho es más limpio y La nueva silueta de Barry está más
la cuenca del ojo ahora es de 90°. La sonrisa es más ancha y más cerca de su hoja de modelo. Sus
Sonic y nudillos
Prototipo de Sonic 3 Sonic 3 y nudillos
encerrado en Sonic 2
Entre estas versiones, la única gran diferencia se ve en el retrato de la derecha. Los de la izquierda y del medio solo
tienen diferencias en los reflejos y la forma del cabello. El del medio (usado en el juego final) tiene un reflejo brillante
en su ojo. El ojo es mucho más nítido también.Recuerda que 1 píxel puede marcar la diferencia.
Por alguna razón, elsónico 2sprite de Knuckles tiene tramado rojo alrededor de su boca.
Esto no se lee bien en absoluto y parece ruido aleatorio (píxeles perdidos). Parece
bien sin los píxeles rojos, y realmente no necesita interpolación.
bien.
El sombreado en el viejo.
no respetaba la luz
fuente.
169
Formas más limpias
arte vectoriales muysimilar en este sentidoal arte de píxeles. El arte vectorial está hecho de formas geométricas que se
pueden escalar infinitamente. Las formas no tienen desenfoque y se pueden editar libremente.
Retrato vectorizado de
Engranaje de metal sólido 3:
Subsistencia (PS2)
MGS3 (PS2)
Es como si cada bloque de color fuera 1 mosaico. Cuando estas formas están limpias y bien
170
Otra forma de arte que tiene que ver con el lenguaje de las formas esImpresión xilográficayImpresión en linóleo. Se
centra en yuxtaponer siluetas o formas. algunos elementos deNo unlas imágenes ocurren en grabados en madera.
Una comparación final que podemos hacer con el arte utilizando el lenguaje de formas se basa en notas deClases de dibujo de
Disney de Walt Stanchfield. En estas notas, habla del término “líneas perezosas”.
“
Cosas como forma, textura, suavidad o dureza.
Es como lo que obtienes cuando rastreas algo, una similitud general de línea.
walt stanchfield
Esto puede tratarse de líneas, ¡pero también es relevante para las formas y el
sombreado! La misma idea se puede aplicar apinturasy por supuesto …arte de pixel! 171
No se trata necesariamente de cuán limpia es cada forma individual.
Al igual que con el arte de alta definición o el arte tradicional, es más parecido a
qué tan bien aplicas las pinceladas y cómo todo encaja en tu pieza final.
habilidades de dibujo.
Shin Megami Tensei II (PS1)
Las ilustraciones difuminadas también están compuestas por formas, y el difuminado combina el sombreado de la celda.
172
Tus dibujos serán,empezar
con formas de luz y
sombraincluso si prefiere
sombreado detallado...
detallado.
Madre 3 (GBA) y Alundra (PS1)
Dominar esto es como un dibujo normal; sucede con el tiempo. verás comoCierta ubicación de
píxeles puede transmitir luces y sombras mejor que las líneas..
Si está realmente interesado en el concepto de definir formas, consulte esta serie deMarco Bucci.En
el episodio 4, Bucci destaca esta teoría dentro de la pintura, pero también puede
traducir a pixel art!
Arreglar las formas de tu pixel art también es subjetivo ya que cada artista tiene sus propias preferencias y
hipótesis Es muy recomendable aprender de los demás. Si te interesa el meollo de la cuestión,
asegúrese de echar un vistazo a la comunidad de Pixelation.org. 173
Múltiples versiones
por Michafrar
Cuando no está seguro de qué se ve mejor,crear múltiples versionesy hacer que otros voten por su
favorito. Si está solo, tómese un descanso y compare con nuevos ojos para elegir uno usted mismo.
Con poco espacio, puede ser complicado pixelar exactamente lo que quieres. Sigue intentándolo hasta que consigas un resultado decente.
seguro de todo el sprite? Intente hacer varios bocetos para que pueda
174
La herramienta de selección
La herramienta Lazo también puede ser útil, pero a veces es demasiado sensible
Si su trabajo no está en el modelo, puede hacercambios simples con la herramienta de selección. esto parece bastante
obvio, pero no olvides que esta herramienta existe. Recuerde ajustar y arreglar las cosas sobre la marcha.
Puede arreglar fácilmente las cosas en cualquier momento y mover las piezas:
175
Aquí hay un ejemplo de un sprite que se mejoró usando la herramienta de selección.
Ambos sprites fueron hechos por el mismo artista (Michafrar).
Antes Después
176
Escalado y rotación
Cuando tiene la tarea de reducir un sprite, debe sacrificar los detalles y prestar más atención a
la legibilidad. Vuelva a mirar el capítuloLegibilidady las paginas“El tamaño importa…"
Cambiarás entrela herramienta cuentagotas y lápiz¡mucho! Así que haz un buen uso de ellos.
Este es uno de los mejores ejercicios para aprender pixel art de forma intuitiva.
La modificación de los sprites reducidos te hará pensar dos veces antes de colocar los píxeles.
177
La misma limpieza se puede realizar en sprites ampliados, pero será más una tarea de dibujo.
A menudo es mejor empezar en grande e ir más pequeño que al revés.
por Michafrar
por Cocefi
Sin embargo, la limpieza se usa con más frecuencia para los sprites rotados. Puede rotar partes del cuerpo o fondos
más a menudo que cambiarles el tamaño. El proceso es el mismo: cincelar y agregar píxeles a medida que cae el ojo
que cuán borrosa o clara es una imagen. El color, el contraste y las formas también
juegan un papel importante. Si utiliza un filtro de "nitidez", puede ver cómo se ven
afectados los colores y la forma de una imagen. Sin embargo, estamos aquí para hacerlo
Aplica los consejos de esta página solo si crees que son necesarios.Aquí hay algunos
métodos para mantener sus sprites nítidos y legibles, incluso desde una gran distancia.
mano 1se dibujaba con líneas, pero creaba manchas de color ilegibles. Es más fácil diferenciar los
objetos usando formas limpias de luz y oscuridad enmano 2. ¡Un mayor contraste también lo hace
más legible!
179
por Yaa
Varios ajustes posibles
Contraste
Sin ajustar ningún píxel, puede cambiar el contraste de colores. Simplemente haga esto volviendo a colorear cada rampa de una
paleta de colores o usando controles deslizantes de color y luego arreglándolos manualmente. Tenga en cuenta: El contraste puede
tangentes
Este es el mismo principio que se ve en los tutoriales sobre cómics y guiones gráficos. Los contornos tangentes pueden
destacarse. Si usa esto en la animación, puede salirse con la suya, ¡así que no se preocupe por esos casos!
Sombra suave
Retocar colores no suele ser suficiente, también debes considerar lo siguiente:fuentes de luz, Destacar,
oscuridad,áreas. Tendrás que jugar con las formas, la luz y las sombras para hacer los arreglos
necesarios.
180
Traducido del inglés al español - www.onlinedoctranslator.com
Los cambios también pueden implicar hacer referencia a hojas de modelos de personajes o cómo se construyen los diseños. Si está
agregando/reduciendo detalles, siempre es bueno tener material de origen para tomar decisiones.
Dimensiones
mover fácilmente las piezas. Pixel art es fácil de editar, por lo que
Perspectiva
181
De principio a fin - yo
Para este sprite, tenía que ser eficiente en cuanto al tiempo y decidí
sentirse bien, luego otro para crear un arte lineal más limpio.
no delineé la cara, porque el tamaño del lienzo es muy restrictivo y hay poco espacio para los detalles. Así que por si acaso
mantengo el boceto en una capa. Las manos son lo suficientemente grandes, por lo que fue posible delinear. No es
frecuente que puedas pixelar cada dedo.
Hice el rabillo del ojo más definido. Sin embargo, la cara necesita algunos ajustes para quedar bien.
182
Para este sprite hice múltiples versiones de su sonrisa y decidí ir con mi favorito (que era con
la boca cerrada). Vuelva a consultar elVarias versionessección de este capítulo!
En estas etapas finales, decidí modificar los colores dentro de la línea de arte para dar una mejor sensación de contraste,
al mismo tiempo que agregaba detalles en la parte inferior de la imagen. Con una línea de arte más clara en la parte
inferior, implica una sensación de grosor de línea que puede ser difícil de ver con un contorno negro puro. Vemos este
Para resaltar el contorno, agregué píxeles más oscuros para hacerlo más nítido. Esto se vincula con
el Nitidezsección de este capítulo.
183
De principio a fin II
Las piernas atravesaronmúltiples cambios. Se hicieron muchas versiones diferentes para hacer la pose más
dinámica. Como hemos visto anteriormente, es bastante comúnprobar diferentes diseños antes de
conformarse con uno final.
Una vez que las piernas están completas, másse agregan detallesal resto del sprite. De vez en cuando, el
artistavuelve a ajustarpiezas previamente completadas. Esto implica mover partes con la herramienta de
selección y volver a dibujar partes desde cero. Los cambios necesarios quedan a criterio del artista. Una vez
que están satisfechos con el aspecto final, ¡el sprite está completo!
184
De principio a fin III
Escritor invitado:Yaa
final.
185
Conclusión
El proceso de “limpieza” puede no parecerle una tarea obvia al principio. Es bastante sutil en la ejecución, pero
puede marcar una gran diferencia.
La limpieza en pixel art essimilar a la limpieza en Animación 2D. Comparten la misma mentalidad y lógica.
Revisa los borradores originales y literalmente los limpia repasándolos nuevamente con detalle.
La mayoría de los cambios ocurren cuando recibe comentarios o autocrítica su trabajo, al final.
¡No dudes en mejorar tus sprites, incluso cuando creas que has terminado!
Afilar
Varios ajustes posibles
186
Capítulo
subpixelado
8
Introducción
Es probable que haya oído hablar de subpixeling. A menudo se ve enanimaciones inactivasy muymovimientos
sutiles. Muchos juegos de la era dorada usaban esta técnica. Estos gráficos han inspirado a los artistas de hoy.
El píxel es la unidad más pequeña de resolución. NO podemos ir más pequeños, ni dividir píxeles
entre dos cuadrados. Así que tenemos que fingir yencontrar una manera de imitarlo.
No siempre es necesario, pero es un desafío divertido para perfeccionar tus habilidades de animación.
Cuando vea este ícono, significa que la imagen tiene una versión animada. Puedes abrir estas animaciones
y hojee los marcos. Se pueden encontrar en la carpeta digital que viene con este capítulo.
188
Cuando cómo
Para imágenes sin movimiento, el subpixelado se conoce como suavizado y grosor de línea. En el caso de los sprites
animados, se denomina animación subpixelada.Ambos se basan en la misma técnica para crear ilusiones:
suavizado.En general, el término se utiliza para hablar exclusivamente de animación. ¡Solo para que sepas!
Entrar y salir
Para acelerar o desacelerar las animaciones, los artistas espacian sus dibujos dentro de
cada cuadro más juntos o más separados. Esto se puede ajustar fácilmente. Es difícil
dibujar elementos intermedios muy juntos sin efectos de oscilación no deseados; para
Iconoclastas (PC, PS4, Switch) evitar que esto suceda, subpíxeles los intermedios en su lugar.
Animaciones inactivas
Cuando los personajes están inactivos, puede optar por crear animaciones dinámicas,
movimientos sutiles o un poco de ambos. Los subpíxeles le darán ese detalle extra que de otro
Cuando animas grandes movimientos, algunas partes pueden permanecer inmóviles. Dar
subpíxeles a esas áreas ayudará a que se destaque menos. Si animas en alta definición, es posible
que estés familiarizado con las técnicas de ebullición de líneas para evitar que las cosas se detengan.
Pequeñas resoluciones
Cuando tienes un lienzo de 32x32 píxeles o menos, es más difícil hacer sprites legibles.
Además, es aún más difícil crear movimientos creíbles en un espacio tan reducido. Es más
Los movimientos en los que los personajes u objetos apenas se mueven pueden beneficiarse fácilmente de
algunos subpíxeles.
Los píxeles son como tazas de agua. Podemos verter un poco de agua en la siguiente taza. Se distribuye en copas de 2
píxeles,pero el total sigue siendo una taza de agua de 1 píxel.Este es uno de los principios del subpixelado.
Al animar en subpíxeles,
El valor y el color se transfieren al siguiente píxel.
No es necesario cambiar el valor de cada píxel. ¡A veces puedes mover un píxel entero normalmente! No tiene que
mover necesariamente cada píxel en el lienzo, ya que eso podría crear bandas. Algunas partes pueden permanecer
quietas, sin ningún cambio. La animación y la legibilidad son más importantes que exagerar los subpíxeles.
190
Traducido del inglés al español - www.onlinedoctranslator.com
Bono de Pixel-Logic #6
Si las tazas de agua no son suficientes, intente ver los subpíxeles como tazas de líquidos coloreados, como leche y café.
1 taza llena se puede verter de manera diferente, por lo que puede tener más líquido en 1 taza que en la otra.
Los subpíxeles no siempre son ½ píxeles. No es necesario que se desplacen más del 50 % exactamente.
No se moleste en usar las matemáticas para determinar lo que necesita. Solo elige un color que seaalgo
así como entre. Siéntete libre de crear nuevos colores, ¡pero recuerda no perderlos de vista!
También puede llamar a esta técnica píxeles de natación, transferencia de píxeles o incluso sangrado de píxeles. Tal
vez intente ver subpíxeles como rastros de fantasmas o manchas que manchan los píxeles a medida que se mueven.
Cuando una línea o forma se aleja, puede dejar algo de AA atrás. Como un caparazón de su antiguo yo. ¡A veces parece
una fila de píxeles fantasma del cuadro anterior! Recuerda NO dejar ningún AA de color claro en el contorno.
Encontrarás más sobre esto en la página“Movimiento".
191
Grosor de línea
Hemos discutido brevementegrosor de líneaen el capítulo 2, así que siéntete libre de refrescar tu memoria. Los subpíxeles le
permiten hacer lo que normalmente hace en las ilustraciones HD. Este tipo de¡el subpixelado realmente es solo AA!
Conclusión
192
Grosor de línea dentro de sprites
Mario y Luigi:
Saga superestrella (GBA)
Metal Slug 6 (Arcade, PS2) Por el artista invitado YAA La leyenda de Zelda: Minish Cap (GBA)
Las grietas más delgadas en esta roca terminan en píxeles más claros. Las grietas más profundas usan píxeles más oscuros.
Pueden verse como un sombreado más claro o parches más oscuros, ¡y eso está bien!
En este acercamiento puedes ver cómo el suavizado actúa como subpíxeles. Enfócate en la máscara alrededor de los
ojos del personaje para ver la diferencia.Versión Xtiene un antifaz más grande queVersión Ylo hace.
1 2 3 4
por Michafrar
1. El ojo superior izquierdo tiene AA más claro en la versión Y, lo que hace que la línea sea más delgada.
2. El ojo superior derecho tiene una fila más clara de subpíxeles AA en la versión Y. AA más brillante en
194
Dividir píxeles
el equivalente
de dibujo
Los píxeles divididos son píxeles repartidos en 2 bloques. El píxel
195
engañando al ojo
Aquí tienes algunos trucos o creando ilusiones para engañar a la vista. Estos son extremadamente sutiles, eso sí.
Doblar formas
En esta enredadera verde, la parte diagonal tiene AA colocadas en diferentes esquinas. Estos subpíxeles empujan un
forma en una cierta dirección -todo mientras el contorno es idéntico! Cada píxel importa aquí.
lo que tu mente
percibe:
formas sesgadas
Adelgazamiento de formas
196
Contorno selectivo
Los contornos selectivos a menudo se confunden con contornos sombreados con AA alrededor de los bordes. Eso
es más o menos lo que son, pero tienen un propósito diferente. Entonces, ¿por qué el contorno roto?
Darkstalkers 3 (PS1/Arcade), Super Gem Fighter Mini Mix (Arcade, Saturn, PS1)
Los contornos selectivos hacen que los objetos de primer plano se mezclen mejor con su entorno. Cuando una
capa se desliza sobre otra, este AA cuidadosamente colocado hará que las transiciones sean más suaves.
El contorno selectivo es sólose utiliza en capas que tienen un fondo transparente.Si los objetos se superponen
en un entorno de color neutro, se verán más suaves con un contorno selectivo.Se trata de contexto.
197
Se complica cuando los fondos tienen áreas más oscuras y más claras. Esta bola puede verse bien frente a la roca, ya que el
contorno selectivo se mezcla bien con ella. Estos no se ven particularmente bonitos en todas las situaciones.
por Michafrar
Descripción general
más pesado
esquema selectivo
Encendedor
esquema selectivo
Puedes tener un contorno selectivo más claro o más oscuro para tus sprites; aunque
todo depende del fondo. Si los sprites suelen estar enambientes oscuros, tu podrías
quererdarles un contorno selectivo más oscuro: contornos sombreados con
píxeles más oscuros de AA para mezclar los bordes con el color de fondo.
198 Arriba: LOZ: Minish Cap (GBA) Abajo: Iconoclastas (PS4, Switch, PC)
Dirección
Observe cómo, fotograma a fotograma, la punta de la cabeza se encoge a medida que el personaje se mueve hacia abajo.
Entonces, ¿por qué pasa ésto? Se debe a cómo se mueven las líneas en los gráficos matemáticos. Aquí hay un
primer plano de una parábola. Para los expertos en matemáticas: lo que está pasando aquí esf(x): x² + n
En la animación, los jaggies no son un problema porque solo los ves durante una fracción de segundo. Sin embargo,
cuando tu curva apareceuna nueva fila, o se reduce auna fila inferior, evite las transiciones a píxeles individuales.
199
Esta es la regla general para animar subpíxeles en líneas, curvas y formas.
Puede ver que esta capa está curvada horizontalmente, por lo tanto, también tiene subpíxeles horizontales.
Se mueve hacia arriba y hacia abajo, pero en ocasiones subpíxeles a la izquierda y a la derecha.
Si te confundes, recuerda este truco con las manos. El pulgar es el movimiento principal y se mueve
independientemente. Los otros 2 dedos suelen apuntar en la misma dirección.
Los píxeles pueden ir hacia arriba o hacia abajo, pero también hacia la izquierda y hacia la derecha según el ángulo.
En los archivos de animación digital (incluidos en este capítulo), puede ver una
Por qué¿Parece que los píxeles suben/bajan cuando los movemos hacia la izquierda/derecha?
La animación parece que va en una dirección, pero algunas áreas se mueven en la otra dirección.
Veamos cómo se deforman los píxeles en la práctica, observando este sprite deRey de los combatientes XII (Arcade, PS3,
XB360). Los gráficos de píxeles 2D de ese juego se crearon con la ayuda de modelos 3D. Recuerde que este subpix-
Puedes ver el cuerpo completo Sin embargo, cuando hacemos zoom en el cofre, las líneas, las formas y
moviéndose hacia arriba y hacia abajo. el sombreado parecen moverse hacia la izquierda y hacia la derecha.
Un nombre que ayude a explicar el movimiento perpendicular podría serondulación; como una
onda viaja hacia arriba y hacia abajo, pero también hacia adelante y hacia atrás simultáneamente.
Los artistas a menudo tienen su propio término para las técnicas, así que siéntete libre de darle un
nombre propio. También podría llamarseondulación. Cualquier cosa que te ayude a visualizar esta
201
Movimiento
Por lo general, puede cambiar píxeles completos para sprites con sombreado de celdas sin AA. A medida que introduzca nuevos
colores, deberá crear subpíxeles en varias rampas de color. A menudo encontrará suavizado en los bordes de las formas.
- ≈ -
No puedes simplemente desplazar píxeles ¡Ya se ve mejor! Este tiene un desplazamiento
El desplazamiento de píxeles está
hacia arriba y hacia abajo tres fotogramas de píxeles de más de cuatro fotogramas y está
desplazado y las partes del cuerpo siguen
para hacer que un personaje respire. Este bien sincronizado. Sin embargo, sigue
un arco. Esta animación también facilita los
resultado parece rígido. Los cambios de teniendo un aspecto artificial si el personaje
fotogramas clave extremos. se ralentiza
píxeles simples como estos solo funcionan simplemente
hacia abajo en los fotogramas clave.
para los intermedios. se mueve hacia arriba y hacia abajo.
No todos los píxeles tienen que moverse para tener un movimiento creíble.
Del mismo modo, no es necesario cambiar los píxeles de todas las partes del cuerpo.
Simplemente subpixele las áreas que se benefician de ello. No tienes que agregarlo a
todo el sprite. EstaCangrejo aplastadortiene subpixelado en las piernas y el vientre.
Sin embargo, su caparazón se mueve normalmente como si animaras
dibujos regulares. Se duplica para cada cuadro y simplemente se desliza.
Metal Slug 6 (Arcade, PS2)
Tus personajes pueden incluso tener siluetas que no se mueven. Para los
movimientos más sutiles, puedes tener píxeles nadando dentro
el sprite y el contorno no se moverán ni un solo píxel.
Todo pasadentroel contorno.
Iconoclastas (PS4, PC, Switch)
Para comprender verdaderamente el subpixelado, deberá comprender los conceptos básicos deAnimación norte.
203
Estudio de caso: Capcom
Darkstalkers 3 (PS1/Arcade)
Siempre que estos gráficos tenían subpíxeles, estaban algo adelantados a su tiempo.
Se sabe comúnmente que las animaciones de Capcom se esbozaron primero en
papel. Aunque las líneas aproximadas se digitalizaron, es poco probable que estos
subpíxeles sean una coincidencia. Esto es solo especulación, pero al estudiar cómo
se digitaliza el arte lineal en cuadrículas de píxeles, los artistas de Capcom podrían
haber detectado movimientos de subpíxeles. Estos efectos fueron totalmente
intencionales. En SNK Corporation, incluso llamaron a esto la técnica de "0.5 píxeles".
Observe cómo su pecho se mueve hacia arriba. El ángulo de las líneas/formas es horizontal, lo que significa que los subpíxeles crecen
Puede cambiar los valores de píxeles en los intermedios que aparecen en la pantalla con bastante
rapidez. Está bien si estos intermedios se ven divertidos. Después de todo, aparecen en la
pantalla solo por una fracción de segundo. Lo que NO desea que suceda es que estos cuadros
aparezcan en la pantalla durante más tiempo. Esto significa animarpose a poseen subpíxeles no
siempre se garantiza que funcione. animandotodo derechosuele ser más fácil. Esto depende The Legend of Zelda:
La gorra Minish (GBA)
completamente de la confianza del artista. No importa qué técnica se utilice,
creas subpixeles duplicando fotogramas. Una buena solución es tener teclas "favorables" intermedias, es decir,
mucho más cercanas y similares al fotograma clave. Todo esto se detallará en elpróximo capítulo: Animación.
Aladino (Megadrive)
Lo que desea tener en cuenta es un sentido general de dirección y arcos. La palabra clave aquí es GENERAL. Puede tener
movimientos retrasados o cambiar arcos. La animación anterior se repite y contiene 6 fotogramas. El subpixelado aquí
sigue un movimiento circular. Todo esto sucede dentro de un área más pequeña que 3x2 píxeles.
Puede comprender mejor los subpíxeles más difícilesmediante el estudio de sprites renderizados en
3D.Gran parte de la ubicación de píxeles se genera automáticamente, por lo que nada de esto se
coloca a mano. Así que depende del artista (y de nosotros) desenredarlo todo.
originales en 3D
Simplificado
Es importante establecer extremos: esos son fotogramas clave donde el movimiento comienza y se detiene.
Los fotogramas intermedios son aquellos en los que tendrás que jugar con los subpíxeles.
tan artificial que a algunos les puede costar creer que está hecho a mano.
207
Más usos del subpixelado
Sacudida estremecerse
Dormido Risa
Efectos de viento estar aturdido
luces parpadeantes temblando de frio
Tambaleándose y sacudiéndose Movimientos asombrosos
No siempre puedes usar AA cuando trabajas con pocos colores. En su lugar, haga que los píxeles completos naden dentro de la
duende. El principio es el mismo que cambiar los subpíxeles, pero con píxeles completos.
niño búho-lanzado en 2016: presenta el arte y la animación de Simon Andersen, un desarrollador de D-pad Studio.
Owlboy es una maravilla visual y presenta numerosos ejemplos de subpixelado.
Analicemos algunas de estas animaciones fáciles (pero complejas).
A es el punto más bajo del ralentí. B es el punto más alto. Estos son los extremos.
Aparte de ser1 píxel más alto, el cuadro B es casi idéntico al cuadro A. Si esta
animación fuerasolo 2 cuadros de largoesosería bastante entrecortado. El
subpixelado se utiliza para suavizar esta transición.
A entre B entre A
Ahora he incluido los intermedios rectos.
Dado que el personaje solo se mueve
hacia arriba 1 píxel, es más difícil
encajar en un punto intermedio. Es por
eso que se usa el subpixelado. Observe
cómo la nariz cambia de forma.
La animación completa tiene aún más intermedios. Estos no son intermedios directos "en el medio". Estos
unos favorecen los fotogramas clave A y B. Son mucho más parecidos e idénticos a estos fotogramas clave. Se llama
facilitandoen la animación tradicional. Mostraremos esta técnica con más detalle.en el Capítulo 9.
209
Aquí hay un desglose completo de cómo se anima el personaje.
Observe cómo el botón de su vestido deja un rastro a medida que viaja de un lado a otro.
el cuello tiene
dividir píxeles también!
210
Algunos consejos más
Recuerda: Pixel art se trata de tener un control total sobre tu trabajo.Este método es bastante económico y no
funcionará a menos que lo edites manualmente. Está bien para los principiantes que quieren entender mejor el
cambio de píxeles.Sin embargo, es una buena referencia.no garantiza un intermedio para las animaciones.
Tendrás que tener mucha confianza para realizar los movimientos más sutiles. Si te excedes, parecerá que las cosas se están
derritiendo o parecerán gelatina. Además, el subpixelado requiere mucho tiempo. No lo hagas si no lo necesitas.
211
Conclusión
Duplique marcos y cambie píxeles. Eso es subpixeling en pocas palabras. Es la única técnica para intermedios a
pequeña escala. Es posible crear subpíxeles simplemente duplicando y desplazando un solo sprite.
“ IEs una técnica en la que al cambiar ligeramente el color de los píxeles circundantes,
para el ojo humano, parece que los píxeles se mueven alrededor de 0,5 píxeles.
Kazuhiro Tanaka
Diseñador de Metal Slug en SNK1 “
El subpixelado es la técnica menos documentada en pixel art.
Conociendo este hecho, aprovecha cada oportunidad para descargar los sprites que encuentres y estudiarlos más de cerca.
Si usted essóloun ilustrador,Lógica de píxelesLa sección de grosor de línea le resultará muy útil. Si eres un animador, es posible que hayas notado que
se mencionaron brevemente algunos términos y técnicas. Siéntase libre de darle otra lectura a este capítulo una vez que haya terminado el libro o
comenzó a aprender animación. Las cosas comenzarán a tener más sentido cuando ya sepas cómo animar.
212
1Tanaka profundizando en la "técnica de 0,5 píxeles" utilizada en SNK. fromWeekly Famitsu 9 de agosto de 2018, n°1547, traducido por Alistair Wong en siliconera.com
Capítulo
Animación
9
213
Traducido del inglés al español - www.onlinedoctranslator.com
Introducción
La animación moderna es mucho más antigua que el pixel art, por lo menos un siglo entero. Los 12 principios de la animación que
sabemos que hoy datan de la década de 1930. En este capítulo nos centraremos específicamente en la animación de juegos.
La razón por la que este es uno de los mejores libros es porque R. Williams analiza
Dos de los animadores que han inspirado a Williams son Ollie Johnston y Frank
Estos dos libros enseñan todo en términos de técnicas tradicionales de dibujo a mano, pero los principios
que cubren se aplican a todas las formas.Si quieres mejorar en la animación, considera expandir tus
214
Como estudiar
Si alguna vez te sientes perdido, recuerda que la animación es laestudio de movimiento. Esta no es la
definición de animación de un libro de texto, pero le recordará en qué debe concentrarse en caso de
que tenga dificultades. Esto significa estudiar el movimiento de criaturas, objetos y fuerzas. Este
estudio incluirá tanto movimientos realistas como exagerados. Un animador estudia con frecuencia la
vida real, pero también tiende a encontrar inspiración en medios previamente animados.
.
Una buena animación se basa en fotogramas clave legibles.
Sea analítico. Rara vez encontrará un tutorial exacto paso a paso para algo que
Cuando encuentres una referencia, ya sea de la vida real, una película, un juego o una animación:
3. Utilice los extremos como guía. Dibuje los dibujos intermedios y desglosados
usted mismo, en lugar de copiar el metraje exacto cuadro por cuadro.
4. Estílelo (a menos que las poses ya estén demasiado enfatizadas).
Al hacer esto, deconstruyes la forma en que funciona el movimiento; ayudándote la próxima vez que animes algo.
215
Líneas de tiempo en software
El tiempo es la velocidad de las acciones que suceden en la pantalla. En animación, esto se refiere a cuántos dibujos o fotogramas se
utilizan para mostrar una acción. Sin embargo, las líneas de tiempo son un poco más complicadas con diferentes velocidades de cuadro.
Dependiendo del software o tema utilizado, estos se verán diferentes, pero siempre los reconocerás.
Sin embargo, la animación 2D nunca es tan constante. Los marcos están en la pantalla durante diferentes períodos de tiempo.
Algunas líneas de tiempo se centran en fotogramas singulares.No agrupan la misma imagen en 1 marco extendido.
movimiento profesional
Con estas líneas de tiempo, deberá establecer su duración manualmente para convertirlas en dos o tres. No amplía su
duración agrupando los fotogramas en una línea de tiempo, sino configurando su duración individualmente.
216
Que tan rapido aparecen los dibujos
Aquí hay algunas referencias para ayudar tanto a los animadores tradicionales como a los desarrolladores
norte de juegos. Por ejemplo, si tiene "dos" a 24 fps, se sentirán como 12 dibujos por segundo.
La forma en que los diferentes softwares indican el tiempo puede variar. Para ayudarlo, estos son los números que necesita
para saber cuánto duran los "unos" y los "dos" si está acostumbrado a las notaciones de "24FPS" o al juego de "60FPS".
dibujos
Términos utilizados a 24FPS por segundo a 60FPS Duración en juego
/ 60 0.02segundo 1 marco
/ 30 0.03segundo 2 marcos
/ 20 0.05segundo 3 marcos
/ 15 0.06segundo 4 marcos
en dos 0.08segundo
12 0.08segundo 5 marcos
/ 10 0.1segundo 6 marcos
en cuatro 0.17segundo
6 0.17segundo 10 marcos
Recordar:Estos números se redondean hacia arriba o hacia abajo para que sean más fáciles de recordar.
0,01 segundos =1/ elde un segundo = 1 centisegundo. Los milisegundos son1/elde un segundo
100 1000
Si su software solicita milisegundos o centisegundos, utilice los números que aparecen a continuación.
0.1segundos
0.02segundos 0.03segundos 0.04segundos 0.05segundos 0.06segundos 0.08segundos 0.12segundos 0.17segundos
dieciséismilisegundos 33milisegundos 42milisegundos 50milisegundos 50milisegundos 83milisegundos 100milisegundos 125milisegundos 167milisegundos
217
Técnicas clave
Compresión y extensión
Este es el más intuitivo. Los principiantes lo saben bien antes de empezar a animar. Hace que las animaciones sean más
animadas y muestra el peso y el movimiento de varias criaturas y objetos. De hecho, la pelota que rebota es una de las
primeras lecciones que aprenden los animadores para familiarizarse con las técnicas de squash y estiramiento. La
cantidad que aplastes y estires depende de qué tan fuerte o sutil sea el movimiento. Otro factor es cuán pesado y denso
Anticipación
"Listo…Colocar… ¡Vamos!"
Mantener la expectativa por los videojuegos generalmente corta o inexistente. Si desea que
anticipación.
Castlevania Sinfonía de la noche (PS1)
218
Desglose
?
Esto también se conoce comola posición de paso. Un nuevo fotograma clave que hace que la animación cambie
de rumbo. Piense en ello como una ruta alternativa o un cuadro clave medio.Para ir de A a B, ¡puede darle más
sabor! Tome esta escena de la película de acción en vivosu chica viernesde 1940. El actor Cary Grant está
señalando. ¿Cómo te lo imaginas para ir de A a B? La forma más rápida sería simplemente levantar el brazo.
Los desgloses permiten a los animadores agregar variedad y características únicas a sus
animaciones. En lugar de ir de A a B, vamos de AXB.En el kit de supervivencia del Animador, el
octavo capítulo del libro habla de la flexibilidad. ¡Williams entra en detalles sobre las averías!
gumroad.com/stringbing youtu.be/wdPbiy-8BRo
219
Facilidad de entrada y salida
Puede ver que cuando todos los marcos se ven al mismo tiempo, los intermedios más cercanos son los que se abren y
cierran con facilidad. Las entradas y salidas lentas son vitales para lograr movimientos naturales atractivos.
Easing y subpixelado
Cuando decide transformar libremente y mover partes, 1 px es la distancia mínima. El único aspecto exclusivo del
arte de píxeleses que si desea colocar intermedios MUY cerca del cuadro clave, se utiliza el subpixelado.
Las entradas y salidas lentas con subpíxeles tienen fotogramas clave muy juntos.
y
Tabla de tiempos:
220
Si los gráficos de tiempo de animación anteriores son difíciles de leer,
considere lo siguiente: en ambos casos, el cuadro 2 favorece al 1 y el cuadro
4 favorece al 5. Están más cerca entre sí que al cuadro 3. Cuando el espacio
entre ambos dibujos es muy cercano ,es cuandonecesitarás subpixel.
MarcoA*es un duplicado deApero editado con subpixelado. Este intermedio ayuda a facilitar la entrada o salida del
personaje en el fotograma clave. Igualmente,B*es un duplicado deBpero ligeramente desplazado en píxeles también.
El subpixelado solo se utilizará para entradas y salidas lentas y para los movimientos más sutiles. En lugar
de querer exprimir subpíxeles en todas partes, trabaje PRIMERO en fotogramas clave fuertes.
Mover presas
Estos son movimientos donde la acción se detiene, pero el personaje sigue moviéndose lentamente mientras mantiene la pose. Las
retenciones en movimiento son extremadamente raras en el arte de píxeles, ¡porque aumentaría exponencialmente la cantidad de
cuadros únicos!Más fotogramas significa más almacenamiento en la memoria, por lo que rara vez los verás en los
videojuegos más antiguos.Considera esta técnica como una forma de relajarte al máximo.
Un habitualsosteneres cuando los personajes "mantienen una pose". Esta no es una animación inactiva.
pero simple el personaje que se detiene. Nada se mueve, por lo que es tu trabajo enfatizar otras
partes más pequeñas que se mueven en un cuerpo para mantenerlo vivo y en movimiento.
Las manchas son intermedios que imitan los efectos del desenfoque de movimiento.
frotis alargados
Hoja de unión de emblema de fuego (GBA) Chico búho (PC,PS4,Switch) Iconoclastas (PS4, PC, Switch) Street Fighter III (Arcade, DC) Chico búho (PC,PS4,Switch)
múltiplos
alargados. Son manchas que multiplican objetos. Estos funcionan tan bien
como los frotis alargados. Depende de usted sentir lo que funciona mejor.
Marvel vs Capcom 2
Boogerman (Mega Drive)
(Arcade, Dreamcast, +)
funcionan mejorcon ciclos de bucleque los frotis extendidos.
tubo CRT. No es muy eficiente hoy en día, así que trate deEvítales.
Los rebasamientos son fotogramas en los que la parte que estás animando pasa más allá de su destino, solo para volver al
fotograma clave. Es un tipo de retroceso, como un resorte estirado que regresa a su estado predeterminado. Richard
Williams llama a estos “acentos duros”, pero en la industria moderna llamamos a esto “excederse”. A veces, un par de
intermedios colocan al personaje en la clave, otras veces el sobreimpulso se ajusta sin intermedios.
Puedes variar el impacto. A veces es suficiente tener un sobreimpulso que mueve una parte del cuerpo en solo 1 píxel.
Acción superpuesta
Algunas partes de los objetos o cuerpos lideran todo el movimiento. A medida que
se mueve, otros segmentos los seguirán. Una parte conduce, las otras siguen.
Acciones superpuestasson todas las partes u objetos que siguen con retraso. Cuando se
complete la acción, las piezas seguirán moviéndose. Este es elseguir adelante. Estos efectos se
aplican acualquier cosa tiradapor una fuerza exterior. Este no es un movimiento secundario.
se mueven en absoluto.
Los movimientos superpuestos pueden ser más simples que el ejemplo anterior.
Píxeles superpuestos
Es fácil perder la noción de los subpíxeles, así que planifique su animación con cuidado.
Tener que retrasar los píxeles aumentará el número de fotogramas y dará la impresión de más movimiento. Al
igual que los subpixeles, te da más espacio para animar. De hecho, está subpixelando conenteropíxeles!
Llamemos a estos
píxeles retrasados
Alternativamente, puede extender los píxeles para unirlos. Sin embargo, esto puede destacarse
como un pulgar dolorido. Siempre reproduzca sus animaciones para ver si se siente bien.
Llamemos a estos
píxeles elásticos
Si tiene formas con contornos o suavizado, las cosas se pondrán MUY desordenadas a 45°.
El cabello de Zero sigue después de que corta. Reacciona a su movimiento recostándose (Megaman X4 (Sega Saturn, PS1)
Los seguimientos añaden movimiento extra a tus personajes y objetos. Hacen que los
movimientos sean más realistas. Si trabaja con marcos limitados, también puedendar la
ilusión de que hay más movimiento del que realmente hay.Estas partes continúan
moviéndose después de que se completa la acción, de ahí el nombreseguir adelante.
bastante impresionante para un sprite de NES, pero también poco común. Los seguimientos pueden
Batman (NES)
requerir algunos subpíxeles para obtener un final suave y agradable. Esto ayudará a que la fase de
Resumen
Sobreyo
ap : ARRASTRE yo
yo: ASENTAMIENTO
Paso
226
Los cuatro métodos
Al igual que en el capítulo de introducción, hay varias formas de comenzar un dibujo fijo. Sin embargo, la animación de
píxeles conoce 4 métodos utilizados para llegar de principio a fin. Estos métodos tratan sobre cómo se construye el arte de
píxeles, más específicamente, los dibujos preliminares para cada cuadro seguidos del proceso de limpieza.
Por supuesto, los dos (o tres) métodos de animación tradicional obviamente todavía se aplican al pixel art.
Postura a pose:planificar su trabajo con fotogramas clave, agregando intermedios para conectarlos. Todo
derecho: fotogramas animados a medida que avanza, improvisando su camino a través de la línea de tiempo.
Silueta
por Michafrar
La forma en que garabateas tus siluetas depende de ti. Si dibujas tus siluetas
como un dibujo regular, ¡eso es igual de bueno! Esta técnica esmás sobre la
formaque en realidad ser una sombra. El resultado final es lo que importa.
en cualquier momento.
227
Por el artista invitado YAA
Marcos de reciclaje
Borrador
Limpiado
Una vez más, la herramienta de selección es tu mejor amiga del pixel art. Con esta herramienta
puede usar y COMBINAR las siguientes cosas para ayudar a dibujar nuevos marcos:
Al analizar hojas de sprites y animaciones en línea, puedes notar que el pixel art tiene marcos
que reciclan muchas partes del cuerpo. Puedes ver algunos marcos modificados.
No hay necesidad de volver a dibujar todo desde cero con pixelart. Una vez
que tenga un dibujo de píxeles base sólido, ese sprite se convierte en su
recurso principal. Duplicar sprites y modificarlos te ahorrará tiempo.
Lo básico es aplastar, estirar o deslizar piezas. Una vez que domines estas técnicas, podrás combinarlas. En
lugar de dibujar un nuevo marco, puede obtener marcos realmente complejos sesgando y rotando. Las
cosas se verán difíciles, pero eso se debe a que todavía tienes que limpiar el sprite.
por Michafrar
NO puede simplemente deslizar partes del cuerpo y dejarlo así. Si no los edita, sus
personajes se verán robóticos o como "interpolados".
“ Siento que con la animación de estilo de silueta, todo debería moverse a la vez, como los
“
movimientos de un caballo corriendo. Reutilizar marcos es conveniente para mostrar
pequeñas expresiones y gestos humanos. Yo uso estas dos técnicas.
Syosa/しょさ
.
Esta técnica va de la mano con el "Marcos de reciclaje"método.
¡Puedes combinar métodos!
¡Con un poco de experiencia, puede acelerar su trabajo enormemente!
entre
229
Colocar y rastrear(también llamadocambiar y rastrearo inclusolevantar y rastrear) es una técnica en la que los animadores 2D tradicionales utilizan un marco previamente dibujado como guía para dibujar en b
* o nuevos fotogramas clave. Este dibujo se coloca debajo de un marco en blanco para que pueda ser calcado o transformado libremente. Esta técnica ayuda a que los objetos, las características y los personajes permanezcan uniforme.
Partir del Arte Tradicional
Izquierda: Capitán Comando (Arcade, SNES) Arriba: Darkstalkers (Arcade, PS1) Derecha: Street Fighter III (Arcade, Dreamcast)
que cada estudio digitalizó sus cuadros de animación fue diferente, pero el
proceso principal siguió siendo el mismo que se coloreó primero con los sprites de
Earthworm Jim. Al estudiar muchos de los escaneos y las imágenes beta, puede
Aquí hay algunos trucos para ayudar a digitalizar su trabajo a píxeles, sin importar el software:
Una vez optimizadas las imágenes,todo es limpieza a partir de ahí. Después de todo, el pixel art se trata de tener control.
230
Si necesita crear una cantidad extrema de animación, una posibilidad es crear
primero modelos 3D. Los resultados creados con estos modelos todavía se
consideran pixelart, ya que aún requieren la habilidad y el conocimiento del
pixel art durante la fase de limpieza. Un juego muy conocido con esta técnica
esEl rey de los luchadores XI, pero puedes encontrarlo en juegos más antiguos
comosónico 2,Mickey ManíayKirby superestrella. La empresaObras del sistema
de arcouse modelos 3D para crear sprites con juegos comoOne Piece: Gran
Coliseo Pirata, Dragon Ball Z: Extreme Butōdeny elBlazblueserie. One Piece: Gran Coliseo Pirata (N3DS)
Ya hemos hablado del método tradicional antes. Echa un vistazo a estas páginas anteriores:
Arte lineal
Cada cuadro debe sombrearse individualmente desde cero. Este método puede parecer más rápido al principio, pero
lleva bastante tiempo. Es pixelart de principio a fin. Eso es lo que lo diferencia del método tradicional.
231
Marcos limitados
Dos fotogramas son lo mínimo. Desafortunadamente, no podemos tener arcos ni formas de mostrar cómo
van las cosas de A a B. La animación simplemente parpadeará. Podemos aprender de esto que
Debe transmitir la mayor cantidad de movimiento con la menor cantidad de dibujos. Esta es la verdadera dificultad.
Estos son útiles para incluir una animación limitada pero agradable,además de las poses básicas de fotogramas clave:
por Michafrar
La cantidad mínima de fotogramas para En lugar de ir y venir, puede Las acciones superpuestas también se
un bucle convincente a es3 marcos. colocar objetos en un círculo pueden reducir a 3 fotogramas
ayudándote a dibujar los intermedios, pero con el arte de píxeles hay un problema.
para el arte lineal y para aproximar los intermedios. un gran lío cuando tienes muchos colores.
Puede encontrar un botón de piel de cebolla en la mayoría de los programas de animación. Algunos programas pueden llamarlo "mesa de luz".
Rakugakids (N64)
La ebullición es el efecto de bamboleo de las líneas dibujadas a mano.Esto es a menudo el resultado de dibujos
de píxeles cuadro por cuadro. Con tantos píxeles muy juntos, es probable que algunos de ellos se muevan.
La ebullición es inevitable con el arte tradicional, pero se puede evitar con las artes digitales.
Causas:
Los intermedios favorecen el marco equivocado. El movimiento no sigue un arco Subpixeling (si se usa) no está bien alineado.
Posibilidades:
• Utilice la herramienta de selección tanto como sea posible. Deslice las piezas alrededor.
• Use Subpixeling para asegurarse de que los marcos transicionen sin problemas con espacios intermedios ajustados.
• Sea económico, utilice animación limitada. Sin embargo, el riesgo que corre es tener una animación entrecortada. Algunos artistas y
audiencias encuentran que el arte de píxeles de alta velocidad de fotogramas es demasiado estéril, demasiado limpio. Encuentre un
buen equilibrio entre las antiguas limitaciones y las posibilidades modernas. No tienes que adherirte a nada.
a dibujar para cada cuadro aunque estén parados. Con el arte tradicional, a menudo
se usa como un efecto estilístico popular. Con pixelart, no se traduce bien porque
tiene una resolución baja, por lo que queda poco espacio para hervir.
234
Desplazamiento de paralaje
Para agregar más profundidad, puede usar la perspectiva para el fondo o usar el desplazamiento de paralaje:
vez se mueven.
Todas las capas se mueven en la misma dirección, Las capas se mueven en direcciones Los bucles de fondo, el frente es
pero se mueven a diferentes velocidades. opuestas La escena hace que la cámara gire. cuadro por cuadro - la cámara gira
Parallax Scrolling no es solo para usuarios de desplazamiento lateral. Se pueden usar fácilmente en vistas de arriba hacia
abajo como en La leyenda de Zelda: Minish Cap (GBA). Observe cómo la brizna de hierba viaja sobre la hoja.
Estiramiento y sesgo
Concéntrate en el fondo distante mientras el personaje nada. Observe cómo las vigas de madera se mueven hacia abajo.
Para lograr este efecto, los artistas crearon tanto el piso como
el techo de las vigas en un solo activo. El haz se estira a medida
que el personaje sube y baja, revelando ambos lados.
Donkey Kong Country 2: Diddy's Kong Quest (SNES)
Si desea conocer estas técnicas de codificación, mire los videos en Game Hut. Jon Burton,
http://www.gamehut.com/
236
Conclusión
Para algunos, pixel art es sinónimo de animación. Para otros, es sinónimo de ilustraciones.
Ya sea que animes o no, piensa en esto:
Esto significa que es una habilidad que se puede aplicar en otros campos. Es una habilidad muy valiosa para saber si desea crear
videos, juegos de computadora o simplemente quiere avanzar en su carrera. tu notengo queSobresalga en la animación per se,
¡pero aprenderla le enseñará algunos trucos geniales que puede aplicar en otros lugares!
Por mucho que este capítulo pueda cubrir el tema, ¡un libro simplemente no es suficiente! Es un tema diverso y complejo con sus
propios métodos. Hasta el día de hoy, los artistas continúan escribiendo sobre él, discutiéndolo y estableciendo nuevos estilos. La
animación de pixel art es un subgénero tanto del arte como de la animación. ¡Requiere que combine su conocimiento de cada uno, por
lo que es valioso para su propio crecimiento artístico aprender sobre los fundamentos de la animación en general!
puede ser muy satisfactorio cuando ves que las cosas cobran vida!
cerrarlo. Pixel art es una armonía de representación pintada y escultura precisa. La característica definitoria de esta forma de arte es y
siempre será la precisión y el control que aporta a sus obras de arte. Esto es lo que lo convierte en un medio y no en un estilo. A estas
Saber dibujar es un requisito. Es una habilidad que necesitas dominar un poco antes de aprender otras
nuevas. Para correr, primero debes aprender a caminar; A viene antes que B. A los animadores se les dice que
el dibujo es una habilidad fundamental. Los artistas de píxeles necesitan que se les diga lo mismo. El arte de los
píxeles no es nada sin un buen sentido de la ilustración y la pintura. Para ser un artista de píxeles competente,
debe ser bueno dibujando o pintando. La mayoría de las veces, si algo no se ve del todo bien con tus sprites, lo
más probable es que la causa esté relacionada con el dibujo. Habría incluido este párrafo al principio del libro,
pero me han dicho que este consejo puede ser bastante desalentador para los recién llegados. Sin embargo,
creo que es un discurso necesario para los recién llegados, a pesar de lo duro que pueda sonar para los no
artistas que realmente quieren probar el pixel art.
El pixel art encuentra sus raíces en los videojuegos. Como resultado, la mayoría de los sprites presentados en esta guía sirvieron como
referencia, estudio y análisis. Te recomiendo encarecidamente que hagas lo mismo. De hecho, los insto a estudiar y
aprender de los videojuegos y de los artistas que trabajaron para ellos. Es fácil navegar por el arte en línea y
encontrar un solo artista que crea imágenes magníficas. Pero no deberías estudiar estrictamente solo de ella/él. Estos
artistas tienen sus propias inspiraciones. Vale la pena echar un vistazo a lo que les enseñó el arte de píxeles. Si
simplemente estudias la interpretación de un artista, no entenderás cómo llegó allí. Tu trabajo terminará siendo una
imitación de una imitación, si eso es todo lo que sabes. Todavía puedes tener tu artista favorito, pero siempre trata
de estar atento a más artistas y más juegos.
Por último, este libro no tiene ejercicios, ya que el arte es una habilidad productiva. Es difícil evaluar tu trabajo sin una
comunidad o una clase. Si quieres entrenar, depende de ti encontrar lo que te inspira e incorporar algunos elementos nuevos en tu
obra de arte. Cualquier cosa de la que no se haya hablado en este libro es específica de otras formas de arte (texturas, sombreado)
o desarrollo de videojuegos (conjuntos de mosaicos, implementación de motores, etc.). Depende de usted continuar su viaje y
Mantente curioso. Una vez que te encuentres con Pixelart que te parezca interesante, guárdalo y ¡AMPLÉALO!
238
Artistas invitados
ellián Siosa
Twitter: @ThisIsEllian Twitter: @sy0sa
Genios Thernz
Instagram: jinpixel Twitter: @thernz
Muchas gracias a
Un archivo en línea que cataloga sprites y fondos de videojuegos. este sitio web es
The Spriters Resource
donde comencé como un joven artista de píxeles novato. ¡Gracias a Mark Brown (GMT),
Dazz (Daniel Brown), Shane Gill (DYKG) y a todos los que trabajaron en el sitio web!
www.spriters-resource.com
239
Bibliografía seleccionada
Revista: “MegaForce #4” enero-febrero de 1992, páginas 31-34, publicado por Mega Press, SARL
Libro:Especificación de hardware Neo-Geo” folleto, página 93, emitido por SNK Playmore Corporation
Imágenes de vídeo:Furia fatal 3Neo Geo CD - Comercial promocionalーPaul Signac Entrada del puerto de Marsella (1911)ーPixel Works de Susan Kare (1984) Iwata
pregunta: The Legend of Zelda: A Link Between Worldsーen http://iwataasks.nintendo.com/interviews/#/3ds/a-link- between-worlds/0/3 Fotografía, de Seymour Road
Detrás de escena en Sega: Cómo se hizo un videojuego de Nicholas LavroffーShiny Entertainment - Earthworm Jim "The Making Of"
informacion registrada
El ventilador funciona
Página 7: Diseño Penguin © Nintendo – Página 9: Venusaur © The Pokémon Company, Game Freak, Nintendo Co. ; Yoko Littner © Gainax; Terciopelo, esfera de Odín © Vanillaware
– Página 18: Space Invaders © Taito Corporation – Página 40: Metaknight © Nintendo Co., Hal Labs. – Página 50: Rosalina © Nintendo Co. – Página 65: Shovel Knight, Shield Knight © Yacht Club Games
– Página 91: F-zero, Captain falcon © Nintendo Co. – Página 96+181: Shulk, Xenoblade Chronicles © Monolith Soft, Nintendo Co. – Página 181: Inkling, Splatoon © Nintendo;
Obras autenticas
Página 11: Felicia © Capcom; ilustrado por Akira “Akiman”Yasuda – Página 12: Comix Zone © Sega – Página 20, 30: Metroid II: Return of Samus, Super Metroid © Nintendo Co.; Cave Story © Studio Pixel, Nicalis, Inc. – Página
21: Finn, Adventure Time © The Cartoon Network, Inc. D3 Publisher Inc. ; Héroe de medio minuto © Marvelous Entertainment Inc.
Capítulo 1-Páginas 22, 24: Sakura, Street Fighter © Capcom – Páginas 23, 24: Earthbound, Mother 2, Mother 3 © Shigesato Itoi, Nintendo Co.; Heihachi, Tekken © Bandai Namco Entertainment Inc. – Página 24: Treecko © The
Pokémon Company, Game Freak, Nintendo Co. – Página 27: Metal Slug © SNK, SNK Corporation – Página 28: Tuna head © Nippon Ichi Software, Inc.; Curses 'N Chaos © Tribute Games – Página 30: Super Mario Brothers,
Mario & Luigi, Metroid © Nintendo Co., Sonic The Hedgehog, Streets of Rage © Sega; Castlevania © Konami – Página 31: Shatterhand © Jaleco, Natsume ; Ganon, Bowser, Wario, Mother 3tm © Nintendo Co.; Shonen Jump:
Jump Ultimate Stars ©Nintendo, Gambarion; Una pieza © Eiichiro Oda; Scott Pilgrim contra el mundo: El juego © Ubisoft; Shovel Knight © Yacht Club Games – Página 32: Wario Land 4, Princess Peach © Nintendo Co.; Kirby
Squeak Squad © Nintendo Co., Hal Labs. ; Mágico Taruruuto-Kun ©Tatsuya Egawa, Shueisha; Gatillo crono © Square-Enix; Boktai 3© Konami; Riviera: La tierra prometida © STING – Página 33: Las aventuras de Batman y
Robin © Warner Bros., Konami; Encantado GBA © Disney Interactive; Alcaparra del Congo © Data East ; Hamelín Sin violín Damaki ©Enix; Funky Kong, Metroid Fusion © Nintendo Co.; Castlevania© Konami; Mundo de
monstruos © Sega; Dragon Quest, limo © Square-Enix; Sam & Max © Steve Purcell – Página 34: Ristar © Sega; Pulseman© Game Freak, Sega; Alundra© Matrix Software; Parodio © Konami; The Legend of Zelda, Link, Goron,
Samus, Metroid: Zero Mission © Nintendo Co.; Hsien-Ko, Darkstalkers © Capcom; Shantae © Wayforward technologies – Página 35: Lanturn, Mawile, Dugtrio, Muk, Pokémon Diamante/Perla/Platino © The Pokémon
Company, Game Freak, Nintendo Co. – Página 36: Klonoa, Kos-Mos, Xeno-saga © Namco Bandai; Hagar, Final Fight, Street Fighter, Chun-li, Zangief © Capcom
Capitulo 2-Página 38: Kirby © Nintendo Co., Hal Labs. – Página 39: Starfox 2, Fox McCloud © Nintendo Co. – Página 40: Scribblenauts © Warner Bros. – Página 41: King Dedede, Kirby © Nintendo Co., Hal Labs. ; Unown © The
Pokémon Company, Game Freak, Nintendo Co.; Fat Fury © SNK – Página 42: Rhythm Tengoku © Nintendo Co. ; Metal Gear, Solid Snake, Mei-ling ©Konami; Fuka Kazamatsuri © Nippon Ichi Software, Atlus – Página 43:
Advance Wars, Andy © Intelligent Systems, Nintendo Co.; Yoshi, Yoshi's Island, Super Mario © Nintendo Co. – Página 46: Donovan Baine, Hsien-Ko, Darkstalkers © Capcom – Página 48: Kirby © Nintendo Co., Hal Labs. ; Lan,
Mega Man Battle Chip Challenge © Capcom – Página 52: ¡Negima! © Ken Akamatsu, Kodansha; Jon Talbain, Darkstalkers © Capcom – Página 53: Breath of Fire © Capcom – Página 54: Earthworm Jim © Doug TenNapel; Laharl
© Nippon Ichi Software – Página 55: El pequeño Nemo, maestro de los sueños © Capcom; Bill Murray como Peter Venkman, Ghostbusters Genesis © Sega – Página 57: Dragon Quest/ Dragon Warrior © Square-Enix – Página
Capítulo 3-Página 60-85: Pokémon Heart Gold ©The Pokémon Company, Game Freak, Nintendo Co. – Página 61: Batman © DC Comics, Warner Bros, Sunsoft; Shin Megami Tensei© Atlus; Megaman 6, Tierra Roja, Aliento de
Fuego IV © Capcom; Super Metroid, Yoshi © Nintendo Co.; Tales of Phantasia © Namco Bandai – Página 62: Drawn to Life © THQ; Shovel Knight © Juegos del club náutico; Mighty Switch Force ©Wayforward Technologies –
Página 68: Sonic Rush Adventure, Sonic 3 © Sega, Sonic Team; Seiken Densetsu 3 © Square-Enix; Poderoso Gunvolt © Inti Creates; Coropata © Lukplus – Página 71: Tentacruel © The Pokémon Company, Game Freak,
Nintendo Co. – Página 72: Lyndis, dardo, Fire Emblem © Intelligent Systems, Nintendo Co.; Dr. Wily, Protoman, Megaman 7, Breath of Fire IV © Capcom; Bowser, Mario Party Advance, Link, The Legend of Zelda Link to the
Past, Luigi, Mario & Luigi Dream team, Yoshi y juegos de Mario relacionados © Nintendo Co.; Encadenado, Ness © Shigesato Itoi, Nintendo Co.; Mago, Rana, Chrono Trigger © Square-Enix. – Página 73 -74: Lenora, Elesa,
Grimsley, Shauntal, Pokémon Black & White, Ditto, Pokémon Crystal © The Pokémon Company, Game Freak, Nintendo Co. – Página 74: The Chaos Engine © The Bitmap Brothers; Boktai: El sol está en tu mano © Konami –
Página 79: Nuclear Throne © Vlambeer – Página 80: Double Dragon © Technōs Japan, Arc System Works
Capítulo 4-Páginas 87-88: Agahnim, The Legend of Zelda, Link to the Past, Super Mario y juegos relacionados © Nintendo Co. – Páginas 89-90: Cryamore, Esmyrelda Maximus, Bliss Barson © NostalgiCO; Persona 4 Arena © Atlus; Guilty Gear XX © Arc System Works; El rey de los luchadores XIII © SNK; Cuentos del
destino © Namco Bandai; Disgaea, La Pucelle Tactics © Nippon Ichi Software – Página 91: Yoshi, Super Mario Kart © Nintendo Co. – Página 92 : Pokémon Red, Green, Blue © The Pokémon Company, Game Freak, Nintendo Co. Página 93: Chasm © Bit Kid , Inc – Página 94: Crash 'n' the boys y River City Ransom ©
Technōs Japan; Buzzy beetle, Super Mario © Nintendo Co. – Página 96: Shulk, Xenoblade Chronicles © Monolith Soft, Nintendo Co. – Página 99-100: Beyond Oasis © Ancient, Sega; Ace Abogado, Shock Troopers © Capcom; Tales of the World © Namco Bandai – Página 101: Marty Mcfly, Doc Brown, Regreso al futuro II,
Super Regreso al futuro II © Universal Pictures Inc. ; Castlevania: Aria of Sorrow, Castlevania: Dawn of Sorrow © Konami – Página 102: Lyndis, Fire Emblem © Intelligent Systems, Nintendo Co.; Riou, Suikoden II © Konami; Bowser, Super Mario © Nintendo Co. – Página 103,105: Streets of Rage © Sega; Duelyst ©
Counterplay Games, Bandai Namco; Abismo © Bit Kid, Inc – Página 104, 106, 107: Trono nuclear © Vlambeer; Super Mario World, Super Mario Brothers 3, Yoshi, Super Mario © Nintendo Co. – Página 108: Brendan, Pokémon Ruby, Sapphire, Emerald © The Pokémon Company, Game Freak, Nintendo Co. – Página 109:
Tak: Mojo Mistake © THQ – Página 111: Kirby y The Amazing Mirror, Kirby, King Dedede © Nintendo. Co, Hal Labs.; Jewel Master © Sega – Página 113: Pokémon Rojo, Azul, Verde, Amarillo © The Pokémon Company, Game Freak, Nintendo Co. Regreso al futuro II, Súper Regreso al futuro II © Universal Pictures Inc. ;
Castlevania: Aria of Sorrow, Castlevania: Dawn of Sorrow © Konami – Página 102: Lyndis, Fire Emblem © Intelligent Systems, Nintendo Co.; Riou, Suikoden II © Konami; Bowser, Super Mario © Nintendo Co. – Página 103,105: Streets of Rage © Sega; Duelyst © Counterplay Games, Bandai Namco; Abismo © Bit Kid, Inc –
Página 104, 106, 107: Trono nuclear © Vlambeer; Super Mario World, Super Mario Brothers 3, Yoshi, Super Mario © Nintendo Co. – Página 108: Brendan, Pokémon Ruby, Sapphire, Emerald © The Pokémon Company, Game Freak, Nintendo Co. – Página 109: Tak: Mojo Mistake © THQ – Página 111: Kirby y The Amazing
Mirror, Kirby, King Dedede © Nintendo. Co, Hal Labs.; Jewel Master © Sega – Página 113: Pokémon Rojo, Azul, Verde, Amarillo © The Pokémon Company, Game Freak, Nintendo Co. Regreso al futuro II, Súper Regreso al futuro II © Universal Pictures Inc. ; Castlevania: Aria of Sorrow, Castlevania: Dawn of Sorrow © Konami – Página 102: Lyndis
Capítulo 5-Página 116: Street Fighter Alpha © Capcom – Página 117: Monster in My Pocket © Konami, Ultra Games – Página 118: Mario Tennis © Nintendo Co. – Página 119: Ecco the Dolphin© Sega
240
Página 120: Pokémon Mystery Dungeon 3 © The Pokémon Company, Game Freak, Nintendo Co.; Earthworm Jim © Doug TenNapel; Sonic Advance 2 © Sega– Página 121: Vectorman © Sega – Página 121:
Vectorman © Sega; Pato Donald © Disney Interactive; Scizor © The Pokémon Company, Game Freak, Nintendo Co. – Página 122: Beyond Oasis © Sega, Ancient; Earthworm Jim © Doug TenNapel; ecco el
Dolphin© Sega – Página 123: Kolibri © Sega, Appaloosa Interactive – Página 124: King Dedede, Acro © Nintendo Co., Hal Labs − Página 125: Shovel Knight © Yacht Club Games; La aventura de Kirby © Nintendo,
Laboratorio HAL; Street fighter Alpha © Capcom − Página 126: Kunio-kun © Technōs Japan; Crystalis © Corporación SNK; Cereza, Bayonetta © Sega, Platinum Games − Página 127: Super Mario World 2: Yoshi's
Island © Nintendo − Página 128: Gengar, Nidorino © Game Freak, The Pokémon Company, Nintendo − Página 129: Space Racer © Loriciel Software − Página 131: Comix Zone © Sega ; Lombriz de tierra Jim © Doug
TenNapel; Super Mario World © Nintendo − Página 132: Mega man © Capcom − Página 133: Lord Monarch © Nihon Falcom, Sega, Epoch Co., EMI Music Japan
Capítulo 6−Página 128: The Legend of Zelda: The Minish cap © Nintendo − Página 140: Castlevania © Konami; Donkey Kong Country 3 © Nintendo; Shovel Knight © Juegos del club náutico; MegamanX ©
capcom; Ristar © Sega − Página 141: Mercs © Capcom ; Madre 3 © Shigesato Itoi, HAL Laboratory, Nintendo; Pocky y Rocky © Natsume Inc.; Advance Wars © Sistemas Inteligentes, Nintendo; La historia de Thor
2 © Sega − Página 142: Los zombis se comieron a mis vecinos © Konami, LucasArts; Mario & Luigi: Superstar Saga © Nintendo, Alphadream; The Legend of Zelda: Un vínculo con el pasado © Nintendo; Goof Troop © Capcom,
Disney Interactive − Página 143: The Legend of Zelda: Un vínculo con el pasado, The Legend of Zelda: The Minish Cap © Nintendo − Página 144: Twin Cobra II © Taito Corporation; Contra 3 © Konami; Línea Directa Miami ©
Devolver Digital − Página 146: Landstalker © Sega; Final Fantasy, Kingdom Hearts © Square-Enix Corporation; Harry Potter ©Warner Bros. Solistice © Rare Ltd. − Página 147: Luminous Arc © Marvelous Inter-
active Inc. Kingdom Hearts © Square-Enix Co, Ltd, Disney Interactive − Página 151: Final Fantasy © Square-Enix Corporation − Página 152: Earthbound © Shigesato Itoi, Nintendo, HAL Laboratory, Creatures Inc.;
Boktai© Konami; Nox ©Westwood Studios, EA Pacífico; SimCity (Nintendo) © Maxis, Nintendo, Electronic arts (marca) − Página 153: Earthbound © Shigesato Itoi, Nintendo, HAL Laboratory Double Dragon ©
Technōs Japón, Arc System Works; Pacman © Bandai Namco − Página 154: Pokémon Negro/Blanco, Cynthia, Hilbert © Game Freak, The Pokémon Company, Nintendo; Ciberbots © Capcom; Furia fatal © SNK
Corporation − Página 155: Indiana Jones y el destino de la Atlántida © LucasArts; Saga Frontier, Star Ocean, El mundo termina contigo © Square Enix Co., Ltd.; Contra © Konami − Página 156: The Legend of Zelda: A
Link Between Worlds, Pokémoon Diamond Version © Nintendo − Página 157: Chrono Trigger © Square Enix Co., Ltd. − Página 159: Samus Aran, Kreid, Metroid, The Legend of Zelda: the Minish Cap, Super Mario
Capítulo 7−Página 161: Dudley, Street Fighter © Capcom; Versión Pokémon Black2 & White2 © Game Freak, The Pokémon Company, Nintendo; Rosalina, Super Mario © Nintendo− Página 164-165: Jojo's
Aventura extraña © Hirohiko Araki, Shueisha Inc., Capcom; Zangief, Dudley, Street Fighter © Capcom− Página 166: Zero, X, Megaman X © Capcom; Sonic The Hedgehog © Sega− Página 167: Fire Emblem ©
Sistemas Inteligentes, Nintendo; Drawn to Life © THQ, 505 Games− Página 168: Pokémon Platinum Version, Charmeleon, Pikachu © Game Freak, The Pokémon Company, Nintendo− Página 169: Knuckles The
Equidna © Sega; Pulseman © Game Freak, Sega− Página 170: Puyo Puyo, Puyo pop © Sega; Metal Gear Solid 3: Subsistencia © Konami− Página 172: Lemmings © Rockstar North Ltd.; Castlevania © Konami
; Shin Megami Tensei © Atlus Co., Ltd. − Página 173: Esfera de Odín © Vanillaware, Atlus ; Madre 3 © Shigesato Itoi, HAL Laboratory, Nintendo; Alundra© Matrix Software, Sony Interactive Entertainment
Inc.− Página 175-176: Captain Toad © Nintendo − Página 177: Pokémon HeartGold & Soul Silver version © Game Freak, The Pokémon Company, Nintendo− Página 180: Jackie Chan's action Kung Fu © Hudson
Capítulo 8−Página 187-188: Metal Slug © SNK Corporation; Super Metroid, Samus Aran © Nintendo; Acechadores oscuros © Capcom; Toad © Nintendo − Páginas 189-190: Iconoclastas © Joakim Sandberg; Babosa Metálica
Ataque © SNK Corporation; The Legend of Zelda: The Minish cap © Nintendo, Capcom; Sonic Mania © Sega− Página 193: Mario & Luigi: Superstar Saga © Nintendo, Alphadream; Braixen, Pokémon © Juego
Freak, The Pokémon Company, Nintendo; Metal Slug © SNK Corporation− Página 195: Tingle, The Legend of Zelda © Nintendo; Chikorita, Pokémon © Game Freak, The Pokémon Company, Nintendo − Página
196: The Legend of Zelda: Un vínculo con el pasado © Nintendo − Página 197: Darkstalkers © Capcom; Klonoa © Bandai Namco − Página 198: Iconoclastas © Joakim Sandberg; La leyenda de Zelda: La gorra Minish
© Nintendo, − Página 199: Pikachu, Pokémon © Game Freak, The Pokémon Company, Nintendo − Página 200: Red Earth © Capcom − Página 201-203: King of Fighters, Metal Slug © SNK Corporation; Extraterrestre
Infestación © Sega; Iconoclastas © Joakim Sandberg − Página 204: Darkstalkers © Capcom; Jojo's Bizarre Adventure © Hirohiko Araki, Shueisha Inc. − Página 205: Owlboy © D-pad Studios; Babosa Metálica ©
Corporación SNK; Hormigueo © Nintendo; Iconoclastas © Joakim Sandberg; Scot Pilgrim © Bryan Lee O'Malley; Zero, X, Mega man © Capcom − Página 206: Aladdin © Virgin Entertainement, Disney Interactive;
Surco de guerra © Chucklefish Ltd.; Sonic The Hedgehog © Sega − Página 207: Diddy Kong © Nintendo; Street Fighter (Alex) © Capcom − Página 208: Samus Aran, Metroid © Nintendo; Poderosa fuerza de cambio ©
Tecnologías Wayforward; Iconoclastas © Joakim Sandberg − Página 209-210: Owlboy © D-pad Studios − Página 211: Fire Emblem © Intelligent Systems, Nintendo; Surco de guerra © Chucklefish Ltd.; Babosa Metálica ©
Corporación SNK
Capítulo 9−Página 213: Castlevania, Richter Belmont © Konami − Página 215: Fire Emblem © Intelligent Systems, Nintendo;− Página 216: Super Mario, Super Mario Bros. 3 © Nintendo
− Página 218-219: Darkstalkers © Capcom; Ataque masivo de Kirby © HAL Laboratory, Nintendo; Phantasy Star © Sega, Ace Abogado © Capcom; Castlevania, Richter Belmont, Alucard © Konami; Babosa Metálica ©
SNK Corporation − Página 220: Street Fighter, Makoto © Capcom; Iconoclastas © Joakim Sandberg − Página 221: Metal Slug Attack © SNK Corporation; Tierra roja © Capcom; Knuckles el Equidna © Sega, Sonic
Equipo − Página 222: Owlboy © D-pad Studios; luchador callejero © Capcom; Maestros marciales © Andamiro Entertainment, International Games System Co., Ltd. ; Emblema de fuego © Intelligent Systems, Nintendo; Icono-
oclastos © Joakim Sandberg ; Boogerman© Interplay Entertainment Corp; Mario & Luigi: Superstar Saga © Nintendo, Alphadream; Fuerza Dragón © Sega, J-Force; La Máscara © Black Pearl Software − Página
223: Street Fighter, Karin, Hsien Ko, Darkstalkers © Capcom; Hulk, Mickey Mouse © Marvel, The Walt Disney Company; Wild Woody © Sega − Página 224-225: Owlboy © D-pad Studios; Ataque de babosas metálicas
© Corporación SNK; Maestros marciales © Andamiro Entertainment, International Games System Co., Ltd. ; Planeta Libertad © GalaxyTrail; Poderosa fuerza de cambio ©Wayforward Technologies; − Página 226: Cero, X,
Mega Man © Capcom; Batman NES © Sunsoft Corporation, Detective Comics; Ataque de babosas metálicas © SNK Corporation; − Página 228: Poderosa fuerza de cambio ©Wayforward Technologies; Ataque de babosas metálicas © SNK
Corporation − Página 229: Wargroove © Chucklefish Ltd. − Página 230: Darkstalkers, Captain Commando,Street Fighter, Felicia, Chun-li, Ryu, Babyhead © Capcom; Earthworm Jim © Doug TenNapel − Página
231: One Piece: Gran Coliseo Pirata © Eiichiro Oda, Bandai Namco, Arc System Works − Página 232: Metroid, Samus Aran © Nintendo; Simón Belmont, Castlevania © Konami; Ducktales NES © Capcom, El
Compañía Walt Disney; Treasure Master © ASC Games − Página 233: Metal Slug © SNK Corporation − Página 234: Rakugakids © Konami; Super Mario World 2: Yoshi's Island © Nintendo; Luchador callejero, Chun-li ©
Capcom − Página 235: Rayman © Ubisoft Entertainment SA; Ninja Gaiden © Tecmo Co., Ltd.; Mickey Mania © The Walt Disney Company − Página 236: The Legend of Zelda: The Minish Cap, Donkey Kong Country
2 © Nintendo; Street Fighter II © Capcom − Página 236: Advance Guardian Heroes © Treasure, Ubisoft
SAI © SYSTEMAX Desarrollo de SoftwareーGIMP, programa de manipulación de imágenes GNU © El equipo de desarrollo de GIMPーAdobe Photoshop CS6, Adobe Flash © Sistemas de Adobe
241
¡Oh, no! Has llegado al final...
Esto marca el final deLógica de píxeles. Cualquier actualización futura incluirá cambios menores. Si
242