Actionscript 3.0: optimizaciones (II)

Continuación del artículo de optimizaciones en Actionscript 3.0

Sumar / Concatenar cadenas de texto (Strings)

Método: concat()

 
var t:Number = getTimer();
var txt1:String = "Esto es";
var txt2:String = "una prueba de rendimiento";
var txt3:String = "de concatenacion de cadenas"
var txt:String;
for(var i:uint = 0;i < 1000000; i++){
	txt = txt1.concat(" ", txt2, " ",txt3);
}
trace(getTimer() - t);

Resultado: 2034 ms

Método: operador +

 
var t:Number = getTimer();
var txt1:String = "Esto es";
var txt2:String = "una prueba de rendimiento";
var txt3:String = "de concatenacion de cadenas"
var txt:String;
for(var i:uint = 0;i < 1000000; i++){
	txt = txt1 + " " + txt2 + " " + txt3;
}
trace(getTimer() - t);

Resultado: 894 ms

Conclusión: sumar Strings con + es 2 veces más rápido que utilizar el método concat() de la clase String().

Calcular mínimo / máximo de 2 números

Método: Math.min() / Math.max()

 
var t:Number = getTimer();
var n1:Number = 234;
var n2:Number = 675
var n:Number;
for(var i:uint = 0;i < 1000000; i++){
	n = Math.min(n1,n2);
}
trace(getTimer() - t);

Resultado: 149 ms

Método: condicionales

 
var t:Number = getTimer();
var n1:Number = 234;
var n2:Number = 675
var n:Number;
for(var i:uint = 0;i < 1000000; i++){
	n = (n1>n2)?n2:n1;
}
trace(getTimer() - t);

Resultado: 25 ms

Conclusión: una vez más, hacerlo "a mano" es más rápido.

Multiplicación vs División

Método: división

 
var t:Number = getTimer();
for(var i:uint = 0;i < 10000000; i++){
	var n:Number = i / 2;
}
trace(getTimer() - t);

Resultado: 226 ms

Método: multiplicación

 
var t:Number = getTimer();
for(var i:uint = 0;i < 10000000; i++){
	var n:Number = i * .5;
}
trace(getTimer() - t);

Resultado: 225 ms

Conclusión: esta era una de las "leyendas urbanas" que siempre habia oido pero nunca habia testeado. Por lo que he estado investigando, hasta alguna versión de FP9, era más rápido multiplicar que dividir un número, pero en las nuevas versiones de Flash Player ya no es así.

Actionscript 3.0: optimizaciones (I)

Etiquetas: Math.floor Math.abs

Este artículo recoge algunos test de rendimiento para diversas operaciones en Actionscript 3.0. Este es un tema que me interesa bastante, asi que espero hacer mas test e ir ampliando información en el futuro.

Los test se han realizado en un Core2 6420 2,13Ghz, con 3GB de RAM y Windows Vista Home Premium de 32 bits. La versión de Flash Player es la 10,0,2,54.

Recorrer elementos de un Array (de 1 millón de elementos)

 
var t:Number = getTimer();
var temp:int;
	for(var i:Number = 0; i < matriz.length; i++){
		temp = matriz[i];
	}
trace(getTimer() - t);

Resultado: 130 ms

Si sustituimos el tipo de i de Number a uint:

 
var t:Number = getTimer();
var temp:int;
for(var i:uint = 0; i < matriz.length; i++){
	temp = matriz[i];
}
trace(getTimer() - t);

Resultado: 95 ms

Si almacenamos matriz.length en una variable:

 
var t:Number = getTimer();
var temp:int;
var l:uint = matriz.length;
for(var i:uint = 0; i < l; i++){
	temp = matriz[i];
}
trace(getTimer() - t);

Resultado: 23 ms

En definitiva, solo con poner uint (entero positivo) como tipo de i, y con almacenar la longitud de la matriz en una variable, hacemos que el bucle se ejecute 5,6 veces más rápido.

Redondear números (Math.floor)

 
var t:Number = getTimer();
var temp:Number;
for(var i:uint = 0;i < 1000000; i++){
	temp = Math.floor(1.7);
}
trace(getTimer() - t);

Resultado: 163 ms

 
var t:Number = getTimer();
var temp:Number;
for(var i:uint = 0;i < 1000000; i++){
	temp = uint(1.7);
}
trace(getTimer() - t);

Resultado: 29 ms

 
var t:Number = getTimer();
var temp:Number;
for(var i:uint = 0;i < 1000000; i++){
	temp = int(1.7);
}
trace(getTimer() - t);

Resultado: 18 ms

Este test me ha sorprendido mucho. Convertir el número a int(entero), es 9 veces más rápido que utilizar Math.floor(). Teniendo en cuenta que el resultado es el mismo, y que encima int tiene menos letras que Math.floor, no veo motivos para no desterrar a Math.floor().

Obtener el valor absoluto de un número (Math.abs)

 
var t:Number = getTimer();
var temp:Number;
var n:Number = -53.44;
for(var i:uint = 0;i < 1000000; i++){
	temp = Math.abs(n);
}
trace(getTimer() - t);

Resultado: 145 ms

 
var t:Number = getTimer();
var temp:Number;
var n:Number = -53.44;
for(var i:uint = 0;i < 1000000; i++){
	temp = n < 0 ? n * -1 : n;
}
trace(getTimer() - t);

Resultado: 26 ms

Es decir, obtener el valor absoluto "a mano", 5,5 veces más rápido que utilizar Math.abs()

