2048 en Unity Tutorial - 1

Crea la base del juego

Prepara el tablero en Unity.

Vamos a montar la interfaz y crear una ficha reutilizable. Al terminar, Unity tendrá una cuadrícula lista para que el código la rellene.

10 minutosUnity 2022 LTS o posteriorSin plugins

1. Crea el proyecto

1. Abre Unity Hub y crea un proyecto nuevo con la plantilla 2D (Core). Ponle Juego2048.
2. Guarda la escena como Assets/Scenes/Game.unity. Crea también las carpetas Assets/Scripts y Assets/Prefabs.
3. En Project Settings → Player → Active Input Handling, selecciona Both o Input Manager (Old) para que funcionen las flechas de este tutorial. Unity puede pedir reiniciar el Editor.

¿No ves “Active Input Handling”? En versiones antiguas de Unity el Input Manager ya está activo. El juego también se podrá controlar con botones de UI.

2. Dibuja la interfaz

1. En la jerarquía, crea UI → Canvas. Unity añadirá un EventSystem si hace falta. En el Canvas Scaler, selecciona Scale With Screen Size y usa 1080 × 1080 como referencia.
2. Dentro del Canvas, crea un objeto vacío llamado BoardRoot. Añádele un Grid Layout Group. Configura Constraint: Fixed Column Count, Constraint Count: 4, y deja un espacio pequeño entre casillas (por ejemplo, 8 × 8).
3. En el Grid Layout Group, elige Start Corner: Upper Left, Start Axis: Horizontal, Constraint: Fixed Column Count y Constraint Count: 4. Pon Cell Size a 150 × 150 y Spacing a 8 × 8. Haz cuadrado el RectTransform de BoardRoot y dale aproximadamente 624 × 624 para alojar cuatro celdas y tres espacios.
4. Crea rótulos TextMeshPro para Score, Best y un mensaje. Añade dos botones: New Game y Undo.

La escena separa la interfaz, la cuadrícula visual y la ficha que reutiliza el controlador.

3. Crea la ficha como prefab

1. Dentro de BoardRoot, crea UI → Image. Llámala Tile y elige una imagen de fondo beige. La cuadrícula ajustará su tamaño.
2. Dentro de Tile, crea UI → Text - TextMeshPro. Centra el texto, aumenta su tamaño y activa Auto Size.
3. Desde Package Manager, importa TextMeshPro Essentials si Unity lo solicita.
4. Arrastra Tile desde Hierarchy a Assets/Prefabs para crear el prefab. Después borra el objeto de la escena: el controlador generará las 16 celdas.

En la imagen de fondo y en el texto del prefab, desactiva Raycast Target. Los clics no deben quedarse atrapados en cada ficha.

4. Programa cómo se ve cada ficha

Crea Assets/Scripts/TileView.cs. Este componente no decide las reglas: recibe un valor y actualiza el texto y el color. Así, la lógica del juego queda separada de la presentación.

Assets/Scripts/TileView.csC# · script completo

using TMPro;
using UnityEngine;
using UnityEngine.UI;

public sealed class TileView : MonoBehaviour
{
    [SerializeField] private Image background;
    [SerializeField] private TMP_Text numberLabel;

    private void Awake()
    {
        if (background == null || numberLabel == null)
        {
            Debug.LogError("Asigna Background y Number Label en el prefab Tile.", this);
            enabled = false;
        }
    }

    public void SetValue(int value)
    {
        numberLabel.text = value == 0 ? string.Empty : value.ToString();

        switch (value)
        {
            case 0:
                background.color = new Color32(205, 193, 180, 255);
                numberLabel.color = new Color32(119, 110, 101, 255);
                break;
            case 2:
                background.color = new Color32(238, 228, 218, 255);
                numberLabel.color = new Color32(119, 110, 101, 255);
                break;
            case 4:
                background.color = new Color32(237, 224, 200, 255);
                numberLabel.color = new Color32(119, 110, 101, 255);
                break;
            case 8:
                background.color = new Color32(242, 177, 121, 255);
                numberLabel.color = Color.white;
                break;
            case 16:
                background.color = new Color32(245, 149, 99, 255);
                numberLabel.color = Color.white;
                break;
            case 32:
                background.color = new Color32(246, 124, 95, 255);
                numberLabel.color = Color.white;
                break;
            case 64:
                background.color = new Color32(246, 94, 59, 255);
                numberLabel.color = Color.white;
                break;
            default:
                background.color = new Color32(237, 207, 114, 255);
                numberLabel.color = Color.white;
                break;
        }
    }
}

Selecciona el prefab y añade TileView. Arrastra la imagen de fondo y el texto a sus campos Background y Number Label. El campo de valor cero deja la celda vacía.

5. Comprueba el montaje

Lista para continuar

La escena contiene un Canvas, un BoardRoot cuadrado con Grid Layout Group, los rótulos y botones, y un prefab Tile con TileView correctamente conectado.

En la siguiente lección programamos la lógica del tablero y conectamos estas piezas al controlador.

← Índice de lecciones 

Siguiente: lógica del juego →

 

En esta lección

1. Crea el proyecto 

2. Dibuja la interfaz 

3. Crea la ficha

 4. Script TileView 

5. Comprueba el montaje

Demostración del proyecto de referencia · ver repositorio y licencia MIT.