Este tutorial es una traducción y adaptación al español por Julio Laguna, Autorizada por el autor , del tutorial de TONYPA Tile Based Games sujeta a una licencia Creative Commons.
Creative Commons License

Juegos basados en tiles para Flash.
por Julio Laguna (Traducción) - Originalmente escrito en Inglés por TONYPA

1 Juegos basados en "tiles" para Flash.

1.12 Escaleras.

Las escaleras son un elemento bastante común en muchisimos juegos de plataformas, que definien un tipo de movimiento muy característico. El heroe puede utilizar las escaleras para trepar hacia arriba y también para ir hacia abajo (como seguramente ya sabrá). Vamos a hacer que nuestro personaje pueda escalar cuando presionemos las teclas de flechas "UP" y "DOWN" y el heroe permanezca muy cerca de la escalera.
Observe la película de ejemplo que mostramos a continuación:



Así como en un principio pudiera parece que las escaleras son un elemento fácil de resolver, hay algunas cuestiones que debemos tener en cuenta. Lo primero, ¿Que tipo de escaleras son?.
Observe la figura siguiente:

En la imagen se observan 4 tipos diferentes de escaleras, cuyos Tiles están marcados como A,B,C y D.
En el Tile A la escalera está dentro de la pared, por el cual normalmente no se puede caminar. ¿Que es lo que puede hacer el heroe en el Tile A?. Puede trepar hacia arriba y hacia abajo, pero no debiera ser capaz de andar desde la izquierda o la derecha, o quedará atascado en la pared. Pregunte a cualquiera que haya quedado atascado en la pared, y verá como no es una sensación agradable.

La escalera del Tile B es pisable por si misma, además tiene escaleras en los Tiles por arriba y por abajo. El heroe puede trepar hacia arriba y hacia abajo, además de poder atravesar el Tile de izquierda a derecha, pero si lo hace mientras está trepando, caerá tras dejar la escalera.

En el Tile C, no existe escalera por debajo, así que el heroe no puede trepar hacia abajo, solo se puede trepar hacia arriba, o caminar desde izquierda y derecha.

El Tipo de escalera del Tile D no está disponible en todos los juegos. Algunos piensan que este es un mal modo de diseño de niveles. La escalera no conduce a ningún sitio, terminá en el aire. ¿Podría el heroe trepar y permanecer sobre la escalera al finalizar?, ¿Podría el heroe caminar entonces al Tile sólido a la derecha?

Estos son simplemente un conjunto de ejemplos, bastante comunes, eso si, de entre la gran cantidad que podemos tener con escaleras, pero espero que con ellos pueda entender la importancia de disponer de una correcta y estricta definición de los mismos, antes de proceder a escribir y escribir código. Como no es habitual que los juegos sean iguales, algunas cosas y situaciones encajan perfectamente en algunos juegos y otras necesitan de una importante inversión de tiempo acoplarlas.


Las reglas

Escribamos aquí las reglas necesarias para el movimeinto de nuestro heroe con escaleras.
1. El heroe puede trepar por las escaleras utilizando las teclas de flechas "UP" y "DOWN".
2. El heroe puede trepar hacia arriba si existe una escalera localizada en los puntos centrales superiores e inferiores del caracter.
3. El heroe puede trepar hacia abajo si el Tile donde finaliza el punto central inferior del caracter contiene una escalera.
4. El heroe se puede mover a izquierda y derecha desde la escalera si ninguna de las esquinas del borde que lo define acaba en una pared.
5. El heroe NO puede saltar desde una escalera.

Creo que con esto será suficiente, no creo que necesitemos mas.


Una escalera ¡por favor!

Utilizaremos un moviClip diferente con el gráfico de una escalera, que añadiremos a los Tiles de que disponemos, cuando estos incluyan una escalera. De ese modo no tendremos que dibujar diferente gráficos para cada Tile con escaleras y con fondos diferentes. Asegurese que el movieClip con la escalera se esté "Exportando para ActionScript" con el nombre de identificador "ladder", en la librería de objetos de Flash.

Dibuje los gráficos de la escalera en el movieClip "ladder", con la misma altura que los Tiles utilizados y ubiquelo en el centro horizontalmente.

Como con cualquier otro Tile, debemos declarar nuevos tipos de Tile para los Tiles con escaleras:

game.Tile4= function () {};
game.Tile4.prototype.walkable=false; 
game.Tile4.prototype.frame=2;
game.Tile4.prototype.ladder=true;
game.Tile4.prototype.item="ladder";
game.Tile5= function () {};
game.Tile5.prototype.walkable=true; 
game.Tile5.prototype.frame=1;
game.Tile5.prototype.ladder=true;
game.Tile5.prototype.item="ladder";

Estos 2 tipos de escaleras se muestran en diferentes números de fotograma, pero ambos tienen la propiedad "ladder" con valor "true" (lo utilizaremos para saber si el heroe está cerca de la escalera) y ambos disponen de la propiedad "item" igual a "ladder" (que utilizaremos para añadir el gráfico de escalera al Tile).

Añada el gráfico de escalera al Tile (Attach), en la función buildMap, tras enviar el Tile al fotograma correcto:

game.clip[name].gotoAndStop(game[name].frame);
if (game[name].item != undefined) {
  game.clip[name].attachMovie(game[name].item, "item", 1);  
}