AS3Dmod: utilización básica con Papervision

Etiquetas: Bend ModifierStack Phase LibraryPv3d viewport3D BasicRenderEngine Plane

AS3Dmod es una libreria de modificadores para objetos 3D. Actualmente AS3Dmod dispone de 7 modificadores (doblar, deformar...) que funcionan con Papervision3D, Away3D, Sandy3D y Alternativa3D. Aunque hay muy poca documentación (sobre todo en castellano), es bastante fácil de utilizar. Los pasos para poder utilizarla son los siguientes:

-Descargar AS3Dmod:

-Saber utilizar alguno de los 4 motores 3D compatibles. Puedes ver tutoriales de Papervision3D y Away3D en esta misma página.

-Una vez tenemos nuestra escena 3D en alguno de los motores, creamos una instancia de ModifierStack. El "modifier stack" es un link entre el objeto que queremos modificar y los modificadores:

mstack = new ModifierStack(new LibraryPv3d(), plano);

Podemos ver como se pasan como parámetro un objeto indicando la librería que vamos a utilizar (en este caso Papervision), y el objeto que vamos a modificar (un plano).

-Ahora necesitamos crear un modificador, y añadirlo a mstack. Para el ejemplo he utilizado "Bend", que recibe como parámetros la fuerza y el lugar donde se aplica:

 
bend = new Bend(0, 1);

mstack.addModifier(bend);

-Por último, cada vez que se haga un cambio en el modificardor, debemos aplicarlo (algo asi como ordenar que se renderice):

mstack.apply();

Para este ejemplo he utilizado una clase de AS3Dmod que se llama Phase. Esta clase sirve para crear una animación tipo seno. Es decir, nosotros incrementamos su valor, y ella controla de que siempre esté entre -1 y 1. Es decir, si incrementamos su valor en 0.5 en cada fotograma, cuando llegue a 1 volverá sobre sus pasos hasta valer -1, y viceversa.

Este es el código completo comentado:

Dibujar en un cristal con vaho en Actionscript 3.0

Etiquetas: addEventListener MOUSE_MOVE drawCircle beginFill endFill

Este ejemplo muestra como hacer el efecto de "pintar sobre el vaho" en un cristal. Esta es la manera más sencilla que en encontrado de hacerlo, desde el punto de vista de alguien con pocos conocimientos de programación. Para hacer este efecto necesitamos:

-Imagen del cristal con vaho:

-Imagen de cristal sin vaho:

-Nociones de AS3 (Sobre todo de la API de dibujo)

Los pasos a seguir serían los siguientes:

-Importar las dos imágenes a Flash, y poner cada una en una capa (la imagen sin vaho por encima de la con vaho), en la posición (0,0)

-Crear un clip vacio y llamarlo "Mascara_mc". Ponerlo en (0,0)

-Hacer que "Mascara_mc" sea la mascara para la imagen sin vaho. Aquí tenemos un pequeño "problema", y es que al estar vacio, no nos va a aplicar bien la máscara. Por ello, antes de ponerlo como máscara, nos metemos dentro de "Mascara_mc" y dibujamos un pequeño cuadrado.

La linea de tiempo nos quedaría asi:

-Por último, tenemos que programar la escena, para que cuando hagamos click, se dibuje dentro de "Mascara_mc" y se vaya destapando la imagen con vaho.

El código en Actionscript 3.0, y el resultado, son los siguientes:

Papervision: creado grupo de Google en castellano

Hace un par de semanas se creo un grupo en Google de Papervision en castellano.

Podéis apuntaros aqui:

-Acceder al grupo ESPapervision

Adobe Flash Catalyst

Adobe Flash Catalyst es una nueva herramienta de Adobe, que permite crear contenidos interactivos sin programar. Por lo que he visto, es como el "hermano diseñador" de FLEX. Catalyst permite crear interfaces por medio de componentes, que pueden configurarse mediante menús de ayuda. Por ejemplo, podemos crear un menú que cargue distintas secciones con distintas transiciones, y poner a los botones efectos over sin escribir ninguna linea de código.

Además, Adobe Flash Catalyst está integrado con el paquete de CS4, y permite importar archivos de Illustrator, Photoshop y Fireworks, respetando las capas y los objetos. Como en Flex, todo lo que hacemos en vista de diseño, se refleja en un mxml que después se podrá compartir con Gumbo (Flex 4), para añadir comportamientos más avanzados.

De momento no está disponible para comprar, pero se espera una beta pública en los próximos meses.

Eliminar dobles saltos en textos cargados en XML

Etiquetas: charCodeAt charAt

Cuando cargamos un XML cuyos textos contienen saltos de linea, Flash duplica los saltos. Es decir, que si en el XML hemos puesto dos lineas separadas por un salto, en Flash aparecerán separadas por dos. Para solucionarlo, podemos aplicar una función al texto antes de mostrarlo en el campo de texto.

La función que podemos aplicar es la siguiente:

Away3D: Manejo de eventos de ratón para Away 2.2

Etiquetas: View3D addOnMouseDown MouseEvent3D object Plane

Para interactuar con el ratón en objetos 3d en Away3D 2.2, tenemos que seguir 2 pasos:

-Añadir el evento al objeto, utilizando la función addOnMouseDown (en este caso para detectar que hemos presionado en el objeto). A addOnMouseDown le pasamos como parámetro la función en la que se recoje el evento:

p.addOnMouseDown(planoElegido);

-Recoger el objeto pulsado en la función, por medio del parámetro object:

current = e.object;

El código completo: