No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

Modo tiling de Aseprite

13/22
Recursos

¿Qué son los tiles y cómo mejoran el diseño de videojuegos?

Los tiles representan una revolución en el diseño de videojuegos gracias a su capacidad para construir mundos complejos a partir de piezas simples. Básicamente, son pequeños cuadritos que se organizan en una cuadrícula, permitiendo la creación de niveles enteros mediante la repetición y variación de estos pequeños elementos. Tal como se puede observar en juegos como Neon City Riders, donde variaciones de un solo tile crean ambientes ricos y diversos.

¿Cuáles son los beneficios de usar un tileset en un videojuego?

El uso de tilesets en videojuegos ofrece numerosas ventajas que pueden mejorar tanto el rendimiento técnico como el diseño estético del juego:

  • Optimización del rendimiento: Al no tener que cargar fondos especiales para cada nivel, los tilesets permiten que los motores de juegos rellenen espacios automáticamente, reduciendo el uso de recursos.
  • Organización de assets: Los juegos complejos tienden a tener una variedad de elementos repetitivos que pueden organizarse eficazmente en un tilemap, como se hizo en Neon City Riders con niveles de nieve, bosque, subterráneo y ciudad.
  • Creación de fondos ricos: A través de la mezcla y repetición estratégica de varios tiles, se pueden evitar repeticiones monótonas y crear fondos visualmente atractivos.

¿Cómo influye Aseprite en la creación de tiles?

Aseprite es una herramienta poderosa para los diseñadores de videojuegos, especialmente cuando se utiliza su modo tile, que facilita la creación y visualización de tilesets.

  1. Modo Tile en Aseprite:

    • Para activar el modo tile, se debe ir a 'View' y seleccionar 'Tiled Mode'. Esto permite al diseñador ver cómo encajan los tiles en el lienzo al reflejar la imagen tanto horizontal como verticalmente.
    • Las opciones 'X-axis' y 'Y-axis' posibilitan evaluar la continuidad horizontal o vertical de los elementos.
  2. Diseño práctico:

    • Al dibujar un tile, se puede ver al instante cómo se repite a la izquierda y derecha (o arriba y abajo), lo que ayuda a asegurar que las partes encajan perfectamente.
    • Por ejemplo, crear un montículo de tierra o una pared infinita nunca fue tan sencillo.

¿Cómo crear variaciones de tiles para evitar la monotonía?

La clave para un diseño atractivo y variado es evitar que los tiles se repitan de forma monótona. Aseprite ofrece una metodología eficiente para lograr esto:

  • Duplicación de capas: Al duplicar una capa existente y comenzar a agregar detalles, se pueden crear nuevas variaciones de un tile base sin empezar desde cero.
  • Agregar detalles: Es recomendable dar pequeños toques decorativos, como pasto u otros detalles, para romper la homogeneidad y mantener el interés visual del jugador.
  • Rápida creación de variaciones: Este proceso no solo es efectivo sino también rápido, optimizando el tiempo de desarrollo.

Recomendaciones finales

Utilizar un tileset es una estrategia poderosa para cualquier desarrollador de videojuegos. No solo optimiza el rendimiento y la organización sino que también permite un diseño creativo y variado sin grandes recursos. Explore las herramientas como Aseprite para agilizar la creación de tiles y ¡no olvide agregar sus propios toques de creatividad! Anime a los desarrolladores a compartir sus creaciones y a continuar explorando las posibilidades que estos pequeños pero potentes elementos ofrecen en la creación de mundos digitales.

Aportes 42

Preguntas 1

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad?

¿Que es un tilemap?
A como lo entendí y se me hizo muy practico, este es una imagen la cual incluye todos los sprites que se usaran para el videojuego,

En Unity se usa como si estuviéramos pitando un lienzo, colocando las tiles para darle sentido

Esto también me recuerda al Sprite Atlas y diria que son para casi lo mismo y sirven para lo mismo.
El Sprite Atlas es una imgane .png en la cual aparecen todos o la mayoria de sprites del juego para ahorrar recursos.
Ejemplo:
Es mejor** un Sprite Atlas de 4096pixelesX4096pixeles que 100 imagenes de 100pixelesX100pixeles para mostrar lo del Sprite Altas por separado
Esto en Unity afecta mucho a la optimización de videojuego, en pocas palabras es mejor una imagen grande con todos los sprites, que cada sprite separado.

Una curiosidad: Yo de pequeño hacia HackRooms de Pokemon para el Gameboy, y me hace acordarme que asi se hacian los primeros Pokemon

Este tile lo use para construir un arbusto.
Saludos!

dejo mi primer Tile,

Mi primer intento de tilemap.

Reto completado, me gusto mucho hacer esto. 😃

Comparto mi Tile.

¿Alguien sabe como hacer para exportar la visualizaicón del Tile alargado y no sólo la fracción?

