Hi fuzz.
I just had a go at using the bar behavior in the editor. It was created before the editor even existed and though I kind of got it working, it is not very nice.
Now that wade supports shaders, I suggest you do the following
- Create a new sceneobject for your bar, make it the size and shape that you want.
- Add the following custom pixel shader to the procedural_square sprite of the newly created scene object
gl_FragColor = uvAlphaTime.x < fraction? mix(color0, color1, uvAlphaTime.x) : background;
- You then need to add 4 shader uniforms. All of these shader parameters take values between 0 and 1
- Name: color0 Type: vec4 - This is the first colour to use for your gradiant, so if you wanted red, set 1,0,0,1 for rgba
- Name: color1 Type: vec4 - This is the second colour to use for your gradiant
- Name: background Type: vec4 - This is the background colour, this will take the whole bar when faction is set to 0
- Name: fraction Type: float - This is the percentage of the bar you wanted filled as a decimal. 0 = 0%, 1 = 100%
To set the current faction of the bar, all you have to do is call getSprite on the scene object and set the fraction property, so as an example if I want 25% of the bar filled
var bar = wade.getSceneObject("myBar"); // Assuming you name the scene object myBar
var barSprite = bar.getSprite(); // Get the sprite, no index needed as only 1
barSprite.fraction = 0.25; // The value we want
I hope this helps :)