Using Slate or Coherent UI(HTML5)

Hi,

I am planning to learn either of Slate or HTML5 to make my custom HUDs.

I have used canvas till now but the complicated HUDs which I will be needing are much harder to do by canvas. So I need suggestion which would be the best thing to use.

I have read that slate can be used to make animated HUDs using Unreal motion graphics. But I want to know how good is HTML5 in dealing with it.

Here is an example of something I want to make.
b0b34d05cc91f97acbc7b48d56685676bc6fe4b1.jpeg

Basically its like a round bar that fulls…

Which would be the best way to make something like this?

Not tried Slate myself so I can’t comment on that, I know HTML5 could do this fairly easily though, so CoherentUI (or similar) would be able to do it.

One thing I would recommend though is to look into the possibility of using one of the JS graphics libraries, such as D3.js or Raphaël.js rather than try to write everything from scratch yourself. They seem fairly well optimised, certainly better than what most people would do early in their JS careers.

Learning HTML5/CSS/JS for your UI is a lot of work though so be warned there, although when you do know it you’ll also be able to do some quite impressive web stuff.

Slate displaying an alpha mask material will be quicker -

Someone is already a large chunk of the way through what you are trying to do :slight_smile:

Change the alpha and watch the dial rotate up and down.

Thanks that will be really helpful for now…

Although I plan on learning HTML5 slowly… I guess it is going to help me a lot later.

Thanks for the suggestion. Which kind of guides should I follow? HTML5 for website development or game development? Which would be more appropriate for making UIs and HUDs?

Hi envenger,

There are frameworks for HTML5 design which can greatly speed up the process of creating a UI. Such frameworks include Adobe Edge Animate, Google Web designer and Sencha Animator. There are other as well.
Here are two tutorials for creating a HUD with HTML5, which I think you will find useful. They are using Adobe Edge Animate, however similar results can be achieved with any of the other frameworks.

Interesting ! Thanks for the link …