DBP Series #1: The Menu part 1

This is the first part in a tutorial series in Dark Basic Professional, aimed at beginners.

This tutorial will start with something easy to get you started. Everybody will have their own approaches to program and the way you will be learning things will be based on how I program. My methods are inspired by how Object Orientated Programming (OOP) works. You don’t need to worry about what that means, because Dark Basic can’t actually do OOP.

Programming looks kind of scary to begin with, because it’s just a wall of code and equations. The way I tend to think of it is you’re learning how to speak to a computer. Computers do not speak English and it’s very difficult for them to understand, so you’re speaking in terms you both are capable of understanding coherently. A computer’s language is very mathematical, though you don’t actually need to solve any mathematical equations, you just need to make up those equations. Just as well, because my maths is actually horrendous. I got a C at GCSE level, which isn’t very impressive. I could do a simple, “hello world” app, where you learn to display some text on the screen, but I’m going to go a step further than that. What you’ll be creating is an interactive game menu. It’ll look basic, but it’ll give you some core principles to get started.

I like to get started with some structure first. What I mean is provide a template to place my code, because it’s always a good idea to organise your code, when your program gets bigger and bigger it can be harder and harder to maintain. Doing things this way I find it makes things more manageable.

So, copy this structure and I will explain:

image

This might look a little confusing. I’ll break it down for you.

The green text, which starts with ‘//’ are comments. Whenever you type ‘//’ anything on that line will be ignore by the compiler. This means you can leave your self notes inside of your code. It might help you understand what you were doing with a bit of code when you revisit or help somebody else understand when they read your code

Do. Sync. Loop, everything that happens between the words ‘DO’ and ‘LOOP’ will be repeated every single frame. ‘SYNC’ is used for maintaining how fast your loops update. In this code, it will do nothing, its usage will be explained later. You’re saying to the computer, “keep doing this stuff and don’t stop”.

Functions these are little containers to store segments of code. If you think of your code as a room, your TV contains a set of functions and so does your computer, your bed has its functions. So you might have TV(), Bed(), Computer(). You have to make these functions and generally I make them at the end of the code. So you have to write ‘function FunctionName()’. you can call it anything you like, though it’s a good idea to make the name relevant. Anything between ‘function FunctionName()’ and ‘endfunction’ will be used whenever you type, “FunctionName()”.

TYPES. I will explain these when I use one. These are useful in managing data. Not every one uses them, but I love them. You’ll see why they’re useful in this tutorial.

PUBLIC DECLARATIONS. The name might be confusing because Dark Basic Pro doesn’t use the term ‘private’ or ‘public’ in making variables. First, what is a variable? It is like doing algebra. You know, equations like: a = 3, b = 5, a + b = ?. But variables in programming are more flexible than that, they will store a number or a line of text or a single character, depending on the type of variable used. To make these variables, you have to declare them. A public variable is just one that can be accessed anywhere in your code. A private one is one that’s only accessible in a segment of code. In Dark Basic, variables are private by default, if you wanted something ‘public’ then you need to use the ‘global’ command. It will be explained when I get to it.

CALLS. This is where I call all of the main functions in the program. It’s how I structure my code. Not everybody does it this way. This is closer to how you might do things if you were using OOP.

Now to talk about the structure itself. Everything above the loop will only be ‘called’ once, everything inside of the loop will be called repeatedly.

Load(). This is what will happen first. This will be used for loading any data you need in a program, You might load an image or a piece of music or a 3D model or several things to make up your game world. That all goes in here.

Awake(). This is what will happen second. This is will collect a set of priority commands that’ll need to happen before anything else.

Start(). This is what will happen third. It’s like Awake(). In theory you could combine the two, it would not matter. I like to have 2 separate functions. It’ll make more sense as we move on.

GUI(). This is what’ll happen first in your loop. This will handle anything inside of your graphical user interface. It’s good to keep this separate as to not mix it up with other code. So you might stick everything to do with your menu in here. Or you might stick in your player health bar and well, you get this idea.

Update(). This is basically where you’re going to stick your game logic. This could be your input (to control a character) or AI. This is where your game’s functionality will exist.

LateUpate(). This is anything that needs to be updated right at the end of your code. For example, you might have something like a Bloom Shader and you will need to produce its final result at the end of the code.

In theory, I don’t need any of these functions and could just code it all straight in, but as I’ve said, this method makes things more manageable. Of course, this is only on a primary level, you can actually use a function within a function, which means inside of Update() you could have UpdatePlayer(), ControlPlayer(), EnemyAI() and so on. This method just allows you to break things down. If you had an error that occurs whenever you move the player, you can go straight to ‘ControlPlayer()’ instead of flicking through lines and lines of code to find the specific line you need to alter.

