Jump to content

Problem with global variable and plugin slick-ui


Juls
 Share

Recommended Posts

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. 

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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?

Link to comment
Share on other sites

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');

 

Link to comment
Share on other sites

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.. :wacko:

Link to comment
Share on other sites

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');

 

Link to comment
Share on other sites

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..

Link to comment
Share on other sites

  • 1 year later...

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.

Guest
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.

Loading...
 Share

  • Recently Browsing   0 members

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