Rounded Avatar Box?

[SaintSin6]

Hey Facepunch,

I need some help, I am trying to create a rounded avatar image. It would be the same as a using the function draw.RoundedBox.
Any suggestions or thoughts come to mind on how to do this?

[img]http://puu.sh/cOiBu/0645897735.jpg[/img]
I want to put it in this white space.

[Rubat]

There's only one solution - stencils. There was like 10 posts about circular avatars, I am sure you can find those posts and change the code to mask your shape instead of a circle.

[SaintSin6]

Ahhh damn! Stencil is the word I was looking for. I was searching all over for crop and things like that.

Thanks, I'll look into it.

[Ilyaaa]

[url]http://pastebin.com/FVEKbxM9[/url]

Credit to Handsome Matt for this

[SaintSin6]

I'm having issues getting Handsome's script to work. It doesn't appear to make any change. I am just getting my avatar image at the defined size.

[BoxOfFlex]

[QUOTE=SaintSin6;46475387]I'm having issues getting Handsome's script to work. It doesn't appear to make any change. The wiki uses different ENUMs, but they also seem to have no effect.
I am just getting my avatar image at the defined size.[/QUOTE]

Are you using the old wiki or the new wiki?

[SaintSin6]

New wiki, but it shouldn't matter because
[quote]These enumerations are the same as STENCILOPERATION_*[/quote]
[url]http://wiki.garrysmod.com/page/Enums/STENCIL[/url]

It looks like it isn't using the rounded corners for the stencil.
[img]http://puu.sh/cOpiA/f70edb018a.png[/img]

[img]http://puu.sh/cOpdo/f3dea4eb61.png[/img]
Although it does crop it.

EDIT: I need some more help. I've been messing around with this, but it appears like the roundedbox just creates a square stencil
[img]http://puu.sh/cOqOG/733087738e.png[/img] - [img]http://puu.sh/cOr17/ccbfbae7b4.png[/img] - [img]http://puu.sh/cOqXR/2b6727f5fd.png[/img]

[keensta]

I used this stencil that was posted by Matt before and it didn't work I had to modify it slightly, I used it for circular Avatarimages.

So I've just changed my stencil code to what you need so below code should work haven't tested and if it doesn't work when I get back tonight I'll get it working.

[lua]
local PANEL = {}
PANEL.Done = false
PANEL.maskSize = 16 --Defult for 32

function PANEL:Init()
self.Avatar = vgui.Create("AvatarImage", self)
self.Avatar:SetPaintedManually(true)
end

function PANEL:PerformLayout()
self.Avatar:SetSize(self:GetWide(), self:GetTall())
end

function PANEL:SetMaskSize(size)
self.maskSize = size
end

function PANEL:Paint(w, h)
if ( self.Done == true ) then
return
end

render.ClearStencil()
render.SetStencilEnable(true)

render.SetStencilWriteMask( 1 )
render.SetStencilTestMask( 1 )

render.SetStencilFailOperation( STENCIL_REPLACE )
render.SetStencilPassOperation( STENCIL_ZERO )
render.SetStencilZFailOperation( STENCIL_ZERO )
render.SetStencilCompareFunction( STENCIL_NEVER )
render.SetStencilReferenceValue( 1 )

draw.RoundedBox(18, 0, 0, w, h, color_white)

render.SetStencilFailOperation( STENCIL_ZERO )
render.SetStencilPassOperation( STENCIL_REPLACE )
render.SetStencilZFailOperation( STENCIL_ZERO )
render.SetStencilCompareFunction( STENCIL_EQUAL ) -- STENCILCOMPARISONFUNCTION_EQUAL will only draw what you draw as the mask.
render.SetStencilReferenceValue( 1 )

self.Avatar:SetPaintedManually(false)
self.Avatar:PaintManual()
self.Avatar:SetPaintedManually(true)

render.SetStencilEnable(false)
render.ClearStencil()

self.Done = true
end

function PANEL:SetPlayer(ply, size)
self.Avatar:SetPlayer(ply, size)
end

function PANEL:SetSteamID(steamid, size)
self.Avatar:SetSteamID(util.SteamIDTo64(steamid), size)
end

vgui.Register("FancyAvatarImage", PANEL)
[/lua]

[robbert^^]

