完成一個精靈，並開始另一個移相器

我在開發非常基本的動畫中間， [氣球上升，幾次從屏幕上方反彈並彈出] 我有2個獨立的spritesheets ，一個用於氣球移動，另一個用於彈出。我做編碼的前半部分，現在我想弄清楚如何調用另一個精靈從這裏開始，在彈出的是代碼，完成一個精靈，並開始另一個移相器

<!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>

我在這是一個非常初級（開始使用移相器昨天）你能幫助我嗎？我試圖從互聯網上看一些例子，但它是非常先進的，這將是非常好的一起得到一些解釋。謝謝！

來源

2016-09-26 Pikosan

移相器實際上有相當不錯的教程（他們通常做的），用於切換的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>

Phaser通常有很好的文檔和例子，所以總是試圖尋找它們！但我明白有時候（特別是當你剛開始時）很難弄清楚如何將它應用到你的代碼中

來源

2016-09-27 05:39:47 HaywardMorihara

非常感謝！欣賞評論，真的有幫助！ – Pikosan

完成一個精靈，並開始另一個移相器

回答

相關問題