How make IgeUIEntity behave like span tag?

Post your help queries and engine programming questions here

How make IgeUIEntity behave like span tag?

Postby darian311 » Fri Feb 20, 2015 2:02 am

I just want to mount 4 UiElements into a Parent element and not have them bunch on top of each other and instead layout inline like default behavior of span tag.

Any thoughts? UI example doesnt show this behavior.
:|
Attachments
Screen Shot 2015-02-19 at 7.55.22 PM.png
Screen Shot 2015-02-19 at 7.55.22 PM.png (79.99 KiB) Viewed 8334 times
darian311
 
Posts: 11
Joined: Fri Nov 29, 2013 9:53 pm

Re: How make IgeUIEntity behave like span tag?

Postby robaldred » Fri Feb 20, 2015 12:29 pm

Hello.
This behaviour is not currently present in the main repos.
It can be achieved very easily though.

However I've just pushed an Entity to the dev repo that will give you the basic functionality of what you need.
If you have a premium licence you can grab that right away.

I'm not authorised to distribute premium content for free however, in order to answer your question here's a snippet which should get you started.

Creating a simple class that extends the functionality of IgeUiElement.

Code: Select all
var MyInlineContainer = IgeUiElement.extend({
    tick: function(ctx) {
        var i,
            children = this.children(),
            currentX = 0;
        for(i = 0; i < children.length; i++) {
            var child = children[i];
            child.left(currentX);
            currentX += child.width();
        }
    }
});




Use it like so...

Code: Select all
var container = new MyInlineContainer();
container.mount(uiScene);

var element1 = new IgeUiElement()
    .width(20)
    .mount(container);
var element2 = new IgeUiElement();
    .width(50)
    .mount(container);
var element3 = new IgeUiElement();
    .width(100)
    .mount(container);






Mount your UI elements to this container and it should layout each child next to each other inline.
This could be extended further to support wrapping when the elements reach an X limit.
I don't work for Irrelon. All comments are my own.
I would strongly encourage anyone building production projects with Isogenic to buy a premium licence, it costs very little and will help towards continued development of the engine. Irrelon have spent thousands of hours developing this wonderful platform with many features found in AAA game engine.
User avatar
robaldred
 
Posts: 243
Joined: Wed Oct 23, 2013 8:09 pm
Location: Manchester, England

Re: How make IgeUIEntity behave like span tag?

Postby darian311 » Fri Feb 20, 2015 6:56 pm

Thanks Rob, I have had premium license for a couple years now.

We're running on ige 1.5.5 merge something or other. .... Do you know if your code will become part of the new official release?

I'm not sure how to manage properly pulls from master vs putting dev code in my project.
If you have some best practices please share.

And thanks again.
darian311
 
Posts: 11
Joined: Fri Nov 29, 2013 9:53 pm

Re: How make IgeUIEntity behave like span tag?

Postby robaldred » Sat Feb 21, 2015 8:45 pm

Hey. My code is in the ige dev branch.
You can add the ige upstream as a remote and just merge it into your working tree.

Code: Select all
git remote add upstream git@github.com:Irrelon/ige.git
git fetch upstream
git merge upstream/dev
I don't work for Irrelon. All comments are my own.
I would strongly encourage anyone building production projects with Isogenic to buy a premium licence, it costs very little and will help towards continued development of the engine. Irrelon have spent thousands of hours developing this wonderful platform with many features found in AAA game engine.
User avatar
robaldred
 
Posts: 243
Joined: Wed Oct 23, 2013 8:09 pm
Location: Manchester, England


Return to Help & Questions

Who is online

Users browsing this forum: No registered users and 1 guest
cron