ezelia / ezgui Goto Github PK

View Code? Open in Web Editor NEW

440.0 440.0 98.0 3.34 MB

EZGUI - The missing GUI for Pixi.js and Phaser.io

Home Page: http://ezgui.ezelia.com

JavaScript 99.48% TypeScript 0.50% PLSQL 0.03%

ezgui's People

Contributors

Stargazers

Watchers

Forkers

alaa-eddine netgfx robertomalatesta peer2p ozgurtt zzambushzz greenishflow nguoianphu fela98 othreumaru zilongshanren budda schervenkov thecocce wiltonlazary fabianelsmer kajjjak fomonster bennyxqg qtagtech wenqingliu elinake auledoom1 roman-murashov gonzos978 timmensch nancyts igabhishek khellste usoban dangakun yanjm drumtj alamantusgamedev stephen-gose-game-studio pbmcube lambdafu alperencaliskan zhangyizhiyan onurhunce unrealomega guangminglion noahcoetsee cnsuhao pokleh letithappen happy-ferret pourfun poom10510 b5710546232 derrybryson simonmccallum chapelin lunarraid vugluskr86 paul-fedotov aysvelt dhilip89 shinyongmyung houcy cube3power sondro kkszysiu senhorlion gpsbird giulioprinaricotti vziatkov ariska138 evilpeanuts mattdonroth karayakar forkrp pmckanry linecode drizzleraine askdaddy jultrun sutao80216 trailblazer01010111 bjindal4 yasuoohno makingbrowsergames shalomfriss thanhcj taroyuyu kooshay xuanye avatarchik shahho stortof deepjyotideb shalevy1 sadist007 likun123687

ezgui's Issues

top or bottom gap issue in the List component..

How would I control the gap ? (see the attached photo)

Clicking effect is not showing on Blue buttons

I am using the built-in Kenney theme with the default blue buttons, but once I click the element, the bottom part is not "animated" properly, as shown in the examples. Is this a common bug or am I doing something wrong?

Rendering GUI on a layer for a HUD

Is it possible to render then EZGUI as a group layer on top of the game view port to provide controls around the edge of the screen?

Using something like game.add.group();

Layout width control?

What controls the width/height of a grid column/row? For example, I am setting a list to [3,2] but there is too much vertical spacing between the two rows. Is there a way I can custom define col and row size?

UglifyJs can break function names of default components

After gulp-uglify name of components was replace to i, j .. e.t.c ( name property of component constructor ). Default components was been missed and I can't create a Button for example... Possible need to pass a second argument with classname into EZGUI.registerComponents function...

Problem with setting Input text property from code

The Input text property can't be set like this:

EZGUI.components.myInput.text = "some text"

because after Input received focus it overrides the content of property text with whatever was previously in DOM input.

EZGUI doesn't work with phaser 2.4.4

The gui library doesn't work any longer with version 2.4.4 of phaser. Within the browser the following error is thrown:

Uncaught TypeError: Cannot read property 'resolution' of undefined
PIXI.CanvasRenderer @ phaser.js:20082
(anonymous function) @ EZGUI.js:652

With phaser 2.4.2 it works quite well. To reproduce it, replace content of phaser-2.4.2.js with phaser 2.4.4 release.

All I'm doing is including the ezgui library at header right after phaser and phaser compat:
< script src="vendor/phaser/phaser.js">< /script>
< script src="vendor/ezgui/phaser-compat-2.4.js">< /script>
< script src="vendor/ezgui/EZGUI.js">< /script>

Difference between Phaser 2.4.2 and 2.4.4 is that Pixi.CanvasRenderer awaits a phaser game object.

Phaser 2.5 breaks EZGUI

Issues I've seen so far:

The version check needs to be >= instead of indexOf(), or none of the 2.4 patches are activated. I had submitted a pull request to patch this, but then discovered the other problems and closed it pending more fixes.
The EZGUI.utils.isMasked() function searches all the way to the root of the tree for a worldTransform and never finds one for any event, ever.
Dragging doesn't respect screen scale. This is also true at least as far back as Phaser 2.4.8. EZGUI.utils.getRealPos() needs to use an inverse of the scale calculation found in isMasked(). I don't know if this is a new problem, but it's Yet Another Issue with Phaser.

Please at least let me know what a likely timeline is for fixes. It's fine if the answer is "when I get a chance," but if you can give a ballpark estimate then I'll be able to plan around it -- whether it's likely to be fixed next week or next year or somewhere in between.

Tab and focus in GUIs with inputs

Pressing tab or alt tabbing when a caret is in an input box often gets it stuck. You have to juggle focus to get back to an active caret and working box.

Scalable UI

How do I define a GUi that can scale to fill different screen sizes. Probably using percentages and maybe minimum / maximum sizes for some components in the UI ?

Example would be the App demo screen 2 with the item blocks in the List components could become a bigger area on a larger canvas size and leave other buttons the same sizes etc.

What I was looking for is something like the Amiga MagicUser Interface system did - where components weren't fixed to pixel positions.

"Elements are not placed directly to some fixed locations but are instead grouped in special containers which then dynamically control display and positioning" ...taken from http://www.sasg.com/mui/concepts.html

