Archive

Archive for the ‘Tutorial’ Category

Building SFML 2.0 with Make (GCC/Ubuntu)

16.08.2011 15 comments
GNU Compiler Collection logo. Source/Author: from http://gcc.gnu.org/img/gccegg.svg, with tweaks.

Image via Wikipedia: The GNU Compiler Collection

I’ve now demonstrated how to build the SFML 2.0 binaries in an IDE and also with a build utility (better). However, all my tutorials have undoubtedly been Windows centric – I discussed Microsoft Visual C++ and MinGW, after all. Well now it’s time to make that right – in this article I’m going to explain how to build the latest versions of the SFML 2.0 binaries for Ubuntu, using GCC.

Other Unix Operating Systems

With the addition of the post, I’ve covered Windows – both MinGW and MSVC – and also GCC on Ubuntu, Linux Mint, Debian or an Ubuntu variant such as Xubuntu. But what about the rest of you? What if you’re on another Unix operating system? Well, the fact is that you should still have access to GCC. This means you should be able to invoke the actual build operation with the same commands. The other software we need – CMake – should also be available for most platforms. Thus the core elements of what I demonstrate here for GCC with Ubuntu should be applicable to GCC with other Unix platforms.

The thing that you will have to bear in mind, however, is that the other terminal commands I use (such as apt-get to install software) may not be available on your system. You may have a different terminal, and different package manager which is invoked via a different command and syntax. If you want to follow this tutorial, you’ll have to translate those commands into ones appropriate for your OS. Just remember that the invocation of cmake and make should be the same in most circumstances.

The Video

Read on the for textual tutorial. I suggest that even those of you who prefer videos read this one, as we’ll be working primarily with the terminal: something which is undoubtedly easier to talk about in writing. Read more…

Two Small C++0x Features

I’m going to mention two little C++0x features today. I don’t have much time, but I thought I may as well share them briefly. They’re both fairly small and quick to explain, so let’s get to it. I’ve put the one that’s faster to discuss first. As always, check out Dr. Stroustrup’s FAQ for more information.

I. long long Integers

The C++0x standard has a new type – the long long integer – which is guaranteed to be at least 64bit. No more annoyances because too many compilers make int and long int the same size – use long long int and you can be sure that you’ll get 8 whole bytes of integral goodness!

Apparently this feature was already supported by a number of compilers, but it’s standard now so you don’t have to worry about non portable code (well you do, but you can blame compiler vendors for being slow to comply with the new standard… ;) ). There’s really not much to say here, merely that you have two 64bit types: long long (i.e. long long int) and unsigned long long (i.e. unsigned long long int). Also note the new literal suffixes: LL for long long and ULL for unsigned long long.

II. nullptr

This one’s exactly as the name suggests: that is, the nullptr keyword represents a null pointer. Previously one might have done something like this:

char* name = 0;

In C++0x, however, one can do the following instead:

char* name2 = nullptr;

These two examples have the same result, that is name == name2 would evaluate to true. On the other hand, while we can also assign the value o to an integral type,  we can assign nullptr only to a pointer variable. So the following would yield a compiler error:

int age = nullptr; // compiler error: age is not a pointer

This is all well and good, but it’s quicker to type 0 than nullptr. Why, therefore, should we use the latter over the former? Well the fact is that the double meaning of 0 as the integer 0 and as the null pointer 0×00000000 has the potential to cause problems. Allow me to demonstrate using Dr. Stroustrup’s example. Consider a function f with two overloads:

  • void f(int)
  • void f(char*)

We call f(0). What happens? Well in fact, f(int) is called, but what if we wanted to pass a null pointer to f(char*). Previously we should have had to resort to something like f((char*)0), which is rather undesirable, in my opinion at least (and, presumably in the opinion of committee members!). So, do the right thing and use nullptr to represent your null pointers.

SFML Graphics – Fonts and Text

01.08.2011 12 comments

In this tutorial, I’m going to tell you about another SFML graphics feature – text. By the end, you should be happy loading fonts from files, and using them to display text to the screen. We’ll also briefly discuss the manipulation of text as a graphics object. As we go along, I’ll make some analogies to SFML’s image handling features, to ease the learning process.

The Video

Working with text in SFML

Let’s get straight to it. Open up our Minimal Application project (you know – the one which just created an empty window and cleared it to a constant colour). If you don’t have the source code for this application at hand, you can find it with the corresponding tutorial.

