Sincronización de Cámara y Fondo en Videojuegos 2D

Clase 32 de 53 • Curso de C# para Videojuegos

Resumen

¿Cómo solucionar el barrido de cámara para crear un salto inmediato?

En el desarrollo de videojuegos, uno de los desafíos comunes es lograr que la cámara siga al personaje de manera fluida y necesaria para la narrativa o gameplay del juego. En este caso, el objetivo es que, cuando el personaje muera, la cámara vuelva inmediatamente a la posición inicial sin un efecto de barrido que pueda ser molesto para el jugador.

Para lograrlo, es fundamental notificar a la cámara para que se reinicie a la posición original justo después de que el personaje también lo haga. Aquí es donde entra en escena el método resetCameraPosition, que fue preparado no hace mucho tiempo.

// Código para reiniciar la posición de la cámara
GameObject mainCamera = GameObject.Find("Main Camera");
CameraFollow cameraFollowComponent = mainCamera.GetComponent<CameraFollow>();
cameraFollowComponent.ResetCameraPosition();

¿Qué pasos seguir ante problemas con nombres de variables?

Es esencial mantener la claridad y evitar confusiones con las variables predeterminadas de los editores. Por ejemplo, cambiar el nombre de la variable a mainCamera ayudó a evitar que el editor confundiera nuestra variable con una propiedad llamada "cámara".

¿Cómo asegurar que el reinicio de la cámara sea efectivo?

Para verificar que el script de reinicio funciona adecuadamente, simplemente se guarda y prueba el juego. Si el personaje muere y la cámara regresa de inmediato a la posición original sin un barrido, entonces sabemos que el ajuste ha sido exitoso.

¿Cómo personalizar el fondo en nuestro videojuego?

La estética de un juego es crucial para la experiencia del jugador, y el fondo juega un papel significativo en esta. Cambiar el simple fondo azul inicial por un diseño más atractivo enriquece la narrativa visual.

Pasos para implementar un nuevo fondo:

Importación del sprite: Dentro de la carpeta "sprites", busca el archivo de fondo que deseas usar y arrástralo al escenario.
Ajuste de escala y posición: Usa la herramienta de escalado para ajustar el tamaño del fondo en proporción al escenario. Puedes centrarlo fácilmente ajustando sus coordenadas a (0, 0, 0).
Configuración de movimiento: Para que el fondo se mueva con la cámara, configúralo como un "hijo" de la cámara. Esto significa que al moverse la cámara, el fondo también se mueve, logrando un efecto visual que hace sentir como si el jugador estuviera en movimiento mientras el fondo se mantiene estático.

¿Qué beneficios aporta un fondo fijo que se mueve con la cámara?

Al realizar que el fondo se mueva siempre con la cámara —que técnicamente se siente como estático al usuario— se logra un efecto agradable, dándole al jugador la sensación de que el mundo del juego es coherente y continuo. Esto también ayuda a prevenir cualquier distracción visual potencial que un fondo estático mal incrustado podría causar. Además, este mecanismo es esencial cuando se trata de diseñar videojuegos que incluyen escenarios vastos o niveles complejos donde la cohesión visual es clave para una mayor inmersión del jugador.

Estos ajustes y técnicas enseñadas son fundamentales para mejorar la calidad del juego. Con prácticas simples pero efectivas, puedes ofrecer una experiencia más agradable a tus jugadores. Llena tus proyectos con creatividad y continúa explorando maneras de hacerlos únicos. Siempre hay espacio para innovar. ¡Adelante!

Gregson Murcia Castro

student•

Si en algún momento el fondo les tapa el contenido es bueno usar la propiedad en el Sprite Render de Order in Layer, la cual es como si tuviéramos capas de imágenes que podemos sobreponer. Y ya que por defecto las demás imágenes que no son el fondo esta en el 0, basta con poner el fondo en -1.

Francisco Parejo

student•

Pensé en hacerlo y tú me lo confirmaste. Gracias!

Manuel Bourrouett

student•

Excelente aporte muchas gracias!

Alex Quintero

student•

