Why Your Icons Suck

Anyone can make good game graphics if they just keep in mind a couple simple principles. Likewise, anyone can spend hours making graphics, just to end up with junk, if they fall for some very easy to make mistakes. This article is a simple list of dos and don'ts, with explanations. First, we'll start with some commonly seen graphics problems on BYOND.

Don't: I don't want to be a bald guy in a diaper, and neither do your players. An innumerable number of games on BYOND show their character's equipped items as overlays. Though this sounds like a good idea, it is rarely done well (in fact, I haven't seen it done well on BYOND). These are fantasies; people play video games because they want to be a big muscular guy with cool armor and a giant sword, something that most of us can't be in real life. The most important time to show players that they're cool is right at the beginning; if they log in and are shown a bald naked guy, and told 'this is you', they will leave. If you at least equip new characters with cool looking clothing or armor (and it's important that this happen before anything else so that they never see diaper man) then they may stick around long enough to play your game. Which of the two guys in the image below looks cooler to you? Which do you think the average gamer would rather be portrayed as? One is a Knight in resplendent gold armor with sword in hand, ready to kick ass. The other is underwear man. Before we move on, there's a couple more problems with the equipment overlay system. 1: Players rarely have all of one set (Example: all dragon armor), so almost all players look like walking piles of garbage, because the warlock gloves don't fit with the thief coat or the colors on the bishop's hat. 2: Players that want to look like knights (but can't afford all the dragon armor) don't want to look like a cross between a bishop, thief, and warlock. 3: All players at the highest level will have found the best armor, and will then look exactly the same. All in all, equipment overlay systems turn out terribly, and shouldn't be attempted without good reason.

Don't: Players shouldn't have to squint to see your icons. BYOND's standard icon size is 32 square pixels, a very small size on most people's monitors. If your players have to lean close to their monitors to see your awesome graphics, then you're ruining their eyesight for no good reason. There's good news! First, BYOND is making it really easy to work in graphics sizes larger than 32px. Second, you can now stretch out the size of the map. Back in the days of Mario and the Legend of Zelda, player icons were 16px, but nobody had problems seeing them; those icons were spread out onto a large TV, making them easy to see. If you use small icons, then stretch out the map to double or even triple size -- it's the absolute least you should do for the health of your players' eyes. The image below shows a standard BYOND icon as it will appear in an unmodified game; next to it is an icon shown at 200% (as though the map were stretched out); the last image shows the same knight drawn on a larger canvas. Notice how much easier it is to look at the larger images.

Don't: Using more colors doesn't make your image better. Color helps to establish a visual theme in your game, and objects of the same color will be assumed to be the same material; use this to your advantage. If you use a different shade of brown each time you make a wooden object, none of your images will look like they belong together. By consistently using the same shades of brown every time you draw a wooden object, all the objects in your game will seem like they were made for each other instead of being pieced together from bits all over the internet. Take, for instance, the graphics in this screenshot (from one of my abandoned projects). Notice how a very small number of colors are used, and colors are always reused when possible. The image below shows our golden knight in four colors (left), and then in 31 colors (right). The four color version is more consistent within itself, and will also look consistant with a lot of turf backgrounds. The 31 color version, on the other hand, will look terrible on turfs which, likewise, have 31+ colors.

Let's Recap:

• Don't use a 'Base' to represent the player.
• Do give your player a cool icon immediately. Only later, if he chooses to take off all his clothes and shave his head, allow him to be diaper man.
• Do use large graphics, or stretch out the map.
• Do use the smallest number of colors you need, and reuse colors to establish a visual theme.