¿Cansado de ordenar a mano los botones de un menú?
¿Estás harto de tener que escribir coordenada por coordenada para que las cosas queden en el centro y equidistantes entre sí?
¡¡Lukeitor te trae la solución!!
Saludos a todos, después de tanto he vuelto a Pilas.
En esta ocasión traté de emular algunos elementos que están presentes en otros motores de videojuegos: Los contenedores.
La idea es simple: Tu le dices los nombres de los actores que quieres ordenar y el conentendor los ordena en una columna (Se podría decir que este es un contenedor vertical)
Si quieres usarlo, solo hay que agregar un actor con cualquier imagen y ponerle el siguiente código:
/*
Ordena los elementos de manera vertical. Ideal para un menú de botones.
Al editar los márgenes, es posible cambiar el centro a partir del cual se acomodan los ementos.
POr ejemplo, si se deja como están, los elementos se ordenan como una fila centrada en el centro de la pantalla y dejando un margen de 100 px respecto
de los bordes arriba y abajo.
*/
//márgenes (se puede cambiar)
margen_derecho = 0;
margen_izquierdo = 0;
margen_superior = 100;
margen_inferior = 100;
actores_a_ordenar = ["jugar", "creditos", "puntaje", "barra_vida"];//Acá podés poner los nombres que quieras
elementos = [];//no tocar
iniciar() {
this.imagen = "imagenes:basicos/invisible";
this.elementos = [];
this.conectar(this.actores_a_ordenar);
this.ordenar();
/*
Si querés hacer que los elementos queden fijos, activa la siguiente linea de código.
Recuerda que, de hacer esto, hay que poner la cámara en la esquina superior izquierda del escenario para evitar bugs, es decir, la cámara
debe estar en la posición x=0, y=0
*/
//this.fijo = true;
}
conectar(nombres: string[]) {
this.elementos = nombres.map(nombre => this.pilas.obtener_actor_por_nombre(nombre));
}
ordenar() {
let borde_der = this.camara.borde_derecho - this.margen_derecho;
let borde_izq = this.camara.borde_izquierdo + this.margen_izquierdo;
let borde_inf = this.camara.borde_abajo + this.margen_inferior;
let borde_sup = this.camara.borde_arriba - this.margen_superior;
let centro_x = (borde_der + borde_izq) / 2;
let cantidad = this.elementos.length;
if (cantidad < 2) {
// Si hay 1 solo elemento, simplemente lo centramos
if (cantidad === 1) {
this.elementos[0].x = centro_x;
this.elementos[0].y = (borde_sup + borde_inf) / 2;
}
return;
}
const distancia = (borde_sup - borde_inf) / (cantidad - 1);
for (let i = 0; i < cantidad; i++) {
const elemento = this.elementos[i];
elemento.x = centro_x;
elemento.y = borde_sup - i * distancia; // desde arriba hacia abajo
}
}
Comparto un ejemplo, para apreciarlo mejor sugiero abrirlo en otra pestaña. Verán que, antes de inicar, los elementos están desordenados y luego se acomodan en una fila equidistante. No importa si ponemos solo uno o agregamos más elementos, se ordenan automáticamente.
Abrir este proyecto en el editor de pilas
Debo confesar que un código tan bonito y compacto no es enteramente mío, sino que me ayudo chatgpt. Cosas como map o bucles todavía me cuestan usarlos.