Creación y Configuración de Tablero en Unity para Videojuegos

Clase 11 de 31 • Curso de Desarrollo de Videojuegos para Móviles con Unity

Resumen

Configura un tablero funcional en Unity de forma clara: crea un GameObject vacío, añade el script Board Manager, define el array de prefabs con seis caramelos y establece 8 columnas por 12 filas. Con un solo clic podrás generar más de cien espacios y ajustar su posición para una composición limpia en pantalla.

¿Cómo crear el board manager en Unity?

Para iniciar, crea un GameObject vacío, renómbralo como Board Manager y colócalo en 0,0,0 para centrarlo. Arrastra el script correspondiente desde la carpeta de scripts hasta el Inspector del objeto. Así queda listo para administrar filas, columnas y gráficos del tablero.

Crear objeto: clic derecho en la jerarquía, objeto vacío, renombrar a Board Manager.
Posicionar: usar 0,0,0 para centrar en la escena.
Asignar script: arrastrar el Board Manager al Inspector del objeto.

¿Cómo etiquetar un objeto vacío para localizarlo rápido?

Seleccionar el Board Manager en la jerarquía.
En el Inspector, hacer clic en el cubo gris del icono.
Elegir un color (por ejemplo, rojo) para identificarlo visualmente.
Beneficio: el objeto ya no “desaparece” en la vista y es fácil de seleccionar.

¿Cómo configurar prefabs, filas y columnas?

En el Inspector, completa las variables del Board Manager. Define el array de prefabs con las seis imágenes de los caramelos: arrastra los caramelos “completos” desde la carpeta de sprites abriendo el tile set. No uses piezas rotas. Luego, ajusta el tamaño del tablero a 8 columnas y 12 filas. Finalmente, asigna el caramelo actual con el prefab creado previamente y elimina el cuadrado placeholder del centro.

Array de prefabs: cambiar tamaño de 0 a 6.
Rellenar elementos: sol, marquito, ola, sandía completa, caracola y pez.
Tamaño del tablero: x = 8 columnas, y = 12 filas.
Caramelo actual: arrastrar el prefab del caramelo al Inspector del Board Manager.
Limpiar placeholder: eliminar el cuadrado marrón del centro.

¿Qué variables debes completar?

Array de prefabs: seis caramelos completos en elementos 0 a 5.
Columnas y filas: x e y para definir la grilla.
Caramelo actual: prefab que se instanciará en cada espacio.

¿Cómo probar y ajustar el tablero en la escena?

Pulsa Play y observa el resultado en la pestaña Scene para ver el tablero completo. Verás los cuadrados bien alineados y nombrados por coordenada. Si el tablero aparece en medio, mueve el Board Manager (ya etiquetado) hacia la esquina inferior izquierda y ajusta márgenes para evitar recortes en los bordes. Deja espacio superior para estadísticas, movimientos o tiempo.

¿Cómo leer las coordenadas Candy xx?

Candy 00: columna 0, fila 0.
Candy 01: columna 0, fila 1, y así sucesivamente hasta Candy 0 11.
Siguiente columna: tras llegar arriba, continúa con columna 1, fila 0.
Patrón: todos los x = 0 son primera columna; luego incrementa x.

¿Cómo corregir el corte en los bordes?

Causa: el centro del caramelo coincide con la celda inicial.
Efecto: al acercarse al borde, el primer elemento se recorta.
Solución: desplazar el Board Manager ligeramente para crear margen lateral.
Revisión: comprobar equilibrio visual izquierda-derecha y espacio superior e inferior.

¿Qué sigue en el flujo de trabajo?

Automatización lista: con un clic se generan más de cien espacios.
Próximo paso: reemplazar placeholders por sprites reales de caramelos.
Mejora incremental: afinar el algoritmo que poblará el tablero usando las variables del Board Manager.

¿Te gustaría que profundicemos en el algoritmo para poblar los sprites o en trucos de organización del Inspector? Comparte tus dudas y lo abordamos en detalle.

Leonardo Ernesto Solórzano Carrasquero

student•

Para quien pueda interesar, a mi me gusta mas que tenga al menos un poquito de separacion entre celdas de frutas, para ello cree dos variables a las que llame padding (no se mucho de web, pero creo que era el termino) una para X y otra para Y, se las adicione al Vector2 del offset y este fue mi resultado:

Leonardo Ernesto Solórzano Carrasquero

student•

El codigo:

Esdras Benjamín Pavón

student•

Muy buena info! Creo que te refieres al margin

Leonardo Gutierrez

student•

A alguien mas le sale este problema al querer arrastrar el script

Leonardo Gutierrez

student•

He encontrado la solución, solo que hay otras alternativas para poder hacerlo:

Revisar el nombre de la clase sea el mismo que el del Script
Revisar que en la consola no esté informando de algún error (En mi caso si lo estaba haciendo y por más que el punto uno estuviese bien no me dejaba arrastrar el script dentro del objeto, por eso la parte que estaba informando la consola, solo lo puse en comentarios para que no lo tome como error y recién me dejo arrastrarlo)
Cambiar la versión en la que estás trabajando tu proyecto.

Jesus Pantoja Rodriguez

student•

Cómo quien dice hay que actualizar la versión para poder poner el Script

Arturo Escamilla García

student•

control + shift + n = crear un objeto vació en "Hierachy"

Juan Castro

teacher•

Las etiquetas nos ayudan a encontrar más fácilmente los Game Objects sin contenido visual :+1:.

Juan Pablo Lagos Idrobo

student•

Si alguien cómo utiliza prefabs con animación guardados como GameObject y no lo puede agregar como lo que hace el profesor, lo que tienen que hacer es cambiar en el código de BoardManager el List de Spirte a GameObject

// Si utilizas sprites como el profesor
public List<Spite> prfabs = new List<Sprite>();

// Si utilizas prefabs creados por ti
public List<GameObject> prfabs = new List<GameObject>();

walter Jorge

student•

hola me sale lo siguiente IndexOutOfRangeException: Index was outside the bounds of the array. BoardManager.CreateInitialBoard (UnityEngine.Vector2 offset) (at Assets/Scripts/BoardManager.cs:68) BoardManager.Start () (at Assets/Scripts/BoardManager.cs:31) pero voy a las líneas y no veo el error.

using System.Collections;
using System.Collections.Generic;
using UnityEngine;

public class BoardManager : MonoBehaviour
{//creamos 1 singleton solo puede esta instanciado 1 vez 
    public static BoardManager sharedInstance;
    public List<Sprite> prefabs = new List<Sprite>();
    public GameObject currentCandy; //caramelo actual
    public int xSize, ySize;

    private GameObject[,] candies; //matriz de caramelo

    public bool isShifting { get; set; }//se esta intercambiando caramelos

    private Candy selectedCandy;

    // Start is called before the first frame update
    void Start()
    {//si es null inicializamos tecnica del singleton
        if (sharedInstance == null)
        {
            sharedInstance = this;
        }
        else
        {
            Destroy(gameObject);
        }

        Vector2 offset = currentCandy.GetComponent<BoxCollider2D>().size;
        CreateInitialBoard(offset);
    }

    //crear tablero inicial
    private void CreateInitialBoard(Vector2 offset)
    {
        candies = new GameObject[xSize, ySize];

        float startX = this.transform.position.x;
        float startY = this.transform.position.y;
        int idx= -1;
        
        //creamos bucle anidado
        for(int x = 0; x < xSize; x++)
        {
            for(int y = 0; x < ySize; y++)
            {//con esto inicialiso la variable x e y
                GameObject newCandy = Instantiate(currentCandy,
                    new Vector3(startX + (offset.x*x),
                    startY +(offset.y*y),
                    0),
                    currentCandy.transform.rotation);//rotacion
                //lo siguiente es poner el nombre del candy
                newCandy.name = string.Format("Candy[{0}] [{1}]", x, y);

                //creo 1 bucle si el valor actual se corresponde  con la pos de arriba y abajo
                do {//ejecuta la variable idx  como numero aliatorio
                    idx = Random.Range(0, prefabs.Count);
                } while((x>0 &&idx == candies[x-1,y].GetComponent<Candy>().id) ||
                        (y>0 &&idx == candies [x, y-1].GetComponent<Candy>().id));

                
                Sprite sprite = prefabs[idx]; //obtenemos el numero aleatorio  entre 0 y 5
                newCandy.GetComponent<SpriteRenderer>().sprite = sprite;//invoco al getcomponet y cambiamos el sprite por el new Sprite
                newCandy.GetComponent<Candy>().id = idx;

                newCandy.transform.parent = this.transform;//padre del caramelo
                candies[x, y] = newCandy;//crear nuevo caramelo

                
            }
        }
    }