bug when user is too fast

Theres a bug that causes your content to disappear.

STR: In the 'My Awesome App' demo,
click on next, and then click on Back before the transition ends.
The screen goes blank.

also works when you click 'back' and then click 'next' before the transition ends.

That needs a bit of work methinks :)

The windows with different sizes corners drawn incorrectly.

As I understand it, the calculation of the height of the corners of the window comes on top of a couple of corners. If the height of the upper corners of the window and bottom different - there is a bug ...

How to left align labels?

First of all, thanks for the effort with the library, it really looks promising!

I'm trying to align labels vertically. Their text should be left aligned (i.e., the first letter of every label should have the same x coordinate).

However, the labels' text is currently centered. On the todo list of the repo's readme you list the text alignment, so I guess it's not possible to left align the text within a label.

Is there another way to have labels aligned vertically, so that the text is left aligned?

By the way, the documentation is (understandably) quite sparse. Can we help in any way improving it?

Images don't work with Labels?

If so this is fine, but I would then purport some sort of disambiguation between Labels and Layouts because currently as it is it seems it makes the most sense to just use the Layout component anywhere I would want a Label, in the chance I want to add an image to it.

Or perhaps I must be explicitly using bg: { ... } ?

multiple elements with same ID? Extra data?

Hi, will properties I define explicitly be maintained? For example:

{
id: 'hello-world',
component: 'Button',
data: "Mydatastr"
...
}

can I access EZGUI.components['hello-world'].data? Also, if I have the same menu that will create an element with a unique id, I may not know the id ahead of time. For example:

{
id: 'hello-world-'+id,
component: 'Button',
data: "Mydatastr"
...
}

so adding a handler becomes a bit hard, considering I either need to add the handler at run time, which it seems is not the best way if you're trying to be modular and allow a general "create menu" function to do all the repetitive work or know the id of the object the button pertains too (which in my case, defeats the purpose of clicking the button :) ). If i left the id as hello-world an just recreated the menu, will EZGUI.components['hello-world'] get overwritten by the new instance?

Unable to dynamically edit component's settings object

I am trying to dynamically edit the bg property from a EZGUI.components component, but have no luck yet.

I am unable to make the changes appear on screen. I can successfully access the component with:
EZGUI.components[id]. This allows me to e.g. change the position property, and this change appears directly on the screen. However, when I try to do the same from the bg property, nothing happens.

I have found a _settings object and a settings object, both hold the bg property, but changing them has no effect. The component holds no bg property on its own.

The initial background does successfully appear through the JSON file. It just seems static afterwards.

Am I overlooking something obvious, or is it not yet implemented?
Thanks!

Game made with using EZGUI

Hey could you feature this game for EZGUI examples?

http://touchofblood.com/

thanks!

closing windows and opening a new one

hi, i cant figure exactly which is the correct procedure to close a window clicking on a button inside that window and at the same time, open another window, with a different id of course.
right now i am trying this (TplObj is the window template object):

TplObj.id = 'enc_' + turn;
TplObj.children[0].text = 'You have found something!';
guiContainer = EZGUI.create(TplObj, 'kenney');
EZGUI.components.btnclose.on('click', function (event) {
  closeEncounter(E, 'close');
});

and my closeEncounter:

guiContainer.destroy();
delete guiContainer;
ActObj.id = 'act_' + turn;
ActObj.children[0].text = 'You tried to ' + action + ' with \n' + E.desc + '!';
actionContainer = EZGUI.create(ActObj, 'kenney');
EZGUI.components.btncloseaction.on('click', function (event) {
  closeAction();
});

this, in some way, does dissapear the window. but it doesnt "unbind" the click from the btnclose region. how should i do this?

thanks in advance.

Button does not receive interaction

Hi, I got a problem with the button. If I make a layout component and set the position is 'bottom', the buttons inside that layout component can not receive any interactions from mouse. Is there any way to fix this?

This happen with pixi 3.0.7

Is it possible to use shadow or transparent images for components ?

Hello, I was wondering if I can add shadow effect to components (e.g window), I tried using transparent images but when it renders it shows white background at the transparent part.

Dynamic images?

Is there a way to dynamically load images for button textures? The image property seems to be only trying to pull from PIXI's texture cache

Programmatically adding child components to a List seems to stack them in the corner

Based on your 'app' example I changed the population of the 'List' component child items from static to dynamic based on the result of a json array.

After some guess work it looks like the working way to add child items is:

EZGUI.components.thumbnails.addChild(thumbnail);

Where 'thumbnails' is the 'id' set on the 'list' component.

However, unlike when defining a load of child 'text' components which get laid out in rows and columns, my above code just seems to stack them in the top left corner of the 'list' component.

Once i've finished looping through my array of items should I call something to re-layout the EZGUI 'list' component ?

Line wrap?

Hi, is there text wrap? I would like to set the width to a static amount and any "overflow" be dropped to the next line.

Also, I hope the method and content of my issue opening is alright. Some of my questions are essentially answers that could be found in docs so I am of the opinion this will help someone write more docs and/or will help others who start using EZGUI and check github's issue tracking for it

Text input padding

