Question

我正在学习移相器框架来创建游戏，并且想要使用我自己创建的带有动画的一组精灵制作开始菜单。理想情况下，当您在键盘上使用'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() {

}

}

这是我得到的最接近的，但是如果我尝试添加事件侦听器使其进入列表，它将不再重复。如果我将侦听器放在update函数中，则它会同时全部完成。老实说，我只是想朝着正确的方向发展，因为Google似乎没有任何帮助，而且我在这里找不到任何直接相关的东西。

Answer 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');
})

顺便说一句，您也可以先执行.stopOnFrame(0)然后执行.stop()之类的操作来立即停止动画，而不是setFrame(0)。

使用精灵创建开始菜单

1 个答案: