Comunidad de diseño web y desarrollo en internet online

Juego de Plataformas AS3, Parte 1

Citar            
MensajeEscrito el 12 Jul 2013 05:04 am
Hola amigos, de verdad es demasiado tarde para comenzar un Juego de plataformas en AS3, porque a estas alturas seguro existen muchos, pero muchos Tutoriales, sin embargo, no he visto uno en español, (si hay, pero no son muy visibles en la web), entonces me arriesgaré dando mi aportación, espero la disfruten así como yo lo hice cuando lo desarrollé.

Entonces sin mas distracciones, comencemos con nuestro Juego de Plataformas en AS3:

    Abrimos lo que es un nuevo plano de AS3 en nuestro programa de Flash de Adobe. Ahora vamos a crear un suelo y nuestro jugador. No deben de ser cosas perfectamente hechas, por ejemplo, yo hice un suelo muy simple y un jugador sin animación porque de momento no vamos a darle acciones de animación.

    A ambos símbolos los convertimos en Símbolo, ambos "MovieClip", pero antes de cerrar la ventana, abrimos "configuración avanzada" y seleccionamos la casilla "Exportar para AS", se desbloqueará la casilla "base", ahí nombramos nuestros símbolos para exportarlos y usarlos en la exportación; El jugador lo llamaré "jugador" y el suelo "nivel".

    Aceptamos, nos dirá que creará script para poder usarlos, le damos "Aceptar", eliminamos los símbolos de la escena, ya los pondremos en el escenario con código... Ahora nos pasamos al primer fotograma, abrimos sus acciones y como dice la venta, viene la acción!!!

    Muy bien, primero declaramos las variables numéricas (que serán los datos que moverán nuestro jugador) y ponemos al suelo y el jugador al escenario.

Código ActionScript :

// Creo las variables de Desplazamiento
// Serán Number porque tendrán decimales
var grav:Number;
var fric:Number;
var acel:Number;
// Declaro mis Símbolos, Jugador y Suelo
// Habrá que notar que sus nombres son "miJug" & "miSuelo"
// No los que habías puesto en "Base"
var miJug:jug = new jug();
var miSuelo:nivel = new nivel();
// Construímos nuestras variables
grav = 0.5;
acel = 0.5;
fric = 0.75;
// Importo a "miJug" & "miSuelo"
// También le doy sus posiciones en la escena
this.addChild(miSuelo);
miSuelo.x = 275;
miSuelo.y = 360;
this.addChild(miJug);
miJug.x = stage.stageWidth / 2;
miJug.y = 50;

    Si exportamos, solo aparecerán en la escena, no harán nada porque de momento solo los declaramos, pero no hay acción, así que vamos a darles vida... (mua jajajaja).

    Volvemos a la ventana de acciones y escribimos lo siguiente debajo de todo:

Código ActionScript :

// Verás que al jugador le puse "MovieClip()", pero realmente solo ayuda a que
// aparezca la lista de opción de escritura, así que es tu opción escribirla o no
// Un evento "EnterFrame"
MovieClip(miJug).addEventListener(Event.ENTER_FRAME, elJug);
// Un evento de Teclado, uno para "tecla abajo" y otro para "tecla arriba" (soltar / presionar) 
stage.addEventListener(KeyboardEvent.KEY_DOWN, misAcciones);
stage.addEventListener(KeyboardEvent.KEY_UP, sinAcciones);

    Como vez, si tienes Flash CS5 o CS6, el programa habrá importado las clases en las primeras líneas del código, obviamente es para que estos eventos estén presentes desde el primer momento. Si no tienes estas versiones deberemos escribirlas en las primeras líneas.

Código ActionScript :

import flash.events.Event;
import flash.events.KeyboardEvent;

    Ahora si tenemos acciones en la escena, pero ahora habrá que escribirlas :P

    Primero en las variables anexamos las velocidades del jugador:

Código ActionScript :

// Velocidades
var xvelJug:Number;
var yvelJug:Number;
// A diferencia a "Number", "int" solo son números enteros
var xmaxvelJug:int;
var ymaxvelJug:int;
// Les damos un valor
xvelJug = 0;
yvelJug = 0;
// Estas var nunca van a cambiar
xmaxvelJug = 5;
ymaxvelJug = 10;

    Ahora, hacemos nuestra función "EnterFrame" para nuestro jugador.

Código ActionScript :

function elJug (evt:Event):void
{
   // Gravedad
   if (yvelJug < ymaxvelJug)
   {
      yvelJug += grav;
   }
   else
   {
      yvelJug = ymaxvelJug;
   }
   // Velocidades
   miJug.y += yvelJug;
   // Colisiones
   // Si se dan cuenta, aqui volví a utilizar "MovieClip()"
   // No es obligatorio, pero podría ayudar para ubicar el "hitTestPoint"
   while (MovieClip(miSuelo).hitTestPoint(miJug.x, miJug.y + 25, true))
   {
      miJug.y -= grav;
   }
   // Porqué "hitTestPint", porque ahora se divide el contacto "Bruto", del "Inteligente"
}

    El jugador solo caerá y colisionará en la escena con el Suelo, ahora habrá que darle las acciones de desplazamiento para que veamos acción, porque verlo caer no es emocionante xD

    Construimos las funciones del teclado para poder desplazarlo, así mismo unas variables "Boolean", para también accionarlas, así que las variables junto a las demás, y las funciones del teclado debajo del "EnterFrame".

