Jump to content

New dev need help

Samuel Imbert

Recommended Posts

Hello everybody,


I'm new at coding with phaser.io.

I'm trying it on this first artistic project :

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

Could you help me?

My code looks like this:

  var game = new Phaser.Game(
          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 () {
      var canvas_height = window_height - 220;
      var canvas_width = window_width * 80 / 100;
      cercle_rouge = game.add.sprite(game.world.centerX, canvas_height*20/100, 'cercle_rouge');
      cercle_rouge.anchor.setTo(0.5, 0.5);
      triangle_bleu = game.add.sprite(canvas_width*18/100, canvas_height*19/100, 'triangle_bleu');   
      triangle_bleu.anchor.setTo(0.5, 0.5);
      barre_rouge = game.add.sprite(canvas_width*10/100, canvas_height*38/100, 'barre_rouge');  
      barre_rouge.anchor.setTo(0, 0);

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

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

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

      barre_rouge.body.collideWorldBounds = true;
      //rectangle_jaune.body.velocity.setTo(-8, -8);
      //rectangle_jaune.body.collideWorldBounds = true;
      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;


Link to comment
Share on other sites

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;


Link to comment
Share on other sites


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...