Curso de

Bagde
del curso Animación y arte
de videojuegos 2D
Julián David Méndez
Experiencia en Videojuegos
Experiencia en Videojuegos
Snapimals
Bebop Bee
Experiencia en Videojuegos
Jurassic Go
Bebop Bee
Experiencia en Videojuegos
Super Jump League
Bebop Bee
Experiencia en Videojuegos
What a Wonderful World
Bebop Bee
Experiencia en Videojuegos
Super Best Ghost Game!
StudioBando
Experiencia en Videojuegos
Proceso de un videojuego!
Entornos de trabajo
para juegos móviles
Formas de definir los proyectos
 Tipos de implementación:

Entornos 2D Entornos 3D Entorno Mixto

 Tipo de juego
(requerimientos GPU)

Entorno 2D Entorno 3D

Sprites Interpoladores Pipeline 3D

Preparando assets
para Unity
Creando Sprite Sheets
Sprites 2D:
Final Sky, 1989x822 px
Sprites 2D:
Metal Slug 6, 1841 x 11171px (1024px x12)
Animación por esqueletos:
Interpoladores de sprites VS hoja de sprites
Animación por esqueletos:
Interpoladores de sprites VS hoja de sprites
Entorno 3D:
Modelos y texturas
Entorno 3D:
Rig y animación
 Conclusiones:
Flujo de trabajo básico

Asset Controladores Animación Implementación

Análisis de juegos

Disección de juegos visualmente

efectivos
 Rango de movimiento
Angry Birds Phantom Cat Crossy Road
Rovio Entertainment Veewo Games Yodo 1 Games
Grado de complejidad
Monument Valley BowMasters
Ustwo Studio Ltd Playgendary
Estéticas de juego
Inside Candy Crush Friends Saga
Playdead King
Análisis de formas
Minecraft Snapimals
Mojang AB BebopBee
Análisis de legibilidad

Análisis y técnicas de correcta

visualización
Legibilidad
La clave está en simplificar!
Super Mario Run
Nintendo
Legibilidad
La clave está en simplificar!
Candy Crush Friends
King
Legibilidad
La clave está en simplificar!
Clash Royale
SuperCell
Legibilidad
Ahora empieza a dibujar

Ícono

Utiliza marcadores o papel y lápiz

Diseño de personajes

Cada parte expresa mucho

Diseño de personajes
Cada detalle cuenta mejor la historia

Personalidad suave
Orgánico - extrovertido

Personalidad obstinada
Pesado - fuerte

Personalidad estable
Lento - agresivo

Personalidad inestable
Agilidad - inestabilidad
Diseño de personajes
Cada detalle cuenta mejor la historia
Diseño de personajes
Cada detalle cuenta mejor la historia
Diseño de personajes
Cada detalle cuenta mejor la historia
Diseño de personajes
Cada detalle cuenta mejor la historia
Diseño de personajes
Cada detalle cuenta mejor la historia

Tristeza Agresividad
Pobreza Pobreza

Paz Gloria
Pureza

Luto Alegría
Soledad Plenitud

Gravedad
Salud
Materialismo
Natural

Temor Fidelidad
Honradez
 Diseño de personajes
Cada detalle cuenta mejor la historia

Rabia Desagrado Miedo Tristeza Alegría

Diseño de personajes
Cada detalle cuenta mejor la historia
Diseño de personajes
Cada detalle cuenta mejor la historia
Arte por:
Nate Wragg
Diseño de escenarios

Explora tu universo
Diseño de escenarios
Perspectivas
Diseño de escenarios
Perspectiva basada en ópticas
Arte por:
Adrien Girod
Diseño de escenarios
Perspectiva ortogonal
Bro Force
Diseño de escenarios
Perspectiva isométrica
Clash of Clans
Diseño de escenarios
Colores Cálidos y Fríos
Diseño de escenarios
Color

Arte por:
Nathan Fowkes
Diseño de escenarios
Incidencia de luz y sombra
Arte por:
Dice Tsutsumi
Diseño de escenarios
Incidencia de luz y sombra
Arte por:
Dice Tsutsumi
Ideación y definición
Si el arte es subjetivo,
¿Cómo saber si mi
diseño es coherente?
Define tu juego

Ícono

Crea una lista de adjetivos que definan tu

universo y sobre todo la personalidad de
tus personajes
Define tu juego
Lista de adjetivos

Universo: Personaje:
● Edad media ● Mujer
● Oscuro ● Elfa
● Fantástico ● Vieja
● Misterioso ● Agresiva
● Aventura ● Fuerte
● Sucio ● Solitaria
● Guerrera
Define tu juego
Escribe un Statement

Ícono

Con las palabras que utilizaste crea una

cuartilla que te permite imaginar más a
fondo todo lo que quieres.
Define tu juego
Escribe el Statement de tu juego

La venganza de Amaryll
Referenciación
y moodboard
Correcto uso de referencias
en tu proyecto
Referencias
Google, Pinterest, Películas, Series, Libros
Referencias
Google, Pinterest, Películas, Series, Libros

Arte por: Arte por: Arte por:

Zuzartii Conor Burke Matthew Park
Referencias
Google, Pinterest, Películas, Series, Libros

The Exorcist (1974)

Referencias
Google, Pinterest, Películas, Series, Libros

