Rounded Avatar Box?

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?

http://puu.sh/cOiBu/0645897735.jpg

I want to put it in this white space.

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.

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.

Credit to Handsome Matt for this

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.

Are you using the old wiki or the new wiki?

New wiki, but it shouldn’t matter because

It looks like it isn’t using the rounded corners for the stencil.

http://puu.sh/cOpiA/f70edb018a.png

http://puu.sh/cOpdo/f3dea4eb61.png

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

http://puu.sh/cOqOG/733087738e.png

http://puu.sh/cOr17/ccbfbae7b4.png

http://puu.sh/cOqXR/2b6727f5fd.png

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]

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:

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: https://dl.dropboxusercontent.com/u/26074909/tutoring/poly/simplified_circles_with_poly.lua.html

Yepm acecool that draws dots…

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.

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

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.

RoundedBox != Circle…

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.

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!

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.

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.