Tixxi Posted September 13, 2018 Share Posted September 13, 2018 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 Link to comment Share on other sites More sharing options...
iKest Posted September 14, 2018 Share Posted September 14, 2018 try use setCurrentFrame(animationFrame) Link to comment Share on other sites More sharing options...
Tixxi Posted September 14, 2018 Author Share Posted September 14, 2018 Didn't work Got this error when I put in outfits.setCurrentFrame(4): TypeError: outfits.setCurrentFrame is not a function Link to comment Share on other sites More sharing options...
iKest Posted September 14, 2018 Share Posted September 14, 2018 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 Link to comment Share on other sites More sharing options...
Tixxi Posted September 14, 2018 Author Share Posted September 14, 2018 Unfortunately, I still can't get this to work. Maybe I will have to make a different game. Link to comment Share on other sites More sharing options...
Tixxi Posted September 15, 2018 Author Share Posted September 15, 2018 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! Link to comment Share on other sites More sharing options...
Recommended Posts