Animated text getting bigger when hovered onto.

[TheNooblycore]

Was just wondering on how I could create animated text for a button I hover onto. The text would get slightly bigger when hovered onto and the go back to normal size. I know how to animate vgui's already but this I don't know this.

Code I have so far(is broken though and just makes text smaller instantly):

Fonts:

surface.CreateFont( "TopRowF", {
	font = "Arial",
	size = 15,
	weight = 700,
	blursize = 0,
	scanlines = 0,
	antialias = true
} )

surface.CreateFont( "animFontBase", {
	font = "Arial",
	size = math.Clamp(math.sin( CurTime() * 1.001 ) * 2, 10, 20), -- This is probably a stupid idea
	weight = 700,
	blursize = 0,
	scanlines = 0,
	antialias = true
} )

Code(This is just the button extracted from the rest of the code):

	local dashboardButton = vgui.Create( "DButton", self )

	dashboardButton:SetSize( x*0.125, y*0.09 )
	dashboardButton:SetPos( 50, 4 )
	dashboardButton:SetText("")
	dashboardButton.Paint  = function(s , w , h)
		draw.RoundedBox( 0, 0, 0, w, h, Color( 255, 255, 255, 0 ) )
		draw.SimpleText( "DASHBOARD", "TopRowF", w/2, h/2, Color( 220, 220, 220, 255 ), TEXT_ALIGN_CENTER, TEXT_ALIGN_CENTER )
	end
	dashboardButton.OnCursorEntered = function( self )
		dashboardButton.Paint  = function(s , w , h)
			draw.RoundedBox( 0, 0, 0, w, h, Color( 255, 255, 255, 0 ) )
			draw.SimpleText( "DASHBOARD", "animFontBase", w/2, h/2, Color( 220, 220, 220, 255 ), TEXT_ALIGN_CENTER, TEXT_ALIGN_CENTER )
		end
		surface.PlaySound( "menu_select.wav" )
	end
	dashboardButton.OnCursorExited = function( self )
		dashboardButton.Paint  = function(s , w , h)
			draw.RoundedBox( 0, 0, 0, w, h, Color( 255, 255, 255, 0 ) )
			draw.SimpleText( "DASHBOARD", "TopRowF", w/2, h/2, Color( 220, 220, 220, 255 ), TEXT_ALIGN_CENTER, TEXT_ALIGN_CENTER )
		end
	end

[MysteryPancake]

There isn't a way to dynamically change the font size of text in Garry's Mod without making a new font every time, sadly- and this is quite laggy to do.

However, I think you can sort-of make the font/text look dynamically bigger by using matrixes, which you can also use to rotate text. There's an example for how to change text with matrixes [URL="http://www.facepunch.com/threads/1089200?p=32614030&viewfull=1#post32614030"]here[/URL].
I think you just need to change mat:Scale to be however big you want the text to be.

[editline]29th July 2016[/editline]

I've never really messed with matrixes before though, but I think they would work for resizing text as well as rotating it

[TheNooblycore]

I'll try experimenting with some of the values, although I suck at LUA :/ Maybe someone could do it for me... too much to ask... yea, though so.

[editline]29th July 2016[/editline]

Welp, I can't do shit. R.I.P in dreams of animated text.

[MysteryPancake]

I was wondering if matrixes still worked in gmod so I tried something, and they do still work fine. Try this, it makes the text bigger when you hover over the button.

local function DrawSizedText( size, txt, x, y, font, col )
	local mat = Matrix()
	mat:SetTranslation(Vector(x,y,0))
	mat:Scale(Vector(size,size,0))
	surface.SetFont( font )
	surface.SetTextPos( 0, 0 )
	surface.SetTextColor( col )
	cam.PushModelMatrix(mat)
		surface.DrawText( txt )
	cam.PopModelMatrix()
end

local p = vgui.Create( 'DFrame' )
p:SetSize( 500, 500 )
p:Center()
p:MakePopup()

local b = vgui.Create( 'DButton', p )
b:SetText('')
b:Dock(FILL)
function b:PaintOver( w, h )
	DrawSizedText( math.sin( CurTime() ), 'Test text', w/2, h/2, "DermaDefault", Color( 0, 0, 0, 255 ) ) -- this makes it resize based on CurTime() regardless of whether or not the button is being hovered
end

The only problem is I'm not sure why the text teleports back, but hopefully you can figure that out

[editline]29th July 2016[/editline]

Wait, I just figured it out. If you change the scale of a matrix it offsets the translation of it as well

[Gmod4phun]

Why dont you just create the same font 2 times, but with different size. Then, you would just change the font of the text if you hover over it.

[MysteryPancake]

[QUOTE=Gmod4phun;50794164]Why dont you just create the same font 2 times, but with different size. Then, you would just change the font of the text if you hover over it.[/QUOTE]

I think he wants it to animate smoothly, which is better to do with matrixes since you'd need to create a ton of fonts without them

Unless you DO want it to only switch between two sizes with no animation- then yeah, just make two fonts

[TheNooblycore]

I tried it and it isn't very smooth, I just ended up going with I had planned for earlier. Maybe i'll come out with a smooth way to animated text. I have a few ideas like to paint text on an invisible vgui.Create("Editablepanel") and have that animated like self:MoveTo and self:NewAnimation

[editline]29th July 2016[/editline]

close thread ples

[MysteryPancake]

[QUOTE=TheNooblycore;50794188]I tried it and it isn't very smooth[/QUOTE]
Yeah, that's cause I made it toggle between two sizes- [sp]which you probably would've noticed if you actually read any part of my last post[/sp]. Also, you couldn't paint text on an editable panel and use MoveTo or ScaleTo because that still wouldn't change the font size of the text.

[editline]29th July 2016[/editline]

Here's a smooth version:
:snip: Replaced my previous code post with it

[editline]29th July 2016[/editline]

The reason it seems to drift off the panel and do weird stuff is because of the offset caused by scaling the matrix- which could be fixed if I wasn't stupid enough to not know how to fix it

[editline]29th July 2016[/editline]

Also:
[QUOTE=TheNooblycore;50794188]close thread ples[/QUOTE]
You can close it with the button at the top-left of this page- but please don't close it yet, I really want to force you to use matrixes because I'm a pain in the ass

[TheNooblycore]

This is an Editable Panel I got to be animated. This will slide up from the bottom of the screen with some fluid animations. For the text I just made 2 fonts.
[video]https://youtu.be/CG9YjqQh61g[/video]