<?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>Shyam Guthikonda &#187; debug</title>
	<atom:link href="http://www.shy.am/tag/debug/feed/" rel="self" type="application/rss+xml" />
	<link>http://www.shy.am</link>
	<description>Game Programmer - http://shy.am</description>
	<lastBuildDate>Mon, 14 Mar 2011 12:18:47 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.1.4</generator>
		<item>
		<title>XNA DebugOverlay Utility</title>
		<link>http://www.shy.am/2009/11/xna-debugoverlay-utility/</link>
		<comments>http://www.shy.am/2009/11/xna-debugoverlay-utility/#comments</comments>
		<pubDate>Sat, 21 Nov 2009 03:20:38 +0000</pubDate>
		<dc:creator>shyam</dc:creator>
				<category><![CDATA[Code]]></category>
		<category><![CDATA[c#]]></category>
		<category><![CDATA[debug]]></category>
		<category><![CDATA[tools]]></category>
		<category><![CDATA[xna]]></category>

		<guid isPermaLink="false">http://www.shy.am/?p=1121</guid>
		<description><![CDATA[The DebugOverlay utility is a class that I&#8217;ve been using in my XNA projects for a while. It allows me to draw visualization objects from anywhere in my application &#8211; even in separate threads. Some areas where I have used this utility are: The AI system can display a units&#8217; velocity and position through Lines, [...]]]></description>
			<content:encoded><![CDATA[<p>The DebugOverlay utility is a class that I&#8217;ve been using in my XNA projects for a while. It allows me to draw visualization objects from <em>anywhere</em> in my application &#8211; even in separate threads.</p>
<p>Some areas where I have used this utility are:</p>
<ul>
<li>The AI system can display a units&#8217; velocity and position through Lines, Arrows, and Spheres. Use ScreenText to show the current state or goal hierarchy of a given unit.</li>
<li>The Physics system can use bounding boxes and spheres to show collision volumes. Points can be used to show raycast intersections or points of impact.</li>
<li>The Graphics system can use Spheres, Lines, and Arrows to show the position and direction of lights.</li>
<li>The Editor (or other tools) can use Lines, Arrows, and Bounding Boxes for axis representation during translate/rotate/scale.</li>
<li>Vertex Display &#8211; For a software-based skinning implementation, I used Points to visualize the locations of my vertices, and Spheres for the locations of the bones. It&#8217;s possible to use Spheres for everything, but thousands of Spheres can get a little expensive.</li>
</ul>
<p>This utility is only meant for Debug purposes, and therefore uses the [Conditional("DEBUG")] tag on each of it&#8217;s exposed methods.</p>
<p>To use the DebugOverlay, create the object during Initialization:</p>

<div class="wp_syntax"><table><tr><td class="line_numbers"><pre>1
</pre></td><td class="code"><pre class="csharp" style="font-family:monospace;"><span style="color: #008000;">new</span> DebugOverlay<span style="color: #008000;">&#40;</span>GraphicsDevice, Content<span style="color: #008000;">&#41;</span><span style="color: #008000;">;</span></pre></td></tr></table></div>

<p>Call the visualization functions from anywhere in your code:</p>

<div class="wp_syntax"><table><tr><td class="line_numbers"><pre>1
2
3
4
5
6
</pre></td><td class="code"><pre class="csharp" style="font-family:monospace;"><span style="color: #6666cc; font-weight: bold;">void</span> ScreenText<span style="color: #008000;">&#40;</span><span style="color: #6666cc; font-weight: bold;">string</span> text, Vector2 pos, Color c<span style="color: #008000;">&#41;</span>
<span style="color: #6666cc; font-weight: bold;">void</span> Line<span style="color: #008000;">&#40;</span>Vector3 start, Vector3 end, Color color<span style="color: #008000;">&#41;</span>
<span style="color: #6666cc; font-weight: bold;">void</span> Arrow<span style="color: #008000;">&#40;</span>Vector3 start, Vector3 end, <span style="color: #6666cc; font-weight: bold;">float</span> arrowSize, Color color<span style="color: #008000;">&#41;</span>
<span style="color: #6666cc; font-weight: bold;">void</span> BoundingBox<span style="color: #008000;">&#40;</span>BoundingBox boundingBox, Color color<span style="color: #008000;">&#41;</span>
<span style="color: #6666cc; font-weight: bold;">void</span> Point<span style="color: #008000;">&#40;</span>Vector3 pos, Color color<span style="color: #008000;">&#41;</span>
<span style="color: #6666cc; font-weight: bold;">void</span> Sphere<span style="color: #008000;">&#40;</span>Vector3 pos, <span style="color: #6666cc; font-weight: bold;">float</span> radius, Color color<span style="color: #008000;">&#41;</span></pre></td></tr></table></div>

<p>In your Draw routine, call the DebugOverlay.Draw method, passing in the projection and view matrices:</p>

<div class="wp_syntax"><table><tr><td class="line_numbers"><pre>1
</pre></td><td class="code"><pre class="csharp" style="font-family:monospace;">DebugOverlay<span style="color: #008000;">.</span><span style="color: #0000FF;">Singleton</span><span style="color: #008000;">.</span><span style="color: #0000FF;">Draw</span><span style="color: #008000;">&#40;</span>mCamera<span style="color: #008000;">.</span><span style="color: #0000FF;">ProjectionMatrix</span>, mCamera<span style="color: #008000;">.</span><span style="color: #0000FF;">ViewMatrix</span><span style="color: #008000;">&#41;</span><span style="color: #008000;">;</span></pre></td></tr></table></div>

<p>I made a small sample application to show off the functionality. Below is a screenshot and the complete source code.</p>

<div class="ngg-galleryoverview" id="ngg-gallery-63-1121">


	
	<!-- Thumbnails -->
		
	<div id="ngg-image-840" class="ngg-gallery-thumbnail-box"  >
		<div class="ngg-gallery-thumbnail" >
			<a href="http://www.shy.am/wp-content/gallery/20091121_debugoverlaydemo/debugoverlaydemo.png" title=" " class="shutterset_set_63" >
								<img title="debugoverlaydemo" alt="debugoverlaydemo" src="http://www.shy.am/wp-content/gallery/20091121_debugoverlaydemo/thumbs/thumbs_debugoverlaydemo.png" width="95" height="75" />
							</a>
		</div>
	</div>
	
		
 	 	
	<!-- Pagination -->
 	<div class='ngg-clear'></div>
 	
</div>


<p><strong>Download: </strong><a href="http://shy.am/codedump/DebugOverlayDemo.zip">source + demo</a></p>
]]></content:encoded>
			<wfw:commentRss>http://www.shy.am/2009/11/xna-debugoverlay-utility/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>

