El contenido de esta página requiere una versión más reciente de Adobe Flash Player.

Obtener Adobe Flash Player

avatar
Compartir en Facebook 3.737 views

Entendiendo la clase drawTriangles en AS3.0 / actionscript 3

Graficos Añade un comentario

www.xavirobot.com
Autor: Javier Vicente Medina

This movie requires Flash Player 9

Hace poco estuve peleándome con esta clase para hacer un experimento y por más que mire en mis libros y en tutoriales por internet no conseguía entender la lógica del segundo parámetro “los índices” al final y después de varios experimentos y una libreta cuadriculada conseguí entenderlo.

En este tutorial voy a intentar explicar el funcionamiento de drawTriangles todo lo mejor que pueda, si alguien encuentra algo erróneo agradecería algún comentario para corregirlo.

La clase drawTriangles acepta 4 parámetros vértices, índices, uvtData y culling

Ejemplo de uso:

Parámetro vértices:

Este parámetro es el único obligatorio siempre y cuando especifiquemos los vértices correctamente y debe contener un array de tipo vector con los valores de los puntos o vértices que queremos dibujar en pantalla, el vector es el nuevo tipo de array que salió para la versión fp10 y prácticamente es lo mismo que la clase array pero más estricto, asi que voy a explicar un poco el vector antes de explicar el primer parámetro vértices de drawTriangles.

(En los ejemplos siguientes solo mostrare las líneas de código implicado para su mejor entendimiento y brevedad, al final del tutorial encontrareis ejemplos con el código completo)

Ejemplo de array/vector

Prácticamente su uso es el mismo que el de array en cuanto a la forma de recuperar los datos o agregarlos, las únicas diferencias es que debemos declarar el tipo de datos que contendrá el array y solo podremos insertar ese tipo de datos ya sea Number, String u Object.

Tampoco podremos agregar un valor al array/vector en una posición que no exista porque nos devolverá un error.

Ejemplo:

Existen otras diferencias pero para más información sobre la clase vector podéis acceder a la web http://help.adobe.com/es_ES/AS3LCR/Flash_10.0/Vector.html

Ahora que más o menos entendemos la clase vector podemos continuar con la explicación del parámetro vértices, este parámetro acepta arrays/vectores de tipo Number pero antes de pasarle el vector al parámetro drawTriangles debemos introducir los valores de los vértices que queremos dibujar en pantalla al array/vector.

Por ejemplo si quisiéramos dibujar un vértice 100pxl en el eje X horizontal y 100pxl en el eje Y vertical del plano de un movieClip haríamos lo siguiente.

Ejemplo:

Con eso supuestamente pintaríamos un vértice en la posición X 100 e Y 100, si lo preferís podéis pensar en los vértices como si de un punto se tratara vamos como si dibujáramos con un rotulador un puntito.

Resultado:
ejemplo

Ya hemos visto como dibujar un vértice pero el problema es que con un solo punto no hacemos nada, la clase drawTriangles como bien indica es para dibujar triángulos por lo tanto necesita que le indiquemos la posición de 3 vértices/puntos para que pueda dibujar uno, es decir nosotros le decimos los puntos y la clase se encarga de trazar las líneas entre ellos para rellenar el triangulo.

¿De qué formas podemos indicarle la posición de los vértices que queremos que nos dibuje?

Bien pues al parecer la clase drawTriangles es bastante lista así que podemos pasarle los datos de varias formas y ella se encarga de diferenciarlos, por ejemplo para crear un triangulo podemos hacerlo de 2 formas, insertando la posición de cada vértice por separado o la posición de los 3 vértices juntos.

Ejemplo:

o también podemos hacerlo así:

Resultado:
ejempo1

DrawTriangles sabe que cada grupo de 2 valores (0,0) es una posición de un vértice en la pantalla y cada 3 grupos de 2 (0,0, 0,0, 0,0)es un triangulo, cuando la clase dispone de los 3 vértices entonces traza las líneas o el relleno entre ellos.

¿Cómo puedo crear 2 triángulos y formar un cuadrado?

