JacksonDunstan.com

package
{
	import flash.geom.Matrix;
	import flash.events.MouseEvent;
	import flash.text.TextFormat;
	import flash.geom.Rectangle;
	import flash.utils.getTimer;
	import flash.text.TextFieldAutoSize;
	import flash.display.StageScaleMode;
	import flash.display.StageAlign;
	import flash.text.TextField;
	import flash.display.Bitmap;
	import flash.display.BitmapData;
	import flash.display.Sprite;
 
	public class TextTest extends Sprite
	{
		private var shortTF:TextField;
		private var longTF:TextField;
		private var screenBMD:BitmapData;
		private var screenRect:Rectangle;
		private var drawMat:Matrix;
		private var time:TextField;
 
		public function TextTest()
		{
			stage.align = StageAlign.TOP_LEFT;
			stage.scaleMode = StageScaleMode.NO_SCALE;
 
			screenRect = new Rectangle(0, 0, stage.stageWidth, stage.stageHeight);
			screenBMD = new BitmapData(640, 480);
			addChild(new Bitmap(screenBMD));
 
			drawMat = new Matrix();
 
			var textFormat:TextFormat = new TextFormat();
			textFormat.size = 12;
			textFormat.color = 0xff000000;
 
			shortTF = new TextField();
			shortTF.autoSize = TextFieldAutoSize.LEFT;
			shortTF.defaultTextFormat = textFormat;
			shortTF.text = "the";
 
			longTF = new TextField();
			longTF.autoSize = TextFieldAutoSize.LEFT;
			longTF.defaultTextFormat = textFormat;
			longTF.text = "the quick brown fox jumped over the lazy dog";
 
			makeButtons("Short", "Long");
 
			time = new TextField();
			time.text = "Time: 9999";
			time.autoSize = TextFieldAutoSize.LEFT;
			time.x = stage.stageWidth - time.width;
			time.y = stage.stageHeight - time.height;
			time.background = true;
			time.backgroundColor = 0xffffffff;
			addChild(time);
		}
 
		private function makeButtons(...labels): Number
		{
			const PAD:Number = 5;
			var curX:Number = PAD;
			var curY:Number = stage.stageHeight - PAD;
			for each (var label:String in labels)
			{
				if (label == null)
				{
					curX = PAD;
					curY -= button.height + PAD;
					continue;
				}
 
				var tf:TextField = new TextField();
				tf.mouseEnabled = false;
				tf.selectable = false;
				tf.defaultTextFormat = new TextFormat("_sans");
				tf.autoSize = TextFieldAutoSize.LEFT;
				tf.text = label;
				tf.name = "lbl";
 
				var button:Sprite = new Sprite();
				button.buttonMode = true;
				button.graphics.beginFill(0xF5F5F5);
				button.graphics.drawRect(0, 0, tf.width+PAD, tf.height+PAD);
				button.graphics.endFill();
				button.graphics.lineStyle(1);
				button.graphics.drawRect(0, 0, tf.width+PAD, tf.height+PAD);
				button.addChild(tf);
				button.addEventListener(MouseEvent.CLICK, onButton);
				if (curX + button.width > stage.stageWidth - PAD)
				{
					curX = PAD;
					curY -= button.height + PAD;
				}
				button.x = curX;
				button.y = curY - button.height;
				addChild(button);
 
				curX += button.width + PAD;
			}
 
			return curY - button.height;
		}
 
		private function onButton(ev:MouseEvent): void
		{
			var mode:String = ev.target.getChildByName("lbl").text;
			switch (mode)
			{
				case "Short":
					test(shortTF);
					break;
				case "Long":
					test(longTF);
					break;
			}
		}
 
		private function test(tf:TextField): void
		{
			var REPS:int = 10000;
			var maxX:int = screenRect.width - tf.width;
			var maxY:int = screenRect.height - tf.height;
			var beforeTime:int = getTimer();
			screenBMD.fillRect(screenRect, 0xffffffff);
			screenBMD.lock();
			for (var i:int = 0; i < REPS; ++i)
			{
				drawMat.tx = Math.random()*maxX;
				drawMat.ty = Math.random()*maxY;
				screenBMD.draw(tf, drawMat);
			}
			screenBMD.unlock();
			var afterTime:int = getTimer();
			time.text = "Time: " + (afterTime-beforeTime); 
		}
	}
}

Comments

• #1 by Ben on July 8th, 2013 · Reply

  Mac Mini (Os X 10.8.3 2.4 GHz Core 2 Duo, 4 GB DDR3 1333 MHz):

  Safari 6.0.4:
  HTMl 5: Short 43; Long 192 (sometimes over 500; seems pretty inconsistent)
  Flash: Short 554; Long 823

  Opera 12.16:
  HTMl 5: Short 392; Long 2347
  Flash: Short 565; Long 853

  Firefox 22:
  HTMl 5: Short 203; Long 528
  Flash: Short 541; Long 796

  ——–

  Windows 7 64 Bit (i7-3770 @ 3.4 GHz; 32 GB RAM):

  Opera 12.16:
  HTMl 5: Short 153; Long 833
  Flash: Short 301; Long 586

  Firefox 22:
  HTMl 5: Short 147; Long 258
  Flash: Short 305; Long 547

  Internet Explorer 10:
  HTMl 5: Short 122; Long 192
  Flash: Short 274; Long 530

