Tutorial #1 : Sprite editing and theory First off, I'll explain why I'm even making a graphics tutorial when this is a RPG page. The answer is simple...RPGs need good graphics!! Graphics make or brake any game, rpg or otherwise. Unless you're planning on writing a text game (which I feel are extremely boring and not fun at all to play) you need to know how to make decent graphics.
QBasic isn't the best language for graphic art, but it's good enough to make decent programs. So how do you get started? Well first of all you should know what a pixel is. A pixel is the smallest unit a monitor can display. Computer screens are just a bunch of pixels in a row. They are like square dots. Each pixel can be a different color, and the range of colors depends on what screen mode you are using. Different screen modes have different amounts of colors that you can display at one time, as well as different resolutions Resolution is how many pixels the screen can display once. The larger the resolution number, the smaller the pixels. Standard applications like Windows and the Mac OS have resolutions of 1024x720 or something like that. Unfortunatly, Qbasic's highest resolution is 640x400, and that screen mode only allows 16 colors. So we'll go with screen 13. Screen 13's resolution is 320x200, but it is also 256 colors, which gives you a lot more room to work with.
Ok. So now you know what a pixel is and you even know about resolution. With QBasic you can draw individual pixels using the PSET command. The syntax is as follows:
PSET (xcoord, ycoord), color where xcoord and ycoord
are the coordinates of the point you want to put the pixel and color is the
color of the pixel. Remember that if you are using screen 13 the resolution is
320x200, so any coordinates above those won't be displayed on the screen. The
color value also has to be between 0 and 255. So here are some examples.
PSET (170, 100), 'plot a red pixel in the middle of the screen
Here's a simple program that randomly plots different colored pixels:
SCREEN 13
do
x = INT(RND * 320) ' get a random number between 0 and 320
y = INT(RND * 200) ' get a random number between 0 and 200
colour = INT(RND * 255) ' get a random number between 0 and 255
PSET (x, y), colour
loopBefore going on, experiment with the PSET function to get comfortable with it
Being the master of the PSET function you are, you're ready to go onto bigger and better things. (Building on what you already know of course) The beauty of the PSET function is that it lets you draw with great detail. The problem with it is that in order to draw any kind of recognizable picture you would have to use about a thousand PSETs. Luckily, a little inventiveness gets us around that problem. Hopefully you know about the data statement, what it's purpose is and how to use it. When I first got into QBasic I didn't see why the hell you would ever want to use the DATA statement. Being older and wiser, I see it's numerous functions and advantages. We're going to use it in conjuction with the PSET function in order to help us draw a picture. Check it out: You need to use colors in order to make your picture a picture. So here's what you do. Say you want to draw a 10x10 drawing of an upside down cross. Here's what you would do. First make 10 DATA statements. On each line of data type 10 double zeroes seperated by commas. It should look like this:
DATA 00,00,00,00,00,00,00,00,00,00 DATA 00,00,00,00,00,00,00,00,00,00 DATA 00,00,00,00,00,00,00,00,00,00 DATA 00,00,00,00,00,00,00,00,00,00 DATA 00,00,00,00,00,00,00,00,00,00 DATA 00,00,00,00,00,00,00,00,00,00 DATA 00,00,00,00,00,00,00,00,00,00 DATA 00,00,00,00,00,00,00,00,00,00 DATA 00,00,00,00,00,00,00,00,00,00 DATA 00,00,00,00,00,00,00,00,00,00
Each of those 00s reprents the color of one of your pixels. Start everything off with black (the QBasic color for black is 0) Now you just go in and change the colors until you have the image you're looking for. In this case we are making an upside down cross (sorry God lovers) We'll make it Red (That translates into 40 in QBasic.) If you look closely you can see the shape of the cross outlined by all the 40's.
DATA 00,00,00,00,40,40,00,00,00,00 DATA 00,00,00,00,40,40,00,00,00,00 DATA 00,00,00,00,40,40,00,00,00,00 DATA 00,00,00,00,40,40,00,00,00,00 DATA 00,00,00,00,40,40,00,00,00,00 DATA 00,00,00,00,40,40,00,00,00,00 DATA 00,00,40,40,40,40,40,40,00,00 DATA 00,00,40,40,40,40,40,40,00,00 DATA 00,00,00,00,40,40,00,00,00,00 DATA 00,00,00,00,40,40,00,00,00,00
Great. Now you've got this awe inspiring cross, just waiting to be displayed, but how are you going to do that when all you've got is a whole bunch of DATA statements? Well lucky for you, I'm going to show you. If you don't know what an array is, go find a tutorial on them because you need to be comfortable with them before we continue. You can probably find a tutorial about arrays somewhere on the QBasic page. Anyway. Check this out. This will read in your data and translate it into a picture.
SCREEN 13
DIM picture (1 to 10, 1 to 10) as integer 'make an array for the picture
FOR y = 1 TO 10 'this is a loop to read in the data from your data
FOR x = 1 TO 10 'statements. As each number is read in, it is stored
READ z 'in the array.
picture (x,y)=z
NEXT x
NEXT y
FOR y = 1 TO 10
FOR x = 1 to 10
PSET (x, y), picture (x,y) 'This loop draws the contents of the array
NEXT x
NEXT y
END
DATA 00,00,00,00,40,40,00,00,00,00
DATA 00,00,00,00,40,40,00,00,00,00
DATA 00,00,00,00,40,40,00,00,00,00
DATA 00,00,00,00,40,40,00,00,00,00
DATA 00,00,00,00,40,40,00,00,00,00
DATA 00,00,00,00,40,40,00,00,00,00
DATA 00,00,40,40,40,40,40,40,00,00
DATA 00,00,40,40,40,40,40,40,00,00
DATA 00,00,00,00,40,40,00,00,00,00
DATA 00,00,00,00,40,40,00,00,00,00
And there's your picture. Before you go on (yes theres more) try drawing your own picture and see how it comes out.
Now if you did everything correctly, you should get a little upside down
cross in the upper right corner of the screen. This isn't very helpful if you
want to do other things with the picture, like animate it or stick it somewhere
else on the screen, so now you'll learn how to use the GETand
PUT statements, which allow you to do both. The GET statement
grabs your picture and puts it into the computers memory. The PUT statement
then puts the picture where you want it. Once again arrays are essential for
this method so make sure you know them. The GET statement works like this:
GET (x1, y1)-(x2,y2), arraynamearraynameis the name of the array you declared for the picture. The array should (actually it must) be big enough to hold the picture. For the upside down cross we need a 10x10 array, and the declaration for it looks like this:
DIM cross (0 to 9, 0 to 9)Note that the array is from 0 to 9, not 1 to 10. Now that the array is dimmed, we can get it like this (assuming you already have the picture drawn on the upper left corner of the screen:
GET (0,0)-(9,9), crossAnd now you have the picture in memory! In order to put it in other places use the PUT statement. It works like this:
PUT (x, y), arraynameor in our case:
PUT (50,50), crossThis will draw the upside down cross with the upper left corner at 50,50. And that, in a nut shell is how to make sprites. I made a handy sprite editor that makes the whole process a thousand times easier, and I'll post it soon. E-Mail me with any questions, comments, mistakes, type o's, etc.