Sign in to follow this  
DonFrag

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

Recommended Posts

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

world1tiles.png

 

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

 

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
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...
Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.