Why don't you just make a DFrame, paint it as a rounded box and display the avatar in there? It will cut of the edges of the avatar so it will look like it has rounded corners :v:

[CertifiedCode]

[url]http://wiki.garrysmod.com/page/surface/DrawCircle[/url]

[Acecool]

That draws a lot of dots if I recall correctly; or just lines from each point. You should be able to use this circle poly maker as a stencil: [url]https://dl.dropboxusercontent.com/u/26074909/tutoring/poly/simplified_circles_with_poly.lua.html[/url]

[CertifiedCode]

Yepm acecool that draws dots...

[robbert^^]

[QUOTE=Acecool;46478465]That draws a lot of dots if I recall correctly; or just lines from each point. You should be able to use this circle poly maker as a stencil: [url]https://dl.dropboxusercontent.com/u/26074909/tutoring/poly/simplified_circles_with_poly.lua.html[/url][/QUOTE]
That with stencils is rather exspencive if he ( atleast i assume he is ) going to draw this as a hud.

Doing what i said is the cheapest way and the easiest. It's going to cut off parts of the avatar anyway.

[Kamshak]

[QUOTE=SaintSin6;46475407]New wiki, but it shouldn't matter because

EDIT: I need some more help. I've been messing around with this, but it appears like the roundedbox just creates a square stencil[/QUOTE]
that's because roundedbox just draws quads with textures on it (the rounded edges are textures with DrawTexturedRectUV - not polygons. correct me if wrong). Acecool is right about using Polys. Most of the surface operations are not suitable for stencil masks as they only write textured quads (for example text).

For better performance do the stencil masking only once and draw it to a texture RT, then just paint the circle avatar texture instead of doing everything again

[Acecool]

And, instead of creating a poly table each frame, create it once and change on resolution change. Setting it up as a texture like Kamshak says is also a fantastic method because you can do a few expensive operations right off the bat, then it is a simply draw function afterwards.

[Exho]

[QUOTE=CertifiedCode;46478338][url]http://wiki.garrysmod.com/page/surface/DrawCircle[/url][/QUOTE]

RoundedBox != Circle...

[SaintSin6]

Just for clarification, this is not for a HUD it will be apart of a menu. I'll mess around with the suggested solutions now and get back to you guy, thanks for the replies.

Also like Exho said, I am looking for a rounded box, not a circle.

EDIT:
Hey Robbert^^,
I get what you're saying, but not sure how I would execute that. Mind giving me an example?
My issue is I can't figure out how to create a rounded container.

@ keensta
No success, still square edges.

[robbert^^]

sure!
[lua]
//first create the default panel we're going to parent the avatar image to.
Panel = vgui.Create( "DFrame" )
Panel:SetSize( 16, 16 )
Panel:SetPos( 10, 10 )
Panel:SetVisible( true )
Panel:MakePopup()
Panel:SetDraggable( false )
Panel:ShowCloseButton( false )
panel.Paint = function()
draw.RoundedBox( 16, 0, 0, Panel:GetWide(), Panel:GetTall(), Color( 255, 255, 255, 255) )
end
//create the avatar image
avatarImage = vgui.Create( "AvatarImage", Panel )
avatarImage:SetSize( 16, 16 )// same size
avatarImage:Center()//center it
avatarImage:SetVisible( true )
avatarImage:SetPlayer( LocalPlayer(), 64 )//set the player
[/lua]

there are more function to DFrame's, like:
[lua]
Panel.OnCursorEntered
Panel.OnCursorExited
Panel.OnMousePressed
[/lua]

and these can be used like above:
[lua]
Panel.OnCursorEntered =function()
surface.PlaySound( "funny/sound/here" )
end

Panel.OnCursorExited = function()
surface.PlaySound( "funny/sound/here" )
end

Panel.OnMousePressed = function ()
surface.PlaySound( "funny/sound/here" )
end

[/lua]

hope this will help you for other thing later on. Good luck!

[SaintSin6]

Although the DFrame paints a roundedbox, you're not actually changing the shape of the container, so the container would still be a 16x16 square with rounded box inside it. Putting an avatar image that was 16x16 would just cover the box with a square image.

[SaintSin6]

So since the corner texture is still a rotated square I guess it won't work nicely using rounded box, but I'll try drawing using the circle poly to make a rounded box.

[MDave]

