How to play music inside my custom function?

Phaser 3
1

I am building a small arcade game, what I want to achieve is to create a custom function that plays my audio file sacredStoneGlow, however, it doesn’t work, I get a Cannot read properties of undefined (reading ‘play’), how to reference the audio file in my function? Here is my code:


let config = {
    type: Phaser.AUTO,
    width: 800,
    height: 500,
    physics: {
        default: 'arcade',
        arcade: {
            gravity: { y: 300 },
            debug: false
        }
    },
    scene: {
        preload: preload,
        create: create,
        update: update
    },
    scale: {
     mode: Phaser.Scale.FIT,
     parent: 'root',
     autoCenter: Phaser.Scale.CENTER_BOTH,
     width: 800,
     height: 600
 },
 };
 
 
 new Phaser.Game(config)

 function preload() {
 
 this.load.image('sky', require('../assets/backgrounds/sky.png'));
 this.load.image('jungle', require('../assets/backgrounds/jungle.png'));
 
 this.load.image('ground', require('../assets/tiles/ground-transp.png'))
 this.load.image('small-platform', require("../assets/tiles/small-platform-removebg-preview.png"))
 this.load.image('jungle-platform', require("../assets/tiles/jungle-platform.png"))
 this.load.image('large-platform', require("../assets/tiles/large-platform-removebg-preview.png"))
 this.load.image('tree', require("../assets/backgrounds/treetrunk.png"))
 this.load.image('plant', require("../assets/backgrounds/plant.png"))
 this.load.image('plant2', require("../assets/backgrounds/plants2.png"))
 this.load.image('rock', require("../assets/backgrounds/rock.png"))
 this.load.audio('sacredRockGlowing', require('../assets/sounds/SacredStoneGlow.mp3'));

 this.load.atlas('sacred', require('../assets/spritesheets/sacredRock.png'), require('../assets/spritesheets/sacredRock.json'))
 this.load.atlas('player', require('../assets/spritesheets/dilopodon.png'), require('../assets/spritesheets/dilopodon.json'))
 this.load.atlas('patcherEnemy', require('../assets/spritesheets/patcher.png'), require('../assets/spritesheets/patcher.json'))

 this.load.tilemapTiledJSON('Ground', require('../assets/maps/simple-tutorial.json'));
 
 }
 
 function create () {
 
 this.bg = this.add.image(-41, -41, 'sky');
 this.bg = this.add.image('jungle');
 this.add.image(67, 370, 'tree')
 this.add.image(167, 429, 'plant')
 this.add.image(700, 405, 'plant2')
 this.add.image(300, 440, 'rock')
 const map = this.make.tilemap({ key: 'Ground' })


 this.music =  this.sound.add('sacredRockGlowing', {
    volume: 0.2,
})

 
 // Creating tilesets

 const groundTileSet = map.addTilesetImage('Ground', 'ground')
 const platformTileset = map.addTilesetImage('small-platform', 'small-platform')
 const junglePlatformTileset = map.addTilesetImage('jungle-platform', 'jungle-platform')
 const largePlatformTileset = map.addTilesetImage('large-platform', 'large-platform')
 
 let groundLayer = map.createLayer('Ground', [groundTileSet, platformTileset, junglePlatformTileset, largePlatformTileset])
 groundLayer.setCollisionByExclusion([-1]);


 // Creating the health bar
const graphics = this.add.graphics()
graphics.fillStyle(0x808080)

graphics.fillStyle(0x808080)
graphics.fillStyle(0xa52a2a)
graphics.fillRoundedRect(10,10,200,20,5)



  // Creating the Patcher dinosaur enemy

  patcherEnemy = this.physics.add.sprite(700, 420, 'patcherEnemy')
  patcherEnemy.setBounce(0.2);
  patcherEnemy.setCollideWorldBounds(true)
  patcherEnemy.setSize(74, 47)

  // Creating the Sacred Stone

  sacredStone = this.physics.add.sprite(400, 280, 'sacred')
  sacredStone.setCollideWorldBounds(true)
 
  sacredStone.body.width = 60
  sacredStone.body.height = 230


 
 // Creating the Player
 
 player = this.physics.add.sprite(100, 420, 'player')
 player.setBounce(0.2);
 player.setCollideWorldBounds(true)

 player.setSize(42, 42)
 sacredStone.setSize(100, 100)


 //Physics
 this.physics.add.collider(groundLayer, player )
 this.physics.add.collider(groundLayer, sacredStone )
 this.physics.add.collider(groundLayer, patcherEnemy )
 // Debug graphics
// let graphics = this.add.graphics()
// groundLayer.renderDebug(graphics, {
//     tileColor: new Phaser.Display.Color(0, 0, 255, 50), // Non-colliding tiles
//     collidingTileColor: new Phaser.Display.Color(0, 255, 0, 100), // Colliding tiles
//     faceColor: new Phaser.Display.Color(255, 0, 0, 100) // Colliding face edges
// });

 
 let frameNames = this.textures.get('patcherEnemy').getFrameNames();
 console.log(frameNames)
 this.anims.create({
    key: 'walkRight',
    frames: [{
        key: 'player',
        frame: 'Walk_000.png'
    },
    {
        key: 'player',
        frame: 'Walk_001.png'
    },
    {
        key: 'player',
        frame: 'Walk_002.png'
    },
    {
        key: 'player',
        frame: 'Walk_003.png'
    },
    {
        key: 'player',
        frame: 'Walk_004.png'
    },
    {
        key: 'player',
        frame: 'Walk_005.png'
    },
    {
        key: 'player',
        frame: 'Walk_006.png'
    },
    {
        key: 'player',
        frame: 'Walk_007.png'
    },
    {
        key: 'player',
        frame: 'Walk_008.png'
    },
    {
        key: 'player',
        frame: 'Walk_009.png'
    },
],
frameRate: 8,
repeat: -1
 })

 this.anims.create({
    key: 'idle',
    frames: [{
        key: 'player',
        frame: 'Idle_000.png'
    },
    {
        key: 'player',
        frame: 'Idle_001.png'
    },
    {
        key: 'player',
        frame: 'Idle_002.png'
    },
    {
        key: 'player',
        frame: 'Idle_003.png'
    },
    {
        key: 'player',
        frame: 'Idle_004.png'
    },
    {
        key: 'player',
        frame: 'Idle_005.png'
    },
    {
        key: 'player',
        frame: 'Idle_006.png'
    },
    {
        key: 'player',
        frame: 'Idle_007.png'
    },
    {
        key: 'player',
        frame: 'Idle_008.png'
    },
    {
        key: 'player',
        frame: 'Idle_009.png'
    },
],
frameRate: 10,
repeat: -1
 })

 this.anims.create({
    key: 'walkLeft',
    frames: [{
        key: 'player',
        frame: 'ZLeftWalk_000.png'
    },
    {
        key: 'player',
        frame: 'ZLeftWalk_001.png'
    },
    {
        key: 'player',
        frame: 'ZLeftWalk_002.png'
    },
    {
        key: 'player',
        frame: 'ZLeftWalk_003.png'
    },
    {
        key: 'player',
        frame: 'ZLeftWalk_004.png'
    },
    {
        key: 'player',
        frame: 'ZLeftWalk_005.png'
    },
    {
        key: 'player',
        frame: 'ZLeftWalk_006.png'
    },
    {
        key: 'player',
        frame: 'ZLeftWalk_007.png'
    },
    {
        key: 'player',
        frame: 'ZLeftWalk_008.png'
    },
    {
        key: 'player',
        frame: 'ZLeftWalk_009.png'
    },
],
frameRate: 8,
repeat: -1
 })



 this.anims.create({
    key: 'runRight',
    frames: [{
        key: 'player',
        frame: 'Run_000.png'
    },
    {
        key: 'player',
        frame: 'Run_001.png'
    },
    {
        key: 'player',
        frame: 'Run_002.png'
    },
    {
        key: 'player',
        frame: 'Run_003.png'
    },
    {
        key: 'player',
        frame: 'Run_004.png'
    },
    {
        key: 'player',
        frame: 'Run_005.png'
    },
    {
        key: 'player',
        frame: 'Run_006.png'
    },
    {
        key: 'player',
        frame: 'Run_007.png'
    }
],
frameRate: 10,
repeat: -1
 })


 this.anims.create({
    key: 'runLeft',
    frames: [{
        key: 'player',
        frame: 'LeftRun_000.png'
    },
    {
        key: 'player',
        frame: 'LeftRun_001.png'
    },
    {
        key: 'player',
        frame: 'LeftRun_002.png'
    },
    {
        key: 'player',
        frame: 'LeftRun_003.png'
    },
    {
        key: 'player',
        frame: 'LeftRun_004.png'
    },
    {
        key: 'player',
        frame: 'LeftRun_005.png'
    },
    {
        key: 'player',
        frame: 'LeftRun_006.png'
    },
    {
        key: 'player',
        frame: 'LeftRun_007.png'
    }
],
frameRate: 10,
repeat: -1
 })

 this.anims.create({
    key: 'attack',
    frames: [{
        key: 'player',
        frame: 'Attack_000.png'
    },
    {
        key: 'player',
        frame: 'Attack_001.png'
    },
    {
        key: 'player',
        frame: 'Attack_002.png'
    },
    {
        key: 'player',
        frame: 'Attack_003.png'
    },
    {
        key: 'player',
        frame: 'Attack_004.png'
    },
    {
        key: 'player',
        frame: 'Attack_005.png'
    },
    {
        key: 'player',
        frame: 'Attack_006.png'
    },
    {
        key: 'player',
        frame: 'Attack_007.png'
    },
    {
        key: 'player',
        frame: 'Attack_008.png'
    },
    {
        key: 'player',
        frame: 'Attack_009.png'
    },
],
frameRate: 18,
repeat: -1
 })


 this.anims.create({
    key: 'glow',
    frames: [{
        key: 'sacred',
        frame: 'sacredRock_000.png'
    },
    {
        key: 'sacred',
        frame: 'sacredRock_001.png'
    },
],
frameRate: 1,
repeat: -1
 })


 this.anims.create({
    key: 'PatcherLeftIdle',
    frames: [
    {
        key: 'patcherEnemy',
        frame: "PatcherLeftIdle001.png"
    },
    {
        key: 'patcherEnemy',
        frame: 'PatcherLeftIdle002.png'
    },
    {
        key: 'patcherEnemy',
        frame: 'PatcherLeftIdle003.png'
    },
    {
        key: 'patcherEnemy',
        frame: 'PatcherLeftIdle004.png'
    },
    {
        key: 'patcherEnemy',
        frame: 'PatcherLeftIdle005.png'
    },
    {
        key: 'patcherEnemy',
        frame: 'PatcherLeftIdle006.png'
    },
    {
        key: 'patcherEnemy',
        frame: 'PatcherLeftIdle007.png'
    },
    {
        key: 'patcherEnemy',
        frame: 'PatcherLeftIdle008.png'
    },
    {
        key: 'patcherEnemy',
        frame: 'PatcherLeftIdle009.png'
    },
],
frameRate: 10,
repeat: -1
 })

 this.anims.create({
    key: 'PatcherLeftRun',
    frames: [
    {
        key: 'patcherEnemy',
        frame: "PatcherLeftRun001.png"
    },
    {
        key: 'patcherEnemy',
        frame: 'PatcherLeftRun002.png'
    },
    {
        key: 'patcherEnemy',
        frame: 'PatcherLeftRun003.png'
    },
    {
        key: 'patcherEnemy',
        frame: 'PatcherLeftRun004.png'
    },
    {
        key: 'patcherEnemy',
        frame: 'PatcherLeftRun005.png'
    },
    {
        key: 'patcherEnemy',
        frame: 'PatcherLeftRun006.png'
    },
    {
        key: 'patcherEnemy',
        frame: 'PatcherLeftRun007.png'
    },
],
frameRate: 10,
repeat: -1
 })


 cursors = this.input.keyboard.createCursorKeys()
 keys = this.input.keyboard.addKeys("W,A,S,D");
 console.log(keys)
 }



