создание меню «Пуск» с использованием спрайтов - PullRequest
Новая
       9

создание меню «Пуск» с использованием спрайтов

1 голос
/ 07 ноября 2019

Я изучаю фазер-фреймворк для создания игры и хочу создать меню «Пуск», используя набор спрайтов, которые я создал сам, с прикрепленными анимациями. В идеале, когда вы используете '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() {

}

}

Это самое близкое, что я получил, но если я попытаюсь добавить прослушиватель событий, чтобы он поднялся по списку, он не повторится во второй раз. Если я помещаю слушателя в функцию обновления, он делает их все одновременно. Я, честно говоря, просто ищу толчок в правильном направлении, так как в Google нет ничего полезного, и я не могу найти здесь ничего, что напрямую связано.

1 Ответ

1 голос
/ 08 ноября 2019

Я бы сказал, что вы на правильном пути, используя массив для пунктов меню. Если я правильно понимаю, вы хотите использовать клавиатуру для перемещения по пунктам меню, и каждый раз, когда текущий выбранный пункт меню должен воспроизводить анимацию непрерывно.

Я думаю, что вам нужно сделать 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) или что-то еще, чтобы немедленно остановить анимацию.

...