Jump to content

Mobile Text performance issue


MattBrooklyn
 Share

Recommended Posts

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.

 

 

 

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

  • 1 year later...

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 :D 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.... 

Link to comment
Share on other sites

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?

Link to comment
Share on other sites

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. 

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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. 

Link to comment
Share on other sites

//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.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...