Search the Community

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