Jump to content

Need idea to make gauge like diablo3


Recommended Posts


i wanna create gauge like following image

maybe it looks used shader..
but i will be slow with webgl to play on mobile

how can i make like following image with good performance..

please give me any tips..

Link to comment
Share on other sites

It might not be so slow, you can do semi-realistic fire-like animations in javascript which will be performant, particularly over a small area, you just overlay with an image and you're done, but doing that on the shader would be better. Although I suspect you are worried about just adding more graphical work, rather than this piece in isolation being a problem.

If you're particularly worried about mobile then choose a different representation, the fire-like animation is all well and good for atmosphere but it isn't critical, its sugar, so, if you're on desktop (or even better, if you detect the device can handle it) so the glitzy animations and on lower-powered devices do not.

I don't know exactly how the gauges work but an animated gif (or at least, animated frames) would be most performant. You could place the animation behind a semi-transparent texture that is the globe and glass and maybe do something simple like control the height or the brightness of the animating frames to give an indication of how full/empty your gauge is. Colour transitions would also be an option here using a tint or another semi-transparent layer. You could even transition between different types of animating fire by using a cross-fade. It sounds fairly basic but I bet you could get it looking really nice (not as nice as a shader generated texture for sure but a whole heap less effort).

Link to comment
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.

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.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...