Subscribe to GameFromScratch on YouTube Support GameFromScratch on Patreon
8. November 2017


In the first tutorial we looked at creating our initial application, while in the second tutorial we looked at events and a cleaner game loop.  Today we get to the fun stuff… drawing bitmaps to the screen.  If you are from another game engine, the term bitmap in Allegro might be a bit misleading as it generally represents an image on disk.  In Allegro terms a bitmap is much more, basically its an all in one term for images that can be load and displayed on screen, taking the role often reserved for sprites in other game libraries.  Let’s just jump into the example:

#include "stdafx.h"
#include <allegro5\allegro.h>
#include <allegro5\allegro_image.h>

int main()
{
	ALLEGRO_DISPLAY * display;
	ALLEGRO_EVENT_QUEUE *queue;
	ALLEGRO_BITMAP * bitmap = NULL;

	al_init();
	display = al_create_display(640, 480);
	queue = al_create_event_queue();

	al_install_keyboard();
	al_register_event_source(queue, al_get_keyboard_event_source());
	al_register_event_source(queue, al_get_display_event_source(display));

	al_init_image_addon();
	bitmap = al_load_bitmap("image.jpg");
	assert(bitmap != NULL);

	bool running = true;
	float x = 0;

	int width = al_get_display_width(display);
	while (running) {
		al_clear_to_color(al_map_rgba_f(1, 1, 1, 1));
		al_draw_bitmap(bitmap, x += 0.01, 0, 0);
		al_flip_display();


		if (x > width) x = -al_get_bitmap_width(bitmap);

		ALLEGRO_EVENT event;

		if (!al_is_event_queue_empty(queue)) {
			al_wait_for_event(queue, &event);
			if (event.type == ALLEGRO_EVENT_KEY_UP || event.type == ALLEGRO_EVENT_DISPLAY_CLOSE)
				running = false;
		}
	}

	al_destroy_display(display);
	al_uninstall_keyboard();
	al_destroy_bitmap(bitmap);

	return 0;
}


Most of the code has already been explained in the previous tutorials, so lets jump right into the new code.  You will notice we are using another add-on in this example, the image add on.  This is the module that enables us to load images from file and needs to be enabled in the same way we enabled the font and ttf add-ons earlier.

image


As always there is an init function al_init_image_addon() that needs to be called before any image code can be called.  One initialized we can load a bitmap from disk calling al_load_bitmap() passing in the name of the image file.  Be sure to place this file in debug directory, just like we did earlier with the font file.  The next critical call is the function al_draw_bitmap() which is used to draw our bitmap to the backbuffer at the given coordinates.  In this simple example we are simply incrementing the X coordinate every pass through the game loop.  We then check that the bitmap hasnt moved off screen, if it is, we move it back to the beginning, minus the width of our image and start the process again.  This will cause the image to smoothly scroll back on screen. 


Here is our application in action:

results


There are a few things that are important to note.  First off, notice the call to al_destroy_bitmap(), this is important to call when you are done with your bitmap or resources will leak.  Next notice how drawing coordinates work.  When drawing, the origin (0,0) is the top left corner of the window as well as the top left corner of the bitmap.


It’s also important to realize in addition to al_draw_bitmap() there are several other draw functions available such as al_draw_rotated_bitmap(), al_draw_scaled_bitmap() etc.


Back to Table Of Contents

Programming


6. November 2017


In the first tutorial we created a simple Hello World application using Allegro.  However, that application was very limited.  In fact, it couldn’t even be closed!  It simply looped forever.  In this example we are going to change that up slightly, by allowing the application to exit if the user hits a key or clicks the close icon on the app window.


In order to accomplish this we are going to cover the basics of handling events and keyboards.  To handle events of any kind we need to first create an event queue.  As we saw earlier with addons, in Allegro you enable the functionality you need, this includes the keyboard.  Without further ado, lets jump into our new example.

#include "stdafx.h"
#include <allegro5\allegro.h>

int main()
{
	ALLEGRO_DISPLAY * display;
	ALLEGRO_EVENT_QUEUE *queue;

	al_init();
	display = al_create_display(640, 480);
	queue = al_create_event_queue();

	al_install_keyboard();
	al_register_event_source(queue, al_get_keyboard_event_source());
	al_register_event_source(queue, al_get_display_event_source(display));


	bool running = true;
	while (running) {
		al_flip_display();

		ALLEGRO_EVENT event;
		al_wait_for_event(queue, &event);
		if (event.type == ALLEGRO_EVENT_KEY_UP || event.type == ALLEGRO_EVENT_DISPLAY_CLOSE)
			running = false;
	}

	al_destroy_display(display);
	al_uninstall_keyboard();

	return 0;
}


When run this example will simply display an empty window.  The big difference is now it can be closed using the X icon or by pressing (and releasing) any key on the keyboard.  You will also notice in this example that since we can now exit our main loop, after the main game loop we do some cleanup work.  Generally every create function has a corresponding destroy function to clean up resources used.  This is also true with install and uninstall functions.


It’s possible that you want your game loop to run at a fixed rate, for example 30 or 60 frames per second.  This is also dont using ALLEGRO_EVENT, in this case a timer.  Here is a simple tweak to the above example that causes the graphics to be updated 60 times per second.

#include "stdafx.h"
#include <allegro5\allegro.h>

int main()
{
	ALLEGRO_DISPLAY * display;
	ALLEGRO_EVENT_QUEUE *queue;
	ALLEGRO_TIMER *timer;

	al_init();
	display = al_create_display(640, 480);
	queue = al_create_event_queue();
	timer = al_create_timer(1.0 / 60.0);

	al_install_keyboard();
	al_register_event_source(queue, al_get_keyboard_event_source());
	al_register_event_source(queue, al_get_display_event_source(display));
	al_register_event_source(queue, al_get_timer_event_source(timer));

	bool running = true;
	while (running) {
		

		ALLEGRO_EVENT event;
		al_wait_for_event(queue, &event);
		if (event.type == ALLEGRO_EVENT_KEY_UP || event.type == ALLEGRO_EVENT_DISPLAY_CLOSE)
			running = false;

		if (event.type == ALLEGRO_EVENT_TIMER) {
			al_flip_display();
		}
	}

	al_destroy_display(display);
	al_uninstall_keyboard();
	al_destroy_timer(timer);

	return 0;
}


Back to Table Of Contents

Programming


3. November 2017


Welcome to part one in our tutorial series covering Allegro, an open source C game library/media framework.  For a bit more of an overview and a video version of this tutorial be sure to check out this video.  In this tutorial series we are going to cover the basics of getting started with Allegro, from creating your basic app, to drawing graphics and playing audio.


In this part we are going to illustrate creating a project using Visual Studio 2017.  Allegro is also available on Linux and Mac, but we are not going to cover the getting started process on these platforms.  All of the code in subsequent tutorials will be applicable for all platforms.


Allegro supports NuGet, which makes setting up a new project in Visual Studio incredibly easy.  Let’s start off by creating a Hello World example.  Let’s get started.


Start off by creating a new Windows application in Visual Studio.  Select File->New->Project…

image


Next select Visual C++, then Windows Console Application, name it and give it a location, then hit the OK button.

image


In the Solution Explorer, for your newly created project, right click References and select Manage NuGet Packages…

image


Next click Browse, enter Allegro in the text field, then click the download icon.  Click OK if prompted with an additional dialog.

image


And done!  You have now configured Allegro for use.  In this example however we are going to need two additional libraries.  Allegro is modular in nature and you only enable the functionality you need.  Our application is going to display Hello World on screen and this is going to require a pair of libraries for text and font support.  Don’t worry, it’s easy.


In the Solution Explorer, select your project, like so:

image

Now either right click and select Properties or press Alt + Enter.  This will bring up the Properties Window for your project.  On the left hand side, located and select Allegro 5, then locate and enable Truetype Font Addon and Font Addon, like so:

image


Click Apply then Ok to close the dialog.  We are now ready to code.


You should have a file created for you with the same name as your project, in my case it’s HelloWorld.cpp.  Double click it in the Project Explorer window and replace it with the following code:

#include "stdafx.h"
#include <allegro5/allegro.h>
#include <allegro5/allegro_ttf.h>
#include <allegro5/allegro_font.h>

int main()
{
	al_init();
	al_init_font_addon();
	al_init_ttf_addon();

	ALLEGRO_DISPLAY * display = al_create_display(640, 480);
	ALLEGRO_FONT * font = al_load_ttf_font("YARDSALE.ttf", 64, 0);

	while (true) {
		al_clear_to_color(al_map_rgb(255, 255, 255));
		al_draw_text(font, al_map_rgb(0, 0, 0), 0, 0, 0, "Hello World");
		al_flip_display();
	}
}


