<?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/"
	xmlns:georss="http://www.georss.org/georss" xmlns:geo="http://www.w3.org/2003/01/geo/wgs84_pos#" xmlns:media="http://search.yahoo.com/mrss/"
	>

<channel>
	<title>Swingpant&#039;s Game Lab &#187; Colour Maps</title>
	<atom:link href="http://swingpants.com/tag/colour-maps/feed/" rel="self" type="application/rss+xml" />
	<link>http://swingpants.com</link>
	<description>Swingpant&#039;s Code Nurdlings</description>
	<lastBuildDate>Wed, 08 Feb 2012 08:02:10 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.com/</generator>
<cloud domain='swingpants.com' port='80' path='/?rsscloud=notify' registerProcedure='' protocol='http-post' />
<image>
		<url>http://0.gravatar.com/blavatar/4a88693aa17d6b5e1d453a6684bc1c68?s=96&#038;d=http%3A%2F%2Fs2.wp.com%2Fi%2Fbuttonw-com.png</url>
		<title>Swingpant&#039;s Game Lab &#187; Colour Maps</title>
		<link>http://swingpants.com</link>
	</image>
	<atom:link rel="search" type="application/opensearchdescription+xml" href="http://swingpants.com/osd.xml" title="Swingpant&#039;s Game Lab" />
	<atom:link rel='hub' href='http://swingpants.com/?pushpress=hub'/>
		<item>
		<title>Collision Detection and Bounce Calculation using Colour Maps (part 1)</title>
		<link>http://swingpants.com/2009/03/16/collision-detection-and-bounce-calculation-using-colour-maps-part-1/</link>
		<comments>http://swingpants.com/2009/03/16/collision-detection-and-bounce-calculation-using-colour-maps-part-1/#comments</comments>
		<pubDate>Mon, 16 Mar 2009 23:21:46 +0000</pubDate>
		<dc:creator>swingpants</dc:creator>
				<category><![CDATA[Actionscript]]></category>
		<category><![CDATA[Flash Games]]></category>
		<category><![CDATA[as3]]></category>
		<category><![CDATA[bounce]]></category>
		<category><![CDATA[collision detection]]></category>
		<category><![CDATA[Color Maps]]></category>
		<category><![CDATA[Colour Maps]]></category>
		<category><![CDATA[getColorBounds]]></category>
		<category><![CDATA[physics]]></category>

		<guid isPermaLink="false">http://flashlabs.wordpress.com/?p=95</guid>
		<description><![CDATA[Here is a method I developed for a game I produced last year. I had three days, and a top down ball bouncing game with multiple levels to render. Initially I thought I&#8217;d use box2D, zero out the gravity, and then build the scenes as box2D models. This looked like taking far too long to [...]<img alt="" border="0" src="http://stats.wordpress.com/b.gif?host=swingpants.com&amp;blog=5703708&amp;post=95&amp;subd=flashlabs&amp;ref=&amp;feed=1" width="1" height="1" />]]></description>
			<content:encoded><![CDATA[<p>Here is a method I developed for a game I produced last year. I had three days, and a top down ball bouncing game with multiple levels to render. Initially I thought I&#8217;d use box2D, zero out the gravity, and then build the scenes as box2D models. This looked like taking far too long to create so I needed a quick fire solution. Then it dawned on me: Colour Maps (or to you chaps over the pond Color Maps).</p>
<p>Now Colour Maps are nothing new, but my idea adds to the technique. </p>
<p>Colour Mapping means you can build a map of your game scene with various colours representing the walls and objects. To test whether you have collided with an object, instead of numerous intersect calculations you can just test the colour of the pixel(s) underneath your character.</p>
<p>I realised that if I added a sprite graphic for my ball to the colour map using the Blend Mode &#8216;add&#8217; then I could see collision. So if I make all the static scene furniture red (0xFF0000) and the ball sprite green (0x00FF00), when they overlap the intersection area becomes yellow.<br />
<div id="attachment_99" class="wp-caption aligncenter" style="width: 460px"><img src="http://flashlabs.files.wordpress.com/2009/03/3steps_to_blendmode.jpg?w=655" alt="Blend Mode collision detection" title="3steps_to_blendmode"   class="size-full wp-image-99" /><p class="wp-caption-text">Blend Mode collision detection</p></div><br />
So how does this help? I calculated that by using getColorBounds on the intersect yellow, I can draw a line from the centre of the rectangle to the centre of the ball. This now becomes the reflection point. I can reflect the angle of bounce against this to give a very accurate result.</p>
<p><div id="attachment_100" class="wp-caption aligncenter" style="width: 460px"><img src="http://flashlabs.files.wordpress.com/2009/03/3steps_to_reflectangle.jpg?w=655" alt="Calculate the angle of reflection" title="3steps_to_reflectangle"   class="size-full wp-image-100" /><p class="wp-caption-text">Calculate the angle of reflection</p></div><br />
OK. So the method will bounce from a partial intersection &#8211; but this means that we are calculating the bounce from a ball embedded within the border/scene furniture. I have improved this by calculating the ball path using a recursive method. The function backtracks to where the edge of the ball touches the furniture and then recalculates the path for the remaining distance to be travelled on the current iteration.<br />
<div id="attachment_101" class="wp-caption aligncenter" style="width: 460px"><a href="http://www.swingpantsflash.com/colourmap/ColourMapTest.html"><img src="http://flashlabs.files.wordpress.com/2009/03/ball_and_blocks.jpg?w=655" alt="The Colour Map Bounce system in action" title="ball_and_blocks"   class="size-full wp-image-101" /></a><p class="wp-caption-text">The Colour Map Bounce system in action</p></div></p>
<p>Here is a link to a quick demo of the method in action. <a href="http://www.swingpantsflash.com/colourmap/ColourMapTest.html">Demo</a></p>
<p>Source and example usage is to follow in part 2.</p>
<br />  <a rel="nofollow" href="http://feeds.wordpress.com/1.0/gocomments/flashlabs.wordpress.com/95/"><img alt="" border="0" src="http://feeds.wordpress.com/1.0/comments/flashlabs.wordpress.com/95/" /></a> <a rel="nofollow" href="http://feeds.wordpress.com/1.0/godelicious/flashlabs.wordpress.com/95/"><img alt="" border="0" src="http://feeds.wordpress.com/1.0/delicious/flashlabs.wordpress.com/95/" /></a> <a rel="nofollow" href="http://feeds.wordpress.com/1.0/gofacebook/flashlabs.wordpress.com/95/"><img alt="" border="0" src="http://feeds.wordpress.com/1.0/facebook/flashlabs.wordpress.com/95/" /></a> <a rel="nofollow" href="http://feeds.wordpress.com/1.0/gotwitter/flashlabs.wordpress.com/95/"><img alt="" border="0" src="http://feeds.wordpress.com/1.0/twitter/flashlabs.wordpress.com/95/" /></a> <a rel="nofollow" href="http://feeds.wordpress.com/1.0/gostumble/flashlabs.wordpress.com/95/"><img alt="" border="0" src="http://feeds.wordpress.com/1.0/stumble/flashlabs.wordpress.com/95/" /></a> <a rel="nofollow" href="http://feeds.wordpress.com/1.0/godigg/flashlabs.wordpress.com/95/"><img alt="" border="0" src="http://feeds.wordpress.com/1.0/digg/flashlabs.wordpress.com/95/" /></a> <a rel="nofollow" href="http://feeds.wordpress.com/1.0/goreddit/flashlabs.wordpress.com/95/"><img alt="" border="0" src="http://feeds.wordpress.com/1.0/reddit/flashlabs.wordpress.com/95/" /></a> <img alt="" border="0" src="http://stats.wordpress.com/b.gif?host=swingpants.com&amp;blog=5703708&amp;post=95&amp;subd=flashlabs&amp;ref=&amp;feed=1" width="1" height="1" />]]></content:encoded>
			<wfw:commentRss>http://swingpants.com/2009/03/16/collision-detection-and-bounce-calculation-using-colour-maps-part-1/feed/</wfw:commentRss>
		<slash:comments>11</slash:comments>
	
		<media:content url="http://1.gravatar.com/avatar/1cebf29489913586137c5bdad0414c88?s=96&#38;d=identicon&#38;r=G" medium="image">
			<media:title type="html">swingpants</media:title>
		</media:content>

		<media:content url="http://flashlabs.files.wordpress.com/2009/03/3steps_to_blendmode.jpg" medium="image">
			<media:title type="html">3steps_to_blendmode</media:title>
		</media:content>

		<media:content url="http://flashlabs.files.wordpress.com/2009/03/3steps_to_reflectangle.jpg" medium="image">
			<media:title type="html">3steps_to_reflectangle</media:title>
		</media:content>

		<media:content url="http://flashlabs.files.wordpress.com/2009/03/ball_and_blocks.jpg" medium="image">
			<media:title type="html">ball_and_blocks</media:title>
		</media:content>
	</item>
	</channel>
</rss>
