Trying to get Animation to go to random frame

[Tixxi]

OK. So, I am making a game and there is a robot that comes into the scene, and each time he does, he has on a different outfit. There is a container (robotContainer) holding a body, outfit, glasses, and hair. I cannot seem to figure the way to tell the outfit, hair, and glasses to go to a random frame. I have tried setFrame() and setTexture() and both give me the error:

TypeError: e is undefined

or claims that outfits.setTexture is not a function.

Here is the code that I have used to set up the body. Later, the randomization will be happening from inside of a tween, but if I can't get it to work in the main create function, then it won't work from a tween either. As you look at the code, please realize that I am fairly new to this

So, I am hoping someone can tell me the tiny thing that I am missing to make it so I can reference the frames in these animations and then I can tell it to go to a random frame at the beginning of the robotContainer tween.

Thanks for any help you can give.

 robotContainer = this.add.container(960, 300);
 robotContainer.name = 'RC';
 
 robotBody = this.add.sprite(0, 0, 'bparts', 'robotBody.png');
 outfits = this.add.sprite(0, 45, 'bparts', 'overalls10001.png');
 robotEyewear = this.add.sprite(-10, -80, 'bparts', 'glasses1.png');
 robotHair = this.add.sprite(-10, -10, 'bparts', 'mustache1.png');
 robotGift = this.add.sprite(0, 0, 'bparts', 'gifts0001.png');

//add robot parts to container for control
 robotContainer.add(robotBody);
 robotContainer.add(outfits);
 robotContainer.add(robotEyewear);
 robotContainer.add(robotHair);
    
// set up the remaining frames of items    
 var robotOutfit = this.anims.create({ key: 'RO', frames: this.anims.generateFrameNames('bparts', { prefix: 'overalls1', start: 1, end: 5, zeroPad: 4, suffix: '.png'})});
 robotHair = this.anims.create({key: 'hairs', frames: this.anims.generateFrameNames('bparts', { prefix: 'mustache', start: 1, end: 8, suffix: '.png'})});
 robotEyewear = this.anims.create({key: 'glasses', frame: this.anims.generateFrameNames('bparts', {prefix: 'glasses', start: 1, end: 3, suffix: '.png'})});
 var moreClothes = this.anims.generateFrameNames('bparts', {prefix: 'jacket2', start: 1, end: 8, zeroPad: 4, suffix: '.png'});

  outfits = this.anims.get('RO'); //put robotOutfit frames in outfits
  outfits.addFrame(moreClothes); //also add moreClothes frames in outfits
  console.log(outfits.frames); //lists all 10 frames from robotOutfit and moreClothes
  outfits.setFrame(4); //e is undefined

 

[iKest]

try use setCurrentFrame(animationFrame) 

[Tixxi]

Didn't work Got this error when I put in outfits.setCurrentFrame(4):

TypeError: outfits.setCurrentFrame is not a function

 

[iKest]

setFrame: function (component)
    {
        //  Work out which frame should be set next on the child, and set it
        if (component.forward)
        {
            this.nextFrame(component);
        }
        else
        {
            this.previousFrame(component);
        }
    },

component should be Phaser.GameObjects.Components.Animation

[Tixxi]

Unfortunately, I still can't get this to work. Maybe I will have to make a different game.

[Tixxi]

OK!! I figured out what I was doing wrong. Being new to Phaser 3, I did not understand how very simple it was to change the texture of an image! So, instead of making the items into animations that I wanted to show just one frame at a time, I simply changed the texture of an image. I realize that this may have been clear to more experienced Phaser 3 users, but I figured for other newbies like me, I would put up how I ended up doing it.

First, I set up some arrays holding all the names of the images.

var outfitList = ['overalls10001.png', 'overalls10002.png', 'overalls10003.png', 'overalls10004.png', 'overalls10005.png'];

Then I created a random number and assigned the image "outfits" to switch out the current graphic with the newly listed one using the setTexture function.

var randomOutfit = Math.floor(Math.random() * outfitList.length);

outfits.setTexture('bparts', outfitList[randomOutfit]);

I don't know if this was the 'correct' way to do this, but it was what I came up with. Originally, I was using the 'this.anims.generateFrameNames' because I have many of these items that will be randomized and thought it was an easier way to pull out their names without having to make some lengthy arrays. But, this way, while taking more typing, is clean and easy.

So, thanks for everyone's help. The problem has been solved! Apparently, using the right tool for the job makes things better!