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.29 Pendientes.

Llegó el momento de ver como implementar pendientes o cuestas en los juegos que estamos desarrollando y basados en Tiles. Fijesé en la película de ejemplo bajo estas líneas:



Mucha gente me ha preguntado "¿Como hago que mi heroe pueda caminar en Tiles con forma de pendiente?". Yo habitualmente respondo "¿Y porque quieres que tu heroe camine por pendientes?, ¿Acaso no eres feliz con estos Tiles rectangulares? ¿No puede tu heroe saltar a los Tiles mas altos?", y ellos contestan "No, necesito Tiles con pendientes".

Quizás usted no sepa que es un Tile de pendiente. En la imagen bajo estas líneas, el heroe (El pato Charlie) está caminando sobre un Tile de pendiente.

Screenshot del juego "CHARLIE II"
Screenshot del juego "CHARLIE II"

Las pendientes, permiten a nuestro heroe escalar mas alto o mas bajo, tan solo utilizando las teclas de desplazamiento a izquierda y derecha, sin necesidad de saltar. Así pues el tipo de pendientes del que hablamos, conecta 2 Tiles con diferentes alturas:

Cuando el heroe, en la imagen de la izquierda, desea continuar moviendose a la derecha, no le queda mas remedio que saltar para alcanzar el Tile mas elevado. Pero gracias a la cuesta, el heroe en la imagen de la derecha, no necesita saltar para alcanzar el Tile mas elevado. Seguramente, si su heroe dispone de capacidad de salto, también podra alcanzar el Tile mas alto saltando, aunque haya una cuesta. Sin embargo, los heroes son mas felices si no necesitan saltar para subir a un Tile mas elevado. Piense en todo lo que cargan :)


Problemas

Tan pronto como añadamos Tiles de pendientes, comenzaremos a experimentar varios problemas (no pensaría que no los ibamos a tener!). Lo primero, la forma de ubicar al heroe en un Tile con pendiente. Si lo recuerda, nuestro heroe, es básicamente un rectangulo. Todos los movimientos y colisiones están basados en las esquinas de su borde. No podemos utilizar la misma idea en la pendiente, ya que no podemos permitir que el heroe acabe como flotando en el aire, en cambio, deberemos centrar al heroe en el Tile con pendiente, y mover una pequeña parte del mismo dentro del terreno con pendiente:

Lo siguiente, las pendientes de los Tiles en nuestro juego, deben ir desde una esquina hasta la esquina opuesta, y debe tener cuidado de como coloca las pendientes. No puede crear cuestas con otro angulo o con formas raras y tampoco puede hacer combinaciones extrañas con los Tiles permitidos, al menos en este juego. Si desea que esto sea posible, tendrá que currarselo un poco mas.


Código !

Comenzaremos a partir del código del tutorial del capítulo 10, Saltando.

Declare nuevos prototipos para los Tiles:

game.Tile4= function () {};
game.Tile4.prototype.walkable=true;
game.Tile4.prototype.slope=1;
game.Tile4.prototype.frame=4;
game.Tile5= function () {};
game.Tile5.prototype.walkable=true;
game.Tile5.prototype.slope=-1;
game.Tile5.prototype.frame=5;

El Tile 4 tiene un pendiente hacia arriba (/) y el Tile 5 hacia abajo (\). Dibuje las pendientes en los fotogramas que haya elegido a partir de la propiedad frame (en este caso fotogramas 4 y 5).

Las nuevas funciones son como las buenas cosas de la vida. Son frescas, suenan bien, y hacen cosas que nunca hubiera imaginado :), Hagamos una mas, la función checkForSlopes:

function checkForSlopes (ob, diry, dirx) {
  if (game["t_"+(ob.ytile+1)+"_"+ob.xtile].slope and !ob.jump){
    ob.ytile += 1;
    ob.y += game.tileH;
  }
  if (game["t_"+ob.ytile+"_"+ob.xtile].slope and diry != -1){
    if (diry == 1){
      ob.y = (ob.ytile+1)*game.tileH-ob.height;
    }
    var xpos = ob.x-ob.xtile*game.tileW;
    ob.onSlope = game["t_"+ob.ytile+"_"+ob.xtile].slope;
    ob.jump = false;
    if(game["t_"+ob.ytile+"_"+ob.xtile].slope == 1){
      ob.addy = xpos;
      ob.clip._y = (ob.ytile+1)*game.tileH-ob.height-ob.addy;
    }else{
      ob.addy = game.tileW-xpos;
      ob.clip._y = (ob.ytile+1)*game.tileH-ob.height-ob.addy;
    }
  }else{
    if((ob.onSlope == 1 and dirx == 1) or (ob.onSlope == -1 and dirx == -1)){
      ob.ytile -= 1;
      ob.y -= game.tileH;
      ob.clip._y = ob.y;
    }
    ob.onSlope = false;
  }
}

Esta función se ha de llamar desde la función moveChar, pasandole las variables de movimiento dirx/diry. La primera instrucción comprueba si hay una pendiente en el Tile bajo el Tile que pisamos actualmente. Esto es para controlar la situación en la que el heroe permanece sobre un tile de pared (no pisable), pero al movernos a izquierda o derecha exista una pendiente hacia abajo. si se da esta situación, incrementamos ytile e y. Sin embargo no es necesario hacer esta comprobación si el heroe está saltando.

La siguiente instrucción if, comprueba la pendiente sobre la que actualmente está el heroe. La parte diry!=-1 ignora la comprobación si se ha presionado la tecla SPACE y el heroe salta.

Si estamos cayendo (diry==1), estableceremos la propiedad y como si el heroe hubiera aterrizado en el Tile inferior. Estableceremos la propiedad jump a falso y la propiedad onSlope igual al valor de slope del tile actual (1 o -1).

xpos es el valor de la distancia entre el borde izquierdo del Tile y el centro del nuestro heroe:

Si la pendiente es hacia arriba, entonces movemos al heroe hacia arriba el valor de xpos, si es hacia abajo, movemos el valor de tileW-xpos. Observe que si no utiliza Tiles cuadrados, deberá encontrar xpos como un porcentaje de tileW.

La última parte antes de la instruccion else, comprueba si estabamos sobre una pendiente, pero ya hemos alcanzado un Tile superior.

Ahora modificamos la función moveChar, Modifique la comprobación para ir a izquierda y derecha:

//left
if ((ob.downleft and ob.upleft) or ob.onSlope) {

//right
if ((ob.upright and ob.downright) or ob.onSlope) {

Aquí básicamente ignoramos todas las comprobaciones de colisión para los movimientos a izquierda y derecha mientras el heroe esté sobre una pendiente. Recuerde que mientras escalamos un pendiente, parte del heroe está dentro del terreno, así que aquí no valen las detecciones de colisiones que veniamos utilizando a partir de las esquinas del borde del heroe.

Después de ubicar el movieClip del heroe, haga la llamada a la función checkForSlopes:

ob.clip._x = ob.x;
ob.clip._y = ob.y;
checkForSlopes(ob, diry, dirx);

Cuando saltamos mientras estamos sobre la pendiente, tenemos que actualizar la coordenada y del heroe. Modifique la función detectKeys:

if (Key.isDown(Key.SPACE)) {
  if (!ob.jump){
    //if we were on slope, update
    if (ob.onSlope) {
      ob.y -=ob.addy;
      ob.ytile = Math.floor(ob.y/game.tileH);
    }
    ob.jump = true;
    ob.jumpspeed = ob.jumpstart;
  }
}else if (Key.isDown(Key.RIGHT)) {
  keyPressed=_root.moveChar(ob, 1, 0);
}else if (Key.isDown(Key.LEFT)) {
  keyPressed=_root.moveChar(ob, -1, 0);
}

Si el heroe tiene establecida la propiedad onSlope a cierto, primero actualizaremos su propiedad y y calcularemos el nuevo valor para ytile.

Puede descargar el fichero fla bajo la película de ejemplo y ver el desarrollo completo de este tutorial.

Casi para finalizar este curso de desarrollo de juegos basados en Tiles para Flash, veremos en el siguinete capítulo un nuevo tipo de Tiles: Tiles Hexagonales!

« Anterior
Indice
Siguiente »