Significant decrease in performance when I use fonts or bitmap fonts

Question

I am building a bingo card and use the starling button class for the numbers on the card.

if I use the bitmapfont or normal fonts the fps drops from 40 to 10. if I use only texture without the fonts the fps stay the same.

what I am doing wrong??

for(var i:int = 0; i < rows * cols ; i++)
        {
            var btn:Button = new Button(Assets.getTexture("btn"),String(i+1));
            btn.fontName="dig"
            btn.x = (i % cols) * (btn.width + spacerX) + btnXoffset;
            btn.y = Math.floor(i / cols) * (btn.height + spacerY) + btnYoffset;
            addChild(btn);
        }

Answer 1

I suspect you're ending up with a good number of draw calls. Try enabling the stats monitor to see.

That's a lot of Buttons to use in one place. Each one includes both a texture for the button as well as a separate text field for the label. The text field will cause an extra draw call because it switches contexts. Since you have a large number of them (25 for bingo), you'll end up with something on the order of 50 draw calls as the context switches back and forth between the images and the text. This will happen even if the bitmap font is in your texture atlas.

A better, more performant approach would be to skip Button and create your own subclass of Image that displays one or more of your number images and manages the touch events on its own.