Question: Some thoughts on this project.

[trsh]

I have not idea what is feathers-ui, but I have very strong background in HTML5+CSS3 (also HTML APPS). In this HTML world new fresh projects try to stay as much as possible away from defining element styles with images (sprite-sheets etc.). This is due new advanced CSS settings, that let you define, for example, a complete custom button (with round borders, gradient, opacity, etc.). This is a very obvious tendency, because it solves retina issues & saves assets loading size (especially when there are a lot of different styles) / Also doe's not require Photoshop :)) / . So what is with Gown? Can we hope for some features to define, at least, button styles with settings (and no image required)? I think PIXI makes this really easy?...

[trsh]

btw settings are:

border radius, border with, border color, background color, background linear gradient, background image, opacity, color (for text inside element), text shadow, drop-shadow (for element like button)

With this baby's it's more than enough to define tons of styled buttons. :)

[FlorianLudwig]

If you want to use CSS, why not use CSS?

You can layer html and css ontop of your canvas. There are helpers out there to make this easier, for example: http://www.html5gamedevs.com/topic/8517-plugin-pixidomsprite/

[trsh]

@FlorianLudwig the question is why Gown.js want's, for example, buttons from images - not from settings. What's the vision?

[brean]

Hi trsh,

thank you for your interest in this project.

Feathers is for drawing UI in Flash (using 2D graphics acceleration, something that is called Stage3D by Adobe), GOWN is made for drawing UI on the canvas (also using 2D graphics acceleration but from WebGL). You do not have any CSS when you draw stuff on the canvas. Your Graphcs card works best if it can draw as much as possible from a single image so when PIXI draws images you want to use sprite sheets. I also created a small library called PIXI-shapes that allows you to draw simple shapes on the canvas. These shapes can be used to create themes for GOWN (it is used in the current dev-branch of the project) but for more complex stuff you mostly like to use images for your GPU and you'd like to use sprite-sheets to have it as fast as possible. Even with HTML+CSS it makes sense to use sprite-sheets. A single Image is only one HTTP-Request, so it can be loaded faster than many single images.

You like to use GOWN when you have a highly dynamic UI integrated in your HTML5-PIXI game, so using GOWN makes most sense when you like to create a mobile App from your HTML5-game with a software like Cocoon.js. All this mobile system needs you to provide with is a JavaScript Engine and a Canvas. No need for DOM-Trees, CSS-parsing or any other UI on your smartphone.

I think when you only develop for the browser you still like to use CSS but if you like to have a more complex UI inside your game you need a UI-System that renders directly inside the canvas.

If you like to know more about feathers and see, what I'd like to build here go to http://feathersui.com/ and take a look at its Components Explorer: http://feathersui.com/examples/components-explorer/

[brean]

Oh, and on the dev-branch I am currently working on moving everything from the theme-classes/functions into .json-files that configure the theme. There you can do the same things you listed with your settings (except drop-shadows but I assume they are best drawn directly on the images that are used in the sprite sheet for performance reasons).

[trsh]

@brean I understand that a sprite sheet is much better than many small images, as well as difference between canvas and DOM. My proposal was to have an option to draw, for example, a button without having a image in spritesheet for that. It get's very useful when you have a lot of them and NOT complex - for example buttons like classic danger, warning, success, default, etc.

Would be nice if drop shadow is added, I think dropShadowFilter performs very well.

On other hand, maybe event better if elements can be modified on run, with code :)

Do you accept pull requests from community?

[brean]

Just last week I noticed that I'd like to have some more themes that look a bit more like bootstrap or foundation. I use GOWN in a commercial project where it is embedded in a site that uses bootstrap, so it looks kinda strange with the current feathers-themes.

As mentioned you can use PIXI-shapes https://github.com/brean/pixi-shapes/ to draw buttons from. See https://github.com/brean/gown.js/blob/dev/themes/assets/shapes_desktop/shapes_desktop.json for an example.

Using shader for shadows would be a nice alternative, you are right, it would be nice to have the option to modify it on runtime.

I accept pull requests. My current problem is that the dev-branch is way ahead of master in features and commit-count but also still buggy so I'd like to keep the master as a stable version for now. I'd like to create a new, more stable release but my time schedule does not allow me to work more than a few hours every week on this project.

[trsh]

@brean cool. Thanks for all the info. I would also like to devote my time for Gown js, but only when next version will be at least in R.C. :), otherwise it makes not lot sense.

[trsh]

Browsers seem to handle drop shadow very well, also on slow machines. DUNO have. Basically it's clone and moved object, with solid color and blur.

[trsh]

But blur is not cheap, at all :/

[sonhihi]

hello @brean please teach me how to i build project to file gown.js

[FlorianLudwig]

@sonhihi Please see #82 for building the dev branch.

@trsh Thank you for your feedback, I created a feature request to track the "declarative theme" suggestion: #90