The padding property doesn't appear to do anything for input components no matter what value i give it.

Can we use the padding property to tidy up the spacing inside the text input box ?

Error with Interaction/Draggability?

Hi, I have a feeling something about one of my more recent menus is affecting the previous ones. First off, here is the stack trace:

Uncaught TypeError: Cannot read property 'x' of undefined
getAbsPos   @   utils.ts:33
getAbsPos   @   utils.ts:35
getAbsPos   @   utils.ts:35
getAbsPos   @   utils.ts:35
getAbsPos   @   utils.ts:35
getAbsPos   @   utils.ts:35
getAbsPos   @   utils.ts:35
getAbsPos   @   utils.ts:35
GUIObject.mouseInObj    @   guiobject.ts:296
(anonymous function)    @   guisprite.ts:227
emit    @   pixi-dds.js:3760
_this.mousedown._this.touchstart    @   guiobject.ts:85
InteractionManager.dispatchEvent    @   pixi-dds.js:24257
InteractionManager.processMouseDown @   pixi-dds.js:24402
PIXI.interaction.InteractionManager.processInteractive  @   InteractionPatch.js:76
PIXI.interaction.InteractionManager.processInteractive  @   InteractionPatch.js:47
PIXI.interaction.InteractionManager.processInteractive  @   InteractionPatch.js:47
PIXI.interaction.InteractionManager.processInteractive  @   InteractionPatch.js:47
PIXI.interaction.InteractionManager.processInteractive  @   InteractionPatch.js:47
PIXI.interaction.InteractionManager.processInteractive  @   InteractionPatch.js:47
PIXI.interaction.InteractionManager.processInteractive  @   InteractionPatch.js:47
InteractionManager.onMouseDown  @   pixi-dds.js:24383

My first menu (the one where dragging on the list buttons) goes something like this:

    var playerBag = {
        id: 'playerBag',
        component: 'Window',
        header: { position: { x: 0, y: 0 }, height: 40, text: 'Inventory' },
        draggable: true,
        position: { x: 0, y: 0 },
        width: renderer.width * 0.16,
        height: renderer.height * 0.45,
        layout: [1, 3],
        children: [
            {
                id: 'playerBagList',
                component: 'List',
                position: {x: 0, y: 30},
                width: renderer.width * 0.16,
                height: (renderer.height * 0.45) - 40,
                position: {x: 0, y: 40 },
                children: [],
                layout: [3,3]
            }
        ]
    }

    //Iterate through all Items and Materials
    for(var i in p.livesin){
        if(Progera.prototype.scanPredecessors(['item','material'],p.livesin[i])){
            playerBag.children[0].children.push({
                id: i,
                component: 'Button',
                position: 'center',
                draggable: true,
                text: typeof p.livesin[i].opts.val == "undefined" ? i : i + ': x'+p.livesin[i].opts.val,
                width: renderer.width * 0.05,
                height: 50
            });     

        }
    }
    var t = EZGUI.create(playerBag, 'metalworks');

The Menu that seems to be the offending problem:

    var playerBag = {
        id: 'playerBuildables',
        component: 'Window',
        header: { position: { x: 0, y: 0 }, height: 40, text: 'Buildables' },
        draggable: true,
        position: { x: renderer.width - (renderer.width * 0.26), y: renderer.height - (renderer.height * 0.2) },
        width: renderer.width * 0.26,
        height: renderer.height * 0.15,
        layout: [1, 1],
        children: [
            {
                id: 'playerBuildablesList',
                component: 'List',
                position: {x: 0, y: 0},
                width: renderer.width * 0.26,
                height: (renderer.height * 0.15) - 40,
                position: {x: 0, y: 40 },
                children: [],
                layout: [4,1]
            }
        ]
    }

    //Iterate through all Items and Materials
    for(var i in p.livesin){
        if(Progera.prototype.scanPredecessors(['structure'],p.livesin[i])){
            playerBag.children[0].children.push({
                id: i,
                component: 'Button',
                position: 'center',
                draggable: true,
                text: typeof p.livesin[i].opts.val == "undefined" ? p.livesin[i].scan.id : i + ': x'+p.livesin[i].opts.val,
                width: renderer.width * 0.05,
                height: 50
            });     

        }
    }

    var t = EZGUI.create(playerBag, 'metalworks');

I use the same way of adding handlers post-facto:

    for(var c in EZGUI.components.playerBuildablesList.children[2].children){

        if(!(EZGUI.components.playerBuildablesList.children[2].children[c] instanceof EZGUI.Component.Button))
            continue;

        var id = EZGUI.components.playerBuildablesList.children[2].children[c].guiID;

        console.log("Handler on "+id);
        EZGUI.components[id].on('mouseup',function(data){
            data.stopPropagation();
            console.log(data);
            var $that = this;

            console.log("Set "+$that.guiID+" as buildable");
            craftItem({item: $that.guiID, phase: "start"})
        }); 
    }

Although obviously, the components getting iterated is specific to the menu. Now, perhaps @ivanpopelyshev can shed some light as to why InteractionPatch is throwing these errors. I'm not sure if he is involved with the development of this library or not. When I don't run the code for the second menu, everything works as expected. I am going to look into this myself as well but figured I'd put this here for anyone else to take a look at also.