Para dibujar 2 triángulos tenemos que indicar todos los vértices de cada uno de ellos que serian 6.

Ejemplo:

o también podemos hacerlo así

Resultado:
ejemplo2

Podemos dibujar tantos triángulos como queramos variando su posición sabiendo que por cada triangulo de mas que queramos dibujar debemos especificar los 3 vértices/puntos en grupos de 2 valores(x,y).
En el siguiente ejemplo creamos 3 triángulos

Ejemplo:

o también podemos hacerlo así

Resultado:
ejemplo4

¿Qué ocurre si quiero dibujar 2 triángulos y solo especifico 4 vértices?
Si queremos dibujar 2 triángulos pero no especificamos los 6 vértices si no 4 entonces la clase dibujara el primer triangulo correctamente pero el segundo triangulo al faltarle 2 vértices no sabrá como cerrarlo y por lo tanto no se dibujara, la clase dibujara los triángulos de forma automática siempre y cuando le pasemos la posición de los 3 vértices de cada triangulo.

Resultado:
ejemplo3

Alguno estará pensando, pues menuda porquería… tengo que especificar 6 vértices para crear 2 triángulos que en realidad comparten 2 vértices en la misma posición.

Bueno no te preocupes porque es ahora cuando el segundo parámetro “índices” de la clase drawTriangles tiene su cometido.

Parámetros índices:

El segundo parámetro índices es un parámetro que nos servirá para indicarle a la clase que vértices/puntos de los que hemos creado queremos utilizar para cerrar un triangulo.

Antes de nada tenemos que saber que el parámetro índices también acepta un array/vector pero en este caso de tipo int y que los valores que tenemos que introducir dentro de dicho vector son los números que hacen referencia a los vértices que hemos creado

-¿Comooorrr? ya me perdidor torpedoo-

No te preocupes para mi también fue lo que más me costo de entender pero una vez lo asimilas es sencillo.

Si indicamos en el parámetro vértices, 3 vértices para crear un triangulo la clase otorgara un índice numérico a cada vértice en el orden que lo hayamos creado o mejor dicho en el orden que lo hayamos agregado al array Vector vértices.

Por ejemplo:

El vértice o punto 1 tendrá como valor de índice 0
el vértice o punto 2 tendrá como valor de índice 1
el vértice o punto 3 tendrá como valor de índice 2

El número de índice viene a ser algo así como el nombre de instancia de un vértice para que la clase pueda identificarlo por lo que si creáramos 2 triángulos con 6 vértices sabríamos que el índice del último vértice insertado seria el 5 y que el índice del primer vértice seria el 0.

Resultado:
ejemplo5

La clase drawTriangles funciona automáticamente siempre y cuando le pasemos todos los vértices de cada triangulo correctamente pero si especificamos 4 vértices la clase dibujara un triangulo con los 3 primeros vértices y con el vértice 4 se quedara sin saber qué hacer, pero ahora nosotros sabemos cuáles son los índices de cada vértice que hemos creado y podemos decirle manualmente que conecte el vértice 4 con otros 2 ya existentes, de esta manera podemos crear un cuadrado mediante 2 rectángulos y solo 4 vértices que es lo que seguramente nos interesara.

Bueno basta de palabrería vamos a ver un ejemplo de un cuadrado formado con 2 triángulos y con solo 4 vértices en vez de 6.

Resultado:
ejemplo6

-¿Perdona? sigo sin entender lo de los índices…

Vale ya se, es difícil de entender y yo me explico muy mal, intentare explicarlo mejor vamos a ver…

El vector índices debe de estar formado por grupos de 3 dígitos, los 3 primeros dígitos hacen referencia al primer triangulo los 3 siguiente al segundo triangulo y así sucesivamente, es decir si insertamos un vértice debemos insertar el índice de ese vértice y si insertamos 3 vértices para formar un triangulo insertaremos los 3 índices separados por comas de los 3 vértices,
-uffff que lioo !!

Vale mejor veamos una imagen
ejemplo7