• #2 by ben w on July 8th, 2013 · Reply

  Interesting results. When I run the HTML short test in IE I get ~270ms vs 50ms in chrome, huge difference!

  That said text is not likely to be rendered in such a fashion frequently in real world apps, I am sure static text could all be cached beforehand anyway so the majority can be blitted without the need for drawing text.

  • #3 by jackson on July 9th, 2013 · Reply

    It’s true that text is often cached as a bitmap to avoid re-drawing, but sometimes you can’t help it. For example, an MMO game may have dozens of players on screen at once all chatting to each other in pop-up word bubbles. Or the game may have a large amount of scrollable quest text that pops up over the main scene. It definitely won’t be as extreme as the 10,000 strings as in the article, but even a tenth of that would yield less than 10 FPS on some browser/device combinations (Motorola Xoom – Android 4 Browser) and a hundredth of that would make smooth frame rates difficult to achieve.

    That said, I do agree that if you’re doing a good job caching to bitmaps or textures and your game isn’t text-heavy then you’ll probably never have to worry about text rendering performance. For text-heavy scenarios though, there could be major problems on some browser/device combinations.

    • #4 by jrmcv on July 14th, 2013 · Reply

      We have had this issue at work although we aim for windows/osx machines and not mobile. We load our games in a loader written by a 3rd party and it logs everything in the background. Even if we disable the logger so the log window textfield isn’t attached to the stage, it can still cause huge frame drops every time something is logged. At first we couldn’t believe the frame drops could be from the logging until we saw through scout that almost 80% of total rendering time was for text rendering. A different loader is used for released games so its not that much of an issue although it can make development a bit awkward. It does make me think a bit longer before adding text to flash though – even for debugging tools.

• #5 by Josh Tynjala on July 8th, 2013 · Reply

  I’m curious if rendering text with Flash Text Engine is faster or slower than TextField.

  • #6 by Etherlord on July 8th, 2013 · Reply

    FTE is probably slower:
    http://stackoverflow.com/questions/16316165/does-the-flash-text-engine-display-faster-than-typical-textfields
    But it has a nicer quality than TextField, and it has some flow features (like justification) that as far as I know, HTML5 canvas lacks.

    TLF is many orders of magnitude slower…

  • #7 by Matt on July 9th, 2013 · Reply

    FTE is extremely slow. Much, much slower than TextField. I had a deep relationship with FTE and it’s buggy and incomplete and slow as hell.

• #8 by Mario on July 10th, 2013 · Reply

  Any idea if using the GPU may help in this case?
  firetype library, for instance:
  https://github.com/MaxDidIt/firetype

  • #9 by jackson on July 10th, 2013 · Reply

    Sounds like a cool library. I haven’t tested it, but I’m guessing it’s slower to set up the font but then much quicker to render. For Stage3D-based games, this would be a huge help compared to rendering a TextField, drawing it to a BitmapData, uploading it to a Texture, and using that texture on a quad.

• #10 by Triynko on October 28th, 2013 · Reply

  Drawing to BitmapData isn’t really a fair comparison. Since Flash is technically already rendering to its own plugin canvas; a more fair comparison would be to just add 10,000 TextFields to random locations in a Flash Display object and allow it to render one frame. It achieves exactly what you’re trying to do by rendering to a canvas, except Flash achieves it much faster.

  Even if we allowed the extra (and quite unnecessary) step of rendering that 10,000 text-field-containing display object to a BitmapData object, it’s nearly twice as fast as drawing individual text fields to it. So, for example, if you were to set it up in advance, begin a timer, lock the bitmap data, randomly update the positions of those 10,000 textfield instances in the display object, call the draw command to render the display object into the bitmap data object, unlock it, and end the time… it would finish in half the time as what you’re trying to do here. Still, as I said, without that extra and unnecessary step of drawing to a bitmap data object, Flash can already natively do anything you’re trying to render on a canvas much faster, because it already handles clipping, caching, GPU acceleration, not to mention all the filters and 3D matrix transform features of a Flash display object.

  You’re comparing apples to oranges here.

  • #11 by jackson on October 28th, 2013 · Reply

    Flash only draws a DisplayObject at two times. The first is the most obvious: when Flash is rendering the Stage. The second is a special case: BitmapData.draw. This means that you can do all of the setup you want on a TextField and it will not be drawn into any buffer, canvas, screen or any other place until one of the two events occurs: a frame needs to be drawn to the screen or you explicitly call BitmapData.draw.

    In the article I am using BitmapData.draw to gain maximum control over the timing of the TextField rendering. I call getTimer before and after the calls to BitmapData.draw so I’m sure that the only work Flash is doing is the rendering of the TextField.

    In HTML5 I am doing something very similar. There’s no TextField object, so strings must be rendered directly to the 2D context of the <canvas> tag. Again I wrap these fillText calls in timers to ensure that the only work being done is the actual rendering of the text.

    To me, these two seem very equivalent. In neither case is the text already rendered to some other place as a bitmap and the bitmap simply copied. In both cases I’m ensuring that I’m measuring only the time that the draw calls take, not inter-frame work like event dispatching, vertical sync, etc.

    There is, however, one case that may skew the results of my tests. Since the text that’s being rendered happens to be the same string with the same settings (e.g. size) every time, the text could be cached somewhere rather than being re-rendered with each draw call. I’m not sure if this is actually happening in any environment I tested, but it’s an optimization that either Flash or any of the web browsers could have implemented. I don’t think that it’s happening in Flash as it would seem to make more sense if Flash were to save on the memory costs of keeping a per-TextField bitmap around until you explicitly set the cacheAsBitmap field on it to true. Given discussions like this, it seems even less likely since the result would be sub-optimal text quality.