JavaScript 游戏可切换 Sprite

Question

关于如何制作可切换 Angular 色的任何想法我有一个 html 游戏，它已经完成，但我想实现一种切换主 Angular 的方法。

使用 Phaser 框架进行简单编码

upload function() {
    this.game.load.sprite ("bird" assets/bird.png);
    this.game.load.sprite ("bird2" assets/bird2.png);
    this.game.load.sprite ("bird3" assets/bird3.png);
},

create function() {
    this.game.add.sprite (0, 0 "bird" );
},

如果玩家选择可玩 Angular 色的切换 Angular 色按钮来切换到该 Angular 色，我希望能够通过选择按钮将我的可玩 Angular 色“bird”与“bird2”或“bird3”切换。我很确定这很简单，但我对编码还很陌生。

我想要一个按钮，按下它就可以切换 Angular 色

(按钮1)切换到bird2 “如果选择了按钮 1，则按钮 2 且当前的小鸟被禁用”-只有小鸟 2 可见

(按钮 2)切换到bird3 “如果选择了按钮 2，则按钮 1 且当前的小鸟被禁用”-只有 Bird3 可见

<小时/>

编辑这是我当前的代码和状态

var MainState = {

    //load the game assets before the game starts
    preload: function () {
        this.load.image('background', 'assets/spring2.png');
        this.load.spritesheet('bird', 'assets/bird.png',52 ,28, 7);
        this.load.spritesheet('bird2', 'assets/bird2.png',52 ,28, 7);
        this.load.spritesheet('bird3', 'assets/bird3.png',52 ,28, 7);
        this.load.image('pipe', 'assets/pipe4.png');
    },

    //executed after everything is loaded
    create: function () {
        this.background = game.add.tileSprite(0, game.height-736,game.width, 736, 'background');
        this.background.autoScroll(-20,0);

        /////Bird///////////////////////////////////////////////////
        this.bird = this.game.add.sprite(100, 200, 'bird');
        this.bird.animations.add('fly');
        this.bird.animations.play('fly', 50, true);
        game.physics.startSystem(Phaser.Physics.ARCADE);
        game.physics.arcade.enable(this.bird);
        this.bird.body.gravity.y = 1000;
        var spaceKey = game.input.keyboard.addKey(Phaser.Keyboard.SPACEBAR);
        this.bird.body.collideWorldBounds=true;
        this.bird.body.immovable= true;
        game.input.onDown.add(this.jump, this); //////touch screen jump
        spaceKey.onDown.add(this.jump, this);

        ///////////////////////////////////////////////////////Pipes
        this.pipes = game.add.group();

        //timer
        this.timer = game.time.events.loop(1600, this.addRowOfPipes, this);   /////////////timer for pipes

        ///Bird anchor
        this.bird.anchor.setTo(-0.2, 0.5)
    },

    // this is execated multiple times per second
    update: function () {
        if (this.bird.y < 0 || this.bird.y > 480)
        game.state.start("StateOver");

        ///Collision
        game.physics.arcade.overlap(
        this.bird, this.pipes, this.restartGame, null, this);



        ///Bird Angle
        if (this.bird.angle < 30)
        this.bird.angle += 1;

        ///////////////music stop w top+bottom collision
        if (this.bird.y < 0 || this.bird.y > 479)
            music.stop();

    }, 

    jump: function () {
        //this is for so the bird wount fly once dead
        if (this.bird.alive == false)
        return;

    // Add a vertical velocity to the bird
    this.bird.body.velocity.y = -350;

    // Jump Animation
    var animation = game.add.tween(this.bird);
    // Change the angle of the bird to -20° in 100 milliseconds
    animation.to({angle: -20}, 100);

    // And start the animation
    animation.start(); 

    game.add.tween(this.bird).to({angle: -20}, 100).start();
    },

    restartGame: function () {
    // Start the 'main' state, which restarts the game
    game.state.start(game.state.StateOver); /////////////////////changed from current #########
    ///Hit pipe Null
    game.physics.arcade.overlap(
    this.bird, this.pipes, this.hitPipe, null, this);
},

addRowOfPipes: function() {

    var hole = Math.floor(Math.random() * 5) + 1; ///Math.floor(Math.random() * 5) + 1; 

    for (var i = 0; i < 10 ; i++)                ///// (var i = 0; i < 8; i++)
       if (i != hole && i != hole + 1)          ///// if (i != hole && i != hole + 1)
            this.addOnePipe(440, i * 50 );   ///// 640 starting point of pipe 240 point of down ////this.addOnePipe(480, i * 60 + 10);
},



addOnePipe: function(x, y) {
    var pipe = game.add.sprite(x, y, 'pipe');

    this.pipes.add(pipe);

    game.physics.arcade.enable(pipe);

    pipe.body.velocity.x = -200;

    pipe.checkWorldBounds = true;

    pipe.outOfBoundsKill = true;

},


hitPipe: function() {
    // If the bird has already hit a pipe, do nothing
    // It means the bird is already falling off the screen


    if (this.bird.alive == false)
        return;
    else {
        game.state.start("StateOver");
    }
    // Set the alive property of the bird to false
    this.bird.alive = false;

    // Prevent new pipes from appearing
    game.time.events.remove(this.timer);

    // Go through all the pipes, and stop their movement
    this.pipes.forEach(function(p){
        p.body.velocity.x = 0;
    }, this);
}, 
};

字符.js

   var characters={    

   preload:function()
    {
        game.load.spritesheet('button', 'assets/button.png', 215, 53, 8);
        game.load.image("background", "assets/characterbackground.png");
        game.load.image("pajaro", "assets/storeicon.png");
        game.load.image("logo", "assets/extra/storef.png");
        this.load.spritesheet('bird', 'assets/bird.png',52 ,28, 7);
        this.load.spritesheet('bird2', 'assets/bird2.png',52 ,28, 7);
        this.load.spritesheet('bird3', 'assets/bird3.png',52 ,28, 7);
        game.load.spritesheet("button2", 'assets/button2.png', 100, 10, 10);
    },

    create:function()
    {   
      bird = game.add.image(140, 150, 'pajaro');
      logo = game.add.image (20, 350, 'logo');

        this.background = game.add.tileSprite(0, game.height-736,game.width, 736, 'background');
      this.background.autoScroll(-100,0);
        this.btnMainMenu=game.add.button(130,500,'button',this.mainMenu,this,4,5,4);

      this.btnbird=game.add.button(180,600,"button2",this.changebird2,this,0,1,0);
    },

    mainMenu:function()
    {
        game.state.start("stateTitle");
    },
    update:function()
    {       
    //  bird.x +=1;

    },    
    changebird2: function(){
    },

};

Answer 1

我可能建议只更改创建/添加 Sprite 时加载的纹理，而不是创建隐藏或显示的三个 Sprite 。

为此，您需要存储对可玩 Angular 色的引用，您可能已经拥有该引用。

// On the game itself, add a reference.
this.bird = null;

// In your preload, load the different images.
this.load.image('bird', 'assets/bird.png');
this.load.image('bird2', 'assets/bird2.png');
this.load.image('bird3', 'assets/bird3.png');

// When creating, default to one.
this.bird = this.game.add.sprite(0, 0, 'bird');

// In your function where they select a new skin, you can load in a different texture.
this.bird.loadTexture('bird3');

或者，您可以存储应该在游戏中使用的 key 。

// On the game itself, track which key to use.
this.birdSkin = 'bird';

// You'll still have to load your possible textures.
this.load.image('bird', 'assets/bird.png');
this.load.image('bird2', 'assets/bird2.png');
this.load.image('bird3', 'assets/bird3.png');

// Now when creating just use the variable.
this.bird.loadTexture(this.birdSkin);

Phaser init() 将允许传入 0 个或多个参数(请参阅 Phaser Tutorial: understanding Phaser states 的末尾)，您可以在其中填充 this.birdSkin.

我会查看您正在使用的状态来确定最适合您的状态。如果您有一种游戏状态和另一种选择使用图像/纹理的状态，那么第二个选项可能会更好。

Angular 色状态更新

根据您的评论以及我在代码中看到的内容，我创建了一个简短的示例，您可以对其进行调整以供使用。

有a JSFiddle available ，但代码也包含在下面。

var mainState = {
    preload: function() {
      // Load the three sprites that they can choose between.
      this.load.crossOrigin = 'anonymous';
      this.load.image('ball', 'https://raw.githubusercontent.com/photonstorm/phaser-examples/master/examples/assets/sprites/orb-blue.png');
      this.load.image('ball2', 'https://raw.githubusercontent.com/photonstorm/phaser-examples/master/examples/assets/sprites/orb-green.png');
      this.load.image('ball3', 'https://raw.githubusercontent.com/photonstorm/phaser-examples/master/examples/assets/sprites/orb-red.png');
    },

    create: function() {
      this.ball = this.game.add.sprite(this.game.world.centerX, this.game.world.centerY, this.game.global.skin);
      this.ball.anchor.setTo(0.5);
      // Let the ball be acted upon. This will allow the player to change the sprite used.
      this.ball.inputEnabled = true;
      this.ball.events.onInputDown.add(this.changeCharacter, this);
    },
    update: function() {
    },
    changeCharacter: function() {
      game.state.start('character');
    }
 };

var characterState = {
  preload: function() {
  },
  create: function() {
    // For this, add our three possible ball skins.
    this.ball1 = this.game.add.sprite(this.game.world.centerX, this.game.world.centerY / 2, 'ball');
    this.ball1.anchor.setTo(0.5);
    this.ball1.inputEnabled = true;

    this.ball2 = this.game.add.sprite(this.game.world.centerX, this.game.world.centerY, 'ball2');
    this.ball2.anchor.setTo(0.5);
    this.ball2.inputEnabled = true;

    this.ball3 = this.game.add.sprite(this.game.world.centerX, this.game.world.centerY * 1.5, 'ball3');
    this.ball3.anchor.setTo(0.5);
    this.ball3.inputEnabled = true;

    // Use the selected ball's sprite in our main game.
    this.ball1.events.onInputDown.add(this.selectBall, this);
    this.ball2.events.onInputDown.add(this.selectBall, this);
    this.ball3.events.onInputDown.add(this.selectBall, this);

  },
  update: function() {
  },
  selectBall: function(sprite, pointer) {
    // Grab the key of the sprite and save it to our global variable.
    this.game.global.skin = sprite.key;
    this.game.state.start('main');
  }
};

var game = new Phaser.Game(200, 200);
// Create a global object that we can add custom variables to.
game.global = {
  skin: 'ball'
};

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

game.state.start('main');

这实际上稍微简化了事情，因为它只使用了一个全局变量(我最近几个月一直在使用 TypeScript，所以可能有更好的方法来声明它)。