Arcade Physics acting differently on different mobile devices

[arproudlock 0]

Hi All,

 

I've had a brief search of the forum and found some posts on mobile physics performance tweaks etc (and tried the suggestions), but haven't found a post regarding this specific issue.

I'm using the Intel XDK (replaced phaser.js with 2.5).

When testing through the emulator (and on 2 android devices) I find that gravity appears to act differently on some devices.  I'm just making a basic touch to jump side scroller.  The gravity seems extreme on some devices (HTC droid incredible, Lenovo K900, Motorola droid 2, motorola razr i, nook color and samsung galaxy s), i.e. when the player jumps he only manages to get about a tile high.  On all the other emulators in the xdk it seems to work as expected (kinematic equations suggest a jump height of about 5 tiles y and 2.5 tiles x), all the apple phones work fine including the 3gs, the nexus devices are fine, the lenovo idea pad is fine, the microsoft ones are fine, and the galaxy tab 2 is fine.

Frame rate seems to be about the same on all the emulators.  Setting a desired fps of 60, 45, 30 had no effect.  Using Phaser.Canvas made the game a bit quicker on the mobile device but the gravity was still playing up.

Wondering if anyone has any idea what could be causing it or what to do to fix?

I've attached the files to the post.

main.js:

var SideScroller = SideScroller || {};

var innerWidth = window.innerWidth;
var innerHeight = window.innerHeight;
var gameRatio = innerWidth/innerHeight;	

SideScroller.game = new Phaser.Game(Math.ceil(320*gameRatio), 320, Phaser.AUTO, '');

SideScroller.game.state.add('Boot', SideScroller.Boot);
SideScroller.game.state.add('Preload', SideScroller.Preload);
SideScroller.game.state.add('Game', SideScroller.Game);

SideScroller.game.state.start('Boot');

Boot.js:

var SideScroller = SideScroller || {};

SideScroller.Boot = function(){};

//setting game configuration and loading the assets for the loading screen
SideScroller.Boot.prototype = {
  preload: function() {
    //assets we'll use in the loading screen
    this.load.image('preloadbar', 'asset/images/preloader-bar.png');
  },
  create: function() {
    this.input.maxPointers = 1;
    //loading screen will have a white background
    this.game.stage.backgroundColor = '#487c9a';
    this.scale.forceOrientation(true, false);
    //scaling options
    this.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL;
    
    //have the game centered horizontally
    this.scale.pageAlignHorizontally = true;
    this.scale.pageAlignVertically = true;

    //screen size will be set automatically
//    this.scale.setScreenSize(true);
      
    // Apparently speeds things up...
    this.game.forceSingleUpdate = true;
    //physics system
    this.game.physics.startSystem(Phaser.Physics.ARCADE);
    this.game.desiredFps = 30;
    this.state.start('Preload');
  }
};

Game.js

var SideScroller = SideScroller || {};

SideScroller.Game = function(){};
    
SideScroller.Game.prototype = {
  preload: function() {
      this.game.time.advancedTiming = true;
    },
  create: function() {
    
    console.log(gameRatio); 
    this.map = this.game.add.tilemap('level1');
    //the first parameter is the tileset name as specified in Tiled, the second is the key to the asset
    this.map.addTilesetImage('tileset1', 'gameTiles');

    
    //create layers
    this.groundLayer = this.map.createLayer('Ground');

    

    //collision on blockedLayer
    this.map.setCollisionBetween(0, 300, true, 'Ground');

    //resizes the game world to match the layer dimensions
    this.groundLayer.resizeWorld();


    //create player
    this.player = this.game.add.sprite(10, 250, 'player', 1);
    this.player.anchor.setTo(1,0.5);
    

    //add animation:
    this.player.animations.add('right', [0, 1, 2, 3, 4], 20, true);

    //enable physics on the player
    this.game.physics.arcade.enableBody(this.player);

    //player gravity
    this.player.body.gravity.y = 4000;
    
    //the camera will follow the player in the world
    this.game.world.setBounds(0, 0, 3200, 320);
    this.game.camera.follow(this.player);


      
    

    //move player with cursor keys
    this.cursors = this.game.input.keyboard.createCursorKeys();

    //create tap listener:
    this.input.onTap.add(this.onTap, this);
      
  },
  

  update: function() {
        
    //collision
    this.game.physics.arcade.collide(this.player, this.groundLayer, this.playerHitGround, null, this);

    
    if(this.player.body.blocked.down){
        this.player.animations.play("right");
    //only respond to keys and keep the speed if the player is alive
    if(this.player.alive) {
      this.player.body.velocity.x = 200;  

      if(this.cursors.up.isDown) {
        this.playerJump();
      }
    }
      
      //restart the game if reaching the edge
      if(this.player.x >= this.game.world.width) {
        this.game.state.start('Game');
      }
    }

  },
  playerHitGround: function(player, groundLayer) {
    //if hits on the right side, die
    if(player.body.blocked.right) {

      //set to dead (this doesn't affect rendering)
      this.player.alive = false;

      //stop moving to the right
      this.player.body.velocity.x = 0;
      

      //change sprite image
      this.player.loadTexture('playerDead');

      //go to gameover after a few miliseconds
      this.game.time.events.add(50, this.gameOver, this);
    }
    
  },
    
//onTap function
    onTap: function(pointer)
    {
        if(!this.player.alive) 
        {
                      return;
        }
        this.playerJump();
    },
    
    
  gameOver: function() {
    this.game.state.start('Game');
  },
    
  playerJump: function() {
    if(this.player.body.blocked.down) {
      this.player.body.velocity.y -= 400;
      //this.player.body.acceleration.x = -50;
      this.player.animations.stop();
      this.player.frame = 5;
    }    
  },
    
  render: function()
    {
        this.game.debug.text(this.game.time.fps || '--', 20, 70, "#00ff00", "40px Courier");
        this.game.debug.bodyInfo(this.player, 40, 24);
    }
};

 

[VitaZheltyakov 32]

I can assume that the problem is associated with different screen sizes.
The relative sizes of the player are the same?

[arproudlock 0]

Doesn't seem to be the case.  InnerHeight on Samsung Galaxy Tab 2 (working as expected) is 556, innerWidth 1024.  On the nook color (not working) innerHeight is 560, innerWidth 1024.

[arproudlock 0]

Found the issue.  Had copied code from another project.  Had:

this.player.body.velocity.y -= 400;

in the jump function rather than:

this.player.body.velocity.y = -400;

Thanks for having a look @VitaZheltyakov