Search the Community

I'm trying to add a bubble-pop spritesheet animation to my game. I have added other sprites fine, and when I add the sprite for the bubble, everything is still good. However, when I go to add the animations, I get an error, "Cannot read property 'add' of undefined. How can I animate the bubble? var config = { type: Phaser.AUTO, width: 1366, height: 768, parent: "canvas", scene: { preload: preload, create: create} }; var game = new Phaser.Game(config); function preload () { this.load.image('freeplayBG', 'images/freeplay-BG.png'); this.load.image('shark', 'images/nice-shark.png'); this.load.spritesheet('bubblePop', 'images/bubble_pop_under_water_spritesheet.png', {frameWidth: 394, frameHeight: 511} ); } function create() { //Set background this.add.image(685, 384, 'freeplayBG'); //Set shark and make draggable var shark = this.add.sprite(200, 300, 'shark').setInteractive(); this.input.setDraggable(shark); this.input.dragDistanceThreshold = 16; this.input.on('drag', function (pointer, gameObject, dragX, dragY) { gameObject.x = dragX; gameObject.y = dragY; }); //create the bubble sprite var bubble = this.add.sprite(700, 300, 'bubblePop'); console.log(bubble); //Sprite {_events: Events, _eventsCount: 0, scene: Scene, type: "Sprite", parentContainer: null, …} console.log(bubble.animations); // undefined console.log(this) //Scene {sys: Systems, game: Game, anims: AnimationManager, cache: CacheManager, plugins: PluginManager, …} bubble.animations.add('pop'); //error happens here bubble.animations.play('pop', 10, false, true);