function handlePlayerControls() {
   
    if (cursors.shift.isDown && cursors.left.isDown) {
       player.setVelocityX(-360);
       player.anims.play('runLeft', true);
   }  else if (keys.S.isDown) {
       player.anims.play('attack', true);
   }  
   
      else if (cursors.left.isDown) {
       player.setVelocityX(-160);
       player.anims.play('walkLeft', true);
   }
   
   else  if (cursors.left.isDown) {
       player.setVelocityX(-160);
       player.anims.play('walkLeft', true);
   }
   
   else if (cursors.shift.isDown && cursors.right.isDown) {
       player.setVelocityX(360);
       player.anims.play('runRight', true)
   } 
   
    else if (cursors.right.isDown) {
       player.setVelocityX(200);
       player.anims.play('walkRight', true)
   } else {
       player.setVelocityX(0);
       player.anims.play('idle', true);
   } 
   if (cursors.up.isDown && player.body.blocked.down) {
       player.setVelocityY(-330);
   }
}


function startEnemy() {
    patcherEnemy.anims.play('PatcherLeftRun', true)
    patcherEnemy.setVelocityX(-260)
}

function handleSacredStoneGlow() {
    this.music.play()

}

 function update() {
    setInterval(function () {handleSacredStoneGlow()}, 30,000);

    startEnemy()
    handlePlayerControls()
    this.physics.collide(player, patcherEnemy)
    this.physics.collide(player, patcherEnemy)

}
2

I think you’ve lost the context, use arrow functions, or bind to avoid that.

1 Like
3

Don’t call that in update() — you’ll get unlimited intervals. And it’s best not to use setInterval() or setTimeout(). A looping timer event should work.

1 Like