<?xml version="1.0" encoding="UTF-8"?>
<!-- generator="wordpress/2.3.3" -->
<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/"
	>

<channel>
	<title>{ P I X E L W E L D E R S } &#187; Graphics</title>
	<link>http://pixelwelders.com/blog</link>
	<description>Flash + Flex + Game Dev + Grammar?</description>
	<pubDate>Thu, 13 Jan 2011 13:26:17 +0000</pubDate>
	<generator>http://wordpress.org/?v=2.3.3</generator>
	<language>en</language>
			<item>
		<title>AS3: BitmapData Foibles</title>
		<link>http://pixelwelders.com/blog/actionscript-3/2008/as3-bitmapdata-foibles/</link>
		<comments>http://pixelwelders.com/blog/actionscript-3/2008/as3-bitmapdata-foibles/#comments</comments>
		<pubDate>Mon, 05 May 2008 15:41:48 +0000</pubDate>
		<dc:creator>Zack Jordan</dc:creator>
		
		<category><![CDATA[ActionScript 3.0]]></category>

		<category><![CDATA[Graphics]]></category>

		<category><![CDATA[Actionscript 3.0]]></category>

		<category><![CDATA[Bitmap]]></category>

		<category><![CDATA[BitmapData]]></category>

		<guid isPermaLink="false">http://pixelwelders.com/blog/actionscript-3/2008/as3-bitmapdata-foibles/</guid>
		<description><![CDATA[Today I ran into what looks like an odd oversight in Adobe's otherwise excellent BitmapData class.  Alternatively, it could be an oversight in my otherwise excellent critical thinking skills.  Neither is unheard of, but either way, someone is missing something somewhere.]]></description>
			<content:encoded><![CDATA[<p>Today I ran into what looks like an odd oversight in Adobe&#8217;s otherwise excellent BitmapData class.  Alternatively, it could be an oversight in my otherwise excellent critical thinking skills.  Neither is unheard of, but either way, someone is missing something somewhere.</p>
<p>Here&#8217;s the scenario: I had loaded an image via a Loader, and I wanted to capture a chunk out of the middle of it.  For the sake of this example, let&#8217;s say I wanted a 200&#215;200 square, starting at (50, 50) in the source image.  So, foolishly and naîvely, I used this code:</p>

<div class="wp_syntax"><div class="code"><pre class="actionscript">	<span style="color: #808080; font-style: italic;">// create the BitmapData and draw() the contents of sourceImage into it</span>
	<span style="color: #000000; font-weight: bold;">var</span> bmpData:BitmapData = <span style="color: #000000; font-weight: bold;">new</span> BitmapData<span style="color: #66cc66;">&#40;</span> <span style="color: #cc66cc;">200</span>, <span style="color: #cc66cc;">200</span>, <span style="color: #000000; font-weight: bold;">true</span>, 0x00000000 <span style="color: #66cc66;">&#41;</span>;
	bmpData.<span style="color: #006600;">draw</span><span style="color: #66cc66;">&#40;</span> sourceImage, <span style="color: #000000; font-weight: bold;">null</span>, <span style="color: #000000; font-weight: bold;">null</span>, <span style="color: #000000; font-weight: bold;">null</span>, <span style="color: #000000; font-weight: bold;">new</span> Rectangle<span style="color: #66cc66;">&#40;</span> <span style="color: #cc66cc;">50</span>, <span style="color: #cc66cc;">50</span>, <span style="color: #cc66cc;">200</span>, <span style="color: #cc66cc;">200</span> <span style="color: #66cc66;">&#41;</span>, <span style="color: #000000; font-weight: bold;">true</span> <span style="color: #66cc66;">&#41;</span>;
&nbsp;
	<span style="color: #000000; font-weight: bold;">var</span> bmp:Bitmap = <span style="color: #000000; font-weight: bold;">new</span> Bitmap<span style="color: #66cc66;">&#40;</span> bmpData, PixelSnapping.<span style="color: #006600;">ALWAYS</span>, <span style="color: #000000; font-weight: bold;">true</span> <span style="color: #66cc66;">&#41;</span>;
&nbsp;
	<span style="color: #808080; font-style: italic;">// add to display list</span></pre></div></div>

<p>So imagine my surprise when I got this:</p>
<p><img src='http://pixelwelders.com/blog/wp-content/uploads/2008/05/bitmap_error.jpg' alt='Unexpected BitmapData behavior' style="float:left; margin:0em 1.5em 1.5em 0em;" /></p>
<p>This was definitely not what I was expecting, but apparently it is the intended functionality of BitmapData.draw().  I expected this image to line up with the upper left corner of the Bitmap container but as you can see, it doesn&#8217;t.  It does indeed start copying pixels at (50, 50) on the source image, but when added to a Bitmap, it begins drawing those pixels at (50, 50) as well.  That means that the whole thing is shifted 50 pixels along both axes, leaving empty space at the top and left while cutting off pixels at the right and bottom.  This, to me, seems like a Bad Thing.</p>
<p>I&#8217;ve played with this for a couple hours now and I can&#8217;t find a way to do this without resorting to what I think most people would term a &#8220;workaround.&#8221;  This is why I think that either Adobe just left out something, or (more likely), that I am just not grasping how this whole BitmapData/Bitmap thing works.</p>
<p>Anyway, this is my workaround.  In my traversals of the AS help files, I noticed that there is a method that allows you to specify both things that I need: coordinates of a set of pixels on the source image, and coordinates for where to <em>put</em> said pixels on the target image.  That method is BitmapData.copyPixels.  However, it only works between two instances of BitmapData.</p>
<p>So, I created two instances of BitmapData.  To make it easier to use, I placed it in a static class called <code>BitmapGrabber</code>.</p>

<div class="wp_syntax"><div class="code"><pre class="actionscript"><span style="color: #0066CC;">public</span> <span style="color: #0066CC;">static</span> <span style="color: #000000; font-weight: bold;">function</span> grab<span style="color: #66cc66;">&#40;</span> source:DisplayObject, rect:Rectangle, <span style="color: #0066CC;">smoothing</span>:<span style="color: #0066CC;">Boolean</span> <span style="color: #66cc66;">&#41;</span>: BitmapData
<span style="color: #66cc66;">&#123;</span>
&nbsp;
	<span style="color: #b1b100;">if</span><span style="color: #66cc66;">&#40;</span> <span style="color: #66cc66;">!</span>source is IBitmapDrawable <span style="color: #66cc66;">&#41;</span>
	<span style="color: #66cc66;">&#123;</span>
		<span style="color: #0066CC;">throw</span> <span style="color: #000000; font-weight: bold;">new</span> <span style="color: #0066CC;">Error</span><span style="color: #66cc66;">&#40;</span> <span style="color: #ff0000;">&quot;Cannot create BitmapData.  Source must implement IBitmapDrawable&quot;</span> <span style="color: #66cc66;">&#41;</span>;
	<span style="color: #66cc66;">&#125;</span>
&nbsp;
	<span style="color: #000000; font-weight: bold;">var</span> bmpData1:BitmapData = <span style="color: #000000; font-weight: bold;">new</span> BitmapData<span style="color: #66cc66;">&#40;</span> source.<span style="color: #0066CC;">width</span>, source.<span style="color: #0066CC;">height</span>, <span style="color: #000000; font-weight: bold;">true</span>, 0x00000000 <span style="color: #66cc66;">&#41;</span>;
	<span style="color: #000000; font-weight: bold;">var</span> bmpData2:BitmapData = <span style="color: #000000; font-weight: bold;">new</span> BitmapData<span style="color: #66cc66;">&#40;</span> rect.<span style="color: #0066CC;">width</span>, rect.<span style="color: #0066CC;">height</span>, <span style="color: #000000; font-weight: bold;">true</span>, 0x00000000 <span style="color: #66cc66;">&#41;</span>;
&nbsp;
	bmpData1.<span style="color: #006600;">draw</span><span style="color: #66cc66;">&#40;</span> source, <span style="color: #000000; font-weight: bold;">null</span>, <span style="color: #000000; font-weight: bold;">null</span>, <span style="color: #000000; font-weight: bold;">null</span>, <span style="color: #000000; font-weight: bold;">null</span>, <span style="color: #0066CC;">smoothing</span> <span style="color: #66cc66;">&#41;</span>;
	bmpData2.<span style="color: #006600;">copyPixels</span><span style="color: #66cc66;">&#40;</span> bmpData1, rect, <span style="color: #000000; font-weight: bold;">new</span> Point<span style="color: #66cc66;">&#40;</span> <span style="color: #cc66cc;">0</span>, <span style="color: #cc66cc;">0</span> <span style="color: #66cc66;">&#41;</span> <span style="color: #66cc66;">&#41;</span>;
&nbsp;
	bmpData1.<span style="color: #006600;">dispose</span><span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span>;
&nbsp;
	<span style="color: #b1b100;">return</span> bmpData2;
<span style="color: #66cc66;">&#125;</span></pre></div></div>

<p>And this is me using the class:</p>

<div class="wp_syntax"><div class="code"><pre class="actionscript"><span style="color: #808080; font-style: italic;">// create the BitmapData and draw() the contents of sourceImage into it</span>
<span style="color: #000000; font-weight: bold;">var</span> bmpData:BitmapData = BitmapGrabber.<span style="color: #006600;">grab</span><span style="color: #66cc66;">&#40;</span> sourceImage, <span style="color: #000000; font-weight: bold;">new</span> Rectangle<span style="color: #66cc66;">&#40;</span> <span style="color: #cc66cc;">100</span>, <span style="color: #cc66cc;">100</span>, <span style="color: #cc66cc;">100</span>, <span style="color: #cc66cc;">100</span> <span style="color: #66cc66;">&#41;</span>, <span style="color: #000000; font-weight: bold;">true</span> <span style="color: #66cc66;">&#41;</span>;
<span style="color: #000000; font-weight: bold;">var</span> bmp:Bitmap = <span style="color: #000000; font-weight: bold;">new</span> Bitmap<span style="color: #66cc66;">&#40;</span> bmpData, <span style="color: #ff0000;">&quot;auto&quot;</span>, <span style="color: #000000; font-weight: bold;">true</span> <span style="color: #66cc66;">&#41;</span>;
&nbsp;
<span style="color: #808080; font-style: italic;">// add to display list</span></pre></div></div>

<p>And this is what I get:</p>
<p><img src='http://pixelwelders.com/blog/wp-content/uploads/2008/05/bitmap_success1.jpg' alt='Bitmap success!' style="margin:0em 1.5em 1.5em 0em;"/></p>
<p>It&#8217;s a ridiculously simple solution.  However, I feel so strongly that BitmapData <em>should</em> have this capability (without a workaround), that I can&#8217;t shake the feeling that it <em>must</em> have this capability and I am just missing it.  But, until some member of the Flash community tells me a better way to accomplish this, this is the class I&#8217;ll be using in my code.</p>
]]></content:encoded>
			<wfw:commentRss>http://pixelwelders.com/blog/actionscript-3/2008/as3-bitmapdata-foibles/feed/</wfw:commentRss>
		</item>
	</channel>
</rss>