Tabs do not work with Phaser 2.4/2.3

Hey guys,
When you take the Phaser Example index.html and replace the guiObj with the one from the Tabs Example, you end up getting an error. The error appears both with Phaser 2.4 and Phaser 2.3.

Tabs.ts #94
"Uncaught TypeError: this.tabsBar.container.children[order].setState is not a function"

It all seems to come down to guiobjects.ts #251 where this happens

if (child.phaserGroup) return this.container.addChild(child.phaserGroup);
                else return this.container.addChild(child);

So for the Tabs actual Phaser Sprites are used, instead of the Components.

Removing this line to always use the actual child prevents the error, but leaves the tabs unclickable.

Using

child.guiSprite.setState

works a little bit better, it seems to attempt to switch tabs, but the new content is not actually shown and the tab does not stay selected.

Interactive error when resize canvas

Hi, i am using pixi and EZGUI to create an online game. And i have some problems with components in a List component or Slider components when i resize canvas fit to browser size. When in small size, i can't drag the slider, and can't click exactly to another button in the list beside the first one.
I using this codes for resize canvas

You can check this issus in my page : http://t5.tofu.vn
Thank for your help and sorry for my bad english

How to swallow event of button?

I used game.input to get user input in phaser,but click event of ezgui will propagate to phaser input,how can I swallow button click event,I don't want phaser get my click event on button.Thank you.

is this work with electron ?

i try to use EZGUI in my phaser on electron, all game state is fine, but when i try to using EZGUI, in a console log is loaded EZGUI , no error but it's seem callback in load theme is not working, how to make it work ?

regards.

Why are objects like buttons not a slice9?

Im seeing the buttons have 9 seperate images. But why not have 1 image, and 4 offsets ? (2 vertical slices and 2 horizontal slices)
This should allow but much easyer editing of the one button image, while decreasing the amount of data you need to specify in the theme file.

Multi-line text in label

I'm trying to enable word wrap in a label. There's no example for it as far as I can tell. However, there are a couple of keywords in the source, so I assume that it's supported :)

I tried:

{
  id: 'myLabel',
  component: 'label',
  text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam consequat purus pulvinar libero maximus suscipit vel vel ligula. Quisque id ante nulla. Phasellus ac urna nec eros hendrerit ullamcorper sed ac urna. Integer facilisis blandit enim ut dapibus. Vestibulum mattis ipsum at fermentum bibendum. Fusce semper dictum arcu, sed placerat erat accumsan sed. Aliquam nec turpis et neque euismod rhoncus et ut nulla.',
  wordWrap: true,
  wordWrapWidth: 150,
  width: 200,
  height: 100
}

However, the text is not wrapped. Including a \n for an explicit line break works fine.

I also tried to put wordWrap and wordWrapWidth in a style object, but still no effect.

Is word wrap supported? If so, could you please provide a simple example? Thanks in advance!

Stuck with some unknowns with the GUI layout

I'm stumped how this GUI layout stuff works.

My GUI JSON definition is:

 var gridUIJSON = {
    id: 'imagepicker',
    component: 'Window',
    padding: 0,
    position: { x: 0, y: 0 },
    width: 400,
    height: 640,
    layout: [1, 3],
    children: [
    {
        component: 'Layout',
        z: 1, //the Z index allow to bring the navigation to the top so it can receive events (this is a workaround to the way PIXI handles events)
        padding: 3,
        position: { x: 20, y: 20 },
        width: 990,
        height: 60,
        layout: [2, 1],
        children: [
          {
            id: 'searchTerm',
            text: 'Mermaids',
            component: 'Input',
            position: 'top left',
            width: 880,
            height: 50,
          },
          {
            id: 'find',
            text: 'Find',
            component: 'Button',
            position: 'top right',
            width: 100,
            height: 50,
          }
        ]
    },
    {
        component: 'List',
        padding: 15,
        dragY: false,
        position: { x: 20, y: 20 },
        width: 985,
        height: 500,
        layout: [4, 3],
        children: [
            { text: 'item', component: 'Button', position: 'center', width: 100, height: 100 },
            { text: 'item', component: 'Button', position: 'center', width: 100, height: 100 },
            { text: 'item', component: 'Button', position: 'center', width: 100, height: 100 },
            { text: 'item', component: 'Button', position: 'center', width: 100, height: 100 },
            { text: 'item', component: 'Button', position: 'center', width: 100, height: 100 },
            { text: 'item', component: 'Button', position: 'center', width: 100, height: 100 },
            { text: 'item', component: 'Button', position: 'center', width: 100, height: 100 },
            { text: 'item', component: 'Button', position: 'center', width: 100, height: 100 },
            { text: 'item', component: 'Button', position: 'center', width: 100, height: 100 },
            { text: 'item', component: 'Button', position: 'center', width: 100, height: 100 },
            { text: 'item', component: 'Button', position: 'center', width: 100, height: 100 },
            { text: 'item', component: 'Button', position: 'center', width: 100, height: 100 },
            { text: 'item', component: 'Button', position: 'center', width: 100, height: 100 },
            { text: 'item', component: 'Button', position: 'center', width: 100, height: 100 },
            { text: 'item', component: 'Button', position: 'center', width: 100, height: 100 },
            { text: 'item', component: 'Button', position: 'center', width: 100, height: 100 },
            { text: 'item', component: 'Button', position: 'center', width: 100, height: 100 },
            { text: 'item', component: 'Button', position: 'center', width: 100, height: 100 },
            { text: 'item', component: 'Button', position: 'center', width: 100, height: 100 },
            { text: 'item', component: 'Button', position: 'center', width: 100, height: 100 },
            { text: 'item', component: 'Button', position: 'center', width: 100, height: 100 },
            { text: 'item', component: 'Button', position: 'center', width: 100, height: 100 },
            { text: 'item', component: 'Button', position: 'center', width: 100, height: 100 },
        ]
    },
    {
            component: 'Header',
            text: 'Found XX pictures to colour',
            font: {
                size: '20px',
                family: 'Arial',
                color: '#222'
            },
            position: 'bottom center',
            width: 400,
            height: 35
     },
    ]
 };