Si el background o su fondo les llega a tapar sus plataformas revisen en sus plataformas si la posición de Z esta en 0 por que esto podria hacer que el background oculte sus sprites. Me ocurrio que tenia las plataformas grandes con position 10 y me ocultaba

Alex Quintero

student•

En Z

Alex Quintero

student•

Ya despues recuerden darle Apply para que se guarden los cambios en su prefab

Bruno Cal

student•

Luego de completar el diseño de generación de bloques procedural me di cuenta que al ir hacia atrás, no había bloques ya que los destruíamos, mi idea era que los bloques al volver hacia atrás sean los mismos que se habían generado anteriormente y luego destruimos, logré adaptar mi código a esto, el personaje puede ir libremente de adelante hacia atrás y de atrás hacia adelante, conservando los bloques, por delante y por detrás, consumiendo menos CPU, ya que he desactivado los bloques que no están en escena. Les dejo mi código, lo he comentado para subirlo aquí, espero que les sirva. Además tuve que hacer unos cambios con la clase LevelBlock, donde solo añadí una variable int llamada blockID inicializada a 0, y cambios también en el trigger, he creado una clase llamada EnterZone, que sirve como trigger para tanto ir hacia adelante y atrás, y he eliminado el ExitZone:

Les dejo aquí el gif donde se muestra el funcionamiento:

Estos son mis bloques:

Y este es mi código:

LevelManager.cs

public class LevelManager : MonoBehaviour
{
    
	public static LevelManager sharedInstance;
	
	public List<LevelBlock> allTheLevelBlocks = new List<LevelBlock>();
	
	public List<LevelBlock> allGeneratedLevelBlocks = new List<LevelBlock>();
	
	public List<LevelBlock> currentLevelBlocks = new List<LevelBlock>();
	
	
	public Transform levelStartPosition;

	
	void Awake(){
		if(sharedInstance == null){
			sharedInstance = this;
		}
	}
	
    void Start()
    {
        GenerateInitialBlocks();
    }

    void Update()
    {
       
    }
	
