Subscribe to GameFromScratch on YouTube Support GameFromScratch on Patreon


Game From Scratch C++ and SFML Edition!

 

Want to create a game using C++ and SFML?  This is the perfect place to start! This tutorial series will follow the creation of a simple game in C++ from the very beginning till the end, a micro-version of the overall purpose of this site.  C++ is an evolving language standard and a great many tutorials out there are horrifically outdated or just plain bad.  Similarly, most tutorials in books or on sites are by their very nature required to be very short and concise.  This site fortunately does not have that restriction, so I can babble on and on and on…

 

 

This series is meant to be a living document, so if you have any questions on specific section, let me know and I will update accordingly!  Comments are available on every page, please use them, I am reading and will respond.  Each post in this series builds on the last and may completely replace some code you wrote previously.  It may feel a bit repetitive at times, but I guarantee the experience will be useful to you if you are just starting out.

 

 

Finally, I don’t pretend to be an expert on C++ nor SFML, so if you see a mistake or you disagree with something I have said, let me know.  On occasion I make choices that prefer clarity over “rightness”, but due to the length available to me these should be few in number.  At the end of each section with be a zipped download of the project in case you encountered any errors following along.

 

 

 

Alright, lets get this started.

 

EDIT: This tutorial was written a couple years ago and targets Visual Studio 2010.  Since it was released, new versions of Visual Studio have been released that aren’t binary compatible with the files I included for SFML 1.6.  You can either build a version of SFML 1.6 with the newest VS version ( a somewhat daunting process ), or much easier, install Visual C++ Express 2010.  It will install side by side with newer versions without issue.

 

The Introduction

 

In this section we have an overview of what this project is going to involve as well as a list of programs and libraries you are going to need to follow along.  If you already have Visual C++ and SFML 1.6 installed and working, you can safely skip this section.

 

 

Part 1

 

In this section we set up and configure your Visual C++ project and configure Visual C++ to work properly with SFML.  This is an area that new developers often get hung up on, so it goes into a fair bit of detail.  If you are able to successfully compile SFML 1.6 projects in Visual C++ 2010 you can probably skip this section as well.  If you run into linker errors, this part should help resolve them

 

 

Part 2

 

Code, we finally start to code.  In this part we create the basic classes of our game including our basic game loop and a game state mechanism.  By the end of this part we finally have a working executable.  Granted, an exception boring one, but it works!

 

 

Part 3

 

In this section we add a splash screen and basic menu to our game. We also have our initial exposure to some object oriented concepts as well as start to see some of the advantages to using a state driven game design.

 

 

Part 4

 

In this section we create a base graphic class for game objects, as well as define the beginnings of our players paddle.  This part gets a bit more in depth with object oriented programming and starts to demonstrate a few of the advantages.

 

 

Part 5

 

In this section we add the GameObjectManager class for managing our game objects.  We look in depth at the std::map datatype, introduce iterators and deal with pointers for the first time.

 

 

Part 6

 

In this section we start things moving, literally!  We make the player’s paddle controllable as well as adding the ball to the world.  In terms of C++, we look into the concept of protected and asserts.

 

 

Part 7

 

In this section we get the game ball moving and add collision detection to the game.  We also introduce C++ type casting and explorer the different casting options. We are now one paddle away from a game!

 

 

Part 8

 

In this section we add audio support by writing some very bad code.  That very bad code is there to introduce some very good design.  Using audio as the example, we implement a design pattern, the Service Locator, to show how to manage a globally available object in a safe manner.  In the end, we have a class that is capable of playing audio using SFML or FMod with only a single line of code changed. This chapter is quite a bit different  than previous chapters, but I hope you enjoy it.

 

 

Part 9

 

In this section we implement a cache system for SFML music and sound files. We also create our enemy paddle and give it a rudimentary ( stupid ) AI. Along the way we introduce the concept of exception handling and have a brief introduction to C++ templates.

 

 

Compiling in release mode and preparing for distribution

 

 

This section looks at moving from using debug libraries to the release versions.  In addition it covers pairing down the included files so you can share your game with other people.





blog comments powered by Disqus


Month List

Popular Comments

Godot Engine Tutorial Part 5–GUI Programming. Using Controls, Widgets and Containers
Subscribe to GameFromScratch on YouTube Support GameFromScratch on Patreon


20. February 2015

 

This tutorial is available as an HD video here.

 

In this tutorial we are going to look at the UI aspects of the Godot game engine.  If you have prior experience with other game engines, you will probably be shocked by the number of UI widgets and containers that ship with Godot.  While many of these controls would never be used in a game, they are absolutely invaluable for creating tools.  Of course they are also great for making games, making implementing your UI a breeze.

 

Using Controls in Godot is just like using any other Node, although the relationship between them is where things vary the most.  Let’s take a quick look at what’s included:

image

 

All controls inherit from Control, which in turn inherits from CanvasItem, which allows it to be drawn on screen.  At the end of the day there are three categories of Controls: UI Wdigets, Containers and Popup Windows.  The containers are controls that contain other controls.  Quite often they will automatically arrange their contents for you.  Popup Windows are exactly that, dialog boxes you can display for things like messages, file selection, etc.  Then there is everything else…  these are the various widgets you can use in your application, things like Buttons, Labels and even video players.

 

Your First GUI Application

 

Let’s jump right in, show how controls work and the relationship between containers and controls.  We are going to create a simple menu where our controls are automatically laid out vertically.

 

Start out by creating a VBoxContainer, which is a box of controls that automatically arranges it’s children vertically.

Create a VBoxContainer Node:

image

 

Size it somewhat centered on your screen, like so:

image

 

Now in the Scene tab, make sure VBoxController is selected and create a new node:

image

 

Select MenuButton:

image

 

Repeat a couple times so you have multiple buttons.  Your scene hierarchy should look like this:

image

 

Next select MenuButton and in the Inspector set the Text:

image

 

You can set a number of properties that control the button’s appearance.  Keep in mind, like all other nodes in Godot, the Control inherits positional information from it’s parent container.

 

As you add text to your controls, you can see that the container automatically aligns them vertically within:

image

 

Now, what if you want to expand the labels to use the entire space available within the parent control?  That can easily be accomplished too.  For each button, go into the Inspector and drop down the Vertical setting and make sure Expand is selected:

image

Now you should see the menu laid out like this:

image

 

You may find the Font to be laughably small… so lets quickly create a new font.  We covered this in the past but a quick recap.  Select Import->Font:

image

 

Select a ttf file and save it as a fnt file, like so:

image

 

Now you can the font of each menu item using the Load option of Custom Font in the Inspector with a Button selected, like so:

image

 

After setting the font, sizes should change automatically, like so:

image

 

You need to perform this task for each Button… or…

 

Using a Theme

 

Godot has limited theming support, but in reality that mostly just means you can set a common font.  Select the VBoxContainer, locate Theme and create a new one:

image

 

Now drop it down again and select Edit:

image

This will now bring you to the theme editor window, which contains a preview of how your theme looks with various controls:

image

 

In the Inspector, select Theme->Default Font and load our font:

image

 

When happy with your theme, select Save Resource button:

image

 

Save it as a .thm file:

image

 

Now all of the controls in your container should be updated ( You may have to load the theme again using Theme->Load ):

image

 

Connecting Code to your Control

 

Now that we have our controls wired up, lets go ahead and wire them up to do something. 

 

First lets attach a script to our container.  In the Scene tab, select the VBoxController and click the new script button:

image

 

Create it using whatever settings you wish, like so:

image

 

Now select your first MenuButton and click the Connections button:

image

 

Select Pressed, then press the Connect button:

image

 

Make sure the container is selected, then press Connect:

image

 

This will create a method named _on_MenuButton_pressed in the VBoxContainer script.

 

Now edit your code like so:

image

 

Now run your game and you should see:

image

 

And if you click the first button you should see:

image

 

There are several more controls available, but the basic process of using them is nearly identical so I wont go into it.  For more details on laying out controls or more examples ( such as using pop-ups and Bitmap buttons ), be sure to watch the video tutorial as well!

 

The Video Version

 

Programming ,

blog comments powered by Disqus

Month List

Popular Comments