2016-09-26 8 views
0

に別のものを開始し、私は非常に基本的なアニメーションの開発の途中で午前、 [バルーンはトップ画面から数回アップバウンス、立ち上がるとポップアップ表示]私は2つの別々のspritesheetsを得た 1つはバルーン移動用、もう1つはポップ用です。私は、コードの最初の半分を行なったし、今私は昨日フェイザーを使用して開始( 完了1つのスプライトとフェイザー

<!doctype html> 
<html> 
    <head> 
     <meta charset="UTF-8" /> 
     <title>hello phaser!</title> 
     <script src="./phaser-2.6.2/build/phaser.js"></script> 
    </head> 
    <body> 
    <script type="text/javascript"> 
     window.onload = function() 
     { 
      var game = new Phaser.Game(800, 600, Phaser.AUTO, '', 
         { preload: preload, create: create } 
      ); 

     function preload() 
     { 
      game.load.image('bg', 'assets/yellow-bg.png');//loads the bg image 
      game.load.atlas('BlueAtlas', 
          './assets/balloonBlue_atlas.png', 
          './assets/balloonBlue.json' 
      ); 

      game.load.atlas('PopAtlas', 
         './assets/popB_atlas.png', 
         './assets/popB.json' 
      ); 
     } 

     var balloon; 
     function create() 
     { 
      this.background = this.add.tileSprite(
        0,0, this.world.width, 
        this.world.height, 'bg' 
     );//loads bg 

     //gravity 
     game.physics.startSystem(Phaser.Physics.ARCADE); 

     //Set the world (global) gravity 
     game.physics.arcade.gravity.y = -100;//negative makes the balloon go up 

     //Sprite 2 is set to ignore the global gravity and use its own value 
     balloon = game.add.sprite(300, 550, 'BlueAtlas'); //x and y starting point 

     //Enable physics on those sprites 
     game.physics.enable(balloon, Phaser.Physics.ARCADE); 
     balloon.body.collideWorldBounds = true; 
     balloon.body.bounce.y = 0.5; 
     balloon.body.gravity.y = 50; 

     function render() 
     { 
      game.debug.text('no gravity', sprite4.x - 32, 64); 
     } 
     } 
    }; 
    </script> 
    </body> 
</html> 

が、私はこの中には非常に初心者です、コードはここ をポップアップを開始するために別のスプライトを呼び出す方法を把握しようとしています)親切に私を助けてくれますか? 私はインターネットからのいくつかの例に従おうとしましたが、それは非常に進歩しており、それと共にいくつかの説明を得ることは絶対に素晴らしいでしょう。 ありがとう!

答えて

0

フェイザーは、実際にspritesheetを切り替えるためにはかなり素敵なチュートリアルを(彼らは通常行う)があります:http://phaser.io/examples/v2/animation/change-texture-on-click私はあなたのコードの中にチュートリアルからアイデアを統合する方法を示すために、あなたのコードを変更

<!doctype html> 
 
<html> 
 
    <head> 
 
     <meta charset="UTF-8" /> 
 
     <title>hello phaser!</title> 
 
     <script src="./phaser-2.6.2/build/phaser.js"></script> 
 
    </head> 
 
    <body> 
 
    <script type="text/javascript"> 
 
     window.onload = function() 
 
     { 
 
      var game = new Phaser.Game(800, 600, Phaser.AUTO, '', 
 
         { preload: preload, create: create, update: update,render: render} 
 
         //you'll need to add an 'update' function which you'll see 
 
         //below, as well as add 'render' if you want that render function 
 
         //you had below get called 
 
      ); 
 

 
     function preload() 
 
     { 
 
      game.load.image('bg', 'assets/yellow-bg.png');//loads the bg image 
 
      game.load.atlas('BlueAtlas', 
 
          './assets/balloonBlue_atlas.png', 
 
          './assets/balloonBlue.json' 
 
      ); 
 

 
      game.load.atlas('PopAtlas', 
 
         './assets/popB_atlas.png', 
 
         './assets/popB.json' 
 
      ); 
 
     } 
 

 
     var balloon; 
 
     function create() 
 
     { 
 
      this.background = this.add.tileSprite(
 
        0,0, this.world.width, 
 
        this.world.height, 'bg' 
 
     );//loads bg 
 

 
     //gravity 
 
     game.physics.startSystem(Phaser.Physics.ARCADE); 
 

 
     //Set the world (global) gravity 
 
     game.physics.arcade.gravity.y = -100;//negative makes the balloon go up 
 

 
     //Sprite 2 is set to ignore the global gravity and use its own value 
 
     balloon = game.add.sprite(300, 550, 'BlueAtlas'); //x and y starting point 
 

 
     //Enable physics on those sprites 
 
     game.physics.enable(balloon, Phaser.Physics.ARCADE); 
 
     balloon.body.collideWorldBounds = true; 
 
     balloon.body.bounce.y = 0.5; 
 
     balloon.body.gravity.y = 50; 
 
     } 
 

 
     function update() { //the update function that gets called every loop of the game 
 
     if(balloon.body.position.y == 0) { //this will make the balloon pop once it hits 
 
      //the top of the screen, maybe not exactly when you want 
 
      changeSpritesheet();//call the function to change the spritesheet used for 
 
      //you balloon 
 
     } 
 
     } 
 

 
     function changeSpritesheet() { 
 
     balloon.loadTexture('PopAtlas',0);//Load in the other spritesheet, you can pass 
 
     //other parameters, see http://phaser.io/docs/2.3.0/Phaser.Component.LoadTexture. 
 
     //html#loadTexture 
 
     balloon.animations.add('pop'); //Give the animation a name, see 
 
     //http://phaser.io/docs/2.6.2/Phaser.AnimationManager.html#add 
 
     //for more parameters you can add 
 
     } 
 

 
     function render()//I noticed that this was inside your 'create' function, which 
 
     //I'm guessing you did not mean to do so I moved it out 
 
     { 
 
      //game.debug.text('no gravity', sprite4.x - 32, 64);//sprite4 isn't being used? 
 
     } 
 
    }; 
 
    </script> 
 
    </body> 
 
</html>

フェイザーは、一般的に彼らのために見てみてくださいので、常に素晴らしいドキュメントとサンプルを持っています!しかし、時には(たぶんあなたが始まったばかりの)時には、あなたのコードにそれをどのように適用するかを理解するのが難しいかもしれないことを理解しています。

+0

ありがとう!本当に助けて、コメントを感謝します! – Pikosan

関連する問題