[RELEASED] Resource Bubble Shader

Resource Bubble 1.0

Resource Bubble is a shader designed to help you create a resource orb (or bubble :] or globe :] ) for display of HP/MANA/ENERGY or any other resource. Asset package contains shader itself orb model as well as a set of textures for the shader.

  • 20+ textures for “liquid” part of the orb.
  • 3 mask textures that control how “liquid” fades into “hotline”
  • 1 scratched glass orb texture
  • 1 hotline texture
  • multiple complimentary textures (dragon, spikes) that were used in the demo.

You select what textures you want to use and set scroll speed for x and y axis of each texture.Shader also allows setting color for the “liquid” part and the “hotline” part. Shader fill is controlled using single float value.

Orb model is used to add depth and roundness to the globe. You can still use this shader with standard unity UI Image but in this case, orb will appear flat.

Try it: https://build.cloud.unity3d.com/share/WJ_0fP0bjx/webplayer/ (included in the package**)
Try it WebGL (works in Chrome): WebGL


https://www.youtube.com/watch?v=hBk-x6NrKZs
https://www.youtube.com/watch?v=Mnh8cVqtoQY

3 Likes

Finally a good asset for life / mana Obrs

It’s a nice asset, but if you ask me, it would be much more appreciated if you would make it so that it would work properly with UGui, because i don’t think people would be happy to have two solutions for HUD at the same time when they can easily use the UGui for most of stuff, the problem would be how to use your system in combination with new unity’s gui system :confused:

also, i think a description of what each one of the first three textures do in detail would be nice.

Actually the shader itself can be used with uGUI (but in this case we
sacrifice depth).

The WebGL demo has this uGUI asset variation.

Bring depth to uGUI version is in my TODO list. So far I did not find an efficient way to achieve this, however I am working on it
2526935--175284--upload_2016-2-25_18-10-38.png

If by depth you mean how three textures would blend, did you give compute shaders a try? they can read and write to textures very fast, not sure how would you convert a texture 2D to a sprite by code to use in UGui though, but using compute shaders would let you use all the power from GPU to calculate new textures at run time !

By depth I mean that orb appears to be 3D. You can see how “mana” bends and wraps around orb inner walls during movement. I do not get the same effect when simply using material on uGUI image. But I guess this “depth” is very subtle right now. I have to emphasize this in feature updates. I guess this asset is in dire need for a proper web demo with uGUI and mesh prefabs side by side on the same screen.

Take a look at this page, it has a spherical distortion, i am not sure if it would be easy to convert it to be used by a shader or not but it worth giving it a try, if you are registered (free) then you can download the source and take a look into it

http://www.codeproject.com/Articles/3419/Image-Processing-for-Dummies-with-C-and-GDI-Part

also this is an interesting reply in unity answers :

This is a head destortion shader for particles, old but may come handy as reference :

http://www.4shared.com/file/Fjce0cbL/Heat_Distortion_Unity3d_Tutori.html

Thanks I will check them both out.

Is there anyway to get this shader to work with uGUI’s scrollbar Fill transform? My scripts interact with the fill to update the globe, so can it be set as the Fill rect on a Slider component?

Are you using Scrollbar’s Handle width Image script with Image Type = "“Filled” and “File Amount” drives your bar ?
Is this setup correct ?

2625218--184409--upload_2016-5-6_23-11-10.jpg

1 Like

EDIT: Just purchased :smile: wanted to support you on this!

EDIT Again: Got it working :slight_smile: looks awesome! I am wondering thought it seems like they are affect by light in the scene if you are moving a player camera around, is there anyway to avoid this so that they dont “flicker”?

Please contact me @ alexander.dubrovsky.jr@gmail.com and we will fix the issue.

In general the asset should not be affected by lights.

This video is my attempt to make it flicker. As you can see it does not flicker when I move the camera and move around.Sorry for the chunky frame rate.

https://www.youtube.com/watch?v=Y3vICB1hYb4

2625629--184437--upload_2016-5-7_9-44-15.png

2 Likes

I got it working :slight_smile: I basically had to setup my UI image globes that have the material attached on a separate canvas than the one I was using. It is working beautifully now! :slight_smile:

I have it setup as a material on an Image, my script is all custom coded now to update the progress float :slight_smile: working great, amazing asset man! A++++++!!!

I am glad to hear that ! :slight_smile:

1 Like

I have tried for hours to get this to work within UGUI without success. All the sprites (as soon as I add any Resource Bubble material to a UGUI sprite) are 100% black.

I think this may or may not be related to Unity Issue Tracker - [UI] Image using materials with custom shaders does not render in the game view

… however surely there must be someone that’s got this to work, within UGUI, within a canvas as ScreenSpace - Overlay for the canvas Render Mode.

Any advice would be greatly appreciated!

Thanks

I’ve made a hotfix. Please contact me via support email I will send you fixed shaders.
It will be 5-10 work days before fix gets published due to the lengthy approval process.

You sir, are fantastic!

Incoming email, thank you.

Great asset but I am having a big problem trying to create another globe for the right side of the screen

Hi Mavina,

I have created a demo with two globes. Please contact me via support email (alexander.dubrovsky.jr@gmail.com) and I will send it to you.

If this demo is not what you are looking for then:

  1. You can also send me an example project that illustrates your problem.
  2. Or you can write more detailed description of the problem. (Cameras: 2d / persp, Globe: mesh / UGUI (+ Canvas render mode) / Sprite )

Then I will assemble a project that fits your requirements and send it to you via email.
2663565--187865--upload_2016-6-4_11-10-27.jpg

1 Like