Programar un Gestor para juegos de rol – Gestión de escenarios por jugadores

Buenas roleros y programadores una vez más. En esta ocasión os traigo una pequeña modificación del código que expuse en la última entrega, ya que con la gestión de escenarios se hacía necesaria una opción para poder acceder a todos los jugadores de la partida sin que tuvieran que estar en la pantalla de forma visual.

Me explico, en toda partida de rol, cada personaje puede estar en una ubicación diferente, de ahí que estuvieramos gestionando un escenario para cada jugador, o dicho de otra manera, cada jugador puede estar donde quiera sin tener que compartir la misma pantalla o escenario de otro compañero de aventura.

Llegado a este punto, actualmente cada jugador estaba siendo mostrado junto con todos sus compañeros en la misma ubicación, ¿pero qué pasa si este sale del castillo para ir al bosque a buscar al druida? Pues que el resto de compañeros querrán quedarse bebiendo el delicioso vino y pasarán del curandero… así que era necesario poder cambiar de escenario a cualquier personaje y que los demás pudieran hacer exactamente lo mismo.

Así que después de explicar exactamente la función a desarrollar, realicé un par de cambios, la primera y más importante es que saqué la parte de carga de opciones del personaje seleccionado a una función independiente, de esta manera, cuando se hiciera clic sobre el personaje en el escenario se pudiera llamar a la función:

[codesyntax lang=”javascript”]

function cargaMenuPersonaje(idPersonajeSeleccionado){
			//Carga todas las opciones del personaje al ser seleccionado
			cambiaHabilidades(idPersonajeSeleccionado);
			cambiaEscenario(idPersonajeSeleccionado);
			cambiaCaracteristicas(idPersonajeSeleccionado);

			var nombre = $("#idPersonaje"+idPersonajeSeleccionado).attr("nombre");
			var mover = '<button class="btn btn-primary" data-toggle="modal" data-target="#popupMover">Mover</button>';
			var caracteristicas = '<button class="btn btn-primary" data-toggle="modal" data-target="#popupCaracteristicas">Caracteristicas</button>';
			var habilidades = '<button class="btn btn-primary" data-toggle="modal" data-target="#popupHabilidades">Habilidades</button>';
			var escenario = '<button class="btn btn-primary" data-toggle="modal" data-target="#popupEscenario">Escenario</button>';
			var turno = '<button type="button" class="btn btn-primary" onClick="devolverTurno('+idPersonajeSeleccionado+');">Turno</button>';
			$("#menuSuperior").html('<h3>'+nombre+mover+turno+caracteristicas+habilidades+escenario+'</h3>');

		}

[/codesyntax]

Es casi el mismo código que teníamos en la versión anterior, solo que fuera del clic de la carga de los personajes. Esta función también ha cambiado, ahora ya no muestra los personajes por aventura, sino por cohesión en el escenario, en otras palabras, cuando se selecciona un personaje, cargo el escenario de este junto con los personajes que compartan el escenario, de esta manera solo podrá verse los que estén con el mismo personaje. Esta función recibe el id del personaje seleccionado que a su vez llama a otras dos funciones:

[codesyntax lang=”javascript”]

	function cargaPersonajesporEscenario(idPersonajeSeleccionado){
			//cargo el escenario actual del personaje al ser seleccionado
			cargaEscenarioPersonaje(idPersonajeSeleccionado);

			//cargo los personajes de la escena seleccionada
			cargaPersonajesPorEscena(idPersonajeSeleccionado);

			}

[/codesyntax]

Y ahora el código de cada función:

[codesyntax lang=”javascript”]

function cargaPersonajesPorEscena(idPersonaje){
 jQuery.post("funciones.php", {
 accion: 'cargaPersonajesporEscena',
 personaje: idPersonaje
 }, function(data, textStatus){
 var cargaPersonaje = JSON.parse(data);

 for (x=0; x < cargaPersonaje.length; x++)
 {
 jQuery('#tablero').append('<div idpersonaje='+cargaPersonaje[x]['idPersonaje']+' nombre="'+cargaPersonaje[x]['nombre']+'" id = "idPersonaje'+cargaPersonaje[x]['idPersonaje']+'"><img height = "40px" src="./imgs/'+cargaPersonaje[x]['img']+'"></div>');

 idPersonaje = "#idPersonaje"+cargaPersonaje[x]['idPersonaje'];
 $(idPersonaje).css("position", "absolute");
 $(idPersonaje).css("width", '40px');
 $(idPersonaje).css("height", '40px');
 $(idPersonaje).css("left", cargaPersonaje[x]['posX'] + 'px');
 $(idPersonaje).css("top", cargaPersonaje[x]['posY'] + 'px');
 $(idPersonaje).css("background-image", 'url(./imgs/'+cargaPersonaje[x]['img']+')');

 if (cargaPersonaje[x]['turno'] == 0){
 $(idPersonaje).append("X");
 }

 //al pulsar un jugador, carga sus parámetros en el menú superior
 $(idPersonaje).click(function() {
 cargaMenuPersonaje($(this).attr("idpersonaje"));
 });
 }
 });
 }

[/codesyntax]

Este código en realidad no tendrá mucha complicación si habéis seguido todos los capítulos, en resumen lo que hago es una llamada Ajax con JQuery y cargo en el tablero los personajes, posición e incluso un evento clic. Quizás es más interesante la consulta que se realiza en la lógica desde PHP atacando MySQL:

[codesyntax lang=”php”]

$personaje = $_POST['personaje'];

 //Devuelvo todos los personajes actuales
 $consulta = "SELECT idPersonaje, nombre, img, posX, posY, turno from personaje WHERE idEscenario = (select idEscenario from personaje where idPersonaje = ".$personaje.")";
 $registro = mysqli_query($conexion, $consulta);

 $personajes = array(); //creamos un array

 //guardamos en un array multidimensional todos los datos de la consulta
 $i=0;

 while($row = mysqli_fetch_array($registro))
 {
 $personajes[$i] = $row;
 $i++;
 }
 echo json_encode($personajes);
 break;

[/codesyntax]

Este código recibe el id del personaje y la consulta a MySQL lo que hace es una consulta anidada que va a traer todos los personajes que compartan el escenario que el id del personaje seleccionado. La otra función simplemente pide el escenario actual del personaje seleccionado.

Primero se pinta el escenario y a continuación se cargan los personajes. En la carga de personajes desde JS se puede ver como la función de pintando situa a cada personaje y además le crea el evento clic que a su vez llama la función de cargaMenuPersonaje comentada al principio del artículo.

Con esto dejo por ahora este nuevo artículo, el siguiente paso, será darle un repaso integral a la gestión de escenarios del director de juego, actualmente puede subir imágenes designando el tipo, pero no tiene una gestión de escenarios como tal. (Los que hay en la base de datos los creé a mano para poder avanzar este desarrollo)

La intención será poder generar escenarios con un fondo inicialmente y luego poder añadirle más objetos. También hay que darle un repaso a las funciones de los jugadores para ver si tanto el fondo de su escenario se actualiza de forma correcta con el resto de jugadores.

Una vez realizado esto, quedaría poder crear PNJs en una nueva tabla llamada “repositorioPNJ” que tendrán las mismas características y habilidades que un personaje “normal” pero que hasta que no pase a la tabla “personaje” no estarán en uso directo. Así un master podrá preparar la partida incluso al “vuelo” añadiendo un PNJ en cualquier momento de los que tenga creados, tantas veces como quiera, para no tener que crear 5 orcos, sino que con uno mismo, creará ese nuevo personaje en el escenario.

Vale, no me enrollo, menos hablar y más programar!

Por cierto… ¿Alguna idea de como programar el framework de escenarios?