Let's get QB64 Installed and The Interface Configured

Notes

Virus software false positives

Your anti-virus program may mark QB64 as a threat. You'll need to white list the folder that contains QB64 if you try to start QB64 and nothing happens or your anti-virus program is flagging anything QB64 related as a threat. This is a known problem if you attempt to install QB64 to your "Program Files" folder.

This tutorial assumes Windows

This course will assume that you are using Windows and all of the content contained within has been written with Windows in mind. If you are using Linux or MacOS most of the source code will work as written. Where possible source code changes will be pointed out that need to made in order for it to operate correctly in non-Windows systems.

Linux Users

Depending on the version of QB64 you are using you may need to change backslashes ( \ ) to foreslashes ( / ) within path strings. For example, if you encounter a line of code in one of the examples such as this:

ImageFile& = _LOADIMAGE(".\tutorial\Lesson16\image.png", 32)

You'll need to change the backslashes to foreslashes:

ImageFile& = _LOADIMAGE("./tutorial/Lesson16/image.png", 32)

Windows Installation

Step 1: Click here to visit the QB64pe GitHub page and scroll down to the section labeled Assets. Choose the version that matches your system:

Save the file to your computer's desktop. If your browser did not give you an option of where to save the file you'll need to move it from your browser's download folder to the desktop.

NOTE: The latest version as of May 5th, 2023 is version 3.7.0

Figure 1: QB64 Phoenix Edition GitHub

Step 2: You should now see the file you downloaded on your desktop.

Figure 2

Note: You will need 7-Zip to extract the files from the archive file you downloaded. If you do not have 7-Zip installed in your computer visit the 7-Zip web site here to download and install the appropriate version for your system.

Step 3: Right click on the 7-Zip file you downloaded to your desktop. Select "7-Zip" from the context menu that appears and then select "Extract Here" from the 7-Zip menu that appears as seen in Figure 3 below.

Figure 3: Extracting QB64 to your desktop

Step 4: A progress bar will appear as seen in Figure 4 below showing the extraction process. This may take a moment depending on the speed of your computer system.

Figure 4: Extracting QB64 to your desktop

Step 5: When the extraction has finished you will see a "qb64" or "qb64pe" folder on your desktop as shown in Figure 5 below. QB64 Phoenix Edition recently changed the name of the default QB64 folder. Depending on the version you downloaded it may be "qb64" or "qb64pe". From this point on the folder will simply be referred to as the "QB64" folder.

Figure 5

Step 6: Download the tutorial asset file by clicking here. Save the file to your desktop using the same method as you did for the QB64 file previously downloaded. You will see a compressed folder called "tutorial" on your desktop as seen in Figure 6 below. The asset file contains source code, images, and other support files needed for the tutorial.

Figure 6

Step 7: Double click on the "tutorial" compressed folder on your desktop. A window will appear as shown in Figure 7 below. Drag the "tutorial" folder inside this window and drop it onto the QB64 folder on your desktop. This will install the asset files needed for the tutorial.

Figure 7: Drag and drop the tutorial folder onto the qb64 folder on your desktop

Step 8: Close the window shown in Figure 7 above. Double click on the QB64 folder on your desktop to open it. You should see the tutorial folder along with the QB64 files as shown in Figure 8 below. This is where you will do all of your QB64 programming. No other installation steps are needed and you are ready to begin your programming journey.

Figure 8: Your copy of QB64 is now ready to begin the tutorial

Step 9: Double click on the "qb64" or "qb64pe" application to start the QB64 Integrated Developer Environment (IDE). Skip to the section "Configure the IDE" below.

Linux and MacOS Installation

If you are installing QB64 into Linux or MacOS click here to visit the section in the QB64 Wiki describing the installation procedures. Linux and MacOS may require dependencies that need to be installed first.

Once you have QB64 installed copy the "tutorial" folder from the tutorial asset ZIP file to the "qb64" or "qb64pe" directory/folder. A link to download the tutorial asset file is located at the beginning of the tutorial section.

Configure The IDE

Most programming languages include an IDE (Integrated Developer Environment) to aid the programmer when writing code. An IDE provides command structure formatting, debugging tools, and real time syntax checking acting as a spell checker for commands. The IDE is where the programmer types in the code commands to create a computer program.

Open the "qb64" folder on your desktop then double-click on the "qb64" application icon to open the QB64 IDE editor as seen in Figure 12 below.

By default the IDE screen is much too small to work in. The reason for this is that QB64 is a direct descendant of Microsoft's QuickBasic programming language. The default look of the QB64 IDE tries to mimic the QuickBasic 4.5 IDE as much as possible for those familiar with QuickBasic 4.5 to feel at home. For this course however we're going to need a larger IDE window to work with.

Figure 12: The default IDE window

Choose Options in the menu and then choose Display in the drop-down menu. You will be presented with a screen as shown in Figure 13 below. These options allow the programmer to change the overall size of the IDE window. For this course the code will be presented as it would be seen in an IDE window of 120 characters wide by 40 lines high. Change the width value from 80 to 120 and the height value from 25 to 40. 

Note: Even at 120x40 the text within in the IDE is fairly small. If you would like a larger window and text but still retain the 120x40 format place an X in the box labeled "Use monospace TTF font:" (see Figure 13 below).

Once you have made the changes click on OK to set them. Of course you can make these numbers larger if you would like to use more of your screen. My personal preference on my 1920x1080 screen is 140 characters wide by 50 lines high with Use monospace TTF font: checked.

Figure 13: Options --> Display

Within this course the code has been color coded as if the IDE has been set to use the Dark Blue scheme. Choose Options in the menu and then choose IDE Colors in the drop down menu. You will see a screen appear as shown in Figure 14 below. Click on the right triangle next to the word Scheme: until you see Dark blue in the text box. Click on OK once you have done that. 

Note: You do not have to choose this color scheme. If you prefer another go ahead and choose that one but keep in mind the color coding in this course will match what is seen using the Dark Blue color scheme.

Figure 14: Dark Blue scheme

When the source code was written for this course the IDE automatically capitalized all letters in keywords. Commands such as print would automatically be capitalized to PRINT to highlight them in code. Later versions of the IDE made this an option, instead defaulting to to just capitalizing the first letter of keywords. Once again, to match the source code seen in this course choose Options in the menu and then choose Code Layout from the drop down menu. You'll see the screen appear as shown in Figure 15 below. Place an X in the box labeled Keywords in CAPITALS to make the change and then click OK.

Figure 15: Options --> Code Layout

You are now ready to begin the tutorial!

Does anyone remember ASCII art?