Este código, comprueba si la propiedad "item" del Tile actual, no tiene un valor "vacio". Si "item" tiene valor, entonces adjuntamos (attach), el clip con el identificador de nombre de la propiedad "item" al Tile actual, con el nombre de instancia "item". Así del mismo modo, podemos adjuntar otros items al Tile. De todos modos intente no adjuntar demasiados items al Tile.

Para no resscribir demasiado el mismo código, vamos a modificar la función moveChar y crear una nueva función separada llamada updateChar. La función moveChar finalizará así:

updateChar (ob, dirx, diry);
return (true);

y la función updateChar, quedará así:

function updateChar (ob, dirx, diry) {
  ob.clip._x = ob.x;
  ob.clip._y = ob.y;
  ob.clip.gotoAndStop(dirx+diry*2+3);
  ob.xtile = Math.floor(ob.clip._x/game.tileW);
  ob.ytile = Math.floor(ob.clip._y/game.tileH);
  if (game["t_"+ob.ytile+"_"+ob.xtile].door and ob==_root.char) {
    changeMap (ob);
  }
}

En la función fall, hay que añadir:

ob.climb = false;

Modifique la función, detectKeys para las flechas:

if (Key.isDown(Key.RIGHT)) {
  getMyCorners (ob.x-ob.speed, ob.y, ob);
  if (!ob.climb or ob.downleft and ob.upleft and ob.upright and ob.downright) {
    keyPressed=_root.moveChar(ob, 1, 0);
  }
} else if (Key.isDown(Key.LEFT)) {
  getMyCorners (ob.x-ob.speed, ob.y, ob);
  if (!ob.climb or ob.downleft and ob.upleft and ob.upright and ob.downright) {
    keyPressed=_root.moveChar(ob, -1, 0);
  }
} else if (Key.isDown(Key.UP)) {
  if (!ob.jump and checkUpLadder (ob)) {
    keyPressed=_root.climb(ob, -1);
  }
} else if (Key.isDown(Key.DOWN)) {
  if (!ob.jump and checkDownLadder (ob)) {
    keyPressed=_root.climb(ob, 1);
  }
}

Tras detectar una tecla "LEFT" o "RIGHT", comprobamos si el heroe no está escalando (!ob.climb), o en caso de que si lo esté, comprobamos si ninguna de las esquinas que definen su borde, estará en la pared.

Para las teclas "UP" y "DOWN", primero comprobamos si el heroe no está saltando (!ob.jump) y las condiciones para escalar se saben gracias a dos nuevas funciones: checkUpLadder y checkDownLadder. Si todo está ok!, haremos una llamada a la función "climb" para mover a nuestro heroe.


Funciones para escalar.

Tenemos que hacer 3 nuevas funciones para escalar. Una para comprobar si todo está ok para proceder a escalar, otra para comprobar si se puede escalar hacia abajo, y una última para mover a nuestro heroe.

function checkUpLadder (ob) {
  var downY = Math.floor((ob.y+ob.height-1)/game.tileh)
  var upY = Math.floor(((ob.y-ob.height)-ob.speed)/game.tilew)
  var upLadder = game["t_"+upy+"_"+ob.xtile].ladder
  var downLadder = game["t_"+downy+"_"+ob.xtile].ladder
  var upBlock = game["t_"+upy+"_"+ob.xtile].walkable
  if(upLadder==true or upBlock ==true){
    if(upLadder or downLadder){
      return(true)
    }
  }else{
    ob.y = ob.ytile*game.tileh+ob.height;
    updateChar(ob, 0, -1)
    return(false)
  }
}

Este código, primero calcula los puntos centrales superior e inferior del heroe, Si el Tile apuntado por el punto central superior, dispone de una escalera o es pisable, entonces hacemos otra comprobación mas. para asegurarnos que al menos hay una escalera ubicada en el punto central superior o en el inferior.

function checkDownLadder (ob) {
  var downY = Math.floor((ob.speed+ob.y+ob.height)/game.tileH);
  var downLadder = game["t_"+downY+"_"+ob.xtile].ladder;
  if (downLadder) {
    return (true);
  } else {
    fall (ob);
  }
}

Para comprobar si se puede escalar hacia abajo, necesitamos la propiedad "ladder" en el Tile bajo los pies de nuestro heroe. Pero al contrario que al trepar hacia arriba, debemos buscar el Tile en el que se encontrará el heroe si este se moviera hacia abajo (ob.speed+ob.y+ob.height).

function climb (ob, diry) {
  ob.climb=true;
  ob.jump=false;
  ob.y += ob.speed*diry;
  ob.x = (ob.xtile *game.tileW)+game.tileW/2;
  updateChar (ob, 0, diry);
  return (true);
}

En la función climb, primero establecemos los controles "climb" a "true" y "jump" a "false". Después calculamos la nueva posición y del heroe. Despues, debemos posicionar al heroe centrado horizontalmente en la escalera:

ob.x = (ob.xtile *game.tileW)+game.tileW/2;
}

El heroe puede trepar tanto tiempo como su centro se encuentre en el Tile con una escalera, porque parecerá anormal que pudiera trepar por el lado izquierdo o derecho de la escalera.

Lo último es actualizar la posición actual del caracter utilizando la misma función updateChar.

Todo lo visto en este capítulo puede consultarlo descargando el fichero fla bajo la película de ejemplo. Espero que le haya gustado.

Lo siguiente: ¡Enemigos!

« Anterior
Indice
Siguiente »