I'm trying to draw an image that has a very feint gradient in it. Here is an example image. If you look carefully you can see the gradient on the image.

   

I convert this png image to a B8G8R8A8 gfx file with no mip maps.

When I draw the gfx image using the draw() method, it comes out like this. Notice it keeps the feint smooth gradient.

   

However, when I draw it using the drawButton() method, it comes out like this. Notice the loss of the gradient and the hard line.

   

I want to use the drawButton() method as I want to maintain the border pixels as my actual images can have different border pixels. However, I want to also keep the smooth gradient. Is this possible with the drawButton() method?

I see the drawButton() method has a tex_frac parameter, but there is nothing in the comments about what it does? Esenthel, can you please explain what tex_frac does?

P.S. Sorry about the images being so small. If you zoom your browser in 200% or 400% you can see what I'm talking about much easier.

Flt tex_frac=0.25f
I can tell you it likes being set to .25 lol
I doubt it would be useful, or else it would have been documented, maybe?

I've improved the comments:

void drawButton (C Color &color, C Color &color_add, C Rect &rect, Flt border_width=0.007f, Flt tex_frac=0.25f)C; // 'color'=color that will be multiplied by the texture, 'color_add'=color that will be added to the texture using following formula "final_color = texture_color * color + color_add", 'rect'=screen rectangle at which the image will be drawn, 'border_width'=size of the border inside the screen 'rect' rectangle that will be drawn as image borders (this value should be less than rectangle dimensions), 'tex_frac'=fraction of the image texture that will be used for drawing the borders (this value should be in range of 0..1)
void drawButtonVertical(C Color &color, C Color &color_add, C Rect &rect, Flt border_width=0.007f, Flt tex_frac=0.25f)C; // 'color'=color that will be multiplied by the texture, 'color_add'=color that will be added to the texture using following formula "final_color = texture_color * color + color_add", 'rect'=screen rectangle at which the image will be drawn, 'border_width'=size of the border inside the screen 'rect' rectangle that will be drawn as image borders (this value should be less than rectangle dimensions), 'tex_frac'=fraction of the image texture that will be used for drawing the borders (this value should be in range of 0..1), this function will draw with texture coordinates in vertical mode

perhaps your border_width is too big?

Look into the attached default gui button image, it's borders will be stretched into 'border_width' screen size, by taking 'tex_frac' of the source image.

@gwald: this is what I've asked you before, simply let me know what function is not commented well enough and I will improve that

Woah! Easy does it with the commenting!

Sorry, I didn't mean that I don't understand the function. In my opinion the function is pretty self explanatory and so are all of its parameters (except for the tex_frac one). I can't speak for everyone, but personally, I think the level of commenting in the headers is already very good. Some parameters like color, color_add and rect for example are pretty obvious and don't need any explanation. Just my opinion. I think you really only need to worry about obscure parameters.

Anyway, regarding my problem, I'm not having any trouble with the borders. The test image in the above example has no borders. I'm actually talking about the gradient in the image. Instead of it coming out smooth, it comes out with a hard line through the middle (zoom your browser and compare the two renders in my first post). I imagine that drawButton() is just drawing the image in 9 parts, so shouldn't the centre part be stretched out. Why am I getting the hard line through the middle of it?

maybe my suggestion in previous got lost among all the information:
"perhaps your border_width is too big?"
did you try modifying this value?
perhaps those borders occupy half of the image rectangle?

Ah ok. Making the border_width smaller does solve the problem. However than I lose a lot of the border detail. Border becomes to thin. Perhaps I need to rework the source texture so there is more border pixels in it like you have in your example one above.

(03-01-2013 01:40 PM)Esenthel Wrote:  I've improved the comments:

void drawButton (C Color &color, C Color &color_add, C Rect &rect, Flt border_width=0.007f, Flt tex_frac=0.25f)C; // 'color'=color that will be multiplied by the texture, 'color_add'=color that will be added to the texture using following formula "final_color = texture_color * color + color_add", 'rect'=screen rectangle at which the image will be drawn, 'border_width'=size of the border inside the screen 'rect' rectangle that will be drawn as image borders (this value should be less than rectangle dimensions), 'tex_frac'=fraction of the image texture that will be used for drawing the borders (this value should be in range of 0..1)
void drawButtonVertical(C Color &color, C Color &color_add, C Rect &rect, Flt border_width=0.007f, Flt tex_frac=0.25f)C; // 'color'=color that will be multiplied by the texture, 'color_add'=color that will be added to the texture using following formula "final_color = texture_color * color + color_add", 'rect'=screen rectangle at which the image will be drawn, 'border_width'=size of the border inside the screen 'rect' rectangle that will be drawn as image borders (this value should be less than rectangle dimensions), 'tex_frac'=fraction of the image texture that will be used for drawing the borders (this value should be in range of 0..1), this function will draw with texture coordinates in vertical mode

nice and idiot proof