creating a start menu using sprites - phaser-framework

Question

I'm learning the phaser-framework to create a game, and want to make a start menu using a set of sprites I've created myself that have animations attached. Ideally, as you use 'wasd' or up and down on the keyboard, you would be able to scroll down the menu and the appropriate animation (https://imgur.com/a/TVqJRh9 for a sample)
Essentially I want to move through 5 sprites that start at one frame and are queued to animate as I scroll up and down the menu.
I've tried several things so far. My main idea was to hold all of the sprites in an array, and every time there is an appropriate key press add to an index variable so it knows which one to animate.
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() {
}
}
This is the closest I've gotten but if I try to add an event listener for it to go up the list it won't repeat a second time. If I put the listener in the update function it does them all at the same time . I'm honestly just looking for a push in the right direction as nothing in google seems to be helpful and I can't find anything directly related here.

Answer 1

I'd say you're on the right track, using array for the menu items. If I understand correctly you want to use the keyboard to go through the menu items, and each time the current selected menu item should play the animation continuously.
I think you need to make 2 changes, First make the animation repeat infinitely, and second stop the animation when selecting the next menu item. So something like this:
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
})
and in the keyboard handler:
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');
})
Btw instead of .stopOnFrame(0) you could also just do .stop() and then setFrame(0) or something, to stop the animation immediately.