	public void AddLevelBlock(string dir, int blockID, bool rem){
		//Creo un número random para obtener el siguiente bloque
		int randomIdx = Random.Range(0, allTheLevelBlocks.Count);
		
		//Inicializo variables
		LevelBlock block;
		Vector3 spawnPosition = Vector3.zero;

		//algoritmo: generamos el primer bloque
		if(currentLevelBlocks.Count == 0){
			block = Instantiate(allTheLevelBlocks[0]);
			//añado al bloque a la lista "allGeneratedLevelBlocks" donde estaran todos los bloques que hemos generado en la partida
			allGeneratedLevelBlocks.Add(block);
			spawnPosition = levelStartPosition.position;
			block.transform.SetParent(this.transform, false);
			
			Vector3 correction = new Vector3(spawnPosition.x-block.startPoint.position.x,spawnPosition.y-block.startPoint.position.y,0);
			
			block.transform.position = correction;
			//En nuestro trigger "EnterZone" activo el booleano de que, este bloque, el primero generado, es el primer bloque del nivel, por lo tanto no habrá bloque detrás de él.
			block.gameObject.GetComponentInChildren<EnterZone>().isEnterZoneOfFirstLevelBlock = true;
			//añado el bloque a la lista de los bloques actuales.
			currentLevelBlocks.Add(block);
			
		}else{ //si no es el primer bloque
				if(dir == "r"){ //si la dirección a la que camina el personaje es derecha
					
				block = Instantiate(allTheLevelBlocks[randomIdx]); //Instancio el bloque nuevo
				
				List<int> blockIDs = new List<int>(); 
				//Declaro una lista "blockIDs" para obtener la última blockID de los bloques actuales,
				//para que el algoritmo sepa donde poner el próximo bloque que va a ser generado
				
				foreach(LevelBlock lvlb in currentLevelBlocks){
					int blID = lvlb.blockID;
					blockIDs.Add(blID);
				}
				 //inicializo la lista
				
				blockIDs.Sort(); //la ordeno de menor a mayor
				blockIDs.Reverse(); //la doy vuelta, de mayor a menor quedaría
				
				block.blockID = blockIDs[0]+1; //declaro que el blockID de este bloque generado es el, el blockID del último bloque en la lista de los bloques actuales más uno. 
								
				LevelBlock currentLastBlock = null; //inicializo en null una variable LevelBlock donde tendré el último bloque en la lista de los actuales
				
				foreach(LevelBlock lvlb in currentLevelBlocks){
					int bllvlID = blockIDs[0];
					if(lvlb.blockID == bllvlID){
						currentLastBlock = lvlb;
					}
				}
				//acá la variable currentLastBlock ya tiene valor, no es nula.
				
				spawnPosition = currentLastBlock.endPoint.position;
				//declaro la posición del siguiente bloque, osea, del que estoy generando ahora
				
				block.transform.SetParent(this.transform, false);
		
				Vector3 correction = new Vector3(spawnPosition.x-block.startPoint.position.x,spawnPosition.y-block.startPoint.position.y,0);
		
				block.transform.position = correction;
				//las correcciones de posición
				
				currentLevelBlocks.Add(block);
				allGeneratedLevelBlocks.Add(block);
				//añado al bloque a las 2 listas
				
				
				if(rem){ //si en AddLevelBlock se le ha pasado al booleano rem el parámetro true, se eliminará el bloque anterior
					RemoveLevelBlock(blockID, "r"); //se le pasa por parámetro el blockID del bloque que llamó al trigger y la dirección en la que iba el personaje
				}
				
				//Este bloque de código es porque si ya hay un bloque delante del bloque en donde ha sido efectuado el trigger, pero desactivado
				//GameObject.SetActive(false) se eliminará el bloque que estaba siendo generado por la parte superior del código.
				//por ejemplo: Tienes el bloque con ID 0, un bloque con ID 1, donde activaste el trigger de la EnterZone y otro adelante con ID 2 pero desactivado
				//esto hará que ese bloque desactivado solo se active y no instancie otro.
				
				//creo una Lista de Transforms donde estos serán los hijos de "Level Manager" pasando (true) por los parámetros de
				//GetComponentsInChildren<T>() hace que también ingrese en la lista los objetos que están GameObject.SetActive(false)
				Transform[] allChildren = currentLastBlock.gameObject.transform.parent.GetComponentsInChildren<Transform>(true);
				LevelBlock disabledNextBlock = null; //declaro en null una variable donde veo si existe un bloque siguiente al del  trigger (variable blockID pasada por AddLevelBlock())
				foreach (Transform child in allChildren){
					if(child.gameObject.activeSelf == false && child.gameObject.GetComponent<LevelBlock>().blockID == currentLastBlock.blockID+1){
						//si el hijo está desactivado Y el blockID del hijo es igual al blockID del último bloque más uno
						disabledNextBlock = child.gameObject.GetComponent<LevelBlock>(); //declaro que el bloque deshabilitado es "child"
						Debug.Log("Encontrado: ID: " + disabledNextBlock.blockID + ". ID DEL ULTIMO ACTIVO: " + currentLastBlock.blockID); //debug
					}
					
				}
				
				
				if(disabledNextBlock != null){ //si se ha encontrado en el bloque de código de arriba un bloque siguiente al del trigger deshabilitado
					Destroy(block.gameObject); //destruyo el bloque generado
					currentLevelBlocks.Remove(block); //remuevo ese bloque de la lista de los actuales, ya que lo destruí, sino quedaría "missing" en la lista
					allGeneratedLevelBlocks.Remove(block); //lo mismo de arriba, pero como ya tengo otro bloque generado en el mismo lugar no necesito que esté en esta lista
					disabledNextBlock.gameObject.SetActive(true); //activo el bloque 
					currentLevelBlocks.Add(disabledNextBlock); //lo añado a los bloques actuales
					RemoveLevelBlock(blockID, "r"); //remuevo el bloque anterior del trigger (si el trigger es blockID 1, se elimina el blockID 0)
				}
				
				
				}else if(dir == "l"){ //si la dirección del personaje es izquierda
				if(blockID != 0){ //y el blockID del trigger es diferente de 0
					block = allGeneratedLevelBlocks[blockID - 1]; //se obtiene de todos los bloques generados el index de el blockID - 1 
					block.gameObject.SetActive(true); //activo ese bloque
					currentLevelBlocks.Add(block); //lo añado a los bloques actuales
					if(rem){ //si el booleano rem está true en el método se ejecuta borrar el bloque siguiente al del trigger
					//por ejemplo, si el trigger se ejecutó en el blockID 1, aquí se habilitó el blockID 0, y se quedará desactivado el blockID 2
					RemoveLevelBlock(blockID, "l");
				}
				}
				}

		}	
	}
	
	public void RemoveLevelBlock(int actualPlayerBlockID, string dir){
		if(dir == "r"){ //si la dirección del personaje es hacia la derecha
		try{ //intento hacer el siguiente código
		LevelBlock oldBlock = allGeneratedLevelBlocks[actualPlayerBlockID-1]; //el bloque viejo es igual al indice del actualblockID, osea el blockID del trigger menos uno.
		currentLevelBlocks.Remove(oldBlock); // remuevo ese bloque de la lista de los actuales
		oldBlock.gameObject.SetActive(false);		//lo deshabilito
		}catch{//si he encontrado alguna excepción, por ejemplo que no existe el índice actualPlayerBlockID-1, etc. Saldrá un debug
			Debug.Log("arregla el catch, ID: " + (actualPlayerBlockID) + "dir: " + dir); //debug
		}
		
		
		}else if(dir == "l"){  //si la dirección es izquierda
		LevelBlock oldBlock = allGeneratedLevelBlocks[actualPlayerBlockID + 1]; //el bloque viejo es igual al indice del actualblockID, osea el blockID del trigger más uno.
		try{//intento hacer el siguiente código
		currentLevelBlocks.Remove(oldBlock);// remuevo ese bloque de la lista de los actuales
		oldBlock.gameObject.SetActive(false);	//lo deshabilito	
		}catch{//si he encontrado alguna excepción, por ejemplo que no existe el índice actualPlayerBlockID+1, etc. Saldrá un debug
			Debug.Log("arregla el catch, ID: " + actualPlayerBlockID + 1 + "dir: " + dir);//debug
			}
		}	
	}
	
	public void RemoveAllLevelBlocks(){
		
		GameObject go = GameObject.Find("LevelManager"); //encuentro el levelmanager
		
		foreach (Transform child in go.transform){ //destruyo todos los hijos de levelmanager
			Destroy(child.gameObject);
			allGeneratedLevelBlocks.Clear(); //limpio las listas
			currentLevelBlocks.Clear();
		}
		
	}
	
	public void GenerateInitialBlocks(){
			AddLevelBlock("r", 0, false); //solo se añade un bloque al iniciar el juego
	}
}

EnterZone.cs

public class EnterZone : MonoBehaviour
{
	public bool isEnterZoneOfFirstLevelBlock = false; //para saber si es el primer bloque
	public bool isOther = true; //para saber si es otro bloque
	public int EnterZoneOfFirstLevelBlockNumber = 0; //numero para que no bugee y siga generando en el primer bloque
	
    void OnTriggerEnter2D(Collider2D collider){
		if(collider.tag == "Player"){
			if(collider.gameObject.GetComponent<Rigidbody2D>().velocity.x < 0){ //si la velocidad en x del rigidbody del player es menor a 0
				if(this.transform.parent.GetComponent<LevelBlock>().blockID != 0){ //y el id del bloque es diferente de 0
					LevelManager.sharedInstance.AddLevelBlock("l",  this.transform.parent.GetComponent<LevelBlock>().blockID, true); 
				}
			}else if(collider.gameObject.GetComponent<Rigidbody2D>().velocity.x > 0){ //si la velocidad en x del rigidbody del player es mayor a 0
				if(isEnterZoneOfFirstLevelBlock){ //si es el primer nivel
					if(EnterZoneOfFirstLevelBlockNumber < 1){ //si la variable de debug es menor a 1 se ejecuta lo siguiente
						LevelManager.sharedInstance.AddLevelBlock("r", this.transform.parent.GetComponent<LevelBlock>().blockID, true);
						EnterZoneOfFirstLevelBlockNumber++; //para evitar que siga ejecutandose
					}
				}else if(isOther){ //si es otro bloque, ejecutar lo siguiente
					LevelManager.sharedInstance.AddLevelBlock("r", this.transform.parent.GetComponent<LevelBlock>().blockID, true);
				}
				
			}
		}
	}
	
}

