<?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>Sprites &#38; Spells: the PixieEngine Blog</title>
	<atom:link href="http://blog.pixieengine.com/feed/" rel="self" type="application/rss+xml" />
	<link>http://blog.pixieengine.com</link>
	<description>the PixieEngine blog</description>
	<lastBuildDate>Fri, 03 Feb 2012 21:28:21 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.3.1</generator>
		<item>
		<title>How to Embed PixieEngine Projects on Other Web Pages</title>
		<link>http://blog.pixieengine.com/2012/02/how-to-embed-pixieengine-projects-on-other-web-pages/</link>
		<comments>http://blog.pixieengine.com/2012/02/how-to-embed-pixieengine-projects-on-other-web-pages/#comments</comments>
		<pubDate>Fri, 03 Feb 2012 21:28:21 +0000</pubDate>
		<dc:creator>Pixie</dc:creator>
				<category><![CDATA[Uncategorized]]></category>

		<guid isPermaLink="false">http://blog.pixieengine.com/?p=237</guid>
		<description><![CDATA[It&#8217;s possible to embed an iframe version of your game on any webpage with the following embed code: &#60;iframe src=&#34;http://pixie.strd6.com/projects/721/widget&#34; width=&#34;480&#34; height=&#34;320&#34; style=&#34;border: 0;&#34;&#62;&#60;/iframe&#62; Be sure to change the project id to your project ID and make sure the width and height are set correctly. Also you&#8217;ll need to hit &#8220;Publish&#8221; anytime you want to <a href="http://blog.pixieengine.com/2012/02/how-to-embed-pixieengine-projects-on-other-web-pages/"> read more <span class="meta-nav">&#187;</span></a>]]></description>
			<content:encoded><![CDATA[<p>It&#8217;s possible to embed an iframe version of your game on any webpage with the following embed code:</p>

<div class="wp_syntax"><div class="code"><pre class="html" style="font-family:monospace;">&lt;iframe src=&quot;http://pixie.strd6.com/projects/721/widget&quot; width=&quot;480&quot; height=&quot;320&quot; style=&quot;border: 0;&quot;&gt;&lt;/iframe&gt;</pre></div></div>

<p>Be sure to change the project id to your project ID and make sure the width and height are set correctly. Also you&#8217;ll need to hit &#8220;Publish&#8221; anytime you want to update code that is displayed in the embedded version.</p>
<p>Another alternative would be to click &#8220;Export&#8221; and then &#8220;Download .zip&#8221; then create an <code>index.html</code> file that will look something like this:</p>

<div class="wp_syntax"><div class="code"><pre class="html" style="font-family:monospace;">    &lt;html&gt;
    &lt;head&gt;
      &lt;script src=&quot;jquery-1.7.1.min.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;
    &lt;/head&gt;
    &lt;body class=&quot;contents_centered&quot;&gt;
      &lt;canvas width=&quot;960&quot; height=&quot;640&quot;&gt;&lt;/canvas&gt;
      &lt;script&gt;BASE_URL = &quot;./&quot;; MTIME = &quot;1328143950&quot;;&lt;/script&gt;
      &lt;script src=&quot;your_project_name.js&quot;&gt;&lt;/script&gt;
    &lt;/body&gt;
    &lt;/html&gt;</pre></div></div>

<p>You may need to include your own copy of jQuery and add some css to your liking.</p>
<p>I&#8217;ll try and get in a feature to auto build an <code>index.html</code> that will be created when downloading a zip.</p>
]]></content:encoded>
			<wfw:commentRss>http://blog.pixieengine.com/2012/02/how-to-embed-pixieengine-projects-on-other-web-pages/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>This week in Pixie: Sep 06 2011</title>
		<link>http://blog.pixieengine.com/2011/09/this-week-in-pixie-sep-06-2011/</link>
		<comments>http://blog.pixieengine.com/2011/09/this-week-in-pixie-sep-06-2011/#comments</comments>
		<pubDate>Tue, 06 Sep 2011 17:50:11 +0000</pubDate>
		<dc:creator>Pixie</dc:creator>
				<category><![CDATA[Newsletter]]></category>
		<category><![CDATA[Update]]></category>

		<guid isPermaLink="false">http://blog.pixieengine.com/?p=230</guid>
		<description><![CDATA[We’ve been really focusing on making Pixie as easy to use as possible. In order for all of you to be able to create the best games you can we know it is necessary to have excellent reference material about the available libraries. Our documentation has been completely revamped and includes tons of code samples <a href="http://blog.pixieengine.com/2011/09/this-week-in-pixie-sep-06-2011/"> read more <span class="meta-nav">&#187;</span></a>]]></description>
			<content:encoded><![CDATA[<p>We’ve been really focusing on making Pixie as easy to use as possible. In order for all of you to be able to create the best games you can we know it is necessary to have excellent reference material about the available libraries.</p>
<p><a href="http://pixieengine.com/projects/34/ide" target="_blank"><img class="alignright" title="documentation" src="http://pixieengine.com/assets/newsletters/documentation.png" alt="documentation" width="198" height="176" /></a>Our documentation has been completely revamped and includes tons of code samples to get you up and running as quickly as possible. If you just want a page to look at as a tab in your browser when you have questions, you can open up <a href="http://pixieengine.com/production/projects/34/docs/index.html" target="_blank">Documentation</a> or navigate to them through the documentation link in the <a href="https://docs.google.com/document/d/1N_VbAu7hPmOQIL2XjLr0gTVfLL3W2qPWS3o1id4d-xI/edit?hl=en_US" target="_blank">Wiki</a>. If you are too immersed in the IDE and can’t bear to leave, then you can click on the Documentation book to open them in a new tab.</p>
<p>Documentation is an ongoing task and we are working to improve it daily. If you have questions the documentation can&#8217;t answer be sure to ask in the Forum or in the chat and we&#8217;ll help you out, then make sure that the answers work their way back to the documentation.</p>
<p>Sadly, the Kongregate export walkthrough is on hiatus. It turns out that they rejected our game because &#8220;iframe games are generally reserved for virtual-goods enabled MMOs&#8221;. We&#8217;re always looking for new places to export games to, that way PixieEngine developers will have the most options available for distribution. The HTML5 world moves fast, new channels are always opening up.</p>
<p><a href="http://pixieengine.com/projects/721/fullscreen" target="_blank"><img class="alignleft" src="http://images.pixie.strd6.com/projects/721/thumb.png?1315258504" alt="SurfN-2-Sur5 (Extended Edition)" width="96" height="96" /></a><a href="http://pixieengine.com/projects/721/fullscreen" target="_blank"><img class="alignright" title="debugging" src="http://pixieengine.com/assets/newsletters/surf_debug.png" alt="debugging" width="243" height="183" /></a>The featured tutorial we have this week is the annotated source of Daniel X. Moore’s Ludum Dare entry from last week, <a href="http://pixieengine.com/projects/721/ide" target="_blank">SurfN-2-Sur5 (Extended Edition)</a>. The code is very clear and filled with comments explaining each aspect of the game. It includes some important gems, such as setting up a camera to follow your player, debugging your collision detection, and programmatically generating level content.</p>
<p>Thanks for reading, and keep making those awesome games!</p>
]]></content:encoded>
			<wfw:commentRss>http://blog.pixieengine.com/2011/09/this-week-in-pixie-sep-06-2011/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>This week in Pixie: Aug 28 2011</title>
		<link>http://blog.pixieengine.com/2011/08/this-week-in-pixie-aug-28-2011/</link>
		<comments>http://blog.pixieengine.com/2011/08/this-week-in-pixie-aug-28-2011/#comments</comments>
		<pubDate>Mon, 29 Aug 2011 18:09:09 +0000</pubDate>
		<dc:creator>Pixie</dc:creator>
				<category><![CDATA[Newsletter]]></category>
		<category><![CDATA[Update]]></category>

		<guid isPermaLink="false">http://blog.pixieengine.com/?p=223</guid>
		<description><![CDATA[This is a big week for Pixie. To start off, we&#8217;ve redesigned your home page to help you find everything at a glance. We also reorganized what people are saying about your sprites and projects so you can easily pick out the praise. Secondly, we have cross platform support for making games with joysticks! See <a href="http://blog.pixieengine.com/2011/08/this-week-in-pixie-aug-28-2011/"> read more <span class="meta-nav">&#187;</span></a>]]></description>
			<content:encoded><![CDATA[<p>This is a big week for Pixie. To start off, we&#8217;ve redesigned your home page to help you find everything at a glance. We also reorganized what people are saying about your sprites and projects so you can easily pick out the praise.</p>
<p>Secondly, we have cross platform support for making games with joysticks! See it here: <a href="https://github.com/STRd6/Boomstick#readme">Boomstick</a>.</p>
<p><a href="http://pixieengine.com/projects/166/fullscreen"><img class="alignleft" title="Red Ice" src="http://images.pixie.strd6.com/projects/166/thumb.png?1308526637" alt="Red Ice" width="96" height="96" /></a><a href="http://pixieengine.com/projects/330/fullscreen"><img class="alignright" title="WinniPaint" src="http://images.pixie.strd6.com/projects/330/thumb.png?1311046557" alt="WinniPaint" width="96" height="96" /></a>There are already a few games on Pixie taking advantage of this great breakthrough. Play <a href="http://pixieengine.com/projects/166/fullscreen">Red Ice</a>, a hockey brawler, with up to five friends or collaboratively paint with your peers in <a href="http://pixieengine.com/projects/330/fullscreen">WinniPaint</a>.</p>
<p></p>
<p>We have two new forum members to mention this week. Check out the retro console art stylings of <a href="http://pixieengine.com/people/1792-hawthorn"><img src="http://images.pixie.strd6.com/avatars/1792/thumb.png?1314389629" alt="Hawthorn " /></a><a href="http://pixieengine.com/people/1792-hawthorn">Hawthorn </a>and play <a href="http://pixieengine.com/people/211-nickretallack">nickretallack</a>&#8216;s <a href="http://pixieengine.com/projects/658/fullscreen">Factor Blaster 2</a>, a game where you destroy your enemies by blasting them with their prime factorization before they go mersenne-saiyan.</p>
<p>Finally, we’ve added more support for exporting your Pixie games to great platforms. We’ve had a Google Chrome Webstore export for a while, but now we have the ability to publish to Kongregate, so you can publish your game all over to get lots of plays and good feedback.</p>
<p>Stay tuned next week for a full Kongregate export walkthrough.</p>
]]></content:encoded>
			<wfw:commentRss>http://blog.pixieengine.com/2011/08/this-week-in-pixie-aug-28-2011/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>This week in Pixie: Aug 15 2011</title>
		<link>http://blog.pixieengine.com/2011/08/this-week-in-pixie-aug-15-2011/</link>
		<comments>http://blog.pixieengine.com/2011/08/this-week-in-pixie-aug-15-2011/#comments</comments>
		<pubDate>Wed, 17 Aug 2011 06:50:31 +0000</pubDate>
		<dc:creator>Daniel</dc:creator>
				<category><![CDATA[Newsletter]]></category>
		<category><![CDATA[Update]]></category>

		<guid isPermaLink="false">http://blog.pixieengine.com/?p=212</guid>
		<description><![CDATA[Hey guys. It&#8217;s been a long time and we&#8217;ve been keeping busy here making Pixie as great as we can. We&#8217;ve come a long way since our last newsletter. Our most exciting new feature is an integrated forum. Pixie is becoming a thriving community so come on by, introduce yourself, ask questions, and make new friends. <a href="http://blog.pixieengine.com/2011/08/this-week-in-pixie-aug-15-2011/"> read more <span class="meta-nav">&#187;</span></a>]]></description>
			<content:encoded><![CDATA[<p>Hey guys. It&#8217;s been a long time and we&#8217;ve been keeping busy here making Pixie as great as we can. We&#8217;ve come a long way since our last newsletter.</p>
<p>Our most exciting new feature is an <a href="http://pixieengine.com/community">integrated forum</a>. Pixie is becoming a thriving community so come on by, introduce yourself, ask questions, and make new friends. A big shout out goes to our newest active forum members: <a href="http://pixieengine.com/people/1575-toxicgamergirl"><img src="http://images.pixie.strd6.com/avatars/1575/thumb.png?1312940786" alt="ToxicGamerGirl" /></a> <a href="http://pixieengine.com/people/1575-toxicgamergirl">ToxicGamerGirl</a> , <a href="http://pixieengine.com/people/238-spriter2000"><img src="http://images.pixie.strd6.com/avatars/238/thumb.png?1312480642" alt="Spriter2000" /></a> <a href="http://pixieengine.com/people/238-spriter2000">Spriter2000</a> , <a href="http://pixieengine.com/people/182-dfectuoso"><img src="http://images.pixie.strd6.com/avatars/182/thumb.png?1312424915" alt="DFectuoso" /></a> <a href="http://pixieengine.com/people/182-dfectuoso">DFectuoso</a> , <a href="http://pixieengine.com/people/1632-pixelzephyr"><img src="http://images.pixie.strd6.com/avatars/1632/thumb.png?1313313714" alt="PixelZephyr" /></a><a href="http://pixieengine.com/people/1632-pixelzephyr">PixelZephyr</a> , and <a href="http://pixieengine.com/people/1649-mr-numnums"><img src="http://images.pixie.strd6.com/avatars/1649/thumb.png?1313429604" alt="Mr Numnums" /></a> <a href="http://pixieengine.com/people/1649-mr-numnums">Mr Numnums</a>.</p>
<p><a href="http://pixieengine.com/projects/106/fullscreen"><img class="alignleft" src="http://images.pixie.strd6.com/projects/106/thumb.png?1305510150" alt="It's Dangerous To Go Alone" width="96" height="96" /></a>If you&#8217;re looking for a fun and simple adventure game, check out <a href="http://pixieengine.com/projects/106/fullscreen">It&#8217;s Dangerous To Go Alone</a>. In this rip-roaring adventure you help an elf boy and kitten solve puzzles to find their way home.</p>
<p><a href="http://pixieengine.com/projects/123/ide"><img class="alignright" src="http://images.pixie.strd6.com/projects/123/thumb.png?1308526863" alt="Pixteroids" width="96" height="96" /></a>There have been big improvements to the game design tools. Take a look at our full demo about how to make an Asteroids type game: <a href="http://pixieengine.com/projects/123/ide">Pixteroids</a>. You&#8217;ll learn how to create a spaceship that moves and shoots, as well as how to create and destroy asteroids.</p>
<p>That&#8217;s all we&#8217;ve got for this week, but stay tuned and we&#8217;ll be back next week with more hot new features, games and tutorials.</p>
]]></content:encoded>
			<wfw:commentRss>http://blog.pixieengine.com/2011/08/this-week-in-pixie-aug-15-2011/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Optimizing Red Ice</title>
		<link>http://blog.pixieengine.com/2011/07/optimizing-red-ice/</link>
		<comments>http://blog.pixieengine.com/2011/07/optimizing-red-ice/#comments</comments>
		<pubDate>Thu, 14 Jul 2011 19:23:24 +0000</pubDate>
		<dc:creator>Daniel</dc:creator>
				<category><![CDATA[Inner Workings]]></category>

		<guid isPermaLink="false">http://blog.pixieengine.com/?p=207</guid>
		<description><![CDATA[I was able to go a long way without optimizing the Matrix and Point classes. Since most of my games and prototypes were relatively simple or made limited use of points and matrices it didn&#8217;t matter too much, that is until Red Ice, which was using 5 physics steps per frame and computing tons of <a href="http://blog.pixieengine.com/2011/07/optimizing-red-ice/"> read more <span class="meta-nav">&#187;</span></a>]]></description>
			<content:encoded><![CDATA[<p>I was able to go a long way without optimizing the Matrix and Point classes. Since most of my games and prototypes were relatively simple or made limited use of points and matrices it didn&#8217;t matter too much, that is until <a href="http://pixieengine.com/projects/166/fullscreen">Red Ice</a>, which was using 5 physics steps per frame and computing tons of vectors and collision responses.</p>
<p><strong>Optimizing the Drawing</strong></p>
<p>The problems became evident in the profiler. First was the classic of &#8220;draw less&#8221;. Because <a href="http://pixieengine.com/projects/166/fullscreen">Red Ice</a> is running at 1024&#215;768 even clearing the entire canvas can get costly, not to mention copying over the ice and blood canvases to the main one. In order to break through this bottleneck I separated out the rink/background and blood canvases into layers that stay below the main canvas. Since the rink never redraws and since the blood only adds and erases strokes in a semi-permanent way, this saves copying a ton of image data to the main canvas, which in turn saves a ton of time. I still clear the entire main canvas every frame, but implementing selective clearing is a big project and would have limited performance gains (we still need to clear big chunks of the canvas most updates with all the stuff moving around).</p>
<p><strong>Optimizing Joystick Input</strong></p>
<p>Now that we are drawing less the next big bottleneck came from <a href="https://github.com/STRd6/Boomstick">joystick input</a>. This sounds pretty ridiculous for anyone coming from a non-web background, but considering that using 6 XBox 360 controllers as input into an HTML5 game was pretty much unheard of, it&#8217;s not inconceivable that the first time it has been done might not be the most optimal. The core of the issue was that every single piece of data that is transferred from the native extension into JavaScript slows things down. Even something as simple as an array of true/false values for buttons. Even an array of six integers for six axes. Even an object with two properties <code>buttons</code> and <code>axes</code>. Each single piece slows things down. </p>
<p>The first performance improvement I made was to use a single integer for all the buttons, holding each one in a bit. This gave an immediate 25% speedup, confirming that going from an array of 10 booleans to 1 integer (reducing the number of items passed across) speeds things up. Next, since I wasn&#8217;t using the additional 4 axes I decided to only pass 2 axes as a temporary fix. This also gave a decent speedup, especially at the 6 controller mark, because each additional controller was additional data. </p>
<p>At this point I was stumped for a while, but then I realized that if I could pass a single JSON string across that would only be a single item of data, no matter how many joysticks or axes were active. I assumed that browsers were pretty good at parsing JSON, since that is most of what the JavaScript interpreter does on all web pages, and after a day of struggling <a href="https://github.com/STRd6/Boomstick/commit/e63f67f2377bd9fdd9253612f12780637173c68f#L0R171">getting C++ to spit out JSON</a> it was legit and joystick input was no longer an issue.</p>
<p><strong>Optimizing the Points</strong></p>
<p>This finally exposed the remaining problems of the <code>Point</code> class and garbage collection being the next bottle neck. Due to all the physics updates and point computations it was creating tons of new Point objects and each additional point operation created more because the operations were non-destructive. The good news is that I have a full test suite for the Point class, so that I can refactor and optimize without any fear. This was quite valuable when testing crazy new ideas to see if they would improve performance without breaking everything. I figured that since I was creating so many points that if I added optional destructive methods, and used them in the right places, that could reduce the new point creation and also GC load quite a bit.</p>
<p>I wish that JavaScript or CoffeeScript would allow for a shortcut to use <code>!</code> as a method suffix like in Ruby, because it is a known convention for destructive methods. The closest I could come would be <code>point["add!"](otherPoint)</code>, which was too brutal on the mind and eyes to make it into common usage. If CoffeeScript could auto-compile <code>point.add!(otherPoint)</code> into the index-operator notation like it does with <code>a.class</code> and <code>a.new</code> then it would be okay, but until then the <code>!</code> suffix is out.</p>
<p>JavaScript does allow for the <code>$</code> symbol in variable and method names so, by necessity, I have chosen to use <code>$</code> as the glyph of destruction, which has its own poetry in a way. <code>point.add$(otherPoint)</code> not bad, but not my first choice.</p>
<p>Now, armed with new destructive methods, I set about looking for places in the physics and collisions where I could slip them in to prevent the creation of unwanted/unused points. Then a funny thing happened, the majority of the places I looked needed the operators to be non-destructive, and it was difficult to see exactly where a destructive method could be added without unwanted side-effects except in a few simple situations such as <code>point = point.add$(delta) => point.add$(delta)</code>.</p>
<p>While I was cleaning up the Point code I was thinking about <a href="https://github.com/em/matrix.js/commit/6ca4eaa8049c1d1581f87b8b23339dccc7043c33">a conversation I had on GitHub</a> about the performance benefits from using prototype inheritance rather than object augmentation. This sounded like a good idea in this case, as <code>Point</code>s are primitive objects with their <code>x</code> and <code>y</code> properties on the outside and all of their methods using <code>this</code> everywhere. The one sticking point was that I could not abide having to stick <code>new</code> in front of the point constructor in ten thousand places in my existing and future code. If only there was some way to get the advantages of prototype performance, without pushing the syntactic hassles onto the people using the class.</p>
<p>The good news is that there is a way to set an objects prototype. All you need to do is to set the <code>__proto__</code> property. So now my <code>Point</code> constructor looks like this:</p>

<div class="wp_syntax"><div class="code"><pre class="coffeescript" style="font-family:monospace;">  Point = (x, y) -&gt;
    __proto__: Point::
    x: x || 0
    y: y || 0</pre></div></div>

<p>You know you&#8217;ve been programming in the browser too long when <code>__proto__: Point::</code> becomes a thing of beauty.</p>
<p>All the instance methods are defined below as follows:</p>

<div class="wp_syntax"><div class="code"><pre class="coffeescript" style="font-family:monospace;">  Point:: =
    copy: -&gt;
      Point(this.x, this.y)
&nbsp;
    add: (first, second) -&gt;
      this.copy().add$(first, second)
&nbsp;
    add$: (first, second) -&gt;
      if second?
        this.x += first
        this.y += second
      else
        this.x += first.x
        this.y += first.y
&nbsp;
      this
&nbsp;
    ...</pre></div></div>

<p>This gives all the performance benefits of using prototypes rather than making an anonymous function for every method as well as the additional side benefit that developers can extend <code>Point.prototype</code> with additional methods for use in their own projects if they want to. Another advantage is that the syntax remains unchanged, no need to use the <code>new</code> operator, and <a href="https://github.com/STRd6/corelib/blob/master/test/point.coffee">all the tests</a> still pass.</p>
<p>The best news is that this provides a 90% reduction in time that the code spends constructing and garbage collecting points, <a href="https://github.com/STRd6/corelib/commit/4373eec6ed60621f68dedb049039fa9239c635bb">and was simple enough</a> to pull into the <code>Matrix</code> class with a two line change as well. For primitive objects like Points, Matrixes, Arrays, Numbers, and the like I wholeheartedly recommend this approach. For complex objects that require mixins, private variables, and instance variables I don&#8217;t think it will be possible because each object actually does need it&#8217;s own functions that are in the correct closure scope.</p>
<p>Another interesting thing is that this last optimization voided the assumption of my previous one about destructive operators. I assumed that because creating points was expensive it would be worthwhile to go to extra lengths to prevent their creation unnecessarily. Using the prototypesque construction the cost of point creation and garbage collection was reduced so much that it&#8217;s not worth it to try and squeeze out the now slight performance gains that would produce except in the hottest inner loops. I&#8217;ll still keep the destructive methods around for situations where points actually want to be updated in place, like <code>p = p.norm(speed) => p.norm$(speed)</code>, but I won&#8217;t be quick to begin trying to &#8220;optimize&#8221; by defaulting to using destructive methods and then spend hours debugging issues that come up because two objects are actually sharing the same point reference. </p>
<p>Points are cheap now, use them freely!</p>
]]></content:encoded>
			<wfw:commentRss>http://blog.pixieengine.com/2011/07/optimizing-red-ice/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Asteroids</title>
		<link>http://blog.pixieengine.com/2011/06/asteroids/</link>
		<comments>http://blog.pixieengine.com/2011/06/asteroids/#comments</comments>
		<pubDate>Sun, 12 Jun 2011 00:20:20 +0000</pubDate>
		<dc:creator>Matt</dc:creator>
				<category><![CDATA[Tutorial]]></category>
		<category><![CDATA[Asteroids]]></category>

		<guid isPermaLink="false">http://blog.pixieengine.com/?p=98</guid>
		<description><![CDATA[Greetings friends, It&#8217;s been a while but we&#8217;re back with a brand new tutorial. Today we&#8217;re going to see how to make the old classic Asteroids in Pixie. I&#8217;m not going to copy/paste all the source, so you should follow along here. I&#8217;ll start by discussing some of the nice things I did with the <a href="http://blog.pixieengine.com/2011/06/asteroids/"> read more <span class="meta-nav">&#187;</span></a>]]></description>
			<content:encoded><![CDATA[<p>Greetings friends,</p>
<p>It&#8217;s been a while but we&#8217;re back with a brand new tutorial. Today we&#8217;re going to see how to make the old classic Asteroids in Pixie. I&#8217;m not going to copy/paste all the source, so you should follow along <a href="http://pixieengine.com/projects/123/ide">here</a>.</p>
<p>I&#8217;ll start by discussing some of the nice things I did with the game while refactoring the code base. The first thing is modules. They are easy to make in Pixie. Use them.</p>
<p>In the game Asteroids, all the objects wrap around the screen edges. As a result, I extracted a wrappable module to define this behavior.</p>

<div class="wp_syntax"><div class="code"><pre class="ruby" style="font-family:monospace;">Wrappable = <span style="color:#006600; font-weight:bold;">&#40;</span>I, <span style="color:#0000FF; font-weight:bold;">self</span><span style="color:#006600; font-weight:bold;">&#41;</span> <span style="color:#006600; font-weight:bold;">-&gt;</span>  
  <span style="color:#0000FF; font-weight:bold;">self</span>.<span style="color:#9900CC;">bind</span> <span style="color:#996600;">&quot;step&quot;</span>, <span style="color:#006600; font-weight:bold;">-&gt;</span>
    I.<span style="color:#9900CC;">x</span> = I.<span style="color:#9900CC;">x</span>.<span style="color:#9900CC;">mod</span><span style="color:#006600; font-weight:bold;">&#40;</span>App.<span style="color:#9900CC;">width</span><span style="color:#006600; font-weight:bold;">&#41;</span>
    I.<span style="color:#9900CC;">y</span> = I.<span style="color:#9900CC;">y</span>.<span style="color:#9900CC;">mod</span><span style="color:#006600; font-weight:bold;">&#40;</span>App.<span style="color:#9900CC;">height</span><span style="color:#006600; font-weight:bold;">&#41;</span></pre></div></div>

<p>The code is very readable and concise. On each step we set the position equal to the current value modded by the bounds of the game. </p>
<p>We also see that there is access to some metadata via the App object. </p>
<p>Now all we have to do to give this behavior to other classes is to have a key called includedModules with the value ["Wrappable"] or self.included(Wrappable) in the class definition.</p>
<p>Even though PixieEngine is highly modular, we also support more traditional inheritance patterns. In the game I noticed that many of my objects had similar properties so I extracted a base class, extending the default GameObject.</p>
<p>Take a look at <strong>src/base</strong> and you will see a few key/value pairs, a default hit method, and a list of included modules.</p>
<p>With this base class and our recent module in place, let&#8217;s take a look at how easy it is to describe a bullet. Open up <strong>src/bullet</strong> and admire how few lines there are. The only thing we really have to say is, &#8220;Hey game, your bullet stays on screen for 40 frames. Aside from that it&#8217;s just your standard Base object.&#8221; Admittedly, the name of the module &#8220;Durable&#8221; doesn&#8217;t quite capture the intent of it&#8217;s functionality but it makes it easy to declaratively specify behavior.</p>
<p>Okay, we&#8217;ve gone over 1/3 of the distinct objects in the game (ship, asteroids, <del datetime="2011-06-09T23:28:48+00:00">bullets</del>)</p>
<p>Let&#8217;s take a look at our hero, Ship. </p>
<p><strong>Methods</strong><br />
<em>shootPoints</em>: this specifies the points where our bullets will exit the ship. We are defining two points relative to the center of the ship object (the bullets will shoot from the wings). </p>
<p><em>shoot</em>: Notice the simplicity of the Sound API. We just tell the game &#8220;Play a sound. It&#8217;s called &#8216;pew&#8217;&#8221;. Then we generate one bullet per shootPoint, passing in the position of the ship and it&#8217;s rotation to orient the bullet properly.</p>
<p><em>hit (override)</em>: When hit by an asteroid, the ship will transition to an animation state called &#8220;explosion&#8221;. If you look at the last frame of the explode animation in <strong>animations/ship</strong> you will see that there is a tag &#8220;explode&#8221;. This means that the animation will trigger the explode event when it gets to that frame.</p>
<p><strong>Events</strong><br />
<em>explode</em>: We call self.destroy() to remove the ship object from the game, tell the computer to play the explode sound from <strong>sounds/explode</strong>, and finally turn on the flag saying that the game is over.</p>
<p><em>step</em>: This is the most important part of the ship class. Here we specify how the ship responds to player input. The first line illustrates a cool trick that D.X. Moore pointed out to me. It uses our number extension Number#approach to decrement the cooldown counter. Here we approach the number 0 by 1.</p>

<div class="wp_syntax"><div class="code"><pre class="ruby" style="font-family:monospace;"><span style="color:#006666;">5</span>.<span style="color:#9900CC;">approach</span><span style="color:#006600; font-weight:bold;">&#40;</span><span style="color:#006666;">0</span>, <span style="color:#006666;">1</span><span style="color:#006600; font-weight:bold;">&#41;</span> <span style="color:#006600; font-weight:bold;">-&gt;</span> <span style="color:#006666;">4</span></pre></div></div>

<p>We then check if the player just pressed spacebar. If yes, we shoot if the cooldown counter is 0. If the player is pressing left or right we update the rotationalVelocity appropriately. If the player is pressing up, we transition to the thrust state, set the acceleration, and play the thrust sound. If no keys are pressed we transition to the idle state and tell our velocity and acceleration to start approaching 0.</p>
<p>Two down (<del datetime="2011-06-10T05:49:32+00:00">ship</del>, asteroids, <del datetime="2011-06-10T05:49:32+00:00">bullets</del>)</p>
<p>Open up <strong>src/asteroid</strong>. This class looks a bit nasty but it&#8217;s only because the method bounceOff, which does some elastic collision math so that the asteroids will bounce off each other in a cool physics-y way. Check out the math <a href="http://en.wikipedia.org/wiki/Elastic_collision#Two-_and_three-dimensional">here</a> if you want to read about what is going on. Ignoring that big method, the rest of the class is simple. </p>
<p>When it initializes it chooses a random position and velocity for the asteroid if you haven&#8217;t specified one already. </p>
<p><strong>Methods</strong><br />
<em>split</em>: This method defines how the asteroid will splinter into smaller pieces when you destroy it. The large size generates two medium asteroids and the medium size generates 4 small asteroids. </p>
<p><em>hit (override)</em>: We override the hit method in order to transition the asteroid to it&#8217;s hit state (it turns red when hit by a bullet). When the asteroid is destroyed we increment a global kill counter, increase the player&#8217;s score, and then split the asteroid if it isn&#8217;t the small one.</p>
<p>Sweet. We have covered all the object types (<del datetime="2011-06-10T19:39:54+00:00">ship</del>, <del datetime="2011-06-10T19:39:54+00:00">asteroids</del>, <del datetime="2011-06-10T19:39:54+00:00">bullets</del>)</p>
<p>Now open up <strong>src/main</strong>. Note that we change the framerate to 60 with engine.setFramerate. </p>
<p><strong>Methods</strong><br />
Most of the methods here are helpers.</p>
<p><em>collides</em>: A simple wrapper on Collision.circle</p>
<p><em>addInstance</em>: A wrapper to help add instances of a class to the game</p>
<p><em>loadBG</em>: Loads a background in the game from a sprite.</p>
<p><em>resetState</em>: This clears out the game objects, sets the score to 0 and adds instances of the ship and two asteroids.</p>
<p><em>gameText</em>: Helps position the title screen and game over text.</p>
<p><strong>Events</strong><br />
<em>update</em>: Here we bind the collision logic. We check each of the different object types to see if they collide with each other and then call hit if they do. </p>
<p>At the bottom of main we set up instructions about the game controls with parent.gameControlData</p>

<div class="wp_syntax"><div class="code"><pre class="ruby" style="font-family:monospace;">parent.<span style="color:#9900CC;">gameControlData</span> =
  Thrust: <span style="color:#996600;">&quot;Up&quot;</span>
  Turn: <span style="color:#996600;">&quot;Left/Right&quot;</span>
  Fire: <span style="color:#996600;">&quot;Space&quot;</span></pre></div></div>

<p>Finally, we configure the background music.</p>

<div class="wp_syntax"><div class="code"><pre class="ruby" style="font-family:monospace;">musicSrc = <span style="color:#996600;">&quot;http://daysofthecondor.com/wp-content/uploads/2011/06/chip.mp3&quot;</span>
&nbsp;
bgMusic = $<span style="color:#006600; font-weight:bold;">&#40;</span><span style="color:#996600;">&quot;&lt;audio src='#{musicSrc}' loop='loop' /&gt;&quot;</span><span style="color:#006600; font-weight:bold;">&#41;</span>.<span style="color:#9900CC;">appendTo</span><span style="color:#006600; font-weight:bold;">&#40;</span><span style="color:#996600;">'body'</span><span style="color:#006600; font-weight:bold;">&#41;</span>.<span style="color:#9900CC;">get</span><span style="color:#006600; font-weight:bold;">&#40;</span><span style="color:#006666;">0</span><span style="color:#006600; font-weight:bold;">&#41;</span>
bgMusic.<span style="color:#9900CC;">volume</span> = <span style="color:#006666;">0.15</span>
bgMusic.<span style="color:#9900CC;">play</span><span style="color:#006600; font-weight:bold;">&#40;</span><span style="color:#006600; font-weight:bold;">&#41;</span></pre></div></div>

]]></content:encoded>
			<wfw:commentRss>http://blog.pixieengine.com/2011/06/asteroids/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
<enclosure url="http://daysofthecondor.com/wp-content/uploads/2011/06/chip.mp3" length="891424" type="audio/mpeg" />
		</item>
		<item>
		<title>The Legend of Danger Kitten (LD48 Post Mortem)</title>
		<link>http://blog.pixieengine.com/2011/05/the-legend-of-danger-kitten-ld48-post-mortem/</link>
		<comments>http://blog.pixieengine.com/2011/05/the-legend-of-danger-kitten-ld48-post-mortem/#comments</comments>
		<pubDate>Sat, 14 May 2011 02:10:35 +0000</pubDate>
		<dc:creator>Daniel</dc:creator>
				<category><![CDATA[Post Mortem]]></category>

		<guid isPermaLink="false">http://blog.pixieengine.com/?p=78</guid>
		<description><![CDATA[Crossposted on the Ludum Dare Compo blog In the Beginning Going into the competition I didn&#8217;t really have any direction. After hearing the theme and looking at the kitten meme and the Zelda text I figured I would start off with an elf kid going into a cave and receiving a kitten rather than a <a href="http://blog.pixieengine.com/2011/05/the-legend-of-danger-kitten-ld48-post-mortem/"> read more <span class="meta-nav">&#187;</span></a>]]></description>
			<content:encoded><![CDATA[<p><em><a href="http://www.ludumdare.com/compo/2011/05/13/the-legend-of-danger-kitten-post-mortem/">Crossposted on the Ludum Dare Compo blog</a></em></p>
<p><strong>In the Beginning</strong><br />
Going into the competition I didn&#8217;t really have any direction. After hearing the theme and looking at the kitten meme and the Zelda text I figured I would start off with an elf kid going into a cave and receiving a kitten rather than a weapon, but other that that I had no idea for gameplay or anything. I knew for tools I would use <a href="http://jashkenas.github.com/coffee-script/">CoffeeScript</a> and the <a href="http://http://pixieengine.com/">PixieEngine</a> (I have been creating PixieEngine for exactly these kinds of competitions and wanted to put it to the test). If you&#8217;re looking to try out a new development environment for easy publication to the web I recommend checking it out. It&#8217;s free! It&#8217;s still a bit rough around the edges but with your feedback we can make it better.</p>
<p><a href="http://pixieengine.com/projects/106/fullscreen"><img src="http://www.ludumdare.com/compo/wp-content/uploads/2011/05/Screenshot-51.png" alt="" width="480" height="320" class="alignnone size-full wp-image-53760" /></a></p>
<p>It was quick to get the initial level and cave in but I wasn&#8217;t sure what direction to take the game. I spent several hours on animating the sprites, drawing the kitten from reference of the meme. Art isn&#8217;t my strongest suit but spending time on it gave me time to think and I definitely could feel myself improving. After sleeping on the theme the first night I knew that I didn&#8217;t want to just have the cat act as a weapon, because that would be pretty plain and boring. I decided that it would be cool if you had to take the cat around to different dungeons and work together to solve puzzles. I had the idea to make the water impassible for the kitten around this time so that the player and kitten would need to work together to access different areas. I also spent some time getting the mew to sound right in SFXR.</p>
<p><a href="http://pixieengine.com/projects/106/fullscreen"><img src="http://www.ludumdare.com/compo/wp-content/uploads/2011/05/cat_lava.png" alt="" width="192" height="160" class="alignleft size-full wp-image-53942" /></a></p>
<p>I really wanted to focus on the emotional attachment to the kitten and to make it feel like you were helping each other. It is for this reason that the initial cave the kitten goes into narrows symbolizing a feeling of cramped/claustrophobic danger. This culminates when the kitten becomes trapped in a waterfall and the player is required to submit to entering the water and becoming helpless. Then when the kitten floats back out down the stream the player is given control of the elf character and must rescue the helpless kitten. The relevant psychology is that we develop good feelings towards those who we do favors for (similar to Portal&#8217;s Weighted Companion Cube). These locations, actions, and even the sound of the mew, were all designed towards the goal of creating an emotional bond.</p>
<p><a href="http://pixieengine.com/projects/106/fullscreen"><img src="http://www.ludumdare.com/compo/wp-content/uploads/2011/05/bomb_crack.png" alt="" width="192" height="160" class="alignright size-full wp-image-53945" /></a></p>
<p>The bombs were an ok addition, but didn&#8217;t have very much depth. It seemed like near the end of the game (especially at the ending) there was plenty of room to create a wide variety of levels and puzzles, but I had just solidified the core mechanic and core emotional experiences and the clock was still ticking down.</p>
<p>My brother was in town and late Saturday or early Sunday, in the course of viewing the game he came up with the idea for the ending. I spent several hours Sunday grossly copy/pasting and hacking the functionality in. This cost me a bit in terms of level design. An additional cost of adding screens was due to some excessive manual steps (like hand coding doors). In the end there were maybe 1.5 dungeons and 1.5 puzzles, but people really enjoyed the ending so I think it was a decent trade-off. As the level editor and game object tools improve it should become easier to add more levels with fewer manual steps.</p>
<p>All in all it went pretty well. I didn&#8217;t stay up too late or stress out much, but the time limitations were significant. Next time I should make a stronger effort to discover a fun core mechanic sooner to leave more time for level design. The risk of this is that I may lock down the mechanic too soon, before it is actually fun, but I think that&#8217;s the main conflict throughout game design.</p>
<p><strong>The Good</strong><br />
The pixel editor, level editor, and sound editor integration in PixieEngine really helped me get a playable prototype up quickly. I was able to get a guy on the screen and moving around in minutes.</p>
<p><a href="http://pixieengine.com/projects/106/ide"><img src="http://www.ludumdare.com/compo/wp-content/uploads/2011/05/tile_editor-550x251.png" alt="" width="550" height="251" class="alignnone size-large wp-image-53927" /></a></p>
<p>The API for many of the core components was simple to use. If I wanted to play a sound I would create it in the embedded SFXR, then call it by adding <code>Sound.play("mew")</code> at the appropriate place in the code. Similarly for loading sprites.</p>
<p>The engine Object Query Language was great for hacking together quick functionality <code>engine.find "Player"</code>, <code>engine.find "Item"</code>, <code>engine.find "Cat"</code> all came in handy.</p>
<p><a href="http://pixieengine.com/projects/106/ide"><img src="http://www.ludumdare.com/compo/wp-content/uploads/2011/05/src.png" alt="" width="640" height="400" class="alignnone size-full wp-image-53924" /></a></p>
<p>Experience with CoffeeScript and the PixieEngine system was also a big plus. I knew what the strengths and weaknesses of the system were and was familiar with the workarounds (like using git integration to copy files to get around the missing &#8220;Save As&#8221; feature).</p>
<p>Publishing to the web was immediate and 100% hassle free because the entire engine is online to begin with. I didn&#8217;t have to spend anytime thinking about packaging or distribution.</p>
<p>I actually got to make a serious attempt at sprite animation, and some of the two-frame walk cycles actually look decent. Also the things I was drawing basically looked like the things they were supposed to. Still room to improve immensely but so far a personal best.</p>
<p><strong>The Bad</strong><br />
As a home grown engine there were many parts that were still rough around the edges. The tilemaps and game engine had no built in concept of rooms, persistent entities, and transferring state from one room to another, so I had to just hack it in.</p>
<p>The file management was similarly rough: there was no &#8220;Save As&#8221; (though there is now because it was my #1 issue)</p>
<p>Our animation/model system isn&#8217;t as integrated as the sounds/images/tilemaps so I had to hack together my two-frame walk animations by hand.</p>
<p>Still don&#8217;t have an integrated music editor. I was able to do all the art and (most) sound effects from within the editor suite, but had no option for music. I really want to make some sort of online Mario Paint Composer style editor, but realize that it would be a pretty big project in its own right.</p>
<p>The lack of a shared &#8220;object toolbox&#8221; of all the classes of objects was a pretty big negative. This meant that for each screen I had to recreate the tiles by dragging them in, and manually setting their class and data properties. This especially sucked for doors where I needed to hand type the <code>destinationPosition</code>. The good news is that this is the next feature on our list and once it is fixed things are looking great!</p>
<p><strong>The Best</strong></p>
<p>Because I coded in <a href="http://pixieengine.com/projects/106/ide">PixieEngine</a>, everyone is free to view the source, fork the game, make alternate levels, and more. (Though the engine is not quite &#8220;easy to use&#8221;. Your feedback is greatly appreciated!).</p>
<p>Though I wasn&#8217;t able to get in all the levels and puzzles I had hoped for this was still a personal best LD for me. I have had a great experience this LD and am looking forward to the ones to come. Additionally, all the feedback was helpful and it was nice to see that people enjoyed the game. If you haven&#8217;t yet, please play through and let me know what you think!</p>
]]></content:encoded>
			<wfw:commentRss>http://blog.pixieengine.com/2011/05/the-legend-of-danger-kitten-ld48-post-mortem/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Hello Box2D</title>
		<link>http://blog.pixieengine.com/2011/04/hello-box2d/</link>
		<comments>http://blog.pixieengine.com/2011/04/hello-box2d/#comments</comments>
		<pubDate>Thu, 14 Apr 2011 06:03:52 +0000</pubDate>
		<dc:creator>Matt</dc:creator>
				<category><![CDATA[Tutorial]]></category>
		<category><![CDATA[Box2D]]></category>
		<category><![CDATA[Physics]]></category>

		<guid isPermaLink="false">http://blog.pixieengine.com/?p=45</guid>
		<description><![CDATA[Now that we&#8217;ve done the obligatory Hello World let&#8217;s make something more interesting. We&#8217;ve integrated Pixie with a JavaScript port of the excellent physics engine, Box2D. I&#8217;m going to show you how easy it is to leverage it in your Pixie games. As before, you need to initialize your game engine. Paste the following into <a href="http://blog.pixieengine.com/2011/04/hello-box2d/"> read more <span class="meta-nav">&#187;</span></a>]]></description>
			<content:encoded><![CDATA[<p>Now that we&#8217;ve done the obligatory <a href="http://blog.pixieengine.com/2011/04/hello-world/">Hello World</a> let&#8217;s make something more interesting.</p>
<p>We&#8217;ve integrated Pixie with a JavaScript port of the excellent physics engine, <a href="http://www.box2d.org">Box2D</a>. I&#8217;m going to show you how easy it is to leverage it in your Pixie games.</p>
<p>As before, you need to initialize your game engine. Paste the following into main.coffee</p>

<div class="wp_syntax"><div class="code"><pre class="ruby" style="font-family:monospace;">window.<span style="color:#9900CC;">engine</span> = Engine 
  backgroundColor: Color<span style="color:#006600; font-weight:bold;">&#40;</span><span style="color:#996600;">'sky blue'</span><span style="color:#006600; font-weight:bold;">&#41;</span>
  canvas: $<span style="color:#006600; font-weight:bold;">&#40;</span><span style="color:#996600;">'canvas'</span><span style="color:#006600; font-weight:bold;">&#41;</span>.<span style="color:#9900CC;">powerCanvas</span><span style="color:#006600; font-weight:bold;">&#40;</span><span style="color:#006600; font-weight:bold;">&#41;</span>
  includedModules: <span style="color:#006600; font-weight:bold;">&#91;</span><span style="color:#996600;">'Box2D'</span><span style="color:#006600; font-weight:bold;">&#93;</span>
  PHYSICS_DEBUG_DRAW: <span style="color:#0000FF; font-weight:bold;">false</span></pre></div></div>

<p>The line to pay attention to is <code>includedModules: ['Box2D']</code>. This tells the engine that you want to enable Box2D physics. We make our game libraries as modular as possible so you aren&#8217;t constrained when you want to build that Frankensteinian aberration of a game.</p>
<p>Next, add the following</p>

<div class="wp_syntax"><div class="code"><pre class="ruby" style="font-family:monospace;">obj = engine.<span style="color:#9900CC;">add</span>
  color: Color<span style="color:#006600; font-weight:bold;">&#40;</span><span style="color:#996600;">'pink'</span><span style="color:#006600; font-weight:bold;">&#41;</span>
  dynamic: <span style="color:#0000FF; font-weight:bold;">true</span>
  includedModules: <span style="color:#006600; font-weight:bold;">&#91;</span><span style="color:#996600;">'Physical'</span><span style="color:#006600; font-weight:bold;">&#93;</span>
  friction: <span style="color:#006666;">0.1</span>
  width: <span style="color:#006666;">50</span>
  height: <span style="color:#006666;">50</span>
  x: <span style="color:#006666;">50</span>
  y: <span style="color:#006666;">50</span></pre></div></div>

<p>As with the engine initialization, you need <code>includedModules: ['Physical']</code> so this object behaves according to the laws of Box2D physics. There are a few more important properties here. <code>dynamic: true</code> tells Box2D that the object is a dynamic body (one that moves), rather than static body. Lastly, <code>friction: 0.1</code> assigns the object a coefficient of friction.</p>
<p>Next we want to make walls that our pink box can run into.</p>

<div class="wp_syntax"><div class="code"><pre class="ruby" style="font-family:monospace;"><span style="color:#006666;">2</span>.<span style="color:#9900CC;">times</span> <span style="color:#006600; font-weight:bold;">&#40;</span>n<span style="color:#006600; font-weight:bold;">&#41;</span> <span style="color:#006600; font-weight:bold;">-&gt;</span> 
  engine.<span style="color:#9900CC;">add</span>
    color: Color<span style="color:#006600; font-weight:bold;">&#40;</span><span style="color:#996600;">'beige'</span><span style="color:#006600; font-weight:bold;">&#41;</span>
    includedModules: <span style="color:#006600; font-weight:bold;">&#91;</span><span style="color:#996600;">'Physical'</span><span style="color:#006600; font-weight:bold;">&#93;</span>
    width: <span style="color:#006666;">640</span>
    height: <span style="color:#006666;">10</span>
    friction: <span style="color:#006666;">0.5</span>
    restitution: <span style="color:#006666;">0</span>
    x: n 
    y: n <span style="color:#006600; font-weight:bold;">*</span> <span style="color:#006666;">470</span>
&nbsp;
<span style="color:#006666;">2</span>.<span style="color:#9900CC;">times</span> <span style="color:#006600; font-weight:bold;">&#40;</span>n<span style="color:#006600; font-weight:bold;">&#41;</span> <span style="color:#006600; font-weight:bold;">-&gt;</span>
  engine.<span style="color:#9900CC;">add</span>
    color: Color<span style="color:#006600; font-weight:bold;">&#40;</span><span style="color:#996600;">'beige'</span><span style="color:#006600; font-weight:bold;">&#41;</span>
    includedModules: <span style="color:#006600; font-weight:bold;">&#91;</span><span style="color:#996600;">'Physical'</span><span style="color:#006600; font-weight:bold;">&#93;</span>
    width: <span style="color:#006666;">10</span>
    height: <span style="color:#006666;">480</span>
    x: n <span style="color:#006600; font-weight:bold;">*</span> <span style="color:#006666;">630</span>
    y: n</pre></div></div>

<p>There isn&#8217;t much new here, except for our extension method <code>Number#times</code>. It works just like the Ruby counterpart. Check out the documentation link in your file tree if you want to learn more about it. One last thing to mention is that we are setting the floor&#8217;s friction and a new physics property, <code>restitution: 0</code>, which amounts to bounciness.</p>
<p>The last thing we need to do is enable some player input.</p>

<div class="wp_syntax"><div class="code"><pre class="ruby" style="font-family:monospace;">engine.<span style="color:#9900CC;">bind</span> <span style="color:#996600;">'update'</span>, <span style="color:#006600; font-weight:bold;">-&gt;</span>
  <span style="color:#9966CC; font-weight:bold;">if</span> keydown.<span style="color:#9900CC;">left</span>
    obj.<span style="color:#9900CC;">applyImpulse</span> Point<span style="color:#006600; font-weight:bold;">&#40;</span><span style="color:#006600; font-weight:bold;">-</span><span style="color:#006666;">50</span>, <span style="color:#006666;">0</span><span style="color:#006600; font-weight:bold;">&#41;</span>
  <span style="color:#9966CC; font-weight:bold;">if</span> keydown.<span style="color:#9900CC;">right</span>
    obj.<span style="color:#9900CC;">applyImpulse</span> Point<span style="color:#006600; font-weight:bold;">&#40;</span><span style="color:#006666;">50</span>, <span style="color:#006666;">0</span><span style="color:#006600; font-weight:bold;">&#41;</span>
  <span style="color:#9966CC; font-weight:bold;">if</span> keydown.<span style="color:#9900CC;">space</span>
    engine.<span style="color:#9900CC;">add</span>
      color: Color<span style="color:#006600; font-weight:bold;">&#40;</span><span style="color:#996600;">'navy blue'</span><span style="color:#006600; font-weight:bold;">&#41;</span>
      duration: <span style="color:#006666;">75</span>
      dynamic: <span style="color:#0000FF; font-weight:bold;">true</span>
      friction: <span style="color:#006666;">1</span>
      includedModules: <span style="color:#006600; font-weight:bold;">&#91;</span><span style="color:#996600;">'Physical'</span><span style="color:#006600; font-weight:bold;">&#93;</span>
      restitution: <span style="color:#006666;">0</span>
      rotatable: <span style="color:#0000FF; font-weight:bold;">true</span>
      width: <span style="color:#006666;">10</span>
      height: <span style="color:#006666;">10</span>
      y: <span style="color:#006666;">20</span>
      x: <span style="color:#CC0066; font-weight:bold;">rand</span><span style="color:#006600; font-weight:bold;">&#40;</span><span style="color:#006666;">600</span><span style="color:#006600; font-weight:bold;">&#41;</span> <span style="color:#006600; font-weight:bold;">+</span> <span style="color:#006666;">20</span>
&nbsp;
engine.<span style="color:#9900CC;">start</span><span style="color:#006600; font-weight:bold;">&#40;</span><span style="color:#006600; font-weight:bold;">&#41;</span></pre></div></div>

<p>We start off with <code>engine.bind 'update', -></code>. This will execute the function we provide each time the engine updates. <code>keydown.left</code> checks to see if the player is pressing left on their keyboard and if so, applies an impulse to the pink box we made earlier. If <code>keydown.space</code> is true we add &#8216;rain&#8217; objects to the system.</p>
<p>There are two new properties on these rain guys. First <code>duration: 75</code> destroys the rain object, and the corresponding object in the Box2D simulation, after 75 engine updates. <code>rotatable: true</code> enables the rain objects to rotate based on the objects the collide with.</p>
<p>Finally, <code>engine.start()</code> starts the game.</p>
]]></content:encoded>
			<wfw:commentRss>http://blog.pixieengine.com/2011/04/hello-box2d/feed/</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
		<item>
		<title>Hello World</title>
		<link>http://blog.pixieengine.com/2011/04/hello-world/</link>
		<comments>http://blog.pixieengine.com/2011/04/hello-world/#comments</comments>
		<pubDate>Tue, 12 Apr 2011 21:23:36 +0000</pubDate>
		<dc:creator>Matt</dc:creator>
				<category><![CDATA[Tutorial]]></category>

		<guid isPermaLink="false">http://blog.pixieengine.com/?p=29</guid>
		<description><![CDATA[Let&#8217;s make a Hello World app. First, create a new project on Pixie. This will include our core JavaScript language extensions and our game library extensions. Put the following into your main.coffee engine = Engine backgroundColor: Color&#40;&#34;sky blue&#34;&#41; canvas: $&#40;&#34;canvas&#34;&#41;.powerCanvas&#40;&#41; &#160; engine.bind &#34;draw&#34;, &#40;canvas&#41; -&#62; canvas.fillColor&#40;Color&#40;&#34;Fuzzy Wuzzy Brown&#34;&#41;&#41; canvas.font&#40;&#34;40pt Helvetica&#34;&#41; canvas.centerText&#40;&#34;Hello World&#34;, 100&#41; &#160; engine.start&#40;&#41; <a href="http://blog.pixieengine.com/2011/04/hello-world/"> read more <span class="meta-nav">&#187;</span></a>]]></description>
			<content:encoded><![CDATA[<p>Let&#8217;s make a Hello World app.</p>
<p>First, create a <a href="http://pixieengine.com/projects/new">new project</a> on Pixie. This will include our core JavaScript language extensions and our game library extensions.</p>
<p>Put the following into your main.coffee</p>

<div class="wp_syntax"><div class="code"><pre class="ruby" style="font-family:monospace;">engine = Engine
  backgroundColor: Color<span style="color:#006600; font-weight:bold;">&#40;</span><span style="color:#996600;">&quot;sky blue&quot;</span><span style="color:#006600; font-weight:bold;">&#41;</span>
  canvas: $<span style="color:#006600; font-weight:bold;">&#40;</span><span style="color:#996600;">&quot;canvas&quot;</span><span style="color:#006600; font-weight:bold;">&#41;</span>.<span style="color:#9900CC;">powerCanvas</span><span style="color:#006600; font-weight:bold;">&#40;</span><span style="color:#006600; font-weight:bold;">&#41;</span>
&nbsp;
engine.<span style="color:#9900CC;">bind</span> <span style="color:#996600;">&quot;draw&quot;</span>, <span style="color:#006600; font-weight:bold;">&#40;</span>canvas<span style="color:#006600; font-weight:bold;">&#41;</span> <span style="color:#006600; font-weight:bold;">-&gt;</span>
  canvas.<span style="color:#9900CC;">fillColor</span><span style="color:#006600; font-weight:bold;">&#40;</span>Color<span style="color:#006600; font-weight:bold;">&#40;</span><span style="color:#996600;">&quot;Fuzzy Wuzzy Brown&quot;</span><span style="color:#006600; font-weight:bold;">&#41;</span><span style="color:#006600; font-weight:bold;">&#41;</span>
  canvas.<span style="color:#9900CC;">font</span><span style="color:#006600; font-weight:bold;">&#40;</span><span style="color:#996600;">&quot;40pt Helvetica&quot;</span><span style="color:#006600; font-weight:bold;">&#41;</span>
  canvas.<span style="color:#9900CC;">centerText</span><span style="color:#006600; font-weight:bold;">&#40;</span><span style="color:#996600;">&quot;Hello World&quot;</span>, <span style="color:#006666;">100</span><span style="color:#006600; font-weight:bold;">&#41;</span>
&nbsp;
engine.<span style="color:#9900CC;">start</span><span style="color:#006600; font-weight:bold;">&#40;</span><span style="color:#006600; font-weight:bold;">&#41;</span></pre></div></div>

<p>There are only a few important lines for getting something on screen.</p>
<p>The <code>backgroundColor</code> key does exactly what it sounds like, it tells the engine what color to fill for your background.</p>
<p>Our color library can make a color out of many different inputs: 3 numbers, 3 numbers and an alpha value, an array of 3 or 4 numbers, hex values, rgb and rgba strings, and also just plain strings for named colors. We recognize around 2500 named colors, including <a href="http://blog.xkcd.com/2010/05/03/color-survey-results/">these.</a></p>
<p><code>canvas.fillColor</code> and <code>canvas.font</code> set the colors and the font.<br />
<code>canvas.centerText</code> writes the text centered at the given height.</p>
<p>Run the project and you should see &#8220;Hello World&#8221;.</p>
<p>If you are feeling adventurous try replacing <code>Color("Fuzzy Wuzzy Brown")</code> with <code>Color.random()</code></p>
]]></content:encoded>
			<wfw:commentRss>http://blog.pixieengine.com/2011/04/hello-world/feed/</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
		<item>
		<title>PixieEngine Launched!</title>
		<link>http://blog.pixieengine.com/2011/04/pixie-engine-launch/</link>
		<comments>http://blog.pixieengine.com/2011/04/pixie-engine-launch/#comments</comments>
		<pubDate>Tue, 12 Apr 2011 11:34:27 +0000</pubDate>
		<dc:creator>Pixie</dc:creator>
				<category><![CDATA[Update]]></category>
		<category><![CDATA[hello physics]]></category>
		<category><![CDATA[hello world]]></category>
		<category><![CDATA[laser shadow deathmatch arena]]></category>
		<category><![CDATA[mystic cavern]]></category>

		<guid isPermaLink="false">http://blog.pixieengine.com/?p=1</guid>
		<description><![CDATA[The PixieEngine is a web based game development environment that makes use of modern technologies to enable magically rapid prototyping, development and deployment. Because it is on the web game developers are free to create from anywhere, and sharing is instant. Collaborating, experimenting, and gathering feedback have never been easier! Get started right away with <a href="http://blog.pixieengine.com/2011/04/pixie-engine-launch/"> read more <span class="meta-nav">&#187;</span></a>]]></description>
			<content:encoded><![CDATA[<p>The <a href="http://pixieengine.com">PixieEngine</a> is a web based game development environment that makes use of modern technologies to enable magically rapid prototyping, development and deployment.</p>
<p>Because it is on the web game developers are free to create from anywhere, and sharing is instant. Collaborating, experimenting, and gathering feedback have never been easier! Get started right away with our <a href="http://pixieengine.com/projects/demo/ide" target="_blank">demo application</a>. For another example look at the simple, 10-line <a href="http://pixieengine.com/projects/50/ide" target="_blank">Hello World</a> demo.</p>
<p>Our use of open web standards enables us to integrate easily with many free and open source libraries, leveraging the work of diligent creators worldwide. <a href="http://pixieengine.com/projects/69/ide" target="_blank">Box2D physics integration is only a few lines of code</a>. Github integration runs deep, we edit all of our core libraries using the same tools we use to make games and push them <a href="https://github.com/STRd6/corelib/tree/pixie" target="_blank">straight to github</a>.</p>
<p><a href="http://blog.pixieengine.com/wp-content/uploads/2011/04/pixie-ide.png"><img class="aligncenter size-medium wp-image-22" title="PixieEngine IDE" src="http://blog.pixieengine.com/wp-content/uploads/2011/04/pixie-ide-300x225.png" alt="PixieEngine IDE" width="300" height="225" /></a></p>
<p>Watch <a href="http://www.youtube.com/watch?v=3fbS68Idvxs" target="_blank">Laser Shadow Deathmatch Arena</a> for real playtest footage of yet another game developed with the Pixie engine. Or explore the <a href="http://pixieengine.com/projects/53/fullscreen" target="_blank">Mystic Cavern</a>.</p>
<p style="text-align: center;"><a href="http://pixieengine.com/projects/53/fullscreen"></a><a href="http://pixieengine.com/projects/8/fullscreen"><img class="aligncenter size-medium wp-image-20" title="Laser Shadow Deathmatch: Arena" src="http://blog.pixieengine.com/wp-content/uploads/2011/04/download-300x225.jpg" alt="Laser Shadow Deathmatch: Arena" width="300" height="225" /></a><img class="aligncenter size-medium wp-image-21" title="Mystic Cavern" src="http://blog.pixieengine.com/wp-content/uploads/2011/04/platform-300x300.png" alt="Mystic Cavern" width="300" height="300" /></p>
<p>It&#8217;s important to us that our users have all the storage and freedom they need to make games, so we created <a href="http://pixieengine.com/subscribe">Pixie Premium</a> accounts to ensure you&#8217;ll have ample storage space for all your projects and game assets.</p>
<p>PixieEngine is undergoing active development so your feedback is very important. Give it a try and <a href="http://pixieengine.com/survey" target="_blank">let us know what you think</a>!</p>
<p>If you have any questions or comments don’t be afraid to <a href="mailto:daniel@blog.pixieengine.com" target="_blank">contact us!</a> We’re more than happy to hear from you and will get back to you as soon as we can. Anything from simple support to detailed technical questions is fine.</p>
<p>Keep up to date by following this blog, or our <a href="http://twitter.com/PixiePlatform" target="_blank">twitter account</a>. Visit our <a href="http://forums.pixieengine.com" target="_blank">forums</a> get involved and to share your creations with the community.</p>
<p>Now go forth and <a href="http://pixieengine.com/projects/demo/ide" target="_blank">make games</a>!</p>
<p>&nbsp;</p>
]]></content:encoded>
			<wfw:commentRss>http://blog.pixieengine.com/2011/04/pixie-engine-launch/feed/</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
	</channel>
</rss>
