Arte 2D

Escenarios
Desenvolupament d’Aplicacions
Multiplataforma
Escenarios

• Tipos de escenario
• Tilesets
• Fondos
• Problemas comunes
• Programas
Tipos de escenario

• Colisión por objeto

– El escenario está hecho a partir de objetos
– La colisión se hace con cada objeto
• Por bounding box
• Por píxel (¡muy costoso computacionalmente!)
• Colisión por tile
– División del escenario en una rejilla de tamaño regular
(32x32, 64x64, etc.)
– Cada casilla es un tile
– Cada tile tiene asignado un valor de colisión (mapa de
colisiones) y un valor gráfico
• Puede haber varias capas
Colisión por objeto

Unity Tutorial – 2D Physics

Colisión por Tile
Colisión por Tile
Colisión por Tile
Colisión por Tile
Colisión por Tile
Colisión por Tile - Ventajas

• La colisión por tile simplifica muchísimo el

cálculo
– Tan fácil como consultar el valor de un array
• Si separamos el mapa de colisión de los
gráficos nos permite diseñar el nivel por una
parte y decorar por otra
– Útil si hay que cambiar gráficos más adelante
Colisión por Tile - Inconvenientes

• Más difícil hacer cambios en el mapa

– Dentro del juego: romper paredes, etc.
– A la hora del diseño: retoques
• Los tiles no son móviles
– No pueden reaccionar a físicas
– Tampoco desplazarse
– Sí pueden tener animación, pero es más complejo

Posible solución: Combinar tiles con objetos

Tileset

• Los mapas se hacen a partir de un tileset

– “Conjunto de patrones”
• Un tileset es el conjunto de tiles que podemos
combinar para hacer los escenarios
• Lo más común (y recomentable) es que estén
ordenados
Tileset - Ejemplo
Tileset – Cómo hacerlos

• Lo más importante de un tileset es que los

tiles encajen
– Incluso que encajen consigo mismos, para los tiles
de relleno (suelo, hierba, etc)
• Por eso es importante prestar especial
atención a los píxeles de los bordes del tile
Tileset – Cómo hacerlos

• Partiremos de los tiles de “pared”

– Estos serán los tiles básicos con los que los personajes
colisionarán
– Normalmente son un borde claro con un color interior
de relleno más oscuro o apagado (por visibilidad)
– Puede haber variaciones, ser más simples o decorados
Tiles de Pared

• Nos preocuparemos de que

cualquier forma sea posible
• Por suerte os adelanto
trabajo:

Con esta plantilla tenéis cualquier

combinación de paredes que hagan
ángulos de 90º entre ellas
Este orden os ayudará a encontrar los
tiles cuando hagáis los niveles
Si necesitáis variedad, tan fácil como
copiar el tile que queréis modificar y
cambiarlo todo menos los píxeles de los
bordes que tengan que encajar con otro
tile
Tiles de Pared
Tiles de Pared

• Como inicio ya nos sirve

– Pero si no introducimos variedad puede quedar
muy repetitivo
– Introduciremos tiles clonados y modificados
para hacer estas variaciones
– Por ejemplo: el borde inferior de la “pared”
Tiles de Pared

• La clave es mantener los “píxeles de encaje”

igual que estaban
– Los “Píxeles de encaje” son los que se
encuentran en los bordes del tile y que deben
encajar con otro tile
Tileset – Cómo hacerlos

• Tiles de relleno:
– Serán “Tiles de relleno” los que contengan
patrones repetitivos que encajen consigo
mismos
• Easiest “Tile de relleno” ever: color plano
– Hierba, tochos, piedras de cueva, etc.
Tiles de Relleno

• Usaremos el truco del 3x3

– Dibujamos un tile, como queramos
– Lo copiamos haciendo un grupo de 3x3
– Editamos los bordes para que encaje
– Volemos a copiarlo haciendo un grupo de 3x3
– Repetimos hasta que no haya fallos de encaje
Tiles de Relleno

• Si usamos siempre la misma tile de relleno

puede quedar muy feo en el juego
– No está de más hacer variantes
– Ahora que tenemos la tile de relleno básica es muy
sencillo
• Solo hay que quedarse con los bordes y editar lo de en
medio, encajará
Elementos grandes

• Obviamente podemos combinar varios tiles

para hacer elementos grandes
– Podemos hacer que encajen con el resto de cosas
– O hacer elementos independientes
Fondos

• Si se van a usar tiles para hacer fondos

– Usar colores menos saturados y más oscuros que los de los
tiles “colisionables” (los de pared, o cajas, por ejemplo)
– Colores con poco contraste entre ellos
– Elementos sencillos, si son colores planos mejor
– No usar bordes muy definidos
• Es importante que el jugador pueda diferenciar el
fondo del juego “de verdad”
– Evitar confusiones
– Sobre todo, que no haya estructuras similares a las paredes
en el fondo
Fondos - Bien
Fondos - Mal
Fondos

• Una paleta limitada no es excusa

– Hay que saber elegir bien los colores
– Saber cuándo o no usar delineados
– Jugar con el contraste
Fondos

• Si se opta por fondos con parallax

– Usar ilustraciones
• Fondos tileados con parallax no suelen quedar bien
– Cuánto más lejos, más “gris” y menos contraste
Parallax Scrolling
Parallax Scrolling
Problemas Comunes

• Es normal que al usar tiles en vuestros juegos os

aparezcan unas líneas extrañas una vez estéis
jugando
– Se debe a un problema de “redondeo” de los píxeles
– Ocurre sobre todo cuando hay zooms
• Esto se soluciona repitiendo los píxeles del borde
– Así, un tile de 32x32 pasa a ser de 34x34
• A la hora de importar el tileset, se debe tener en
cuenta este offset
Problemas Comunes

Tile Extender (Herramienta hecha por mí) [link]

Programas Recomendados

• Para hacer tilesets

– Pyxel Edit [link]
• Para hacer niveles
– Tiled Map Editor [link]

• Engines como Unity o Game Maker incluyen

un editor de mapas basados en tile, pero es
preferible usar herramientas externas como
Tiled