<?xml version="1.0" encoding="UTF-8" ?>
<rss version="2.0" xmlns:content="http://purl.org/rss/1.0/modules/content/" xmlns:wikidot="http://www.wikidot.com/rss-namespace">

	<channel>
		<title>Animated Sprite Speed/Display</title>
		<link>http://rbwhitaker.wikidot.com/forum/t-398346/animated-sprite-speed-display</link>
		<description>Posts in the discussion thread &quot;Animated Sprite Speed/Display&quot; - Is confusing me...</description>
				<copyright></copyright>
		<lastBuildDate>Fri, 24 May 2013 20:49:56 +0000</lastBuildDate>
		
					<item>
				<guid>http://rbwhitaker.wikidot.com/forum/t-398346#post-1274909</guid>
				<title>(no title)</title>
				<link>http://rbwhitaker.wikidot.com/forum/t-398346/animated-sprite-speed-display#post-1274909</link>
				<description></description>
				<pubDate>Thu, 06 Oct 2011 03:43:43 +0000</pubDate>
				<wikidot:authorName>ff8jake</wikidot:authorName>								<content:encoded>
					<![CDATA[
						 <p>Hello RB,</p> <p>Thanks for the confirmation on the &quot;pixel perfect&quot; thing and the 2 examples. Both of the examples proved to be useful. The few texture atlases I've found to play around with are similar to an overhead view game like Zelda, so the atlas has a few frames for moving in one direction, a few more for the other direction, etc. I combined the two examples to switch at the appropriate time (using GameTime) between a select few frames depending on the user's current input.</p> <p>Thanks!</p> 
				 	]]>
				</content:encoded>							</item>
					<item>
				<guid>http://rbwhitaker.wikidot.com/forum/t-398346#post-1274874</guid>
				<title>Re: Animated Sprite Speed/Display</title>
				<link>http://rbwhitaker.wikidot.com/forum/t-398346/animated-sprite-speed-display#post-1274874</link>
				<description></description>
				<pubDate>Thu, 06 Oct 2011 02:49:58 +0000</pubDate>
				<wikidot:authorName>rbwhitaker</wikidot:authorName>				<wikidot:authorUserId>88099</wikidot:authorUserId>				<content:encoded>
					<![CDATA[
						 <p>No, your approach to keeping things &quot;pixel perfect&quot; is actually a very appropriate thing to do. Windows Presentation Foundation, Microsoft's (relatively) new GUI framework, has a feature called &quot;layout rounding&quot; that does this exact same thing for you, so you don't need to worry about it. As far as I know, XNA does not have this feature, so you'd need to do it yourself. What you've got is basically exactly what I'd do too.</p> <p>As far as changing the frame rate of your animation, you've got a couple of choices. There's the easy way, and the better way. I'll start with the easy way, which builds off of the <a href="http://rbwhitaker.wikidot.com/texture-atlases-1">texture atlas tutorial</a>.</p> <p>Right now, we're assuming that every update means advancing to the next frame. We're also assuming that each of the updates happen at regular intervals (30 times per second, if I'm remembering correctly). Unless you go mess around with things, this will be the case, unless things are running so slowly that the computer can't keep up, in which case we'd see our animation drag a bit, along with the rest of the game.</p> <p>We can easily change our code so that we only advance to the next frame every other update, or every five updates, or whatever we choose. This will slow down the animation by that same factor. (Advancing every other frame will make the animation happen at half the speed, etc.)</p> <p>To do this, we'd add in a couple more instance variables like this:</p> <div class="code"> <div class="hl-main"> <pre> <span class="hl-reserved">private</span><span class="hl-code"> </span><span class="hl-types">int</span><span class="hl-code"> </span><span class="hl-identifier">currentUpdate</span><span class="hl-code">; </span><span class="hl-reserved">private</span><span class="hl-code"> </span><span class="hl-types">int</span><span class="hl-code"> </span><span class="hl-identifier">updatesPerFrame</span><span class="hl-code"> = </span><span class="hl-number">3</span><span class="hl-code">; </span><span class="hl-comment">// set this to what you want. Higher means slower.</span> </pre></div> </div> <p>And then we'd change our logic in the <em>Update</em> method to account for this:</p> <div class="code"> <div class="hl-main"> <pre> <span class="hl-reserved">public</span><span class="hl-code"> </span><span class="hl-types">void</span><span class="hl-code"> </span><span class="hl-identifier">Update</span><span class="hl-brackets">()</span><span class="hl-code"> </span><span class="hl-brackets">{</span><span class="hl-code"> </span><span class="hl-identifier">currentUpdate</span><span class="hl-code">++; </span><span class="hl-reserved">if</span><span class="hl-brackets">(</span><span class="hl-identifier">currentUpdate</span><span class="hl-code"> == </span><span class="hl-identifier">updatesPerFrame</span><span class="hl-brackets">)</span><span class="hl-code"> </span><span class="hl-brackets">{</span><span class="hl-code"> </span><span class="hl-identifier">currentUpdate</span><span class="hl-code"> = </span><span class="hl-number">0</span><span class="hl-code">; </span><span class="hl-identifier">currentFrame</span><span class="hl-code">++; </span><span class="hl-reserved">if</span><span class="hl-code"> </span><span class="hl-brackets">(</span><span class="hl-identifier">currentFrame</span><span class="hl-code"> == </span><span class="hl-identifier">totalFrames</span><span class="hl-brackets">)</span><span class="hl-code"> </span><span class="hl-identifier">currentFrame</span><span class="hl-code"> = </span><span class="hl-number">0</span><span class="hl-code">; </span><span class="hl-brackets">}</span><span class="hl-code"> </span><span class="hl-brackets">}</span> </pre></div> </div> <p>So basically, the current frame only gets updated when the current update gets to the right number (<em>updatesPerFrame</em>), at which point the current frame gets incremented, and the current update gets reset.</p> <p>The completed code might look like this (I haven't actually ran it yet to test it, but it should work in theory):</p> <div class="code"> <div class="hl-main"> <pre> <span class="hl-identifier">using</span><span class="hl-code"> </span><span class="hl-identifier">System</span><span class="hl-code">; </span><span class="hl-identifier">using</span><span class="hl-code"> </span><span class="hl-identifier">System</span><span class="hl-code">.</span><span class="hl-identifier">Collections</span><span class="hl-code">.</span><span class="hl-identifier">Generic</span><span class="hl-code">; </span><span class="hl-identifier">using</span><span class="hl-code"> </span><span class="hl-identifier">System</span><span class="hl-code">.</span><span class="hl-identifier">Linq</span><span class="hl-code">; </span><span class="hl-identifier">using</span><span class="hl-code"> </span><span class="hl-identifier">System</span><span class="hl-code">.</span><span class="hl-identifier">Text</span><span class="hl-code">; </span><span class="hl-identifier">using</span><span class="hl-code"> </span><span class="hl-identifier">Microsoft</span><span class="hl-code">.</span><span class="hl-identifier">Xna</span><span class="hl-code">.</span><span class="hl-identifier">Framework</span><span class="hl-code">.</span><span class="hl-identifier">Graphics</span><span class="hl-code">; </span><span class="hl-identifier">using</span><span class="hl-code"> </span><span class="hl-identifier">Microsoft</span><span class="hl-code">.</span><span class="hl-identifier">Xna</span><span class="hl-code">.</span><span class="hl-identifier">Framework</span><span class="hl-code">; </span><span class="hl-identifier">namespace</span><span class="hl-code"> </span><span class="hl-identifier">TextureAtlas</span><span class="hl-code"> </span><span class="hl-brackets">{</span><span class="hl-code"> </span><span class="hl-reserved">public</span><span class="hl-code"> </span><span class="hl-reserved">class</span><span class="hl-code"> </span><span class="hl-identifier">AnimatedSprite</span><span class="hl-code"> </span><span class="hl-brackets">{</span><span class="hl-code"> </span><span class="hl-reserved">public</span><span class="hl-code"> </span><span class="hl-identifier">Texture2D</span><span class="hl-code"> </span><span class="hl-identifier">Texture</span><span class="hl-code"> </span><span class="hl-brackets">{</span><span class="hl-code"> </span><span class="hl-identifier">get</span><span class="hl-code">; </span><span class="hl-identifier">set</span><span class="hl-code">; </span><span class="hl-brackets">}</span><span class="hl-code"> </span><span class="hl-reserved">public</span><span class="hl-code"> </span><span class="hl-types">int</span><span class="hl-code"> </span><span class="hl-identifier">Rows</span><span class="hl-code"> </span><span class="hl-brackets">{</span><span class="hl-code"> </span><span class="hl-identifier">get</span><span class="hl-code">; </span><span class="hl-identifier">set</span><span class="hl-code">; </span><span class="hl-brackets">}</span><span class="hl-code"> </span><span class="hl-reserved">public</span><span class="hl-code"> </span><span class="hl-types">int</span><span class="hl-code"> </span><span class="hl-identifier">Columns</span><span class="hl-code"> </span><span class="hl-brackets">{</span><span class="hl-code"> </span><span class="hl-identifier">get</span><span class="hl-code">; </span><span class="hl-identifier">set</span><span class="hl-code">; </span><span class="hl-brackets">}</span><span class="hl-code"> </span><span class="hl-reserved">private</span><span class="hl-code"> </span><span class="hl-types">int</span><span class="hl-code"> </span><span class="hl-identifier">currentFrame</span><span class="hl-code">; </span><span class="hl-reserved">private</span><span class="hl-code"> </span><span class="hl-types">int</span><span class="hl-code"> </span><span class="hl-identifier">totalFrames</span><span class="hl-code">; </span><span class="hl-reserved">public</span><span class="hl-code"> </span><span class="hl-identifier">AnimatedSprite</span><span class="hl-brackets">(</span><span class="hl-identifier">Texture2D</span><span class="hl-code"> </span><span class="hl-identifier">texture</span><span class="hl-code">, </span><span class="hl-types">int</span><span class="hl-code"> </span><span class="hl-identifier">rows</span><span class="hl-code">, </span><span class="hl-types">int</span><span class="hl-code"> </span><span class="hl-identifier">columns</span><span class="hl-brackets">)</span><span class="hl-code"> </span><span class="hl-brackets">{</span><span class="hl-code"> </span><span class="hl-identifier">Texture</span><span class="hl-code"> = </span><span class="hl-identifier">texture</span><span class="hl-code">; </span><span class="hl-identifier">Rows</span><span class="hl-code"> = </span><span class="hl-identifier">rows</span><span class="hl-code">; </span><span class="hl-identifier">Columns</span><span class="hl-code"> = </span><span class="hl-identifier">columns</span><span class="hl-code">; </span><span class="hl-identifier">currentFrame</span><span class="hl-code"> = </span><span class="hl-number">0</span><span class="hl-code">; </span><span class="hl-identifier">totalFrames</span><span class="hl-code"> = </span><span class="hl-identifier">Rows</span><span class="hl-code"> * </span><span class="hl-identifier">Columns</span><span class="hl-code">; </span><span class="hl-brackets">}</span><span class="hl-code"> </span><span class="hl-reserved">public</span><span class="hl-code"> </span><span class="hl-types">void</span><span class="hl-code"> </span><span class="hl-identifier">Update</span><span class="hl-brackets">()</span><span class="hl-code"> </span><span class="hl-brackets">{</span><span class="hl-code"> </span><span class="hl-identifier">currentUpdate</span><span class="hl-code">++; </span><span class="hl-reserved">if</span><span class="hl-brackets">(</span><span class="hl-identifier">currentUpdate</span><span class="hl-code"> == </span><span class="hl-identifier">updatesPerFrame</span><span class="hl-brackets">)</span><span class="hl-code"> </span><span class="hl-brackets">{</span><span class="hl-code"> </span><span class="hl-identifier">currentUpdate</span><span class="hl-code"> = </span><span class="hl-number">0</span><span class="hl-code">; </span><span class="hl-identifier">currentFrame</span><span class="hl-code">++; </span><span class="hl-reserved">if</span><span class="hl-code"> </span><span class="hl-brackets">(</span><span class="hl-identifier">currentFrame</span><span class="hl-code"> == </span><span class="hl-identifier">totalFrames</span><span class="hl-brackets">)</span><span class="hl-code"> </span><span class="hl-identifier">currentFrame</span><span class="hl-code"> = </span><span class="hl-number">0</span><span class="hl-code">; </span><span class="hl-brackets">}</span><span class="hl-code"> </span><span class="hl-brackets">}</span><span class="hl-code"> </span><span class="hl-reserved">public</span><span class="hl-code"> </span><span class="hl-types">void</span><span class="hl-code"> </span><span class="hl-identifier">Draw</span><span class="hl-brackets">(</span><span class="hl-identifier">SpriteBatch</span><span class="hl-code"> </span><span class="hl-identifier">spriteBatch</span><span class="hl-code">, </span><span class="hl-identifier">Vector2</span><span class="hl-code"> </span><span class="hl-identifier">location</span><span class="hl-brackets">)</span><span class="hl-code"> </span><span class="hl-brackets">{</span><span class="hl-code"> </span><span class="hl-types">int</span><span class="hl-code"> </span><span class="hl-identifier">width</span><span class="hl-code"> = </span><span class="hl-identifier">Texture</span><span class="hl-code">.</span><span class="hl-identifier">Width</span><span class="hl-code"> / </span><span class="hl-identifier">Rows</span><span class="hl-code">; </span><span class="hl-types">int</span><span class="hl-code"> </span><span class="hl-identifier">height</span><span class="hl-code"> = </span><span class="hl-identifier">Texture</span><span class="hl-code">.</span><span class="hl-identifier">Height</span><span class="hl-code"> / </span><span class="hl-identifier">Columns</span><span class="hl-code">; </span><span class="hl-types">int</span><span class="hl-code"> </span><span class="hl-identifier">row</span><span class="hl-code"> = </span><span class="hl-brackets">(</span><span class="hl-types">int</span><span class="hl-brackets">)((</span><span class="hl-types">float</span><span class="hl-brackets">)</span><span class="hl-identifier">currentFrame</span><span class="hl-code"> / </span><span class="hl-brackets">(</span><span class="hl-types">float</span><span class="hl-brackets">)</span><span class="hl-identifier">Columns</span><span class="hl-brackets">)</span><span class="hl-code">; </span><span class="hl-types">int</span><span class="hl-code"> </span><span class="hl-identifier">column</span><span class="hl-code"> = </span><span class="hl-identifier">currentFrame</span><span class="hl-code"> % </span><span class="hl-identifier">Columns</span><span class="hl-code">; </span><span class="hl-identifier">Rectangle</span><span class="hl-code"> </span><span class="hl-identifier">sourceRectangle</span><span class="hl-code"> = </span><span class="hl-reserved">new</span><span class="hl-code"> </span><span class="hl-identifier">Rectangle</span><span class="hl-brackets">(</span><span class="hl-identifier">width</span><span class="hl-code"> * </span><span class="hl-identifier">column</span><span class="hl-code">, </span><span class="hl-identifier">height</span><span class="hl-code"> * </span><span class="hl-identifier">row</span><span class="hl-code">, </span><span class="hl-identifier">width</span><span class="hl-code">, </span><span class="hl-identifier">height</span><span class="hl-brackets">)</span><span class="hl-code">; </span><span class="hl-identifier">Rectangle</span><span class="hl-code"> </span><span class="hl-identifier">destinationRectangle</span><span class="hl-code"> = </span><span class="hl-reserved">new</span><span class="hl-code"> </span><span class="hl-identifier">Rectangle</span><span class="hl-brackets">((</span><span class="hl-types">int</span><span class="hl-brackets">)</span><span class="hl-identifier">location</span><span class="hl-code">.</span><span class="hl-identifier">X</span><span class="hl-code">, </span><span class="hl-brackets">(</span><span class="hl-types">int</span><span class="hl-brackets">)</span><span class="hl-identifier">location</span><span class="hl-code">.</span><span class="hl-identifier">Y</span><span class="hl-code">, </span><span class="hl-identifier">width</span><span class="hl-code">, </span><span class="hl-identifier">height</span><span class="hl-brackets">)</span><span class="hl-code">; </span><span class="hl-identifier">spriteBatch</span><span class="hl-code">.</span><span class="hl-identifier">Begin</span><span class="hl-brackets">()</span><span class="hl-code">; </span><span class="hl-identifier">spriteBatch</span><span class="hl-code">.</span><span class="hl-identifier">Draw</span><span class="hl-brackets">(</span><span class="hl-identifier">Texture</span><span class="hl-code">, </span><span class="hl-identifier">destinationRectangle</span><span class="hl-code">, </span><span class="hl-identifier">sourceRectangle</span><span class="hl-code">, </span><span class="hl-identifier">Color</span><span class="hl-code">.</span><span class="hl-identifier">White</span><span class="hl-brackets">)</span><span class="hl-code">; </span><span class="hl-identifier">spriteBatch</span><span class="hl-code">.</span><span class="hl-identifier">End</span><span class="hl-brackets">()</span><span class="hl-code">; </span><span class="hl-brackets">}</span><span class="hl-code"> </span><span class="hl-brackets">}</span><span class="hl-code"> </span><span class="hl-brackets">}</span> </pre></div> </div> <p>The other way is, as you mentioned, to update based on the <em>GameTime</em>. This would involve changing the <em>AnimatedSprite</em> class a bit. In particular, the <em>Update</em> method would require passing in a <em>GameTime</em> object. By the way, your main <em>Game</em> class will have a <em>GameTime</em> object that you can just pass along to this class when you update it, so that shouldn't be a problem.</p> <p>Then you could add in code that determines what frame you should be on, based on the total time the game has been running for:</p> <div class="code"> <div class="hl-main"> <pre> <span class="hl-types">double</span><span class="hl-code"> </span><span class="hl-identifier">timePerFrame</span><span class="hl-code"> = </span><span class="hl-number">0.2</span><span class="hl-code">; </span><span class="hl-comment">// frame changes five times a second</span><span class="hl-code"> </span><span class="hl-types">int</span><span class="hl-code"> </span><span class="hl-identifier">totalFrames</span><span class="hl-code"> = </span><span class="hl-number">3</span><span class="hl-code">; </span><span class="hl-identifier">currentFrame</span><span class="hl-code"> = </span><span class="hl-brackets">(</span><span class="hl-types">int</span><span class="hl-brackets">)(</span><span class="hl-identifier">gameTime</span><span class="hl-code">.</span><span class="hl-identifier">TotalGameTime</span><span class="hl-code">.</span><span class="hl-identifier">TotalSeconds</span><span class="hl-code"> / </span><span class="hl-identifier">timePerFrame</span><span class="hl-brackets">)</span><span class="hl-code">; </span><span class="hl-identifier">currentFrame</span><span class="hl-code"> = </span><span class="hl-identifier">currentFrame</span><span class="hl-code"> % </span><span class="hl-identifier">totalFrames</span><span class="hl-code">;</span> </pre></div> </div> <p><em>timePerFrame</em> and <em>totalFrames</em> would actually probably be best as instance variables, up at the top of your class. But that should about do it.</p> <p>Of course, one of the problems that you have with this is that the animation is based on when the game started, not when the animation started. In many cases, that's no big deal. People just won't notice. But if you want to worry about that, you would have the <em>AnimatedSprite</em> class keep track of a <em>TimeSpan</em> object (<em>gameTime.TotalGameTime</em> is a <em>TimeSpan</em> object) and subtract it from the current total game time. Then your current animation frame will be based on when the animation started, not when the game started.</p> <p>So a complete <em>Update</em> method might look something like this:</p> <div class="code"> <div class="hl-main"> <pre> <span class="hl-reserved">public</span><span class="hl-code"> </span><span class="hl-types">void</span><span class="hl-code"> </span><span class="hl-identifier">Update</span><span class="hl-brackets">(</span><span class="hl-identifier">GameTime</span><span class="hl-code"> </span><span class="hl-identifier">gameTime</span><span class="hl-brackets">)</span><span class="hl-code"> </span><span class="hl-brackets">{</span><span class="hl-code"> </span><span class="hl-types">double</span><span class="hl-code"> </span><span class="hl-identifier">timePerFrame</span><span class="hl-code"> = </span><span class="hl-number">0.2</span><span class="hl-code">; </span><span class="hl-comment">// five times a second</span><span class="hl-code"> </span><span class="hl-identifier">currentFrame</span><span class="hl-code"> = </span><span class="hl-brackets">(</span><span class="hl-types">int</span><span class="hl-brackets">)(</span><span class="hl-identifier">gameTime</span><span class="hl-code">.</span><span class="hl-identifier">TotalGameTime</span><span class="hl-code">.</span><span class="hl-identifier">TotalSeconds</span><span class="hl-code"> / </span><span class="hl-identifier">timePerFrame</span><span class="hl-brackets">)</span><span class="hl-code">; </span><span class="hl-identifier">currentFrame</span><span class="hl-code"> = </span><span class="hl-identifier">currentFrame</span><span class="hl-code"> % </span><span class="hl-identifier">totalFrames</span><span class="hl-code">; </span><span class="hl-brackets">}</span> </pre></div> </div> <p>Though, again, I'd recommend making <em>timePerFrame</em> an instance variable. (When I went back and checked, it looks like <em>totalFrames</em> is already an instance variable.</p> <p>Hmm&#8230; I said that was the harder way, but looking at it, it seems as easy as the first way.</p> <p>Anyway, if you're using the GameTime object, and someone's computer is running slow, that won't slow the animation down.</p> <p>Anyway, there you have it. Hope it helps!</p> 
				 	]]>
				</content:encoded>							</item>
					<item>
				<guid>http://rbwhitaker.wikidot.com/forum/t-398346#post-1274712</guid>
				<title>Animated Sprite Speed/Display</title>
				<link>http://rbwhitaker.wikidot.com/forum/t-398346/animated-sprite-speed-display#post-1274712</link>
				<description></description>
				<pubDate>Wed, 05 Oct 2011 22:52:21 +0000</pubDate>
				<wikidot:authorName>ff8jake</wikidot:authorName>								<content:encoded>
					<![CDATA[
						 <p>Hello,</p> <p>I've been messing with the XNA tutorials and trying different things, and decided to start with a simple 2d &quot;practice&quot; project. Currently I have an animated sprite (using the texture atlas tutorial) that moves across the screen walking in the direction I press on the keyboard. The sprite I am using is fairly simple and has 3 frames for walking in each direction. At 60fps (I assume?), this looks pretty hilarious. From what I can find on Google it seems a lot of people do various checks against a GameTime object and increment the frame counter based on how much time has passed. I am curious if there is an easy method to do this (perhaps using the existing texture atlas tutorial as a starting point?), and if there are any concerns regarding people playing on slow machines.</p> <p>Also regarding the same sprite above, I noticed that when I move the sprite it sometimes appeared blurred. I read that this is caused by using floating point values in my location Vector2 object when I draw the sprite to the screen. I found a &quot;fix&quot;, by doing the following:</p> <div class="code"> <div class="hl-main"> <pre> <span class="hl-code"> </span><span class="hl-identifier">location</span><span class="hl-code">.</span><span class="hl-identifier">Y</span><span class="hl-code"> += </span><span class="hl-brackets">(</span><span class="hl-types">int</span><span class="hl-brackets">)(</span><span class="hl-identifier">direction</span><span class="hl-code">.</span><span class="hl-identifier">Y</span><span class="hl-code"> * </span><span class="hl-identifier">velocity</span><span class="hl-code">.</span><span class="hl-identifier">Y</span><span class="hl-code"> * </span><span class="hl-brackets">(</span><span class="hl-types">float</span><span class="hl-brackets">)</span><span class="hl-identifier">gametime</span><span class="hl-code">.</span><span class="hl-identifier">ElapsedGameTime</span><span class="hl-code">.</span><span class="hl-identifier">TotalSeconds</span><span class="hl-brackets">)</span><span class="hl-code">; </span><span class="hl-identifier">location</span><span class="hl-code">.</span><span class="hl-identifier">X</span><span class="hl-code"> += </span><span class="hl-brackets">(</span><span class="hl-types">int</span><span class="hl-brackets">)(</span><span class="hl-identifier">direction</span><span class="hl-code">.</span><span class="hl-identifier">X</span><span class="hl-code"> * </span><span class="hl-identifier">velocity</span><span class="hl-code">.</span><span class="hl-identifier">X</span><span class="hl-code"> * </span><span class="hl-brackets">(</span><span class="hl-types">float</span><span class="hl-brackets">)</span><span class="hl-identifier">gametime</span><span class="hl-code">.</span><span class="hl-identifier">ElapsedGameTime</span><span class="hl-code">.</span><span class="hl-identifier">TotalSeconds</span><span class="hl-brackets">)</span><span class="hl-code">;</span> </pre></div> </div> <p>Is this a stupid way of keeping things &quot;pixel perfect&quot;? :)</p> <p>Thanks!</p> 
				 	]]>
				</content:encoded>							</item>
				</channel>
</rss>