How to setup SFML on Ubuntu 14.04 LTS

Edit: There is an updated version of this article available here
================================================


Hi Folks,

in one of my first posts about game development I said I would show you how to setup a SFML development environment on Linux. Now it's time to fulfill this promise ;)

At first I want to limit the Linux distro to Ubuntu, 14.04 LTS in particular. I've only tested it on Ubuntu because I don't use any other distro anymore. Ubuntu rocks them all ;) (personal taste). Because Ubuntu is based on Debian, this article should also apply to Debian, although I haven't tested it.
The problematic part about Ubuntu 14.04, the official SFML version in the repos is 1.6, and we don't want this old one. We want the actual 2.1 stable release. There are also some more version problems with SFML dependencies, especially with GLEW. But this means we need to build it from the official source code ourselves with all dependencies solved, so everything works fine. Ok, let's do it!

After a clean Ubuntu 14.04 installation, first thing we need is a compiler. I think GCC will be sufficient enough ;) We also need the meta build tool cmake in order to build SFML. Open a terminal (ctrl+alt+t) and enter the following commands

sudo apt-get install g++
sudo apt-get install cmake

After this we need all dependencies of SFML solved. Enter the following commands (order doesn't matter)

sudo apt-get install freeglut3-dev
sudo apt-get install libjpeg-dev
sudo apt-get install libfreetype6-dev
sudo apt-get install libxrandr-dev
sudo apt-get install libglew-dev
sudo apt-get install libsndfile1-dev
sudo apt-get install libopenal-dev

The important part is, that we always need the developer version of these libraries in order to build SFML. Now we only need the SFML source code which can be downloaded here: http://www.sfml-dev.org/download/sfml/2.1/SFML-2.1-sources.zip

Extract the zip-file to some directory, e.g. ~/dev/sfml-master. Now we need to configure the makefiles with cmake. Switch to the extraction directory of SFML and enter the following:

cmake -G "Unix Makefiles" -D CMAKE_BUILD_TYPE=Debug -D BUILD_SHARED_LIBS=TRUE .
make
sudo make install

Don't forget the dot at the end of the cmake command. This tells cmake to use the actual working directory as source directory. Until now we only have the shared debug lib, but we also need the release libs. Therefore simply replace the CMAKE_BUILD_TYPE=Debug with Release:

cmake -G "Unix Makefiles" -D CMAKE_BUILD_TYPE=Release -D BUILD_SHARED_LIBS=TRUE .
make
sudo make install

Finally if you want to link your SFML apps statically you need the static libs. Therefore repeat to two above steps for Debug and Release and change BUILD_SHARED_LIBS to FALSE:
cmake -G "Unix Makefiles" -D CMAKE_BUILD_TYPE=Debug -D BUILD_SHARED_LIBS=FALSE .

make
sudo make install

cmake -G "Unix Makefiles" -D CMAKE_BUILD_TYPE=Release -D BUILD_SHARED_LIBS=FALSE .
make
sudo make install

Now you have covered all four possibilities of the libraries and you can now develop SFML projects the way you like.
You can now start a new project in e.g. Code::Blocks (do not use the SFML-Project Template shipped with Code::Blocks, it contains legacy SFML-Code). Create a new console project and goto Build Options -> Linker Settings and add the SFML libraries to the Linker Settings:

If you need networking or audio don't forget to add these here as well (sfml-audio-d, sfml-audio, sfml-network-d, sfml-network). That's all, you are now able to write, compile & run SFML 2.1 driven applications on Ubuntu 14.04.

Cheers until next time.

Posting Source Code on Blogger

Hi Folks,

in todays post, I want to test and show you how to post nicely formatted, syntax highlighted source code on Google Blogspot. This task was actually more difficult than I thought it would be, heck, Blogger didn't want to do it at all in the beginning. But beeing an IT engineer, and a very serious IT guy, I managed to pull it off. ;)

Here's how to do it.

At first you need a JavaScript Library which will format our code. There are some out there, but most popular is SyntaxHighlighter version 3, by Alex Gorbatchev. You can head over to http://alexgorbatchev.com/SyntaxHighlighter/ for more details. After diggin' into how to use his library, I found most guides out there were outdated and working only with older version than version 3. So I show you now how to integrate SyntaxHighlighter v3 into Blogger.

First you need to edit your Blogs Template.

Go to your blog settings, choose template and then click on Edit HTML from your active template. Now in your template hit CTRL+F and search for </head> Tag.

Then you have to enter the following lines BEFORE the closing </head> Tag:

<link href='http://alexgorbatchev.com/pub/sh/current/styles/shCoreDefault.css' rel='stylesheet' type='text/css'/>
<link href='http://alexgorbatchev.com/pub/sh/current/styles/shThemeDefault.css' rel='stylesheet' type='text/css'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCpp.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushXml.js' type='text/javascript'/>
<script type='text/javascript'>
SyntaxHighlighter.config.bloggerMode = true;
SyntaxHighlighter.all();
</script>

The first two lines import CSS-Stylesheets, the core css and the default theme. There are several other themes available, you can look them up here. I use the default theme because it is solid enough and gives a nice contrast to the rest of my blog. Use whatever theme you like (you can even create your own theme, there's a tutorial on Alex Gorbatchev's site). After that, three JavaScripts are loaded, the first being the core (obviously ;-) and the other two being brushes for highlighting distinct languages. I use the C++ and XML brush to highlight C++ and HTML. If you are in need for other languages look up the alias list here.

Until now, blogger won't render any code correctly. Therfore we must say SyntaxHighlighter that it's running on blogger, which was the hard part to find out at the beginning ( SyntaxHighlighter.config.bloggerMode = true; ) and tell him to render any found code pieces ( SyntaxHighlighter.all(); )

That's all for configuration, save your template end exit edit mode. Now let's look at how to use it. Create a new blog post. Enter some text and then copy the code piece you want to blog to your clipboard. Enter HTML edit mode, search for the place where you want to put your code and enter the following lines:

<pre class="brush: cpp">
*** paste your code here ***
</pre>

<pre>-Tags are used to display preformatted code. With the addition of the class-Parameter we can tell SyntaxHighlighter that here is code to highlight in the given syntax. So once set up correctly, the actual use of it is very easy. However there is a limitation to the <pre>-Tags, you cannot paste angle brackets directly. You must HTML-Escape angle brackets, < becoming &lt; and > becoming &gt;. Otherwise your browser will try to interpret whatever is written between the angle brackets, which obviously wouldn't make any sense, and more important, would not display it in the code fragment.

Well, we are now able to view our first code piece nicely formatted on blogger. When you now hit "Preview" you will be disappointed. In Preview mode blogger doesn't render Syntaxhighlighter. At first I thought it's all broken, but after publishing the post, I found out that it just renders perfectly ;)

And now let's use it in action, and therefore I teaser my next project, my 5th edition of the ground breaking game Pong!

#pragma once
#include "Main.hpp"
#include "Game.hpp"


int main() {
 Game *pangGame = new Game();

 if( pangGame->initAll() ) {
  pangGame->execGame();  
 } else {
  return EXIT_FAILURE;
 }

 delete pangGame;
 return EXIT_SUCCESS;
}

So, as we can see, we don't see much here, other than the main.cpp creating an instance of Game, initializing it, and if successfully initialized, the game will be executed. What the class Game actually does will be posted in the future ;-)

This is how it looks atm:

 

Stay tuned for more, Cheers!

return 0;

 

P.S.: Get your daily dose of atheism http://www.youtube.com/watch?v=NfglcPPaLJk