Monday, November 18, 2013

Make Games: An introduction to Game Development

Hi Folks,
today I'm back with a new topic from my main hobby right now: developing computer games. Ever since I was a young boy, playing his first games on PC, I ever wondered how these cool games I enjoy playing are made. It took me nearly 15 years to come to the point that I actually know most of it in theory, and some ( better call it basic ) aspects of game development in practice right now. I will cover these basic topics in a series of articles here in this blog over the coming months. This will be the first and most theoratically article about it, but it's one of the most important articles, trust me ;-)

In the beginning you have the wish to make computer games, and you already have a good idea for a cool video game, but you have no clue how to start it, right? So was I. But the internet has the solution ;-) I found a very good article over at www.gamefromscratch.com which covers these very first step, which I call: "Get your tools". Look up the article I want to be a game developer for this step and come back here later, to use your tools.
"Hey Serious IT Guy, which language/engine/library did you choose?"
Short answer: C++ with SFML (and SDL).
Long answer: I first evaluated all languages I'm already familiar with and are cappable of creating games. These are C/C++, Java and C#.NET. Then I thought about my goals, and one goal is platform independence. I'm a big Windows AND Linux fan, so I want to make games for both platforms. This reduces the available languages to C/C++ and Java. ( I know C#.NET can be used under Linux, but it's not that good and no standard btw. ) I know Java really good, and it is actually not that bad as everyone states, but security issues arise very often with the Java Runtime Libraries. That left C/C++ alone, and the guy over at gamefromscratch.com clearly says NOT to start with C++. I've worked with C/C++ since university for over ten years now, and I know that C isn't that bad either, but it's a trip back to the stoneage, so I choose C++ (and didn't regret it btw. ;-) )

So, the language question is answered, that leaves the graphics library. I  couldn't really choose between SDL 2 and SFML 2.1 without having a closer look on both. Nothing gets you closer to a library than actually working with it, right? SDL 2 is maintained by a Valve Software employee Sam Lantinga, and incorporated in famous titles like Team Fortress 2, Left for Dead 2, DOTA 2, and many many other indie titles on Steam or Humblebundle. SDL 2 is written in ANSI-C and can be used natively in C++.

SFML 2.1 is maintained by Laurent Gomilla and isn't used in a project of wider scale, the homepage doesn't mention a reference to a publicly available title using SFML. It is written completely in C++, and makes heavy use of objects and static member functions, which makes it easier to use.

After reading about both libraries, SDL seems to have more functionality, but SFML seems to be more easy to use. So C++ and SDL is used by Valve, and what the pros use must be good, right? No it is not right, it is better to start easy, and learn the principles of game development without the hassle of a complex engine/library, and then advance from there and learn a "better" engine/library. So I started with C++ and SFML 2.1.

The last part in our tool chain which is missing, is very obviously a compiler ( and/or an IDE ) to get our code up and running. Here we have even more options than in the language question, but if broken down, it all comes to personal taste. From my standpoint there was only one real deal: C++11 compatibility. On Windows there are two serious alternatives here: Visual Studio 2013 and MinGW. Use what ever you like more, I use Visual Studio 2013 Express, because I know Visual Studio since Version 2003 now. Since Version 2013 C++11 is ( nearly ) fully implemented, so that's the way to go for me.

On the Linux side, there was only one real choice for me: GCC with Code::Blocks IDE. Since IBM left Eclipse development, Eclipse IDE becomes worse and worse with every release, and Code::Blocks offers a SFML and SDL project template out of the box. GCC is the defacto-standard for Linux compilers, you can't do anything wrong going this way. On Ubuntu ( I use 13.10 atm ) you can't install the SFML Packages via apt-get, because you end up with version 1.6 libraries if you do so, and we need version 2.1 of the library. So you have to install the 2.1 files manually. ( I will cover this in a seperate blog post about starting development on Linux )


Although supported by SFML, I will not cover Mac OS, because I don't own a Mac, and I don't like Apple products. If you want to know about this, ask Google ;-)