The Force Awakens (2015)

Referencias
Google, Pinterest, Películas, Series, Libros

Arte por: Arte por:

Iacocca Khen Richard Schmidbauer
Referencias
Google, Pinterest, Películas, Series, Libros

Blasphemous
Team 17
 Construcción
del personaje
Primeras exploraciones propias
Adobe Photoshop
Teclas rápidas

CTRL + SHIFT + N - Nueva capa

CTRL + J - Duplicar capa
B - Pincel (Brush)
E - Borrador
L - Lazo de selección
ALT + CLICK - Selecciona color
CLICK DERECHO - Opciones del pincel
Construcción
de escenarios
Influencia de la luz para
contar tu historia
Construcción de escenarios
Vuelve a tus referencias

The Exorcist (1974)

Construcción de escenarios
Vuelve a tus referencias

The Force Awakens (2015)

Construcción de escenarios
Vuelve a tus referencias
Arte por: Arte por:
Iacocca Khen Richard Schmidbauer
Definición del estilo
del videojuego
Define el estilo del videojuego
Definición del estilo
Blasphemous
Team 17
Pixel Art
Cambio de resolución

Ícono Ícono

Imagen para pantalla Imagen Pixel Art

72 DPI 1 DPI
200x200 px 16x16 px
Pixel Art
Cambio de resolución
Finalización de
conceptos
Entregables finales de tus
personajes y assets
Finalización
Terminar de definir tus personajes y props
Propiedad de:
Hullabaloo - Kickstarter movie
Finalización
Terminar de definir tus personajes y props

Propiedad de:
Steak Animation
Finalización
Terminar de definir tus personajes y props

Propiedad de:
Victor Calleja
Finalización
Hoja de expresiones
Propiedad de:
Christopher Ables
12 Principios
de animación
Marco teórico de Ollie
Johnston y Frank Thomas
Principios de animación
Ollie Johnston y Frank Thomas
Principios de animación
Ollie Johnston y Frank Thomas
Estirar y encoger /
Squash and stretch
Propiedad de:
Cento Lodigiani
Anticipación / Anticipation
Puesta en escena / Staging
Animación directa vs pose a pose /
Straight ahead vs pose to pose
Acción complementaria y
superpuesta / Follow-through
and overlapping
Acelerar y desacelerar /
Ease In and Ease Out
Arcos / Arcs
Acción secundaria /
Secondary Action
Timing
Exageración / Exaggeration
Dibujo sólido / Solid Drawing
Atractivo / Appealing
Introducción a
Adobe Animate
(anteriormente Flash)

Cómo entender y usar el software

Adobe Animate
Teclas rápidas

F5 - Nuevo fotograma
F6 - Duplicar fotograma
B - Pincel (Brush)
Q - Rotar imagen
L - Lazo de selección
SHIFT + > - Siguiente fotograma
SHIFT + < - Fotograma Anterior
 Mecánica corporal
(Ciclo de caminado)
Marco teórico-práctico de Richard
Williams
Ciclo de caminado
Richard Williams - The animator's survival kit
Ciclo de caminado
Richard Williams - The animator's survival kit
Ciclo de caminado
Richard Williams - The animator's survival kit

1. Contacto (pierna izquierda)

2. Abajo
3. Posición de paso
4. Arriba
5. Contacto (pierna derecha)
6. Abajo
7. Posición de paso
8. Arriba
9. Contacto (Pierna izquierda)
Introducción al
uso de Unity
Paneles principales
Unity 2018
Descarga el motor que vamos a usar!

Ícono

https://unity3d.com/es/get-unity/download
Paneles de Unity

Proyecto: Todos los archivos del juego

Jerarquía: Objetos en la escena

Inspector: Propiedades de los objetos

Escena Consola
Parte visual del juego Parte escondida
del juego
 Implementación de
animaciones por código
Llamando al animator desde
un script
 Animación por código

Existen 4 tipos de parámetros (variables) que

pueden usarse por código para activar una
animación:

● Boolean: Compara si es False o True

● Trigger: Compara cuando se activa una sola vez
● Integer: Compara usando un número entero
● Float: Compara usando un número decimal
private void hit()
{

if (Input.GetKeyDown(KeyCode.UpArrow))

{
Debug.Log("activado");
myAnimator.SetBool("bool", true);
myAnimator.SetTrigger("trigger");
myAnimator.SetInt("int", 1f);
myAnimator.SetFloat("float", 1.5);

}
Mover el personaje

Usar el input del jugador para

mover nuestro personaje
private void move()
{

myAnimator.SetFloat("walk",
Input.GetAxis("Horizontal"));

Vector2 movement = new

Vector2(Input.GetAxis("Horizontal") *
mySpeed, myrigidbody.velocity.y);

myrigidbody.velocity = movement;

}
 Análisis de UI
para videojuegos
Usar el input del jugador para
mover nuestro personaje
Análisis de interfaces
UI funcional
Angry Birds
Rovio
Análisis de interfaces
UI funcional
Heartstone
Blizzard
Análisis de interfaces
UI funcional
Mario Run
Nintendo
Análisis de interfaces
UI funcional
Zelda
Rovio
Análisis de interfaces
UI funcional
Fruit Ninja
Halfbrik Studios