Cada digito de cada grupo de 3 hace referencia al índice del vértice al que esta o debería estar conectado por ejemplo 0, 1,2

El 0 le está diciendo que el primer punto del triangulo 1 se conecte al vértice con numero de índice 0 el 1 al 1 y el 2 al 2

Pero qué pasa con el segundo triangulo? al no crear los 2 vértices necesarios la cosa quedaría así
indices.push(0,1,2, ,3, );

El segundo grupo de 3 dígitos quedaría con 2 dígitos vacios porque no existen esos vértices y no puede quedar así por lo que en el primer digito del segundo grupo de 3 introduciremos el numero de índice 1 que es el índice del vértice 2 del triangulo 1, en el segundo digito del segundo grupo dejamos el 3 que es el índice del cuarto vértice que si existe y en el tercer digito pondremos el 2 que es el índice del tercer vértice del primer triangulo.

indices.push(0,1,2, 1,3,2);

En definitiva mediante los índices podemos indicar manualmente con que vértices queremos formar el triangulo, si tuviéramos 100 vértices podríamos indicar que queremos formar un triangulo con los vértices cuyos índices sean 20, 40 y 82.

- Mmmm!! Vale creo que más o menos he entendido el tema de los índices, pero si quiero crear mediante un bucle for una malla de triángulos reutilizando los vértices ¿cómo puedo saber cómo conectar los vértices mediante los índices?

Uf esto se pone cada vez más complicado… a ver como lo explico.

La forma de indicar los índices para conectar los vértices y formar los triángulos dependerá del orden y la forma en que introduzcamos los vértices, a partir de aquí deberemos realizar alguna fórmula automática para asignar los índices, por ejemplo si queremos crear 6 cuadrados mediante 12 triángulos deberemos crear 12 vértices, para hacer esto podemos crear una cuadricula de 2×3 de izquierda a derecha con una separación de 100 px tanto en X como en Y hasta llegar al final de la fila para después saltar a la segunda fila y repetir el proceso.

El proceso podría parecerse a algo como esto
ejemplo8

-Vale muy bonito pero… ¿cómo conecto los vértices mediante los índices?

Para conectar los vértices, podemos utilizar una fórmula que consiste en averiguar los 3 vértices que formaran el triangulo a partir del índice del primer vértice.

Si nos fijamos en la imagen de arriba veremos que el índice del primer vértice es 0, sabiendo esto podemos averiguar el segundo índice sumando el índice del primer vértice + 1 que nos dará como resultado 1 que es el índice del segundo vértice.

