New dev need help

[Samuel Imbert]

Hello everybody,

 

I'm new at coding with phaser.io.

I'm trying it on this first artistic project : http://94.23.13.72/agitprog/

On my computer, the animation is not fluid, but i can't understand why...

Could you help me?

My code looks like this:

//PHASER
  var game = new Phaser.Game(
          parseInt($('#home-content-wrapper').css('width'))*80/100,
          parseInt($('#home-content-wrapper').css('height')),
          Phaser.AUTO, 'home-content-wrapper',
          { preload: preload, create: create, update: update, render: render });

  function preload () {

      game.load.image('cercle_rouge', 'images/cercle_rouge1.svg.png');
      game.load.image('triangle_bleu', 'images/triangle_bleu.svg.png');
      game.load.image('barre_rouge', 'images/barre_rouge.svg.png');
      game.load.image('carre_bleu', 'images/carre_bleu.svg.png');
      game.load.image('barre_jaune', 'images/barre_jaune.svg.png');
      game.load.image('rectangle_jaune', 'images/rectangle_jaune.svg.png');

  }

  rotate_triangle = false;
 
  function create () {
      
      game.physics.startSystem(Phaser.Physics.ARCADE);
      
      var canvas_height = window_height - 220;
      var canvas_width = window_width * 80 / 100;
      
      //CERCLE ROUGE
      cercle_rouge = game.add.sprite(game.world.centerX, canvas_height*20/100, 'cercle_rouge');
      cercle_rouge.anchor.setTo(0.5, 0.5);
      cercle_rouge.scale.setTo(0.45,0.45);
      
      //TRIANGLE BLEU
      triangle_bleu = game.add.sprite(canvas_width*18/100, canvas_height*19/100, 'triangle_bleu');   
      triangle_bleu.anchor.setTo(0.5, 0.5);
      triangle_bleu.scale.setTo(0.5,0.5);
      
      //BARRE ROUGE
      barre_rouge = game.add.sprite(canvas_width*10/100, canvas_height*38/100, 'barre_rouge');  
      barre_rouge.anchor.setTo(0, 0);
      barre_rouge.scale.setTo(0.5,0.5);

      
      //CARRE BLEU
      carre_bleu = game.add.sprite(canvas_width*21/100, canvas_height*60/100, 'carre_bleu');      
      carre_bleu.anchor.setTo(0, 0);
      carre_bleu.scale.setTo(0.5,0.5);
      

      
      //BARRE JAUNE
      barre_jaune = game.add.sprite(canvas_width*10/100, canvas_height*70/100, 'barre_jaune');   
      barre_jaune.anchor.setTo(0, 0);
      barre_jaune.scale.setTo(0.5,0.5);
      
      
      //RECTANGLE JAUNE
      
      rectangle_jaune = game.add.sprite(canvas_width*80/100, canvas_height*15/100, 'rectangle_jaune');
      rectangle_jaune.anchor.setTo(0, 0);
      rectangle_jaune.scale.setTo(0.5,0.5);
      

      game.physics.enable([rectangle_jaune, barre_jaune, carre_bleu, barre_rouge, cercle_rouge ], Phaser.Physics.ARCADE);
      
      cercle_rouge.body.collideWorldBounds = true;
      cercle_rouge.body.bounce.set(1);
      //cercle_rouge.body.gravity.set(0, 180);
      
      carre_bleu.body.collideWorldBounds = true;
      carre_bleu.body.bounce.set(1);

      barre_rouge.body.collideWorldBounds = true;
      barre_rouge.body.bounce.set(1);      
      //rectangle_jaune.body.velocity.setTo(-8, -8);
      //rectangle_jaune.body.collideWorldBounds = true;
      //rectangle_jaune.body.bounce.set(1);*/
      
      setTimeout(animate_canvas, 3000);
  }
 
  function update() {
        if (rotate_triangle) triangle_bleu.angle += 0.1;

        //  Note: Due to a bug in Chrome the following doesn't work atm:
        //  sprite.angle++;
        //  See: https://code.google.com/p/chromium/issues/detail?id=306851

    }
  function render() {

        //game.debug.spriteInfo(triangle_bleu, 32, 32);
        // game.debug.text('angularVelocity: ' + sprite.body.angularVelocity, 32, 200);
        // game.debug.text('angularAcceleration: ' + sprite.body.angularAcceleration, 32, 232);
        // game.debug.text('angularDrag: ' + sprite.body.angularDrag, 32, 264);
        // game.debug.text('deltaZ: ' + sprite.body.deltaZ(), 32, 296);

    }
 
    animate_canvas = function(){
          cercle_rouge.body.velocity.setTo(8, 8);
          barre_rouge.body.velocity.setTo(8, -8);
          carre_bleu.body.velocity.setTo(9, 0);
        rotate_triangle = true;
      }
    stop_canvas = function(){
          cercle_rouge.body.velocity.setTo(0, 0);
          barre_rouge.body.velocity.setTo(0, 0);
          carre_bleu.body.velocity.setTo(0, 0);
          rotate_triangle = false;
      }

 

[lumoludo]

I don't see any issues with the example in the link you shared. It looks like everything moves smoothly on my computer at least.
One change I would recommend to help with fluidity is in your update function. Instead of adding a fixed number to your rotation when update() is called, it is better to add a value multiplied by the amount of time elapsed since the last time update was called. This is because the update function is not guaranteed to happen at the same frequency every frame, and will happen at much different rates depending on the speed of the computer, lag, etc. The modified code would like something like this:
 

if (rotate_triangle) triangle_bleu.angle += 3.14 * game.time.elapsedMS / 1000; 

This code will have the triangle rotate 180 degrees per second, regardless of whether it is running on a fast or slow computer. Angle is measured in radians here.

Alternatively, you could just set the triangle's angularVelocity value in animate_canvas() and not manually change the value in the update. Setting the angularVelocity is pretty simple, and is measured in degrees per second:
 

triangle_bleu.angularVelocity = 30;

 

[Samuel Imbert]

Thanks!