plugin SlickUI - UI Manager for Phaser games

[Zixalf]

If you've been looking for a UI manager for Phaser before, you'll know there aren't really a whole lot of good ones out there. That's why I started working on a component for building user interfaces in Phaser, called SlickUI. It's still in early development, but already capable of buiding user interfaces with panels, buttons, text and generic display objects (like sprites).

On the todo list is adding text fields, checkboxes and radio buttons.

Website

Github page

Would be cool to see your opinions!

[stupot]

Hi, I always keep an eye out for new UI, so a good start.

 

From a users perspective, they would probably expect to be able to access the slickUI component properties directly, eg

        panel.visible = true;

    instead of

        panel.container.displayGroup.visible = true;

such that they wouldn't have to use the correct property chain of 'container.displayGroup' or 'sprite'.

 

Mixing in an objects properties into your base object, just to make them easier to access could cause problems, so you could provide a single shortcut property, such as

        panel.self.visible = true;

        menuButton.self.inputEnabled = true;

 

[Zixalf]

@stupot Good point. I'll keep that in mind for future releases. Would probably be best to implement some kind of setter logic. Though if it gets too heavy, I'll have to pass on adding too many shortcuts.

[Zixalf]

Just added the get/set shortcuts mentioned before. Probably not going to add more of these to existing components unless it's absolutely necessary. Pushed the latest patch to version 0.1.2. Setters such as element.x, *.y, *.alpha, *.visible etc. have been linked to the descending component's properties.

[DavidL]

If I have multiple buttons in a panel, how do I distinguished which one was pressed?

var inventory = ['socks','pants','bible','dog food'];

        for (var item of inventory)
        {
            count++;
            panel.add(button[count] = new SlickUI.Element.Button(0,100+count*50, 140, 40));
            button[count].add(new SlickUI.Element.Text(0,0, item)).center();
            button[count].events.onInputUp.add(buttonFunction);
        }



        function buttonFunction ()
        {
            //How do I know which button was pressed?
            console.log(arguments);
        }

Can I pass something to buttonFunction or is there another way?

Thanks,
David.

 

EDIT: I should add that I have also tried this...

var inventory = ['socks','pants','bible','dog food'];

        for (var item of inventory)
        {
            count++;
            panel.add(button[count] = new SlickUI.Element.Button(0,100+count*50, 140, 40));
            button[count].add(new SlickUI.Element.Text(0,0, item)).center();
            button[count].events.onInputUp.add(function (){buttonFunction(count)});
        }



        function buttonFunction (buttonNum)
        {
            //How do I know which button was pressed?
            console.log(buttonNum);
        }

but whichever button is pressed, the value of buttonNum passed to buttonFunction is always 4 (or the number of buttons I have). It's as if the same callback function (and argument) is being attached to all buttons, so when the last button is added, it overwrites the callback function attached to the onInputUp event on all of the previous buttons too.

[Zixalf]

You can add an onInputUp event to a button and define a callback in there. So something like this would work:

    var attackButton = new SlickUI.Element.Button(0, 0, 140, 45);
    var panel = new SlickUI.Element.Panel(0, game.height - 96, 512, 96);

    slickUI.add(this.panel);
    panel.add(attackButton);
    panel.add(runButton);
    attackButton.add(new SlickUI.Element.Text(0,0, "Attack")).center();
    attackButton.events.onInputUp.add(function () {
        console.log('You clicked attack.');
    }, this);

 

But in your code, I see you're using a callback that calls buttonFunction and passes the count variable as an argument, which is a mutable variable. So in every iteration, the count variable changes, making the button do something else.

In your situation, you could create an array of callbacks indexed by their corresponding count keys and reference those:

var inventory = ['socks','pants','bible','dog food'];
var buttonFunctions = [
    function() {
        console.log('Some warm socks');
    },
    function() {
        console.log('Some cool pants');
    },
    function() {
        console.log('A holy Bible');
    },
    function() {
        console.log('Delicious dog food');
    }
];

for (var item in inventory)
{
    panel.add(button[item] = new SlickUI.Element.Button(0,100+item*50, 140, 40));
    button[item].add(new SlickUI.Element.Text(0,0, inventory[item])).center();
    button[item].events.onInputUp.add(buttonFunctions[item]);
}

 

I didn't test the code above, but it should give an indication on how to approach your problem.