Mobile Text performance issue

[MattBrooklyn]

Hi all,

 

Really loving Phaser framework. Fun to use, works great, awesome community.

 

I have encountered one small problem however that I wonder if anyone might have any insight into.

 

I'm making a word game that involves a grid of 25 letters. Turns out that drawing those letters is having a very negative effect on performance on mobile. The game runs consistently at 60fps on desktop, but on mobile it drops to around 10fps. I turned off the function that draws the text in the grid as a test, and the frame rate goes back up to around 40fps on mobile, so I can clearly see that drawing those letters is having a big impact on performance.

 

Anyone know what I can do to increase performance for this text? Thanks.

 

 

 

[valueerror]

use a bitmap font instead.. it should be faster

[MattBrooklyn]

use a bitmap font instead.. it should be faster

 

I wish I knew what that meant, but I will look it up and figure it out. Any links you all might have would help me.

 

Thanks again!

[SignalSin]

A bitmap font is a font created from an image. You have an image file with all the letters, numbers and symbols that you want plus a file (xml, json etc) with all the data for the image. Basically just like loading a spritesheet. You can create the files using tools like Littera. Phaser handles bitmap fonts, so there's no need to roll your own implementation. Check the example here.

[alex_h]

Here are another couple of alternatives:

 

http://renderhjs.net/shoebox/bitmapFont.htm

 

http://www.angelcode.com/products/bmfont/

[SolarJS]

I prefer Littea as SignalSin posted. It's a great tool. And never ever use TTF / vector fonts on mobile games   In worst case the CPU has to convert vectors to pixel each frame (if you do not cache it). On mobile this is a pure performance killer.

[Igor Georgiev]

Bitmap Text does not work for me as well. I have put about 200 words bitmap text separated in about 10 instances(I get the strings from XML) and I got 10 fps as well Also, I ones tinted 3 text, each 3-4 letters - BAM - 30fps.... Is it possible that regular text is easier to render? I did not thinks so, but, who knows.... 

[LTNGames]

Are you creating the fonts in the update function? I don't see why fonts would be that much of an impact unless you are constantly drawing them. If you are in update function you should try and make it so it only updates when a change occurred.

[drhayes]

Phaser clears the canvas between successive frames unless you've set clearBeforeRender, so you are always drawing the text. That's something to look at.

I'm trying to remember which kind of tinting incurs the performance penalty, webgl or canvas -- it's one of them. Try it without tinting and see if it helps. If it does, you'll could try pre-rendering the letters with the tints you want.

I'm not sure what you mean by regular text. Phaser.Text?

[WombatTurkey]

@Igor Georgiev Were you using bitmap texts? Or maybe Retrofonts? I have added hundreds of regular text objects without performance degradation. Although, the draw calls are a b-word.

 

[Igor Georgiev]

On 6/2/2016 at 8:19 PM, LTNGames said:

Are you creating the fonts in the update function? I don't see why fonts would be that much of an impact unless you are constantly drawing them. If you are in update function you should try and make it so it only updates when a change occurred.

of course they are not in the update.... seems like rendering them is very heavy. If I cache them as bitmap, it's okay, but I need them to move when scrolled. 

[Igor Georgiev]

On 6/3/2016 at 5:48 PM, drhayes said:

Phaser clears the canvas between successive frames unless you've set clearBeforeRender, so you are always drawing the text. That's something to look at.

I'm trying to remember which kind of tinting incurs the performance penalty, webgl or canvas -- it's one of them. Try it without tinting and see if it helps. If it does, you'll could try pre-rendering the letters with the tints you want.

I'm not sure what you mean by regular text. Phaser.Text?

clearBeforeRender is false, I am using canvas. Also, I lose 50 fps if I have a lot of bitmap text which is initialized as multiple objects.

[Igor Georgiev]

On 6/4/2016 at 7:35 AM, WombatTurkey said:

@Igor Georgiev Were you using bitmap texts? Or maybe Retrofonts? I have added hundreds of regular text objects without performance degradation. Although, the draw calls are a b-word.

 

it is a bitmap text, I thought that regular text is more expensive... Really weird. 

[Igor Georgiev]

//index.html
<script>

    window.onload = function() {


        //create new Phaser instance

        var game = new Phaser.Game(1280, 720, Phaser.CANVAS, 'game', null, false, true, null);
        game.autoResize = true;
        game.forceSingleUpdate = true;
        game.preserveDrawingBuffer = true;
        game.clearBeforeRender = false;
        game.lockRender = false;


        //add states to the game
        game.state.add('Boot', Game.Boot);
        game.state.add('Preloader', Game.Preloader);
        game.state.add('MainMenu', Game.MainMenu);
        game.state.add('GameMachine', Game.GameMachine);

        //start the boot state
        game.state.start('Boot');

    };
</script>

This is my init of the game. Note that when I detect mobile device, I switch off anti aliasing and still the performance is poor. I've read the performance guidance in the forum, but still...
My game has about 40 classes, I use a lot of prototyping, a lot of 'new' instances - could that be the reason? I am pretty sure that caching a tinted text that is not going to move in any way, would solve it, but when I want to use a lot of text and scroll it... I don't know what to do. On a PC, it is all fine, it runs perfectly, but I got a ton of RAM and CPU - mobile devices are the issue. Especially the older ones.