So now that the structure is out of the way. What are we going to do? Lets start with the ‘TYPES’. The ‘TYPE’ commands allow you to create your own variable type. So I mentions you’ve got lines of texts and numbers, this command will allow you to have an organised system of using them. Kind of like forming your own database. You might have a person’s name, their phone number, their favourite food and so on.

For our menu, I am only going to create one ‘type’ and I’ll call it a ‘list’. I like my list type to be versatile and to be used in a whole number of situations. So it might be for our menu items or items in an inventory or abilities a character can use.

image

For this tutorial, the only criteria our menu needs are ‘name’ and ‘active’. ‘Purpose’, ‘modifier’ and ‘description’ would be great for an item in an inventory.

But what are strings, floats and booleans? I said there’s different types of variables you can use. A string will contain text. A float is a floating point variable, or in layman’s terms, it’s a number with a decimal point. A boolean is a statement that is true of false, to put into context, “This Item is Active, true of false?” If false, then no, it’s not active, if it’s true, then it is.

How are we to use this list. Like a variable, we have to declare it. So you might do: “Menu as List”. But you will notice a problem. That would only make 1 menu item. So if say, I wanted 3 items in my menu, would I have to do this:

MenuItem1 as List : MenuItem2 as List : MenuItem3 as List

No you wouldn’t, that’s a waste of space and your time. Programming languages have a solution for that, it’s called an ‘array’. You just give the program the number of arrays you want and it’ll make them for you. In DBP, this is done by the command ‘dim’. Where do we put this command. It’s a variable and as it’s an array, it will be public, so it’ll go under ‘PUBLIC DECLARATIONS’.

image

I’m going to have ‘5’ items in this menu. So if I want to point to item number 2, I’ll use ‘Menu(2)’, for number 4, ‘Menu(4)’.

Next, lets give these menus some properties. We’re only going to be worried about names at the moment. Where do I stick it, it’ll be one of the first things to happen in our code, so we’ll stick it inside of ‘Awake()’.

image

Now things should be started to look clearer. But before we give this any functionality, you’ll be wanted the program to display these onto the screen, just so you can hit ‘compile’ and get something to look at.

First, lets head back to the public declarations,under the array, type:

image

Gap – Will be used for determine the distance in pixels between each menu item

Selection – Will be used for later

MenuCount – This will record the number of ‘items’ in your array, which is ‘5’. We did write ‘5’ previously and in theory we could just say, “MenuCount=5”, but what if you decide to add another item? You’ll have to change this to 6 as well. Array Count will grab the number of items inside of ‘Menu()’.

 

Now head to ‘GUI()’ and type this:

image

Now this looks a little confusing. This is called a ‘for loop’. It’s like the ‘do loop’, but it will only do it a certain number of times (and will be completed before a single frame is rendered). You will use a variable called ‘x’ (it can be called anything) to cycle through each update. It can start at any number that’s convenient for you and can end on any number that’s convenient for you. The reason the numbers are so flexible is because you may wish to use ‘x’ in a calculation and the first number in that calculation might not be 1. For us, we want to do an update for every single item in our list, so that is item 1 to item 5. Hence, for x = 1 to MenuCount (which is 5).

To explain ‘h’. ‘h’ will start at ‘0’ and at the ‘gap’ variable on every update. This means, it’ll go up 15 every time. This is useful for determining where I place my text. This method will mean each line of text is 15 pixels below the last.

With the text command, the 2 number you use are for where you want your texts to be be placed. This is 10 Pixels on the X Axis and 10 + h on the Y Axis, which puts it at the top left corner of your screen. The text we are displaying is the name of each menu item. You can see where ‘x’ is useful because it saves us time.

What I’ve done here is something called ‘parsing’. It means it’ll read through a selection of data and look for pieces of information. This is better than doing this:

image

Both will have the exact same results. The latter is easy to read and easier to understand, but very limited. The form is a lot more flexible. Lets say you were to change the number of items on the list to ‘7’, you’d have to add two more lines to the latter and nothing to the form. And in that last image, if you wanted a dynamic inventory where you could add or take away items, it’d just be impossible.

Now hit compile.

image

That’s what you’ve got. Better than a crappy ‘hello world’, right? It seems like a lot to get there and given the amount of explanation needed, it might not seem so simple, but that’s because you’re learning and need to get used to these concepts.

Experiment. Add more items. Change the gap size, place the menu elsewhere on the text. If you’re feeling adventurous, maybe use variables to alter the position on your menu. Make it so you can control the menu position from the Update() method, yet keeping your text commands in ‘GUI()’. All the information you need to achieve that is in this tutorial.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s