The visuals of a video game are incredibly important, as they convey a lot of information and are capable of immersing the player in an entirely different world. In many well-designed games, the graphics are created by dedicated artists, rather than having the programmers make both the visuals and the code. As a result, these video games feature unique landscapes and themes in both 2D and 3D. However, many independent video game developers who don’t have the luxury of hiring skilled artists are still able to create charismatic characters and backgrounds through simpler graphics.
Making processes simpler and more efficient becomes a necessity for many game developers, who have to operate in computer code. Computers require very specific coding in order to fulfill a programmer’s intentions – miniscule errors can completely throw it off track. For this reason, many artists use third-party programs such as Adobe Photoshop or Autodesk Maya to create their graphics, and then import their final creations (images, models, animations, etc.) into the code. This is vastly more efficient than trying to create graphics with pure code, which is comparable to drawing pictures with a graphing calculator.
One very popular method of creating graphics is through the usage of pixel art and sprites. In fact, many games on the mobile app market utilize a two-dimensional “pixelated” visual style, which is both easy to create and integrate into the game. A programmer can import each image or animation into the code as a sprite, like storing the graphic in an invisible container. Sprites can then be displayed on the screen inside this container, which has certain parameters, including (but not limited to) position, height, width, and transparency. By utilizing sprites, programmers don’t have to code any part of the actual image, but are still free to move it around and do cool things with it.
However, because many computer languages (including Java) use a coordinate system, it is often easier to code sprites in a rectangular container, even if many of their graphics aren’t perfectly rectangular. This may often lead to discrepancies between what the player sees and what the computer registers, as players may expect their lanky mage to dodge a fireball while in fact the fireball has hit the (invisible) rectangular container. One notable example of this discrepancy is demonstrated in the app Flappy Bird, where the container (also called the “hitbox”) is slightly larger than the sprite of the bird. Even when it seems that the bird hasn’t hit the obstacle, the container may collide with the obstacle and the computer registers it as a (rather frustrating) loss. This can be fixed by coding the hitbox as a rectangle smaller than the bird or multiple rectangles the same size as the bird, but simply using the container of the sprite itself is often less tedious and time consuming.
Not only are sprites utilized in order to make moveable characters and objects, they are also used in creating backgrounds and textures, which are often images that are repeated throughout the game. For example, artists do not usually draw out every blade of grass in a game. Instead, they draw a rectangular “tile” of grass and import it into the code as a sprite. The grass tile can then be reused at will, along with other tiles such as dirt and wood, to create a background.
As a result of using sprites, many graphics in “pixelated” games use blocky, rectangular designs rather than curves, as round shapes may create a discrepancy between the player and the game. However, creating beautiful and expressive sprites is now a skill in itself. Sprites are the perfect tool for the job when it comes to connecting the visual side of video games to the code in a quick and efficient manner.
Words and (Flash) animations by Kelvin Pan.
Flappy Bird sprites appear courtesy of Google.