Sol's Graphics for Beginners

Note: the permanent address to this tutorial is http://iki.fi/sol/gp/ - please use that as a link.

00 - Introduction

(last revised 8. August 2005)

This tutorial is in need of some heavy rework. The basic idea is still perfectly valid - graphics are still based on pixels and low-level knowledge is a good thing - but the frames of the canvas have changed drasticly in the past couple decades. SDL1, which this tutorial is based on, has been deprecated and there's already talk of SDL3 even, and the IDEs listed have also changed a lot.

When I was starting graphics programming on the PC, things were a lot simpler than they are these days. For instance, if you wanted to get to a graphics mode, all you needed to do was to type in a couple of cryptic lines, like so:

_asm {
  mov ax, 13h
  int 10h
}

After this, the graphics mode was 320 pixels wide, 200 pixels high, had 256 colors, and the "screen" was a linear array of bytes at a static address ((unsigned char*)0xa0000). Note that there was no reason to actually understand what the abovementioned lines did.

Okay, the mode had a palette and changing the palette was a bit trickier, but basically everything you needed to start could be explained in a dozen or so code lines.

So, I'm writing this tutorial for those who might want to take a more 'traditional' introduction to graphics, instead of taking the more common direct3d/opengl approach. As a warning, this is not a tutorial in 'C'. However, if you're familiar with java, php, jscript, or some other language that has a similar syntax, you should be fine. However, you may want to keep a c tutorial handy.

(Some readers may find my boolean / bit masking / bit modification tutorial useful).

I'll use SDL as the graphics library. Instructions to set up are included for Visual C/C++ 6.0, Visual Studio.NET2003 and Bloodshed Dev-C++ 5 on the Windows platform, linux in general, and Mac OS X. Other versions of visual studio may work a bit differently, as will any other compiler suites, but the code itself should mostly work as is. Oh, and the code should work pretty much as is under other operating systems, too.

This tutorial is suitable for people who are learning programming by themselves, or who already know how to program but don't know much about graphics. Programming students may also use it as additional material for programming courses. Bored of those dry programming assignments? Maybe it's time to try something fun.

I aim to provide some simple, understandable routines, and some hints to what can be done to play with the routines. Playing here is the key; if you find that you can actually have fun programming, learning becomes much more interesting. Or, that way it has been to me.

Later on in the tutorial, we'll build one complete game, step by step, from scratch to polish.

Before we start, make sure your development environment is up to date (for VC6, get the latest service pack), and that you have downloaded SDL 1.2 from http://www.libsdl.org/.

For Windows development you'll need the "development libraries" for Visual C++. For this tutorial, I'm using 1.2.7 (as it's the latest available as of this writing), but any other 1.2 version should be compatible. You'll need the package even if you're using Dev-C++.

For Mac OS X development, you'll need both the "development libraries" and the "runtime libraries".

After that, you can journey onwards to 01 - Setting Up SDL..

Having problems? Improvement ideas? Just want to discuss this tutorial? Try the forums!

Any comments etc. can be emailed to me.

Legalese, for those who want to know:

  • Feel free to use this tutorial for personal education.

  • You have my blessing for using the techniques and source code from this tutorial in whatever way you wish. Since corporations keep patenting obvious things, it's entirely possible that I'm covering patented things, but in my opinion, everything I talk about is, or should be, general knowledge.

  • You can take copies of these pages for your personal use.

  • Please don't start any unofficial mirrors.

  • Feel free to use this tutorial as part of educational material in a schools or any other kind of educational institution, as long as:

  • If this tutorial is used in some school or other kind of educational institution (in full or in part), please let me know, both of the planned use and the results, so I can keep improving it. Publishable quotes are appreciated!

  • While effort has been made to make this tutorial as flawless as possible, some mistakes are bound to creep in. This is a fact of life and I'd rather not be held liable for any problems. Please let me know if you find something that's wrong!