Huge performance problem in mobile (and webGl error in Chrome)

[DonFrag]

Helly everybody

i'm making a prototype for my game and i had to stop any advance because in cellphones (chrome and firefox for android ) i have a huge FPS slowdown. Even sometimes in my Galaxy s4 chrome throws a WebGl error but the games loads anyway.

 

here is the link

 

http://www.asdlab.cl/AbstractCat/

 

 

for this game im using arcade physics

and a tilemap using Tiled with a size of 44x40  with a tilesize of 32px

 

 using 3 layers and this image

 

my maingame

var globalVars= require('./GlobalVars.js');var GameManager= require('./GameManager.js');var player;var states={idle:0,moving:1,jumping:2,sticked:3,flying:4};var jumpTimer;module.exports={    preload:function(){        tileSize=new Phaser.Point(100,65);        game.stage.backgroundColor='#5990A7';       game.time.advancedTiming = true;        ///fonts        game.styles=[];        game.styles['hudText1']={ font: "32px Arial", fill: "#ff0044", align: "center" };        game.styles['kids1']={ font: "32px kids1", fill: "#ff0044", align: "center" };        game.styles['chalk']={ font: "32px chalk", fill: "#FFFFFF", align: "center" };    },    create:function(){        game.add.text(0,0, '', game.styles['kids1']);        game.physics.startSystem(Phaser.Physics.ARCADE);        game.physics.arcade.gravity.y = 250;        game.gm=new GameManager();        game.gm.LoadCollectables();         game.physics.arcade.setBoundsToWorld(true, true, true, true, false);    }    ,     update: function () {         game.gm.UpdateGM();           game.gm.Hud.fps.text='fps'+game.time.fps;     }};

and game manager called here

var globalVars=require("./GlobalVars.js");var Player= require('./Classes/Player.js'); var Wire= require('./Classes/Wire.js') var Cannon= require('./Classes/Cannon.js')var Door= require('./Classes/Door.js')var Key= require('./Classes/key.js')var Yarn= require('./Classes/Yarn.js')var Goal= require('./Classes/Goal.js')var Hud= require('./HUD.js')var Bell= require('./Classes/Bell.js')var GameManager=function(){    this.currentWorld=1;    this.currentLevel=1;    //map markers    this.playerstart=[];    this.yarnPosition=[];    this.itemsPosition=[];    this.trapsPosition=[];    this.goalMark=null;    // player groups and collectables    this.player=null;    this.yarns=[];    this.traps=null;    //set game objectives    this.missionComplete=false;         this.bells=0;     this.totalItems=0;    this.currentPercent=0;    this.Initialize();}GameManager.prototype={    Initialize:function(){        this.LoadMap();        //create Hud        this.Hud=new Hud();        this.Hud.DrawStart();        //load player        this.LoadPlayer();        this.LoadGoal();        game.add.tween(this.startPortal.scale).to({x:1,y:1},1000,Phaser.Easing.Exponential.In,true);        game.add.tween(this.startPortal).to({angle:360},5000,Phaser.Easing.Linear.None,true);        var playerTween=game.add.tween(this.player.scale).to({x:1,y:1},2000,Phaser.Easing.Exponential.In,true);        playerTween.onComplete.add(function(){            game.add.tween(this.startPortal.scale).to({x:0,y:0},1000,Phaser.Easing.Exponential.In,true);            this.player.DisableMove(false);        },this);    } ,    LoadMap:function(){        this.map = game.add.tilemap('level'+1+'-'+1);        this.map.addTilesetImage('world1tiles', 'world1tiles');        this.map.createLayer('mapLayer');        this.floorLayer = this.map.createLayer('floorLayer');        this.climbLayer = this.map.createLayer('climbLayer');        this.map.setCollisionBetween(1,100,true,this.climbLayer);        this.map.setCollisionBetween(1,100,true,this.floorLayer);        this.floorLayer.resizeWorld();        this.markers=this.map.objects.markers;        this.markers.forEach(function(item) {         	            switch(item.type)            {                            case 'playerStart': this.playerstart.push(item);break;                case  'yarn':this.itemsPosition.push(item);break;                case  'trap':this.trapsPosition.push(item);break;                case  'key':this.itemsPosition.push(item);break;                case  'door':this.trapsPosition.push(item);break;                case  'goal':this.goalMark=item;break;                case  'bell':this.itemsPosition.push(item);break;            }        },this);    },    LoadPlayer:function(){        this.player=new Player(this,this.playerstart[0]);        game.add.existing(this.player);        this.player.DisableMove(true);        this.player.scale.setTo(0);        game.camera.follow(this.player);         return this.player;    },    LoadGoal:function(){        this.goal=new Goal(this,this.goalMark);        this.startPortal=game.add.sprite(this.playerstart[0].x,this.playerstart[0].y,'goal');        this.startPortal.anchor.setTo(0.5);        this.startPortal.scale.setTo(0);    },    LoadTraps:function(){        this.traps=game.add.group();        this.trapsPosition.forEach(function(trap){             switch (trap.name)            {                case 'wire':                    var obj=new Wire(this,trap);                    this.traps.add(obj);                    break;                case 'cannon':                    var obj=new Cannon(this,trap);                   this.traps.add(obj);                    break;                case 'door':                    var obj=new Door(this,trap);                    this.traps.add(obj);                    break;            }        },this);    },    LoadCollectables:function()    {        this.collectables=game.add.group();        this.itemsPosition.forEach(function(collObj){         	            if(collObj.type=='key')            {               var coll=new Key(game,collObj,this);               this.collectables.add(coll);            }            if(collObj.type=='bell')            {                var coll=new Bell(game,collObj,this);                this.collectables.add(coll);            }            if(collObj.type=='yarn')            {            	                this.totalItems++;                var yarn=new Yarn(game,collObj,this);                 this.collectables.add(yarn);             }        },this);    },    ManageGoal:function(){    		if(!this.missionComplete)    			{    			    			for(i=0;i<this.player.yarnList.length;i++)    				{    				this.player.yarnList[i].stopFollow=true;     				    				}    			    			for(i=0;i<this.player.yarnList.length;i++)				{ 				game.physics.arcade.moveToObject(this.player.yarnList[i], this.goal, 100)								}    			this.missionComplete=true;            this.Hud.DrawStageClear();            this.player.DisableMove(true);            this.player.MoveToGoal(this.goal);    			}    },    RecollectItem:function(item)    {        this.currentPercent++;        var tween = game.add.tween(item.body).to( { x: this.goal.world.x,y:this.goal.world.y }, 1000, Phaser.Easing.Linear.None, true);        game.add.tween(item.body).to( {rotation:360 }, 2000, Phaser.Easing.Linear.None, true);        tween.onComplete.add(function(){            item.visible=false;        },this);        tween.start();        this.Hud.UpdateItemsHud();    },    UpdateGM:function(){       var shouldStick= game.physics.arcade.collide(this.player, this.climbLayer,function(body1,body2){             this.player.SetSticked(true,body1.body.blocked);        },null,this);                                              game.physics.arcade.collide(this.player, this.floorLayer);        game.physics.arcade.collide(this.collectables, this.floorLayer);        game.physics.arcade.collide(this.collectables, this.climbLayer);    }}module.exports=GameManager;

i dont know what else to do because this its becoming a big problem that could mean the project cancellation.

 

thank you very much

 

[MichaelD]

Is the FPS drop from the start or it comes slowly?

 

Have you tried setting the game to Canvas? or using Crosswalk webview for webgl?

 

https://crosswalk-project.org/

[DonFrag]

Is the FPS drop from the start or it comes slowly?

 

Have you tried setting the game to Canvas? or using Crosswalk webview for webgl?

 

https://crosswalk-project.org/

The FPS loss comes after (there is a slowdown at start for loading but not so much), specially when the balls starts to appear on screen.

i Tried canvas  and the fps gain in minimal.

 

i read  this thread http://www.html5gamedevs.com/topic/5130-arcade-physics-checking-bodytouchingdown-in-custom-sprite/  and maybe my case because every element (players balls) are extended from sprite class. and that accord to this thread plus tilemaps could be a bigger problem. 

I have no tried Crosswalk for the complexity of the installl but i will try.