and currently it is rendering out as:

I cannot work out two things:

What is causing the big gap before the List component. How can I move the List component up so that it doesn't hang off the bottom of the canvas?
How can I position the bottom Header component so that it has some padding between the edge of the canvas and the Header border - such as 25px ?

Layout manager

Hi, the library is a nice tool for creating UIs in PIXI but it lacks one very important feature - Layout Manger. Take a look how it's implemented in Java https://docs.oracle.com/javase/tutorial/uiswing/layout/visual.html

Child elements of component should be layout in the process of creating component but in the process of laying out. Thanks to that you could dynamically add new child to the component (for instance window) and lay out all child elements to fit window properly. Thanks to that you would be also able to resize window and reposition elements.

Does not work with Phaser 2.4 ?

I'm trying to make it work with the dev branch of Phaser, but I have a 'baseTexture not defined' error because PIXI.TextureCache is empty

Mousewheel scroll list?

Maybe I just missed it somewhere but is there a way to programmatically scroll a list?

phaser 2.4.6 compatibility

First of all thank your for this great work on ezgui ! This is one of the best GUI working well with phaser.

But as ezgui is not compatible with phaser 2.4.4 and upper
any idea to make it compatible with new phaser versions ?

Label component and image?

Image doesnt appear for the following element:

                                    {
                                        id: 'feed-bar-empty',
                                        image: 'feed_bar_empty.png',
                                        component: 'Label',
                                        position: {x: 0, y: 0},
                                        wH: wH,
                                        wW: wW
                                    }

though if I change the component to Layout the image appears. Bug or intentional?

Clicking through ezgui gui & Phaser elements

Hello,

I try to use ezgui to build and display popin in a game build with phaser.
It works well, ezguipopin are really nice but I noticed that mouse clicks are not blocked by the popin.
For example if there is a sprite build with phaser behind the popin which is able to be clicked, the ezgui popin will not block the onInputDown event on the phaser sprite.

Is it possible to tel ezgui elements to block the mouse clicks ?

regards,
Stéphane

Touchscreen device input

Does the component input work okay with touch screen devices running Phaser wrapped inside of Phonegap/Cordova ?

Does the input component trigger the on screen keyboard to appear for example ?

Way to iterate through child Components (primarily, of List)?

Hi, particularly if I define a list - is there a way to iterate through the components that are added to it? I notice if I look in it's children, there are a couple miscellaneous things but it seems the child at index 2 is a container that has the components of the list I'm looking for. But iterating through it seems to produce some unintended results. Currently, what I am doing is this:

    for(var c in EZGUI.components.playerBagList.children[2].children){
        if(!(EZGUI.components.playerBagList.children[2].children[c] instanceof Button))
            continue;

... //All further actions (such as handlers) are done on EZGUI.components[EZGUI.components.playerBagList.children[2].children[c].guiID]

//Perhaps EZGUI.components.playerBagList.components? 
        }

