Question

我正在开发非常基本的动画， [气球升起，从顶部屏幕反弹几次并弹出] 我有2个单独的spritesheets，一个用于气球移动，另一个用于pop。我做了编码的前半部分，现在我想弄清楚如何调用另一个精灵来启动弹出这是代码，

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

我是一个非常初学者（昨天开始使用Phaser）你会帮助我吗？我试图从互联网上学习一些例子，但它非常先进，与它一起得到一些解释是绝对好的。谢谢！

Answer 1

Phaser实际上有一个很好的教程（他们通常会这样做）来切换spritesheet：http://phaser.io/examples/v2/animation/change-texture-on-click

我修改了您的代码，以演示如何将教程中的想法集成到您的代码中：

＆＃13;

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

＆＃13;

Phaser通常有很好的文档和示例，所以总是试着寻找它们！但是我理解有时候（特别是当你刚刚开始时）很难弄清楚如何将它应用到你的代码中

完成一个sprite并在phaser

1 个答案: