Comunidad de diseño web y desarrollo en internet online

Clase para graficar el stage.frameRate en Actionscript 3

Con esta clase podrás mostrar el frameRate actual dentro de tu app en Flash, ya sea solo de manera textual o con una pequeña gráfica adicional similar al ejemplo siguiente:


Uno de mis futuros anhelos


Atención, añadí una función adicional al ejemplo que es ejecutada cada segundo aproximadamente la cual crea y modifica multiples bucles, esto con el fin de mostrar como oscila la gráfica.

Esta es la clase con su explicación comentada dentro del código:

Código :

package mau.utils
{
   // Importamos todos los paquetes necesarios
   import flash.text.TextField;// Campo de Texto
   import flash.text.TextFormat;// Formato del campo de texto
   import flash.text.TextFormatAlign;// Alineacion del campo de texto
   import flash.display.Sprite;// Sprite
   import flash.events.Event;// Event.ENTER_FRAME
   import flash.utils.Timer;// TimerEvent.TIMER
   import flash.events.TimerEvent;
   //
   public class fpsRater extends Sprite
   {
      // Declaramos "text" que sera el campo de texto y...
      // "textFormat" para el formato que "text" tendra
      private var text:TextField;
      private var textFormat:TextFormat;
      // Tambien declaramos las variables que se utilizaran en caso de que...
      // ...se quiera mostrar la grafica bajo el texto (opcional)
      private var i:uint = 0;
      private var graph:Sprite;// La grafica propiamente dicha
      private var graphTrace:uint;// Las coordenadas a dibujar en la grafica
      private var showGraph:Boolean;// Determina si debe ser visible o no
      //
      // "able:Boolean = true" designa "able" como "true" por defecto...
      // "format:TextFormat = null" designa un valor nulo al formato del campo de texto por defecto
      public function fpsRater(able:Boolean = true, format:TextFormat = null)
      {
         //
         // Creamos el campo de texto al cual mostraremos los fotogramas por segundo
         text = new TextField();
         text.selectable = false;// Hacemos que el texto no sea seleccionable, preferencia de cada quien
         addChild(text);// Añadimos "text" al escenario
         //
         // Checamos las preferencias del usuario
         showGraph = able;// "showGraph" tendra el mismo valor de "able" el cual es determinado por el usuario
         showGraph ? createGraph():false;// Si "showGraph" es "true" añadimos la grafica, si es "false" nos brincamos ese paso
         // Asignamos "textFormat" en caso de que "format" sea null (como lo dejamos por defecto arriba)
         format != null ? textFormat = format:textFormat = new TextFormat("Arial",10,0x000000,false,false,false,null,null,TextFormatAlign.LEFT,0,0,0,0);
         //
         // Añadimos los eventos para graficar y calcular el frame rate
         var graphTimer:Timer = new Timer(250);
         addEventListener(Event.ENTER_FRAME, eventHandler);
         graphTimer.addEventListener(TimerEvent.TIMER, eventHandler);
         graphTimer.start();
      }
      //
      // Esta funcion es llamada opcionalmente si "able" devolvio "true" al comienzo
      private function createGraph():void
      {
         //
         // Creamos un recuadro del tamaño del campo de texto para enmascarar la grafica
         var graphMask:Sprite = new Sprite();
         graphMask.graphics.beginFill(0x000000);
         graphMask.graphics.drawRect(0, 0, text.width, text.height);
         graphMask.graphics.endFill();
         //
         // Ahora creamos la grafica propiamente dicha y la colocamos...
         // ...en las mismas coordenadas de "graphMask"
         graph = new Sprite();
         graph.x = graphMask.x = text.x;
         graph.y = graphMask.y = text.y + 15;
         graph.graphics.lineStyle(1, 0x000000, 1);
         // Añadimos estos elementos al escenario y enmascaramos
         addChild(graph);
         addChild(graphMask);
         graph.mask = graphMask;
         graphTrace = 0;
      }
      //
      // Cremos la funcion encargada de recibir todos los listeners
      private function eventHandler(event:Event):void
      {
         switch (event.type)
         {
            case Event.ENTER_FRAME :
               i++;
               break;
               //
            case TimerEvent.TIMER :
               // Colocamos el texto dentro de "text"
               var val:Number = i * 2 - 1;
               i = 0;
               text.text = Math.floor(val).toString() + " fps";
               textFormat ? text.setTextFormat(textFormat):false;

               //
               // Si la grafica es visible, trazamos "graphTrace" dentro de "graph"
               if (showGraph)
               {
                  graphTrace > 30 ? graph.x--:false;
                  graphTrace++;
                  graph.graphics.lineTo(graphTrace, 1 + (stage.frameRate - val) / 3);
               }
               break;
         }
      }
   }
}
Como podrás ver la clase es realmente sencilla ya que la mitad de las líneas son puros comentarios, y además es muy adaptable al usarse. Este es su uso:

Código :

import mau.utils.fpsRater;
//
// "true" hará visible la gráfica
// "null" dejara el formato fijado por defecto para el campo de texto...
// ...de igual manera puedes utilizar tu textFormat propio reemplazando null por el nombre de este...
// ...por ejemplo:
// var customTextFormat:TextFormat = new TextFormat("Arial",10,0x000000,false,false,false,null,null,TextFormatAlign.LEFT,0,0,0,0);
var fps:fpsRater = new fpsRater(true, null);
addChild(fps);

¿Sabes SQL? ¿No-SQL? Aprende MySQL, PostgreSQL, MongoDB, Redis y más con el Curso Profesional de Bases de Datos que empieza el martes, en vivo.

Publica tu comentario

El autor de este artículo ha cerrado los comentarios. Si tienes preguntas o comentarios, puedes hacerlos en el foro

Entra al foro y participa en la discusión

o puedes...

¿Estás registrado en Cristalab y quieres
publicar tu URL y avatar?

¿No estás registrado aún pero quieres hacerlo antes de publicar tu comentario?

Registrate