This code follows a pretty common pattern in Allegro.  We always start off by initializing the Allegro libraries with a call to al_init().  You will notice in this example we also need to init the two addons we included.  This is true for all addons use in Allegro as you will see shortly.

This code then creates a window 640x480 in size, loads a font named YARDSALE.ttf with a size of 64pt.  Next we run an infinite loop clearing the background to white ( in RBG format, each number from 0 – 255 is the amount of that could, Red, Green and Blue respectively ).  We then draw the text using our font and this time the color black.  All this time we have been drawing to an offscreen buffer.  Call al_flip_display() to make this offscreen buffer visible to the user.


There are a few things to note about this example… first it can’t be exited.  Don’t worry, we will cover that in a future tutorial.  It also leaks resources like a sieve.  Each load, create or init call has a corresponding call to free those resources up when we are done with them.  We will also cover this in a future tutorial.


The final thing you might notice is we used a font called YARDSALE.ttf…  guess we need that font don’t we?  That font is available for download here, simply download the zip file and copy the file YARDSALE.ttf.  Of course if you have your own TTF file, you can feel free to use it, just be sure to change the file name in the code.  Now the question remains… where do you copy it?  This is actually an area that Visual Studio C++ developers often get tripped up… I certainly do.  You want this file to be copied into the Working Directory of your application.  You can determine or set this directory in the Properties panel of your project. 

image


Copy the TTF file to this location.


Now you can run your code by hitting F5 or clicking Local Windows Debugger in the toolbar.  If everything went according to plan, you should see:

image


Congratulations, you’ve just created your first Allegro application!  On thing you might notice is a DOS window in the background, like so:

image


Don’t worry, getting rid of this window is pretty simple.  Once again, open up the Properties window of your project.  Now locate Linker->System on the left hand side.  Select SubSystem, then Windows instead of Console.

image


Voila, no more console window!  One other thing you may notice… due to the fact this application is an infinite loop, it never actually shuts down and you can’t close it using the X icon.  For now you can exit the application in Visual Studio using this button:

image


Or by hitting Shift F5.  Well that’s it for Part One, congratulations, you’ve created your very first Allegro application.  Next we will look a bit closer at our game loop and making exiting our game a lot easier.


Back to Table Of Contents

Programming


18. September 2017

In this section of our Bowling with Game Engines series, we will be implementing our bowling game using the open source Godot engine. The idea is straight forward, implement the same simple 3D game across a number of game engines. One warning right up front, this engine uses Godot 2.x on the eve of Godot 3.0 being released. Godot 3.0 will receive rather large changes to the 3D portions of Godot. We will go step by step through the process of creating our game, both in text as well as a video version available. All of the assets used in this tutorial are available on Patreon as part of the bowling game kit, along with project files and this document in PDF form. Don’t worry, these aren’t needed to follow along.  There is a video version of this entire process available here or embedded below.

First fire up Godot and create a new project. Once Godot is loaded, click New Project, then pick a location to create the project in. The project directory will be the project’s name.

clip_image002

Now double click your newly created project to load it.

clip_image004

Let’s start things off by creating our Title screen. Before we go too far ahead, lets create an empty node to parent our scene then save it. In the Scene panel, click the Plus Icon

clip_image006

Select Node from the following dialog:

clip_image008

Select the Scene menu, then Save Scene as:

clip_image010

Name it TitleScene.tscn and click Save. Ok now the we have a Scene to work with, time to get to work. Let’s import the title scene image. You can use any supported texture format, but if you are working from the Patreon files, the document you want is Titlescreen.png. Select the Import Menu, then Texture

clip_image012

In the following dialog, be sure to select 2D Texture, locate the texture you want to import, then click the Import button. The defaults for Texture options and format are fine. Please note, for 2D steps you can actually skip this step and directly copy the texture into your project folder using Explorer/Finder.

clip_image014

Now that we have our title screen texture, it’s time to go ahead and use it. In the Scene panel, select the node we created earlier, then click the + Icon. This time we want to add a node of type TextureFrame. You can filter the options available in the node list to quickly find the node you want to create.

clip_image016

Now that we’ve created a TextureFrame node, in the Inspector, locate the Texture property, drop down the menu and select Load. Select our newly loaded texture.

clip_image018

Now turn the Expand property on:

clip_image020

And resize the Texture to the full size of your viewport:

clip_image022

