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

Thursday, October 24, 2013

The Gaming Winter Starts

Hi Folks,
 
here in South Germany winter is slowly coming, and with it some very cool games are out there which will keep us warm throuhgout nights of interactive entertainment. As you might know, I'm a passionate video gamer since I was a little boy. After years of only fighting through Azeroth, and ignoring all the other fantastic games out there, I quit it after it became Kung-Fu Panda.
 
After regaining my game freedom, I reactivated my old Steam account and started playing all these video game jewels out there. Here are my current favorites.
 
Originally a fan mod for Blizzards RTS WarCraft 3, its successor then became a full game developed by Steam-owners of Valve. The original mod author is now the lead designer of DOTA 2 at Valve (Interesting how things sometimes evolve).
 
DOTA2 is a a so called MOBA (Multiplayer Online Battle Arena) game, which features fighting in teams of 5 heroes against another team of 5 heroes. At the moment DOTA2 features over 100 different heros, all with their unique abilities, pros and cons. Every hero has some others he can easily dominate, while some others are his pure nemesis. There is also a bunch of items you can buy in a match while you fight. The mixture of 5 heroes, each with at least 4 abilities, and an inventory for about 6 items, makes every match a unique experiencet, because every game and its strategy is totally different. This is enough stuff for a whole Wiki to fill, see http://dota2.gamepedia.com/Dota_2_Wiki

Valve also did a very good job at integrating many social features, like player profiles, guilds, teams, leagues, replays etc. It also features hero customization through items obtained randomly while playing DOTA2, or buying them in the ingame store. They are pure cosmetic and do not affect gameplay in any way. So no Pay-2-Win, and that's a good thing.
 
Matches can range from 20 to 80 minutes (my longest game was 78 minutes ;) ), but the typical public random game is over after 30 to 45 minutes. So some matches per evening are no problem. Only downside to this, there is no surrender option like in LoL, only in team games you can call 'gg' to end your misery ;) (gg stands for good game, and is normally the sign that you surrender).
 
After playing it for a few weeks I won't call myself a noob anymore, but sometimes I get screwed heavily. Yesterday my friends and me started our first team league matches, the first we lost, but we won the second the same we lost our first game: horribly :D Here is the screen from the match results (and again another f**king rubiline chest -.- )
 
Synopsis: Free-2-Play MOBA Game, very balanced, easy to learn but hard to master. Supports full competitive play. One of the biggest competitive scenes in the world. 

 
 
 

I've got this game for about 4 years now (proud owner of the orange box version) and never really played it. TF2 is a First Person Team Shooter game with various game modes and nine distinct classes, ranging from bazooka-wearing soldiers, over sentry-gun-constructing engineers to cloaking and backstabbing spies.
 
The social features like ingame items, with crafting, trading and store is also integrated like in DOTA2. In TF2 the items actual do impact gameplay very direct, because they can change a class' stats or the way their weapons work. But every item comes with a downside too, so balance is preserved. And also you can gain every item by only playing, no need to throw your hard earned bucks in. Look at the example. This Item changes the normal soldiers bazooka to do more damage at direct hits, but with 70% less splash damage. Fair trade I think.
 
Matches are typically in the 20-40min range, so fast-paced shooting action is served here. Although it's a team fighting game, there is no real need for a complete team from your friendlist. It's easy to join and fight with randoms, often with hilarious results :D It's a very funny game which can also be played competively.
 
Synopsis: Free-2-Play FP Team Shooter, easy to learn, hard to master. Full competitive play.
 
 
Beside these two, I play a variety of games, including:
- XCOM - Enemy Unkown
- Duke3D Megaton Edition
- Shadow Warrior Classic Redux
- Penny Arcade's On the Rain-slick Precipice of Darkness Quadrology
- Orcs must die 1+2
- Borderlands 1+2
- Left for Dead 2
- Torchlight 2
- The Monkey Island series
- Doom 3 BFG Edition
- Half-Life 2 series
- Incredible Adventures of Van Helsing
 
 
Yesterday Steam announced the release of the next incredible Free-2-Play game: Path of Exile. The press critics all say that this game is the true successor to famous Diablo 2. I never played beta cause auf lack of time, but now I will definitly try it out. It looks very promising, with the deepest item and skill system in every Hack&Slay I've seen to the day.
 
Also I finally got my Beta-Invite for Blizzards next game: Hearthstone.
This will feature an online card playing game set in the lore of WarCraft, featuring the World of WarCraft classes. Installation is complete and I'm looking forward to this game, because every Blizzard game rocks (except for WOW after Cataclysm ;) )
 
And tomorrow is the next HumbleBundle weekly sale, let's see what this will feature. I hope for the worst ;)
 
All summed up, this looks like a very promising gaming winter (if I only had the time ;) ) and we will not get cold feet while playing.

Next post will be something related to game development.
 
Cheers!
return 0;
 
P.S. Here is a first impression of saturdays death metal inferno at Path of Death Festival featuring our dutch friends from Bodyfarm. Stay tuned for more to come
 

Thursday, October 17, 2013

Starting the experience

Hi Folks,
with this post I want to start my experience with blogging. So if the blog posts do not look this cool, I just start using the blog engine and therefor will learn the features in the coming weeks and months. Although I'm a "serious" IT Guy, everyone needs to start small ;)
Today I found out (again) how cool the Google guys are. The really have fun at work for sure. While browsing the net at lunch break I wanted to revisit my old youtube channel. While reviewing the new (and as always with Google) easy to use youtube channel layout I stepped about the so-called Video-Manager.
After clicking the link, nothing happened for a view seconds, and then a HTTP 500 Internal Server Error message appeared. That's something unusual for Google and no fun in any way, but the text of the message itself was very funny. Take a look:




Haha, these guys know how to make good products and have fun while doing so :D The random debug information shown is pure nonsense, as it is generated randomly every time the site is refreshed. This is definitly in the same category as this example :D




Yesterday's DOTA 2 session with my team went as usual. Getting powned heavily, and powned heavily. Two games, 1:1 Win:Loss, rare and mythical loot for the faggots, and only crappy rubiline and polycount chests for us. So everything as usual :(
Sometimes I wonder how the loot algorithm of Valve works. The more crappy you play, the better the loot. Maybe I should apply to Valve and make this little piece of shitty code better. Well, maybe :D

I also revisited my other gaming project: Recording Duke Nukem 3D Speedruns. After beating Hollywood Holocaust in under 30 secs, I thought to myself "Wow, that was good", just to realize after googling, "Fuck, some other serious guy did it in 9 secs". Screw that!
But you always bet on Duke, hey? :D

Maybe, the next two weeks or so I will finish recording all these speedruns and upload them. So stay tuned.

This is Sebastian, signing off.
Cheers!

P.S. For the weekend I'm off to Mainz for some brutal Death Metal, check it out at www.hell-is-open.de or on crapbook  Be there or die screaming! \m/