Problème lors d'une rotation

Le problème exposé dans ce sujet a été résolu.

Hello,

j'essaye de faire un petit clone de flappy bird histoire de voir ce que vaut Phaser.io comme framework et j'ai un petit souci lors du flap. Dans ma fonction update je change l'angle de mon oiseau comme ceci : 

1
@bird.angle += 2.5 if @bird.angle < 90

Et voici ma fonction flap : 

1
2
3
flap: ()->
    @bird.body.velocity.y = -400
    @game.add.tween(@bird).to({angle: -40}, 100).start()

Sauf que le résultat est pas celui que j'attend, voici à quoi ressemble l'animation de flap :

Image utilisateur

L'oiseau avance quand je flap et recule quand il tourne, j'imagine que c'est le point de pivot qui pose problème ou un truc comme ça ?

Voici le code complet si ça peut être utile : 

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
// Generated by CoffeeScript 1.10.0
(function() {
  var game, mainState;

  game = new Phaser.Game(288, 505, Phaser.AUTO, 'flappy-bird');

  mainState = {
    preload: function() {
      game.load.image('city', 'assets/images/city.png');
      game.stage.backgroundColor = '#4ec0ca';
      game.load.spritesheet('bird', 'assets/images/bird.png', 34, 24);
    },
    create: function() {
      var spaceKey;
      game.add.sprite(0, 505 - 109, 'city');
      game.physics.startSystem(Phaser.Physics.ARCADE);
      this.bird = this.game.add.sprite(83, 240, 'bird');
      this.bird.animations.add('fly', [0, 1, 2, 3], 10, true);
      this.bird.animations.play('fly');
      game.physics.arcade.enable(this.bird);
      this.bird.body.gravity.y = 1000;
      spaceKey = this.game.input.keyboard.addKey(Phaser.Keyboard.SPACEBAR);
      spaceKey.onDown.add(this.flap, this);
    },
    update: function() {
      if (this.bird.inWorld === false) {
        this.restartGame();
      }
      if (this.bird.angle < 90) {
        this.bird.angle += 2.5;
      }
    },
    restartGame: function() {
      game.state.start('main');
    },
    flap: function() {
      this.bird.body.velocity.y = -400;
      this.game.add.tween(this.bird).to({
        angle: -40
      }, 100).start();
    }
  };

  game.state.add('main', mainState);

  game.state.start('main');

}).call(this);

EDIT: Je viens de me rendre compte que j'ai probablement posté dans la mauvaise section, mais vu qu'il ne s'agit pas d'un site web je sais pas trop _

+0 -0

J'ai pas lu le détail du code ni du problème, mais :

Les transformations (style rotation) se font toujours à partir du coin supérieur gauche des blocs. Si tu veux changer ça, renseigne-toi sur la propriété CSS transform-origin.

luxera

Ne vois rien d'agressif mais si tu avais lu autre chose que le titre (genre la première ligne du thread) tu saurais que ça a rien à voir avec le css ^^

j'essaye de faire un petit clone de flappy bird histoire de voir ce que vaut Phaser.io comme framework

+0 -0
Connectez-vous pour pouvoir poster un message.
Connexion

Pas encore membre ?

Créez un compte en une minute pour profiter pleinement de toutes les fonctionnalités de Zeste de Savoir. Ici, tout est gratuit et sans publicité.
Créer un compte