flaxis/slick-ui

Lightweight Phaser UI plugin

slick-ui's Issues

Texture Atlas support

Hey, thanks for your work on this library.

I was wondering if you're planning on adding Texture Atlas support? From what I can tell there doesn't seem to be an option to use an Atlas.

Changing text color

Can't find anything in documentation about this, and as far as I can tell Element.Text has no color attribute. Am I missing something here?

How do you bring a panel to top

Hi, and sorry if I'm asking something stupid.
I built my panel ahead of time, and many other objects have been created later. I thought doing game.world.bringToTop(panel) or game.world.bringToTop(panel._sprite) would do the trick, but my panel is still behind everything else... Do you have any idea of what I'm doing wrong ?

thansk for reading

slick-ui.js

Please make slick-ui.js, not minified file, not many files.

Typescript definitions

Have you considered writing some Typescript definitions for SlickUI? I am currently using it in my Typescript project but i get a bunch of annoying errors and code completion doesn't work properly.

Upload to npm?

Hello,

A friend of mine wants to use this library for a small game we are making and currently has it downloaded into our repo. Me being a neat freak, wanted to integrate this library using npm and I found that this library isn't on npm.

So could it be possible to upload slick-ui to npm?

Thank you

last working version that works with Phaser CE is from August 22, 2016?

at this commit, i get this to work with Phaser CE v2.10.2 5a28594#diff-63f0e32da459bffac0edf8f1f427b5be

the issue is context is undefined:

