<?xml version="1.0" encoding="utf-8"?>
<rss version="2.0"
    xmlns:dc="http://purl.org/dc/elements/1.1/"
    xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
    xmlns:admin="http://webns.net/mvcb/"
    xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
    xmlns:content="http://purl.org/rss/1.0/modules/content/">

    <channel>
    
    <title>Luxurious Blog Feed</title>
    <link>http://dev.luxanimals.com/blog/</link>
    <description>Thoughts from the animals</description>
    <dc:language>en</dc:language>
    <dc:creator>garrett@luxanimals.com</dc:creator>
    <dc:rights>Copyright 2012</dc:rights>
    <dc:date>2012-05-18T17:24:41+00:00</dc:date>
    <admin:generatorAgent rdf:resource="http://expressionengine.com/" />
    

    <item>
      <title>LIFTLUXE store launches</title>
      <link>http://www.luxanimals.com/blog/article/liftluxe_store_launches</link>
      <description>
		<![CDATA[<a href="http://www.luxanimals.com/blog/article/liftluxe_store_launches" target="_blank">
		<img src="http://www.luxanimals.com/assets/images/ee/blog/liftluxe_store_small.jpg" alt="LIFTLUXE store launches"></img></a><br/>
			Designing the <a href="http://www.liftluxe.com">LIFTLUXE</a> logo, the tagline, the blog, and online store branding was well worth the wait. <br/><br/>
		]]>
	</description>
	<image>
		<link>http://www.luxanimals.com/blog/article/liftluxe_store_launches</link>
		<url>http://www.luxanimals.com/assets/images/ee/blog/liftluxe_store_small.jpg</url>
		<title>LIFTLUXE store launches</title>
	</image>
      <dc:subject>News,</dc:subject>
      <dc:date>2012-05-18T17:24:41+00:00</dc:date>
    </item>

    <item>
      <title>A Luxurious FWA Win</title>
      <link>http://www.luxanimals.com/blog/article/a_luxurious_fwa_win</link>
      <description>
		<![CDATA[<a href="http://www.luxanimals.com/blog/article/a_luxurious_fwa_win" target="_blank">
		<img src="http://www.luxanimals.com/assets/images/ee/blog/fwa_blog_590x340.jpg" alt="A Luxurious FWA Win"></img></a><br/>
			Luxurious Animals is honored by the FWA's recognition of the Lux Ahoy HTML5 Game as <a href="http://www.thefwa.com/site/lux-ahoy-html5-game">Site of the Day</a> for April 23rd, 2012. <br/><br/>
		]]>
	</description>
	<image>
		<link>http://www.luxanimals.com/blog/article/a_luxurious_fwa_win</link>
		<url>http://www.luxanimals.com/assets/images/ee/blog/fwa_blog_590x340.jpg</url>
		<title>A Luxurious FWA Win</title>
	</image>
      <dc:subject>News, Awards,</dc:subject>
      <dc:date>2012-04-23T19:47:21+00:00</dc:date>
    </item>

    <item>
      <title>Now Hiring Developers</title>
      <link>http://www.luxanimals.com/blog/article/now_hiring_developers</link>
      <description>
		<![CDATA[<a href="http://www.luxanimals.com/blog/article/now_hiring_developers" target="_blank">
		<img src="http://www.luxanimals.com/assets/images/ee/blog/news_hiring_developers.jpg" alt="Now Hiring Developers"></img></a><br/>
			Good news! We've got two developer positions open:<br />
<br />
Front-end Developer<br /><br />
- 3+ years front-end development experience preferred<br />
- You've coded production sites in both Flash/AS3 and HTML/CSS/JavaScript<br />
- Strong working knowledge of cross browser display and performance compatibility<br />
- Facebook Open Graph integration experience<br />
- Version control experience (GIT preferred)<br />
- An appreciation for great design and animation<br />
- Code-based animation experience is a plus<br />
- Bonus points for experience with Box2D, EaselJS and other JavaScript animation frameworks<br />
- Backbone.js or other JS MVC knowledge another plus<br />
- Knowledge of SEO best practices a plus<br />
<br />
Senior Back-End Developer<br /><br />
- 5+ years development experience preferred<br />
- You've coded production sites using MVC frameworks such as Ruby On Rails, Django and CodeIgniter<br />
- Experience with relational databases (MySQL, PostgreSQL, SQLite)<br />
- Facebook Open Graph integration experience<br />
- Experience with creating and consuming SOAP and REST web services<br />
- Strong CMS experience with open source systems<br />
- An organized approach to structuring development projects<br />
- An appreciation for great design<br />
- Cloud deployment experience (via Heroku, AWS, GAE) a big plus<br />
- Bonus points for programming skills in Ruby, Java, Objective C, OpenGL, Python, .NET, AS3, and some front-end experience.<br />
- Bonus points for experience with Node.js<br />
- CS degree preferred<br />
<br />
<br />
Send your email to <a href="mailto:opportunities@luxanimals.com">opportunities@luxanimals.com</a><br />
<br />
- Include a link to your online portfolio and PDF of your resume<br />
- You must live in the NY area<br />
- Luxurious Animals is an equal opportunity employer (EOE)<br />
<br/><br/>
		]]>
	</description>
	<image>
		<link>http://www.luxanimals.com/blog/article/now_hiring_developers</link>
		<url>http://www.luxanimals.com/assets/images/ee/blog/news_hiring_developers.jpg</url>
		<title>Now Hiring Developers</title>
	</image>
      <dc:subject>News,</dc:subject>
      <dc:date>2012-04-16T16:00:51+00:00</dc:date>
    </item>

    <item>
      <title>CNET Article on Lux Ahoy Game</title>
      <link>http://www.luxanimals.com/blog/article/cnet_article_on_lux_ahoy_game</link>
      <description>
		<![CDATA[<a href="http://www.luxanimals.com/blog/article/cnet_article_on_lux_ahoy_game" target="_blank">
		<img src="http://www.luxanimals.com/assets/images/ee/blog/blog_cnet.jpg" alt="CNET Article on Lux Ahoy Game"></img></a><br/>
			<a href="http://news.cnet.com/8301-30685_3-57407926-264/adobe-touts-tools-for-flash-to-html-conversion/?tag=rb_content;contentBody">Read about</a> how we used Adobe's up-and-coming tools to create the Lux Ahoy HTML5 game.<br/><br/>
		]]>
	</description>
	<image>
		<link>http://www.luxanimals.com/blog/article/cnet_article_on_lux_ahoy_game</link>
		<url>http://www.luxanimals.com/assets/images/ee/blog/blog_cnet.jpg</url>
		<title>CNET Article on Lux Ahoy Game</title>
	</image>
      <dc:subject>News,</dc:subject>
      <dc:date>2012-04-04T16:23:41+00:00</dc:date>
    </item>

    <item>
      <title>Combining Easel.js and Box2d in Canvas</title>
      <link>http://www.luxanimals.com/blog/article/combining_easel_box2d</link>
      <description>
		<![CDATA[<a href="http://www.luxanimals.com/blog/article/combining_easel_box2d" target="_blank">
		<img src="http://www.luxanimals.com/assets/images/ee/blog/Featured_04.jpg" alt="Combining Easel.js and Box2d in Canvas"></img></a><br/>
			One of the more difficult aspects of creating our <a href="http://www.luxahoy.com" target="_blank">Luxahoy</a> HTML5 game was figuring out how to combine two very cool frameworks: <a href="http://easeljs.com/" target="_blank">Easel.js</a> and <a href="http://code.google.com/p/box2dweb/" target="_blank">Box2dWeb</a>. In this tutorial we will go over the basics of "actor" objects so that you'll be able to translate box2d measurements to the x, y, and rotation parameters of your display object in easel.
<br/><br/>
Before starting this tutorial it is assumed that you have a basic knowledge of how box2d and easel both work. If you are new to the box2d world, please read through this awesome series of <a href="http://blog.sethladd.com/2011/08/box2d-orientation-for-javascript.html" target="_blank">box2d orientation and tutorials</a> from Seth Ladd. If you are new to easel, please check out the <a href="http://easeljs.com/docs/" target="_blank">documentation</a> so you can get an idea of how to add objects to the stage and understand the overall display hierarchy (hint: it shares several things in common with Flash coding).
<br/><br/>
Ok, now that that's out of the way, let's dig in. What we're going to create is create a simple demo that rains pink birds like so<br/><br/>
<iframe src="http://www.luxanimals.com/tutorials/birds" style="background-color: #FFF;" width="530" height="630"></iframe>
<br/>
<a href="http://www.luxanimals.com/tutorials/birds" target="_blank">View in browser</a> - <a href="http://www.luxanimals.com/tutorials/birds/easel_b2d_source.zip">Download source code</a>
<br/><br/>
Since we assume a basic understanding of box2d and easel we're going to skip the setup code and dive right in to combining the two frameworks. If you'd like a refresher on that simply download the demo <a href="http://www.luxanimals.com/tutorials/birds/easel_b2d_source.zip">zip</a> or view the source on the demo page.
<br/><br/>
Now in Easel.js it's extremely simple to add an object to the stage at a specified position. Here's how we add birds to the screen from the ticker (loop) function
<br/><br/>
Note: all code below is non-functional excerpts from demo.js. For working code, download the <a href="http://www.luxanimals.com/tutorials/birds/easel_b2d_source.zip">zip</a>.
<br/><br/>

<link rel="stylesheet" href="http://www.luxanimals.com/ee/themes/third_party/ee_syntax/styles/ee-syntax.css" type="text/css" media="screen" />
 



<div class="ee_syntax"><table><tr><td class="line_numbers"><pre>1
2
3
4
5
6
7
</pre></td><td class="code"><pre class="javascript" style="font-family:monospace;"><span style="color: #003366; font-weight: bold;">var</span> tick <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span>dt<span style="color: #339933;">,</span> paused<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
	birdDelayCounter<span style="color: #339933;">++;</span>
	<span style="color: #000066; font-weight: bold;">if</span><span style="color: #009900;">&#40;</span>birdDelayCounter <span style="color: #339933;">%</span> <span style="color: #CC0000;">10</span> <span style="color: #339933;">===</span> <span style="color: #CC0000;">0</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>  <span style="color: #006600; font-style: italic;">// delay so it doesn't spawn a bird on every frame</span>
		birdDelayCounter <span style="color: #339933;">=</span> <span style="color: #CC0000;">0</span><span style="color: #339933;">;</span>
		birds.<span style="color: #660066;">spawn</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	<span style="color: #009900;">&#125;</span>
<span style="color: #009900;">&#125;</span></pre></td></tr></table></div>





<link rel="stylesheet" href="http://www.luxanimals.com/ee/themes/third_party/ee_syntax/styles/ee-syntax.css" type="text/css" media="screen" />
 



<div class="ee_syntax"><table><tr><td class="line_numbers"><pre>1
2
3
4
5
6
7
8
</pre></td><td class="code"><pre class="javascript" style="font-family:monospace;"><span style="color: #003366; font-weight: bold;">var</span> spawn <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
	<span style="color: #003366; font-weight: bold;">var</span> birdBMP <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">new</span> Bitmap<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;images/bird.png&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	birdBMP.<span style="color: #660066;">x</span> <span style="color: #339933;">=</span> Math.<span style="color: #660066;">round</span><span style="color: #009900;">&#40;</span>Math.<span style="color: #660066;">random</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">*</span><span style="color: #CC0000;">500</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	birdBMP.<span style="color: #660066;">y</span> <span style="color: #339933;">=</span> <span style="color: #339933;">-</span><span style="color: #CC0000;">30</span><span style="color: #339933;">;</span>
	birdBMP.<span style="color: #660066;">regX</span> <span style="color: #339933;">=</span> <span style="color: #CC0000;">25</span><span style="color: #339933;">;</span>   <span style="color: #006600; font-style: italic;">// important to set origin point to center of your bitmap</span>
	birdBMP.<span style="color: #660066;">regY</span> <span style="color: #339933;">=</span> <span style="color: #CC0000;">25</span><span style="color: #339933;">;</span> 
	stage.<span style="color: #660066;">addChild</span><span style="color: #009900;">&#40;</span>birdBMP<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #009900;">&#125;</span></pre></td></tr></table></div>





This should look pretty familiar. This code simply adds a bird to the stage in a random x position at the top of the canvas. The bitmap object itself is quite versatile, you can tween it's position, set it's alpha, skew it, etc. However, if you want to apply physics to your asset you'll have to send it to box2d.
<br/><br/>
regX and regY (origin point) are important when tying your easel object into box2d. This is because box2d objects have an origin point in the center as opposed to the top left like easel display objects.
<br/><br/>
Now that we have our images being added to the stage it's time to send 'em over to box2d for further awesomeness.
<br/><br/>

<link rel="stylesheet" href="http://www.luxanimals.com/ee/themes/third_party/ee_syntax/styles/ee-syntax.css" type="text/css" media="screen" />
 



<div class="ee_syntax"><table><tr><td class="line_numbers"><pre>1
</pre></td><td class="code"><pre class="javascript" style="font-family:monospace;">box2d.<span style="color: #660066;">createBird</span><span style="color: #009900;">&#40;</span>birdBMP<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></td></tr></table></div>





<link rel="stylesheet" href="http://www.luxanimals.com/ee/themes/third_party/ee_syntax/styles/ee-syntax.css" type="text/css" media="screen" />
 



<div class="ee_syntax"><table><tr><td class="line_numbers"><pre>1
2
3
4
5
6
7
8
9
10
11
12
13
</pre></td><td class="code"><pre class="javascript" style="font-family:monospace;"><span style="color: #003366; font-weight: bold;">var</span> createBird <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span>skin<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
	<span style="color: #003366; font-weight: bold;">var</span> birdFixture <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">new</span> b2FixtureDef<span style="color: #339933;">;</span>
	birdFixture.<span style="color: #660066;">density</span> <span style="color: #339933;">=</span> <span style="color: #CC0000;">1</span><span style="color: #339933;">;</span>
	birdFixture.<span style="color: #660066;">restitution</span> <span style="color: #339933;">=</span> <span style="color: #CC0000;">0.6</span><span style="color: #339933;">;</span>
	birdFixture.<span style="color: #660066;">shape</span> <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">new</span> b2CircleShape<span style="color: #009900;">&#40;</span><span style="color: #CC0000;">24</span> <span style="color: #339933;">/</span> SCALE<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>   <span style="color: #006600; font-style: italic;">// half of bird.png width divided by world scale for right size</span>
	<span style="color: #003366; font-weight: bold;">var</span> birdBodyDef <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">new</span> b2BodyDef<span style="color: #339933;">;</span>
	birdBodyDef.<span style="color: #660066;">type</span> <span style="color: #339933;">=</span> b2Body.<span style="color: #660066;">b2_dynamicBody</span><span style="color: #339933;">;</span>
	birdBodyDef.<span style="color: #660066;">position</span>.<span style="color: #660066;">x</span> <span style="color: #339933;">=</span> skin.<span style="color: #660066;">x</span> <span style="color: #339933;">/</span> SCALE<span style="color: #339933;">;</span>  <span style="color: #006600; font-style: italic;">// divide skin x and y by box2d scale to get right position</span>
	birdBodyDef.<span style="color: #660066;">position</span>.<span style="color: #660066;">y</span> <span style="color: #339933;">=</span> skin.<span style="color: #660066;">y</span> <span style="color: #339933;">/</span> SCALE<span style="color: #339933;">;</span>
	<span style="color: #003366; font-weight: bold;">var</span> bird <span style="color: #339933;">=</span> world.<span style="color: #660066;">CreateBody</span><span style="color: #009900;">&#40;</span>birdBodyDef<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	bird.<span style="color: #660066;">CreateFixture</span><span style="color: #009900;">&#40;</span>birdFixture<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	bodies.<span style="color: #660066;">push</span><span style="color: #009900;">&#40;</span>bird<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #009900;">&#125;</span></pre></td></tr></table></div>





The code above will create a box2d circle body at the same position and size as the bird bitmap object. Unfortunately though, the bird skin is still not mapped to the box2d object. Without debug on you would not see the box2d circle and the bird would remain stationary. So how do we tell the skin to follow the position of the box2d body?
<br/><br/>
...Actors! Actors are the meat and potatoes of having a visual box2d demo. Basically they have to run during the game loop and translate the box2d body metric positions back to pixel positions. Lets create one.
<br/><br/>

<link rel="stylesheet" href="http://www.luxanimals.com/ee/themes/third_party/ee_syntax/styles/ee-syntax.css" type="text/css" media="screen" />
 



<div class="ee_syntax"><table><tr><td class="line_numbers"><pre>1
2
</pre></td><td class="code"><pre class="javascript" style="font-family:monospace;"><span style="color: #003366; font-weight: bold;">var</span> actor <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">new</span> actorObject<span style="color: #009900;">&#40;</span>bird<span style="color: #339933;">,</span> skin<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
bird.<span style="color: #660066;">SetUserData</span><span style="color: #009900;">&#40;</span>actor<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>  <span style="color: #006600; font-style: italic;">// set actor as userdata of body so we can get at it later if we need to</span></pre></td></tr></table></div>






<link rel="stylesheet" href="http://www.luxanimals.com/ee/themes/third_party/ee_syntax/styles/ee-syntax.css" type="text/css" media="screen" />
 



<div class="ee_syntax"><table><tr><td class="line_numbers"><pre>1
2
3
4
5
6
7
8
9
10
</pre></td><td class="code"><pre class="javascript" style="font-family:monospace;"><span style="color: #003366; font-weight: bold;">var</span> actorObject <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span>body<span style="color: #339933;">,</span> skin<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
	<span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">body</span> <span style="color: #339933;">=</span> body<span style="color: #339933;">;</span>
	<span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">skin</span> <span style="color: #339933;">=</span> skin<span style="color: #339933;">;</span>
	<span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">update</span> <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span> <span style="color: #006600; font-style: italic;">// translate box2d positions to pixels</span>
		<span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">skin</span>.<span style="color: #660066;">rotation</span> <span style="color: #339933;">=</span> <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">body</span>.<span style="color: #660066;">GetAngle</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #339933;">*</span> <span style="color: #009900;">&#40;</span><span style="color: #CC0000;">180</span> <span style="color: #339933;">/</span> Math.<span style="color: #660066;">PI</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
		<span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">skin</span>.<span style="color: #660066;">x</span> <span style="color: #339933;">=</span> <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">body</span>.<span style="color: #660066;">GetWorldCenter</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">x</span> <span style="color: #339933;">*</span> SCALE<span style="color: #339933;">;</span>
		<span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">skin</span>.<span style="color: #660066;">y</span> <span style="color: #339933;">=</span> <span style="color: #000066; font-weight: bold;">this</span>.<span style="color: #660066;">body</span>.<span style="color: #660066;">GetWorldCenter</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">y</span> <span style="color: #339933;">*</span> SCALE<span style="color: #339933;">;</span>
	<span style="color: #009900;">&#125;</span>
	actors.<span style="color: #660066;">push</span><span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #009900;">&#125;</span></pre></td></tr></table></div>





This is a basic example of an actor object, if you wanted to you could extend it with almost anything (ids, hit count, out of bounds function, etc). Now that an actor is defined for the box2d body we need to tell it to update during the physics loop.
<br/><br/>

<link rel="stylesheet" href="http://www.luxanimals.com/ee/themes/third_party/ee_syntax/styles/ee-syntax.css" type="text/css" media="screen" />
 



<div class="ee_syntax"><table><tr><td class="line_numbers"><pre>1
2
3
4
</pre></td><td class="code"><pre class="javascript" style="font-family:monospace;"><span style="color: #006600; font-style: italic;">// within physics loop before world.step</span>
<span style="color: #000066; font-weight: bold;">for</span><span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">var</span> i<span style="color: #339933;">=</span><span style="color: #CC0000;">0</span><span style="color: #339933;">,</span> l<span style="color: #339933;">=</span>actors.<span style="color: #660066;">length</span><span style="color: #339933;">;</span> i<span style="color: #339933;">&lt;</span>l<span style="color: #339933;">;</span> i<span style="color: #339933;">++</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
     actors<span style="color: #339933;">&lt;</span>i<span style="color: #339933;">&gt;</span>.<span style="color: #660066;">update</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #009900;">&#125;</span></pre></td></tr></table></div>





The bitmap skin will now mirror whatever the box2d body does within the physics simulation.
<br/><br/>
If you want to remove the body AND it's skin together at some point you can add the body to an array to be removed. Bodies must be removed before each world.step.
<br/><br/>

<link rel="stylesheet" href="http://www.luxanimals.com/ee/themes/third_party/ee_syntax/styles/ee-syntax.css" type="text/css" media="screen" />
 



<div class="ee_syntax"><table><tr><td class="line_numbers"><pre>1
2
3
4
5
6
7
8
9
10
11
</pre></td><td class="code"><pre class="javascript" style="font-family:monospace;"><span style="color: #006600; font-style: italic;">// before step</span>
<span style="color: #000066; font-weight: bold;">for</span><span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">var</span> i<span style="color: #339933;">=</span><span style="color: #CC0000;">0</span><span style="color: #339933;">,</span> l<span style="color: #339933;">=</span>bodiesToRemove.<span style="color: #660066;">length</span><span style="color: #339933;">;</span> i<span style="color: #339933;">&lt;</span>l<span style="color: #339933;">;</span> i<span style="color: #339933;">++</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
	removeActor<span style="color: #009900;">&#40;</span>bodiesToRemove<span style="color: #339933;">&lt;</span>i<span style="color: #339933;">&gt;</span>.<span style="color: #660066;">GetUserData</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>  <span style="color: #006600; font-style: italic;">// get the actor object in the user data of the body and send to removeActor function</span>
	bodiesToRemove<span style="color: #339933;">&lt;</span>i<span style="color: #339933;">&gt;</span>.<span style="color: #660066;">SetUserData</span><span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">null</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	world.<span style="color: #660066;">DestroyBody</span><span style="color: #009900;">&#40;</span>bodiesToRemove<span style="color: #339933;">&lt;</span>i<span style="color: #339933;">&gt;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #009900;">&#125;</span>
<span style="color: #006600; font-style: italic;">// after step</span>
<span style="color: #000066; font-weight: bold;">if</span><span style="color: #009900;">&#40;</span>bodies.<span style="color: #660066;">length</span> <span style="color: #339933;">&gt;</span> <span style="color: #CC0000;">30</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
     bodiesToRemove.<span style="color: #660066;">push</span><span style="color: #009900;">&#40;</span>bodies<span style="color: #009900;">&#91;</span><span style="color: #CC0000;">0</span><span style="color: #009900;">&#93;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
     bodies.<span style="color: #660066;">splice</span><span style="color: #009900;">&#40;</span><span style="color: #CC0000;">0</span><span style="color: #339933;">,</span><span style="color: #CC0000;">1</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #009900;">&#125;</span></pre></td></tr></table></div>






<link rel="stylesheet" href="http://www.luxanimals.com/ee/themes/third_party/ee_syntax/styles/ee-syntax.css" type="text/css" media="screen" />
 



<div class="ee_syntax"><table><tr><td class="line_numbers"><pre>1
2
3
4
</pre></td><td class="code"><pre class="javascript" style="font-family:monospace;"><span style="color: #003366; font-weight: bold;">var</span> removeActor <span style="color: #339933;">=</span> <span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span>actor<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
	stage.<span style="color: #660066;">removeChild</span><span style="color: #009900;">&#40;</span>actor.<span style="color: #660066;">skin</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	actors.<span style="color: #660066;">splice</span><span style="color: #009900;">&#40;</span>actors.<span style="color: #660066;">indexOf</span><span style="color: #009900;">&#40;</span>actor<span style="color: #009900;">&#41;</span><span style="color: #339933;">,</span><span style="color: #CC0000;">1</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #009900;">&#125;</span></pre></td></tr></table></div>





There you have it! There's a lot more powerful things you can do with an understanding of actors such as hit counts, box2d collision filter changes, out of bounds detection, etc. I hope to cover more in later tutorials.
<br/><br/>
<a href="http://www.luxanimals.com/tutorials/birds" target="_blank">View demo</a> - <a href="http://www.luxanimals.com/tutorials/birds/easel_b2d_source.zip">Download source</a>
<br/><br/>
If anyone has any optimization suggestions or other was to accomplish this please don't hesitate to leave comments. <br/><br/>
		]]>
	</description>
	<image>
		<link>http://www.luxanimals.com/blog/article/combining_easel_box2d</link>
		<url>http://www.luxanimals.com/assets/images/ee/blog/Featured_04.jpg</url>
		<title>Combining Easel.js and Box2d in Canvas</title>
	</image>
      <dc:subject>Labs, Javascript, Tutorials,</dc:subject>
      <dc:date>2012-03-28T15:19:37+00:00</dc:date>
    </item>

    <item>
      <title>Tallyho, Lux Ahoy!</title>
      <link>http://www.luxanimals.com/blog/article/tallyho_luxahoy1</link>
      <description>
		<![CDATA[<a href="http://www.luxanimals.com/blog/article/tallyho_luxahoy1" target="_blank">
		<img src="http://www.luxanimals.com/assets/images/ee/blog/Featured_04.jpg" alt="Tallyho, Lux Ahoy!"></img></a><br/>
			Ahoy, scurvy HTML5 travelers! We're testing the waters of the possible with our new deliciously animated pirate game.  <a href="http://luxahoy.com" target="_blank">Click here </a>to try out the beta. Careful, this has been known to cause distraction at work.<br/><br/>
		]]>
	</description>
	<image>
		<link>http://www.luxanimals.com/blog/article/tallyho_luxahoy1</link>
		<url>http://www.luxanimals.com/assets/images/ee/blog/Featured_04.jpg</url>
		<title>Tallyho, Lux Ahoy!</title>
	</image>
      <dc:subject>News,</dc:subject>
      <dc:date>2012-03-28T14:26:34+00:00</dc:date>
    </item>

    <item>
      <title>American Adventure Game</title>
      <link>http://www.luxanimals.com/blog/article/lunchables_cross_country_game</link>
      <description>
		<![CDATA[<a href="http://www.luxanimals.com/blog/article/lunchables_cross_country_game" target="_blank">
		<img src="http://www.luxanimals.com/assets/images/ee/blog/blog_lunchables_game.jpg" alt="American Adventure Game"></img></a><br/>
			Come play the <a href="http://www.luxanimals.com/clients/razorfish/lunchables/Lunchables_Portfolio/index.html" target = "_blank">Cross Country game</a> we built for Lunchables. It will bring out the kid in you.<br/><br/>
		]]>
	</description>
	<image>
		<link>http://www.luxanimals.com/blog/article/lunchables_cross_country_game</link>
		<url>http://www.luxanimals.com/assets/images/ee/blog/blog_lunchables_game.jpg</url>
		<title>American Adventure Game</title>
	</image>
      <dc:subject>News, Projects,</dc:subject>
      <dc:date>2012-01-09T18:09:47+00:00</dc:date>
    </item>

    <item>
      <title>Google Chromebook Banners</title>
      <link>http://www.luxanimals.com/blog/article/google_chromebook_banner_campaign</link>
      <description>
		<![CDATA[<a href="http://www.luxanimals.com/blog/article/google_chromebook_banner_campaign" target="_blank">
		<img src="http://www.luxanimals.com/assets/images/ee/blog/Blog-summary.jpg" alt="Google Chromebook Banners"></img></a><br/>
			Luxurious Animals partnered with BBH to create a large campaign featuring Google's Chromebook. First, Lux had a video shoot on our premises in which we worked together with various hand actors.  The actor was leaning backwards and strapped into a gurney so that we could show the hands without the rest of the body in the shot. Lighting, scale, and authenticity were of highest importance. After the shoot, the Animals immediately fell to on the footage to disseminate, key, roto and export the key components of each shot. We then used our Lux magic to translate the motion for web file sizes. We created a total of 10 banner concepts across several different sizes and versions for a total of over 100 units, making this our largest campaign to date. <a href="http://www.luxanimals.com/clients/bbh/google/portfolio/index.html" target="_blank">Check out just a few here. </a><br/><br/>
		]]>
	</description>
	<image>
		<link>http://www.luxanimals.com/blog/article/google_chromebook_banner_campaign</link>
		<url>http://www.luxanimals.com/assets/images/ee/blog/Blog-summary.jpg</url>
		<title>Google Chromebook Banners</title>
	</image>
      <dc:subject>News, Projects, Creative, Design, Development, Interactive, Video,</dc:subject>
      <dc:date>2011-12-12T21:03:42+00:00</dc:date>
    </item>

    <item>
      <title>31 days of Wintertainment</title>
      <link>http://www.luxanimals.com/blog/article/31_days_of_wintertainment</link>
      <description>
		<![CDATA[<a href="http://www.luxanimals.com/blog/article/31_days_of_wintertainment" target="_blank">
		<img src="http://www.luxanimals.com/assets/images/ee/blog/wintertainment3.png" alt="31 days of Wintertainment"></img></a><br/>
			Luxurious Animals partnered with The Martin Agency to create Xfinity’s 31 Days of Wintertainment Facebook app.  Check the calendar every day through the month of December for a special holiday treat.  Xfinity is giving away 1,000 Fandango tickets and a TV.  Plus you will discover classic seasonal TV shows and movies – join in on the fun!<br/><br/>
		]]>
	</description>
	<image>
		<link>http://www.luxanimals.com/blog/article/31_days_of_wintertainment</link>
		<url>http://www.luxanimals.com/assets/images/ee/blog/wintertainment3.png</url>
		<title>31 days of Wintertainment</title>
	</image>
      <dc:subject>News, Design, Development, Interactive, Javascript,</dc:subject>
      <dc:date>2011-12-03T00:03:36+00:00</dc:date>
    </item>

    <item>
      <title>99 Bottles on Your Facebook Wall</title>
      <link>http://www.luxanimals.com/blog/article/99_bottles_on_your_facebook_wall</link>
      <description>
		<![CDATA[<a href="http://www.luxanimals.com/blog/article/99_bottles_on_your_facebook_wall" target="_blank">
		<img src="http://www.luxanimals.com/assets/images/ee/blog/blog_summary_bottles.jpg" alt="99 Bottles on Your Facebook Wall"></img></a><br/>
			Finally, there is a really good reason to have all those extra friends on Facebook. Luxurious Animals launches Newcastle's <a href="http://luxan.im/ncb/">99 Bottles</a> Facebook App for 99 of their biggest fans a chance to win a BeerTender. For those unfamiliar with a BeerTender, it is the perfect beer-tap appliance aka "mini-keg" for your home. Glorious, isn’t it? The app works just like the song. Once you start, you’re given 99 bottles on your wall. Well actually, 98 because the generous folks at Newcastle let you take the first bottle down. No, bottle opener required.<br/><br/>
		]]>
	</description>
	<image>
		<link>http://www.luxanimals.com/blog/article/99_bottles_on_your_facebook_wall</link>
		<url>http://www.luxanimals.com/assets/images/ee/blog/blog_summary_bottles.jpg</url>
		<title>99 Bottles on Your Facebook Wall</title>
	</image>
      <dc:subject>News, Development, Interactive, Javascript,</dc:subject>
      <dc:date>2011-11-09T18:05:56+00:00</dc:date>
    </item>

    
    </channel>
</rss>
