Esta entrada pertenece a ActionScript 3 - Guía para Principiantes.
La idea es que esta guía no acabe aquí, pero obligaciones de diferente índole me impiden dedicarle más tiempo, al menos de momento. De todos modos, si has logrado llegar hasta quí paso a paso, habrás aprendido lo suficiente como para seguir explorando Flash, ActionScript 3 y todas sus posibilidades.
Aquí están los archivos fuente del Pong 1.1
Cualquier comentario, error o sugerencia será bien recibido.
| Anterior | Índice |
Esta entrada pertenece a ActionScript 3 - Guía para Principiantes.
Para concluir con este capítulo, vamos a crear un escenario algo más elaborado: un campo de fútbol.
Dentro de la carpeta escenario vamos a crear una nueva clase que llamaremos CampoFutbol cuyo código será:
package mi.pong.escenario
{
import com.senocular.utils.KeyObject;
import flash.display.GradientType;
import flash.display.Sprite;
import flash.display.Stage;
/**
* ...
* @author ASL
*/
public class CampoFutbol extends Escenario
{
private var verdeG1_1:uint = 0x01B101;
private var verdeG1_2:uint = 0x02D202;
private var verdeG2_1:uint = 0x25FC25;
private var verdeG2_2:uint = 0x00FB00;
public function CampoFutbol(stage:Stage, keyObject:KeyObject)
{
super(stage, keyObject);
}
public override function creaEscenario()
{
var nZonas:uint = 8;
var anchoZona:Number = stageRef.stageWidth / nZonas;
for (var i:uint = 0; i < nZonas; i++) {
var zona:Sprite = creaZona(i, anchoZona);
zona.y = 0;
zona.x = (stageRef.stageWidth / nZonas) * i;
addChild(zona);
}
dibujaLineas();
}
private function creaZona(i:uint, anchoZona:Number):Sprite
{
var zona:Sprite = new Sprite();
if ( i % 2 != 0)
zona.graphics.beginGradientFill(GradientType.LINEAR, [verdeG1_1, verdeG1_2], [1, 1], [0, 255]);
else
zona.graphics.beginGradientFill(GradientType.LINEAR, [verdeG2_1, verdeG2_2], [1, 1], [0, 255]);
zona.graphics.drawRect(0, 0, stageRef.stageWidth / 8, stageRef.stageHeight);
zona.graphics.endFill();
return zona;
}
private function dibujaLineas():void
{
var margen:Number = 15;
var anchoLinea:Number = 5;
var linea:Sprite = new Sprite();
linea.graphics.beginFill(0xFFFFFF);
// Línea del centro
linea.graphics.drawRect(stageRef.stageWidth / 2 - anchoLinea / 2, margen, anchoLinea, stageRef.stageHeight - 2 * margen);
// Líneas de fondo
// Izquierda
linea.graphics.drawRect(margen, margen, anchoLinea, stageRef.stageHeight - 2 * margen);
// Derecha
linea.graphics.drawRect(stageRef.stageWidth - margen - anchoLinea, margen, anchoLinea, stageRef.stageHeight - 2 * margen);
// Líneas de banda
// Superior
linea.graphics.drawRect(margen, margen - anchoLinea, stageRef.stageWidth - margen * 2, anchoLinea);
// Inferior
linea.graphics.drawRect(margen, stageRef.stageHeight - margen, stageRef.stageWidth - margen * 2, anchoLinea);
linea.graphics.endFill();
addChild(linea);
// Círculo central
var centro:Sprite = new Sprite();
var radioCentro:Number = stageRef.stageHeight / 3;
centro.graphics.beginFill(0xFFFFFF);
centro.graphics.drawEllipse(stageRef.stageWidth / 2 - radioCentro / 2, stageRef.stageHeight / 2 - radioCentro / 2, radioCentro, radioCentro);
centro.graphics.drawEllipse(stageRef.stageWidth / 2 - radioCentro / 2 + anchoLinea, stageRef.stageHeight / 2 - radioCentro / 2 + anchoLinea, radioCentro - anchoLinea*2, radioCentro - anchoLinea*2);
centro.graphics.endFill();
addChild(centro);
}
}
}
Dos cosas importantes en este código:
- La clase CampoFutbol es heredera de la clase Escenario, con lo cual, hereda todas sus funciones. Sin embargo, nosotros queremos redefinir una de las funciones: creaEscenario, porque queremos que la creación de este escenario sea distinta a la del padre. Para realizar este cometido utilizamos la palabra clave override, que "sobreescribe" al método del padre. Es decir, será este método el que se utiliza y no el heredado.
- Todas las funciones utilizadas en el atributo graphics corresponden a métodos de dibujado que proporciona Flash. Podéis encontrar más información aquí.
Ahora, para verlo en acción, ve a la clase Main y cambia la clase al escenario:
var escenario:Escenario = new CampoFutbol(stage, key);
Puedes encontrar los archivos de este proyecto terminado en el siguiente capítulo.
| Anterior | Índice | Siguiente |
Esta entrada pertenece a ActionScript 3 - Guía para Principiantes.
Para la creación de nuestro marcador, vamos a utilizar únicamente un texto dinámico de Flash, que variará según varíe el número de goles de cada jugador.
Así que, creamos un nuevo símbolo en Flash: menú Insertar -> Nuevo símbolo... De nombre Marcador y de tipo Clip de película. De momento, como aún no la hemos creado, no asociamos el símbolo con ninguna clase ActionScript.
Ahora, escogemos la Herramienta de Texto (T), clickamos en el centro de nuestro símbolo recién creado y escribimos un 0.
En la ventana propiedades, hemos de asegurarnos de que es un Texto dinámico (lo cual nos permitirá variarlo mientras se esté ejecutando Flash. Como nombre de instancia (que nos servirá para acceder al texto desde código ActionScript) escribimos puntuacion_text.
Puedes escoger el formato que quieras para el texto. Yo he elegido como Familia: Tahoma; Estilo: Regular; Tamaño: 30.0 pt y Color: Blanco.
Y ya tenemos nuestro marcador.
En FlashDevelop, creamos una clase llamada Marcador dentro de la carpeta objeto, pero fuera de colisionable y colsionador. El código ActionScript para Marcador será el siguiente:
package mi.pong.objeto
{
import flash.display.MovieClip;
import flash.display.Stage;
/**
* ...
* @author ASL
*/
public class Marcador extends MovieClip
{
protected var id:uint; // Identificador para el marcador, normalmente el número de jugador
protected var puntuacion:int = 0;
/**
* Constructor del Marcador.
* @param stage Stage de referencia.
* @param id_jugador Jugador al que representa.
*/
public function Marcador(stage:Stage, id_jugador:uint)
{
id = id_jugador;
iniciaPosicion(stage);
}
/**
* Establece una nueva puntuación en el marcador.
* @param nueva_puntuacion Nueva puntuación.
*/
public function setPuntuacion(nueva_puntuacion:int)
{
puntuacion = nueva_puntuacion;
puntuacion_text.text = puntuacion.toString();
}
/**
* Suma la puntuación a la ya acumulada.
* @param acum_puntuacion Puntuación a sumar.
*/
public function sumaPuntuacion(acum_puntuacion:int)
{
puntuacion += acum_puntuacion;
puntuacion_text.text = puntuacion.toString();
}
/**
* Inicia la posición del marcador, en relación a un Stage de
* referencia.
* @param stage Stage de referencia.
*/
public function iniciaPosicion(stage:Stage)
{
puntuacion_text.text = puntuacion.toString();
var separacion:uint = 15;
x = (stage.stageWidth / 2) + ((this.width + separacion) * id) - (this.width + separacion) / 2;
y = width / 2 + separacion;
}
}
}
- Para cambiar el texto del marcador que hemos creado en Flash, utilizamos puntuacion_text.text. Recuerda que puntuacion_text es el nombre que dimos a la instancia de texto dinámico en el marcador.
Lo primero, en la clase Escenario creamos un Vector que albergue los maracadores:
protected var marcadores:Vector.<Marcador>;
Y modificamos el constructor:
public function Escenario(stage:Stage, keyObject:KeyObject)
{
stageRef = stage;
key = keyObject;
colisionables = new Vector.<IColisionable>;
colisionadores = new Vector.<IColisionador>;
marcadores = new Vector.<Marcador>;
creaPongs(2);
creaMarcadores(2);
creaEscenario();
creaBolas(1);
addEventListener(Event.ENTER_FRAME, bucle, false, 0, true);
}
dónde, aparte de crear el Vector de marcadores, además llamamos a la nueva función creaMarcadores cuya definición es la siguiente:
/**
* Añade un número de marcadores al escenario.
* @param num_marc Número de marcadores.
*/
public function creaMarcadores(num_marc:uint)
{
for (var i:uint = 0; i < num_marc; i++)
{
var marcador:Marcador = new Marcador(stageRef, i);
stageRef.addChild(marcador);
marcadores.push(marcador);
}
}
Y ahora, ¿recuerdas que en GolEvent teníamos un atributo lado que indicaba dónde se produjo el gol? Pues ha llegado el momento de utilizarlo. Podemos borrar el contenido de la función golAnotado en Escenario y cambiarlo por este otro:
/**
* Tratamiento tras que se produza un evento.
* @param e El evento producido.
*/
public function golAnotado(e:GolEvent)
{
marcadores[e.lado].sumaPuntuacion(1);
}
- marcadores[e.lado]: Tenemos dos marcadores dentro del Vector. Uno en la posición "0" y otro en la posición "1". ¿Cómo decidimos dónde sumar puntuación? Con el atributo antes mencionado.
Y ya tenemos los marcadores funcionando.
| Anterior | Índice | Siguiente |
