Sprite movement is not fluid feels choppy

[zerooo]

I'm currently looking into JavaScript frameworks for a simple cross platform 2d game and mainly concerned about mobile. While investigating PhaserJS I've noticed performance issues when moving sprites although it shows consistent 60 fps in the browser. The movement is not consistent, not fluid, feels choppy. Tested on Chrome (48), Firefox (44) and MS Edge most of the time it was choppy with occasional smoothness. My specs are: 4th generation i7, 16gb ram, GPU HD 8800m.

What's the issue here, can it be solved or JavaScript frameworks are not ready for mobile development and better to go native to achieve smooth 60 fps sprite movement?

Please see the demo here: http://gamemechanicexplorer.com/#bullets-1

The code from the example above:

 

// This example uses the Phaser 2.2.2 framework

// Copyright © 2014 John Watson
// Licensed under the terms of the MIT License

var GameState = function(game) {
};

// Load images and sounds
GameState.prototype.preload = function() {
    this.game.load.image('bullet', '/assets/gfx/bullet.png');
};

// Setup the example
GameState.prototype.create = function() {
    // Set stage background color
    this.game.stage.backgroundColor = 0x4488cc;

    // Define constants
    this.SHOT_DELAY = 100; // milliseconds (10 bullets/second)
    this.BULLET_SPEED = 500; // pixels/second
    this.NUMBER_OF_BULLETS = 1;

    // Create an object representing our gun
    this.gun = this.game.add.sprite(50, this.game.height/2, 'bullet');

    // Set the pivot point to the center of the gun
    this.gun.anchor.setTo(0.5, 0.5);

    // Create an object pool of bullets
    this.bulletPool = this.game.add.group();
    for(var i = 0; i < this.NUMBER_OF_BULLETS; i++) {
        // Create each bullet and add it to the group.
        var bullet = this.game.add.sprite(0, 0, 'bullet');
        this.bulletPool.add(bullet);

        // Set its pivot point to the center of the bullet
        bullet.anchor.setTo(0.5, 0.5);

        // Enable physics on the bullet
        this.game.physics.enable(bullet, Phaser.Physics.ARCADE);

        // Set its initial state to "dead".
        bullet.kill();
    }
};

GameState.prototype.shootBullet = function() {
    // Enforce a short delay between shots by recording
    // the time that each bullet is shot and testing if
    // the amount of time since the last shot is more than
    // the required delay.
    if (this.lastBulletShotAt === undefined) this.lastBulletShotAt = 0;
    if (this.game.time.now - this.lastBulletShotAt < this.SHOT_DELAY) return;
    this.lastBulletShotAt = this.game.time.now;

    // Get a dead bullet from the pool
    var bullet = this.bulletPool.getFirstDead();

    // If there aren't any bullets available then don't shoot
    if (bullet === null || bullet === undefined) return;

    // Revive the bullet
    // This makes the bullet "alive"
    bullet.revive();

    // Bullets should kill themselves when they leave the world.
    // Phaser takes care of this for me by setting this flag
    // but you can do it yourself by killing the bullet if
    // its x,y coordinates are outside of the world.
    bullet.checkWorldBounds = true;
    bullet.outOfBoundsKill = true;

    // Set the bullet position to the gun position.
    bullet.reset(this.gun.x, this.gun.y);

    // Shoot it
    bullet.body.velocity.x = this.BULLET_SPEED;
    bullet.body.velocity.y = 0;
};

// The update() method is called every frame
GameState.prototype.update = function() {
    // Shoot a bullet
    if (this.game.input.activePointer.isDown) {
        this.shootBullet();
    }
};

var game = new Phaser.Game(848, 450, Phaser.AUTO, 'game');
game.state.add('game', GameState, true);

 

 

[zerooo]

Can anyone reproduce or this issue is only on my end?

[WombatTurkey]

Add

Quote

this.game.forceSingleUpdate = true; 

 

In the create function.

This is a common, and I mean very common issue that fixes all this glitchy shit. I see it all the time. Hope this helps :). I've spent far too many hours in the beginning finding this bug. Very sad!

[zerooo]

On 2/5/2016 at 4:57 PM, WombatTurkey said:

Add

 

In the create function.

This is a common, and I mean very common issue that fixes all this glitchy shit. I see it all the time. Hope this helps :). I've spent far too many hours in the beginning finding this bug. Very sad!

Yeah, makes it a lot better, thanks man!