Slick Forums

Discuss the Slick 2D Library
It is currently Sun May 26, 2013 2:47 am

All times are UTC




Post new topic Reply to topic  [ 17 posts ]  Go to page 1, 2  Next
Author Message
 Post subject: Outlined Fonts
PostPosted: Wed Aug 03, 2011 10:57 pm 
Offline
Regular
User avatar

Joined: Mon Feb 07, 2011 8:48 pm
Posts: 182
Location: United Kingdom
Me again (heh),

Before I explain what I am trying to achieve, take a quick look at my very basic 'work in progress' UI blueprint. Basically I'm slowly designing what I would like to achieve in photoshop, and then testing the mechanics of the design each time I add something new.

Image

Ignoring the fact it is very bland, unfinished, and basic, earlier I had a play around with fonts. Firstly in code, then later with your font converter tool. At the start I tried just porting across a bold version of verdana at size 9 and only managed to get a blurry mess (argh!), with some tweaking I almost had it across. I then tried messing around with the settings to get a neat 1px border around it as demonstrated in the screenshot... and failed miserably.

Is it possible using the tools already available to get a font across with a similar border affect as demonstrated in my screenshot? I just can't get it that sharp, and can't really get the border effect at all.

If this is a stupid question I apologise, I did play around for about two hours before coming on here to ask *another* question >.<;

Thank you for your time,
Liam


Top
 Profile  
 
 Post subject:
PostPosted: Wed Aug 03, 2011 11:32 pm 
Offline
Slick Zombie

Joined: Fri Jan 29, 2010 7:02 pm
Posts: 1173
Hmm - never tried that - I will take a look at that soon (maybe weekend).

_________________
TWL - The Themable Widget Library


Top
 Profile  
 
 Post subject:
PostPosted: Wed Aug 03, 2011 11:42 pm 
Offline
Regular
User avatar

Joined: Mon Feb 07, 2011 8:48 pm
Posts: 182
Location: United Kingdom
That would be bloody awesome.


Top
 Profile  
 
 Post subject:
PostPosted: Thu Aug 04, 2011 9:46 pm 
Offline
Slick Zombie

Joined: Fri Jan 29, 2010 7:02 pm
Posts: 1173
The TWL Theme Editor can now add an outline to fonts when you use the "FREETYPE2" font renderer and enable "Create outline around glyphs".

_________________
TWL - The Themable Widget Library


Top
 Profile  
 
 Post subject:
PostPosted: Fri Aug 05, 2011 9:05 am 
Offline
Regular
User avatar

Joined: Mon Feb 07, 2011 8:48 pm
Posts: 182
Location: United Kingdom
Ace!

Tested and working really well. I wonder if I might push my luck a little bit and ask if we can override the padding? The letters are quite spaced (see screenshot).

Image

Also perhaps, as a final request, would it be possible to set the colour of the outline in the editor? That would be the icing on the cake so to speak ^^

Thank you very much for this modification, my GUI will benefit hugely from it :D

Liam

Edit: Thinking about it, for the borders to look tidy like they do in my mockup, the font borders overlay each other. Obviously this isn't possible in the font file itself, so perhaps an xml parameter in the font definition would be the best way to go?


Top
 Profile  
 
 Post subject:
PostPosted: Fri Aug 05, 2011 7:41 pm 
Offline
Slick Zombie

Joined: Fri Jan 29, 2010 7:02 pm
Posts: 1173
The outline is an (expensive) post processing effect. You can't do that "live" easily.
The advance should already be tweak-able in the font generator.

Colors for the outline can be added - but they will be affects by the same tinting as the rest of the font.

Would could be done is to create 2 fonts - one in the outline color (eg font color == outline color) and a 2nd one without outline - then give the outline one an advance of -2 and render them on top of each other.

_________________
TWL - The Themable Widget Library


Top
 Profile  
 
 Post subject:
PostPosted: Sun Aug 07, 2011 11:32 am 
Offline
Slick Zombie

Joined: Fri Jan 29, 2010 7:02 pm
Posts: 1173
Ok, the colors can now be customized (for the glyphs and the outline) and the default advance is now only +1 vs non outline.

_________________
TWL - The Themable Widget Library


Top
 Profile  
 
 Post subject:
PostPosted: Sun Aug 07, 2011 1:53 pm 
Offline
Regular
User avatar

Joined: Mon Feb 07, 2011 8:48 pm
Posts: 182
Location: United Kingdom
This is brilliant, thank you very much for these changes they are exactly what I was looking for! Time for me to start putting them to use ^.^;


Top
 Profile  
 
 Post subject: Update
PostPosted: Sun Aug 07, 2011 5:03 pm 
Offline
Regular
User avatar

Joined: Mon Feb 07, 2011 8:48 pm
Posts: 182
Location: United Kingdom
After mucking around with it for quite a while I decided the AA border applied by photoshop is sharper, so I went and manually edited the bordered font file in photoshop, replacing the letters and such with their sharper photoshop equivilants... an hour later (heh)...

Image

Reasonably sharp bordered fonts. Fantastic ^_^

I'm currently working through the xml minefield of your chat example, its all good stuff. Again, thankyou for your help with this, the bordered fonts make the UI (see original screenshot).

Liam


Top
 Profile  
 
 Post subject:
PostPosted: Sun Aug 07, 2011 6:06 pm 
Offline
Slick Zombie

Joined: Fri Jan 29, 2010 7:02 pm
Posts: 1173
You could have just asked for an option to turn of AA rendering in FREETYPE2 :)

_________________
TWL - The Themable Widget Library


Top
 Profile  
 
 Post subject:
PostPosted: Sun Aug 07, 2011 6:41 pm 
Offline
Regular
User avatar

Joined: Mon Feb 07, 2011 8:48 pm
Posts: 182
Location: United Kingdom
*commits suicide*

Please may I have an option to turn off AA rendering in FREETYPE2 xD


Top
 Profile  
 
 Post subject:
PostPosted: Sun Aug 07, 2011 7:35 pm 
Offline
Slick Zombie

Joined: Fri Jan 29, 2010 7:02 pm
Posts: 1173
In case you survived - option to disable AA is added :)

_________________
TWL - The Themable Widget Library


Top
 Profile  
 
 Post subject:
PostPosted: Sun Aug 07, 2011 8:26 pm 
Offline
Regular
User avatar

Joined: Mon Feb 07, 2011 8:48 pm
Posts: 182
Location: United Kingdom
;)

Thanks a lot ^.^

I know its unrelated to the topic, but I'm having some trouble getting a TextArea and EditField to show using a DialogLayout within a tab.

Should I make a new topic and post code examples? I feel like I'm kinda spamming your forum here heh ._.


Top
 Profile  
 
 Post subject:
PostPosted: Sun Aug 07, 2011 10:10 pm 
Offline
Slick Zombie

Joined: Fri Jan 29, 2010 7:02 pm
Posts: 1173
Yes, make a new post - and include any output which might appear on System.err

_________________
TWL - The Themable Widget Library


Top
 Profile  
 
 Post subject: Re: Outlined Fonts
PostPosted: Sun May 27, 2012 3:28 pm 
Offline

Joined: Wed Feb 22, 2012 2:09 am
Posts: 4
Hello. Would it be possible to have an option in TWL Theme Editor to change the font outline thickness? Thanks.


Top
 Profile  
 
Display posts from previous:  Sort by  
Post new topic Reply to topic  [ 17 posts ]  Go to page 1, 2  Next

All times are UTC


Who is online

Users browsing this forum: No registered users and 2 guests


You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot post attachments in this forum

Search for:
Jump to:  
Powered by phpBB® Forum Software © phpBB Group