A Small Game Tutorial

From QB64 Wiki
Revision as of 23:55, 13 April 2011 by imported>Cyperium
Jump to navigation Jump to search

So I decided to make a tutorial of a space game, a sidescroller where you avoid obstacles and collect lives. All the graphics will be made internally so there are no need to download external files.


In this tutorial I will use a method that was common in the 90's for creating graphics, yes DATA, the image that will be created is easily seen by this method, so let's first create the graphics, I'll show you how to use the graphics later. For simplicity we'll make all the graphics 10*10 which will be sufficient for this kind of game.


SCREEN 13 DATA 000,000,000,000,000,000,000,000,000,000 DATA 000,000,015,015,015,015,015,000,000,000 DATA 000,015,015,015,015,007,007,015,000,000 DATA 000,015,015,015,015,015,015,015,015,000 DATA 000,015,015,015,015,015,015,015,015,015 DATA 000,015,015,015,015,015,015,015,015,000 DATA 000,000,015,015,015,015,015,015,000,000 DATA 000,000,000,000,000,000,000,000,000,000 DATA 000,000,000,000,000,000,000,000,000,000 DATA 000,000,000,000,000,000,000,000,000,000 FOR y = 1 TO 10 FOR x = 1 TO 10 READ c PSET (x, y), c NEXT NEXT SLEEP


Yes, that is a ship, I'm not the best at making graphics but I think we can all agree that this is a ship. 015 represent white, and 007 represent grey (the cockpit window). Now we can put the graphics into a image, we'll just name it "ship". After we have put the graphics into a image we'll erase the graphics using CLS to prepare it for making more graphics.


SCREEN 13 DATA 000,000,000,000,000,000,000,000,000,000 DATA 000,000,015,015,015,015,015,000,000,000 DATA 000,015,015,015,015,007,007,015,000,000 DATA 000,015,015,015,015,015,015,015,015,000 DATA 000,015,015,015,015,015,015,015,015,015 DATA 000,015,015,015,015,015,015,015,015,000 DATA 000,000,015,015,015,015,015,015,000,000 DATA 000,000,000,000,000,000,000,000,000,000 DATA 000,000,000,000,000,000,000,000,000,000 DATA 000,000,000,000,000,000,000,000,000,000 FOR y = 1 TO 10 ' I use 1 TO 10 here because it is more intuitive (we don't normally count from 0 to 9), FOR x = 1 TO 10 ' in actuality you can PSET (0, 0), c as well which is the first valid pixel. READ c ' read the DATA and store it in c. PSET (x, y), c ' the values in the DATA are colors so we just PSET the colors. NEXT NEXT ' we use 11,11 since 0 to 10 is 11 pixels (in both width and height). ' / / ship = _NEWIMAGE(11, 11, 13) 'here we both create the new image and get the handle for it. ' \ ' we will operate in SCREEN 13 and thus create a SCREEN 13 compatible image. ' ' ' the source argument is empty and therefor assumes the current source (the screen). ' / ' destination v source _PUTIMAGE (1, 1)-(10, 10), , ship, (1, 1)-(10, 10) CLS ' Clear the screen \ ' destination argument (which is the ship imagehandle) ' 'We have now successfully stored the ship in the image, the handle for it is stored in the ship variable. 'We make the rest of the graphics exactly the same way (the only things that need to change are the graphics 'and the name of the variable to reference the image).


Now we have stored the graphics into the ship image. I have tried to explain each step by comments. If you are uncertain at how _PUTIMAGE works or how _NEWIMAGE works you can visit these pages:


_PUTIMAGE, _NEWIMAGE, Images


I will briefly explain more about the DATA and READ before we go on. After each READ the DATA pointer moves to the next element, so in this DATA grid we have 10 elements * 10 elements (which represents a box of graphics), each element is used as a color for the pixel in the box. The box is then drawn using PSET with the information in the DATA. (FOR x = 1 TO 10 and FOR y = 1 TO 10 represents the 10*10 box). If you try to read more than is available in the DATA you will get "Out of DATA" error. If you want to reset the DATA pointer you use the keyword RESTORE, this is not needed in our game as we only need to read the DATA once.