this is suitable but seems like a bit of a long winded way to do it (not to mention if I ever change the order of playerBagList's children things will get weird). Perhaps I am just being lazy... lol

Anyways, love the library so far!

Problem with clickable elements inside a window/layout?

Hi, maybe I'm just doing something wrong here. Not fully sure how to describe this one so code dump incoming:

        "monster-menu": {
            id: "monster-menu",
            EZGUI: null,
            createWindow: function(args){
                var wH = MIRend.renderer.height * 0.8;
                var wW = wH;
                return {
                    id: args.id,
                    component: 'Window',
                    skin: 'MonsterManageWindow',
                    draggable: false,
                    position: { x: (MIRend.renderer.width - wW)/2, y: (MIRend.renderer.height - wH)/2 },
                    width: wW,
                    height: wH,
                    children: [

                    ]
                };              
            },
            createChildren: function(args){

                //Add build btn
                //Add battle btn
                //Add research btn
                //Add adventure btn
                var wH = MIRend.renderer.height * 0.8;
                var wW = wH;

                var bW1 = MIRend.renderer.width * 0.07;
                var bH1 = bW1;

                var bW2 = MIRend.renderer.width * 0.04;
                var bH2 = bW2;

                var close_menu = {
                    id: 'close-menu',
                    image: '../securetest/images/monster_view/skills1_icon.png',
                    component: 'Button',
                    position: {x: wW * 0.95, y: wH * 0.15},
                    wH: 50,
                    wW: 50
                };

                var nav_bar = {
                    id: 'monster-nav-list',
                    position: {x: wW * 0.07, y: wH * 0.15 },
                    component: 'List',
                    width: wW * 0.9,
                    height: wH * 0.2,
                    layout: [6,1],
                    //Buy btn must contain
                        //Name
                        //Can Build X
                        //Price
                        //Image
                        //El flag is applicable
                    children: [
                        MIMen.templates['nav-bar-btn']({
                            id: 'stats-nav-btn',
                            text: 'Stats',
                            img: '../securetest/images/monster_view/stats_icon.png',
                            wH: wH,
                            wW: wW
                        }),
                        MIMen.templates['nav-bar-btn']({
                            id: 'skills-nav-btn',
                            text: 'Skills',
                            img: '../securetest/images/monster_view/skills1_icon.png',
                            wH: wH,
                            wW: wW
                        }),
                        MIMen.templates['nav-bar-btn']({
                            id: 'boost-nav-btn',
                            text: 'Boost',
                            img: '../securetest/images/monster_view/boost_icon.png',
                            wH: wH,
                            wW: wW
                        }),
                        MIMen.templates['nav-bar-btn']({
                            id: 'move-nav-btn',
                            text: 'Move',
                            img: '../securetest/images/monster_view/movemonster_icon.png',
                            wH: wH,
                            wW: wW
                        }),
                        MIMen.templates['nav-bar-btn']({
                            id: 'storage-nav-btn',
                            text: 'Storage',
                            img: '../securetest/images/monster_view/storage_icon.png',
                            wH: wH,
                            wW: wW
                        }),
                        MIMen.templates['nav-bar-btn']({
                            id: 'sell-nav-btn',
                            text: 'Sell',
                            img: '../securetest/images/monster_view/sell_icon.png',
                            wH: wH,
                            wW: wW
                        })
                    ]            
                };
                //Child components:
                    //Nav bar
                    //Monster Portrait

                    //Monster Info
                        //Monster Stats
                    //Feed Rigg
                    var feed_rigg = {
                        id: 'feed-container',
                        position: {x: 0, y: (wH * 0.8) - (wH * 0.2) },
                        component: 'List',
                        width: wW,
                        height: wH * 0.2,
                        children: [
                            {
                                id: 'feed-btn',
                                component: 'Button',
                                skin: 'ClearButton',
                                width: (wW * 0.9) * 0.16,
                                height: wH * 0.15,
                                position: {x: 0, y: 0},
                                children: [
                                    {
                                        id: "feed-btn-txt",
                                        text: 'Feed',
                                        position: {x: 0, y: 40}
                                    },
                                    {
                                        id: "feed-btn-img",
                                        image: 'feed.png',
                                        position: {x: 0, y: 0}
                                    }
                                ]
                            },
                            {
                                id: 'feed-bar-container',
                                position: {x: 0, y: 0},
                                component: 'List',
                                height: wH,
                                width: wW,
                                children: [
                                    {
                                        id: 'feed-bar-empty',
                                        image: 'feed_bar_empty.png',
                                        component: 'Layout',
                                        position: {x: 0, y: 0},
                                        wH: wH,
                                        wW: wW
                                    },
                                    {
                                        id: 'feed-bar-full',
                                        image: 'feed_bar_'+GMan.selected_monster.element.toLowerCase()+'.png',
                                        component: 'Layout',
                                        text: 'feed',
                                        position: {x: 0, y: 0},
                                        wH: 300,
                                        wW: wW
                                    }                                  
                                ]
                            }
                        ]
                    };

                        //Feed Btn
                        //Feed Bar
                var monster_portrait = {
                    id: "monster-portait",
                    position: {x: 0, y: (wH * 0.4) },
                    component: 'List',
                    width: wW * 0.6,
                    height: wH * 0.5,
                    layout: [1,1],
                    children: [
                        MIMen.templates['nav-bar-btn']({
                            id: 'sell-nav-btn',
                            text: 'Sell',
                            img: '../securetest/images/monster_view/sell_icon.png',
                            wH: wH,
                            wW: wW
                        })  
                    ]
                };

                var monster_portrait_container = {
                    id: "monster-portrait-container",
                    position: {x: 0, y: wH * 0.2 },
                    component: 'List',
                    width: wW * 0.6,
                    height: wH * 0.8,
                    children: [
                        monster_portrait,
                        feed_rigg
                    ]
                };

                var monster_stats = {
                    id: 'stats-list',
                    component: 'Layout',
                    position: {x: wW * 0.6, y: wH * 0.45},
                    width: wW * 0.4,
                    height: wH * 0.16,
                    layout: [2,2],
                    children: [
                        {
                            id: 'hp-stat',
                            component: 'Layout',
                            text: GMan.selected_monster.name,
                            image: '../securetest/images/monster_view/health_stat.png',
                            position: {x: 0, y: 0},
                            width: 35,
                            height: 35,
                            children: [
                                {
                                    image: '../securetest/images/monster_view/health_stat.png',
                                    position: {x: 0, y: 0},
                                    component: 'Label'
                                },
                                {
                                    text: Math.round(GMan.selected_monster.health),
                                    position: {x: 0, y: 0},
                                    component: 'Label'
                                }
                            ]
                        },
                        {
                            id: 'dmg-stat',
                            component: 'Layout',
                            text: GMan.selected_monster.name,
                            image: '../securetest/images/monster_view/attack_stat.png',
                            position: {x: 0, y: 0},
                            width: 35,
                            height: 35,
                            children: [
                                {
                                    position: {x: 0, y: 0},
                                    component: 'Label'
                                },
                                {
                                    text: Math.round((GMan.selected_monster.damage + GMan.selected_monster.e_damage)/2),
                                    position: {x: 0, y: 0},
                                    component: 'Label'
                                }
                            ]
                        },
                        {
                            id: 'def-stat',
                            component: 'Layout',
                            text: GMan.selected_monster.name,
                            image: '../securetest/images/monster_view/defense_stat.png',
                            position: {x: 0, y: 0},
                            width: 35,
                            height: 35,
                            children: [
                                {
                                    position: {x: 0, y: 0},
                                    component: 'Label'
                                },
                                {
                                    text: Math.round((GMan.selected_monster.defense + GMan.selected_monster.e_defense)/2),
                                    position: {x: 0, y: 0},
                                    component: 'Label'
                                }
                            ]
                        },
                        {
                            id: 'spd-stat',
                            component: 'Layout',
                            text: GMan.selected_monster.name,
                            image: '../securetest/images/monster_view/speed_stat.png',
                            position: {x: 0, y: 0},
                            width: 35,
                            height: 35,
                            children: [
                                {
                                    position: {x: 0, y: 0},
                                    component: 'Label'
                                },
                                {
                                    text: Math.round(1/GMan.selected_monster.speed),
                                    position: {x: 0, y: 0},
                                    component: 'Label'
                                }
                            ]
                        }
                    ]
                };

                var monster_info = {
                    id: 'monster-info',
                    component: 'Layout',
                    position: {x: wW * 0.6, y: wH * 0.25},
                    width: wW * 0.4,
                    height: wH * 0.16,
                    children: [
                        {
                            id: 'monster-name-'+GMan.selected_monster.id,
                            width: bW1 * 0.16,
                            height: wH * 0.15,
                            position: {x: 0, y: 0},
                            text: GMan.selected_monster.name,
                            position: {x: 0, y: 0},
                            component: 'Label'
                        },
                        {
                            id: 'monster-rarity-'+GMan.selected_monster.id,
                            text: "Rarity",
                            width: 100,
                            height: 100,
                            position: {x: 0, y: 25},
                            component: 'Label'
                        },    
                        {
                            id: 'monster-type-'+GMan.selected_monster.id,
                            text: "Type",
                            width: 100,
                            height: 100,
                            position: {x: 50, y: 0},
                            component: 'Label'
                        }
                    ]
                };

                var monster_info_container = {
                    id: "monster-info-container",
                    component: "Layout",
                    position: {x: 0, y: 0 },
                    width: wW,
                    height: wH,
                    children: [
                        monster_info,
                        monster_stats
                    ]
                };


                return [close_menu, nav_bar, monster_portrait_container, monster_info_container];
            },
            addListeners: function(){

                if(EZGUI.components['feed-btn']){
                    EZGUI.components['feed-btn'].on('mouseup',function(data){
                        //Feed Monster this.settings.dataid
                        console.log("Feed monster "+this.settings.dataid);
                    }); 
                }

            }                    
        },

It's kind of a lot of code but pretty simple. I call createWindow(), then createChildren(), then addListeners(). I have another menu that works as expected with clickable elements, but they are free floating (the top level of their menu being a Layout). All of the menus having clickable problems have a top level of Window. When I set that element to Layout though, no difference so I'm pretty sure it's not that.

Click through?

Hi, currently I have a Layout the size of the canvas but it is blocking the clicks of objects underneath. The layout contains some buttons, essentially at the corners of the screen:

is there a way to make an EZGUI component (Layout) ignore interaction, but allow some of its children components be interactive or do I have to add the buttons separately so there is no contiguous blocking element in front of the rest of the scene?

Suggestions for filtering lists?

If I have a list of elements that can be separated by an object property, do you have a reliable or suggested way of handling showing filtered result sets? The way that seems obvious is on click, iterate list and hide/show based on clicked filter. Seems like there should be a more integrated or comprehensive/robust way to do this (for example, examine http://nytimes.github.io/pourover/ for an example of an amazingly solid, robust, and performant filtering library)

Background repeat?

Is there an easy way to use an image at native size (or more specifically, native resolution) and not have it tile itself? I have a window background, and I would like the window take up the whole screen but the background image to essentially be no-repeat, centered

Spine support?

Any chance it will be added? :) It shouldn't be too hard since EZGUI is already well integrated with PIXI, I would guess it's mostly a matter of removing some of the Container class properties and method calls. Just a thought :)