Yone Moreno Jiménez

student•

Para lograr que el LevelBlock anterior y el actual sean distintos se puede, en LevelManager poner dos variables, una para el índice aleatoria anterior y otra para el actual:

    int previousLevelBlockIdx, randomIdx;

Al principio de AddLevelBlock se le dice que cambie el aleatorio actual en caso de que se haya repetido:

        while(randomIdx == previousLevelBlockIdx)
        {
            randomIdx = Random.Range(1, allTheLevelBlocks.Count);
        }

Al final de AddLevelBlock se actualiza el anterior con el actual

        previousLevelBlockIdx = randomIdx;

Alberto Antonio Torres Carreño

student•

yo como estamos ocupando la main camera ocupe este codigo

Camera.main.GetComponent<CameraFollow>().ResetCameraPosition();

Luis Alejandro Rueda Solano

student•

Hola a todos. Quisiera por favor me dieran algunas ideas de como solucionar este inconveniente. El personaje en algunos puntos se queda paralizado y creo que es por los collider. Gracias! Adjunto imágenes del problema:

https://ibb.co/YdZvNKZ https://ibb.co/bzzvpKb

Juan Sebastian Avila

student•

Hola. De momento se me ocurre que puedes hacer un poco más pequeño el Collider para darle un poco mas de margen al personaje. Aun así, creo que en algunos casos se seguirá atascando. Esto ocurre por la forma curva del capsule collider.

En una clase el profesor deja el capsule collider como Trigger y coloca otro box collider muy pequeño en los pies del personaje que se encarga de que el personaje colisione con el suelo. Podrías implementarlo de esta misma forma y así reducir al máximo estos atascos con las plataformas.

Saludos.

Cristhian Franco

student•

Que buena seccion fue esta, de verdad muy util

Ericson Luis Quispe Abad

student•

Tengo un pequeño problema y es que cada vez que le doy al enter toda la escena tiritea, ademas cuando muero y le doy al enter no me reposiciona ni el personaje ni la cámara a la posicion inicial, la camara continua desde donde muere el personaje :(

Ricardo Rito Anguiano

student•

Hola compañero, asegurate de que estas tomando las referencias de la camara y del personaje de manera correcta, ademas de que estas llamando las funciones respectivas al reinicio en el momento de que el personaje muere. Podrias compartirme tu codigo y te ayudo con gusto :D

Puedes agregar codigo dando click aqui

Y pegandolo entre las comillas invertidas que te aparecen(````)

Ricardo Rito Anguiano

student•

Y recuerda posicionar a tu personaje en la escena en el mismo punto en el que programaste que regrese tu personaje al morir

Osmar Frausto

student•

Yo quize hacerlo por codigo pues le puse un efecto de barrido para que la camara mirara en la direccion del personaje y quedaria genial y utilice que la posicion del backgraound sea todo el tiempo la misma que el perosnaje, el punto es que al moverse la imagen tiembla como si batallara para seguir al personaje, alguien sabe porque?

Jesús Marcano

student•

Mi cámara sigue haciendo un barrido al resetear la posición del personaje a pesar de ejecutarse el código de RestarPosition, ¿A alguien más le pasa?

Tatiana Jaramillo

student•

No sé como enviar el background al fondo, me esta quedando en frente y esconde al personaje y a las plataformas

José Alfredo Colmenares

student•

Desde un principio creé un Singleton para la camara, así que lo llamé con esta línea:

CameraFollow.sharedInstance.ResetCameraPosition();

Tomas Leonardo Amaya Ríos

student•

La camara tuvo un desface al seguir al personaje en el momento de subir el background como hijo. [](

Ruben Dario Acosta Valle

student•

Excelente clase.