draw.RoundedBoxOutline texture

I’m trying to create the a rounded box with no fill. (Outline)

If would work exactly like surface.DrawOutlinedRect, but with the rounded corners. Reading old threads I found this

http://forum.facepunch.com/showthread.php?t=1346145
http://forum.facepunch.com/showthread.php?t=833294

[lua]local texOutlinedCorner = surface.GetTextureID( “gui/td/rounded-corner” )

/---------------------------------------------------------
Name: RoundedBoxOutlined( bordersize, x, y, w, h, color, bordercol )
Desc: Draws a rounded box with a 1 pixel wide border - ideally bordersize will be 8 or 16
Usage: color is a table with r/g/b/a elements
---------------------------------------------------------
/
function draw.RoundedBoxOutlined( bordersize, x, y, w, h, color, bordercol )

x = math.Round( x )
y = math.Round( y )
w = math.Round( w )
h = math.Round( h )

draw.RoundedBox( bordersize, x, y, w, h, color )

surface.SetDrawColor( bordercol )

surface.SetTexture( texOutlinedCorner )
surface.DrawTexturedRectRotated( x + bordersize/2 , y + bordersize/2, bordersize, bordersize, 0 ) 
surface.DrawTexturedRectRotated( x + w - bordersize/2 , y + bordersize/2, bordersize, bordersize, 270 ) 
surface.DrawTexturedRectRotated( x + w - bordersize/2 , y + h - bordersize/2, bordersize, bordersize, 180 ) 
surface.DrawTexturedRectRotated( x + bordersize/2 , y + h -bordersize/2, bordersize, bordersize, 90 ) 

surface.DrawLine( x+bordersize, y, x+w-bordersize, y )
surface.DrawLine( x+bordersize, y+h-1, x+w-bordersize, y+h-1 )

surface.DrawLine( x, y+bordersize, x, y+h-bordersize )
surface.DrawLine( x+w-1, y+bordersize, x+w-1, y+h-bordersize )

end[/lua]

Would anyone mine creating a new texture to use? I’ve got little to no knowledge on how to do something like that and my .vtfs never save properly. (I suck with images)

note:

-bump- Anyone able to help or make a suggestion?

I don’t quite follow 100%; by no fill do you just want the outline?? Or do you want an outline around a box? This is a little “helper” function which draws one on top of another to give the illusion of a border of whatever thickness is defined. It doesn’t work well ( bleeds ) with transparency; but it is nice for little notification popups / tooltips…


//
// Helper-function which gives a "border" effect by drawing two objects over eachother - Josh 'Acecool' Moser
//
function draw.RoundedBorderedBoxEx( cornerDepth, x, y, w, h, color, borderSize, borderColor, topleft, topright, bottomleft, bottomright )
	draw.RoundedBoxEx( cornerDepth, x - borderSize, y - borderSize, w + borderSize * 2, h + borderSize * 2, borderColor, topleft, topright, bottomleft, bottomright );
	draw.RoundedBoxEx( cornerDepth, x, y, w, h, color, topleft, topright, bottomleft, bottomright );
end

//
// Simple helper-function Josh 'Acecool' Moser
//
function draw.RoundedBorderedBox( cornerDepth, x, y, w, h, color, borderSize, borderColor )
	local _corners = ( isnumber( cornerDepth ) && cornerDepth > 0 && cornerDepth % 2 == 0 ) && true || false;
	return draw.RoundedBorderedBoxEx( cornerDepth, x, y, w, h, color, borderSize, borderColor, _corners, _corners, _corners, _corners );
end

Just a simple helper-function whereby it draws 2 boxes, 1 under to give the illusion of border. Doesn’t work well with transparent without bleeding though… It does allow you to choose which corners to round and which to keep flat.

Example of what it is identical to:

/*
It’s hooked up to the same standard, that you can take the first 5 args and copy/paste them from the top layer, from the previous 2
that were needed, simply copy and base, and it’s done.

Example:
This:
draw.RoundedBorderedBox( 8, ScrW( ) / 2 - ( b + _textW ) / 2, -b, b + _textW, b + 25, Color( 50, 50, 50, 200 ), 1, Color( 250, 250, 250, 200 ) )

Is the same as:
draw.RoundedBox( 8, ScrW( ) / 2 - ( b + _textW ) / 2 - 1, -b + 1, b + _textW + 2, h or b + 25, Color( 250, 250, 250, 200 ) )
draw.RoundedBox( 8, ScrW( ) / 2 - ( b + _textW ) / 2, -b, b + _textW, h or b + 25, Color( 50, 50, 50, 200 ) )

By copying this straight into the new function, adding the dominant color, the border size and the border color:
8, ScrW( ) / 2 - ( b + _textW ) / 2, -b, b + _textW, h or b + 25

This:
draw.RoundedBorderedBox( 8, -b, -b, b*3 + _textW + 15, h or b + 25, Color( 50, 50, 50, 200 ), 1, Color( 250, 250, 250, 200 ) )

Is the same as:
draw.RoundedBox( 8, -b, -b + 1, b3 + _textW + 15 + 1, h or b + 25, Color( 250, 250, 250, 200 ) )
draw.RoundedBox( 8, -b, -b, b
3 +_textW + 15, h or b + 25, Color( 50, 50, 50, 200 ) )

By copying this straight into the new function, adding the dominant color, the border size and the border color:
8, -b, -b, b*3 +_textW + 15, h or b + 25

This:
draw.RoundedBorderedBox( 8, ScrW( ) - w, -b, ScrW( ) - ( ScrW( ) - w - b ), h or b + 25, Color( 50, 50, 50, 200 ), 1, Color( 250, 250, 250, 200 ) )

Is the same as:
draw.RoundedBox( 8, ScrW( ) - w - 1, -b + 1, ScrW( ) - ( ScrW( ) - w - b ), h or b + 25, Color( 250, 250, 250, 200 ) )
draw.RoundedBox( 8, ScrW( ) - w, -b, ScrW( ) - ( ScrW( ) - w - b ), h or b + 25, Color( 50, 50, 50, 200 ) )

By copying this straight into the new function, adding the dominant color, the border size and the border color:
8, ScrW( ) - w, -b, ScrW( ) - ( ScrW( ) - w - b ), h or b + 25
*/

Just make a transparent PNG of a quarter arc.

Load it with Material( “path/to/it.png”, “smooth” )

And then set it with surface.SetMaterial instead of surface.SetTexture

No reason to use a vtf for something like this unless you need to take advantage of material proxies or shader parameters.

Thanks for trying Ace, but I’m trying to have the box transluncent/transparent so if there is another box behind it then it wont have the same effect. I just need the rounded outline.

Ok thanks Kogitsune I’ll give that a try.

Thanks again Kogitsune it worked well enough. It still appeared a little pixelie at the some parts.

Then the next best thing would be to make it multiple times larger than you need it to be and scale down.

Which you’d ideally draw at 16px for a thickness of 1.