The hover state of Button don't back to 'default' on mouseout event

Scroll List has increasing Y offset when scrolling

If you create a horizontal scroll list, the items gradually move up the Y access. It's really noticeable if you create a 1x1 layout.

        var levelHeight = 300;
        var levelWidth = 300;
        var guiObj = {
            id: 'levelSelectScreen',
            component: 'Window',
            padding: 4,
            position: { x: 0, y: 0 },
            width: 600,
            height: 550,

            layout: [1, 1],
            children: [
                {
                    id: 'levelsList',
                    component: 'List',
                    dragY:false,
                    padding: 3,
                    position: {x:0, y:0},
                    width: 590,
                    height: 540,
                    layout: [1.5, 1],
                    children: [
                        { id: 'lvl1', text: '1', userData: 'level 1', component: 'Button', position: 'center', width: levelWidth, height: levelHeight, skin: 'levelBtn' },
                        { id: 'lvl2', text: '2', userData: 'level 2', component: 'Button', position: 'center', width: levelWidth, height: levelHeight, skin: 'levelBtn' },
                        { id: 'lvl3', text: '3', userData: 'level 3', component: 'Button', position: 'center', width: levelWidth, height: levelHeight, skin: 'levelBtn' },
                        { id: 'lvl4', text: '4', userData: 'level 4', component: 'Button', position: 'center', width: levelWidth, height: levelHeight, skin: 'levelBtn' },
                        { id: 'lvl5', text: '5', userData: 'level 5', component: 'Button', position: 'center', width: levelWidth, height: levelHeight, skin: 'levelBtn' },
                        { id: 'lvl6', text: '6', userData: 'level 6', component: 'Button', position: 'center', width: levelWidth, height: levelHeight, skin: 'levelBtn' },
                        { id: 'lvl7', text: '7', userData: 'level 7', component: 'Button', position: 'center', width: levelWidth, height: levelHeight, skin: 'levelBtn' },
                        { id: 'lvl8', text: '8', userData: 'level 8', component: 'Button', position: 'center', width: levelWidth, height: levelHeight, skin: 'levelBtn' },
                        { id: 'lvl9', text: '9', userData: 'level 9', component: 'Button', position: 'center', width: levelWidth, height: levelHeight, skin: 'levelBtn' },
                        { id: 'lvl10', text: '10', userData: 'level 10', component: 'Button', position: 'center', width: levelWidth, height: levelHeight, skin: 'levelBtn' },

                        { id: 'lvl11', text: '11', userData: 'level 11', component: 'Button', position: 'center', width: levelWidth, height: levelHeight, skin: 'levelBtn' },
                        { id: 'lvl12', text: '12', userData: 'level 12', component: 'Button', position: 'center', width: levelWidth, height: levelHeight, skin: 'levelBtn' },
                        { id: 'lvl13', text: '13', userData: 'level 13', component: 'Button', position: 'center', width: levelWidth, height: levelHeight, skin: 'levelBtn' },
                        { id: 'lvl14', text: '14', userData: 'level 14', component: 'Button', position: 'center', width: levelWidth, height: levelHeight, skin: 'levelBtn' },
                        { id: 'lvl15', text: '15', userData: 'level 15', component: 'Button', position: 'center', width: levelWidth, height: levelHeight, skin: 'levelBtn' },
                        { id: 'lvl16', text: '16', userData: 'level 16', component: 'Button', position: 'center', width: levelWidth, height: levelHeight, skin: 'levelBtn' },
                        { id: 'lvl17', text: '17', userData: 'level 17', component: 'Button', position: 'center', width: levelWidth, height: levelHeight, skin: 'levelBtn' },
                        { id: 'lvl18', text: '18', userData: 'level 18', component: 'Button', position: 'center', width: levelWidth, height: levelHeight, skin: 'levelBtn' },
                        { id: 'lvl19', text: '19', userData: 'level 19', component: 'Button', position: 'center', width: levelWidth, height: levelHeight, skin: 'levelBtn' },

                    ]
                }
            ]
        };

How can I catch the event mouseover / mouseout of default UI elements?

Can't destroy UI, method is empty..

DisplayObjectContainer is deprectated

I'm getting a compiler error from tsc against the latest version of PIXI (3.07):

Error (141, 37) TS2305 Module 'PIXI' has no exported member 'DisplayObjectContainer'.

I'm using the typescript defs from https://github.com/pixijs/pixi-typescript.
If I use the ones provided with EZGUI,then I get a slew of other errors:

Error:(8, 27) TS2305: Module 'PIXI' has no exported member 'Container'.
Error:(10, 32) TS2305: Module 'PIXI' has no exported member 'SystemRenderer'.
Error:(6, 28) TS2305: Module 'PIXI' has no exported member 'extras'.
Error:(23, 28) TS2305: Module 'PIXI' has no exported member 'filters'.
Error:(38, 12) TS2339: Property 'loader' does not exist on type 'typeof PIXI'.
Error:(81, 70) TS2339: Property 'RENDERER_TYPE' does not exist on type 'typeof PIXI'.