10-13-2010, 07:35 PM
tSR GameDev Tutorial: Qt C++ - Sprite Drawing
Because a lot of you have never programmed before I'm going to explain the most basic elements of C++. Here's a brief list of vocabulary:
Variable: Variables are like boxes that hold different values. Each box has a different name and a different type. You can't mix what type a variable is and the type the value is on most occasions. You'll be using variables a lot.
Value: Whatever you can shove in a variable is a value. They can be almost anything from numbers to letters to classes. Make sure that before you use a variable you assign it a value; while it may seem kinda dumb to miss that it's a fairly common mistake.
Int/Integer: Ints are a type of variable that hold whole positive or negative numbers. If you give it a decimal value it will round down to the nearest whole number, so 9.99 would become 9
Float: Floats are a lot more useful, as they can hold everything an int can, but also decimal values.
Bool/Boolean: Bools are a binary variable, they can only be true or false (aka 1 or 0). Pretty basic stuff.
String: Strings are string of characters. You know us creative programmers, always thinking outside the box when it comes to naming.
Function: Functions are like the maids/manservants of code. Give it a list of what to do, maybe some resources to do it with, and tell it what type of value to return. But not all funtions return values, some return 'void', or nothing.
Class: Classes are objects that have two parts, the header and the source. In the header you tell the class what variables or functions will be in it and in the source you will further define them
Constructor: Constructors are the code that gets called when a class is created as an instance. They only get run once per instantiation. It includes stuff like loading the graphics and position for sprite classes or receiving numbers for physics classes.
Instance: For a class to be used outside of its header and source you have to instantiate it as a variable. Pretty much you have to give the second class the first class' name, what you'd like to call this class variable, and then any constructor code after the parentheses.
Properties: Properties of a class are it's variables and functions. They can be accessed by using a '.' after the class' instance.
An IDE, or Integrated Development Environment, contains useful tools for creating software. They come with a code editor, compiler, and in most cases a set of libraries. In this series we will be using Qt (pronounced "cute"). Qt is a multi-platform IDE and has its own set of libraries that we will learn how to use. Download the LGPL license of Qt here and install it. Don't worry about the commercial version, it just means that you're allowed to edit and redistribute the source code to Qt's IDE.
Now you need to start a new project. Just go to "File>New File or Project" and at the prompt select "Qt4 Gui Application". This'll take you to the next screen where you have to enter the project name and location. At the next few screens just press "Next" and "Finish", you don't want to mess with the settings for this project.
Press the green debug arrow and you'll start building, or compiling, the project. When it's finished you should see a empty grey window with a weird little grey bar. If you feel the need to remove it go into the mainwindow.ui file in the Forms folder. Right-click on the top bar and remove it, and you can to the same to the status bar on the bottom.
C++ is an object-oriented programming language. That means it uses objects like classes to be better organized. A class is generally composed of two files, a source file and a header file. Header files are where you declare what a class can do and source files are where you define what a class can do. It's like a pair of bizarre dictionaries. The "header dictionary" has a list of words without their definition, only the page number of the "source dictionary" where the definition is found. This might seem weird at first, but as we progress into other lessons you'll see its usefulness.
The next important things to learn are functions. Functions are pretty much just lists of commands that generally return a value. Say you want to get a random number, you would use a function that generates a random number. However, there are functions that are 'void' that do not return values but correspond to different actions the application can do, like a function that is triggered by pressing a key on the keyboard. For our application we are going to need a void paintEvent function that will draw graphics onto the screen. Go into the header file and right below the changeEvent function type the following to declare the paintEvent function:
Hopefully you noticed that this function has a set of parentheses. All functions have to have parentheses, but not all have to have stuff in-between them. The 'stuff' inside a function's parentheses are called parameters. They are used to pass variables to be used by the function. Here we are passing a pointer to a QPaintEvent. What's a pointer? Well, you see that asterisk? That means when we activate or 'call' this method we will create a variable called "pE" that will hold not the passed QPaintEvent, but a pointer that tells the code to look at the source of this passed value. Now that we have declared this function in the header file we must define it in the source file like so:
We had to put "MainWindow::" to let our class know that this method was declared in mainwindow.h. Also, whatever we put in those parentheses is going to be called when paintEvent is called. The next thing to do is to make a QPainter, an object that will draw things on the screen, like programmed geometry or sprites. When we create it we will need to pass a parameter for what the QPainter will be drawing on. Because we are drawing on mainwindow.ui we will tell the QPainter that 'this' is what we will draw on:
Next on the agenda is to create a QPixmap, named after the fact that a sprite is a map of where each pixel is. Before we create it in-code, we need to create "sprite.png" and place it in the project's debug folder through Windows Explorer or Finder. To create the Pixmap you'll have to pass a string for the file location relative to the executable. Since we placed the sprite in the executable's folder we just have to pass the filename:
We have everything all set up now, all we have to do is tell the QPainter to draw the QPixmap with painter's "drawPixmap" function. This time we're passing multiple variables, one for where on the x-axis we're placing the sprite, one for the y-axis we're placing the sprite, and the last for the QPixmap we'd like to draw:
Now press the debug button and watch your sprite appear on the screen. There you go, you've successfully drawn a sprite in C++!
Also, after every 5th lesson I'm probably going to challenge you guys to make a sample app using what the 5 lessons were about.
Before you Begin: The Basics of the Basics
Because a lot of you have never programmed before I'm going to explain the most basic elements of C++. Here's a brief list of vocabulary:
Variable: Variables are like boxes that hold different values. Each box has a different name and a different type. You can't mix what type a variable is and the type the value is on most occasions. You'll be using variables a lot.
Value: Whatever you can shove in a variable is a value. They can be almost anything from numbers to letters to classes. Make sure that before you use a variable you assign it a value; while it may seem kinda dumb to miss that it's a fairly common mistake.
Int/Integer: Ints are a type of variable that hold whole positive or negative numbers. If you give it a decimal value it will round down to the nearest whole number, so 9.99 would become 9
Float: Floats are a lot more useful, as they can hold everything an int can, but also decimal values.
Bool/Boolean: Bools are a binary variable, they can only be true or false (aka 1 or 0). Pretty basic stuff.
String: Strings are string of characters. You know us creative programmers, always thinking outside the box when it comes to naming.
Function: Functions are like the maids/manservants of code. Give it a list of what to do, maybe some resources to do it with, and tell it what type of value to return. But not all funtions return values, some return 'void', or nothing.
Class: Classes are objects that have two parts, the header and the source. In the header you tell the class what variables or functions will be in it and in the source you will further define them
Constructor: Constructors are the code that gets called when a class is created as an instance. They only get run once per instantiation. It includes stuff like loading the graphics and position for sprite classes or receiving numbers for physics classes.
Instance: For a class to be used outside of its header and source you have to instantiate it as a variable. Pretty much you have to give the second class the first class' name, what you'd like to call this class variable, and then any constructor code after the parentheses.
Properties: Properties of a class are it's variables and functions. They can be accessed by using a '.' after the class' instance.
Setting up the IDE
An IDE, or Integrated Development Environment, contains useful tools for creating software. They come with a code editor, compiler, and in most cases a set of libraries. In this series we will be using Qt (pronounced "cute"). Qt is a multi-platform IDE and has its own set of libraries that we will learn how to use. Download the LGPL license of Qt here and install it. Don't worry about the commercial version, it just means that you're allowed to edit and redistribute the source code to Qt's IDE.
Now you need to start a new project. Just go to "File>New File or Project" and at the prompt select "Qt4 Gui Application". This'll take you to the next screen where you have to enter the project name and location. At the next few screens just press "Next" and "Finish", you don't want to mess with the settings for this project.
Press the green debug arrow and you'll start building, or compiling, the project. When it's finished you should see a empty grey window with a weird little grey bar. If you feel the need to remove it go into the mainwindow.ui file in the Forms folder. Right-click on the top bar and remove it, and you can to the same to the status bar on the bottom.
Basic C++ and Drawing a Sprite
C++ is an object-oriented programming language. That means it uses objects like classes to be better organized. A class is generally composed of two files, a source file and a header file. Header files are where you declare what a class can do and source files are where you define what a class can do. It's like a pair of bizarre dictionaries. The "header dictionary" has a list of words without their definition, only the page number of the "source dictionary" where the definition is found. This might seem weird at first, but as we progress into other lessons you'll see its usefulness.
The next important things to learn are functions. Functions are pretty much just lists of commands that generally return a value. Say you want to get a random number, you would use a function that generates a random number. However, there are functions that are 'void' that do not return values but correspond to different actions the application can do, like a function that is triggered by pressing a key on the keyboard. For our application we are going to need a void paintEvent function that will draw graphics onto the screen. Go into the header file and right below the changeEvent function type the following to declare the paintEvent function:
Code:
void paintEvent(QPaintEvent *pE);Hopefully you noticed that this function has a set of parentheses. All functions have to have parentheses, but not all have to have stuff in-between them. The 'stuff' inside a function's parentheses are called parameters. They are used to pass variables to be used by the function. Here we are passing a pointer to a QPaintEvent. What's a pointer? Well, you see that asterisk? That means when we activate or 'call' this method we will create a variable called "pE" that will hold not the passed QPaintEvent, but a pointer that tells the code to look at the source of this passed value. Now that we have declared this function in the header file we must define it in the source file like so:
Code:
void MainWindow::paintEvent(QPaintEvent *pE)
{
}We had to put "MainWindow::" to let our class know that this method was declared in mainwindow.h. Also, whatever we put in those parentheses is going to be called when paintEvent is called. The next thing to do is to make a QPainter, an object that will draw things on the screen, like programmed geometry or sprites. When we create it we will need to pass a parameter for what the QPainter will be drawing on. Because we are drawing on mainwindow.ui we will tell the QPainter that 'this' is what we will draw on:
Code:
void MainWindow::paintEvent(QPaintEvent *pE)
{
QPainter painter(this);
}Next on the agenda is to create a QPixmap, named after the fact that a sprite is a map of where each pixel is. Before we create it in-code, we need to create "sprite.png" and place it in the project's debug folder through Windows Explorer or Finder. To create the Pixmap you'll have to pass a string for the file location relative to the executable. Since we placed the sprite in the executable's folder we just have to pass the filename:
Code:
void MainWindow::paintEvent(QPaintEvent *pE)
{
QPainter painter(this);
QPixmap sprite("sprite.png");
}We have everything all set up now, all we have to do is tell the QPainter to draw the QPixmap with painter's "drawPixmap" function. This time we're passing multiple variables, one for where on the x-axis we're placing the sprite, one for the y-axis we're placing the sprite, and the last for the QPixmap we'd like to draw:
Code:
void MainWindow::paintEvent(QPaintEvent *pE)
{
QPainter painter(this);
QPixmap sprite("sprite.png");
painter.drawPixmap(0, 0, sprite);
}Now press the debug button and watch your sprite appear on the screen. There you go, you've successfully drawn a sprite in C++!
Also, after every 5th lesson I'm probably going to challenge you guys to make a sample app using what the 5 lessons were about.
![[Image: 10y3mgj.png]](http://i44.tinypic.com/10y3mgj.png)
![[Image: groove-1.gif]](http://i119.photobucket.com/albums/o156/A1exi_911/groove-1.gif)
![[Image: ZRdfkWQ.jpg]](http://i.imgur.com/ZRdfkWQ.jpg)
![[Image: fFrame1Big.gif]](http://i152.photobucket.com/albums/s195/Nindotendofreak/fFrame1Big.gif)
![[Image: Frame1Big.gif]](http://i152.photobucket.com/albums/s195/Nindotendofreak/Frame1Big.gif)
![[Image: ndsMEF0.gif]](http://i.imgur.com/ndsMEF0.gif)
![[Image: sig.gif]](http://backloggery.com/vipershark/sig.gif)
