Intercambio de Sprites en Unity para Juegos de Puzzle

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

Resumen

¿Cómo implementar la selección y deselección de caramelos en un juego móvil?

En el desarrollo de un juego móvil, es crucial diseñar interacciones ágiles y eficientes. Aunque no probamos las funcionalidades directamente en el dispositivo móvil, preparamos y testeamos muchas características dentro del entorno de Unity. Vamos a profundizar en la programación de gameplay para gestionar cómo se seleccionan o deseleccionan los caramelos y cómo se realiza el intercambio entre ellos.

¿Cómo realizar un swap entre dos caramelos?

Cuando haces clic en un caramelo y luego en otro, el objetivo es intercambiar sus posiciones, eso sí, en esta etapa inicial, sin las restricciones de adyacencia. Para esto:

Crear un método swapSprite: Este método se encarga de intercambiar las imágenes de los caramelos.

public void swapSprite(Candy NewCandy) {
    if (GetComponent<SpriteRenderer>().sprite == NewCandy.GetComponent<SpriteRenderer>().sprite) {
        return;
    }
    Sprite oldCandy = NewCandy.GetComponent<SpriteRenderer>().sprite;
    NewCandy.GetComponent<SpriteRenderer>().sprite = GetComponent<SpriteRenderer>().sprite;
    GetComponent<SpriteRenderer>().sprite = oldCandy;
}

Uso de la técnica auxiliar: Como el swap tradicional de valores requiere de una variable temporal, hacemos uso de una copia auxiliar para asegurar el intercambio sin pérdida de información.
Intercambio de identificadores: Además de las imágenes, es fundamental actualizar los identificadores únicos de cada caramelo para mantener la coherencia en el juego.
```
int tempId = NewCandy.id;
NewCandy.id = this.id;
this.id = tempId;
```

¿Cuándo llamar al método de intercambio?

El método swapSprite debe ser invocado apropiadamente para que los caramelos cambien de imagen al hacer clic en ellos. Considera estos momentos:

Interacción del usuario: Se debe hacer dentro de eventos como mouseDown, evitando situaciones donde el jugueteo no permita ningún intercambio visible.
Validación previa: Antes de llamar al método, verifica que se hayan seleccionado dos caramelos diferentes para intercambiar.

¿Qué podemos mejorar en el método swapSprite?

La funcionalidad actual permite cambiar cualquier dos caramelos, incluso si están en posiciones separadas dentro de la pantalla. Aunque esto facilita las primeras pruebas, el objetivo es limitar el movimiento a caramelos adyacentes.

Para que el juego tenga lógica:

Limitar a adyacentes: En el futuro, restringiremos los movimientos a los caramelos que sean vecinos, es decir, con los que está al lado arriba, abajo, izquierda o derecha.

La programación de videojuegos requiere no solo creatividad sino también métodos detallados y ordenados, haciendo que la implementación y las pruebas de cada paso aseguren una experiencia de usuario satisfactoria.

Con esta nueva funcionalidad, puedes empezar a jugar e interactuar dinámicamente con los elementos del juego, construyendo una base sólida para futuros desarrollos y mejoras. ¡Sigue desarrollando tus habilidades, explora las capacidades de Unity, y permite que tu imaginación tome forma en cada línea de código!

Leonardo Ernesto Solórzano Carrasquero

student•

Sigan este codigo si quieren obtener un swap como el mio:

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

public class Candy : MonoBehaviour
{
    private static Color selectedColor = new Color(0.5f, 0.5f, 0.5f, 1.0f);
    private static Candy previousSelected = null;

    private SpriteRenderer spriteRenderer;
    private bool isSelected = false;

    public int Id;

    private Vector2[] adjacentDirections = new Vector2[]
    {
        Vector2.up,
        Vector2.down,
        Vector2.left,
        Vector2.right,
    };

    public Vector3 objective;

    GameObject newCandy;

    private void Awake()
    {
        spriteRenderer = GetComponent<SpriteRenderer>();
        objective = Vector3.zero;
    }