Phaser.Plugin.SlickUI.prototype.getRenderer = function(name) {
    if (void 0 !== this.renderer[name]) return this.renderer[name];
    var theme = this.game.cache.getJSON("slick-ui-theme"), resolveObject = function(name) {
        var namespace = name.split("."), context = window;
        for (var i in namespace)  context = context[namespace[i]];        
        return context;
    };

where it tries to loop through all the namespace and tries to pull it from context[namespace[i]] but context is just a window - is that the expected?

cc @Flaxis

Slider fixed to camera

A fork attended me on the fact that sliders aren't fixed to camera by default, which they should be.

Phaser 3 support?

Sorry, this is not an issue, but a question.

I would like to know if this is compatible with Phaser 3, and if it is how do I load this with Phaser 3?

Thanks,

can't add "Panel"

Hi,

this is a piece of my code.

//== PRELOAD STATE
...
preload() {
        //== SlickUi
        slickUI = Game.plugins.add(Phaser.Plugin.SlickUI);
        slickUI.load(kenney.json');
    }
...

//**
   * MENU STATE
   *  the "Preload State" call the "Menu State" where i create the "Panel" element.  
   * "_G.SLICKUI" is a global variable
*/
...
create() {
        let panel;
        console.log(SlickUI.Element); // ==> 'Undefined'
        _G.SLICKUI.add(panel = SlickUI.Element.Panel(8, 8, 150, 16)); // ==> Cannot read property 'Panel' of undefined
}
...

I can't figure out how to solve it.
If call SlickUI.Element.Panel in the console it returns a function (so it should work), but return Undefined if called inside create() method

Text Inputs?

I've just recently found this project and I can already see it being super useful. A major thing that is currently missing from this is text input. The only way I know to accept text input on Phaser is to make a "hack" using the HTML element, but something that uses the canvas natively would be extremely helpful.

Uncaught TypeError at this.DisplayGroup

When trying to set this.displayGroup to game.add.group(), game is an undefined reference and throws a TypeError. I've included the log from Chrome on Windows 10 as I'm not sure where this issue is coming from.
192.168.1.103-1472522944776.txt

Uncaught TypeError: b is not a constructor
   Phaser v2.6.1 | Pixi.js | WebGL | WebAudio     http://phaser.io ♥♥♥
Tue, 30 Aug 2016 01:59:56 GMT, INFO: Preloading game assets
Tue, 30 Aug 2016 01:59:56 GMT, INFO: Loading Phaser plugins
Tue, 30 Aug 2016 01:59:56 GMT, INFO: Configuring Phaser plugins
Uncaught TypeError: Cannot read property 'group' of undefined
Failed to load resource: the server responded with a status of 404 (Not Found)

Resize and repositioning elements

Hi,

i'm developing a responsive application. How can i manage the responsiveness of the elements? I need to resize and repoisition them on resize.

Thanks

Vertical Slider (new Feature)

I love this plugin already, but for my purposes I needed a Vertical Slider. It is not really hard to do, and it is a really simple way of adding more features. My dirty way of doing it was:

1. copy SliderRenderer.js, Slider.js
2. alter the code to use y and height instead of x and width

I would love to have a vertical slider added for the next release, and I simply propose a new parameter when calling VSlider so that instead of doing
var slider = new SlickUI.Element.Slider(16,100, someSize, someValue);

You do
var slider = new SlickUI.Element.Slider(16,100, someSize, someValue, "vertical"); or
var slider = new SlickUI.Element.Slider(16,100, someSize, someValue, "horizontal");

All that is required is to change a couple of lines in Slider.js (this is very straightforward), and to add VSliderRenderer ( I had lots of trouble with that part so I just didn't display anything fancy with it for the vertical slider)

Update button/element text and/or destroy panel?

Hi there, thanks for this useful plugin. I'm trying to use it to dynamically generate multiple choice questions (see image). I either need to destroy the panel and create a new one each time a new question prompt occurs, or update the text on the buttons/elements.

I can't find anything in the documentation to destroy() or kill() panels once they have been created, nor any way to dynamically update button/element text.

Any help gratefully received.

Best,
Paul

how to hide/delete panels / elements?

Hey, sorry if this is a dumb question...

I'm not sure how to delete elements (say, hide/show additional menus). Is there a builtin way to do this, or should I directly show/hide the sprites associated with each element?

phaser object variable name

it appears if you don't spell the phaser object exactly as game and make it global, slick fails to create some components

ReferenceError: game is not defined
    at SlickUI.Element.Slider.init (slick-ui.min.js:1)
    at SlickUI.Container.Container.add (slick-ui.min.js:1)
    at SlickUI.Element.Panel.add (slick-ui.min.js:1)
    at Object.create (game.js:22)

line is this.displayGroup=game.add.group();

license?

Firstly, this is really nice work and thank you for making it open source regardless of your license choice.

I'm a bit wary of using something that doesn't include a license. Phaser is licensed under the very permissive MIT license --- which I would be happy to see here too, but the choice is yours of course.

Must have global "game" variable?

Hi,

I'm getting a reference error:
"slick-ui.min.js:1 Uncaught ReferenceError: game is not defined"

Do I need to have a global game variable? Why?
Thanks

Slider handle snaps to position onDragStop

It would be useful if the slider handles were able to have defined snap points along the slider lines.

Is this already possible somehow or would it require some changes to the underlying Slider element?

TextField listen keyboard

the textfield can listen the keyboard??

Keyboard not hiding when parent.visible = false

I've got a menu panel with multiple text fields in it and I'm closing the menu by setting the panel's visibility to false. Unfortunately if the keyboard is open when I close the panel, the keyboard stays open. It also lets you open multiple keyboards on top of each other.

I've tried a few things but I'm not sure where the reference to the keyboard is - destroying the panel also doesn't destroy the keyboard, and it doesn't seem accessible through the TextField object. Any ideas?

Borders as offset

Hi, i was using the plugin when i noticed that panels and probably all elements have a small offset.

After a while i noticed it was due to the border-x and border-y field on the kenney json.

Long story short, i had to modify the panel script by removing all the 'border-x' and 'border-y' calls.

Hope this helps someone :D

PD: The same could PROBABLY be done on all elements, haven't test it yet.

basic & minimum unit testing coverage

can we have some minimum unit testing code provided so that any broken change can be detected when a new change is introduced? is it possible to do so for game UI library?

multiple sliders on a page do not get move callback

I think there is a flaw in the move callback if there are multiple sliders in a panel. I changed all references in Element/Slider.js from sprite_handle to this.sprite_handle and it seems to have fixed the problem.

Also, I'm curious about why there are different color textures for the handle, when sprite.tint seems to work just fine. I just left all the sprite_handles as grey and then just tinted them whatever color I wanted.

Roll on/off a button

Can you add the ability to drag finger / mouse off and back on to a selected button in case user decides they don't want to click / cancel their action

Congrats on the Slick project. You had more time that me to get this thing out there! I look forward to using it.

dropdown elements

Hi,

will be useful to add dropdowns too? I mean like the <select> HTML tag.

I dont' think that a "multiline" <select> will be useful, because you can obtain the same result using checkboxes with a clickable label (as happens using the <label> HTML tag).

Thanks.

Scrollbar in containers

At some point, I'll want to make scrolling possible in containers, such as panels. This also needs to be implemented before work can be started on #4, because in the dropdown options, you'll want to have the ability of setting a max height.
Swiping for mobile users should be considered.