Jump to content

New dev need help


Samuel Imbert
 Share

Recommended Posts

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;
      }

 

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

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...
 Share

  • Recently Browsing   0 members

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