[QUOTE=Handsome Matt;46495851]It'd be great if we could use textures as stencil masks, but as far as I've experimented with it, it simply isn't possible. Would be a great addition to add.[/QUOTE]

I made it to work a while ago, [URL="http://facepunch.com/showthread.php?t=1408855"]even wrote a guide about it[/URL] so people would be more aware, but it did not get much attention.
I think it is useful to read the whole thing, but if you are only looking for the mask part, find the paragraph "Image 2-3-4"

local iconShadow = CreateMaterial( "icon_shadow", "UnlitGeneric", {
    [ "$basetexture" ] = "error",    
    [ "$alphatest" ] = 1,
 } )


iconShadow:SetTexture( "$basetexture", icon:GetTexture( "$basetexture" ) )

[keensta]

Just a questions I'm still quite new to stencils how would I go about adding it to texture RT

[SaintSin6]

So it isn't perfect, but it appears to get the job done. I've combined the stencil code from Handsome Matt with the circle poly from Acecool to manually create a rounded box and stencil.

So if anyone has a better way of doing it please tell me, but here is what I've got.

It is a bit ugly, but it gets the job done.
[url]http://pastebin.com/pZBAgNv9[/url]

[lua]-- Thanks Acecool and HandsomeMatt for your code

local function DrawRoundedBox( _r, _x, _y, _w, _h )
_r = _r > 8 and 16 or 8
local _u = ( _x + _r * 1 ) - _x
local _v = ( _y + _r * 1 ) - _y

local points = 64
local slices = ( 2 * math.pi ) / points
local poly = { }

X, Y = _w-_r, _h-_r

for i = 0, points-1 do
local angle = ( slices * i ) % points
local x = X + _r * math.cos( angle )
local y = Y + _r * math.sin( angle )

if i == points/4-1 then
X, Y = _x+_r, _h-_r
table.insert( poly, { x = X, y = Y, u = _u, v = _v } )
elseif i == points/2-1 then
X, Y = _x, _r
table.insert( poly, { x = X, y = Y, u = _u, v = _v } )
X = _x+_r
elseif i == 3*points/4-1 then
X, Y = _w-_r, 0
table.insert( poly, { x = X, y = Y, u = _u, v = _v } )
Y = _r
end

table.insert( poly, { x = x, y = y, u = _u, v = _v } )
end

return poly
end

local poly = DrawRoundedBox( 16, 0, 0, 84, 84 )
local _material = Material( "effects/flashlight001" );

local PANEL = {}

function PANEL:Init()
self.Avatar = vgui.Create("AvatarImage", self)
self.Avatar:SetPaintedManually(true)
end

function PANEL:PerformLayout()
self.Avatar:SetSize(self:GetWide(), self:GetTall())
end

function PANEL:Paint(w, h)
render.ClearStencil()
render.SetStencilEnable(true)

render.SetStencilWriteMask( 1 )
render.SetStencilTestMask( 1 )

render.SetStencilFailOperation( STENCILOPERATION_REPLACE )
render.SetStencilPassOperation( STENCILOPERATION_ZERO )
render.SetStencilZFailOperation( STENCILOPERATION_ZERO )
render.SetStencilCompareFunction( STENCILCOMPARISONFUNCTION_NEVER )
render.SetStencilReferenceValue( 1 )

draw.NoTexture( );
surface.SetMaterial( _material );
surface.SetDrawColor( color_black )
surface.DrawPoly( poly )

render.SetStencilFailOperation( STENCILOPERATION_ZERO )
render.SetStencilPassOperation( STENCILOPERATION_REPLACE )
render.SetStencilZFailOperation( STENCILOPERATION_ZERO )
render.SetStencilCompareFunction( STENCILCOMPARISONFUNCTION_EQUAL )
render.SetStencilReferenceValue( 1 )

self.Avatar:SetPaintedManually(false)
self.Avatar:PaintManual()
self.Avatar:SetPaintedManually(true)

render.SetStencilEnable(false)
render.ClearStencil()
end

vgui.Register("AvatarMask", PANEL)

-----------------------------

local test = vgui.Create( 'AvatarMask', self )
test:SetPos( self:GetWide()/2, self:GetTall()/2 )
test:SetSize( 84,84 )
test.Avatar:SetPlayer( LocalPlayer() )

[/lua]

[img]http://puu.sh/cS4YH/2cd701d62c.png[/img]