fps drop after change sprite to json atlas

[khanhnv]

for better loading speed, i used texture packer to change multiple sprites to some json atlas. sometime, fps drop from 45-50 to 2-3, especially when use tween or when user other object as modal popup in states. The "sprites" version working fine with 45-50 fps. It happened on "canvas" render mode, the "opengl" render mode is fine with 25-30fps. But i need to use canvas mode for capture screenshot button (canvas2image), and it give better fps (45-50 when uses pure sprites). Does anyone have a solution for this, please help.

p/s: sorry for my bad english!

[Arcanorum]

It helps to give code examples of what you are doing, or a link to your game or your code repository, so someone can see what is going on. Using a texture atlas should only improve performance. If the FPS drop only happens some times, it might not be the texture atlas. I think there is a maximum image size that can be loaded for the texture the atlas uses, but I doubt what you have is that big.

[khanhnv]

sample.js is smaller part of my real stateRoom.js (delete some code to figure out what make fps drop)

- sample.js with showAccountInfo(); :   2-3 fps.

- sample.js without showAccountInfo(); : 45-50 fps.

- stateRoom.js without showAccountInfo(); : 2-3 fps.

- other state with showAccountInfo(); : 45-50 fps.

var StateRoom = {
    currentRoom: 1,
    
    create: function () {
        game.time.advancedTiming = true;

        var temp = game.add.text(0, 0, '', {font: '24px Avo small',fill: '#f9ef4a'});

        this.bkg = game.add.sprite(0, 0, 'bgFullSize', 0);
        showAccountInfo();

        var title = game.add.text(368, 56, 'ROOM', {font: '48px UTM AVO', fill: '#fbf825'});
        title.stroke = '#ffb914';
        title.strokeThickness = 3;
        title.anchor.set(0.5);
                
        var gameName = game.add.text(368, 110, Account.gameName, { font: "32.6px UTM AVO", fill: '#ff9600' });
        gameName.anchor.set(0.5);

        var line = game.add.sprite(574, 16, 'utils', 'img-screens-line.png');

        // Default tab
        var cRoomIndex = -1;
        if (g_currentRoom == undefined) {
            for (var i = 5; i >= 3; i--) {
                if (Account.cash > Rooms[i].min_cash) {
                    cRoomIndex = i - 3;
                    break;
                }
            }
            g_currentRoom = {type: -1};
        } else {
            
        }
        
        var tabRoom = game.add.sprite(792, 70, 'tabBtnRoom', 0);
        ScreenUtil.convertToButton2(tabRoom);
        tabRoom.type = 1;
        tabRoom.events.onInputUp.add(this.switchTab, this);
        if (tabRoom.type == cRoomIndex || tabRoom.type == g_currentRoom.type || (cRoomIndex == -1 && g_currentRoom.type == -1)) {
            this.currentTab = tabRoom;
            this.currentTab.frame++;
        }

        var tabRoom = game.add.sprite(1144, 70, 'tabBtnRoom', 2);
        ScreenUtil.convertToButton2(tabRoom);
        tabRoom.type = 2;
        tabRoom.events.onInputUp.add(this.switchTab, this);
        if (tabRoom.type == cRoomIndex || tabRoom.type == g_currentRoom.type) {
            this.currentTab = tabRoom;
            this.currentTab.frame++;
        }

        var tabRoom = game.add.sprite(1496, 70, 'tabBtnRoom', 4);
        ScreenUtil.convertToButton2(tabRoom);
        tabRoom.type = 3;
        tabRoom.events.onInputUp.add(this.switchTab, this);
        if (tabRoom.type == cRoomIndex || tabRoom.type == g_currentRoom.type) {
            this.currentTab = tabRoom;
            this.currentTab.frame++;
        }
        
        this.type0 = game.add.sprite(39, 0, 'tabBtns', 0);
        this.type0.active = true;
        if (!g_room_type) {
            this.type0.frame = 1;
            this.type0.active = false;
        }
        ScreenUtil.convertToButton(this.type0);
        this.type0.events.onInputUp.add(this.type0onClick, this);
        
        this.type1 = game.add.sprite(250, 0, 'tabBtns', 3);
        this.type1.active = false;
        if (!g_room_type) {
            this.type1.frame = 2;
            this.type1.active = true;
        }
        ScreenUtil.convertToButton(this.type1);
        this.type1.events.onInputUp.add(this.type1onClick, this);

        this.btnChoingay = game.add.sprite(0, 262, 'stateRoomPlus', 'btn-quick-play.png');
        this.btnChoingay.x -= this.btnChoingay.width;
        this.btnChoingay.inputEnabled = true;
        this.btnChoingay.input.useHandCursor = true;

        if (this.btnChoingay.x < 0) {
            var tween = game.add.tween(this.btnChoingay).to( { x: 120 }, 500, Phaser.Easing.Linear.None, true);        
            tween.onComplete.add(function () {
                if (g_currentState == 'StateRoom') {
                    var tween2 = game.add.tween(this.btnChoingay).to( { x: 40 }, 400, Phaser.Easing.Linear.None, true);
                    tween2.onComplete.add(function() {
                        if (g_currentState == 'StateRoom') {
                            if (this.btnChoingay != undefined) {
                                ScreenUtil.convertToButton(this.btnChoingay);
                            }
                        }
                    }, this);
                }
            }, this);
        }

        var bgChat = game.add.nineSlice(14, 424, 'bgNine3', 492, 480, game.make.group());
        //this.chatGroup = game.make.group();
        this.innerChat = game.add.sprite(32, 442, 'utils', 'bg-transparent.png');
        this.innerChat.height = 0;
        this.innerChat.setScaleMinMax(1, 1);
        var maskChat = game.add.graphics(0, 0);
        maskChat.beginFill(200, 100, 0 , 0);
        maskChat.drawRect(32, 442, 456, 424);
        maskChat.endFill();
        this.innerChat.mask = maskChat;

        var bgRooms = game.add.nineSlice(514, 234, 'bgNine1', 1396, 676, game.make.group());

        this.tableGroup = game.add.group();
        var roomPanel = game.add.sprite(0, 0, 'utils', 'bg-transparent.png');
        roomPanel.addChild(this.tableGroup);        
        
        this.roomPanelBkg = game.add.sprite(0, 0, 'utils', 'bg-transparent.png');

        this.roomPanelBkg.width = 2000;
        this.roomPanelBkg.height = this.tableGroup.height + 50;
        
        this.roomPanelBkg.addChild(roomPanel);
        roomPanel.setScaleMinMax(1, 1);
        
        var maskGraphics = game.add.graphics(0, 0);
        maskGraphics.beginFill(200, 100, 0 , 0);
        maskGraphics.drawRect(524, 264, 1376, 616); 
        maskGraphics.endFill();

        this.roomPanelBkg.mask = maskGraphics;
        
        var maskRoom = game.add.graphics(0, 0);
        maskRoom.beginFill(200, 100, 0 , 0);
        maskRoom.drawRect(0, 150, 480, 150); 
        maskRoom.endFill();
        this.type0.mask = maskRoom;
        this.type1.mask = maskRoom;

        var hideMask = game.add.graphics(0, 0);
        hideMask.beginFill(200, 0);
        hideMask.drawRect(0, -50, 480, 200);
        hideMask.inputEnabled = true;
        hideMask.endFill();
         
        var tween = game.add.tween(this.type0).to( { y: 222 }, 300, Phaser.Easing.Linear.None, true);        
        tween.onComplete.add(function () {
            game.add.tween(this.type0).to( { y: 171 }, 200, Phaser.Easing.Linear.None, true);
        }, this);

        game.time.events.add(300, function () {
            game.add.tween(this.type1).to( { y: 222 }, 300, Phaser.Easing.Linear.None, true).onComplete.add(function () {
                game.add.tween(this.type1).to( { y: 171 }, 200, Phaser.Easing.Linear.None, true);
            }, this);
        }, this);
        
        RankUtil.showRankButton();

        var bgScroll = game.add.sprite(486, 163, 'stateRoomPlus', 'bg-room-scroll-text.png');
        var innerScoll = game.add.sprite(542, 163, 'utils', 'bg-transparent.png');
        innerScoll.setScaleMinMax(1, 1);
        var maskScroll = game.add.graphics(550, 163);
        maskScroll.beginFill(200, 100);
        maskScroll.drawRect(14, 0, 1100, 63);
        maskScroll.endFill();
        innerScoll.mask = maskScroll;

        var txtAnnouConfig = {
            font: "24.98px UTM Avo",
            fill: "#ffffff"
        };
        this.scrollText = game.add.text(1130, 32, Account.boardText, txtAnnouConfig);
        this.scrollText.anchor.set(0, 0.5);
        innerScoll.addChild(this.scrollText);
    
        this.switchTab(this.currentTab, true);
        
        var chatInRoom = game.add.sprite(448, 802, 'stateRoomPlus', 'btn-quick-chat.png');
        ScreenUtil.convertToButton(chatInRoom);
    },

    update: function () {
        if (this.scrollText.x + this.scrollText.width > 0)
            this.scrollText.x -= 3;
        else
            this.scrollText.x = 1130;
    },

    switchTab: function (tab, ormitCheck = false) {
        if (ScreenUtil.isValidClick(tab) || ormitCheck) {
            this.currentTab.frame--;
            this.currentTab = tab;
            this.currentTab.frame++;
            g_currentRoom = this.currentTab;
        }
    },
   
    type1onClick: function (btn) {
        if (ScreenUtil.isValidClick(btn)) {
            if (!this.type1.active) {
                g_room_type = false;
                getWaitingRoomRequest(this.currentTab.type);
                
                this.type1.active = true;
                this.type0.active = false;
                
                this.type1.frame--;
                this.type0.frame++;
            }
        }
    },
    
    type0onClick: function (btn) {
        if (ScreenUtil.isValidClick(btn)) {
            if (!this.type0.active) {
                g_room_type = true;
                getWaitingRoomRequest(this.currentTab.type + 3);
                
                this.type1.active = false;
                this.type0.active = true;
                
                this.type1.frame++;
                this.type0.frame--;
            }
        }
    },

    render: function() {
        game.debug.text(game.time.fps, 2, 14, "#00ff00");
    }
}

function showAccountInfo () {
    game.add.sprite(1920, 1080, 'stateHomePlus', 'bg-footer.png').anchor.set(1);
    var avatar = game.add.sprite(7, 890, 'imgAvatars', Account.avatarId);
    avatar.scale.setTo(0.85);
    avatar.x += avatar.width/2;
    avatar.y += avatar.height/2;

    ScreenUtil.convertToButton2(avatar);
    avatar.events.onInputDown.add(profileOnClick, this);

    Account.avatarImg = avatar;
}

 

[Arcanorum]

Hold on, what dimensions are you using for the game? Judging by where you are placing sprites, your game is HUGE, which would certainly explain 2-3 FPS. Going beyond 800px x 600px is usually a stretch.

Check out this for clues to what is going on. http://www.html5gamedevs.com/topic/9588-texture-atlas-better-than-spritesheets-performancewise/

 

 

 

 

[samme]

https://developers.google.com/web/tools/chrome-devtools/rendering-tools/js-execution