    // Update is called once per frame
    void Update()
    {
        
    }

}

Arturo Masero

student•

Revisa los valores de 'x' y de 'y'. Lo que indica el error es que en la expresión candies[x, y], una de esas variables está fuera del rango del array. Por ejemplo si has establecido que candies tiene un tamaño de 3*3, si pones candies[1,4] daría ese error.

Puedes ponerte mensajes por consola justo antes de esa línea. Por ejemplo: Debug.Log("X vale " + x); Y al ejecutar el programa, en la pestaña 'Console' de Unity verás los mensajes.

Jesus Pantoja Rodriguez

student•

Yo tengo un problema no sé qué sea alguien que me pueda ayudar por favor?

Leonardo Gutierrez

student•

Genial

Gerónimo Pondal

student•

no voy a chequear de nuevo una vez mas, es frustrante.

using System.Collections;
using System.Collections.Generic;
using UnityEngine;

public class BoardManager : MonoBehaviour
{//creamos 1 singleton solo puede esta instanciado 1 vez 
    public static BoardManager sharedInstance;
    public List<Sprite> prefabs = new List<Sprite>();
    public GameObject currentCandy; //caramelo actual
    public int xSize, ySize;

    private GameObject[,] candies; //matriz de caramelo

    public bool isShifting { get; set; }//se esta intercambiando caramelos

    private Candy selectedCandy;

    // Start is called before the first frame update
    void Start()
    {//si es null inicializamos tecnica del singleton
        if (sharedInstance == null)
        {
            sharedInstance = this;
        }
        else
        {
            Destroy(gameObject);
        }

        Vector2 offset = currentCandy.GetComponent<BoxCollider2D>().size;
        CreateInitialBoard(offset);
    }

    //crear tablero inicial
    private void CreateInitialBoard(Vector2 offset)
    {
        candies = new GameObject[xSize, ySize];

        float startX = this.transform.position.x;
        float startY = this.transform.position.y;
        int idx= -1;
        
        //creamos bucle anidado
        for(int x = 0; x < xSize; x++)
        {
            for(int y = 0; x < ySize; y++)
            {//con esto inicialiso la variable x e y
                GameObject newCandy = Instantiate(currentCandy,
                    new Vector3(startX + (offset.x*x),
                    startY +(offset.y*y),
                    0),
                    currentCandy.transform.rotation);//rotacion
                //lo siguiente es poner el nombre del candy
                newCandy.name = string.Format("Candy[{0}] [{1}]", x, y);

                //creo 1 bucle si el valor actual se corresponde  con la pos de arriba y abajo
                do {//ejecuta la variable idx  como numero aliatorio
                    idx = Random.Range(0, prefabs.Count);
                } while((x>0 &&idx == candies[x-1,y].GetComponent<Candy>().id) ||
                        (y>0 &&idx == candies [x, y-1].GetComponent<Candy>().id));

                
                Sprite sprite = prefabs[idx]; //obtenemos el numero aleatorio  entre 0 y 5
                newCandy.GetComponent<SpriteRenderer>().sprite = sprite;//invoco al getcomponet y cambiamos el sprite por el new Sprite
                newCandy.GetComponent<Candy>().id = idx;

                newCandy.transform.parent = this.transform;//padre del caramelo
                candies[x, y] = newCandy;//crear nuevo caramelo

                
            }
        }
    }

    // Update is called once per frame
    void Update()
    {
        
    }

}

Creación y Configuración de Tablero en Unity para Videojuegos

La estructura de un juego para móvil

Desarrollo de un clon de Candy Crush con Unity para Android e iOS

Game design rápido para prototipar con Unity

Repositorio del curso Unity para móviles

Creación de Juegos Móviles en Unity: Estructuración de Proyectos

Sprite Atlas y Generación de Caramelos

Sprite Editor y cámaras en Unity para móviles

Sprites múltiples en Unity con slice automático

Script base de Candy en Unity C#

Configuración y Gestión del Tablero en Unity con C#

Inicializar tablero 2D con bucles anidados

Configuración de slice por tamaño en Unity