使用 sprite 创建开始菜单答案

【问题标题】：creating a start menu using sprites使用 sprite 创建开始菜单
【发布时间】：2019-11-08 16:58:26
【问题描述】：

我正在学习创建游戏的移相器框架，并想使用一组我自己创建的附有动画的精灵来制作开始菜单。理想情况下，当您在键盘上使用“wasd”或上下时，您将能够向下滚动菜单和相应的动画（示例为https://imgur.com/a/TVqJRh9）

基本上，我想移动从一帧开始的 5 个精灵，并在我上下滚动菜单时排队进行动画处理。

到目前为止，我已经尝试了几件事。我的主要想法是将所有精灵保存在一个数组中，并且每次有适当的按键按下时都添加到索引变量中，这样它就知道要为哪一个设置动画。

create() {  
this.anims.create({
  key: 'startanim',
  frames: [
    {key: 'start1'},
    {key: 'start2'},
    {key: 'start3'},
    {key: 'start4'},
    {key: 'start5'},
    {key: 'start6'},
    {key: 'start7'},
    {key: 'start8'},
    {key: 'start9'},
  ],
  frameRate: 24,
  repeat: 0,
})

this.startButton = this.add.sprite(500, 100, 'start1')
this.startButton2 = this.add.sprite(500, 200, 'start1')
this.startButton3 = this.add.sprite(500, 300, 'start1')
this.startButton4 = this.add.sprite(500, 400, 'start1')
this.startButton5 = this.add.sprite(500, 500, 'start1')


gameState.menuList = [this.startButton, this.startButton2, this.startButton3, this.startButton4, this.startButton5];
gameState.menuIndex = 0;

this.input.keyboard.on('keydown_S', () => {
  gameState.menuList[gameState.menuIndex].play('startanim')
  gameState.menuIndex++;
})

}

update() {

}

}

这是我得到的最接近的，但如果我尝试为其添加一个事件侦听器以使其上升到列表中，它将不会重复第二次。如果我将侦听器放在更新函数中，它会同时执行所有这些。老实说，我只是在寻找正确的方向，因为谷歌似乎没有任何帮助，我在这里找不到任何直接相关的内容。

【问题讨论】：

标签： phaser-framework

【解决方案1】：

我会说你在正确的轨道上，使用数组作为菜单项。如果我理解正确，您想使用键盘浏览菜单项，并且每次当前选定的菜单项都应该连续播放动画。

我认为您需要进行 2 处更改，首先使动画无限重复，然后在选择下一个菜单项时停止动画。所以是这样的：

this.anims.create({
  key: 'startanim',
  frames: [
    {key: 'start1'},
    {key: 'start2'},
    {key: 'start3'},
    {key: 'start4'},
    {key: 'start5'},
    {key: 'start6'},
    {key: 'start7'},
    {key: 'start8'},
    {key: 'start9'},
  ],
  frameRate: 24,
  repeat: -1     // <- once playing; infinitely repeat
})

在键盘处理程序中：

this.input.keyboard.on('keydown_S', () => {
  // stop animation on current menu item (stop at first frame)
  gameState.menuList[gameState.menuIndex].stopOnFrame(0);

  // go to next menu item
  gameState.menuIndex++;

  // when past last menu item, warp to first
  if (gameState.menuIndex > gameState.menuList.length-1) gameState.menuIndex = 0;

  // play animation on new menu item
  gameState.menuList[gameState.menuIndex].play('startanim');
})

顺便说一句，你也可以用.stop() 和setFrame(0) 代替.stopOnFrame(0) 或其他方式来立即停止动画。

【讨论】：