Código ActionScript :

// Declaramos las acciones de Desplazamiento
var derJug:Boolean;
var izqJug:Boolean;
var arrJug:Boolean;
// Les damos su valor
derJug = false;
izqJug = false;
arrJug = false;
// Función de "KEY_DOWN"
function misAcciones (evt:KeyboardEvent):void
{
   if (evt.keyCode == 37)
   {
      izqJug = true;
   }
   if (evt.keyCode == 38)
   {
      arrJug = true;
   }
   if (evt.keyCode == 39)
   {
      derJug = true;
   }
}
// Función de "KEY_UP"
function sinAcciones (evt:KeyboardEvent):void
{
   if (evt.keyCode == 37)
   {
      izqJug = false;
   }
   if (evt.keyCode == 38)
   {
      arrJug = false;
   }
   if (evt.keyCode == 39)
   {
      derJug = false;
   }
}

Si exportamos, el jugador no hará nada, pero eso es porque no las hemos implicado en un evento, estarán presentes y se efectuarán, pero no las veremos, porque la información esta presente virtualmente.

Así que las aplicamos al jugador, dentro de su función:

Código ActionScript :

function elJug (evt:Event):void
{
   // Acciones
   if (izqJug)
   {
      xvelJug -= xmaxvelJug * acel;
   }
   else if (derJug)
   {
      xvelJug += xmaxvelJug * acel;
   }
   // Gravedad
   if (yvelJug < ymaxvelJug)
   {
      yvelJug += grav;
   }
   else
   {
      yvelJug = ymaxvelJug;
   }
   // Friccionar
   xvelJug *= fric;
   // Velocidades
   miJug.y += yvelJug;
   miJug.x += xvelJug;
   // Colisiones
   while (MovieClip(miSuelo).hitTestPoint(miJug.x, miJug.y + 25, true))
   {
      miJug.y -= grav;
   }
   while (MovieClip(miSuelo).hitTestPoint(miJug.x + 25, miJug.y, true))
   {
      miJug.x -= grav;
   }
   while (MovieClip(miSuelo).hitTestPoint(miJug.x - 25, miJug.y, true))
   {
      miJug.x += grav;
   }
}

    Así debería quedar nuestra función, si exportamos, encontraremos que se mueve, pero no salta, aún estando "arrJug", solo esta presente, pero no le hace ni cosquillas al Jugador, así que habrá que añadirlo, pero habrá que crear una variable "Boolean", para que no salte siempre, solo cuando toque el suelo.

    En variables escribimos la nueva variable, y las acciones de salto en el "EnterFrame".

Código ActionScript :

// Variable Declarada
var jugSuelo:Boolean;
// Valor
jugSuelo = false;
// EnterFrame
function elJug (evt:Event):void
{
   // Así quedaría esta función
   // Acciones
   if (arrJug && jugSuelo)
   {
      yvelJug -= ymaxvelJug * acel;
   }
   if (izqJug)
   {
      xvelJug -= xmaxvelJug * acel;
   }
   else if (derJug)
   {
      xvelJug += xmaxvelJug * acel;
   }
   // Gravedad
   if (yvelJug < ymaxvelJug)
   {
      yvelJug += grav;
   }
   else
   {
      yvelJug = ymaxvelJug;
   }
   // En suelo
   if (MovieClip(miSuelo).hitTestPoint(miJug.x, miJug.y + 26, true))
   {
      jugSuelo = true;
   }
   else
   {
      jugSuelo = false;
   }
   // Friccionar
   xvelJug *= fric;
   // Velocidades
   miJug.y += yvelJug;
   miJug.x += xvelJug;
   // Colisiones
   while (MovieClip(miSuelo).hitTestPoint(miJug.x, miJug.y + 25, true))
   {
      miJug.y -= grav;
   }
   while (MovieClip(miSuelo).hitTestPoint(miJug.x + 25, miJug.y, true))
   {
      miJug.x -= grav;
   }
   while (MovieClip(miSuelo).hitTestPoint(miJug.x - 25, miJug.y, true))
   {
      miJug.x += grav;
   }
}

Exportamos y debería quedar algo parecido a esto:

Espero haya sido de su agrado el Tutorial. Esto es meramente para Novatos, pero si esto tiene buena respuesta, subiré la siguiente parte.

Gracias, no olviden comentar y visitar mi canal de YouTube!!!

Por peon007

40 de clabLevel



Genero:Masculino  

Programador & Dibujante

chrome
Citar            
MensajeEscrito el 12 Jul 2013 07:10 am
Muy bueno Andres! espero la siguiente parte o un video :D!

Por w3ro0o

0 de clabLevel



 

chrome
Citar            
MensajeEscrito el 12 Jul 2013 10:18 pm
Que bueno aunque es algo complicado a comparación con flash pero de igual forma muy bueno :D

Por Jairolaya12x

1 de clabLevel



 

chrome
Citar            
MensajeEscrito el 12 Jul 2013 10:22 pm
Perdón flash Cs3 upsss

Por Jairolaya12x

1 de clabLevel



 

chrome

 

Cristalab BabyBlue v4 + V4 © 2011 Cristalab
Powered by ClabEngines v4, HTML5, love and ponies.