Trouble getting started with rhythm game

[nightwalker]

Hey everyone. I'm fairly new to Phaser. I'm making a rhythm game (similar to Osu!), but I'm having a problem getting my sprites to spawn to the beat of the song and am not sure what I'm doing wrong.

Here is what I've attempted:

var renegade =
{
    //variables
    //bpm = beats per minute, bps = beats per second
    //spb = seconds per beat
    
    bpm : null,
    bps : null,
    startTime : null,
    songLength : null,
    currentTime : null,
    spb : null,
    lastBeatTime : null,
    blackHitElement : null,
    music : null,
    
    preload : function()
    {
        game.load.image("gangsta","assets/gangsta.png");
        game.load.image("black","assets/hit-element-black.png");
        
        game.load.audio("music", "assets/Renegade.mp3");
    },
    
    create : function()
    {
        bpm = 135;
        bps = 2.25;
        songLength = 243;
        currentTime = songLength;
        spb = 0.4;
        lastBeatTime = 0;
        
        game.add.sprite(0,0,"gangsta");
        //blackHitElement = game.add.sprite(400, 500, "black");
        
        //currentTime += dt;
        
        /**if(currentTime - lastBeatTime < spb)
      {
        if( 0.8 * spb < curentTime / bps < 1.2 * spb)
      {
          lastBeatTime = currentTime;
          blackHitElement = game.add.sprite(400, 500, "black");
      }
      }**/

        music = game.add.audio("music");
        music.play();
        
    },
    
    update : function()
    {
        currentTime += dt;
        
        if(currentTime - lastBeatTime < spb)
      {
        if( 0.8 * spb < curentTime / bps < 1.2 * spb)
      {
          lastBeatTime = currentTime;
          blackHitElement = game.add.sprite(400, 500, "black");
      }
      }
    },
};

var game = new Phaser.Game(850,850, Phaser.AUTO, "gameArea", renegade);

 

If anyone can point me in the right direction, I would greatly appreciate it!

[samme]

Probably you can do this with

game.time.events.loop(Phaser.Timer.MINUTE / BPM, callback, callbackContext);

 

[onlycape]

I agree with @samme

In this example you can see how it works:

https://phaser.io/examples/v2/time/basic-looped-event

On the other hand, if you are going to create many sprites, it may be more efficient to create a group of sprites in the create function and reuse them, like in this example:

https://phaser.io/examples/v2/groups/recycling

Surely it will be a transcription error, but in your code the variable "dt" is not assigned, and the rest of the variables of the create function should have the prefix "this", unless they are global variables. 

Good luck with your project!!

[nightwalker]

Thanks @samme and @onlycape ! I'll play around with the code for a bit and see what happens. I really appreciate your help!

[samme]

I'll try an example if I can figure out the BPM in the sample audio files.