    private void OnMouseDown()
    {
        if (spriteRenderer.sprite == null || BoardManager.sharedInstance.isShifting)
        {
            return;
        }

        if (isSelected)
        {
            DeselectCandy();
        }
        else
        {
            if (previousSelected == null)
            {
                SelectCandy();
            }
            else
            {
                SwapSprite(previousSelected.gameObject);
                previousSelected.DeselectCandy();
                //SelectCandy();
            }
        }
    }

    private void Update()
    {
        if (objective != Vector3.zero)
        {
            this.transform.position = Vector3.Lerp(this.transform.position, objective, 5 * Time.deltaTime);
        }
    }

    private void SelectCandy()
    {
        isSelected = true;
        spriteRenderer.color = selectedColor;
        previousSelected = gameObject.GetComponent<Candy>();
    }

    private void DeselectCandy()
    {
        isSelected = false;
        spriteRenderer.color = Color.white;
        previousSelected = null;
    }

    public void SwapSprite(GameObject candy)
    {
        if (spriteRenderer.sprite == candy.GetComponent<SpriteRenderer>().sprite)
        {
            return;
        }

        this.objective = candy.transform.position;
        candy.GetComponent<Candy>().objective = this.transform.position;
    }
}

Edward Fernandez

student•

Excelente aporte, lo único que le añadiría sería el siguiente código

if (newPosition == transform.position)
        {
            newPosition = Vector3.zero;
        }

Esto se debe a que el método Update se llama en cada frame y cómo newPosition != Vector3.zero entonces estará llamando el método en cada frame lo cual puede afectar un poco el performance.

Ervic Perez Mendoza

student•

Yo agregue a tu código el siguiente método.

 public void SwapId(Candy candy)
    {
        int tempId = candy.id;
        candy.id = this.id;
        this.id = tempId;
    }

Wandy Rafael Santana Evangelista

student•

Este curso esta super genial, y más aún cuando ya haz tomado los 3 cursos anteriores de la Carrera, entiendes casi todo, excepto a veces por la lógica, pero es parte del proceso aprender a leer código y desarrollar la destreza del pensamiento lógico.

Carlos David Zamora Gutiérrez

student•

Estoy de acuerdo, creo que van a sacar otro curso de Unity con este profe, hasta ahora he aprendido un montón con la carrera.

Samar Jaffal

student•

Una de las mejores carreras que puedes aprender en Platzi. Sinceramente cada curso es mas interesante que el anterior. Y todos te enseñan algo nuevo. Yo me siento muy satisfecha hasta ahora.

Alejandro Arroyave Bedoya

student•

Cual es la diferencia entre newCandy.GetComponent<SpriteRenderer>.sprite y newCandy.spriteRenderer.sprite?

Bruno Ivan Paz Martinez

student•

En el primero le estas pidiendo a newCandy su componente "sprite renderer" y en el segundo le estas asignando un sprite a newCandy

https://docs.unity3d.com/ScriptReference/SpriteRenderer-sprite.html https://docs.unity3d.com/es/current/ScriptReference/GameObject.GetComponent.html

Yone Moreno Jiménez

student•

Buena pregunta Alejandro, realmente a nivel de código el funcionamiento parece igual

`    public void SwapSprites(Candy newCandy)
    {
        if(spriteRenderer.sprite == newCandy.spriteRenderer.sprite)
        {
            return;
        }

        Sprite oldCandy = newCandy.spriteRenderer.sprite;
        newCandy.spriteRenderer.sprite = spriteRenderer.sprite;
        spriteRenderer.sprite = oldCandy;

        int oldId = newCandy.id;
        newCandy.id = id;
        id = oldId;
    }

Al fin y al cabo tengamos en cuenta que en el script Candy, en el Awake, al iniciar iniciar el juego obtenmos el spriteRenderer así:

    private void Awake()
    {
        spriteRenderer = GetComponent<SpriteRenderer>();
    }

Realmente entiendo que usar newCandy.GetComponent<SpriteRenderer>.sprite es hacer dos veces lo mismo!!

Leonardo Gutierrez

student•

Genial

Juan Sebastian Ortiz Santacoloma

student•

En vos confiamos :D