Getting Started

So first, let’s just go ahead and display our first piece of text. Add the following line before the start of your main loop.

sf::Text Text("SFML Coder");

This constructs a text object which contains the text ‘SFML Coder’. Now we just need to display it. Add the following code after the call to sf::Window::Clear(sf::Color&), but before sf::Window::Display(void).

Window.Draw(Text);

And that’s it. Run your app and you should get some text!

But that’s not really it, is it? ;) Sure, we displayed some text, but we should be able to do a whole lot more. Maybe you want to change the font face or size. Maybe you want to scale the text, or apply a colour to it. Maybe you want to apply other transformations to it, such as rotation and translation. Well you can do all these things, and we’ll see how next.

Custom Fonts

Loading a Font

Remember when we worked with images, SFML had two classes: the lightweight and easily copiable sf::Sprite and the resource heavy, slow-to-load sf::Image? Well it’s the same with text. sf::Font does the heavy lifting – loading ‘glyphs’ from font files into memory, while sf::Text worries about drawing things to the screen, without managing the actual pixel data.

Note that this means it’s not advisable to load fonts on the fly and copying of fonts should be avoided where possible. On the other hand, sf::Text can be both copied freely and created mid frame without performance issues.

So. Let’s see how to load a font now. Add this code before you enter the main loop. We’ll create an object of type sf::Font and load a font into it, from the file font.ttf. You’ll need to provide the file font.ttf in the project directory to run your application. Just grab something from your system fonts folder, copy and paste it, and rename it.

sf::Font Font;
if (!Font.LoadFromFile("font.ttf"))
  return 1;

sf::Font‘s default constructor doesn’t do much. The real work happens in sf::Font::LoadFromFile. This function is similar to sf::Image::LoadFromFile: they both return false on failure and true on success, and they both take a single string filename to specify the file from which to load. On failure, we return 1 to end our program signifying failure to the thing that started it (probably the operating system).

Text: The Full Constructor

In fact, sf::Text has a few more parameters in its constructor than we used last time. We passed just one: a constant reference to a string. Now we’ll add an additional two!

sf::Text Text2("SFML Coder", Font, 40U);

The second argument we pass is a reference to a font object. Note that this argument defaults to sf::Font::GetDefaultFont() which returns a reference to a default, inbuilt font which SFML has (Arial). The third argument is an unsigned integer to specify the size of the font. 30 is used by default. (Note the trailing U marks the integral literal 20 as unsigned).

Now replace the line to draw the previous font with this:

Window.Draw(Text2);

And you’ll see that the text is now smaller, and also in whatever font you provided in the directory.

Controlling Text Attributes after Construction

So an object of type sf::Text has a size, a font and a textual string associated with it, which could be set during construction. Such an object also has a style (bold, italic, underlined, normal, or a combination thereof). This cannot be set by the constructor, but it can be accessed afterwards via get/set methods. Indeed the other three things (the text string, the size and the font) can also be manipulated using get/set functions:

  • to access the font (face): sf::Text::GetFont() and sf::Text::SetFont(const sf::Font&)
  • to access the font size: sf::Text::GetCharacterSize() and sf::Text::SetCharacterSize(unsigned)
  • to access the text string: sf::Text::GetString() and sf::Text::SetString(const sf::string&)
  • to access the style: sf::Text::GetStyle() and sf::Text::SetStyle(unsigned long)
Note that all the text styles are located within the enumeration sf::Text::Style. For example, let’s create a third sf::Text, using it’s default constructor and then setting it’s properties using set methods.
sf::Text Text3;
Text3.SetFont(Font);
Text3.SetCharacterSize(20U);
Text3.SetString("http://www.youtube.com/sfmlcoder/");
Text3.SetStyle(sf::Text::Bold | sf::Text::Underlined);

Manipulating Text

Now sf::Text is derived from sf::Drawable, just like sf::Sprite. That means that all the manipulations we could perform on a sprite (translation, rotation, scaling and applying colours) can equally be applied to a text object. You can get and set its position using sf::Drawable::GetPosition() and sf::Drawable::SetPosition(const sf::Vector2f&) respectively. Similarly, there are functions for rotation and scaling, as well as relative transformations. Then you can use sf::Drawable::SetColor(const sf::Color&) to apply a colour to the text.

