Phaser Stylesheet

[MattMcFarland]

So when working with phaser's UI system, and coming from a strong webdev background I thought it might be cool to have a style sheet that would be used to apply common styling to many elements.  Specifically to my navigation menu.  I wanted them to all have similar characteristics, and I think there are a bunch of different ways of doing this, (some better than what I am presenting I'm sure) - but nonetheless I wanted to share my solution:

  style = {    navitem: {      base: {        font: '30pt TheMinion',        align: 'left',        srokeThickness: 4      },      default: {        fill: defaultColor,        stroke: 'rgba(0,0,0,0)'      },      hover: {        fill: highlightColor,        stroke: 'rgba(200,200,200,0.5)'      }    }  };

So then I can change the style of my navItems like so:

    var txt = game.add.text(x, y, text, style.navitem.default);    txt.events.onInputOver.add(function (target) {      target.setStyle(style.navitem.hover);    });    txt.events.onInputOut.add(function (target) {      target.setStyle(style.navitem.default);    });

The caveat though, was that setStyle sorta overwrites any other styles, so I opted to use Object.assign (yes I know of Phaser.Utils.extend, and the extend in tons of other libs, also I added polyfill for crossbrowser support.) - 

  Object.assign(style.navitem.hover, style.navitem.base);  Object.assign(style.navitem.default, style.navitem.base);

So now all my navItems look the same

 

 

There's a lot more detail and explanation about this on github here: https://github.com/MattMcFarland/phaser-menu-system/blob/master/chapter2.md#part-6---a-global-stylesheet

 

But I thought it was so cool I had to share..  Let me know what you think.

 

Thanks,

Matt

[Alexalten]

Well done!

[MattMcFarland]

Thank you!  That means a lot and I'm glad to help.