Woot, most of the way there… now we want to add some looping title music that palys when the game starts. We need to import a song to use. In this case I’m using a simple WAV file that we are going to loop. The process is just like with Textures, select Import->Audio Sample

clip_image024

In the resulting dialog, locate the WAV file you want to import, in options select Loop then finally select Import.

clip_image026

Ok, now that we have a sound effect to play, let’s play it. In the Scene panel, select TextureFrame then click the + Icon. This time the node type we want is a sample player. Your scene should look like this now:

clip_image028

Hmmm, that error Icon can’t be a good thing, can it? No worries, we just need to define the sample to play. This is going to take a couple step sthough, first we need to add a Sample Library, then add our sample to it. Don’t worry, it’s not that difficult. With the SamplePlayer selected, in the Inspector drop down the Samples option and select New SampleLibrary.

clip_image030

Now select samples again and this time choose Edit.

clip_image032

This brings up a new editing window:

clip_image034

Click the folder icon, select your imported sample in the resulting dialog. It should then look like:

clip_image036

Now in the Inspector we should be able to select our newly loaded sample in the Play menu:

clip_image038

This whoever has one EXTREMELY annoying side effect… the sample will play over and over in the editor while you have this scene open. Yeah, it gets annoying fast. Time to do our first scripting instead! Let’s add some code that plays our sound when the scene is loaded… a sure way to keep sane! This means we need to add a script to node in our scene… don’t worry, its pretty easy.

We are going to create and attach a script to the TextureFrame node, the parent of our SamplePlayer. Right click the Texture Frame in the Scene panel, then select Attach Script.

clip_image040

In the resulting dialog click the .. next to Path and name your file TitleScreen.gd, then click Create.

clip_image042

This will bring up the script editor like so:

clip_image044

Now we want to change the code like so:

func _ready():
set_process_input(true)
get_node("SamplePlayer").play("BowlingOhYeah")


Now it’s time to check out all of our hard work. Now click the Play icon:

clip_image046

Since this is the first time we’ve run it, we need to tell Godot which Scene is the entry point for our application.

clip_image048

Click the Select button. Then select TitleScreen.tscn in the resulting dialog. Now your application should run!

clip_image050

Now of course we have to get to the guts of our actual game. Next we create our next scene where the majority of the game is going to occur. First make sure to save your existing scene if you haven’t already. Then click Scene->New Scene.

clip_image052

Every scene must have at least one node. So in our newly created scene, again click the + Icon in the Scene Panel and select Node. Now save the scene as GameScene.tscn.

Perfect, now we have somewhere to go from our title screen... Next, we need to have some kind of action or trigger to switch between scenes. We are going to handle the scene change whenever the user presses any key or clicks any mouse button. This involves appending a bit of code to our script. Simply add the following function at the bottom of TitleScene.gd:

func _input(event):
  if(event.type == InputEvent.KEY || event.type == InputEvent.MOUSE_BUTTON):
  get_tree().change_scene("GameScene.tscn")

Excellent! We are now done with the Title scene… Time to move onto the main event!

If it isn’t already loaded, load up GameScene.tscn. Simply double click it in the asset view:

clip_image054

Multiple scenes can be open at once and you cant toggle between them using tabs across the top of the screen. You can also switch between scripting, 2D and 3D modes. We are working in 3D in this scene, so make sure that’s selected.

clip_image056