I shan’t say too much more on this subject, as I provided some examples in the Images and Sprites tutorial, and you can also read more here. Just remember, of course, that all these manipulations are applied to the sf::Text object and not the sf::Font object.

Here’s a brief example of possible manipulations applied to our last sf::Text object.

</p>

<pre>Text3.Move(400.0f, 300.0f);
Text3.Scale(2.0f, 1.8f);
Text3.SetColor(sf::Color(255, 0, 0));</pre>
<p style="text-align: justify;">

Complete Source Code

Below is the complete source code for this tutorial.

#include <SFML/Graphics.hpp>

int main()
{
	sf::RenderWindow Window(sf::VideoMode(800, 600, 32), "SFMLCoder Tutorial - Text and Fonts");

    sf::Text Text("SFML Coder");

    sf::Font Font;
    if (!Font.LoadFromFile("font.ttf"))
        return 1;
    sf::Text Text2("http://sfmlcoder.wordpress.com/", Font, 40U);

    sf::Text Text3;
    Text3.SetFont(Font);
    Text3.SetCharacterSize(20U);
    Text3.SetString("http://www.youtube.com/sfmlcoder/");
    Text.SetStyle(sf::Text::Bold | sf::Text::Underlined);

    Text3.Move(400.0f, 300.0f);
    Text3.Scale(2.0f, 1.8f);
    Text3.SetColor(sf::Color(255, 0, 0));

	while (Window.IsOpened())
	{
		sf::Event Event;
		while (Window.PollEvent(Event))
		{
			switch (Event.Type)
			{
			case sf::Event::Closed:
				Window.Close();
				break;
			default:
				break;
			}
		}

		Window.Clear();
		Window.Draw(Text); // replace with Text2 or Text3 to display them instead
		Window.Display();
	}

	return 0;
}

Building SFML 2.0 with MinGW Make

16.06.2011 9 comments

In this tutorial I’m going to show you how to build the SFML 2.0 binaries from the source using MinGW Make, that is the MinGW make utility.

The Video

Read on for the textual tutorial. Even if you watch the video, it’s worth a look at the text as we will be using console commands.

Read more…

Building SFML 2.0 with NMake (for Visual Studio)

15.06.2011 20 comments

In this tutorial I’m going to show you how to build the SFML 2.0 binaries from the source using NMake, that is the Visual Studio make utility. Here is a Windows batch file which should build SFML for you. Of course, it’s best to read the tutorial anyway as it will introduce you to CMake and NMake – two very useful development tools.

The Video

Read on for the textual tutorial. Even if you watch the video, it’s worth a look as we will be using console commands.

Read more…

Video Modes and Windowing

12.06.2011 6 comments

Hello, and welcome. Today we’re going to discuss windowing and video modes in more detail. That is, we shall see how we can manipulate windows, and control their attributes. Also, of course, we discuss video modes, and how we can best use them.

The Video

Read more…

SFML Event Handling

Welcome to SFML tutorial 3. In this lesson, we discuss event handling, and see how we can handle input using events.

The Video

The video was split into two parts due to length considerations. Here they are, and I suggest you head over to YouTube to watch them in HD for the best viewing experience.

 

 

Read on for the textual tutorial!

Read more…

The C++ Resource Network

If you aren’t already a member, you should really join the C++ Resource Network at http://www.cplusplus.com/.

There’s a great tutorial, extensive standard library documentation and source code examples. Most importantly, of course, there is an active and friendly community which will be happy to help you with your problems, provided you do your own research first and show you’ve made an effort to solve your problem. So head over there now and register – and just remember not to ask any stupid questions ;)

SFML Graphics – Images and Sprites

26.05.2011 17 comments

So welcome to your second SFML tutorial. This time we’ll be covering basic graphics: displaying images. First, I provide the videos corresponding to this tutorial. Read on for the textual version.

Read more…

Empty Window: A Minimal SFML Application

20.05.2011 7 comments

This is the first of my SFML tutorials. In it I provide and explain a minimal SFML application which opens a moveable window and waits to be closed. We will build on this in each subsequent tutorial.

I’ll assume you’ve already got the SFML 2.0 binaries set up on your computer, and that you know how to create a project file in your IDE which uses SFML 2.0. If you are unsure about any of these steps, see my earlier posts, or watch some of the setup videos on my YouTube channel.

Here’s the video for this tutorial:


Read more…

Categories: Introductory, SFML, Tutorial
Follow

Get every new post delivered to your Inbox.

Join 73 other followers