Problem with global variable and plugin slick-ui

[Juls]

Hi everyone.
I'm creating a game with Phaser for a University project and I'm trying to use Flaxis'plugin slick-ui in my project (https://github.com/Flaxis/slick-ui).
I'm struggling since hours trying to get it to work.

I initialized the variable slickUI, containing the plugin SlickUI, like this (following the code of a preview posted by Flaxis).

In my script in index.html:

window.onload = function(){
var game = new Phaser.Game(960, 640, Phaser.CANVAS,'', { preload: preload});
//adding slickUI plugin
var slickUI;
function preload()
{
   slickUI = game.plugins.add(Phaser.Plugin.SlickUI);
   slickUI.load('assets/kenney/kenney.json'); //directory where I put kenney.json
}
//...
}

As I run this code I get no error in the console log.
I thought that var slickUI, exactly as var game, was a global variable so I could be able to use it in any other .js file, but I guess I'm wrong.

I tried to use slickUI variable in a file called MainMenu.js file (which is a game state, that is called after Boot.js and Preloader.js), to create a panel to be visible.
My code is this:

Game.MainMenu = function(game) //crea uno stato di Game
{ };

//prototype
Game.MainMenu.prototype = {
  create:function(game){
      var panel;
      slickUI.add(panel = new SlickUI.Element.Panel(8, 8, 150, game.height - 16)); //these two lines I took from the example on github
  },
//...
}

But when I try to use the variable I instantiated in the index file, that is slickUI, I get the error on console log that variable "slickUI is not defined".
I tried to define and use that variable as "this.slickUI", "game.slickUI", "this.game.slickUI" but none of these worked.
I also tried to instantiate the plugin directly in the MainMenu.js, but it didn't work either.

So, my question is: how do I get to instantiate/call the global variable slickUI which contains the plugin, in order to be able to use it in every other .js file in the project?
Your help would be so appreciated. 

[samme]

You should move those declarations outside the `onload` function:

var game;
var slickUI;

window.onload = function() {
    game = new Phaser.Game(960, 640, Phaser.CANVAS, '', {
        preload: preload
    });

    function preload() {
        slickUI = game.plugins.add(Phaser.Plugin.SlickUI);
    }
}

Also: Phaser doesn't need to wait for the `onload` event, so if you don't need it, best to remove it.

[Juls]

I removed the onload event and have the code like this:

<script type="text/javascript">
            
            var game = new Phaser.Game(960, 640, Phaser.CANVAS,'', { preload: preload}); 

            var slickUI;
            function preload()
            {
                slickUI = game.plugins.add(Phaser.Plugin.SlickUI);
                slickUI.load('assets/kenney/kenney.json');
            }

Now when I try to execute 

2 hours ago, Juls said:

slickUI.add(panel = new SlickUI.Element.Panel(8, 8, 150, game.height - 16));

it doesn't tell anymore that "slickUI is not defined", but now it says that it "cannot read property 'add' of undefined".
What is this due to?

[samme]

OK, let's try it this way

In Boot.js (some parts omitted):

// […]

BasicGame.Boot.prototype = {
    // […]
    preload: function () {
        // […]
        slickUI.load('assets/kenney/kenney.json');
    },
    // […]
};

In index.html:

var game = new Phaser.Game(960, 640, Phaser.CANVAS);

var slickUI = game.plugins.add(Phaser.Plugin.SlickUI);

game.state.add('Boot', Boot);
game.state.add('Preloader', Preloader);
game.state.add('MainMenu', MainMenu);
game.state.add('Game', Game);

game.state.start('Boot');

 

[Juls]

8 hours ago, samme said:

var slickUI = game.plugins.add(Phaser.Plugin.SlickUI);

Thanks for your answers, samme.
As I try running this code outside of the preload function, exactly how you did in index.html the console gives me this error:
caught TypeError: Cannot read property 'add' of null
Seems like it doesn't recognize "game.plugins" when out of the preload function.. 

[samme]

In Boot.js:

// […]
BasicGame.Boot.prototype = {
    // […]
    preload: function () {
        // […]
        slickUI = game.plugins.add(Phaser.Plugin.SlickUI);
        slickUI.load('assets/kenney/kenney.json');
    },
    // […]
};

In index.html:

var slickUI;
var game = new Phaser.Game(960, 640, Phaser.CANVAS);

game.state.add('Boot', Game.Boot);
game.state.add('Preloader', Game.Preloader);
game.state.add('MainMenu', Game.MainMenu);
game.state.add('Game', Game.Game);

game.state.start('Boot');

 

[Juls]

Sorry for the late response.
I tried doing how you said, but in Boot.js I get this error:
Uncaught TypeError: Cannot set property 'game' of undefined
when writing this line:

On 23/9/2016 at 4:17 PM, samme said:

slickUI = game.plugins.add(Phaser.Plugin.SlickUI);

I don't know, it seems to me like I'm doing something wrong but I tried so many things..

[samme]

On 9/28/2016 at 0:13 AM, Juls said:

Uncaught TypeError: Cannot set property 'game' of undefined

Make sure you include slick-ui.js after phaser.js and before Boot.js.

[samme]

https://github.com/samme/phaser-basic-slick-ui-template

[Juls]

12 hours ago, samme said:

https://github.com/samme/phaser-basic-slick-ui-template

Oh my, I can't believe it's actually working now!
Thank you so much, samme! 

[lukas111]

Thanks this was really helpful!!