Jump to content

Correction of Protracker example


Recommended Posts



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

For example, this one won't work:



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:



#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);}
Link to comment
Share on other sites

  • 2 weeks later...
  • 2 months later...
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?

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...