La familiaridad con el sistema de mosaico 2D Unity ofrece una excelente oportunidad para ahorrar tiempo a los desarrolladores independientes y estudios de juegos para crear prototipos y crear juegos 2D de alta calidad.
Sin este sistema, puede pasar días, si no semanas, escribiendo su propio sistema de tarjeta de mosaico o procesando el de otra persona. Y esto es solo programación, pero ¿qué pasa con el editor de mapas de mosaico?
El nuevo sistema es gratuito y está integrado directamente en el editor de Unity. Proporciona muchas características que cubriremos en este tutorial.
En este artículo, utilizaremos un simple juego de mosaicos en 2D para descubrir lo siguiente:
- Cómo funcionan las fichas.
- Cómo habilitar mapas de mosaico en Unity y personalizar la cuadrícula.
- Cómo agregar sprites a un proyecto, convertirlos en mosaicos y luego agregarlos a la paleta de mosaicos.
- Cómo usar las herramientas del editor de mosaicos para crear niveles.
- Cómo ordenar los mosaicos y colocarlos en diferentes capas.
- Cómo agregar fichas de física de Unity.
- Cómo colorear dinámicamente los azulejos.
- Cómo cambiar mosaicos prefabricados usando código nativo y lógica.
- Cómo agregar sus propias extensiones y scripts de mapas en mosaico al proyecto.
Sí, la lista fue genial. Pero no tenga miedo: cuando comencemos a comprender, comprenderá rápidamente cuán simples son estas herramientas.
Nota: este tutorial asume que eres bueno trabajando con el editor de Unity. Si cree que no está familiarizado con él, el tutorial Introducción a Unity tiene todo lo que necesita para aprender este tutorial. Además, necesita Unity versión 2017.3 o superior.
¿Qué es un juego de fichas?
Un juego de fichas 2D es cualquier juego en el que los niveles o áreas de juego consisten en muchas fichas pequeñas (fichas) que juntas forman una cuadrícula de fichas. A veces, las diferencias entre las fichas pueden ser obvias, y a veces parecen sólidas e indistinguibles para los jugadores.
La colección de fichas en el juego se llama un conjunto de fichas, y cada ficha suele ser un sprite, parte de una hoja de sprites. Si desea lidiar mejor con las hojas de sprites, tenemos un
tutorial que describe las hojas de sprites de Unity.
Como puede ver en este tutorial, generalmente los mosaicos son cuadrados. Pero pueden tomar otra forma: rectángulos, paralelogramos o hexágonos. En los juegos, generalmente se usa una vista superior o lateral, pero a veces en los juegos de fichas, también se usa 2.5D.
Quizás ya conozcas los dos juegos más populares que usan el sistema de
fichas :
Starbound y
Terraria .
Llegar al trabajo
Descargue los
materiales del proyecto para este tutorial y descomprima el archivo .zip.
Inicie el editor de Unity y cargue el
proyecto de inicio de Rayzor desde los materiales del proyecto desempaquetados.
Esto es con lo que trabajará en este proyecto:
- Cinemachine / Gizmos: Unity Cinemachine se agrega solo para implementar una cámara fácil de usar después del reproductor.
- Paletas: en esta carpeta almacenaremos nuestras propias paletas de mosaicos.
- Prefabricados: algunos prefabricados prefabricados que usamos más adelante en el juego.
- Escenas: aquí abriremos y guardaremos escenas.
- Guiones: unos simples guiones para controlar el movimiento del jugador, la lógica de la colisión de trampas y ganar / perder en el juego. Esta carpeta también contiene secuencias de comandos Unity Tilemap del repositorio Unity 2D Extras Github , que usaremos más adelante.
- Sfx: sonidos para el juego.
- Sprites: sprites 2D a partir de los cuales crearemos paletas de mosaicos. Se toman de un paquete de cuevas y mazmorras para roguelike . El autor del paquete es kenney.nl.
Creación de juegos
Abra la escena del
juego desde la carpeta
Escenas .
Haga clic en el botón
Reproducir en el editor para iniciar el juego. En la ventana
Juego , mueve al héroe con las teclas WASD o las "flechas".
Mientras el héroe deambula por el fondo aparentemente interminable de la cámara con el color # 00000, perdido en el vacío.
Para solucionar esto, necesitamos herramientas de mosaico 2D para construir niveles y mecánicas de juego interesantes.
Conociendo la paleta de mosaicos
En el editor, haga clic en
Ventana -> Paleta de
mosaicos para abrir la ventana Paleta de mosaicos 2D.
Esta ventana será tu mejor amigo cuando trabajes en juegos de fichas en Unity.
- Esta serie de iconos proporciona herramientas básicas para manipular mosaicos, dibujar y eliminar
- Este selector le permite crear diferentes paletas que se pueden percibir como paletas para dibujar, en las que colocamos los "colores" y, en este caso, los mosaicos.
- Este selector le permite crear pinceles con diferentes comportamientos. Puede agregar sus propios pinceles, cuyo comportamiento es diferente del pincel predeterminado (por ejemplo, dibujar mosaicos prefabricados con funcionalidad adicional)
Haga clic en
Crear nueva paleta y nombre la paleta
RoguelikeCave . No cambie las opciones de cuadrícula y celda.
Haga clic en
Crear y elija guardar la nueva paleta en la
carpeta Activos \ Paletas del proyecto. En él, cree una nueva carpeta
RoguelikeCave .
Ahora la estructura de carpetas de su proyecto debería verse así:
En la ventana del editor de
paleta de mosaico , se debe seleccionar
RoguelikeCave ; en este punto todavía no tenemos ningún mosaico:
¿Cómo puede un artista crear sus obras maestras si no tiene materiales?
Sin cerrar la ventana Tile Palette, seleccione la carpeta del proyecto
Sprites / roguelike-cave-pack y expanda el activo
roguelikeDungeon transparent.png . Luego seleccione todos los sprites en esta hoja de sprites: seleccione el primer sprite, mantenga presionada la tecla shift y seleccione el último sprite.
Arrastre todos los sprites seleccionados a la ventana RoguelikeCave de Tile Palette:
Arrastre y suelte los sprites en la ventana Tile Palette y seleccione un lugar para almacenar activos en Unity.
Cree una nueva carpeta
Tiles en
Assets / Palettes / RoguelikeCave y seleccione esta carpeta como ubicación de almacenamiento:
Unity generará un activo de mosaico para cada sprite agregado desde la hoja de sprites. Espere a que se complete el proceso, luego aumente el tamaño de la ventana Paleta de mosaicos y admire las filas pares de hermosos mosaicos nuevos ubicados en la paleta RoguelikeCave:
Repita el proceso anterior para crear una paleta de mosaicos usando la ventana
Paleta de mosaicos, pero esta vez
asigne un nombre a la nueva paleta
RoguelikeCustom .
Coloque la nueva paleta en una nueva carpeta. Asigne un nombre a la carpeta
RoguelikeCustom y
muévala a la carpeta
Activos / Paletas del proyecto.
Esta vez, usando el proceso descrito anteriormente, use los sprites de la
hoja Assets / Sprites / roguelike-custom / roguelike-normal-cutdown-sheet.png para completar los mosaicos de la nueva paleta. Cree una carpeta de
mosaicos dentro de la carpeta de paleta
RoguelikeCustom y mueva los activos de mosaico allí:
Alégrate por ti mismo, ¡ahora conoces la magia de crear una paleta de mosaicos!
Mapa de mosaico de malla
Abra el menú
GameObject en la parte superior del editor de Unity (o la barra de menú de Unity si está utilizando MacOS), haga clic en
Objeto 2D y luego en
Tilemap para crear una nueva cuadrícula de Tilemap:
Debería ver que
se ha agregado una nueva
cuadrícula de GameObject a la jerarquía de escenas. Expanda y seleccione el mapa de
mosaico de GameObject
incorporado .
Piensa en este
Tilemap como una capa (quizás una de muchas) en tu juego. Puede agregar nuevos objetos para crear capas adicionales de Tilemap.
En el inspector, verá dos componentes que Unity agregó automáticamente a este GameObject:
- El motor de Unity utiliza el componente
Tilemap para almacenar sprites en el circuito marcado con el componente Grid ; en nuestro caso, se trata de GameObject Grid . Cuando crea Tilemap por primera vez, realmente no tiene que preocuparse por todas las características técnicas de cómo Unity se comunica entre todos estos componentes. Tilemap Renderer designa el material que se utilizará para representar los mosaicos en Tilemap. También le permite configurar las propiedades de clasificación de esta capa Tilemap.
Cambie el nombre de GameObject
Tilemap a
BaseLayer .
Usar varias herramientas de dibujo de paleta de mosaicos
Cambie en el editor al modo Escena.
Sin cerrar la paleta de mosaico, seleccione la paleta RoguelikeCave y luego seleccione la herramienta
Pincel (o presione
B ). Seleccione un azulejo de arena como se muestra a continuación:
En la ventana de escena, mueva el cursor a la cuadrícula al lado del jugador. El cepillo de baldosas de arena se ajustará a la cuadrícula.
Manteniendo presionado el botón izquierdo del mouse, dibuje un área rectangular alrededor del jugador. Se dibujará en la capa Tilemap BaseLayer:
Dibujar áreas grandes puede ser una tarea monótona, por lo que hay un pincel de
caja llena que se puede usar para pintar áreas grandes. En la ventana Paleta de mosaicos, haga clic en el
icono del pincel cuadrado (o presione
U ).
Regrese al editor y dibuje un rectángulo aún más grande alrededor del jugador presionando y manteniendo presionado el botón izquierdo del mouse, arrastrando el cursor desde la esquina superior izquierda a la esquina inferior derecha:
Aunque agregamos un poco de color al juego, este calabozo de arena se ve aburrido. ¡Es hora de agregar algunos detalles!
Use la opción de menú
GameObject -> Objeto 2D -> Tilemap para crear una nueva capa de Tilemap. Esta vez será el único objeto creado en la jerarquía, porque ya tenemos una cuadrícula adecuada. Cambie el nombre de esta capa a
DungeonFloorDecoration :
En la ventana Paleta de
mosaicos , cambie el
Mapa de
mosaicos activo a la capa
DungeonFloorDecoration :
Seleccione la herramienta
Pincel (
B ), luego dibuje los objetos dispersos en el mapa en la ventana Escena:
Deshabilite y vuelva a habilitar
DungeonFloorDecoration en la jerarquía de GameObject para ver cómo el renderizado en el Tilemap activo cambia la capa DungeonFloorDecoration y todos los mosaicos renderizados caen en esta nueva capa:
Crea una nueva capa de Tilemap usando la
opción GameObject -> 2D Object -> Tilemap nuevamente . Llámalo
Collideable . En el futuro, lo usamos para crear muros y bordes.
Cambie Active Tilemap en la ventana Tile Palette a
Collideable . Seleccione la herramienta Pincel (
B ) y luego dibuje los siguientes mosaicos para construir un muro alrededor del área de juego. Las áreas resaltadas en rojo en la imagen a continuación son las partes nuevas que deben agregarse:
Eche un vistazo a la captura de pantalla a continuación de la ventana Paleta de mosaicos para averiguar dónde encontrar los mosaicos necesarios para construir el muro. No olvide que puede usar las combinaciones CTRL-Z o CMD-Z para deshacer la acción o borrar errores usando el pincel actual (mientras mantiene presionada la
tecla Mayús ):
Inicia el juego en el editor e intenta atravesar el muro:
¿Quién activó el modo noclip? ¿No esperabas esto?
El problema es que acabamos de dibujar los mosaicos estándar y todavía no hemos aplicado la unidad de física mágica a la capa Tilemap.
Seleccione GameObject
Collideable y agregue un nuevo componente haciendo clic en el botón
Agregar componente en la ventana del
Inspector ; En el campo de búsqueda, ingrese
Tilemap Collider 2D :
Este componente fue creado específicamente para los juegos de fichas Unity 2D. Simplemente aplica la forma del colisionador físico a todos los mosaicos en la capa a la que se agregó, sin realizar ningún otro trabajo.
Comienza el juego nuevamente e intenta atravesar la pared. ¡Acceso denegado!
Nota: a veces, al mover la cámara, puede observar pequeñas líneas negras entre algunos mosaicos. Esto parece ser un problema de movimiento de la cámara en proyectos con el sistema 2D Tilemap Unity. Puede deshacerse de él casi por completo deshabilitando Anti-Aliasing en la configuración de gráficos. Sin embargo, incluso si esto se hace en el proyecto de adquisición, el efecto todavía es ligeramente notable. La solución a este problema puede ser agregar su propio script de movimiento de cámara con desplazamiento de píxeles. Una buena discusión de este problema se puede encontrar aquí .
Las colisiones funcionan bien, y podrías pensar que es suficiente. Pero por ahora, los colisionadores no están optimizados de manera eficiente. En el modo Escena, amplíe una parte de la pared y observe los contornos de los colisionadores:
Hay un colisionador alrededor de cada mosaico. Las secciones de la pared intermedia no necesitan estos colisionadores adicionales.
Con GameObject
Collideable seleccionado , agregue el componente
Composite Collider 2D . Esto también agregará automáticamente RigidBody2D.
Establezca el parámetro
BodyType RigidBody2D en
Estático , y luego seleccione la casilla de verificación
Usado por Compuesto en el componente
2D de Tilemap Collider :
Después de eso, notará que estos colisionadores cuadrados innecesarios en el medio de las paredes desaparecen.
Termine de crear los muros construyéndolos y cerrándolos en la parte superior, de unos 16 azulejos de altura. No te olvides que el Collideable debe seleccionarse como el mapa de mosaico activo de la
ventana de paleta de mosaico:
La sección de mazmorra no será de ninguna dificultad para nuestro héroe sin obstáculos. Ahora comenzaremos a trabajar en la creación de la sala de la muerte, complementada por hermosos corredores de mármol antiguos. Después de superar todos estos obstáculos, el jugador recibirá una recompensa: una montaña de oro.
Para dibujar estos corredores, usaremos el pincel de mosaico especial
Rule Tile . Como viste al comienzo del tutorial, ya se han agregado al proyecto scripts de mosaico adicionales del repositorio
Unity 2D Extras Github. Uno de ellos es Rule Tile.
Rule Tile nos permite establecer reglas sobre qué mosaicos dibujar en función de los mosaicos vecinos que tenemos.
Haga clic derecho en la carpeta
Prefabs del proyecto y seleccione
Crear -> Mosaico de reglas (este elemento debe estar en la parte superior del menú). Nombre el nuevo elemento
MarbleFloorRuleTile :
Seleccione este nuevo
MarbleFloorRuleTile y use el inspector para establecer el
Sprite predeterminado en
roguelikeDungeon_transparent_335 . Luego agregue una nueva regla de Regla de mosaico haciendo clic en el ícono
+ . Seleccione el valor de
roguelikeDungeon_transparent_339 para
Sprite de esta regla y haga clic en todos los cuadrados exteriores en el esquema de la regla para que cada uno tenga una flecha verde que apunte hacia afuera:
Usando la herramienta Pincel de relleno de caja (
B ) en la Paleta de mosaicos y seleccionando la Capa base de
Tilemap , dibuje una sección recta de la pared de mármol. Es necesario que cubra todo el espacio libre del piso.
Puede notar que cuando hacemos esto, la capa cerrará los azulejos de la pared con colisionadores, porque el orden de las capas aún no se ha establecido. Esto se puede solucionar fácilmente seleccionando GameObject
Collideable y cambiando el
orden en la capa del componente
Tilemap Renderer a un valor más alto (
5 será suficiente):
Regrese a la carpeta
Prefabs del proyecto, abra la ventana Mosaico y seleccione la paleta RoguelikeCave, y luego arrastre
MarbleFloorRuleTile a un espacio vacío en la paleta:
Use el pincel de relleno de caja y dibuje algunas secciones del piso de mármol en la habitación:
Tenga en cuenta que un mosaico de reglas personalizado, completamente rodeado desde todos los ángulos y caras, se convierte en un mosaico decorado (el sprite seleccionado en el editor de Reglas de mosaico).
Esta es una trampa!
No, no agregaremos al Almirante Akbar al juego como personaje. ¡Crearemos un pincel de mosaico para la prefabricación de la trampa, que usaremos para dibujar trampas que disparan con cuchillas giratorias!
Cree un nuevo GameObject vacío en la jerarquía y asígnele el nombre
ShootingTrap . Cree un niño GameObject vacío en ShootingTrap. Nómbralo
Sprite :
Seleccione
Sprite y agregue el componente
Renderizador de Sprite . Establezca la
Capa de clasificación en
Reproductor y el
Orden en Capa en
1 para que se represente sobre el resto de las capas. Seleccione el campo
Sprite y configure
roguelikeDungeon_transparent_180 como el sprite.
Ahora gire la Transformación del objeto
Sprite en
-90 en el eje
Z :
A continuación, regrese a GameObject
ShootingTrap y agregue un nuevo componente utilizando el inspector. En el campo de búsqueda, encuentre
Shooting Trap y adjunte este script.
Este script se agrega a los archivos de proyecto que descargó; de hecho, lanza corutina cada dos segundos, creando una instancia prefabricada de la hoja de sierra giratoria (o cualquier otra prefabricada) en la posición actual de la trampa.
Establezca el parámetro
Item to Shoot Prefab del componente Shooting Trap en
Projectile (el prefab se encuentra en
/ Assets / Prefabs ):
Inicie el juego nuevamente en el editor y use el modo Escena para encontrar la trampa. Ella trabaja!
Arrastre una copia de
ShootingTrap desde la jerarquía a la
carpeta / Assets / Prefabs del proyecto para crear un prefab. Eliminar ShootingTrap de la jerarquía.
Utilizamos otro script de pincel de mosaico llamado
PrefabBrush para crear un pincel que pueda dibujar prefabricados en capas de Tilemap.
Haga clic derecho en la
carpeta / Assets / Prefabs del proyecto y seleccione
Crear -> Pincel prefabricado . Denomine el objeto
PrefabBrush .
Utilice el inspector para establecer el parámetro
Prefabs Size PrefabBrush en
1 y el parámetro
Elemento 0 en
ShootingTrap .
Cree una nueva capa de mapa de mosaico llamada
Trampas en la
cuadrícula y abra la ventana Paleta de mosaico.
Seleccione el pincel de mosaico normal (
B ) y use el menú desplegable en la parte inferior de la ventana Paleta de
mosaico para seleccionar
PrefabBrush . Seleccione Active Tilemap
Traps como la capa y use la ventana Scene para dibujar varias trampas prefabricadas a lo largo del borde izquierdo de la habitación.
Expanda las
trampas de GameObject en la jerarquía y experimente con el valor de
Demora de inicio de disparo para cada valor en cada Gameobject
ShootingTrap utilizando el script de la trampa de disparo en el inspector. Agregue 0.25 al valor de cada trampa, es decir:
- First ShootingTrap -> Shoot Start Delay = 0.1
- Second ShootingTrap -> Shoot Start Delay = 0.35
- Third ShootingTrap -> Shoot Start Delay = 0.6
- Y así sucesivamente ...
Inicia el juego y pasa la prueba, si te atreves.
Objetivo final
El objetivo de esta mini mazmorra es conseguir un montón de oro. La fama y la fortuna esperan a quienes lo alcanzan, evitando las espadas voladoras mortales.
Crea una nueva capa de Tilemap llamada
Goal en GameObject
Grid . Seleccione
Objetivo y cambie el valor del
Orden de representación de Tilemap en Capa a
2 :
Sin cerrar la ventana Paleta de mosaicos, asegúrese de que PrefabBrush todavía esté seleccionado. Haga que el
Elemento 0 se refiera al
Objetivo preestablecido de la
carpeta / Assets / Prefabs del proyecto.
Esta es una casa prefabricada con una montaña de sprites dorados, con Box Collider 2D con Is Trigger activado, una fuente de sonido adicional y con un simple script
Goal.cs que reproduce el sonido de alcanzar el objetivo y reinicia el nivel cuando el jugador cae en el área de activación.
Use el pincel de mosaico estándar para dibujar un mosaico prefabricado objetivo en la parte superior de la habitación detrás de las trampas:
Comienza el juego nuevamente e intenta alcanzar la meta. Cuando llegue a este mosaico, se
OnTriggerEnter2D() lógica
OnTriggerEnter2D() de
Goal.cs , que reproducirá el efecto de sonido y reiniciará el nivel.
Toques finales
Ahora la mazmorra es demasiado ligera y libre. Podemos agregarle estilo cambiando a un material de sprite 2D que pueda responder a la luz.
Seleccione los objetos Sprite Player, Goal y ShootingTrap, y
haga que el material Sprite Renderer use
SpriteLightingMaterial :
Este es un material con un sombreador
Sprite / Diffuse adjunto. Permite que la iluminación de la escena afecte a los sprites.
En la
cuadrícula de GameObject
, seleccione los
objetos BaseLayer, DungeonFloorDecoration, Collideable y Goal , y luego use el inspector para usar también el
Material de representación de mosaico SpriteLightingMaterial en el material.
Luego seleccione
Luz direccional en GameObject
Lights y reduzca la Luz de
intensidad a
0.3 .
¡Mucho mejor!
Además, ahora notará que el jugador lleva una
luz de punto , es decir, la
linterna brilla a su alrededor.
Ahora que los sprites en la escena usan el material correcto, la iluminación de Unity afecta a todos los sprites circundantes.
Arrastre dos copias del
prefabricado FlickerLight desde la
carpeta / Assets / Prefabs del proyecto en Scene y colóquelas en GameObject
Lights .
Establezca la primera posición prefabricada
(X: -11.25, Y: 4, Z: -1.35) y la segunda -
(X: 2.75, Y: 4, Z: -1.35) .
Cree una nueva capa de Tilemap llamada
WallsAndObjects y establezca el
Orden del
renderizador de Tilemap en el inspector de
capas en
15 . Recuerde que
Material también usa
SpriteLightingMaterial .
Cambie el pincel de la paleta de mosaico a
Pincel predeterminado y el
Mapa de
mosaico activo a
WallsAndObjects .
Use la herramienta Pincel (
B ) para dibujar dos mosaicos de "lámpara de luz" debajo de cada uno de los nuevos FlickerLight que colocamos en las esquinas del área inicial:
Tiempo de dificultad
Veamos si podemos mejorar la mazmorra aún más. Usa la capa Tilemap
WallsAndObjects para crear estanterías en la parte superior de la sala de mazmorras usando otra paleta de mosaicos llamada
RoguelikeCustom . También dibuje una o dos partes de la pared agrietada.
Regrese a la capa Tilemap
DungeonFloorDecoration y agregue algunos detalles más al piso de mármol, por ejemplo, grietas en varias baldosas:
¡Felicitaciones, has completado tu primer nivel de mini mazmorra! Como resultado, debería obtener algo similar:
¿A dónde ir después?
Si se saltó un paso, puede ver el resultado final de este tutorial abriendo el proyecto
final de Unity
Rayzor a partir de
materiales descargables.
Aprendimos mucho en este tutorial, pero como con cualquier otro negocio, ¡siempre hay algo más!
Hay interesantes secuencias de comandos de pincel de mosaico que no se tratan en este tutorial. Lea sobre ellos
aquí y piense si puede usarlos.
También puede aprender cómo crear mosaicos animados
aquí .