Gracias.

listo mi tile

Este seria el tile

Y al verlo continuo es donde se ve la magia

Mi primer tile

Mi tile del reto. Un arbusto con distintas paletas.
Pensé para un escenario de día, otro de noche. Después se me ocurrió que en un escenario hostil o que tuviera que llamar la atención podía incluir algún detalle para generar contraste con el cambio de paleta.

No conocia esta funcion, le dare buen uso.

tile de una cerca de madera


aquí mi aporte.

mi tile que cree para mi videojuego

Aqui esta mi aporte

Tile de pasto/tierra

Estoesmuydivertido.jpg
En mi mente los combinaría para que queden intercalados (los del suelo) pero no tengo ni idea de cómo se haría aquí, a menos que sea con ayuda de un programa como photoshop quizá

Hice un tile de betún :3 Desearía que hubiera una herramienta similar en Sai, me ahorraría infinidad de tiempo!!

Así quedó mi reto:

Y así se ve en modo tiled:

Tocó tomarle pantallazo porque no supe como exportar el tile.

Tengo algo de experiencia con tiles, pero siento que debo experimentar en más perspectivas y en más direcciones. Hice algo rápido, aunque lo dejé incompleto mientras pienso qué hacer.

![](

Reto aceptado

![](https://static.platzi.com/media/user_upload/image-f0cf4f8c-d3b7-4457-9771-624f4b185916.jpg)Inspirado por el trabajo de Daniel Camelo
Les presento mi primer tile, saludos! :) ![](https://static.platzi.com/media/user_upload/image-55eaca2d-6aeb-4e2e-af43-4b052b3c08a4.jpg)
![](https://static.platzi.com/media/user_upload/image-3559a63a-2f11-440d-b3e7-24db5757cffb.jpg)

Trate de hacer un cielo nocturno

MI tile

Creación de tiles


¿Qué son los tiles?

Los tiles son pequeños cuadros que forman parte de una cuadrícula más grande.


¿Qué es un tileset?

Un tileset o set de teselas es un conjunto de texturas reunidas en una misma imagen, una composición. Estas texturas forman las piezas gráficas que componen el escenario de un videojuego: suelos, paredes, escaleras, techos, etc.

Para crear este conjunto, utilizamos una cuadrícula compuesta por cuadrados del mismo tamaño. Cada cuadrado de esta cuadrícula se llama tile o tesela, la parte más pequeña de la composición.

Esta colección de piezas (o texturas) debe organizarse de manera que se puedan distinguir objetos como una pared, un toldo, varias puertas, una parte de suelo y un par de colores lisos, por ejemplo. A partir de estos elementos se creará un escenario.


¿Para qué sirve un tileset?

  • Ayudan a mejorar el rendimiento de tu juego
  • Ayudan a organizar assets
  • Facilitan la creación de fondos mediante la mezcla y repetición de elementos

¿Qué es el tilemap?

El tilemap o mapa de teselas es el escenario, un mapa de cómo deben organizarse las teselas. Los llamamos mapas (y no escenarios) porque en el universo de los juegos es mucho más común utilizar la expresión “mapa”.

"Es importante entender que, con el mismo tileset, podemos crear un número infinito de mapas. Cuanto mejor esté diseñado el tileset, más posibilidades creativas tendremos”

Modo tiling en Aseprite

  • View / Tile Mode
    • None → se dejan de visualizar los ejes X, Y de tiles
    • Tiled in Both Axes → se habilitan los ejes X, Y, se agregan secciones de lado izquierdo, derecho, superior e inferior que replican lo que vamos creando
    • Tiles in X Axis → se habilita el eje X y se agregan secciones del lado derecho e izquierdo que replican lo que vamos creando
    • Tiles in Y Axis → se habilita el eje Y, se agregan secciones del lado superior e inferior que replican lo que vamos creando

aun no se bien como colocar sombras, cual quier sugerencia es bienvenida

Hola! Aqui mi aporte

Dejos mis tiles: ![](https://static.platzi.com/media/user_upload/Tilemap%20desierto-9552d36e-7037-4fd3-ba6b-dc269d74edcd.jpg)
Mi tile de calacas ![](https://static.platzi.com/media/user_upload/image-7504b568-8031-452c-9a82-9990f1d7f8fe.jpg)
Una ciudad de noche ![](https://static.platzi.com/media/user_upload/image-448dba3e-065b-4d98-8f38-ffaaa61eaf40.jpg) ![](https://static.platzi.com/media/user_upload/image-6019ef41-a377-46ce-b18d-746bb06a7ff5.jpg)
![](https://static.platzi.com/media/user_upload/captura_%201-7bef43d3-cf2a-4bbf-99d7-2f3710734195.jpg)

Comparto mi tiles:

Tambien el tile completo:

Me inspire en el atardecer de un lugar que esta cerca de donde vivo

Aquí el mío.