Hi,
I want to fill for example an imageObject by a color, i can do this by setFillColor Properly, but my question is how can fill a specific percent of object area via color (not all of it) ?
Thanks.
Do you mean, like a thermometer or a glass of water?
If so, you can’t do it through a simple fill operation. You’ll either need to make a sprite and a series of images, or perhaps use a shader.
Any shader experts out there who can help?
If an object can be approximated well (or fit exactly) by one of the familiar geometric shapes, shaders are a good way to go.
For instance, in roaminggamer’s glass example above, everything is pretty much ellipses. An ellipse has an equation of the form
a \* x^2 + b \* y^2 = 1
Or, in a filled ellipse (an “elliptical disk”), <= 1. You can use this to only accept pixels inside the ellipse. You can also rearrange this equation, pass in an x , and then solve for y with the quadratic formula, which will give you two choices: one will be y on the top curve, the other its reflection on the bottom.
At this point, I think you’d use one or two display objects, which could be rects or whatever (since the shader will be doing much of the pixel management).
Unless your height is 0 (glass empty), you’ll have the dark orange part. Its shader would basically figure out, for a given pixel, what its ellipse looks like (since it tapers with height), and accept any pixel that was inside of that. It would then make sure this pixel was also under the light orange surface part, to account for stuff near the top.
If the “surface” is somewhere mid-glass, or all the way at the top, the shader just accepts everything inside the ellipse. Mid-glass, it uses the “inside” color, at the top it uses the “outside” one.
Near the top, the surface will be half-inside, half-outside. In that case, you could draw two parts. The bottom part, behind the glass, is the part inside the surface’s ellipse and under the ellipse at the top of the glass. It would use the “inside” color. The top part, in the open, would be the part inside both ellipses, and use the “outside” color.
The ellipses are all centered, so you only need their y positions, plus their axis lengths. When you do need two ellipses, this calls for 6 inputs, which is still a bit tough to cram into the 4 inputs available to a shader (uniform userdata will relax this, but Corona hasn’t revealed the details yet). However, if you’ll only be using a few glass shapes, you could even make a shader for each and hardcode the fixed details (top or bottom ellipse) and free up some variables.
@ emaadghorbani
Anyhow, this is just an overview of how one might tackle the glass case shown above, sans code. What sort of objects were you considering?
I want to use this ability for my game status, like fill a star to represent users current Level or a heart to represent users remaining Health,etc. they can have value from 0 to 100.
for example , here is what should the star be displayed :
Okay. If it’s this sort of situation, you could have your underlying star with the black border and white background, then put another yellow star image on top. Then assign it a mask and slide that up and down to match the level or other property.
For anyone who’s interested, I went ahead and implemented the shaders-based idea with the glass. See this Gist.
A few points needed a little refinement. I tried to give reasonable explanations in the code, but it would be good to know if anything is unclear.
you just need a mask of a star then fill it with a rectangle with the color you want based with the height of the mask. formula would be: obj.height=maskHeight*percent_you_want
Do you mean, like a thermometer or a glass of water?
If so, you can’t do it through a simple fill operation. You’ll either need to make a sprite and a series of images, or perhaps use a shader.
Any shader experts out there who can help?
If an object can be approximated well (or fit exactly) by one of the familiar geometric shapes, shaders are a good way to go.
For instance, in roaminggamer’s glass example above, everything is pretty much ellipses. An ellipse has an equation of the form
a \* x^2 + b \* y^2 = 1
Or, in a filled ellipse (an “elliptical disk”), <= 1. You can use this to only accept pixels inside the ellipse. You can also rearrange this equation, pass in an x , and then solve for y with the quadratic formula, which will give you two choices: one will be y on the top curve, the other its reflection on the bottom.
At this point, I think you’d use one or two display objects, which could be rects or whatever (since the shader will be doing much of the pixel management).
Unless your height is 0 (glass empty), you’ll have the dark orange part. Its shader would basically figure out, for a given pixel, what its ellipse looks like (since it tapers with height), and accept any pixel that was inside of that. It would then make sure this pixel was also under the light orange surface part, to account for stuff near the top.
If the “surface” is somewhere mid-glass, or all the way at the top, the shader just accepts everything inside the ellipse. Mid-glass, it uses the “inside” color, at the top it uses the “outside” one.
Near the top, the surface will be half-inside, half-outside. In that case, you could draw two parts. The bottom part, behind the glass, is the part inside the surface’s ellipse and under the ellipse at the top of the glass. It would use the “inside” color. The top part, in the open, would be the part inside both ellipses, and use the “outside” color.
The ellipses are all centered, so you only need their y positions, plus their axis lengths. When you do need two ellipses, this calls for 6 inputs, which is still a bit tough to cram into the 4 inputs available to a shader (uniform userdata will relax this, but Corona hasn’t revealed the details yet). However, if you’ll only be using a few glass shapes, you could even make a shader for each and hardcode the fixed details (top or bottom ellipse) and free up some variables.
@ emaadghorbani
Anyhow, this is just an overview of how one might tackle the glass case shown above, sans code. What sort of objects were you considering?
I want to use this ability for my game status, like fill a star to represent users current Level or a heart to represent users remaining Health,etc. they can have value from 0 to 100.
for example , here is what should the star be displayed :
Okay. If it’s this sort of situation, you could have your underlying star with the black border and white background, then put another yellow star image on top. Then assign it a mask and slide that up and down to match the level or other property.
For anyone who’s interested, I went ahead and implemented the shaders-based idea with the glass. See this Gist.
A few points needed a little refinement. I tried to give reasonable explanations in the code, but it would be good to know if anything is unclear.
you just need a mask of a star then fill it with a rectangle with the color you want based with the height of the mask. formula would be: obj.height=maskHeight*percent_you_want