Game Design 2: Text (2011)

Editor's Notes

• #2: OK, so - we are going to be looking at how you can use text in your designs.\n\nThis isn’t as simple as ‘you write things in text’ - it’s more about text as design aid rather than just about writing.\n
• #3: Much of this is inspired by content from Duarte and Fox.\n\nDuarte is the book on presentation slides. Slide-ology. It’s a really good design text, even if it’s not specifically about games. You should check it out - there is a copy in the library.\n\nI will provide anything you need to know in class - but your understanding would be deeper if you also engaged with the text.\n
• #4: So, as I said, we’re not really talking about text as in ‘writing stuff’ - although of course, that is part of a design.\nWe’re going to look at text as part of visual design. How can text visually contribute to your design goals.\nHow can text be used to help visualise data.\n\n
• #5: The first, and in some ways, most powerful design space for text is in its personality.\nFonts have personality! \n
• #6: Look at this screenshot from Frozen Synapse.\n\nThere are three fonts used here. Why didn’t they use just one font?\n\nThe clean, easy to read font is on the information panel.\n\nThe blocky mixed case font feels militaristic and helps add tone to the map.\nThe button text is in all caps and stands apart from the rest of the info panel text.\n\n
• #7: Contrast it with a screenshot from Angry Birds - there is very little text, but what is interesting is the font choice. It’s a playful, cartoony font that accentuates the design. \n\nSo - fonts have personality.\n
• #8: Fonts can also be used functionally.\n\nWhen you program, you used fixed width fonts. Normally fonts use different spacing depending on the letter. A letter ‘l’ uses less space than the letter ‘O’.\n\nBut because in programming, you need to pay attention to positioning, you need to use a font that is designed for functionality.\n\nAnother functional use of fonts is Optical Character Recognition. It is hard for computers to tell the difference between some letters. O vs 0 - L vs I.\n\nSo these fonts are designed for a purpose - they are functional. \n\nIt might not seem likely that you are ever in the position of actually designing a font - but it can be really hard to find a font that suits your subject - particularly if you’re designing for an international audience - something that I’ll talk about in a wee bit.\n\n\n
• #9: So let’s have a breakdown of font components.\n
• #10: The absolute top of a font is called the cap height.\n
• #11: the half-size level, that small letters and the curve of a ‘d’ etc reach is called the x height\n\n
• #12: the baseline is the bottom of most letters\n
• #13: \n
• #14: Naturally the bit below this baseline is called the Descender. \n\nThe bit above the x height, but below the cap height is called the ascender\n
• #15: These wee decorative bits are called serifs. That’s why a font can be called a serif font or a sans-serif font. Sans means ‘without’ so the sans-serif fonts are fonts without the serifs.\nPeople generally tend to use serif fonts for headings - they seem more formal.\n
• #16: the holes in letters are known as counters\n
• #17: and the kerning is the spacing - it is the kerning that deals with the differences between ‘l’ and ‘O’\n
• #18: \n
• #19: so as we said, the serifs connect letters.\n\nthe are generally considered easier to read than sans-serif fonts when you are using very small font sizes. \n\nSimilarly they are good in large paragraphs as They sort of lead the eye. \n\nHowever, they are known to be problematic for dyslexics.\n
• #20: Sans serif fonts are normally easier to read and more pleasant on the eye. \n\nUsually said to work better on computer screens. \n\nHelvetica, Verdana - these are sans serif fonts. Times New Roman is a serif font.\n
• #21: Ligatures are special rules that connect letters in certain circumstances. Note the F and the L here compared to the F and the i.\n\nLigatures help on an aesthetic level to make the text more appealing.\n
• #22: Style wise - it is rarely a good idea to use lots of different fonts. The reason to mix fonts at all is to draw a distinction between items. \n\nSo having too many fonts not only clashes and can hurt the aesthetic, but it also defeats the whole purpose.\n\nGenerally speaking, you want to aim to use no more than two fonts on one project. You can use more than that, but you should have a good reason, and give consideration to your motives before doing so.\n
• #23: OK, so remember, we’re discussing how you can use text to aid in your game’s design aesthetic and communication.\n\nWe aren’t talking about the user reading pages of text, we’re talking about the selective use of text in otherwise non-textual environments.\n\nYou want the text to POP off the background. Here are a couple of ways you can do that.\n\nYou can use contrast and colour.\n\n(read half slide)\n\nIf your game is going to vary up the background, you cannot just rely on one tone of text, you need to find some other way to make it pop.\n\nOne way is to put a one or two pixel border around the text. \nAnother way is to put the text inside a container that guarantees some level of contrast.\n
• #24: Here we can see Half Life 2. They opted to place the text inside a container with a high transparency. \n\nThis is a good choice here because you don’t obscure the environment with an opaque UI - so it’s a gentle overlay - but it still gives enough contrast in a changing environment. \nNote the effectiveness on the light stony area as well as on the dark gun.\n\n
• #25: On e-Bug, I used the container idea. This is partially because of the way that Flash 8 (which is what I wrote this in) renders text. It uses the OS subsystem to render text using fonts. So you can’t just drop an outline on text.\n\n
• #26: World of Goo on the other hand uses a mixed methods approach.\n\nIn-game information is provided with a pixel outline.\nExtra-game or meta-game information is given through a container.\n\nThis is a good example of quality design. Instead of just using a method that works, they have used both techniques to add another level of information.\n\nIn your coursework, and beyond - when you’re doing IP3, Honours projects - and even commercial games - I don’t want to see you settling for the first idea that comes into your head. I want to see clever, subtle use of all the techniques at your disposal.\n\nOne good point to remember here is that any time you make a change - you make it for a reason.\n
• #27: Another tool at your disposal is animation.\n\nAnimation really attracts the eye. So you should only use it when you want to attract the eye!\n\nA good example is the Nintendo style of typing in conversation text live as a character speaks. The animation of the text gives the impression of the NPC speaking.\n\nUsing colour to respond to actions like a mouse-over is a good idea.\n\nBut using lots of colour - just to make the GUI shiny is a less good idea. Colour is a weapon that you use to make things stand out. Use it for a reason.\n
• #28: I’ll alt-tab to a live window here to show you what I mean by the conversation text here - see how the character’s speech is animated.\n
• #29: So - where possible, you should try to show the user that something is happening, rather than ‘tell’ them that something is happening.\n\nWe all have seen crappy tutorials where you have to read what you’re supposed to do and then do it. Contrast that with good tutorials that walk you through scenarios with context sensitive support.\n\nBut of course, where necessary, it is OK to *tell*. As Tufte says “to clarify, add details”.\n\nAs a general rule, you want to use little text. \nEven in adventure games, that rely on story - even those without audio dialogue - people are still very intolerant of reading too much text.\n\nI found this out the hard way with my detective game. I would take the game to schools for play test sessions and it was quite heartbreaking to spend weeks writing dialogue and see a student just firing through it without even reading - and then of course, they would say ‘what am I supposed to do?’\n\nThis isn’t a problem that is unique to me though - even on WOW, they’ve identified this issue - and the lead designer actually enforces a maximum limit on quest text.\n\n\n
• #30: As said before, using colour or emphasis can really help important information POP.\n\nYou need to make sure your text can cope with all resolutions and sizes - e.g. try upscaling an old RTS to a modern high res monitor - you can barely SEE the icons, never mind read the text.\n\n\n
• #31: So, I’m going to show you some ways that text can be used to communicate data to a user.\n\nWord clouds, like this one from flickr not only show which words have been used to tag photographs, but also the frequency with which they are used. They have additional functionality in that you can even click on the word to see all the images tagged with this term.\n
• #32: This is another example of a word cloud based on the content of the course blog.\n\nCan you imagine a game scenario that might benefit from word cloud usage?\n
• #33: There is another information visualisation using words. This shows how terms are related.\n\n
• #34: Of course, we have traditional uses of text - you can see the scores here - you can see the player names. But more interestingly, look at how the tops have numbers on them. In American Football, the number isn’t just a unique identifier of a player - it is also a player-class.\n\nPlayers with numbers between 50 and 90 aren’t usually allowed to catch the ball when it’s passed. There is a reason that so much space is used to display the number. \n
• #35: Naturally, we have the basic use of text to label. In this case, cities.\n
• #36: And we also use text to communicate quantities where it is important that the user know the exact number, and where it would be cumbersome to just show X items (e.g. 4 stars, or 10 marios)\n\n(note here the font use - they have two fonts on show, and all the numbers are consistent - and the font itself is playful).\n
• #37: We also use plain old text when we need to communicate. This is of course common, but since people tend to not enjoy reading in games, you should try to avoid putting too much text in unless you have no alternative.\n\nWe could have swapped Agree / Don’t Know / Disagree here for tick, cross, question - but even that has some ambiguity (double negative? - question mark? ) and you couldn’t substitute the question.\n\nIn the past, where I have asked an exam question on text, students have failed the question by talking about PLACES where text is used:\n\nE.g. - text is used in menus, in descriptions, in tutorials, in tool-tips, in help files etc...\n\nWhat is more important is HOW - HOW do you use text? What are the design opportunities offered by text? How do you DESIGN with text.\n\n\n
• #38: Finally, I mentioned earlier how I would return to the problems caused by internationalisation.\n\nOne problem you face is that all fonts are not international compliant. We had a huge problem on e-Bug finding good fonts that would work for foreign alphabets. And we weren’t talking Mandarin - even the extended European character set caused problems as did the Cyrillic alphabet.\n\nYou would find that most 3rd party fonts just lacked those characters.\n\nSo if you are in charge of design, you need to make sure that you choose a font that is UTF-8 compliant - that should mean that it supports the full character set.\n\nYou have to be careful when copy /pasting as some apps don’t support UTF-8 (word / notepad) - your computer may not warn you - but may be changing characters on the fly.\n\nFinally, you need to be aware of platform limitations. Macs have different default fonts than Windows - so you may need to embed your font in your game.\n\nAlso, as I mentioned with Flash 8 (and I THINK current versions also) the OS font subsystem is used to render fonts. This means that you cannot simply rotate a font, or add an outline to it, or animate it etc...\n\nIn Flash, if you have ‘static text’ - that is, text you add when designing it, you can do what you like because Flash will convert that text into an outline and treat it like any other shape - but if you let the user enter text - like in a quiz or even their name etc... you can’t rely on this working.\n
• #39: \n