Monogame - Introduction To 2D Graphics

Overview

In the next few tutorials, we will be taking a look at 2D graphics. 2D graphics can be very useful in game programming. In addition to the fact that we can make games that are completely 2D, knowing how to do 2D graphics can add a great deal to 3D games with very little effort. 2D graphics are used for splash screens, menus, and HUDs (Heads-up Displays), among other things. In future tutorials, we will take a look at how to actually do 2D graphics. In this tutorial, we will look at how to get started with 2D.

The 2D World

The 2D coordinate system that we use in video games is a relatively straightforward one. Everything is measured in pixels from the top left corner. Nearly all of the drawing commands that we do will be expressed in these coordinates. This sounds good in theory, but there's a catch: not all screen sizes are the same. This is a problem we'll have to address in our games, but that's a topic for another tutorial.

2DCoordinateSystem.png

The 2D coordinate system's origin is the top left corner of the screen. The x-axis starts at 0 there and goes right. The y-axis starts there as well and goes down. The fact that the y-axis goes down is notable. If you've done much math before, you're probably way more comfortable with the y-axis going upwards instead. Indeed, many algorithms that you might find on the Internet for doing this or that might even assume an upwards y-axis.

These differences in coordinate systems is one that can be accounted for as long as we're aware of it. Just remember that 2D drawing in a video game always has the y-axis going down from the top, not up from the bottom.

Sprites

No, this section is not about ghosts, and it is not about elves. And it is also not about lemon-lime flavored beverages either. In computer graphics, a sprite is a two-dimensional image. Nearly everything we do while we are doing 2D graphics will be a sprite, since most of our work will involve drawing 2D images on the screen in the spots we want them.

Of course, the definition of sprites isn’t just limited to 2D drawing. Sprites even come up in a 3D world. They are often used to achieve fancy effects, like explosions (point sprites), fire, and smoke. They can also be used in simple ways to get detailed images of objects without having to create a complicated 3D model (billboarding and cross billboarding). For example, we could use a picture (sprite) of a missile, rather than creating (and spend all of that energy rendering) a detailed 3D model. For the time being, we will be looking at sprites in a 2D world, and later on we can come back and discuss how to use sprites in a 3D game.


Troubleshooting.png Having problems with this tutorial? Try the troubleshooting page!