Jump to content

Caching Generated Textures for Mobile Games


Ahmed Khalifa
 Share

Recommended Posts

Hello Everyone,

I am working on porting my game C-Square (https://amidos2006.itch.io/c-square) to mobile phone so the game use Phaser.Graphics to draw everything.

I know using Phaser.Graphics is not efficient so I decided to generate the texture at the beginning of the game to get the correct resolution based on the device and save it.

So I designed the following class:

class GameTextures{
    static overlayer:PIXI.Texture[];
    static logo:PIXI.Texture;
    static startButton:PIXI.Texture;
    static arrows:PIXI.Texture[];

    static generateLogo(g:Phaser.Graphics):void{
        g.beginFill(Global.COLORS[0], 1);
        g.drawRoundedRect(-Global.TILE_SIZE + Global.GAP_SIZE, -Global.TILE_SIZE + Global.GAP_SIZE, 
            Global.TILE_SIZE - 2 * Global.GAP_SIZE, Global.TILE_SIZE - 2 * Global.GAP_SIZE, 2 * Global.GAP_SIZE);
        g.drawRoundedRect(Global.GAP_SIZE, Global.GAP_SIZE, 
            Global.TILE_SIZE - 2 * Global.GAP_SIZE, Global.TILE_SIZE - 2 * Global.GAP_SIZE, 2 * Global.GAP_SIZE);
        g.endFill();
        g.beginFill(Global.COLORS[1], 1);
        g.drawRoundedRect(Global.GAP_SIZE, -Global.TILE_SIZE + Global.GAP_SIZE, 
            Global.TILE_SIZE - 2 * Global.GAP_SIZE, Global.TILE_SIZE - 2 * Global.GAP_SIZE, 2 * Global.GAP_SIZE);
        g.drawRoundedRect(-Global.TILE_SIZE + Global.GAP_SIZE, Global.GAP_SIZE, 
            Global.TILE_SIZE - 2 * Global.GAP_SIZE, Global.TILE_SIZE - 2 * Global.GAP_SIZE, 2 * Global.GAP_SIZE);
        g.endFill();

        GameTextures.logo = g.generateTexture();
        g.destroy();
    }

    private static generateStartButton(g:Phaser.Graphics):void{
        let percentage:number = 0.25;
        let shift:number = Global.GAP_SIZE;

        g.clear();
        g.lineStyle(Global.GAP_SIZE, Global.GREY, 1);
        g.drawRoundedRect(-Global.TILE_SIZE / 2 + Global.GAP_SIZE,
            -Global.TILE_SIZE / 2 + Global.GAP_SIZE, Global.TILE_SIZE - 2 * Global.GAP_SIZE,
            Global.TILE_SIZE - 2 * Global.GAP_SIZE, 2 * Global.GAP_SIZE);
        g.lineStyle(0);
        g.beginFill(Global.GREY);
        g.drawTriangle([new Phaser.Point(-Global.TILE_SIZE * percentage + shift, -Global.TILE_SIZE * percentage),
        new Phaser.Point(Global.TILE_SIZE * percentage + shift, 0),
        new Phaser.Point(-Global.TILE_SIZE * percentage + shift, Global.TILE_SIZE * percentage)], false);
        g.endFill();

        GameTextures.startButton = g.generateTexture();
        g.clear();
    }

    private static generateArrows(g:Phaser.Graphics):void{
        let percentage:number = 0.25;
        let shift:number = Global.GAP_SIZE;

        g.clear();
        g.lineStyle(Global.GAP_SIZE, Global.GREY, 1);
        g.drawTriangle([new Phaser.Point(-Global.TILE_SIZE * percentage + shift, -Global.TILE_SIZE * percentage), 
            new Phaser.Point(Global.TILE_SIZE * percentage + shift, 0), 
            new Phaser.Point(-Global.TILE_SIZE * percentage + shift, Global.TILE_SIZE * percentage)], false);

        GameTextures.arrows = [g.generateTexture()];
        g.clear();

        percentage = -0.25;
        shift = -Global.GAP_SIZE;
        g.clear();
        g.lineStyle(Global.GAP_SIZE, Global.GREY, 1);
        g.drawTriangle([new Phaser.Point(-Global.TILE_SIZE * percentage + shift, -Global.TILE_SIZE * percentage), 
            new Phaser.Point(Global.TILE_SIZE * percentage + shift, 0), 
            new Phaser.Point(-Global.TILE_SIZE * percentage + shift, Global.TILE_SIZE * percentage)], false);

        GameTextures.arrows.push(g.generateTexture());
        g.clear();
    }

    private static generateOverlayer(g:Phaser.Graphics):void{
        g.clear();
        g.beginFill(Global.COLORS[0], 1);
        g.drawRect(-Global.TILE_SIZE/2, Global.TILE_SIZE/2, Global.TILE_SIZE, Global.TILE_SIZE);
        g.endFill();
        GameTextures.overlayer = [g.generateTexture()];
        g.clear();

        g.clear();
        g.beginFill(Global.COLORS[1], 1);
        g.drawRect(-Global.TILE_SIZE/2, Global.TILE_SIZE/2, Global.TILE_SIZE, Global.TILE_SIZE);
        g.endFill();
        GameTextures.overlayer.push(g.generateTexture());
        g.clear();
    }

    static generateTextures(g:Phaser.Graphics):void{
        GameTextures.generateStartButton(g);
        GameTextures.generateArrows(g);
        GameTextures.generateOverlayer(g);

        g.destroy();
    }
}

Then During the game I load these texture in Phaser.Image object. I though since everything is texture it will be loaded on the GPU and rendered fast. But the game using this method or without have the same framerate which is around 10 frames/second (even on the main menu which doesn't have too much objects).

Any ideas how can I make it faster or caching the texture?

 

Thanks in advance

Link to comment
Share on other sites

I found out after some experiments that, Chrome installed on my tablet runs WebGL and phonegap doesn't want to do that on Android Lollipop on Nexus 10 or iOS 9 on iPad mini 1. I asked over PhoneGap forums and they say I should ask here instead :(

I tried to force Phaser render to be WEBGL and Phonegap doesn't work on these devices but on my new devices it work fine with WebGL as usual (even using AUTO).

I tried to use crosswalk to unify the webview used and Its the same.

here is the link to my Phonegap forums: https://forums.adobe.com/message/9191763#9191763

Any help?

Link to comment
Share on other sites

 Share

  • Recently Browsing   0 members

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