<?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>Cold Constructs &#187; collision detection</title>
	<atom:link href="http://coldconstructs.com/tag/collision-detection/feed/" rel="self" type="application/rss+xml" />
	<link>http://coldconstructs.com</link>
	<description>Just another WordPress weblog</description>
	<lastBuildDate>Mon, 30 Aug 2010 19:28:38 +0000</lastBuildDate>
	<generator>http://wordpress.org/?v=4926</generator>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
			<item>
		<title>Pixel-perfect collision detection with 5000+ particles</title>
		<link>http://coldconstructs.com/2009/11/pixel-perfect-collision-detection-with-5000-particles/</link>
		<comments>http://coldconstructs.com/2009/11/pixel-perfect-collision-detection-with-5000-particles/#comments</comments>
		<pubDate>Tue, 24 Nov 2009 19:39:49 +0000</pubDate>
		<dc:creator>Corey</dc:creator>
				<category><![CDATA[Experiments]]></category>
		<category><![CDATA[Programming]]></category>
		<category><![CDATA[ActionScript 3]]></category>
		<category><![CDATA[collision detection]]></category>
		<category><![CDATA[Flash]]></category>
		<category><![CDATA[particles]]></category>
		<category><![CDATA[source]]></category>

		<guid isPermaLink="false">http://coldconstructs.com/?p=172</guid>
		<description><![CDATA[And yes, it runs perfectly fine. I&#8217;ve run it at 60+ FPS with 7,000 particles, but that actually isn&#8217;t the limitation (unless your particles are crunching heavy math for eg movement). Rather it&#8217;s the size and number of sprites that we&#8217;re colliding with the particles. Click the image below to pop a lightbox with the [...]]]></description>
			<content:encoded><![CDATA[<p>And yes, it runs perfectly fine. I&#8217;ve run it at 60+ FPS with 7,000 particles, but that actually isn&#8217;t the limitation (unless your particles are crunching heavy math for eg movement). Rather it&#8217;s the size and number of sprites that we&#8217;re colliding with the particles. Click the image below to pop a lightbox with the demo:</p>
<p><a href="http://labs.coldconstructs.com/e/vonLocalCD/bin/vonLocalCD.swf?width=600&amp;height=600" rel="prettyPhoto" title="Adjust the scroll bars at the top to change the parameters."><img src="http://labs.coldconstructs.com/i/vonlocalcd.jpg" alt="vonLocal Collision Detection" class="centered" /></a></p>
<p>To squeeze all the juice out of Flash I employed a couple tricks. <strong>The first</strong> was the particles themselves&#8211;they&#8217;re blitted to a single bitmap which is used as the source image for grabbing collision data from. The particles are also drawn with the raster engine in Flash (multiple <code>setPixel32()</code> ops to give the illusion of a line&#8230; a choppy one anyway) instead of the vector renderer (<code>lineTo()</code>). <strong>The second trick</strong> was to only grab a Vector of pixels from the regions we cared about (within sprite boundaries) every so often, then to loop through the Vector and test it against our desired conditions. Also, since the particle bitmap is more sparse than our sprites as far as opaque pixels go, we test the particle bitmap first, resulting in a lot fewer passes on the first round of conditional statements.</p>
<p><span id="more-172"></span></p>
<p>So my poor man&#8217;s method of making lines is done by interpolating the position of a particle from the previous to the current frame, for a total of 3 <code>setPixel32()</code> operations per iteration. (We can use <code>setPixel()</code> for a solid performance gain, but at a different kind of cost that I&#8217;ll explain later.) To give the particles a long tail we simply decrease the alpha of the particle bitmap a little bit every frame, making older particles fade more as time goes by. This means we can skip <code>fillRect()</code> to clear the bitmap every frame, but I&#8217;m wondering if that&#8217;s faster or slower than <code>ColorTransform</code>. Haven&#8217;t tested, for shame.</p>
<p>I&#8217;ll admit that I haven&#8217;t tried this method with bitmap-based particles but those would work just as well, in theory (using blitted rendering). One of my current projects demands those trailing things so I didn&#8217;t look into it. If you try it, please comment on this post below with your findings <img src="http://coldconstructs.com/random/pint.gif"></img><br />
<em>Click on the right-side arrow to unroll this block of code.</em></p>

<div class="wp_codebox_msgheader wp_codebox_hide"><span class="right"><sup><a href="http://www.ericbess.com/ericblog/2008/03/03/wp-codebox/#examples" target="_blank" title="WP-CodeBox HowTo?"><span style="color: #99cc00">?</span></a></sup></span><span class="left"><a href="javascript:;" onclick="javascript:showCodeTxt('p172code3'); return false;">View Code</a> ACTIONSCRIPT3</span><div class="codebox_clear"></div></div><div class="wp_codebox"><table width="100%" ><tr id="p1723"><td class="code" id="p172code3"><pre class="actionscript3" style="font-family:monospace;">particleMap<span style="color: #000066; font-weight: bold;">.</span><span style="color: #004993;">lock</span><span style="color: #000000;">&#40;</span><span style="color: #000000;">&#41;</span><span style="color: #000066; font-weight: bold;">;</span>
<span style="color: #0033ff; font-weight: bold;">for</span> <span style="color: #000000;">&#40;</span>i = <span style="color: #000000; font-weight:bold;">0</span><span style="color: #000066; font-weight: bold;">;</span> i <span style="color: #000066; font-weight: bold;">&lt;</span> _numParticles<span style="color: #000066; font-weight: bold;">;</span> <span style="color: #000066; font-weight: bold;">++</span>i<span style="color: #000000;">&#41;</span> <span style="color: #000000;">&#123;</span>
	p = particles<span style="color: #000000;">&#91;</span>i<span style="color: #000000;">&#93;</span><span style="color: #000066; font-weight: bold;">;</span>
	<span style="color: #009900; font-style: italic;">// get our velocity from the perlin noise map</span>
	vel = noiseMap<span style="color: #000066; font-weight: bold;">.</span><span style="color: #004993;">getPixel</span><span style="color: #000000;">&#40;</span>p<span style="color: #000066; font-weight: bold;">.</span>x<span style="color: #000066; font-weight: bold;">&gt;&gt;</span>3<span style="color: #000066; font-weight: bold;">,</span> p<span style="color: #000066; font-weight: bold;">.</span>y<span style="color: #000066; font-weight: bold;">&gt;&gt;</span>3<span style="color: #000000;">&#41;</span><span style="color: #000066; font-weight: bold;">;</span> <span style="color: #009900; font-style: italic;">// because noiseMap is 1/9 the size of particleMap</span>
	<span style="color: #6699cc; font-weight: bold;">var</span> brightness<span style="color: #000066; font-weight: bold;">:</span><a href="http://www.google.com/search?q=number%20inurl:http://livedocs.adobe.com/flex/201/langref/%20inurl:number.html"><span style="color: #004993;">Number</span></a> = vel <span style="color: #000066; font-weight: bold;">/</span> 0xFFFFFF<span style="color: #000066; font-weight: bold;">;</span>
	<span style="color: #6699cc; font-weight: bold;">var</span> speed<span style="color: #000066; font-weight: bold;">:</span><a href="http://www.google.com/search?q=number%20inurl:http://livedocs.adobe.com/flex/201/langref/%20inurl:number.html"><span style="color: #004993;">Number</span></a> = 0<span style="color: #000066; font-weight: bold;">.</span>1 <span style="color: #000066; font-weight: bold;">+</span> brightness <span style="color: #000066; font-weight: bold;">*</span> p<span style="color: #000066; font-weight: bold;">.</span>speed<span style="color: #000066; font-weight: bold;">;</span>
	<span style="color: #6699cc; font-weight: bold;">var</span> <span style="color: #004993;">angle</span><span style="color: #000066; font-weight: bold;">:</span><a href="http://www.google.com/search?q=number%20inurl:http://livedocs.adobe.com/flex/201/langref/%20inurl:number.html"><span style="color: #004993;">Number</span></a> = 360 <span style="color: #000066; font-weight: bold;">*</span> <span style="color: #000000;">&#40;</span>brightness <span style="color: #000066; font-weight: bold;">*</span> p<span style="color: #000066; font-weight: bold;">.</span>wander<span style="color: #000000;">&#41;</span> <span style="color: #000066; font-weight: bold;">*</span> <span style="color: #000000; font-weight:bold;">0.0175</span><span style="color: #000066; font-weight: bold;">;</span> <span style="color: #009900; font-style: italic;">// roughly PI / 180 to convert to radians</span>
	p<span style="color: #000066; font-weight: bold;">.</span>vx = <a href="http://www.google.com/search?q=math%20inurl:http://livedocs.adobe.com/flex/201/langref/%20inurl:math.html"><span style="color: #004993;">Math</span></a><span style="color: #000066; font-weight: bold;">.</span><span style="color: #004993;">cos</span><span style="color: #000000;">&#40;</span><span style="color: #004993;">angle</span><span style="color: #000000;">&#41;</span> <span style="color: #000066; font-weight: bold;">*</span> speed<span style="color: #000066; font-weight: bold;">;</span>
	p<span style="color: #000066; font-weight: bold;">.</span>vy = <a href="http://www.google.com/search?q=math%20inurl:http://livedocs.adobe.com/flex/201/langref/%20inurl:math.html"><span style="color: #004993;">Math</span></a><span style="color: #000066; font-weight: bold;">.</span><span style="color: #004993;">sin</span><span style="color: #000000;">&#40;</span><span style="color: #004993;">angle</span><span style="color: #000000;">&#41;</span> <span style="color: #000066; font-weight: bold;">*</span> speed<span style="color: #000066; font-weight: bold;">;</span>
	<span style="color: #009900; font-style: italic;">// absolute value for velocity calculations</span>
	<span style="color: #6699cc; font-weight: bold;">var</span> pvx<span style="color: #000066; font-weight: bold;">:</span><a href="http://www.google.com/search?q=number%20inurl:http://livedocs.adobe.com/flex/201/langref/%20inurl:number.html"><span style="color: #004993;">Number</span></a> = p<span style="color: #000066; font-weight: bold;">.</span>vx <span style="color: #000066; font-weight: bold;">&lt;</span> 0 <span style="color: #000066; font-weight: bold;">?</span> <span style="color: #000066; font-weight: bold;">-</span>p<span style="color: #000066; font-weight: bold;">.</span>vx <span style="color: #000066; font-weight: bold;">:</span> p<span style="color: #000066; font-weight: bold;">.</span>vx<span style="color: #000066; font-weight: bold;">;</span> <span style="color: #009900; font-style: italic;">// use bitwise sign flippage</span>
	<span style="color: #6699cc; font-weight: bold;">var</span> pvy<span style="color: #000066; font-weight: bold;">:</span><a href="http://www.google.com/search?q=number%20inurl:http://livedocs.adobe.com/flex/201/langref/%20inurl:number.html"><span style="color: #004993;">Number</span></a> = p<span style="color: #000066; font-weight: bold;">.</span>vy <span style="color: #000066; font-weight: bold;">&lt;</span> 0 <span style="color: #000066; font-weight: bold;">?</span> <span style="color: #000066; font-weight: bold;">-</span>p<span style="color: #000066; font-weight: bold;">.</span>vy <span style="color: #000066; font-weight: bold;">:</span> p<span style="color: #000066; font-weight: bold;">.</span>vy<span style="color: #000066; font-weight: bold;">;</span>
	<span style="color: #009900; font-style: italic;">// poor man's lineTo ENGAGED</span>
	<span style="color: #6699cc; font-weight: bold;">var</span> nx<span style="color: #000066; font-weight: bold;">:</span><a href="http://www.google.com/search?q=number%20inurl:http://livedocs.adobe.com/flex/201/langref/%20inurl:number.html"><span style="color: #004993;">Number</span></a> = p<span style="color: #000066; font-weight: bold;">.</span><span style="color: #004993;">x</span> <span style="color: #000066; font-weight: bold;">+</span> <span style="color: #000000;">&#40;</span>p<span style="color: #000066; font-weight: bold;">.</span>vx <span style="color: #000066; font-weight: bold;">&gt;&gt;</span> 1<span style="color: #000000;">&#41;</span><span style="color: #000066; font-weight: bold;">;</span> <span style="color: #009900; font-style: italic;">// where we are now + half the distance to where we will be</span>
	<span style="color: #6699cc; font-weight: bold;">var</span> ny<span style="color: #000066; font-weight: bold;">:</span><a href="http://www.google.com/search?q=number%20inurl:http://livedocs.adobe.com/flex/201/langref/%20inurl:number.html"><span style="color: #004993;">Number</span></a> = p<span style="color: #000066; font-weight: bold;">.</span><span style="color: #004993;">y</span> <span style="color: #000066; font-weight: bold;">+</span> <span style="color: #000000;">&#40;</span>p<span style="color: #000066; font-weight: bold;">.</span>vy <span style="color: #000066; font-weight: bold;">&gt;&gt;</span> 1<span style="color: #000000;">&#41;</span><span style="color: #000066; font-weight: bold;">;</span>
	<span style="color: #6699cc; font-weight: bold;">var</span> mx<span style="color: #000066; font-weight: bold;">:</span><a href="http://www.google.com/search?q=number%20inurl:http://livedocs.adobe.com/flex/201/langref/%20inurl:number.html"><span style="color: #004993;">Number</span></a> = nx <span style="color: #000066; font-weight: bold;">-</span> p<span style="color: #000066; font-weight: bold;">.</span><span style="color: #004993;">x</span><span style="color: #000066; font-weight: bold;">;</span> <span style="color: #009900; font-style: italic;">// then half THAT distance for a third position...</span>
	<span style="color: #6699cc; font-weight: bold;">var</span> my<span style="color: #000066; font-weight: bold;">:</span><a href="http://www.google.com/search?q=number%20inurl:http://livedocs.adobe.com/flex/201/langref/%20inurl:number.html"><span style="color: #004993;">Number</span></a> = ny <span style="color: #000066; font-weight: bold;">-</span> p<span style="color: #000066; font-weight: bold;">.</span><span style="color: #004993;">y</span><span style="color: #000066; font-weight: bold;">;</span>
	<span style="color: #009900; font-style: italic;">// actually apply velocity to pixel</span>
	p<span style="color: #000066; font-weight: bold;">.</span><span style="color: #004993;">x</span> <span style="color: #000066; font-weight: bold;">+</span>= p<span style="color: #000066; font-weight: bold;">.</span>vx<span style="color: #000066; font-weight: bold;">;</span>
	p<span style="color: #000066; font-weight: bold;">.</span><span style="color: #004993;">y</span> <span style="color: #000066; font-weight: bold;">+</span>= p<span style="color: #000066; font-weight: bold;">.</span>vy<span style="color: #000066; font-weight: bold;">;</span>
	<span style="color: #009900; font-style: italic;">// bounds-check</span>
	<span style="color: #0033ff; font-weight: bold;">if</span> <span style="color: #000000;">&#40;</span>p<span style="color: #000066; font-weight: bold;">.</span><span style="color: #004993;">y</span> <span style="color: #000066; font-weight: bold;">&lt;</span> 0<span style="color: #000000;">&#41;</span> p<span style="color: #000066; font-weight: bold;">.</span><span style="color: #004993;">y</span> = h <span style="color: #000066; font-weight: bold;">-</span> <span style="color: #000000; font-weight:bold;">1</span><span style="color: #000066; font-weight: bold;">;</span>
	<span style="color: #0033ff; font-weight: bold;">else</span> <span style="color: #0033ff; font-weight: bold;">if</span> <span style="color: #000000;">&#40;</span>p<span style="color: #000066; font-weight: bold;">.</span><span style="color: #004993;">y</span> <span style="color: #000066; font-weight: bold;">&gt;</span> h<span style="color: #000000;">&#41;</span> p<span style="color: #000066; font-weight: bold;">.</span><span style="color: #004993;">y</span> = <span style="color: #000000; font-weight:bold;">1</span><span style="color: #000066; font-weight: bold;">;</span>
	<span style="color: #0033ff; font-weight: bold;">if</span> <span style="color: #000000;">&#40;</span>p<span style="color: #000066; font-weight: bold;">.</span><span style="color: #004993;">x</span> <span style="color: #000066; font-weight: bold;">&lt;</span> 0<span style="color: #000000;">&#41;</span> p<span style="color: #000066; font-weight: bold;">.</span><span style="color: #004993;">x</span> = w <span style="color: #000066; font-weight: bold;">-</span> <span style="color: #000000; font-weight:bold;">1</span><span style="color: #000066; font-weight: bold;">;</span>
	<span style="color: #0033ff; font-weight: bold;">else</span> <span style="color: #0033ff; font-weight: bold;">if</span> <span style="color: #000000;">&#40;</span>p<span style="color: #000066; font-weight: bold;">.</span><span style="color: #004993;">x</span> <span style="color: #000066; font-weight: bold;">&gt;</span> w<span style="color: #000000;">&#41;</span> p<span style="color: #000066; font-weight: bold;">.</span><span style="color: #004993;">x</span> = <span style="color: #000000; font-weight:bold;">1</span><span style="color: #000066; font-weight: bold;">;</span>
	<span style="color: #009900; font-style: italic;">// pick our color based on speed</span>
	speed <span style="color: #000066; font-weight: bold;">*</span>= <span style="color: #000000; font-weight:bold;">60</span><span style="color: #000066; font-weight: bold;">;</span>
	<span style="color: #0033ff; font-weight: bold;">if</span> <span style="color: #000000;">&#40;</span>speed <span style="color: #000066; font-weight: bold;">&gt;</span> 255<span style="color: #000000;">&#41;</span> speed = <span style="color: #000000; font-weight:bold;">255</span><span style="color: #000066; font-weight: bold;">;</span>
	<span style="color: #004993;">color</span> = 255 <span style="color: #000066; font-weight: bold;">&lt;&lt;</span> 24 <span style="color: #000066; font-weight: bold;">|</span> speed <span style="color: #000066; font-weight: bold;">&lt;&lt;</span> 16 <span style="color: #000066; font-weight: bold;">|</span> speed <span style="color: #000066; font-weight: bold;">&lt;&lt;</span> 8 <span style="color: #000066; font-weight: bold;">|</span> speed<span style="color: #000066; font-weight: bold;">;</span>
	<span style="color: #009900; font-style: italic;">// render the particle three times, each in different places to get a line-ish thing going</span>
	particleMap<span style="color: #000066; font-weight: bold;">.</span><span style="color: #004993;">setPixel32</span><span style="color: #000000;">&#40;</span>p<span style="color: #000066; font-weight: bold;">.</span><span style="color: #004993;">x</span><span style="color: #000066; font-weight: bold;">,</span> p<span style="color: #000066; font-weight: bold;">.</span><span style="color: #004993;">y</span><span style="color: #000066; font-weight: bold;">,</span> <span style="color: #004993;">color</span><span style="color: #000000;">&#41;</span><span style="color: #000066; font-weight: bold;">;</span>
	particleMap<span style="color: #000066; font-weight: bold;">.</span><span style="color: #004993;">setPixel32</span><span style="color: #000000;">&#40;</span>mx<span style="color: #000066; font-weight: bold;">,</span> my<span style="color: #000066; font-weight: bold;">,</span> <span style="color: #004993;">color</span><span style="color: #000000;">&#41;</span><span style="color: #000066; font-weight: bold;">;</span>
	particleMap<span style="color: #000066; font-weight: bold;">.</span><span style="color: #004993;">setPixel32</span><span style="color: #000000;">&#40;</span>nx<span style="color: #000066; font-weight: bold;">,</span> ny<span style="color: #000066; font-weight: bold;">,</span> <span style="color: #004993;">color</span><span style="color: #000000;">&#41;</span><span style="color: #000066; font-weight: bold;">;</span>
<span style="color: #000000;">&#125;</span>
<span style="color: #009900; font-style: italic;">// and we're done. release the pixels!</span>
particleMap<span style="color: #000066; font-weight: bold;">.</span><span style="color: #004993;">unlock</span><span style="color: #000000;">&#40;</span>_r<span style="color: #000000;">&#41;</span><span style="color: #000066; font-weight: bold;">;</span></pre></td></tr></table></div>

<p>So that gives us some spotty-but-close-enough trails to help with our collision detection. It works like this: We create a single bitmap to use as a canvas for our particles. We render those particles using <code>setPixel32()</code> as mentioned above. <strong>Sprites will use this bitmap as a source for collision data.</strong> Every other frame or so (more on this later) the sprites will grab a section of pixels from the particle bitmap using something like <code>getVector()</code> (>= Flash 10) or <code>getPixels()</code> (< Flash 10), using their own position and dimensions for the <code>sourceRect</code> parameter.</p>

<div class="wp_codebox_msgheader"><span class="right"><sup><a href="http://www.ericbess.com/ericblog/2008/03/03/wp-codebox/#examples" target="_blank" title="WP-CodeBox HowTo?"><span style="color: #99cc00">?</span></a></sup></span><span class="left"><a href="javascript:;" onclick="javascript:showCodeTxt('p172code4'); return false;">View Code</a> ACTIONSCRIPT3</span><div class="codebox_clear"></div></div><div class="wp_codebox"><table width="100%" ><tr id="p1724"><td class="line_numbers"><pre>133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
</pre></td><td class="code" id="p172code4"><pre class="actionscript3" style="font-family:monospace;">shipVec = buffer<span style="color: #000066; font-weight: bold;">.</span>getVector<span style="color: #000000;">&#40;</span>_rc<span style="color: #000000;">&#41;</span><span style="color: #000066; font-weight: bold;">;</span> <span style="color: #009900; font-style: italic;">// get an array of pixels from the whole sprite</span>
_rc<span style="color: #000066; font-weight: bold;">.</span><span style="color: #004993;">x</span> = <a href="http://www.google.com/search?q=int%20inurl:http://livedocs.adobe.com/flex/201/langref/%20inurl:int.html"><span style="color: #004993;">int</span></a><span style="color: #000000;">&#40;</span><span style="color: #0033ff; font-weight: bold;">this</span><span style="color: #000066; font-weight: bold;">.</span><span style="color: #004993;">x</span><span style="color: #000000;">&#41;</span><span style="color: #000066; font-weight: bold;">;</span> <span style="color: #009900; font-style: italic;">// change rect to particleBMD's coordinate space</span>
_rc<span style="color: #000066; font-weight: bold;">.</span><span style="color: #004993;">y</span> = <a href="http://www.google.com/search?q=int%20inurl:http://livedocs.adobe.com/flex/201/langref/%20inurl:int.html"><span style="color: #004993;">int</span></a><span style="color: #000000;">&#40;</span><span style="color: #0033ff; font-weight: bold;">this</span><span style="color: #000066; font-weight: bold;">.</span><span style="color: #004993;">y</span><span style="color: #000000;">&#41;</span><span style="color: #000066; font-weight: bold;">;</span>
pixVec = _particlebmd<span style="color: #000066; font-weight: bold;">.</span>getVector<span style="color: #000000;">&#40;</span>_rc<span style="color: #000000;">&#41;</span><span style="color: #000066; font-weight: bold;">;</span> <span style="color: #009900; font-style: italic;">// grab an array of the same area of pixels that our sprite is occupying</span>
<span style="color: #6699cc; font-weight: bold;">var</span> a<span style="color: #000066; font-weight: bold;">:</span><a href="http://www.google.com/search?q=uint%20inurl:http://livedocs.adobe.com/flex/201/langref/%20inurl:uint.html"><span style="color: #004993;">uint</span></a><span style="color: #000066; font-weight: bold;">;</span>
<span style="color: #6699cc; font-weight: bold;">var</span> i<span style="color: #000066; font-weight: bold;">:</span><a href="http://www.google.com/search?q=int%20inurl:http://livedocs.adobe.com/flex/201/langref/%20inurl:int.html"><span style="color: #004993;">int</span></a> = <span style="color: #000000; font-weight:bold;">0</span><span style="color: #000066; font-weight: bold;">;</span>
buffer<span style="color: #000066; font-weight: bold;">.</span><span style="color: #004993;">lock</span><span style="color: #000000;">&#40;</span><span style="color: #000000;">&#41;</span><span style="color: #000066; font-weight: bold;">;</span>
<span style="color: #0033ff; font-weight: bold;">for</span> <span style="color: #000000;">&#40;</span>i<span style="color: #000066; font-weight: bold;">;</span> i <span style="color: #000066; font-weight: bold;">&lt;</span> _l<span style="color: #000066; font-weight: bold;">;</span> <span style="color: #000066; font-weight: bold;">++</span>i<span style="color: #000000;">&#41;</span> <span style="color: #000000;">&#123;</span>
	_pval = pixVec<span style="color: #000000;">&#91;</span><a href="http://www.google.com/search?q=int%20inurl:http://livedocs.adobe.com/flex/201/langref/%20inurl:int.html"><span style="color: #004993;">int</span></a><span style="color: #000000;">&#40;</span>i<span style="color: #000000;">&#41;</span><span style="color: #000000;">&#93;</span><span style="color: #000066; font-weight: bold;">;</span> <span style="color: #009900; font-style: italic;">// first look at the particle's image for opaque pixels</span>
	a = _pval <span style="color: #000066; font-weight: bold;">&gt;&gt;</span> <span style="color: #000000; font-weight:bold;">24</span><span style="color: #000066; font-weight: bold;">;</span>
	<span style="color: #0033ff; font-weight: bold;">if</span> <span style="color: #000000;">&#40;</span>a <span style="color: #000066; font-weight: bold;">&lt;</span> 100<span style="color: #000000;">&#41;</span> <span style="color: #0033ff; font-weight: bold;">continue</span><span style="color: #000066; font-weight: bold;">;</span>
	<span style="color: #009900; font-style: italic;">// it found an opaque-ish pixel, so let's see if there's an opaque pixel in the ship there too</span>
	_sval = shipVec<span style="color: #000000;">&#91;</span><a href="http://www.google.com/search?q=int%20inurl:http://livedocs.adobe.com/flex/201/langref/%20inurl:int.html"><span style="color: #004993;">int</span></a><span style="color: #000000;">&#40;</span>i<span style="color: #000000;">&#41;</span><span style="color: #000000;">&#93;</span><span style="color: #000066; font-weight: bold;">;</span>
	a = _sval <span style="color: #000066; font-weight: bold;">&gt;&gt;</span> <span style="color: #000000; font-weight:bold;">24</span><span style="color: #000066; font-weight: bold;">;</span>
	<span style="color: #0033ff; font-weight: bold;">if</span> <span style="color: #000000;">&#40;</span>a <span style="color: #000066; font-weight: bold;">&lt;</span> 100<span style="color: #000000;">&#41;</span> <span style="color: #0033ff; font-weight: bold;">continue</span><span style="color: #000066; font-weight: bold;">;</span>
	<span style="color: #3f5fbf;">/* if we get this far then we have a collision because one
	 * of the ship's pixels is overlapping a particle's pixel.
	 * we're only going to collide with red-colored particles though */</span>
	_pval = _pval <span style="color: #000066; font-weight: bold;">&gt;&gt;</span> 16 <span style="color: #000066; font-weight: bold;">&amp;</span> 0xFF<span style="color: #000066; font-weight: bold;">;</span> <span style="color: #009900; font-style: italic;">// red channel extraction</span>
	<span style="color: #0033ff; font-weight: bold;">if</span> <span style="color: #000000;">&#40;</span>_pval <span style="color: #000066; font-weight: bold;">&gt;</span> 100<span style="color: #000000;">&#41;</span> <span style="color: #000000;">&#123;</span>
		<span style="color: #6699cc; font-weight: bold;">var</span> px<span style="color: #000066; font-weight: bold;">:</span><a href="http://www.google.com/search?q=int%20inurl:http://livedocs.adobe.com/flex/201/langref/%20inurl:int.html"><span style="color: #004993;">int</span></a> = <a href="http://www.google.com/search?q=int%20inurl:http://livedocs.adobe.com/flex/201/langref/%20inurl:int.html"><span style="color: #004993;">int</span></a><span style="color: #000000;">&#40;</span>i <span style="color: #000066; font-weight: bold;">%</span> w<span style="color: #000000;">&#41;</span><span style="color: #000066; font-weight: bold;">;</span> <span style="color: #009900; font-style: italic;">// translate 1d array coordinate to 2d grid coordinates</span>
		<span style="color: #6699cc; font-weight: bold;">var</span> py<span style="color: #000066; font-weight: bold;">:</span><a href="http://www.google.com/search?q=int%20inurl:http://livedocs.adobe.com/flex/201/langref/%20inurl:int.html"><span style="color: #004993;">int</span></a> = <a href="http://www.google.com/search?q=int%20inurl:http://livedocs.adobe.com/flex/201/langref/%20inurl:int.html"><span style="color: #004993;">int</span></a><span style="color: #000000;">&#40;</span>i <span style="color: #000066; font-weight: bold;">/</span> h<span style="color: #000000;">&#41;</span><span style="color: #000066; font-weight: bold;">;</span>
		buffer<span style="color: #000066; font-weight: bold;">.</span><span style="color: #004993;">setPixel32</span><span style="color: #000000;">&#40;</span>px<span style="color: #000066; font-weight: bold;">,</span>py<span style="color: #000066; font-weight: bold;">,</span>0xFF4e88c9<span style="color: #000000;">&#41;</span><span style="color: #000066; font-weight: bold;">;</span> <span style="color: #009900; font-style: italic;">// colliding pixels are painted on the top of our sprite in a cold blue-ish color</span>
	<span style="color: #000000;">&#125;</span>
<span style="color: #000000;">&#125;</span>
buffer<span style="color: #000066; font-weight: bold;">.</span><span style="color: #004993;">unlock</span><span style="color: #000000;">&#40;</span><span style="color: #000000;">&#41;</span><span style="color: #000066; font-weight: bold;">;</span></pre></td></tr></table></div>

<p>As you can see on line 133 and 136, each sprite has a block of pixels ready to examine on each tick. The sprite loops through that block and compares every pixel of its own with the pixels in the Vector it got. If there's a match (eg both pixels are opaque) then look at the particle's pixel in detail to see if it's the <del datetime="2009-10-10T20:40:55+00:00">droid</del> one we're looking for and record its findings. </p>
<p>So you can alter line 151 so that the sprites check for specific colors in the particle bitmap, like anything brighter than dark grey (which I did here, or anything with an alpha greater than <code>0.1</code> or... use your imagination I guess?).</p>
<p>Because grabbing a new Vector from the particle bitmap can be so expensive (depending on the size of the sprite), you can time limit the collection so it only samples the particle bitmap once in a short while. In the demo SWF above I sample it once every 100 milliseconds or so, which comes out to about 24 samples a second (given 25 milliseconds per frame at 60 FPS)... as opposed to 2400 samples a second. The casual human eye can't tell the difference but it yields a significant increase in performance. Most performance tricks I've learned are based are smoke and mirror stuff like this.</p>
<p>You can use <code>setPixel()</code> (no alpha) but you'll <em>have</em> to test for color--obviously for a color that isn't what the background of the particle bitmap is, so it's a little more tricky. It's also totally possible to use other sprites as particles as long as you blit them (using <code>copyPixels()</code> or <code>setVector()</code>) to a single bitmap that can be checked by other sprites that collide with them. If you don't know what blitting is, 8bitRocket <a href="http://www.8bitrocket.com/newsdisplay.aspx?newspage=13430">has a good rundown</a> (it's where I first learned about it actually).</p>
<p>And that's pretty much it. You can download the example files/source below.</p>
<p><a title="download source" href="http://labs.coldconstructs.com/e/vonLocalCD.zip"><img class="centered" src="http://coldconstructs.com/siteFiles/download_button.png" alt="download source" /></a></p>
]]></content:encoded>
			<wfw:commentRss>http://coldconstructs.com/2009/11/pixel-perfect-collision-detection-with-5000-particles/feed/</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
	</channel>
</rss>
