Correction of Protracker example

[jisseb]

Hello,

 

As you probably know, some examples from examples.phaser.io don't work at all.

For example, this one won't work:

http://examples.phaser.io/_site/view_full.html?d=audio&f=protracker.js&t=protracker

 

As i'm interested in using Protracker music with Phaser, i've corrected it.

 

Basically, there were three issues:

#1 : you have to use a more recent protracker library, than the one shipped in Phaser plugins which is outdated.

You can get the latest Protracker lib sources here:

https://github.com/jhalme/webaudio-mod-player

 

#2 : there was a problem with vumeters sprites. If their widths are set to zero, the whole display render loop is frozen. I don't know exactly what's going on behind the scene, but as soon as you put width to zero, don't expect something to be drawn again.

 

#3 : the method module.play() has to be called from a callback. You define the trigger function once and for all, and it will be called everytime you're loading a new module.

 

That said, here is what i've done:

(i've also factorized some operations, for readability purposes).

var game = new Phaser.Game(800, 600, Phaser.CANVAS, 'phaser_div', { preload: preload, create: create, update: update, render: render });var mods = [];var current = -1;var vumeter = [];var channels = [];var module;function preload() {  // removing the old pluging, using the new version instead.  //  game.load.script('protracker', '../plugins/ProTracker.js');  game.load.script('protracker', 'pt.js');  game.load.image('vu', 'assets/sprites/vu.png');  game.load.image('logo', 'assets/sprites/soundtracker.png');  game.load.image('bg', 'assets/skies/sky2.png');  game.load.image('vulkaiser', 'assets/pics/vulkaiser_red.png');  game.load.binary('shampoo', 'assets/audio/protracker/shampoo.mod', modLoaded, this);  game.load.binary('macrocosm', 'assets/audio/protracker/macrocosm.mod', modLoaded, this);  game.load.binary('impulse', 'assets/audio/protracker/act_of_impulse.mod', modLoaded, this);  game.load.binary('enigma', 'assets/audio/protracker/enigma.mod', modLoaded, this);  game.load.binary('elysium', 'assets/audio/protracker/elysium.mod', modLoaded, this);  game.load.binary('stardust', 'assets/audio/protracker/sd-ingame1.mod', modLoaded, this);  game.load.binary('globaltrash', 'assets/audio/protracker/global_trash_3_v2.mod', modLoaded, this);}function modLoaded(key, data) {  mods.push(key);  var buffer = new Uint8Array(data);  return buffer;}function load_next_module(){  current==mods.length-1?current=0:current++;  module.stop();  module.clearsong();  module.buffer = game.cache.getBinary(mods[current]);  module.parse();  // BUG if width==0  for (i=0; i<vumeter.length; i++) { vumeter[i].width=1; }}function create() {  game.add.sprite(0, 0, 'bg');  game.add.sprite(500, 32, 'logo');  game.add.sprite(580, 371, 'vulkaiser');  for (i=0, y=200; i<4; i++, y+=50) {    vumeter[i] = game.add.sprite(400, y, 'vu');  }  module = new Protracker();  //module.play() has to be called from a callback  module.onReady = function() {    module.play();  };  load_next_module();  game.input.onDown.add(load_next_module, this);}function update() {  //  module.sample = array of Objects containing informations about a played sample    for (i=0; i<vumeter.length; i++) {    var smp_index = module.channel[i].sample;    channels[i] = { sample_index:smp_index,                    sample_name:module.sample[smp_index].name };    var w = Math.round(module.vu[i] * 1200);    //you have to check that width is > 0 !    vumeter[i].width = w>0?w:1;  }}function render() {  for (i=0, y=32; i<vumeter.length; i++, y+=32) {    game.debug.text('Channel #' + i + ' : sample ' + channels[i].sample_index + '  ' + channels[i].sample_name, 16,y);    game.debug.text('vu' + i + ':' + module.vu[i], 16, 350+y);  }  game.debug.text('Position: ' + module.position, 16, 160);  game.debug.text('Pattern: ' + module.row, 16, 192);  game.debug.text('BPM: ' + module.bpm, 16, 224);  game.debug.text('Speed: ' + module.speed, 16, 256);  game.debug.text('Name: ' + module.title, 16, 288);  game.debug.text('Signature: ' + module.signature, 16, 320);}

[rich]

Thanks, have updated the examples.

[Bigchanguito]

Is it possible to make this work with .xm files? for example with songs from Milkytracker?

 

I've been reading in some topics, but still isn't clear for me, I can't make work the Protracker example either, and it's being difficult for me to find any information related to this issue.

 

In my case i would like to start with a very simple example of how to load and play a .xm file, if it's possible...

 

Anybody could help me with this please?