So finally here we are with our tool chain:

Windows:
- Visual Studio 2012 Express
- SFML 2.1 / SDL 2

Linux:
- Code::Blocks IDE
- GCC
- SFML 2.1 / SDL 2



So after the 10 ton mammoth has been cleared out of the way, we can finally start developing games, yeah! I will not cover how to setup SFML on Windows in Visual Studio, as there is a very good guide already existing. Please check it out here.



I have created a simple demo application for you, which shows you two basic concepts of games: the main loop and event handling. Check it out:



#pragma once
#include "SFML/System.hpp"
#include "SFML/Window.hpp"
#include "SFML/Graphics.hpp"


int main( ) {
 sf::RenderWindow window( sf::VideoMode(800, 600, 32), "Simple graphics with SFML" );

 sf::RectangleShape rectangle;
 rectangle.setPosition( 400.0f, 300.0f );
 rectangle.setSize( sf::Vector2f( 50.0f, 30.0f ) );
 rectangle.setFillColor( sf::Color::Yellow );
 rectangle.setOutlineColor( sf::Color::Red );
 rectangle.setOutlineThickness( 3.0f );
 rectangle.setOrigin( rectangle.getSize().x / 2, rectangle.getSize().y / 2 );

 
 while( window.isOpen() ) {
  sf::Event currentEvent;
  while( window.pollEvent( currentEvent ) ) {
   if( currentEvent.type == sf::Event::Closed ) {
    window.close();
   } else if( currentEvent.type == sf::Event::KeyPressed ) {
    switch ( currentEvent.key.code ) {
     case sf::Keyboard::Up: {
      rectangle.move( 0, -5.0f );
      break;
     }
     case sf::Keyboard::Down: {
      rectangle.move( 0, 5.0f );
      break;
     }
     case sf::Keyboard::Left: {
      rectangle.move( -5.0f, 0 );
      break;
     }
     case sf::Keyboard::Right: {
      rectangle.move( 5.0f, 0 );
      break;
     }
      case sf::Keyboard::Escape: {
      window.close();
      break;
     }
     default:
      break;
    }
   }
  }

  window.clear( sf::Color::White );
  window.draw( rectangle );
  window.display();
 }
}
So what we do here? First we create a simple graphics window with a resolution of 800x600 pixels. After that we create a simple rectangle and set some of its properties. Then we run a while-loop with the condition "as long as our window is open". This is our very first game loop. That's it, a while-loop that runs as long as the application isn't terminated by the user. Within the game-loop is a second while-loop, the event loop. It polls the windows event queue for any new events, and if they're any, it looks up the type and acts accordingly. If the user clicks the close window button, the application will close the render window which then terminates our game-loop ( while( window.isOpen() ) ) and then exits our application. If the user hits Escape the same thing happens.

If the user uses the arrow keys he can move our yellow rectangle around the screen. With every keypress the rectangle is moved by 5 pixels in the corresponding direction. Note that the move()-Method uses coordinates relative to the current origin of the entity, while setPosition() uses global coordinates. I use a switch statement to poll which key was pressed.

If there are no more pending events in the queue, the event-loop terminates and our game loop continues operation. We clear the window, thus eliminating all pixels from the previous frame and setting them to white. If you use clear() without a parameter, the window is set to black.
After the window is cleared we can then draw new content to it. We draw our rectangle and then finally call the display()-method which puts all contents on the screen.
The result looks like this:



Not very spectacular, right? ;-) I know, but it will get more exciting in the next chapters. Note that you can move the rectangle out of view, because we have no collision detection nor a moving camera view. These things will be covered later.


Puh, this was a rather long one, but if you made it until the end, you are now ready to use your tool chain to develop games with SFML. Play around a bit with our demo application to get familiar with the SFML namespace members, e.g. try to draw a second entity ( a green cirle maybe ) to the screen and move this one with W-S-A-D. Until next time.

return EXIT_SUCCESS;

Thursday, November 7, 2013

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