Now we are going to assemble all of the various assets we need to create our game. We have a Bowling Pin, Bowling Lane and in this example a Bowling Ball. You may note this differs from other “Bowling With” tutorials, in that in other tutorials we procedurally generate the bowling ball. In Godot 2.x there are no editor assessable geometric primitives so we instead import the bowling ball as a 3D model. There is however a plugin available for Godot that enables you to create meshes like spheres, cubes and planes that I document the use of in this video ( https://www.youtube.com/watch?v=Ca2FcVb2lBk ).


Click here for next part in the series.


The Video

Programming


18. September 2017

Click here for the previous tutorial section.

Now it’s time to create our bowling lane. If you are a Patreon, the resources we are using are located in the GFS Dropbox in the GameKits\Bowling folder. Godot works a bit different from other game engines in that complex models are imported as scenes. Simply select Import->Scene

clip_image002

At a minimum select the DAE (COLLADA) file location, then the location within your project to import into, then finally click import.

clip_image004

One thing that is very important to realize here is this process will import the entire scene from the model file. This includes lights, cameras, etc… so be sure when you export to DAE, you only export the items you want imported. Of course, you’ve got the option of deleting unneeded items in Godot if needed.

It is possible that the import process doesn’t always bring in the textures, so we will cover doing this part manually. If your model imported fully textured, you can skip ahead and ignore this section. First import that texture object into your scene. The bowling lane has two textures, a diffuse (color) and normal (depth) map. Select Import->Texture.

clip_image006

Then select the texture, where to import it and finally hit the import button.

clip_image008

Repeat this process for each texture file you need to import. Now we need to define a material on our BowlingLane node. Select the BowlingLane, locate MeshInstance->Material->0, click the drop down and select New FixedMaterial.

clip_image010

This will create a new material. Drop it down again and this time select Edit.

clip_image012

Now locate Diffuse, drop down the pull down and select Load.

clip_image014

Select your newly imported Diffuse texture. Now repeat the process for Normal

clip_image016

You can control the strength of the normal map using the Normal Depth setting:

clip_image018

Your Bowling Lane should now look a lot more like a bowling lane than before!

clip_image020

Now we need to add some Physics nodes to our lane. In the Scene graph, select the BowlingLane mesh instance, right click and select Add Child Node.

clip_image022

Select StaticBody.

clip_image024

This will make our lane part of the physics simulation, but as the name suggests, it wont be affected by it. So basically, a static body can be hit, but nothing will happen to it. Finally, we need to define the geometry of physics object. Right click your newly created StaticBody, select Add Child Node Again and this time select CollisionShape.

clip_image026

With the newly created CollisionShape selected, locate Shape, drop down and select New BoxShape.

clip_image028

Now select the Shape drop down again and select Edit

clip_image030

Now modify the Extents until it tightly wraps the underlying shape.

clip_image032

We are now done with the lane. Save the scene file and close it.

Creating the Bowling Pin

Now we repeat the exact same process, except this time with our bowling pin. The process is actually identical, except instead of creating a StaticBody, we create a PhysicsBody. However, in this case the RigidBody needs to be the parent of the Pin. Don’t worry, its pretty simple. Be sure to make the RigidBody node a child of the Root “BowlingPin” node, then drag the Pin node onto the newly created RigidBody. So we can identify the node in code later, also rename it from RigidBody to PinRigidBody. The end result should look like:

clip_image034

In the properties of our RigidBody, we also want to set Can Sleep off and Contact Monitor on, like so:

clip_image036

Creating our Bowling Alley

Now it’s time to put it all together. Go back to GameScene in the editor and we need to create some instances of our lane and pins. Simply locate the lane in the assets view, right click and select Instance.

clip_image038

Now repeat the process for the bowling pin. Your scene should now look something like:

clip_image040

Next reposition the bowling pin and so it’s above the lane and down a bit. Now it’s the moment of truth… are you a 5 pin or 10 pin fan? Either way, duplicate the first pin. Locate it in the Scene panel, right click and select duplicate ( or select and hit Ctrl + D ).

clip_image042

Then move the pin into position and repeat the process. If you want, now is your chance to create 7 pin bowling! Personally, I went with 5, and it looks like this:

clip_image044

5 pin for life! We are certainly getting there! It’s at least starting to feel like a bowling game. It would be a good time to check out our work, but press play and you’ll notice a problem… nothing shows up! That’s because we need to create a camera! With the root node selected, create a new node and select Camera:

clip_image046

Now position the camera in your scene using the transform manipulator. With a camera node selected, you can hit the Preview button at any time to, well, preview the camera.

clip_image048

Now when we press play…

clip_image050

Hmm, a bit dark in here isn’t it? Well that makes sense, we have no lights in our scene. We have two options here… we can add some lights or we can add ambient lighting. Getting the later right is probably a bit easier, so lets take that approach. With the camera selected, located the Environment setting, drop it down and select New Environment

clip_image052

Now drop it down again, this time selecting Edit. Now turn Ambient lighting on and select a color close to white.

clip_image054

One thing you might find is that the results are really blurry and undesirable. There are two ways to address this… first, select the texture, locate the flags propert and turn off MipMap and Filtering:

clip_image056

Finally, in the mesh of an imported scene, you can turn off baked lighting:

clip_image058

Both of these steps are completely optional. At this point our game should look like:

clip_image060

And our scene should look like:

clip_image062

Now all we need is a ball!  Click here for the next tutorial section.

Programming


GFS On YouTube

See More Tutorials on DevGa.me!

Month List