Great looking on screen text, studying successful art styles

Discussion in 'Game Development (Technical)' started by BigRookGames, Feb 12, 2012.

  1. BigRookGames

    BigRookGames New Member

    Joined:
    Nov 8, 2010
    Messages:
    11
    Likes Received:
    2
    Recently I have been paying a lot of attention to in-game onscreen text in many AAA games to understand what is behind creating text on screen that looks great. When developing my own stuff, I have always felt the on screen text has been a weak point of my game's presentation. It just looks incredibly flat and boring, unprofessional really. I am not the greatest graphic designer or artist (probably closer to one of the worst) but I'm looking for maybe some hints/tips/anatomy behind making it fit right into the game's environment.

    Looking at some games that i feel have great screen text, first I thought there was something about having a glow or border around the text that made it pop or fit right while being placed ontop of the environment, for example:
    [​IMG]
    In this screen from split second, it just seems to fit. Looks great here, doesn't really look like it is just plastered onto the screen over the 3d rendering, it feels more like it is in the game and not ON the screen. I know that the blue meter helps the illusion that it is actually in the game but even without it i think it would look great. It seems here that there is a bit of glow to the letters, maybe that helps.

    another example:
    [​IMG]
    in this final fantasy screen, it is very simple, and has a shadow + black border on the letters, but still looks good in my opinion.

    After seeing a lot of screens like this I thought the text needed some sort of glow/gradient/shadow etc.. but then you have your fps that usually have none of these. Halo Reach for example:

    [​IMG]

    Here we have solid color, non-effects text and still manages to look good on screen. Doesn't have the ameture feel that throwing arial black font has that is so familiar to many indie games, yet it is just as simple.

    Each game I go through I try to improve on things I thought my last game lacked, and this is definitely one of the subjects I have failed.

    If anyone has any pointers, hints, suggestions/guidelines that they use when using on screen text, please I would greatly benefit from any experience you have. Also if you know of games that the in-game text is fantastic, leave your thoughts here and let others learn from the better examples out there already in games.

    And here I will leave below a screen from my project that I just hate:
    [​IMG]
     
  2. svero

    Moderator Original Member Indie Author

    Joined:
    Jul 27, 2004
    Messages:
    3,392
    Likes Received:
    6
    A lot of it comes down to selecting the right font, and then rendering the letters nicely. In your screenshot the font selection looks poor, and the rendering of the letters themselves seems to be aliased and very thin (partly this is font AND font style.. bold etc..) A lot of games pre-render fonts in a graphic app like photoshop as a set of letters in a gridded file with transparency or as a black and white mask. Photoshop will do a nice job of smoothly rendering a letter or a letter with a fancy style pre-applied. And then they use text files to say where the letter is in the src file and they just blit a copy to the screen. You can combine this with effects like shadows/glows etc... there are some apps floating around that will autogenerate files and configs like this, but don't ask me where :) They're out there though.
     
  3. Desktop Gaming

    Moderator Original Member Indie Author

    Joined:
    Feb 24, 2005
    Messages:
    2,295
    Likes Received:
    12
    I don't think it's prticularly the font, it's the flat blocks of solid colour that are making it look bad.
     
  4. lennard

    Moderator Original Member Indie Author

    Joined:
    Jan 12, 2006
    Messages:
    2,391
    Likes Received:
    12
    Good thread, a topic near and dear to my heart.

    In your example I'd like to see more contrast between the white and the green backdrop as well as a fatter font.
     
  5. Bram

    Indie Author Greenlit

    Joined:
    May 1, 2010
    Messages:
    181
    Likes Received:
    2
    The trick is to use a bold face font, with an outline.

    If you use a bold face (fat characters) in a light colour, e.g. White, and the edge of the font is dark like grey or black, then no matter what background it is rendered against, it will always show contrast.

    If it is rendered on light yellow background, then the outline will contrast, making it legible.

    If it is rendered on a dark blue background, the outline will be hard to see, but the text will still de legible because of the stark contrast with white face.

    You can make the outline more subtle than this too:
    Just a darker tone of the face will suffice.
    Edges darker than interior is more natural though, as front lint objects are darker on edges than on front facing parts.

    Also note:
    You can reverse everything, dark face with light outline. That will be just as legible.

    Bram
     
  6. BigRookGames

    BigRookGames New Member

    Joined:
    Nov 8, 2010
    Messages:
    11
    Likes Received:
    2
    @Desktop Gaming - I am going with the metro style blocks in all of the menus because I am integrating the game with Kinect controls. I think as far as menu navigation using the kinect, the metro style MS blocks are the way to go. I did modify a bit below, see if that looks any more appealing.
    Thanks Bram, I will probably add an outline to see how it looks, but I think your right it will really help out.

    modified a bit here, I don't think the green went well with the orange tint of the lighting so i chose blue instead:
    [​IMG]
     
  7. lennard

    Moderator Original Member Indie Author

    Joined:
    Jan 12, 2006
    Messages:
    2,391
    Likes Received:
    12
    Or even, as the top "press to trigger example shows" sometimes do light glow with light text as long as the glow edge alongside the font has enough contrast. This is a very helpful conversation for me right now as I touch up a project that sprung fully formed for me in the past month.
     
  8. dannthr

    dannthr New Member

    Joined:
    May 11, 2007
    Messages:
    456
    Likes Received:
    2
    You need to use a color and texture palette that fits with the game itself. You can see the entire color scale for the FF13 one in the radiating circle under the character, same with the Split Second example, the text color style is pulled straight from the in-game/model attached details. Even the Halo Reach example has a font style that fits with all the other in game stuff like the text over the enemy, the targeting reticle, moreover the art style is similar to the expected art style of the period/setting, even not too much of a reach off the weapon display itself.
     

Share This Page

  • About Indie Gamer

    When the original Dexterity Forums closed in 2004, Indie Gamer was born and a diverse community has grown out of a passion for creating great games. Here you will find over 10 years of in-depth discussion on game design, the business of game development, and marketing/sales. Indie Gamer also provides a friendly place to meet up with other Developers, Artists, Composers and Writers.
  • Buy us a beer!

    Indie Gamer is delicately held together by a single poor bastard who thankfully gets help from various community volunteers. If you frequent this site or have found value in something you've learned here, help keep the site running by donating a few dollars (for beer of course)!

    Sure, I'll Buy You a Beer