El juego de unir los puntos con Flash / AS3
Coordenadas de nodos.
Volvamos la vista al ejemplo que presentabamos al inicio del tutorial:
Hablamos de crear un juego de unir puntos. Así que no tiene demasiado sentido utilizar trazos generados de forma aleatoria. Lo deseable es que los trazos, compongan, lo mas fielmente posible, el contorno de un dibujo. Si además podemos aprovechar las posibilidades de las nuevas tecnologías para que una vez finalizado el dibujo de los trazos, se produzca algún efecto mejor. En el caso de este ejemplo, una vez finalizado el trazo por completo, se produce un efecto "fade", que muestra el dibujo trazado. Una simpática estrella. Bueno, no la conozco personalmente, así que no se cierto si es simpática. El caso es que ahí esta!
Para ello es necesario un poco mas de preparación, ya que debemos fijar exactamente las coordenadas de los nodos que componen el trazo, para que se distribuyan lo mas fielmente posible al contorno del dibujo (en este caso una estrella), y no generarlas de forma aleatoria como haciamos anteriormente. Por otro lado, para conseguir un efecto del tipo de este ejemplo, mostrar el dibujo oculto con un fade, colorear el interior de la forma, etc..., también necesitaremos una señal que nos indique que el trazo está completamente resuelto. Para esto último, la solución puede pasar (y de hecho aquí pasa), por el lanzamiento de un evento por parte de la clase TrazoContinuo , que nos informe de ello.
Para lograr este cometido, tan solo es necesario realizar unas pequeñas variaciones en el método setRandomTrazo, como las presentadas en el nuevo método makeStarDraw.
private function makeStarDraw() {
var xArray:Array = new Array( 245, 280, 351, 301, 310, 245, 179, 187, 140, 211,240 );
var yArray:Array = new Array( 44, 107, 120, 172, 244, 214, 244, 172, 120, 107,53 );
for (var i:int = 1; i <= xArray.length; i++ ) {
var n:Nodo = new Nodo(i);
n.x = xArray[i - 1];
n.y = yArray[i - 1];
n.addEventListener(Nodo.DOT_OVER,nodeOver);
nodos.push(n);
}
}
¿Como obtenemos las coordenadas? .. Responder a esta pregunta no es sencillo. Disponemos de varias opciones.
En este caso concreto, y si observas el ejemplo del tutorial, yo me he dedicado a obtenerlas "a pelo". Sobre el dibujo de la estrella en la propia escena de la película flash, me he dedicado a consultarlas manualmente. A modo de ejemplo puede estar bien. Hay que tener en cuenta que estas coordenadas son libres y dependen de algunos factores: Cómo esté alineado el simbolo de los nodos en la película (en nuestro caso está centrado, y por tanto las coordenadas hacen referencia al centro del circulo del nodo). Donde comienza a ubicarse el clip de trazo continuo, etc... En este caso una estrella es sencilla, con ubicar los nodos en los vertices que la componen suficiente. Tampoco es un dibujo con excesivas curvas y de complejidad, aunque para dibujos mas complejos y compuestos por mas nodos, este trabajo puede no ser tan trivial.
En función de las ganas que tengamos y de hasta donde estemos dispuestos a llegar con este tipo de desarrolo de juego, procederemos de una u otra forma. Un buen método, aunque costoso, sería crear un editor del propio juego. En este editor podriamos cargar nuevos dibujos, introducir los puntos sobre un el dibujo de forma WYSIWYG y al final generar las coordenadas. O obtener un estructrura XML asociada a un dibujo, junto coordenadas de los trazos y nodos que lo componen. Las posibilidades son variadas y extensas y escapan del ámbito de este tutorial. Pero es llegado este momento donde tu iniciativa y creatividad debe explotar para conseguir tus objetivos. Yo solo te comento algunas posibilidades.
El segundo problema, conocer cuando el trazo está completamente resuelto, tiene una resolución similar a la que utilizamos en la clase Nodo para indicar que estabamos sobre un nodo. No es otro que emitir un evento. De ese modo el manejador del objeto de trazo, en este caso la clase unirpuntos02, sabrá cuando el trazo está resuelto y podrá realizar una acción programada. En este caso mostrar el dibujo de la estrella con un efecto "fade".
Así la función nodeOver, se modifica de la siguiente forma:
private function nodeOver(e:Event ):void
{
if (trazoResuelto) { return; }
var n:Nodo = Nodo(e.target);
if (n.numero == ultimoNumeroResuleto + 1) {
n.cambiaEstado(Nodo.estado_resuelto);
ultimoNumeroResuleto++;
graphics.lineStyle(1, 0x000000);
graphics.lineTo(n.x,n.y);
}
if (ultimoNumeroResuleto == nodos.length) {
trazoResuelto = true;
dispatchEvent(new Event(TRAZO_RESUELTO));
}
}
En rojo queda marcado la comprobación necesaria para emitir dicho evento y no es mas que el ultimo nodo en resolverse sea el último nodo de nuestro array de nodos (siempre y cuando esté ordenado).
Y de este modo en la clase unirpuntos02, estas instrucciones permitirán realizar el "fade" de la estrella una vez resuelto el trazado:
tc = new TrazoContinuo(stage);
tc.addEventListener(TrazoContinuo.TRAZO_RESUELTO, function() {
myTweenAlpha = new Tween(star, "alpha", Strong.easeOut, 0, 1, 4, true);
});
¿Continuará? ....
De momento debo finalizar aquí este tutorial. Aun faltan muchos "puntos" que resolver, valga la redundancia, para crear un juego de unir puntos aceptable. Entre estos, se me ocurre que aun faltaría gestionar figuras, compuestas de varios trazados... y siguiendo con el anidamiento. Varios conjuntos de figuras , compuestas por diferentes trazados, que podrían componer los diferentes niveles del juego. Yo me tengo que quedar en este punto del camino. Quizás tu quieras seguir haciendo camino y llegar aun mas lejos. Si lo haces estaré muy agradecido de seguir tus progresos. Espero tu opinión y de paso te invito a dar una vuelta por esta web. Vas a encontrar mucho contenido divertido.
Gracias por leer este tutorial, gracias por visitarnos.
Julio Laguna.
Tutorial de la semana , Octubre 2011, en abcdatos.com.
