<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>Game Design and Appreciation Club &#187; Tutorials</title>
	<atom:link href="http://cppgamedesign.com/archives/category/resources/tutorials-resources/feed" rel="self" type="application/rss+xml" />
	<link>http://cppgamedesign.com</link>
	<description>Cal Poly Pomona IGDA Student Chapter</description>
	<lastBuildDate>Tue, 20 Oct 2009 23:20:17 +0000</lastBuildDate>
	<generator>http://wordpress.org/?v=2.9.1</generator>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
			<item>
		<title>Simulations Part 1: Timing and Interpolation</title>
		<link>http://cppgamedesign.com/archives/429</link>
		<comments>http://cppgamedesign.com/archives/429#comments</comments>
		<pubDate>Sat, 29 Aug 2009 19:39:45 +0000</pubDate>
		<dc:creator>DefendMyCause</dc:creator>
				<category><![CDATA[Tutorials]]></category>

		<guid isPermaLink="false">http://cppgamedesign.com/?p=429</guid>
		<description><![CDATA[Every wonder how games are continually able to run at the same speed and frame increments across multiple hardware types / platforms? Find out the explanation here.]]></description>
			<content:encoded><![CDATA[<p>Hello and welcome to<strong> Simulations 101</strong>. This hopefully should clear up the why’s and how’s of making things happen at the correct time and speed in a video game / simulation. This is an abstract tutorial in the category of general game programming. Any techniques explained in this &#8216;Simulations&#8217; Series will generally be organized from easy/obvious/inefficient to hard/not-so-obvious/efficient.  Unless there are special-considerations for specific languages, algorithms will be presented in pseudo-code that people familiar with java and c++ can follow.</p>
<h2><strong>To start, some definitions:</strong></h2>
<p><span style="text-decoration: underline;"><strong>High Resolution</strong>:</span> this means that small increments of time can be discerned. Usually in games this means around the tens of milliseconds to nanoseconds range when talking about video games.</p>
<p><span style="text-decoration: underline;"><strong>Low Resolution</strong>:</span> this means that only large increments of time can be measured. Anything above one second (minutes, hours, months, years, centuries… etc.) is considered low resolution for a video game</p>
<p><span style="text-decoration: underline;"><strong>Refresh rate</strong>:</span> how many times a monitor or LCD is refreshed. Almost certainly going to be between 60 -85 Hz (60- 85 times a second).</p>
<p><span style="text-decoration: underline;"><strong>Frame rate</strong>:</span> how many times the image for the game is changed. Your screen will always be refreshed 60 times a second but if your game takes half a second (0.5 seconds) to compute player positions, collision,  awesome particle effects, and then display the changes; your frame rate is going to be 2 (the screen will be refreshed 30 times with the same image because your game hasn’t gotten around to changing the memory where your video is stored but spent time doing other game logic stuff).</p>
<p><strong><span style="text-decoration: underline;">Game-Speed / Time Step:</span> </strong>Game speed is totally different concept than fps or refresh although they can be dependant on one another. A constant game-speed is desired for anyone who plays your video game so that you can design a fair game with predictable results.  All the concepts presented here are basically to achieve a constant rate for gameplay despite varying cpu and fps changes. A time step is just the time that goes by in any simulation &#8211; Sometimes there are multiple time steps that happen in a frame to increase the accuracy of the simulation</p>
<p><strong><br />
</strong></p>
<p>Ok, hopefully you understand most of that. Next, here is a brief explanation of the three main timing techniques used for games</p>
<h3><strong><span style="text-decoration: underline;">Technique #1 –  Non-Stop Game-Loop with loop delays</span></strong></h3>
<p>This is by far the most used way to time video games on older generation video game consoles and computers &#8211; <strong>DON&#8217;T DO IT!!!</strong>. Rendering the graphics and doing game logic were developed with particular machines with a particular cpu speed and with the expectation that the video game will not have full control of all computing resources and will not share it.</p>
<table border="1">
<tbody>
<tr>
<th>Example 1</th>
</tr>
<tr>
<td>
<style type="text/css">
.comment { color: #999999; font-style: italic; }
.pre { color: #000099; }
.string { color: #009900; }
.char { color: #009900; }
.float { color: #996600; }
.int { color: #999900; }
.bool { color: #000000; font-weight: bold; }
.type { color: #FF6633; }
.flow { color: #FF0000; }
.keyword { color: #990000; }
.operator { color: #663300; font-weight: bold; }
</style>
<p></head><br />
<body></p>
<pre><span class="flow">while</span><span class="operator">(!</span>ending<span class="operator">)
{</span>
    runGame<span class="operator">();</span><span class="comment"> //updates your game status and simulation
</span>    drawGame<span class="operator">();</span><span class="comment"> //draws everything in their appropriate positions on the screen
</span><span class="operator">}</span><span class="type">
void</span> runGame<span class="operator">()
{</span><span class="type">
    float</span> unit<span class="operator"> =</span><span class="float"> 4.5</span><span class="operator">;</span>
    xTransformSprite<span class="operator">(</span>unit<span class="operator">);
}</span></pre>
</td>
</tr>
</tbody>
</table>
<p>In the main game-loop, which is running constantly, a tiny loop that does nothing inside of it but waste time by counting to some constant, is tweaked by the programmer (sometimes user defined) and is used to delay for a certain period until the program updates at the desired frame rate.</p>
<p>As you can see, downsides to this approach include a barrier of putting hard-coded values in your code, that when your program take longer than you anticipated for the game-loop, all those values have to be accommodated for a slower frame rate.</p>
<h3><strong><span style="text-decoration: underline;">Technique #2 – Callbacks and Interrupts </span></strong></h3>
<p>This process is actually still very common and is very similar to the previous technique except for 2 small differences. The first is that instead of using a loop, it requests the Operating System to wait for a specified period of time and then come back. The other difference and advantage is that this gives other programs a chance to run.</p>
<p>a call-back for a game loop might look something like this using Allegro</p>
<table border="1">
<tbody>
<tr>
<th>Example 2</th>
</tr>
<tr>
<td>
<style type="text/css">
.comment { color: #999999; font-style: italic; }
.pre { color: #000099; }
.string { color: #009900; }
.char { color: #009900; }
.float { color: #996600; }
.int { color: #999900; }
.bool { color: #000000; font-weight: bold; }
.type { color: #FF6633; }
.flow { color: #FF0000; }
.keyword { color: #990000; }
.operator { color: #663300; font-weight: bold; }
</style>
<p></head><br />
<body></p>
<pre><span class="flow">while</span><span class="operator">(!</span>ending<span class="operator">)
{</span>
    runGame<span class="operator">();</span><span class="comment"> //updates your game status and simulation
</span>    drawGame<span class="operator">();</span><span class="comment"> //draws everything in their appropriate positions on the screen
</span>    rest<span class="operator">(</span><span class="int">50</span><span class="operator">);</span><span class="comment"> // tells the system to take back control and return in 50 milliseconds
</span><span class="operator">}</span><span class="type">
void</span> runGame<span class="operator">()
{</span><span class="type">
    float</span> unit<span class="operator"> =</span><span class="float"> 4.5</span><span class="operator">;</span>
    xTransformSprite<span class="operator">(</span>unit<span class="operator">);
}</span></pre>
</td>
</tr>
</tbody>
</table>
<p>For handheld systems, hardware interrupts are a way of performing this exact task they are similar to callbacks except they are a very reliable way of timing your game. On the Game boy advance, for example, all the game logic and drawing has to be done in between the screen refresh, and it is called from the beginning every time the screen is rendered. On the GBA the screen Refresh, FPS and Game-loop are all synchronized. As long as you have complete control of the hardware as in the case of the GBA, this method is a very suitable way to time your game. Even If you don’t have control over the hardware, no-one will probably get on your case if you stick with this method if your game is fairly simple.</p>
<h3><strong><span style="text-decoration: underline;">Technique #3 – Delta Time</span></strong></h3>
<p>This is where things start to get hairy. Depending on the language you use and the OS, getting current system time at a high resolution can be very different. One way to solve this is to use a High Resolution Timer Library where someone has done all the hard work.</p>
<p>The basic idea is that all systems are generally guaranteed to provide accurate time up to the second but no more. Access to the OS’s API probably reveals functions that aren’t very friendly to timing your games in tenths or hundredths of a second but probably in “Clock Ticks”,  and may even provide a clock ticks per second function. Although the thought of learning windows programming may be strike fear in the novice programmer, like I said before, there are other options: Java and C# have pretty good timer functions. For C++, there are many game and general utility libraries also provide a high-resolution timer function that is easy to use in game. The following is usually how it&#8217;s done if you get your time in milliseconds -</p>
<table border="1">
<tbody>
<tr>
<th>Example 3</th>
</tr>
<tr>
<td>
<style type="text/css">
.comment { color: #999999; font-style: italic; }
.pre { color: #000099; }
.string { color: #009900; }
.char { color: #009900; }
.float { color: #996600; }
.int { color: #999900; }
.bool { color: #000000; font-weight: bold; }
.type { color: #FF6633; }
.flow { color: #FF0000; }
.keyword { color: #990000; }
.operator { color: #663300; font-weight: bold; }
</style>
<p></head><br />
<body></p>
<pre><span class="type">int</span> last<span class="operator"> =</span> System<span class="operator">.</span>getTimeMillisecond<span class="operator">();</span><span class="comment"> //our timing library function in milliseconds
</span><span class="type">int</span> current<span class="operator"> =</span> last<span class="operator">;</span><span class="flow">
while</span><span class="operator">(!</span>ending<span class="operator">)
{</span>
    runGame<span class="operator">(</span>current – last<span class="operator">);</span><span class="comment"> //updates your game status and simulation
</span>    drawGame<span class="operator">();</span><span class="comment"> //draws everything in their appropriate positions on the screen
</span>    last<span class="operator"> =</span> current<span class="operator">;</span>
    current<span class="operator"> =</span> System<span class="operator">.</span>getTimeMillisecond<span class="operator">();
}</span><span class="type">
void</span> runGame<span class="operator">(</span><span class="type">int</span> delta<span class="operator">)
{</span><span class="type">
    float</span> secondsSinceLastFrame<span class="operator"> =</span> delta<span class="operator"> /</span><span class="float"> 1000.0</span><span class="operator">;</span><span class="type">
    float</span> unit<span class="operator"> =</span><span class="float"> 4.5</span><span class="operator">;</span>
    xTransformSpriteUnitsPerSecond<span class="operator">(</span>unit<span class="operator"> *</span>secondsSinceLastFrame<span class="operator">);
}</span></pre>
</td>
</tr>
</tbody>
</table>
<p>And that&#8217;s it! I think Koray has done some Windows API timing so well see if that stuff makes it in here.</p>
<p>This is just a rough draft so please email me of missing/wrong information or what you would want in simulations 102 (particles anyone?).</p>
]]></content:encoded>
			<wfw:commentRss>http://cppgamedesign.com/archives/429/feed</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
		<item>
		<title>Creating a Game-State System</title>
		<link>http://cppgamedesign.com/archives/80</link>
		<comments>http://cppgamedesign.com/archives/80#comments</comments>
		<pubDate>Sun, 05 Jul 2009 02:44:50 +0000</pubDate>
		<dc:creator>Koray</dc:creator>
				<category><![CDATA[Tutorials]]></category>

		<guid isPermaLink="false">http://cppgamedesign.com/?p=80</guid>
		<description><![CDATA[Learn how to create your own game-state system that will allow you to seamlessly transition between parts of your game.]]></description>
			<content:encoded><![CDATA[<h3><strong>An Introduction</strong></h3>
<p>Take a look around. Every game that is currently on the market &#8212; and probably 75% of all amateur games made &#8212; feature some kind of menu system. Oddly though, one of the most common questions that I come across from people looking to make their own games, is how exactly do you get that effect? And not just from a conceptual standpoint, how do you <strong>implement a menu system</strong> that can take care of loading systems, splash screens, menu options, and above all just rendering the game?</p>
<p>Well, the hope is that this tutorial will clarify just that. Most of the examples will be in pseduo-code format, but if you have any questions on implementation feel free to ask me or any of our officer team. Rest assured though, the examples that I will provide <em>should </em>be enough to start coding up your own game state system.</p>
<h3><strong>Primer</strong></h3>
<p>The basic premise behind any game, is that there&#8217;s a continuous loop constantly running throughout the program &#8212; and it&#8217;s basically up to you to decide what happens within it. This process is commonly referred to as the <strong>game loop</strong>, and it will normally handle all of the rendering, sound, music, physics, and whatever else is happening in your game.  Simply put, the game-state system is designed to allow control in what gets rendered, what inputs do and do not get processed, what music / sounds get played, and whatever else you might want to control throughout the life of your program.</p>
<p>Think of the game-state system as a giant<strong> switch-case</strong> block within your game loop. For example:</p>
<table border="1">
<tbody>
<tr>
<th>Example 1</th>
</tr>
<tr>
<td>
<style type="text/css">
.comment { color: #999999; font-style: italic; } .pre { color: #000099; } .string { color: #009900; } .char { color: #009900; } .float { color: #996600; } .int { color: #999900; } .bool { color: #000000; font-weight: bold; } .type { color: #FF6633; } .flow { color: #FF0000; } .keyword { color: #990000; } .operator { color: #663300; font-weight: bold; }
</style>
<pre><span class="type">void</span> Game<span class="operator">::</span>gameLoop<span class="operator">()
{</span><span class="flow">
	switch</span><span class="operator">(</span>gameState<span class="operator">-&gt;</span>gamestate<span class="operator">)
	{</span><span class="flow">
		case</span> gameState<span class="operator">-&gt;</span>LOADINGSCREEN<span class="operator">:</span><span class="flow">
			break</span><span class="operator">;</span><span class="flow">

		case</span> gameState<span class="operator">-&gt;</span>ENGINESCREEN<span class="operator">:</span><span class="flow">
			break</span><span class="operator">;</span><span class="flow">

		case</span> gameState<span class="operator">-&gt;</span>INTROSCREEN<span class="operator">:</span><span class="flow">
			break</span><span class="operator">;</span><span class="flow">

		case</span> gameState<span class="operator">-&gt;</span>MENUSCREEN<span class="operator">:</span><span class="flow">
			break</span><span class="operator">;</span><span class="flow">

		case</span> gameState<span class="operator">-&gt;</span>SINGLEPLAYER<span class="operator">:</span><span class="flow">
			break</span><span class="operator">;</span><span class="flow">

		case</span> gameState<span class="operator">-&gt;</span>MULTIPLAYER<span class="operator">:</span><span class="flow">
			break</span><span class="operator">;</span><span class="flow">

		case</span> gameState<span class="operator">-&gt;</span>KIOSK<span class="operator">:</span><span class="flow">
			break</span><span class="operator">;</span><span class="flow">

		case</span> gameState<span class="operator">-&gt;</span>CREDITS<span class="operator">:</span><span class="flow">
			break</span><span class="operator">;
	}
}</span></pre>
</td>
</tr>
</tbody>
</table>
<p>The code above shows a skeleton function for a game-loop. The <strong>case&#8217;s</strong> obviously have no true implementation at the moment, but that is irrelevant. Somewhere outside of this statement in other game / engine code, another function could trigger the changing of a game-state. When that happens, something like this could occur:</p>
<table border="1">
<tbody>
<tr>
<th>Example 2</th>
</tr>
<tr>
<td>
<style type="text/css">
.comment { color: #999999; font-style: italic; }
.pre { color: #000099; }
.string { color: #009900; }
.char { color: #009900; }
.float { color: #996600; }
.int { color: #999900; }
.bool { color: #000000; font-weight: bold; }
.type { color: #FF6633; }
.flow { color: #FF0000; }
.keyword { color: #990000; }
.operator { color: #663300; font-weight: bold; }
</style>
<pre><span class="type">void</span> Game<span class="operator">::</span>gameLoop<span class="operator">()
{</span><span class="flow">
	switch</span><span class="operator">(</span>gameState<span class="operator">-&gt;</span>gamestate<span class="operator">)
	{</span><span class="flow">
		case</span> gameState<span class="operator">-&gt;</span>LOADINGSCREEN<span class="operator">:</span><span class="comment">

			/*
			* The game runs a load functions for game components
			* When the function finishes, it triggers our gameState
			* object to go to the next game state which is ENGINESCREEN
			* as seen below
			*/</span><span class="flow">

			break</span><span class="operator">;</span><span class="flow">

		case</span> gameState<span class="operator">-&gt;</span>ENGINESCREEN<span class="operator">:</span><span class="flow">
			break</span><span class="operator">;
	}
}</span></pre>
</td>
</tr>
</tbody>
</table>
<p>At this point, instead of rendering our loading screens, the game could now be rendering a splash screen, playing new music, and doing whatever else that was inside the next case statement. And there you go, you have your first state change withing your game.</p>
<p>In C++, the <strong>switch-case </strong>statement can only accept integer types for the switch case statement &#8212; <strong>lame</strong>. Lucky for us however, we treat anything we want as an <a href="http://www.cprogramming.com/tutorial/enum.html">enumeration</a>, which is readable to us, and internally represented as an <strong>int </strong>value.</p>
<table border="1">
<tbody>
<tr>
<th>Example 3</th>
</tr>
<tr>
<td>
<style type="text/css">
.comment { color: #999999; font-style: italic; }
.pre { color: #000099; }
.string { color: #009900; }
.char { color: #009900; }
.float { color: #996600; }
.int { color: #999900; }
.bool { color: #000000; font-weight: bold; }
.type { color: #FF6633; }
.flow { color: #FF0000; }
.keyword { color: #990000; }
.operator { color: #663300; font-weight: bold; }
</style>
<p></head></p>
<pre><span class="keyword">class</span> GameState<span class="operator">
{</span><span class="keyword">

public</span><span class="operator">:</span><span class="keyword">
	static</span> GameState<span class="operator">*</span> getInstance<span class="operator">();</span><span class="keyword">

	enum</span> State<span class="operator"> {</span> LOADINGSCREEN<span class="operator">,</span> ENGINESCREEN<span class="operator">,</span> INTROSCREEN<span class="operator">,
	</span> MENUSCREEN<span class="operator">,</span> SINGLEPLAYER<span class="operator">,</span> MULTIPLAYER<span class="operator">,</span> KIOSK<span class="operator">,
	</span> CREDITS<span class="operator">,</span> INSTRUCTIONS<span class="operator">};</span><span class="type">

	int</span> gamestate<span class="operator">;

	~</span>GameState<span class="operator">();</span><span class="keyword">

protected</span><span class="operator">:</span>
	GameState<span class="operator">();</span>

	GameState<span class="operator">(</span><span class="keyword">const</span> GameState<span class="operator">&amp;);</span>
	GameState<span class="operator">&amp;</span><span class="keyword"> operator</span><span class="operator">= (</span><span class="keyword">const</span> GameState<span class="operator">&amp;);</span><span class="keyword">

private</span><span class="operator">:</span><span class="keyword">
	static</span> GameState<span class="operator">*</span> instance<span class="operator">;
};</span></pre>
</td>
</tr>
</tbody>
</table>
<p>The code above was taken directly from our <strong><a href="http://cppgamedesign.com/?p=98">PHASE </a></strong>project, so for now ignore everything in the code except for the <strong>enum State</strong> statement and <strong>int gamestate</strong>.</p>
<h3><strong>Whew, done</strong></h3>
<p>The great thing about the state system is that it can be applied to many problems in game programming. For example, a great way to manage weapons in a first person shooter, would be to make a state machine like our previous examples, but instead apply it to switching through an inventory of your arsenal using the <strong>mouse wheel</strong> or <strong>number keys</strong>. You could even have <strong>nested state systems</strong> to handle more complicated tasks &#8212; such as loading levels in a particular game-state (I.E. Singleplayer mode):</p>
<table border="1">
<tbody>
<tr>
<th>Example 4</th>
</tr>
<tr>
<td>
<style type="text/css">
.comment { color: #999999; font-style: italic; }
.pre { color: #000099; }
.string { color: #009900; }
.char { color: #009900; }
.float { color: #996600; }
.int { color: #999900; }
.bool { color: #000000; font-weight: bold; }
.type { color: #FF6633; }
.flow { color: #FF0000; }
.keyword { color: #990000; }
.operator { color: #663300; font-weight: bold; }
</style>
<p></head></p>
<pre><span class="type">void</span> Game<span class="operator">::</span>gameLoop<span class="operator">()
{</span><span class="flow">
	switch</span><span class="operator">(</span>gameState<span class="operator">-&gt;</span>gamestate<span class="operator">)
	{</span><span class="flow">
		case</span> gameState<span class="operator">-&gt;</span>SINGLEPLAYER<span class="operator">:</span><span class="flow">
			switch</span><span class="operator">(</span>Level<span class="operator">-&gt;</span>level<span class="operator">)
			{</span><span class="flow">
				case</span> mouse<span class="operator">-&gt;</span>LEVELONESELECT<span class="operator">:</span>
					levelOne<span class="operator">-&gt;</span>render<span class="operator">();</span><span class="flow">
					break</span><span class="operator">;</span><span class="flow">

				case</span> mouse<span class="operator">-&gt;</span>LEVELTWOSELECT<span class="operator">:</span>
					levelTwo<span class="operator">-&gt;</span>render<span class="operator">();</span><span class="flow">
					break</span><span class="operator">;</span><span class="flow">

				case</span> mouse<span class="operator">-&gt;</span>LEVELTHREESELECT<span class="operator">:</span>
					levelThree<span class="operator">-&gt;</span>render<span class="operator">();</span><span class="flow">
					break</span><span class="operator">;
			}</span><span class="flow">
			break</span><span class="operator">;
	}
}</span></pre>
</td>
</tr>
</tbody>
</table>
<p>And there you have it folks, a working game-state system <img src='http://cppgamedesign.com/wp-includes/images/smilies/icon_smile.gif' alt=':)' class='wp-smiley' /> </p>
]]></content:encoded>
			<wfw:commentRss>http://cppgamedesign.com/archives/80/feed</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
	</channel>
</rss>