Para averiguar el tercer índice sumaremos el índice del vértice 1 mas el numero de columnas que son 3 y esto nos da el numero de índice 4, ahora ya tenemos los 3 índices de los 3 vértices que formaran el primer triangulo. Pero todavía nos falta averiguar el cuarto índice para cerrar el segundo triangulo y formar el cuadrado, que es tan sencillo como sumar`+1 al tercer índice que ya sabemos que es 4 entonces 4 + 1 = 5 y ya tenemos los 4 vértices.

-Me cuesta entender eso tío ¿me puedes enseñar mejor una imagen?

Ok veamos la imagen
ejemplo9

Sabiendo esto ahora ya podemos sacar los valores de todos los índices de manera automática por ejemplo si nos miramos la siguiente imagen veremos cómo podemos extraer los índices del triangulo G y H
ejemplo10

Tenemos que tener en cuenta cuando resolvamos los índices que de alguna manera tenemos que evitar resolver el último vértice porque lo que queremos es hacer como una especie de salto de línea pero con los rectángulos, esto lo entenderemos mejor si vemos una imagen.

ejemplo11

Resolver este problema me dio algún que otro dolor de cabeza, había visto algunos ejemplos pero me parecían demasiado complicados e incluso aparentemente parecían funcionar bien pero en realidad no conectaban bien los índices, así que me empeñe en encontrar un solución mas simple hasta que finalmente conseguí conectar los índices de una manera sencilla y correcta.

-Bla bla bla… deja ya de tanto cascar y enseña un ejemplo por dios!

Vale, vale aquí va el código del ejemplo:

Y aqui va el ejemplo:

This movie requires Flash Player 9

Asta aquí supuestamente ya hemos entendido el funcionamiento de los 2 primeros parámetros de la clase drawTriangles, el parámetro vértices y el parámetro índices ahora es cosa vuestra la de experimentar y acabar de asimilarlo, pero no creías que este tostón de tutorial se acaba aquí, todavía nos faltan 2 parámetros mas uvtData y culling asi que vamos a pasar a explicarlo.

Parámetro uvtData:

El tercer parámetro uvtData no permitirá configurar el mapeado UV y acepta como valor un vector de tipo Number al cual le agregaremos las posiciones de las partes de una imagen que queremos mostrar dentro de un triangulo

Las posiciones las indicaremos en porcentajes en vez de pixeles es decir con decimales para ver más claro cómo funciona esto mejor veamos una imagen
ejemplo12

Una vez explicado esto vamos a pasar a ver el código de un ejemplo practico

Ejemplo:

This movie requires Flash Player 9

Además de poder pasar las posiciones U V podemos pasar un tercer valor T para especificar valores de perspectiva en 3D pero esta opción de momento se escapa de mi entendimiento, así que lo dejare para otro tutorial, ahora voy a pasar a explicar el ultimo parámetro culling, que no tiene mucho misterio.

Parámetro culling:
El parámetro culling acepta 3 contantes POSITIVE , NEGATIVE y NONE
si no especificamos nada en el cuarto parámetro el valor por defecto es NONE
en principio con este parámetro podemos controlar que caras de los triángulos mostrar o no mostrar según su perspectiva 3D.
Ejemplo:
plane.graphics.drawTriangles(vertices,indices,uvtData,TriangleCulling.NONE);
Os invito a experimentar con él, la verdad no tiene mucho misterio si alguien le apetece leer más información sobre este parámetro puede dirigirse a

http://help.adobe.com/es_ES/ActionScript/3.0_ProgrammingAS3/WSB0132CAB-C91D-4cb4-9A47-394C85677E40.html

Personalmente hasta aquí he llegado, creía que nunca acabaría este tutorial, espero que las horas invertidas por no decir días sirvan para ayudar a alguien.

Good Luck!!

Descargar ejemplo drawTriangles.rar - - Descargado (181) veces.

7 Respuestas a “Entendiendo la clase drawTriangles en AS3.0 / actionscript 3”

  1. avatar natalia dijo:

    buen blog!! y buenas aportaciones!!

  2. avatar jvm dijo:

    Gracias :)

  3. avatar Goza dijo:

    Muchas gracias por el tutorial esta verdaderamente bien y me ha sido de mucha ayuda.

  4. avatar runaway dijo:

    wow! vaya curro man.

  5. avatar José dijo:

    ¡Genial!!

  6. avatar Yoli dijo:

    Estupenda explicación sobre la clase drawTriangles, es la más extensa y detallada que he encontrado, me ha servido incluso para comprender algunos conceptos de funcionamiento de la nueva API 3D porque la lógica para dibujar los triángulos es parecida.

    Bajo mi punto de vista la explicación está bien pero en algunos puntos es algo confuso pero entiendo que debe ser difícil explicar bien algo tan complejo.

    Hay que reconocer que te has pegado un buen tute aportando toda esta información.

    Saludos

  7. avatar duende dijo:

    Eso de que no te explicas bien.. yo creo que esta mejor explicado que en la propia pagina de adobe

Escribir un Comentario

Usted debe ingresar para enviar un comentario.

© 2011 jvmBlog & xavirobot.com by Javier Vicente Medina
Entradas RSS Comentarios RSS Acceder

Todo el contenido del blog xavirobot está bajo licencia Creative Commons Attribution-ShareAlike 2.5 España License, a no ser que se indique lo contrario. Si fuera este el caso se pedirá permiso o se indicara los créditos del autor, si cree que algún contenido no debería estar aquí por no estar atribuido entonces póngase en contacto mediante info@xavirobot.com y el contenido será retirado lo antes posible.