ddabrahim

GUI library for canvas?

Recommended Posts

Hi.

I'm looking for a GUI library to create gui elements like buttons, check boxes, sliders..etc over the canvas element so I can use it with any framework. I was searching on the internet but mostly I find libs that require editing HTML and CSS manually to add gui elements. I would prefer something that I can use from JavaScript only and to be easy to use for someone with little JS knowledge.

I did find 2 libs that is similar to what I'm looking for:

I am not entirely happy with this 2 libs because they are designed to create panels and to add gui elements to the panel. Is there any other similar libs I could use that allow me to just create a button, input a slider and position it anywhere over the canvas? I would appreciate any help. Thanks.

 

Edited by ddabrahim

Share this post


Link to post
Share on other sites

You might be able to narrow it down if you first decide on a canvas rendering library?  Else I imagine the problem with finding a gui lib for "raw" canvas is that it still needs some kind of basis to manage assets, interactions, basic scene graph etc - therefore soon becomes a rendering library with opinions of its own?  Whereas the non-opinionated gui exists by default - conventional html and css.

Both CreateJS and PixiJS have mature third party gui / component libraries.  Also, do properly consider the html route - I've seen many game guis realised with React as a layer over the canvas, it can be a good separation of concerns.

Share this post


Link to post
Share on other sites

Hi.

Thank you for the suggestions. The problem with gui libs of certain rendering libs like Pixi.js is that, often the libs are out of date and not compatible with the latest version and usually, such libs are using the drawing functions of the rendering library and not able to draw outside the canvas. I was wondering if there is any lib that would allow me to create a button, input, checkbox..etc and position it anywhere even over the canvas using DOM manipulation and CSS maybe but without the complexity involved using simple JS functions. The two libs I have linked are very close to what I'm looking for and I have discovered them by accident, they won't come up in google search either and was wondering if there is any other similar libs hidden out there somewhere.

Thanks.

Edited by ddabrahim

Share this post


Link to post
Share on other sites

I've been down that rabbit hole, there's a lot of UI libraries out there, determining which ones do what and how easy to use is time consuming.  You might think your requirement is quite broad, but it's probably quite specific when you consider all of the UI applications.  Your requirement sounds like a HUD to me, so be sure to include that term in your searches, I'd start with something like "javascript ui hud" in google.

I use dat.gui, it has a specific goal and does that well, it's not a general purpose gui.  I also use FomanticUI, it has the feature set and look I wanted, but it's steep learning curve. Both of these I use to display and control the underlying application during development, not seen in the production build, they have a technical/functional feel and wouldn't be appropriate everywhere, eg for player UI in a game.

There's a lot of old libs out there, no longer being maintained.  If keeping up to date with current browsers and standards is important, then bear that in mind.  I remember I took an interest in w2ui, had decent functionality, easy to start with.  Also, Phaser3 has a domElement, if you wanted to use that for your canvas it would give you easy access to html elements in front of the canvas - Phaser3 domElement examples.

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.