Vic's QBasic Programming Tutorial Basic Tutorial II GRAPHICS! ----------------------------------------------------------------------------- 1. Graphics explained. 2. Graphic commands... ----------------------------------------------------------------------------- 1. Graphics Explained... ----- The most important thing in game programming is graphics. In order to get good graphics you must know how to achieve the special effects. You must learn these. Most people can't figure out how to achieve good graphics on thier own. I know that I had to be taught. If you are one of the people who say "I can figure it out by myself, I'm not stupid..." then why are you reading this? This tutorial will cover very basic graphics and very ADVANCED graphics. There are (in my opinion) two ways of geting graphics. One is the very basic built in commands like drawing a line, circle, square, and a filled in circle/square... For a beginner this is great. The other type of graphic programming is drawing PIXEL by PIXEL what you want. The thought used in this type of graphics programming is a bit more complex... First I will give you a few definitions... 1. Pixel A pixel is one Dot on the screen. If you don't allready know, you computer screen is made with about 1 Million little squares of color. Each one of of those little squares is called a pixel. here is an example if for some weird reason you don't understand this... (type this into QBasic) (Without the ----'s of coarse) --- SCREEN 13 PSET (40,40),4 --- when you run the programm you should see a red dot in the upper left part of your screen. That is one PIXEL... (if you havn't guessed, PSET means PIXEL SET...) ----- Now I will talk about the screen's Setup... The screen is setup just like a multiplication Table 0 1 2 3 4 1 1 2 3 4 2 2 4 6 8 3 3 6 9 12 4 4 8 12 16 if you wanted to know what 3 x 4 is then you would find the three and then move over until you are on the 4, then you would be on the number 12... if I wanted to put a pixel where the 12 is I would tell the computer to PSET a pixel at 4,3... If i wanted to put a pixel where the 16 is I would tell the computer to PSET a pixel at 4,4... I really hope you understand this concept.. If you don't understand this than you are totally screwed... sorry, ------- If you look at the program that I wrote earlier you would see that the first command that is given is SCREEN 13. Screen 13 has a pixel value of 320 x 200 (320 going left to right) (200 going up and down) like this -------------------------------------> | <-- 320 --> | | | | | |200 200| | | | <-- 320 --> | -------------------------------------> For right now, in this tutorial at least, we will use only screen 13. pretend, I wanted to put a pixel where the X is Below... -------------------------------------> | <-- 320 --> | | | | | |200 200| | X | | <-- 320 --> | -------------------------------------> If I was to guess, It looks like the X is at about, 255,150... That Would be 255 across and 150 up and down. !!! THIS IS IMPORTANT !!! When you refer to a point in graphics you must put the one going left and right first, and the up and down Second!!! It will allways be like this... MEMORIZE THIS!!!! The first number will be known as the X value and the second will be known as the Y value, so in this example X = 255 Y = 150 This is also a very important thing to know... Remember this!! X = Left to Right Y = Up and Down Remember this!! X = Left to Right Y = Up and Down Remember this!! X = Left to Right Y = Up and Down Remember this!! X = Left to Right Y = Up and Down Remember this!! X = Left to Right Y = Up and Down Remember this!! X = Left to Right Y = Up and Down Remember this!! X = Left to Right Y = Up and Down Do you have it yet? X = Left to Right Y = Up and Down X = Left to Right Y = Up and Down X = Left to Right Y = Up and Down OK? X is first and Y is second (alphabetic order...) X is first and Y is second X is first and Y is second X is first and Y is second X is first and Y is second X is first and Y is second X is first and Y is second You must remember all this or you will never learn Graphics programming!! Don't worry if at first you don't get this, or you don't get it that well. All hope is not lost. Things will eventually sink in. ---------------------- Ok, Here we go. Remember the first(only) programming example? SCREEN 13 PSET (40,40),4 All your programms should start with SCREEN 13, if you don't put that then it will cause an error when the programm is started... Now, look at the command PSET(40,40),4 This could also be known as PSET (X,Y),Color You should be able to figure out everything except for the Color Part... Colors in programming are not known like BLUE,GREEN,RED... It is all Numbers... For example... the color BLUE is known as the number 1... the color RED is known as the number 4... ==---== So, If I wanted to put a Blue pixel at 50,100 then I would say... SCREEN 13 PSET (50,100),1 If I wanted to put a red pixel at 5,17, then I would say... SCREEN 13 PSET (5,17),4 If I wanted to put a red pixel at 5,6 and a blue pixel at 74,46 I would say, SCREEN 13 PSET (5,6),4 PSET (74,46),1 ----- NOTE: You only need to put the SCREEN 13 once in your programm... ----------------------------------------------------------------------------- OK, now it is time to learn the LINE command... Start with an example... --- SCREEN 13 Line (16,20)-(44,50),1 --- In this example, The program will draw a line from the points 16,20 all the way to the points at 44,50... Remember how this is set up... LINE (x1,y1)-(x2,y2),Color ----- If you wanted to draw a square, then you would do it like this... LINE (x1,y1)-(x2,y2),Color,B ( the B means BLOCK, I think) IF you wanted to draw a filled in square you would do it like this... LINE (x1,y1)-(x2,y2),Color,BF ( the BF means BLOCK FILL, I think) ----------------------------------------------------------------------------- Next command, Circle... Here is an example... --- screen 13 circle (50,50),5,1 --- in this example a circle is drawn at the points 50,50 it has a radius of 5 and the circle is the color blue (1) here is the set up... circle (x,y),radius,color (the bigger the radius the bigger the circle) ----------------------------------------------------------------------------- COLORS: Here is a program that will show you all of the main 16 colors... NOTICE: The 16 colors are from 0 to 15. 0 is black and 15 is white just type this program into QBASIC and run it You don't have to understand this program yet. This is just to help you out on what colors to choose. Make sure you copy it word for word (not the ---'s of coarse) you can copy this into qbasic by starting QBasic in windows 95/98 and then push ALT and ENTER to shrink it, then look and copy... or, you can copy what is below, goto file, new and paste it in the new document, then, save it as color.bas... and run it from there,or you could print it out. I would recomend using the first one... --- SCREEN 13 FOR i = 1 TO 16 LINE (i * 20, 0)-(i * 20 + 20, 20), i, BF NEXT LOCATE 4, 1: PRINT "0" LOCATE 4, 39: PRINT "15" --- Thats it. This will show you the 16 main colors... There are 256 colors in SCREEN 13, but the first 16 are the colors that are in every screen... Here is a program that will show you all 256 (0 to 255) colors in screen 13 once again, you don't have to understand it, just look at it... (copy it word for word) --- SCREEN 13 la = 10 FOR y = 1 TO 16: FOR x = 1 TO 16 LINE (x * la, y * la)-(x * la + la, y * la + la), i, BF i = i + 1 NEXT: NEXT --- pretty huh? ----------------------------------------------------------------------------- SCREEN MODES... SCREEN MODE DESCRYPTION 0 Textmode only, you cant use any graphics 1 320 x 200, Only has 4 colors!!! (Useless) 2 640 x 200, Only 2 colors !!!!(USELESS) (Black and White) 7 320 x 200, 16 colors and supports pages(get to later) This screen mode is very very usefull... 8 640 x 200, 16 colors no pages (useless) 9 640 x 350, 16 colors supports pages (very usefull!) 10 640 x 350, 2 colors (black and White) (useless) 11 640 x 480, 2 colors (almost useless) 12 640 x 480, 16 colors (very usefull) 13 320 x 200, 256 colors (extremely usefull!!!) The absolute most popular screen mode for QBasic Programmers -------- Not to confuse you, but when you get more into programming you will descover that there are other ways to get other screen modes, but that gets extremely complicated. but in time you will understand... -----------------------------------------------------------------------------