<?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>EZ!S</title>
	<atom:link href="http://www.ezqueststudios.com/blog/feed/" rel="self" type="application/rss+xml" />
	<link>http://www.ezqueststudios.com/blog</link>
	<description>Game Design and Development</description>
	<lastBuildDate>Sun, 09 Aug 2009 08:14:15 +0000</lastBuildDate>
	<generator>http://wordpress.org/?v=2.9.2</generator>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
			<item>
		<title>Dynamic Movieclip Animation Speed in AS3</title>
		<link>http://www.ezqueststudios.com/blog/as3-dynamic-movieclip-animation-speed/</link>
		<comments>http://www.ezqueststudios.com/blog/as3-dynamic-movieclip-animation-speed/#comments</comments>
		<pubDate>Sun, 09 Aug 2009 08:08:34 +0000</pubDate>
		<dc:creator>Quest</dc:creator>
				<category><![CDATA[Flash]]></category>
		<category><![CDATA[Programming]]></category>
		<category><![CDATA[AS3]]></category>

		<guid isPermaLink="false">http://www.ezqueststudios.com/blog/?p=879</guid>
		<description><![CDATA[<p><strong>Goal:</strong> Animate a MovieClip at an arbitrary speed during runtime.</p>
<p><strong>Method:</strong> Store a custom frame Number. Increment it every frame, loop it around if the Number is out of bounds. Round the value and use it as a parameter for gotoAndStop().</p>
<p><strong>The Code</strong></p>

<div class="wp_syntax"><table><tr><td class="line_numbers"><pre>1
2&#8230;</pre></td></tr></table></div>


Related posts:<ol><li><a href='http://www.ezqueststudios.com/blog/10-tips-flash-beginner-as3/' rel='bookmark' title='Permanent Link: Avoiding the Compiler&#8217;s Whip: 9 Flash AS3 Tips for Beginners'>Avoiding the Compiler&#8217;s Whip: 9 Flash AS3 Tips for Beginners</a></li>
<li><a href='http://www.ezqueststudios.com/blog/box2d-svg-parser-curves/' rel='bookmark' title='Permanent Link: Box2D SVG Parser with Curve Support'>Box2D SVG Parser with Curve Support</a></li>
<li><a href='http://www.ezqueststudios.com/blog/creating-levels-box2d/' rel='bookmark' title='Permanent Link: Creating Levels in Box2D'>Creating Levels in Box2D</a></li>
</ol>

Related posts brought to you by <a href='http://mitcho.com/code/yarpp/'>Yet Another Related Posts Plugin</a>.]]></description>
			<content:encoded><![CDATA[<p><strong>Goal:</strong> Animate a MovieClip at an arbitrary speed during runtime.</p>
<p><strong>Method:</strong> Store a custom frame Number. Increment it every frame, loop it around if the Number is out of bounds. Round the value and use it as a parameter for gotoAndStop().</p>
<p><strong>The Code</strong></p>

<div class="wp_syntax"><table><tr><td class="line_numbers"><pre>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
</pre></td><td class="code"><pre class="php" style="font-family:monospace;"><span style="color: #000000; font-weight: bold;">var</span> cFrame<span style="color: #339933;">:</span>Number<span style="color: #339933;">;</span> <span style="color: #666666; font-style: italic;">//The current frame stored in a Number</span>
<span style="color: #000000; font-weight: bold;">var</span> animationSpeed<span style="color: #339933;">:</span>Number<span style="color: #339933;">;</span> <span style="color: #666666; font-style: italic;">//How fast the MC should animate</span>
<span style="color: #666666; font-style: italic;">//Stored in frames per 1 frame</span>
&nbsp;
<span style="color: #666666; font-style: italic;">//Initialization Function</span>
cFrame <span style="color: #339933;">=</span> this<span style="color: #339933;">.</span>currentFrame<span style="color: #339933;">;;</span>
addEventListener<span style="color: #009900;">&#40;</span>Event<span style="color: #339933;">.</span>ENTER_FRAME<span style="color: #339933;">,</span> animate<span style="color: #339933;">,</span> <span style="color: #009900; font-weight: bold;">false</span><span style="color: #339933;">,</span> <span style="color: #cc66cc;">0</span><span style="color: #339933;">,</span> <span style="color: #009900; font-weight: bold;">true</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
gotoAndStop<span style="color: #009900;">&#40;</span> this<span style="color: #339933;">.</span>currentFrame <span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
<span style="color: #666666; font-style: italic;">//animate(e:Event)</span>
cFrame <span style="color: #339933;">+=</span> animationSpeed<span style="color: #339933;">;</span>
<span style="color: #b1b100;">if</span> <span style="color: #009900;">&#40;</span>cFrame <span style="color: #339933;">&gt;</span> <span style="color: #009900;">&#40;</span>this<span style="color: #339933;">.</span>totalFrames<span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span>
	cFrame <span style="color: #339933;">=</span> cFrame <span style="color: #339933;">-</span> <span style="color: #009900;">&#40;</span>this<span style="color: #339933;">.</span>totalFrames <span style="color: #339933;">-</span> <span style="color: #cc66cc;">1</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
gotoAndStop<span style="color: #009900;">&#40;</span> Math<span style="color: #339933;">.</span><span style="color: #990000;">round</span><span style="color: #009900;">&#40;</span> cFrame <span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
gotoAndStop<span style="color: #009900;">&#40;</span><span style="color: #cc66cc;">0</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></td></tr></table></div>

<p><strong>Notes</strong></p>
<ul>
<li>The frame array AS3 uses for its&#8217; MovieClips has values of 1 to totalFrames. Setting it to 0 results in it being upped to 1.</p>
<li>Setting the current frame to anything besides an integer value within the valid number of frames will cause the MovieClip to ignore the value.
</ul>
<p><strong>Caution</strong><br />
Setting animationSpeed greater than totalFrames may break this function, depending on how big the value is.</p>
<p>&#8212;-<br />
<i>From my look through Google, there are very few if any articles that address this topic. It&#8217;s not particularly difficult to do, but I found no built in support for custom animation speed within ActionScript 3.</i></p>


<p>Related posts:<ol><li><a href='http://www.ezqueststudios.com/blog/10-tips-flash-beginner-as3/' rel='bookmark' title='Permanent Link: Avoiding the Compiler&#8217;s Whip: 9 Flash AS3 Tips for Beginners'>Avoiding the Compiler&#8217;s Whip: 9 Flash AS3 Tips for Beginners</a></li>
<li><a href='http://www.ezqueststudios.com/blog/box2d-svg-parser-curves/' rel='bookmark' title='Permanent Link: Box2D SVG Parser with Curve Support'>Box2D SVG Parser with Curve Support</a></li>
<li><a href='http://www.ezqueststudios.com/blog/creating-levels-box2d/' rel='bookmark' title='Permanent Link: Creating Levels in Box2D'>Creating Levels in Box2D</a></li>
</ol></p>
<p>Related posts brought to you by <a href='http://mitcho.com/code/yarpp/'>Yet Another Related Posts Plugin</a>.</p>]]></content:encoded>
			<wfw:commentRss>http://www.ezqueststudios.com/blog/as3-dynamic-movieclip-animation-speed/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Box2D SVG Parser with Curve Support</title>
		<link>http://www.ezqueststudios.com/blog/box2d-svg-parser-curves/</link>
		<comments>http://www.ezqueststudios.com/blog/box2d-svg-parser-curves/#comments</comments>
		<pubDate>Tue, 28 Apr 2009 00:17:12 +0000</pubDate>
		<dc:creator>Quest</dc:creator>
				<category><![CDATA[Flash]]></category>
		<category><![CDATA[Programming]]></category>
		<category><![CDATA[AS3]]></category>
		<category><![CDATA[box2D]]></category>

		<guid isPermaLink="false">http://www.ezqueststudios.com/blog/?p=425</guid>
		<description><![CDATA[<p><i>See <a href="http://www.ezqueststudios.com/blog/creating-levels-box2d/">this tutorial</a> for instructions on creating Box2D levels in InkScape and importing them into Flash. It also explains floors and ceilings. Additionally, you can check out <a href="http://www.box2d.org/forum/viewtopic.php?f=8&#038;t=3073">the SVG Parser thread</a> off the Box2D forums to get updates that may not be&#8230;</i></p>


Related posts:<ol><li><a href='http://www.ezqueststudios.com/blog/creating-levels-box2d/' rel='bookmark' title='Permanent Link: Creating Levels in Box2D'>Creating Levels in Box2D</a></li>
<li><a href='http://www.ezqueststudios.com/blog/as3-dynamic-movieclip-animation-speed/' rel='bookmark' title='Permanent Link: Dynamic Movieclip Animation Speed in AS3'>Dynamic Movieclip Animation Speed in AS3</a></li>
</ol>

Related posts brought to you by <a href='http://mitcho.com/code/yarpp/'>Yet Another Related Posts Plugin</a>.]]></description>
			<content:encoded><![CDATA[<p><i>See <a href="http://www.ezqueststudios.com/blog/creating-levels-box2d/">this tutorial</a> for instructions on creating Box2D levels in InkScape and importing them into Flash. It also explains floors and ceilings. Additionally, you can check out <a href="http://www.box2d.org/forum/viewtopic.php?f=8&#038;t=3073">the SVG Parser thread</a> off the Box2D forums to get updates that may not be posted here.</i></p>
<h3>Functionality</h3>
<p>The new parser will supports all declarations of curves. Additionally, it requires you to provide a new argument called resolution. Resolution is the number of segments each curve is split into.</p>
<p>If you pass a value less than 1 for resolution, the parser will use the formula (Line Width * 10) to determine resolution. So if you set the Line Stroke Width to 2 in InkScape, the curve will be split into 20 segments. Basically, thicker lines make smoother curves.</p>
<p><center>
<p><a href="http://www.shareapic.net/content.php?id=16510979&#038;owner=Ezion" target="_blank"><img src="http://preview.shareapic.net/preview5/016510979.jpg" border="0"></a></p>
<p></center></p>
<p>The green curves were drawn from left-to-right, so they are floors and check collision on their upper edge. The red curves are drawn right-to-left and check collision on their lower edge. Notice that none of the curves cover an angle of more than 180 degrees; you may end up with unexpected results if you do go over this limit.</p>
<h3>Caution</h3>
<p>You will need to use continuous collision checking on objects that are going to roll along curves at high speeds. The setBullet flag will help with this, but setting the whole world to continuous collision is needed for good looking rolls. Additionally, objects will roll with jerky motion if you set the line resolution too high.</p>
<h3>The Parser in Action</h3>
<p><center><OBJECT classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=10,0,0,0" WIDTH="480" HEIGHT="600" id="testCurves.swf" ALIGN="center"><br />
<PARAM NAME=movie VALUE="/flash/tutorials/testCurves.swf"> <PARAM NAME=quality VALUE=high><EMBED src="/flash/tutorials/testCurves.swf" quality=high WIDTH="480" HEIGHT="600" NAME="Box2D Curve Parser" ALIGN="" TYPE="application/x-shockwave-flash" PLUGINSPAGE="http://www.macromedia.com/go/getflashplayer"></EMBED> </OBJECT></center><br />
</p>
<p><a href="http://www.ezqueststudios.com/source/tutorials/SVG_curveParser.zip">SVG Curve Parser Source</a></p>
<p>To use the curve parser, import b2SVG.as and call parseSVG.</p>
<ul><strong>parseSVG(SVG, b2World, Number, Number)</strong></p>
<li>SVG variable (<a href="http://www.ezqueststudios.com/blog/creating-levels-box2d/">see this tutorial</a>)
<li>World &#8211; Your b2world object
<li>Ratio &#8211; Scale of pixels:units in your Box2D world
<li>Resolution &#8211; If > one, parses all curves with the passed argument. If < one, uses (Line-Width * 10) to determine curve resolution.
</ul>
<h3>The Code</h3>
<p><strong>b2SVG.as</strong></p>

<div class="wp_syntax"><table><tr><td class="line_numbers"><pre>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
</pre></td><td class="code"><pre class="php" style="font-family:monospace;"><span style="color: #009933; font-style: italic;">/**
* @author John Nesky &lt;http://www.johnnesky.com&gt;
* Bezier curves added by Quest Yarbrough &lt;http://www.ezqueststudios.com&gt;
* partially based on some code by Helen Triolo &lt;http://flash-creations.com/notes/sample_svgtoflash.php&gt;
* 
* This code is available under the LGPL license. &lt;http://www.gnu.org/licenses/lgpl-3.0.txt&gt;
*/</span>
&nbsp;
package 
<span style="color: #009900;">&#123;</span>
  import Box2D<span style="color: #339933;">.</span>Dynamics<span style="color: #339933;">.</span>b2World<span style="color: #339933;">;</span>
  import Box2D<span style="color: #339933;">.</span>Common<span style="color: #339933;">.</span>Math<span style="color: #339933;">.</span>b2Vec2<span style="color: #339933;">;</span>
  import Box2D<span style="color: #339933;">.</span>Collision<span style="color: #339933;">.</span>Shapes<span style="color: #339933;">.</span>b2EdgeChainDef<span style="color: #339933;">;</span>
  import Box2D<span style="color: #339933;">.</span>Collision<span style="color: #339933;">.</span>Shapes<span style="color: #339933;">.</span>b2ShapeDef<span style="color: #339933;">;</span>
  import Box2D<span style="color: #339933;">.</span>Collision<span style="color: #339933;">.</span>Shapes<span style="color: #339933;">.</span>b2Shape<span style="color: #339933;">;</span>
  import b2Bezier<span style="color: #339933;">;</span>
  <span style="color: #000000; font-weight: bold;">public</span> <span style="color: #000000; font-weight: bold;">class</span> b2SVG
  <span style="color: #009900;">&#123;</span>
&nbsp;
    <span style="color: #000000; font-weight: bold;">public</span> static <span style="color: #000000; font-weight: bold;">function</span> parseSVG<span style="color: #009900;">&#40;</span>svg<span style="color: #339933;">:</span> XML<span style="color: #339933;">,</span> world<span style="color: #339933;">:</span> b2World<span style="color: #339933;">,</span> RATIO<span style="color: #339933;">:</span>Number<span style="color: #339933;">,</span> useDefaultCurveResolution<span style="color: #339933;">:</span>Number<span style="color: #009900;">&#41;</span><span style="color: #339933;">:</span> <span style="color: #990000;">Array</span> <span style="color: #009900;">&#123;</span>
      <span style="color: #000000; font-weight: bold;">var</span> ns<span style="color: #339933;">:</span> <span style="color: #000000; font-weight: bold;">Namespace</span> <span style="color: #339933;">=</span> svg<span style="color: #339933;">.</span><span style="color: #000000; font-weight: bold;">namespace</span><span style="color: #009900;">&#40;</span><span style="color: #0000ff;">&quot;&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
      <span style="color: #000000; font-weight: bold;">var</span> useCurveThickness<span style="color: #339933;">:</span>Boolean <span style="color: #339933;">=</span> <span style="color: #009900; font-weight: bold;">false</span><span style="color: #339933;">;</span>
      <span style="color: #000000; font-weight: bold;">var</span> resolution<span style="color: #339933;">:</span>Number<span style="color: #339933;">;</span>
&nbsp;
      <span style="color: #b1b100;">if</span> <span style="color: #009900;">&#40;</span>useDefaultCurveResolution <span style="color: #339933;">&gt;</span> <span style="color: #cc66cc;">0</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
        resolution <span style="color: #339933;">=</span> useDefaultCurveResolution<span style="color: #339933;">;</span> 
      <span style="color: #009900;">&#125;</span> <span style="color: #b1b100;">else</span> <span style="color: #009900;">&#123;</span>
        useCurveThickness <span style="color: #339933;">=</span> <span style="color: #009900; font-weight: bold;">true</span><span style="color: #339933;">;</span>
      <span style="color: #009900;">&#125;</span>
&nbsp;
      <span style="color: #000000; font-weight: bold;">var</span> chainDef<span style="color: #339933;">:</span> b2EdgeChainDef <span style="color: #339933;">=</span> <span style="color: #000000; font-weight: bold;">new</span> b2EdgeChainDef<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
      chainDef<span style="color: #339933;">.</span>friction <span style="color: #339933;">=</span> <span style="color:#800080;">0.5</span><span style="color: #339933;">;</span>
      chainDef<span style="color: #339933;">.</span>restitution <span style="color: #339933;">=</span> <span style="color:#800080;">0.0</span><span style="color: #339933;">;</span>
      <span style="color: #b1b100;">for</span> <span style="color: #990000;">each</span> <span style="color: #009900;">&#40;</span><span style="color: #000000; font-weight: bold;">var</span> path<span style="color: #339933;">:</span> XML in svg<span style="color: #339933;">..</span>ns<span style="color: #339933;">::</span><span style="color: #004000;">path</span><span style="color: #009900;">&#41;</span>
      <span style="color: #009900;">&#123;</span>
        <span style="color: #b1b100;">if</span> <span style="color: #009900;">&#40;</span>useCurveThickness<span style="color: #009900;">&#41;</span> resolution <span style="color: #339933;">=</span> Math<span style="color: #339933;">.</span><span style="color: #990000;">round</span><span style="color: #009900;">&#40;</span>returnStrokeWidth<span style="color: #009900;">&#40;</span>path<span style="color: #339933;">.@</span>style<span style="color: #009900;">&#41;</span> <span style="color: #339933;">*</span> <span style="color: #cc66cc;">10</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
        <span style="color: #666666; font-style: italic;">// the entire path:</span>
        <span style="color: #000000; font-weight: bold;">var</span> d<span style="color: #339933;">:</span> String <span style="color: #339933;">=</span> path<span style="color: #339933;">.@</span>d<span style="color: #339933;">;</span>
&nbsp;
        <span style="color: #666666; font-style: italic;">// Inkscape, Illustrator, and other programs use slightly different</span>
        <span style="color: #666666; font-style: italic;">// formats for the path, because the SVG specs are very flexible. This</span>
        <span style="color: #666666; font-style: italic;">// puts some strain on the people who write path parsers (me!), but </span>
        <span style="color: #666666; font-style: italic;">// Helen Triolo's example illustrates an easy way to convert the path</span>
        <span style="color: #666666; font-style: italic;">// to a consistent format and then break it up into an array:</span>
&nbsp;
        <span style="color: #666666; font-style: italic;">// replace whitespace with commas:</span>
        <span style="color: #000000; font-weight: bold;">var</span> letter<span style="color: #339933;">:</span> String<span style="color: #339933;">;</span>
        <span style="color: #b1b100;">for</span> <span style="color: #990000;">each</span> <span style="color: #009900;">&#40;</span>letter in <span style="color: #009900;">&#91;</span><span style="color: #0000ff;">&quot; &quot;</span><span style="color: #339933;">,</span><span style="color: #0000ff;">&quot;<span style="color: #000099; font-weight: bold;">\f</span>&quot;</span><span style="color: #339933;">,</span><span style="color: #0000ff;">&quot;<span style="color: #000099; font-weight: bold;">\n</span>&quot;</span><span style="color: #339933;">,</span><span style="color: #0000ff;">&quot;<span style="color: #000099; font-weight: bold;">\r</span>&quot;</span><span style="color: #339933;">,</span><span style="color: #0000ff;">&quot;<span style="color: #000099; font-weight: bold;">\t</span>&quot;</span><span style="color: #009900;">&#93;</span><span style="color: #009900;">&#41;</span>
          d <span style="color: #339933;">=</span> d<span style="color: #339933;">.</span><span style="color: #990000;">split</span><span style="color: #009900;">&#40;</span>letter<span style="color: #009900;">&#41;</span><span style="color: #339933;">.</span><span style="color: #990000;">join</span><span style="color: #009900;">&#40;</span><span style="color: #0000ff;">&quot;,&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
        <span style="color: #666666; font-style: italic;">// surround letters with commas:</span>
        <span style="color: #b1b100;">for</span> <span style="color: #990000;">each</span> <span style="color: #009900;">&#40;</span>letter in <span style="color: #009900;">&#91;</span><span style="color: #0000ff;">&quot;M&quot;</span><span style="color: #339933;">,</span><span style="color: #0000ff;">&quot;m&quot;</span><span style="color: #339933;">,</span><span style="color: #0000ff;">&quot;Z&quot;</span><span style="color: #339933;">,</span><span style="color: #0000ff;">&quot;z&quot;</span><span style="color: #339933;">,</span><span style="color: #0000ff;">&quot;L&quot;</span><span style="color: #339933;">,</span><span style="color: #0000ff;">&quot;l&quot;</span><span style="color: #339933;">,</span><span style="color: #0000ff;">&quot;H&quot;</span><span style="color: #339933;">,</span><span style="color: #0000ff;">&quot;h&quot;</span><span style="color: #339933;">,</span><span style="color: #0000ff;">&quot;V&quot;</span><span style="color: #339933;">,</span><span style="color: #0000ff;">&quot;v&quot;</span><span style="color: #339933;">,</span><span style="color: #0000ff;">&quot;C&quot;</span><span style="color: #339933;">,</span><span style="color: #0000ff;">&quot;c&quot;</span><span style="color: #339933;">,</span><span style="color: #0000ff;">&quot;S&quot;</span><span style="color: #339933;">,</span><span style="color: #0000ff;">&quot;s&quot;</span><span style="color: #339933;">,</span><span style="color: #0000ff;">&quot;Q&quot;</span><span style="color: #339933;">,</span><span style="color: #0000ff;">&quot;q&quot;</span><span style="color: #339933;">,</span><span style="color: #0000ff;">&quot;T&quot;</span><span style="color: #339933;">,</span><span style="color: #0000ff;">&quot;t&quot;</span><span style="color: #339933;">,</span><span style="color: #0000ff;">&quot;A&quot;</span><span style="color: #339933;">,</span><span style="color: #0000ff;">&quot;a&quot;</span><span style="color: #009900;">&#93;</span><span style="color: #009900;">&#41;</span>
          d <span style="color: #339933;">=</span> d<span style="color: #339933;">.</span><span style="color: #990000;">split</span><span style="color: #009900;">&#40;</span>letter<span style="color: #009900;">&#41;</span><span style="color: #339933;">.</span><span style="color: #990000;">join</span><span style="color: #009900;">&#40;</span><span style="color: #0000ff;">&quot;,&quot;</span> <span style="color: #339933;">+</span> letter <span style="color: #339933;">+</span> <span style="color: #0000ff;">&quot;,&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
        <span style="color: #666666; font-style: italic;">// insert commas before negative symbols:</span>
        d <span style="color: #339933;">=</span> d<span style="color: #339933;">.</span><span style="color: #990000;">split</span><span style="color: #009900;">&#40;</span><span style="color: #0000ff;">&quot;-&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">.</span><span style="color: #990000;">join</span><span style="color: #009900;">&#40;</span><span style="color: #0000ff;">&quot;,-&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
        <span style="color: #666666; font-style: italic;">// now get all tokens separated by commas:</span>
        <span style="color: #000000; font-weight: bold;">var</span> args<span style="color: #339933;">:</span> <span style="color: #990000;">Array</span> <span style="color: #339933;">=</span> d<span style="color: #339933;">.</span><span style="color: #990000;">split</span><span style="color: #009900;">&#40;</span><span style="color: #0000ff;">&quot;,&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
        <span style="color: #666666; font-style: italic;">// remove empty strings:</span>
        args <span style="color: #339933;">=</span> args<span style="color: #339933;">.</span>filter<span style="color: #009900;">&#40;</span>filterEmptyString<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
&nbsp;
        <span style="color: #000000; font-weight: bold;">var</span> currentPosition<span style="color: #339933;">:</span> b2Vec2 <span style="color: #339933;">=</span> <span style="color: #000000; font-weight: bold;">new</span> b2Vec2<span style="color: #009900;">&#40;</span><span style="color: #cc66cc;">0</span><span style="color: #339933;">,</span><span style="color: #cc66cc;">0</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
        <span style="color: #000000; font-weight: bold;">var</span> control1<span style="color: #339933;">:</span> b2Vec2 <span style="color: #339933;">=</span> <span style="color: #009900; font-weight: bold;">null</span><span style="color: #339933;">;</span>
        <span style="color: #000000; font-weight: bold;">var</span> control2<span style="color: #339933;">:</span> b2Vec2 <span style="color: #339933;">=</span> <span style="color: #009900; font-weight: bold;">null</span><span style="color: #339933;">;</span>
        <span style="color: #000000; font-weight: bold;">var</span> control3<span style="color: #339933;">:</span> b2Vec2 <span style="color: #339933;">=</span> <span style="color: #009900; font-weight: bold;">null</span><span style="color: #339933;">;</span>
        <span style="color: #000000; font-weight: bold;">var</span> prevControl<span style="color: #339933;">:</span> b2Vec2 <span style="color: #339933;">=</span> <span style="color: #009900; font-weight: bold;">null</span><span style="color: #339933;">;</span>
        <span style="color: #000000; font-weight: bold;">var</span> prevCommand<span style="color: #339933;">:</span> String <span style="color: #339933;">=</span> <span style="color: #009900; font-weight: bold;">null</span><span style="color: #339933;">;</span>
        <span style="color: #000000; font-weight: bold;">var</span> relative<span style="color: #339933;">:</span> Boolean <span style="color: #339933;">=</span> <span style="color: #009900; font-weight: bold;">false</span><span style="color: #339933;">;</span>
        <span style="color: #000000; font-weight: bold;">var</span> curve<span style="color: #339933;">:</span> <span style="color: #990000;">Array</span><span style="color: #339933;">;</span>
		<span style="color: #000000; font-weight: bold;">var</span> shapes<span style="color: #339933;">:</span> <span style="color: #990000;">Array</span> <span style="color: #339933;">=</span> <span style="color: #000000; font-weight: bold;">new</span> <span style="color: #990000;">Array</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
        chainDef<span style="color: #339933;">.</span>vertices<span style="color: #339933;">.</span>length <span style="color: #339933;">=</span> <span style="color: #cc66cc;">0</span><span style="color: #339933;">;</span>
        <span style="color: #000000; font-weight: bold;">var</span> i<span style="color: #339933;">:</span> int <span style="color: #339933;">=</span> <span style="color: #cc66cc;">0</span><span style="color: #339933;">;</span>
        <span style="color: #b1b100;">while</span> <span style="color: #009900;">&#40;</span><span style="color: #009900; font-weight: bold;">true</span><span style="color: #009900;">&#41;</span>
        <span style="color: #009900;">&#123;</span>
          <span style="color: #b1b100;">if</span> <span style="color: #009900;">&#40;</span>i <span style="color: #339933;">==</span> args<span style="color: #339933;">.</span>length<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
            <span style="color: #666666; font-style: italic;">// cleanup: If a path is incomplete, finish it without closing the loop</span>
            <span style="color: #666666; font-style: italic;">//          and add it to the Box2D world.</span>
            <span style="color: #b1b100;">if</span> <span style="color: #009900;">&#40;</span>chainDef<span style="color: #339933;">.</span>vertices<span style="color: #339933;">.</span>length <span style="color: #339933;">&gt;=</span> <span style="color: #cc66cc;">2</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
              chainDef<span style="color: #339933;">.</span>vertexCount <span style="color: #339933;">=</span> chainDef<span style="color: #339933;">.</span>vertices<span style="color: #339933;">.</span>length<span style="color: #339933;">;</span>
              chainDef<span style="color: #339933;">.</span>isALoop <span style="color: #339933;">=</span> <span style="color: #009900; font-weight: bold;">false</span><span style="color: #339933;">;</span>
              shapes<span style="color: #339933;">.</span>push<span style="color: #009900;">&#40;</span>world<span style="color: #339933;">.</span>GetGroundBody<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">.</span>CreateShape<span style="color: #009900;">&#40;</span>chainDef<span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span> 
            <span style="color: #009900;">&#125;</span>
            <span style="color: #b1b100;">break</span><span style="color: #339933;">;</span>
          <span style="color: #009900;">&#125;</span>
&nbsp;
          <span style="color: #000000; font-weight: bold;">var</span> command<span style="color: #339933;">:</span> String <span style="color: #339933;">=</span> args<span style="color: #009900;">&#91;</span>i<span style="color: #009900;">&#93;</span><span style="color: #339933;">;</span>
          i<span style="color: #339933;">++;</span>
&nbsp;
          <span style="color: #b1b100;">switch</span> <span style="color: #009900;">&#40;</span>command<span style="color: #009900;">&#41;</span>
          <span style="color: #009900;">&#123;</span>
            <span style="color: #b1b100;">case</span> <span style="color: #0000ff;">&quot;Z&quot;</span><span style="color: #339933;">:</span>
            <span style="color: #b1b100;">case</span> <span style="color: #0000ff;">&quot;z&quot;</span><span style="color: #339933;">:</span>
              <span style="color: #666666; font-style: italic;">// closepath: If a path is incomplete, finish it, close the loop,</span>
              <span style="color: #666666; font-style: italic;">//            and add it to the Box2D world. </span>
              <span style="color: #b1b100;">if</span> <span style="color: #009900;">&#40;</span>chainDef<span style="color: #339933;">.</span>vertices<span style="color: #339933;">.</span>length <span style="color: #339933;">&gt;=</span> <span style="color: #cc66cc;">3</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
                chainDef<span style="color: #339933;">.</span>vertices<span style="color: #339933;">.</span>pop<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span> <span style="color: #666666; font-style: italic;">// the last vertex of the loop is redundant.</span>
                chainDef<span style="color: #339933;">.</span>vertexCount <span style="color: #339933;">=</span> chainDef<span style="color: #339933;">.</span>vertices<span style="color: #339933;">.</span>length<span style="color: #339933;">;</span>
                chainDef<span style="color: #339933;">.</span>isALoop <span style="color: #339933;">=</span> <span style="color: #009900; font-weight: bold;">true</span><span style="color: #339933;">;</span>
				shapes<span style="color: #339933;">.</span>push<span style="color: #009900;">&#40;</span>world<span style="color: #339933;">.</span>GetGroundBody<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">.</span>CreateShape<span style="color: #009900;">&#40;</span>chainDef<span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
              <span style="color: #009900;">&#125;</span>
              chainDef<span style="color: #339933;">.</span>vertices<span style="color: #339933;">.</span>length <span style="color: #339933;">=</span> <span style="color: #cc66cc;">0</span><span style="color: #339933;">;</span>
              chainDef<span style="color: #339933;">.</span>vertices<span style="color: #339933;">.</span>push<span style="color: #009900;">&#40;</span>currentPosition<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
              <span style="color: #b1b100;">break</span><span style="color: #339933;">;</span>
            <span style="color: #b1b100;">case</span> <span style="color: #0000ff;">&quot;M&quot;</span><span style="color: #339933;">:</span>
            <span style="color: #b1b100;">case</span> <span style="color: #0000ff;">&quot;m&quot;</span><span style="color: #339933;">:</span>
              <span style="color: #666666; font-style: italic;">// moveto: If a path is incomplete, finish it without closing the loop</span>
              <span style="color: #666666; font-style: italic;">//          and add it to the Box2D world.</span>
              <span style="color: #666666; font-style: italic;">//          Start a new path.</span>
              <span style="color: #b1b100;">if</span> <span style="color: #009900;">&#40;</span>chainDef<span style="color: #339933;">.</span>vertices<span style="color: #339933;">.</span>length <span style="color: #339933;">&gt;=</span> <span style="color: #cc66cc;">2</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
                chainDef<span style="color: #339933;">.</span>vertexCount <span style="color: #339933;">=</span> chainDef<span style="color: #339933;">.</span>vertices<span style="color: #339933;">.</span>length<span style="color: #339933;">;</span>
                chainDef<span style="color: #339933;">.</span>isALoop <span style="color: #339933;">=</span> <span style="color: #009900; font-weight: bold;">false</span><span style="color: #339933;">;</span>
                shapes<span style="color: #339933;">.</span>push<span style="color: #009900;">&#40;</span>world<span style="color: #339933;">.</span>GetGroundBody<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">.</span>CreateShape<span style="color: #009900;">&#40;</span>chainDef<span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
              <span style="color: #009900;">&#125;</span>
              relative <span style="color: #339933;">=</span> <span style="color: #009900;">&#40;</span>command <span style="color: #339933;">==</span> <span style="color: #0000ff;">&quot;m&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
              <span style="color: #b1b100;">if</span> <span style="color: #009900;">&#40;</span>relative<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
                currentPosition <span style="color: #339933;">=</span> <span style="color: #000000; font-weight: bold;">new</span> b2Vec2<span style="color: #009900;">&#40;</span>currentPosition<span style="color: #339933;">.</span>x <span style="color: #339933;">+</span> args<span style="color: #009900;">&#91;</span>i<span style="color: #009900;">&#93;</span> <span style="color: #339933;">/</span> RATIO<span style="color: #339933;">,</span>
                                             currentPosition<span style="color: #339933;">.</span>y <span style="color: #339933;">+</span> args<span style="color: #009900;">&#91;</span>i<span style="color: #339933;">+</span><span style="color: #cc66cc;">1</span><span style="color: #009900;">&#93;</span> <span style="color: #339933;">/</span> RATIO<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
              <span style="color: #009900;">&#125;</span> <span style="color: #b1b100;">else</span> <span style="color: #009900;">&#123;</span>
                currentPosition <span style="color: #339933;">=</span> <span style="color: #000000; font-weight: bold;">new</span> b2Vec2<span style="color: #009900;">&#40;</span>args<span style="color: #009900;">&#91;</span>i<span style="color: #009900;">&#93;</span> <span style="color: #339933;">/</span> RATIO<span style="color: #339933;">,</span> args<span style="color: #009900;">&#91;</span>i<span style="color: #339933;">+</span><span style="color: #cc66cc;">1</span><span style="color: #009900;">&#93;</span> <span style="color: #339933;">/</span> RATIO<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
              <span style="color: #009900;">&#125;</span>
              i <span style="color: #339933;">+=</span> <span style="color: #cc66cc;">2</span><span style="color: #339933;">;</span>
              chainDef<span style="color: #339933;">.</span>vertices<span style="color: #339933;">.</span>length <span style="color: #339933;">=</span> <span style="color: #cc66cc;">0</span><span style="color: #339933;">;</span>
              chainDef<span style="color: #339933;">.</span>vertices<span style="color: #339933;">.</span>push<span style="color: #009900;">&#40;</span>currentPosition<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
              <span style="color: #666666; font-style: italic;">// According to the SVG spec, a moveto command can be implicitly followed</span>
              <span style="color: #666666; font-style: italic;">// by lineto coordinates. So there is no &quot;break&quot; here.</span>
            <span style="color: #b1b100;">case</span> <span style="color: #0000ff;">&quot;L&quot;</span><span style="color: #339933;">:</span>
            <span style="color: #b1b100;">case</span> <span style="color: #0000ff;">&quot;l&quot;</span><span style="color: #339933;">:</span>
              <span style="color: #666666; font-style: italic;">// lineto: a series of straight lines. Keep parsing until you hit a non-number. </span>
              <span style="color: #b1b100;">if</span> <span style="color: #009900;">&#40;</span>command <span style="color: #339933;">==</span> <span style="color: #0000ff;">&quot;l&quot;</span><span style="color: #009900;">&#41;</span> relative <span style="color: #339933;">=</span> <span style="color: #009900; font-weight: bold;">true</span><span style="color: #339933;">;</span>
              <span style="color: #b1b100;">else</span> <span style="color: #b1b100;">if</span> <span style="color: #009900;">&#40;</span>command <span style="color: #339933;">==</span> <span style="color: #0000ff;">&quot;L&quot;</span><span style="color: #009900;">&#41;</span> relative <span style="color: #339933;">=</span> <span style="color: #009900; font-weight: bold;">false</span><span style="color: #339933;">;</span>
              <span style="color: #b1b100;">while</span> <span style="color: #009900;">&#40;</span><span style="color: #339933;">!</span>isNaN<span style="color: #009900;">&#40;</span>parseFloat<span style="color: #009900;">&#40;</span>args<span style="color: #009900;">&#91;</span>i<span style="color: #009900;">&#93;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span>
              <span style="color: #009900;">&#123;</span>
                <span style="color: #b1b100;">if</span> <span style="color: #009900;">&#40;</span>relative<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
                  currentPosition <span style="color: #339933;">=</span> <span style="color: #000000; font-weight: bold;">new</span> b2Vec2<span style="color: #009900;">&#40;</span>currentPosition<span style="color: #339933;">.</span>x <span style="color: #339933;">+</span> args<span style="color: #009900;">&#91;</span>i<span style="color: #009900;">&#93;</span> <span style="color: #339933;">/</span> RATIO<span style="color: #339933;">,</span>
                                               currentPosition<span style="color: #339933;">.</span>y <span style="color: #339933;">+</span> args<span style="color: #009900;">&#91;</span>i<span style="color: #339933;">+</span><span style="color: #cc66cc;">1</span><span style="color: #009900;">&#93;</span> <span style="color: #339933;">/</span> RATIO<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
                <span style="color: #009900;">&#125;</span> <span style="color: #b1b100;">else</span> <span style="color: #009900;">&#123;</span>
                  currentPosition <span style="color: #339933;">=</span> <span style="color: #000000; font-weight: bold;">new</span> b2Vec2<span style="color: #009900;">&#40;</span>args<span style="color: #009900;">&#91;</span>i<span style="color: #009900;">&#93;</span> <span style="color: #339933;">/</span> RATIO<span style="color: #339933;">,</span> args<span style="color: #009900;">&#91;</span>i<span style="color: #339933;">+</span><span style="color: #cc66cc;">1</span><span style="color: #009900;">&#93;</span> <span style="color: #339933;">/</span> RATIO<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
                <span style="color: #009900;">&#125;</span>
                i <span style="color: #339933;">+=</span> <span style="color: #cc66cc;">2</span><span style="color: #339933;">;</span>
                chainDef<span style="color: #339933;">.</span>vertices<span style="color: #339933;">.</span>push<span style="color: #009900;">&#40;</span>currentPosition<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
              <span style="color: #009900;">&#125;</span>
              <span style="color: #b1b100;">break</span><span style="color: #339933;">;</span>
            <span style="color: #b1b100;">case</span> <span style="color: #0000ff;">&quot;H&quot;</span><span style="color: #339933;">:</span>
            <span style="color: #b1b100;">case</span> <span style="color: #0000ff;">&quot;h&quot;</span><span style="color: #339933;">:</span>
              <span style="color: #666666; font-style: italic;">// horizontal lineto: a series of horizontal lines. </span>
              <span style="color: #666666; font-style: italic;">//                    keep parsing until you hit a non-number. </span>
              <span style="color: #666666; font-style: italic;">//                    Box2D works much better if adjacent parallel lines</span>
              <span style="color: #666666; font-style: italic;">//                    are merged into one, so I'll go ahead and merge them.</span>
              relative <span style="color: #339933;">=</span> <span style="color: #009900;">&#40;</span>command <span style="color: #339933;">==</span> <span style="color: #0000ff;">&quot;h&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
              <span style="color: #b1b100;">do</span>
              <span style="color: #009900;">&#123;</span>
                <span style="color: #b1b100;">if</span> <span style="color: #009900;">&#40;</span>relative<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
                  currentPosition <span style="color: #339933;">=</span> <span style="color: #000000; font-weight: bold;">new</span> b2Vec2<span style="color: #009900;">&#40;</span>currentPosition<span style="color: #339933;">.</span>x <span style="color: #339933;">+</span> args<span style="color: #009900;">&#91;</span>i<span style="color: #009900;">&#93;</span> <span style="color: #339933;">/</span> RATIO<span style="color: #339933;">,</span>
                                               currentPosition<span style="color: #339933;">.</span>y<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
                <span style="color: #009900;">&#125;</span> <span style="color: #b1b100;">else</span> <span style="color: #009900;">&#123;</span>
                  currentPosition <span style="color: #339933;">=</span> <span style="color: #000000; font-weight: bold;">new</span> b2Vec2<span style="color: #009900;">&#40;</span>args<span style="color: #009900;">&#91;</span>i<span style="color: #009900;">&#93;</span> <span style="color: #339933;">/</span> RATIO<span style="color: #339933;">,</span> currentPosition<span style="color: #339933;">.</span>y<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
                <span style="color: #009900;">&#125;</span>
                i<span style="color: #339933;">++;</span>
              <span style="color: #009900;">&#125;</span> <span style="color: #b1b100;">while</span> <span style="color: #009900;">&#40;</span><span style="color: #339933;">!</span>isNaN<span style="color: #009900;">&#40;</span>parseFloat<span style="color: #009900;">&#40;</span>args<span style="color: #009900;">&#91;</span>i<span style="color: #009900;">&#93;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
              chainDef<span style="color: #339933;">.</span>vertices<span style="color: #339933;">.</span>push<span style="color: #009900;">&#40;</span>currentPosition<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
              <span style="color: #b1b100;">break</span><span style="color: #339933;">;</span>
            <span style="color: #b1b100;">case</span> <span style="color: #0000ff;">&quot;V&quot;</span><span style="color: #339933;">:</span>
            <span style="color: #b1b100;">case</span> <span style="color: #0000ff;">&quot;v&quot;</span><span style="color: #339933;">:</span>
              <span style="color: #666666; font-style: italic;">// vertical lineto: a series of vertical lines. </span>
              <span style="color: #666666; font-style: italic;">//                  keep parsing until you hit a non-number. </span>
              <span style="color: #666666; font-style: italic;">//                  Box2D works much better if adjacent parallel lines</span>
              <span style="color: #666666; font-style: italic;">//                  are merged into one, so I'll go ahead and merge them.</span>
              relative <span style="color: #339933;">=</span> <span style="color: #009900;">&#40;</span>command <span style="color: #339933;">==</span> <span style="color: #0000ff;">&quot;v&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
              <span style="color: #b1b100;">do</span>
              <span style="color: #009900;">&#123;</span>
                <span style="color: #b1b100;">if</span> <span style="color: #009900;">&#40;</span>relative<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
                  currentPosition <span style="color: #339933;">=</span> <span style="color: #000000; font-weight: bold;">new</span> b2Vec2<span style="color: #009900;">&#40;</span>currentPosition<span style="color: #339933;">.</span>x<span style="color: #339933;">,</span>
                                               currentPosition<span style="color: #339933;">.</span>y <span style="color: #339933;">+</span> args<span style="color: #009900;">&#91;</span>i<span style="color: #009900;">&#93;</span> <span style="color: #339933;">/</span> RATIO<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
                <span style="color: #009900;">&#125;</span> <span style="color: #b1b100;">else</span> <span style="color: #009900;">&#123;</span>
                  currentPosition <span style="color: #339933;">=</span> <span style="color: #000000; font-weight: bold;">new</span> b2Vec2<span style="color: #009900;">&#40;</span>currentPosition<span style="color: #339933;">.</span>x<span style="color: #339933;">,</span> args<span style="color: #009900;">&#91;</span>i<span style="color: #009900;">&#93;</span> <span style="color: #339933;">/</span> RATIO<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
                <span style="color: #009900;">&#125;</span>
                i<span style="color: #339933;">++;</span>
              <span style="color: #009900;">&#125;</span> <span style="color: #b1b100;">while</span> <span style="color: #009900;">&#40;</span><span style="color: #339933;">!</span>isNaN<span style="color: #009900;">&#40;</span>parseFloat<span style="color: #009900;">&#40;</span>args<span style="color: #009900;">&#91;</span>i<span style="color: #009900;">&#93;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
              chainDef<span style="color: #339933;">.</span>vertices<span style="color: #339933;">.</span>push<span style="color: #009900;">&#40;</span>currentPosition<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
              <span style="color: #b1b100;">break</span><span style="color: #339933;">;</span>
            <span style="color: #b1b100;">case</span> <span style="color: #0000ff;">&quot;C&quot;</span><span style="color: #339933;">:</span>
            <span style="color: #b1b100;">case</span> <span style="color: #0000ff;">&quot;c&quot;</span><span style="color: #339933;">:</span>
              <span style="color: #666666; font-style: italic;">// curveto</span>
              relative <span style="color: #339933;">=</span> <span style="color: #009900;">&#40;</span>command <span style="color: #339933;">==</span> <span style="color: #0000ff;">&quot;c&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
              <span style="color: #b1b100;">do</span>
              <span style="color: #009900;">&#123;</span>
                <span style="color: #b1b100;">if</span> <span style="color: #009900;">&#40;</span>relative<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
                  control1 <span style="color: #339933;">=</span> <span style="color: #000000; font-weight: bold;">new</span> b2Vec2<span style="color: #009900;">&#40;</span>currentPosition<span style="color: #339933;">.</span>x <span style="color: #339933;">+</span> args<span style="color: #009900;">&#91;</span>i<span style="color: #009900;">&#93;</span> <span style="color: #339933;">/</span> RATIO<span style="color: #339933;">,</span>
                                        currentPosition<span style="color: #339933;">.</span>y <span style="color: #339933;">+</span> args<span style="color: #009900;">&#91;</span>i<span style="color: #339933;">+</span><span style="color: #cc66cc;">1</span><span style="color: #009900;">&#93;</span> <span style="color: #339933;">/</span> RATIO<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
                  control2 <span style="color: #339933;">=</span> <span style="color: #000000; font-weight: bold;">new</span> b2Vec2<span style="color: #009900;">&#40;</span>currentPosition<span style="color: #339933;">.</span>x <span style="color: #339933;">+</span> args<span style="color: #009900;">&#91;</span>i<span style="color: #339933;">+</span><span style="color: #cc66cc;">2</span><span style="color: #009900;">&#93;</span> <span style="color: #339933;">/</span> RATIO<span style="color: #339933;">,</span>
                                        currentPosition<span style="color: #339933;">.</span>y <span style="color: #339933;">+</span> args<span style="color: #009900;">&#91;</span>i<span style="color: #339933;">+</span><span style="color: #cc66cc;">3</span><span style="color: #009900;">&#93;</span> <span style="color: #339933;">/</span> RATIO<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
                  control3 <span style="color: #339933;">=</span> <span style="color: #000000; font-weight: bold;">new</span> b2Vec2<span style="color: #009900;">&#40;</span>currentPosition<span style="color: #339933;">.</span>x <span style="color: #339933;">+</span> args<span style="color: #009900;">&#91;</span>i<span style="color: #339933;">+</span><span style="color: #cc66cc;">4</span><span style="color: #009900;">&#93;</span> <span style="color: #339933;">/</span> RATIO<span style="color: #339933;">,</span>
                                        currentPosition<span style="color: #339933;">.</span>y <span style="color: #339933;">+</span> args<span style="color: #009900;">&#91;</span>i<span style="color: #339933;">+</span><span style="color: #cc66cc;">5</span><span style="color: #009900;">&#93;</span> <span style="color: #339933;">/</span> RATIO<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
                <span style="color: #009900;">&#125;</span> <span style="color: #b1b100;">else</span> <span style="color: #009900;">&#123;</span>
                  control1 <span style="color: #339933;">=</span> <span style="color: #000000; font-weight: bold;">new</span> b2Vec2<span style="color: #009900;">&#40;</span>args<span style="color: #009900;">&#91;</span>i<span style="color: #009900;">&#93;</span> <span style="color: #339933;">/</span> RATIO<span style="color: #339933;">,</span> args<span style="color: #009900;">&#91;</span>i<span style="color: #339933;">+</span><span style="color: #cc66cc;">1</span><span style="color: #009900;">&#93;</span> <span style="color: #339933;">/</span> RATIO<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
                  control2 <span style="color: #339933;">=</span> <span style="color: #000000; font-weight: bold;">new</span> b2Vec2<span style="color: #009900;">&#40;</span>args<span style="color: #009900;">&#91;</span>i<span style="color: #339933;">+</span><span style="color: #cc66cc;">2</span><span style="color: #009900;">&#93;</span> <span style="color: #339933;">/</span> RATIO<span style="color: #339933;">,</span> args<span style="color: #009900;">&#91;</span>i<span style="color: #339933;">+</span><span style="color: #cc66cc;">3</span><span style="color: #009900;">&#93;</span> <span style="color: #339933;">/</span> RATIO<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
                  control3 <span style="color: #339933;">=</span> <span style="color: #000000; font-weight: bold;">new</span> b2Vec2<span style="color: #009900;">&#40;</span>args<span style="color: #009900;">&#91;</span>i<span style="color: #339933;">+</span><span style="color: #cc66cc;">4</span><span style="color: #009900;">&#93;</span> <span style="color: #339933;">/</span> RATIO<span style="color: #339933;">,</span> args<span style="color: #009900;">&#91;</span>i<span style="color: #339933;">+</span><span style="color: #cc66cc;">5</span><span style="color: #009900;">&#93;</span> <span style="color: #339933;">/</span> RATIO<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
                <span style="color: #009900;">&#125;</span>
                i <span style="color: #339933;">+=</span> <span style="color: #cc66cc;">6</span><span style="color: #339933;">;</span>
&nbsp;
                curve <span style="color: #339933;">=</span> b2Bezier<span style="color: #339933;">.</span>parseCurve<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#91;</span>currentPosition<span style="color: #339933;">,</span> control1<span style="color: #339933;">,</span> control2<span style="color: #339933;">,</span> control3<span style="color: #009900;">&#93;</span><span style="color: #339933;">,</span> resolution<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
                curve<span style="color: #339933;">.</span>shift<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span> <span style="color: #666666; font-style: italic;">// the first point is redundant, &quot;currentPosition&quot; is already added.</span>
                chainDef<span style="color: #339933;">.</span>vertices <span style="color: #339933;">=</span> chainDef<span style="color: #339933;">.</span>vertices<span style="color: #339933;">.</span>concat<span style="color: #009900;">&#40;</span>curve<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
                currentPosition <span style="color: #339933;">=</span> control3<span style="color: #339933;">;</span>
              <span style="color: #009900;">&#125;</span> <span style="color: #b1b100;">while</span> <span style="color: #009900;">&#40;</span><span style="color: #339933;">!</span>isNaN<span style="color: #009900;">&#40;</span>parseFloat<span style="color: #009900;">&#40;</span>args<span style="color: #009900;">&#91;</span>i<span style="color: #009900;">&#93;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
              prevControl <span style="color: #339933;">=</span> control2<span style="color: #339933;">;</span>
              <span style="color: #b1b100;">break</span><span style="color: #339933;">;</span>
            <span style="color: #b1b100;">case</span> <span style="color: #0000ff;">&quot;S&quot;</span><span style="color: #339933;">:</span>
            <span style="color: #b1b100;">case</span> <span style="color: #0000ff;">&quot;s&quot;</span><span style="color: #339933;">:</span>
              <span style="color: #666666; font-style: italic;">// shorthand curveto</span>
              relative <span style="color: #339933;">=</span> <span style="color: #009900;">&#40;</span>command <span style="color: #339933;">==</span> <span style="color: #0000ff;">&quot;s&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
              <span style="color: #b1b100;">do</span>
              <span style="color: #009900;">&#123;</span>
                <span style="color: #b1b100;">if</span> <span style="color: #009900;">&#40;</span>prevCommand <span style="color: #339933;">==</span> <span style="color: #0000ff;">&quot;C&quot;</span> <span style="color: #339933;">||</span> prevCommand <span style="color: #339933;">==</span> <span style="color: #0000ff;">&quot;c&quot;</span> <span style="color: #339933;">||</span> prevCommand <span style="color: #339933;">==</span> <span style="color: #0000ff;">&quot;S&quot;</span> <span style="color: #339933;">||</span> prevCommand <span style="color: #339933;">==</span> <span style="color: #0000ff;">&quot;s&quot;</span><span style="color: #009900;">&#41;</span>
                <span style="color: #009900;">&#123;</span>
                  control1 <span style="color: #339933;">=</span> <span style="color: #000000; font-weight: bold;">new</span> b2Vec2<span style="color: #009900;">&#40;</span>currentPosition<span style="color: #339933;">.</span>x<span style="color: #339933;">*</span><span style="color: #cc66cc;">2</span> <span style="color: #339933;">-</span> prevControl<span style="color: #339933;">.</span>x<span style="color: #339933;">,</span>
                                        currentPosition<span style="color: #339933;">.</span>y<span style="color: #339933;">*</span><span style="color: #cc66cc;">2</span> <span style="color: #339933;">-</span> prevControl<span style="color: #339933;">.</span>y<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
                <span style="color: #009900;">&#125;</span> <span style="color: #b1b100;">else</span> <span style="color: #009900;">&#123;</span>
                  control1 <span style="color: #339933;">=</span> <span style="color: #000000; font-weight: bold;">new</span> b2Vec2<span style="color: #009900;">&#40;</span>currentPosition<span style="color: #339933;">.</span>x<span style="color: #339933;">,</span>
                                        currentPosition<span style="color: #339933;">.</span>y<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
                <span style="color: #009900;">&#125;</span>
                <span style="color: #b1b100;">if</span> <span style="color: #009900;">&#40;</span>relative<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
                  control2 <span style="color: #339933;">=</span> <span style="color: #000000; font-weight: bold;">new</span> b2Vec2<span style="color: #009900;">&#40;</span>currentPosition<span style="color: #339933;">.</span>x <span style="color: #339933;">+</span> args<span style="color: #009900;">&#91;</span>i<span style="color: #009900;">&#93;</span> <span style="color: #339933;">/</span> RATIO<span style="color: #339933;">,</span>
                                        currentPosition<span style="color: #339933;">.</span>y <span style="color: #339933;">+</span> args<span style="color: #009900;">&#91;</span>i<span style="color: #339933;">+</span><span style="color: #cc66cc;">1</span><span style="color: #009900;">&#93;</span> <span style="color: #339933;">/</span> RATIO<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
                  control3 <span style="color: #339933;">=</span> <span style="color: #000000; font-weight: bold;">new</span> b2Vec2<span style="color: #009900;">&#40;</span>currentPosition<span style="color: #339933;">.</span>x <span style="color: #339933;">+</span> args<span style="color: #009900;">&#91;</span>i<span style="color: #339933;">+</span><span style="color: #cc66cc;">2</span><span style="color: #009900;">&#93;</span> <span style="color: #339933;">/</span> RATIO<span style="color: #339933;">,</span>
                                        currentPosition<span style="color: #339933;">.</span>y <span style="color: #339933;">+</span> args<span style="color: #009900;">&#91;</span>i<span style="color: #339933;">+</span><span style="color: #cc66cc;">3</span><span style="color: #009900;">&#93;</span> <span style="color: #339933;">/</span> RATIO<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
                <span style="color: #009900;">&#125;</span> <span style="color: #b1b100;">else</span> <span style="color: #009900;">&#123;</span>
                  control2 <span style="color: #339933;">=</span> <span style="color: #000000; font-weight: bold;">new</span> b2Vec2<span style="color: #009900;">&#40;</span>args<span style="color: #009900;">&#91;</span>i<span style="color: #009900;">&#93;</span> <span style="color: #339933;">/</span> RATIO<span style="color: #339933;">,</span> args<span style="color: #009900;">&#91;</span>i<span style="color: #339933;">+</span><span style="color: #cc66cc;">1</span><span style="color: #009900;">&#93;</span> <span style="color: #339933;">/</span> RATIO<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
                  control3 <span style="color: #339933;">=</span> <span style="color: #000000; font-weight: bold;">new</span> b2Vec2<span style="color: #009900;">&#40;</span>args<span style="color: #009900;">&#91;</span>i<span style="color: #339933;">+</span><span style="color: #cc66cc;">2</span><span style="color: #009900;">&#93;</span> <span style="color: #339933;">/</span> RATIO<span style="color: #339933;">,</span> args<span style="color: #009900;">&#91;</span>i<span style="color: #339933;">+</span><span style="color: #cc66cc;">3</span><span style="color: #009900;">&#93;</span> <span style="color: #339933;">/</span> RATIO<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
                <span style="color: #009900;">&#125;</span>
                i <span style="color: #339933;">+=</span> <span style="color: #cc66cc;">4</span><span style="color: #339933;">;</span>
&nbsp;
                curve <span style="color: #339933;">=</span> b2Bezier<span style="color: #339933;">.</span>parseCurve<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#91;</span>currentPosition<span style="color: #339933;">,</span> control1<span style="color: #339933;">,</span> control2<span style="color: #339933;">,</span> control3<span style="color: #009900;">&#93;</span><span style="color: #339933;">,</span> resolution<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
                curve<span style="color: #339933;">.</span>shift<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span> <span style="color: #666666; font-style: italic;">// the first point is redundant, &quot;currentPosition&quot; is already added.</span>
                chainDef<span style="color: #339933;">.</span>vertices <span style="color: #339933;">=</span> chainDef<span style="color: #339933;">.</span>vertices<span style="color: #339933;">.</span>concat<span style="color: #009900;">&#40;</span>curve<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
                currentPosition <span style="color: #339933;">=</span> control3<span style="color: #339933;">;</span>
                prevControl <span style="color: #339933;">=</span> control2<span style="color: #339933;">;</span>
                prevCommand <span style="color: #339933;">=</span> command<span style="color: #339933;">;</span>
&nbsp;
              <span style="color: #009900;">&#125;</span> <span style="color: #b1b100;">while</span> <span style="color: #009900;">&#40;</span><span style="color: #339933;">!</span>isNaN<span style="color: #009900;">&#40;</span>parseFloat<span style="color: #009900;">&#40;</span>args<span style="color: #009900;">&#91;</span>i<span style="color: #009900;">&#93;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
              <span style="color: #b1b100;">break</span><span style="color: #339933;">;</span>
            <span style="color: #b1b100;">case</span> <span style="color: #0000ff;">&quot;Q&quot;</span><span style="color: #339933;">:</span>
            <span style="color: #b1b100;">case</span> <span style="color: #0000ff;">&quot;q&quot;</span><span style="color: #339933;">:</span>
            <span style="color: #b1b100;">case</span> <span style="color: #0000ff;">&quot;T&quot;</span><span style="color: #339933;">:</span>
            <span style="color: #b1b100;">case</span> <span style="color: #0000ff;">&quot;t&quot;</span><span style="color: #339933;">:</span>
            <span style="color: #b1b100;">case</span> <span style="color: #0000ff;">&quot;A&quot;</span><span style="color: #339933;">:</span>
            <span style="color: #b1b100;">case</span> <span style="color: #0000ff;">&quot;a&quot;</span><span style="color: #339933;">:</span>
              throw <span style="color: #000000; font-weight: bold;">new</span> Error<span style="color: #009900;">&#40;</span><span style="color: #0000ff;">&quot;TODO: Unimplemented path command: &quot;</span> <span style="color: #339933;">+</span> command<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
              <span style="color: #b1b100;">break</span><span style="color: #339933;">;</span>
          <span style="color: #009900;">&#125;</span>
          prevCommand <span style="color: #339933;">=</span> command<span style="color: #339933;">;</span>
        <span style="color: #009900;">&#125;</span>
      <span style="color: #009900;">&#125;</span>
	  <span style="color: #b1b100;">return</span> shapes<span style="color: #339933;">;</span>
    <span style="color: #009900;">&#125;</span>
&nbsp;
    <span style="color: #000000; font-weight: bold;">private</span> static <span style="color: #000000; font-weight: bold;">function</span> filterEmptyString<span style="color: #009900;">&#40;</span>item<span style="color: #339933;">:</span> <span style="color: #339933;">*,</span> index<span style="color: #339933;">:</span> int<span style="color: #339933;">,</span> <span style="color: #990000;">array</span><span style="color: #339933;">:</span> <span style="color: #990000;">Array</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">:</span> Boolean <span style="color: #009900;">&#123;</span>
      <span style="color: #b1b100;">return</span> item <span style="color: #339933;">!=</span> <span style="color: #0000ff;">&quot;&quot;</span><span style="color: #339933;">;</span>
    <span style="color: #009900;">&#125;</span>
&nbsp;
    <span style="color: #000000; font-weight: bold;">public</span> static <span style="color: #000000; font-weight: bold;">function</span> returnStrokeWidth<span style="color: #009900;">&#40;</span>pathS<span style="color: #339933;">:</span>String<span style="color: #009900;">&#41;</span><span style="color: #339933;">:</span>Number
    <span style="color: #009900;">&#123;</span>
      <span style="color: #000000; font-weight: bold;">var</span> bar<span style="color: #339933;">:</span><span style="color: #990000;">Array</span><span style="color: #339933;">;</span>
      bar <span style="color: #339933;">=</span> <span style="color: #009900;">&#40;</span>pathS<span style="color: #339933;">.</span>replace<span style="color: #009900;">&#40;</span><span style="color: #0000ff;">&quot;px&quot;</span><span style="color: #339933;">,</span> <span style="color: #0000ff;">&quot;&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">.</span><span style="color: #990000;">split</span><span style="color: #009900;">&#40;</span><span style="color: #0000ff;">&quot;;&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span> <span style="color: #666666; font-style: italic;">//get rid of px in line-width and split</span>
      <span style="color: #b1b100;">return</span> Number<span style="color: #009900;">&#40;</span>bar<span style="color: #009900;">&#91;</span><span style="color: #cc66cc;">3</span><span style="color: #009900;">&#93;</span><span style="color: #339933;">.</span>slice<span style="color: #009900;">&#40;</span><span style="color: #cc66cc;">13</span><span style="color: #339933;">,</span> bar<span style="color: #009900;">&#91;</span><span style="color: #cc66cc;">3</span><span style="color: #009900;">&#93;</span><span style="color: #339933;">.</span>length<span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
    <span style="color: #009900;">&#125;</span>
&nbsp;
  <span style="color: #009900;">&#125;</span>
&nbsp;
<span style="color: #009900;">&#125;</span></pre></td></tr></table></div>

<p><strong>b2Bezier.as</strong></p>

<div class="wp_syntax"><table><tr><td class="line_numbers"><pre>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
</pre></td><td class="code"><pre class="php" style="font-family:monospace;">package  
<span style="color: #009900;">&#123;</span>
	import Box2D<span style="color: #339933;">.</span>Common<span style="color: #339933;">.</span>Math<span style="color: #339933;">.</span>b2Vec2<span style="color: #339933;">;</span>
&nbsp;
	<span style="color: #009933; font-style: italic;">/** 
	 * ...This class accepts an Array of four b2vec2s (corresponding to the SVG format of Bezier curves) and outputs an array of b2vec2s
	 * The returned array contains all of the points that should be declared in an edgeChain version of the curve
	 * This is a Flash port of the C++ version at http://www.box2d.org/forum/viewtopic.php?p=9865#p9865
	 * The math for transforming a Bezien curve is found at http://www.niksula.cs.hut.fi/~hkankaan/Homepages/bezierfast.html
	 * Thanks to Shaktool off the Box2D forums for the help
	 * 
	 * Quest Yarbrough/Ezion &lt;www.ezqueststudios.com&gt;
	 */</span>
	<span style="color: #000000; font-weight: bold;">public</span> <span style="color: #000000; font-weight: bold;">class</span> b2Bezier 
	<span style="color: #009900;">&#123;</span>
&nbsp;
		<span style="color: #666666; font-style: italic;">//Resolution is the number of lines to segment the curve into</span>
		<span style="color: #666666; font-style: italic;">//cPoints must be structured like below.</span>
		<span style="color: #666666; font-style: italic;">//cPoints[0] = starting point</span>
		<span style="color: #666666; font-style: italic;">//cPoints[1] = starting point control point</span>
		<span style="color: #666666; font-style: italic;">//cPoints[2] = end point control point</span>
		<span style="color: #666666; font-style: italic;">//cPoints[3] = end point</span>
&nbsp;
		<span style="color: #000000; font-weight: bold;">public</span> static <span style="color: #000000; font-weight: bold;">function</span> parseCurve<span style="color: #009900;">&#40;</span>cPoints<span style="color: #339933;">:</span><span style="color: #990000;">Array</span><span style="color: #339933;">,</span> resolution<span style="color: #339933;">:</span>Number<span style="color: #009900;">&#41;</span> 
		<span style="color: #009900;">&#123;</span>
			<span style="color: #b1b100;">if</span> <span style="color: #009900;">&#40;</span>resolution <span style="color: #339933;">==</span> <span style="color: #cc66cc;">0</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
				<span style="color: #b1b100;">return</span> <span style="color: #009900; font-weight: bold;">null</span><span style="color: #339933;">;</span>
			<span style="color: #009900;">&#125;</span>
&nbsp;
			<span style="color: #000000; font-weight: bold;">var</span> f<span style="color: #339933;">:</span>b2Vec2<span style="color: #339933;">,</span> fd<span style="color: #339933;">:</span>b2Vec2<span style="color: #339933;">,</span> fdd<span style="color: #339933;">:</span>b2Vec2<span style="color: #339933;">,</span> fddd<span style="color: #339933;">:</span>b2Vec2<span style="color: #339933;">,</span> fdd_per_2<span style="color: #339933;">:</span>b2Vec2<span style="color: #339933;">,</span> fddd_per_2<span style="color: #339933;">:</span>b2Vec2<span style="color: #339933;">,</span> fddd_per_6<span style="color: #339933;">:</span>b2Vec2<span style="color: #339933;">;</span>
			f <span style="color: #339933;">=</span> <span style="color: #000000; font-weight: bold;">new</span> b2Vec2<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span> fd <span style="color: #339933;">=</span> <span style="color: #000000; font-weight: bold;">new</span> b2Vec2<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span> fdd <span style="color: #339933;">=</span> <span style="color: #000000; font-weight: bold;">new</span> b2Vec2<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span> fddd <span style="color: #339933;">=</span> <span style="color: #000000; font-weight: bold;">new</span> b2Vec2<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
			fdd_per_2 <span style="color: #339933;">=</span> <span style="color: #000000; font-weight: bold;">new</span> b2Vec2<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span> fddd_per_2 <span style="color: #339933;">=</span> <span style="color: #000000; font-weight: bold;">new</span> b2Vec2<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span> fddd_per_6 <span style="color: #339933;">=</span> <span style="color: #000000; font-weight: bold;">new</span> b2Vec2<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
			<span style="color: #000000; font-weight: bold;">var</span> t<span style="color: #339933;">:</span>Number <span style="color: #339933;">=</span> <span style="color:#800080;">1.0</span> <span style="color: #339933;">/</span> resolution<span style="color: #339933;">;</span>
			<span style="color: #000000; font-weight: bold;">var</span> t2<span style="color: #339933;">:</span>Number <span style="color: #339933;">=</span> t <span style="color: #339933;">*</span> t<span style="color: #339933;">;</span>
&nbsp;
			<span style="color: #666666; font-style: italic;">//I've tried to optimize the amount of</span>
			<span style="color: #666666; font-style: italic;">//multiplications here, but these are exactly</span>
			<span style="color: #666666; font-style: italic;">//the same formulas that were derived earlier</span>
			<span style="color: #666666; font-style: italic;">//for f(0), f'(0)*t etc.</span>
&nbsp;
			f<span style="color: #339933;">.</span>x <span style="color: #339933;">=</span> cPoints<span style="color: #009900;">&#91;</span><span style="color: #cc66cc;">0</span><span style="color: #009900;">&#93;</span><span style="color: #339933;">.</span>x<span style="color: #339933;">;</span>
			f<span style="color: #339933;">.</span>y <span style="color: #339933;">=</span> cPoints<span style="color: #009900;">&#91;</span><span style="color: #cc66cc;">0</span><span style="color: #009900;">&#93;</span><span style="color: #339933;">.</span>y<span style="color: #339933;">;</span>
&nbsp;
			fd<span style="color: #339933;">.</span>x <span style="color: #339933;">=</span> <span style="color:#800080;">3.0</span> <span style="color: #339933;">*</span> t <span style="color: #339933;">*</span> <span style="color: #009900;">&#40;</span>cPoints<span style="color: #009900;">&#91;</span><span style="color: #cc66cc;">1</span><span style="color: #009900;">&#93;</span><span style="color: #339933;">.</span>x <span style="color: #339933;">-</span> cPoints<span style="color: #009900;">&#91;</span><span style="color: #cc66cc;">0</span><span style="color: #009900;">&#93;</span><span style="color: #339933;">.</span>x<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
			fd<span style="color: #339933;">.</span>y <span style="color: #339933;">=</span> <span style="color:#800080;">3.0</span> <span style="color: #339933;">*</span> t <span style="color: #339933;">*</span> <span style="color: #009900;">&#40;</span>cPoints<span style="color: #009900;">&#91;</span><span style="color: #cc66cc;">1</span><span style="color: #009900;">&#93;</span><span style="color: #339933;">.</span>y <span style="color: #339933;">-</span> cPoints<span style="color: #009900;">&#91;</span><span style="color: #cc66cc;">0</span><span style="color: #009900;">&#93;</span><span style="color: #339933;">.</span>y<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
			fdd_per_2<span style="color: #339933;">.</span>x <span style="color: #339933;">=</span> <span style="color:#800080;">3.0</span> <span style="color: #339933;">*</span> t2 <span style="color: #339933;">*</span> <span style="color: #009900;">&#40;</span>cPoints<span style="color: #009900;">&#91;</span><span style="color: #cc66cc;">0</span><span style="color: #009900;">&#93;</span><span style="color: #339933;">.</span>x <span style="color: #339933;">-</span> <span style="color:#800080;">2.0</span> <span style="color: #339933;">*</span> cPoints<span style="color: #009900;">&#91;</span><span style="color: #cc66cc;">1</span><span style="color: #009900;">&#93;</span><span style="color: #339933;">.</span>x <span style="color: #339933;">+</span> cPoints<span style="color: #009900;">&#91;</span><span style="color: #cc66cc;">2</span><span style="color: #009900;">&#93;</span><span style="color: #339933;">.</span>x<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
			fdd_per_2<span style="color: #339933;">.</span>y <span style="color: #339933;">=</span> <span style="color:#800080;">3.0</span> <span style="color: #339933;">*</span> t2 <span style="color: #339933;">*</span> <span style="color: #009900;">&#40;</span>cPoints<span style="color: #009900;">&#91;</span><span style="color: #cc66cc;">0</span><span style="color: #009900;">&#93;</span><span style="color: #339933;">.</span>y <span style="color: #339933;">-</span> <span style="color:#800080;">2.0</span> <span style="color: #339933;">*</span> cPoints<span style="color: #009900;">&#91;</span><span style="color: #cc66cc;">1</span><span style="color: #009900;">&#93;</span><span style="color: #339933;">.</span>y <span style="color: #339933;">+</span> cPoints<span style="color: #009900;">&#91;</span><span style="color: #cc66cc;">2</span><span style="color: #009900;">&#93;</span><span style="color: #339933;">.</span>y<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
			fddd_per_2<span style="color: #339933;">.</span>x <span style="color: #339933;">=</span> <span style="color:#800080;">3.0</span> <span style="color: #339933;">*</span> t2 <span style="color: #339933;">*</span> t <span style="color: #339933;">*</span> <span style="color: #009900;">&#40;</span><span style="color:#800080;">3.0</span> <span style="color: #339933;">*</span> <span style="color: #009900;">&#40;</span>cPoints<span style="color: #009900;">&#91;</span><span style="color: #cc66cc;">1</span><span style="color: #009900;">&#93;</span><span style="color: #339933;">.</span>x <span style="color: #339933;">-</span> cPoints<span style="color: #009900;">&#91;</span><span style="color: #cc66cc;">2</span><span style="color: #009900;">&#93;</span><span style="color: #339933;">.</span>x<span style="color: #009900;">&#41;</span> <span style="color: #339933;">+</span> cPoints<span style="color: #009900;">&#91;</span><span style="color: #cc66cc;">3</span><span style="color: #009900;">&#93;</span><span style="color: #339933;">.</span>x <span style="color: #339933;">-</span> cPoints<span style="color: #009900;">&#91;</span><span style="color: #cc66cc;">0</span><span style="color: #009900;">&#93;</span><span style="color: #339933;">.</span>x<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
			fddd_per_2<span style="color: #339933;">.</span>y <span style="color: #339933;">=</span> <span style="color:#800080;">3.0</span> <span style="color: #339933;">*</span> t2 <span style="color: #339933;">*</span> t <span style="color: #339933;">*</span> <span style="color: #009900;">&#40;</span><span style="color:#800080;">3.0</span> <span style="color: #339933;">*</span> <span style="color: #009900;">&#40;</span>cPoints<span style="color: #009900;">&#91;</span><span style="color: #cc66cc;">1</span><span style="color: #009900;">&#93;</span><span style="color: #339933;">.</span>y <span style="color: #339933;">-</span> cPoints<span style="color: #009900;">&#91;</span><span style="color: #cc66cc;">2</span><span style="color: #009900;">&#93;</span><span style="color: #339933;">.</span>y<span style="color: #009900;">&#41;</span> <span style="color: #339933;">+</span> cPoints<span style="color: #009900;">&#91;</span><span style="color: #cc66cc;">3</span><span style="color: #009900;">&#93;</span><span style="color: #339933;">.</span>y <span style="color: #339933;">-</span> cPoints<span style="color: #009900;">&#91;</span><span style="color: #cc66cc;">0</span><span style="color: #009900;">&#93;</span><span style="color: #339933;">.</span>y<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
			fddd<span style="color: #339933;">.</span>x <span style="color: #339933;">=</span> fddd_per_2<span style="color: #339933;">.</span>x <span style="color: #339933;">+</span> fddd_per_2<span style="color: #339933;">.</span>x<span style="color: #339933;">;</span>
			fddd<span style="color: #339933;">.</span>y <span style="color: #339933;">=</span> fddd_per_2<span style="color: #339933;">.</span>y <span style="color: #339933;">+</span> fddd_per_2<span style="color: #339933;">.</span>y<span style="color: #339933;">;</span>
&nbsp;
			fdd<span style="color: #339933;">.</span>x <span style="color: #339933;">=</span> fdd_per_2<span style="color: #339933;">.</span>x <span style="color: #339933;">+</span> fdd_per_2<span style="color: #339933;">.</span>x<span style="color: #339933;">;</span>
			fdd<span style="color: #339933;">.</span>y <span style="color: #339933;">=</span> fdd_per_2<span style="color: #339933;">.</span>y <span style="color: #339933;">+</span> fdd_per_2<span style="color: #339933;">.</span>y<span style="color: #339933;">;</span>
&nbsp;
			fddd_per_6<span style="color: #339933;">.</span>x <span style="color: #339933;">=</span> <span style="color: #009900;">&#40;</span><span style="color:#800080;">1.0</span> <span style="color: #339933;">/</span> <span style="color: #cc66cc;">3</span><span style="color: #009900;">&#41;</span> <span style="color: #339933;">*</span> fddd_per_2<span style="color: #339933;">.</span>x<span style="color: #339933;">;</span>
			fddd_per_6<span style="color: #339933;">.</span>y <span style="color: #339933;">=</span> <span style="color: #009900;">&#40;</span><span style="color:#800080;">1.0</span> <span style="color: #339933;">/</span> <span style="color: #cc66cc;">3</span><span style="color: #009900;">&#41;</span> <span style="color: #339933;">*</span> fddd_per_2<span style="color: #339933;">.</span>y<span style="color: #339933;">;</span>
&nbsp;
			<span style="color: #000000; font-weight: bold;">var</span> ret<span style="color: #339933;">:</span><span style="color: #990000;">Array</span> <span style="color: #339933;">=</span> <span style="color: #000000; font-weight: bold;">new</span> <span style="color: #990000;">Array</span><span style="color: #009900;">&#40;</span>resolution<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
			<span style="color: #b1b100;">if</span> <span style="color: #009900;">&#40;</span><span style="color: #339933;">!</span>ret<span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
				<span style="color: #b1b100;">return</span> <span style="color: #009900; font-weight: bold;">null</span><span style="color: #339933;">;</span>
			<span style="color: #009900;">&#125;</span>
&nbsp;
			<span style="color: #b1b100;">for</span> <span style="color: #009900;">&#40;</span><span style="color: #000000; font-weight: bold;">var</span> loop <span style="color: #339933;">=</span> <span style="color: #cc66cc;">0</span><span style="color: #339933;">;</span> loop <span style="color: #339933;">&lt;</span> resolution <span style="color: #339933;">-</span> <span style="color: #cc66cc;">1</span><span style="color: #339933;">;</span> loop <span style="color: #339933;">+=</span> <span style="color: #cc66cc;">1</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
				ret<span style="color: #009900;">&#91;</span>loop<span style="color: #009900;">&#93;</span> <span style="color: #339933;">=</span> <span style="color: #000000; font-weight: bold;">new</span> b2Vec2<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
				ret<span style="color: #009900;">&#91;</span>loop<span style="color: #009900;">&#93;</span><span style="color: #339933;">.</span>x <span style="color: #339933;">=</span> f<span style="color: #339933;">.</span>x<span style="color: #339933;">;</span>
				ret<span style="color: #009900;">&#91;</span>loop<span style="color: #009900;">&#93;</span><span style="color: #339933;">.</span>y <span style="color: #339933;">=</span> f<span style="color: #339933;">.</span>y<span style="color: #339933;">;</span>
&nbsp;
				f<span style="color: #339933;">.</span>x <span style="color: #339933;">=</span> f<span style="color: #339933;">.</span>x <span style="color: #339933;">+</span> fd<span style="color: #339933;">.</span>x <span style="color: #339933;">+</span> fdd_per_2<span style="color: #339933;">.</span>x <span style="color: #339933;">+</span> fddd_per_6<span style="color: #339933;">.</span>x<span style="color: #339933;">;</span>
				f<span style="color: #339933;">.</span>y <span style="color: #339933;">=</span> f<span style="color: #339933;">.</span>y <span style="color: #339933;">+</span> fd<span style="color: #339933;">.</span>y <span style="color: #339933;">+</span> fdd_per_2<span style="color: #339933;">.</span>y <span style="color: #339933;">+</span> fddd_per_6<span style="color: #339933;">.</span>y<span style="color: #339933;">;</span>
&nbsp;
				fd<span style="color: #339933;">.</span>x <span style="color: #339933;">=</span> fd<span style="color: #339933;">.</span>x <span style="color: #339933;">+</span> fdd<span style="color: #339933;">.</span>x <span style="color: #339933;">+</span> fddd_per_2<span style="color: #339933;">.</span>x<span style="color: #339933;">;</span>
				fd<span style="color: #339933;">.</span>y <span style="color: #339933;">=</span> fd<span style="color: #339933;">.</span>y <span style="color: #339933;">+</span> fdd<span style="color: #339933;">.</span>y <span style="color: #339933;">+</span> fddd_per_2<span style="color: #339933;">.</span>y<span style="color: #339933;">;</span>
&nbsp;
				fdd<span style="color: #339933;">.</span>x <span style="color: #339933;">=</span> fdd<span style="color: #339933;">.</span>x <span style="color: #339933;">+</span> fddd<span style="color: #339933;">.</span>x<span style="color: #339933;">;</span>
				fdd<span style="color: #339933;">.</span>y <span style="color: #339933;">=</span> fdd<span style="color: #339933;">.</span>y <span style="color: #339933;">+</span> fddd<span style="color: #339933;">.</span>y<span style="color: #339933;">;</span>
&nbsp;
				fdd_per_2<span style="color: #339933;">.</span>x <span style="color: #339933;">=</span> fdd_per_2<span style="color: #339933;">.</span>x <span style="color: #339933;">+</span> fddd_per_2<span style="color: #339933;">.</span>x<span style="color: #339933;">;</span>
				fdd_per_2<span style="color: #339933;">.</span>y <span style="color: #339933;">=</span> fdd_per_2<span style="color: #339933;">.</span>y <span style="color: #339933;">+</span> fddd_per_2<span style="color: #339933;">.</span>y<span style="color: #339933;">;</span>
			<span style="color: #009900;">&#125;</span>
&nbsp;
			ret<span style="color: #009900;">&#91;</span>ret<span style="color: #339933;">.</span>length <span style="color: #339933;">-</span> <span style="color: #cc66cc;">1</span><span style="color: #009900;">&#93;</span> <span style="color: #339933;">=</span> <span style="color: #000000; font-weight: bold;">new</span> b2Vec2<span style="color: #009900;">&#40;</span>cPoints<span style="color: #009900;">&#91;</span><span style="color: #cc66cc;">3</span><span style="color: #009900;">&#93;</span><span style="color: #339933;">.</span>x<span style="color: #339933;">,</span> cPoints<span style="color: #009900;">&#91;</span><span style="color: #cc66cc;">3</span><span style="color: #009900;">&#93;</span><span style="color: #339933;">.</span>y<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span> <span style="color: #666666; font-style: italic;">//last vertice not added by C++ version</span>
&nbsp;
			<span style="color: #b1b100;">return</span> ret<span style="color: #339933;">;</span>
		<span style="color: #009900;">&#125;</span>
&nbsp;
	<span style="color: #009900;">&#125;</span>
&nbsp;
<span style="color: #009900;">&#125;</span></pre></td></tr></table></div>

<p>These classes may be included in the Box2D engine at some point, but until then they are available here. If anyone comes up with errors, drop a response in the comments and I&#8217;ll see what I can do.
<p>-></p>
<p><i>Thanks to <a href="http://www.johnnesky.com">John Nesky</a> for helping write the curve parser, and writing/restructuring the entire parser.</i></p>


<p>Related posts:<ol><li><a href='http://www.ezqueststudios.com/blog/creating-levels-box2d/' rel='bookmark' title='Permanent Link: Creating Levels in Box2D'>Creating Levels in Box2D</a></li>
<li><a href='http://www.ezqueststudios.com/blog/as3-dynamic-movieclip-animation-speed/' rel='bookmark' title='Permanent Link: Dynamic Movieclip Animation Speed in AS3'>Dynamic Movieclip Animation Speed in AS3</a></li>
</ol></p>
<p>Related posts brought to you by <a href='http://mitcho.com/code/yarpp/'>Yet Another Related Posts Plugin</a>.</p>]]></content:encoded>
			<wfw:commentRss>http://www.ezqueststudios.com/blog/box2d-svg-parser-curves/feed/</wfw:commentRss>
		<slash:comments>7</slash:comments>
		</item>
		<item>
		<title>Avoiding the Compiler&#8217;s Whip: 9 Flash AS3 Tips for Beginners</title>
		<link>http://www.ezqueststudios.com/blog/10-tips-flash-beginner-as3/</link>
		<comments>http://www.ezqueststudios.com/blog/10-tips-flash-beginner-as3/#comments</comments>
		<pubDate>Fri, 24 Apr 2009 17:09:01 +0000</pubDate>
		<dc:creator>Quest</dc:creator>
				<category><![CDATA[Flash]]></category>
		<category><![CDATA[AS3]]></category>

		<guid isPermaLink="false">http://www.ezqueststudios.com/blog/?p=265</guid>
		<description><![CDATA[<p><i>These tips are based on Flash CS4. They are also useful for CS3 and possibly some earlier versions.</i></p>
<p>It&#8217;s been about 3 weeks since I started programming in Flash AS3. I&#8217;ve caused the compiler an unholy amount of errors and here&#8217;s&#8230;</p>


Related posts:<ol><li><a href='http://www.ezqueststudios.com/blog/as3-dynamic-movieclip-animation-speed/' rel='bookmark' title='Permanent Link: Dynamic Movieclip Animation Speed in AS3'>Dynamic Movieclip Animation Speed in AS3</a></li>
</ol>

Related posts brought to you by <a href='http://mitcho.com/code/yarpp/'>Yet Another Related Posts Plugin</a>.]]></description>
			<content:encoded><![CDATA[<p><i>These tips are based on Flash CS4. They are also useful for CS3 and possibly some earlier versions.</i></p>
<p>It&#8217;s been about 3 weeks since I started programming in Flash AS3. I&#8217;ve caused the compiler an unholy amount of errors and here&#8217;s what I&#8217;ve learned.</p>
<h3>The List</h3>
<ol>
<li><a title="AS2/3 Editor" href="http://www.flashdevelop.org/community/" target="_blank">FlashDevelop</a></li>
<p>This editor is leagues better than the one included in Flash CS4. Autocomplete and function parameters are two of its greatest features.</p>
<li>Preventing Memory Leaks</li>
<p>It&#8217;s extremely important to a big project that you understand how to make the garbage collector delete objects. I highly recommend reading <a href="http://www.gskinner.com/blog/archives/2006/06/as3_resource_ma.html">this</a> link on AS3 Garbage Collection, or you may spend several hours reworking your Flash Project when you find out it has memory leaks.</p>
<li>Event Listeners</li>
<p>Adding Event Listeners to objects should usually be invoked with addEventListener( Event, callback, false, 0, true ). If you do not have the last parameter set to true, the garbage collector will not delete that Event Listener&#8217;s class until you manually remove it.</p>
<li>Display List</li>
<p>Objects most recently added to the stage with addChild() will appear on top of other objects. When you invoke addChild(displayObject), it is stored in the parent object&#8217;s display list. Flash goes through each display list, starting with the stage, and renders each object.</p>
<li><a title="GreenThumb Global Variables Post" href="http://www.greenethumb.com/article/11/global-variables-in-as3" target="_blank">Global Variables</a></li>
<p>From an Object Oriented perspective, these are bad. However, sometimes it&#8217;s really useful to have them.</p>
<li><a title="Box2DFlash Homepage" href="http://box2dflash.sourceforge.net/" target="_blank">Box2D Physics Engine</a></li>
<p>One of the top physics engines for Flash, and for good reason. It is fast, powerful, and has numerous ports to other languages. One word of caution: you cannot use concave shapes.</p>
<li><a href="/source/tutorials/mathMisc.zip">mathMisc.as</a></li>
<p>These are just a few useful math functions I didn&#8217;t find in Flash. The naming and arguments follow the similar functions from Game Maker 7. If you&#8217;re good at trig these are very simple, but still useful. (point_direction, point_distance, lengthdir_x, lengthdir_y, degToRad, radToDeg)</p>
<li><a title="Flash Hook Debugger" href="http://www.demonsterdebugger.com/" target="_blank">MonterDebugger</a></li>
<p>Along with providing an nice graph of your Flash&#8217;s memory usage and FPS, MonsterDebugger will allow you to trace around your classes and see everything going on under the hood. This helps when you start getting runtime errors, but note that it takes a while to figure out the structure of this debugger to get useful data from it.</p>
<li>Setting the Class of a .swf</li>
<p>You can specify a default ActionScript class that a .swf file should load on runtime. You can reach this under the <strong>Document Properties</strong> panel, where you type in the name of the file under <strong>Class</strong> (without the .as).</p>
<li>Setting the Path to your AS3 files</li>
<p>Flash will throw an error if it can&#8217;t find your AS3 files. You can tell Flash where to find these under <strong>File -> Publish Settings -> ActionScript 3.0 -> Sourcepaths</strong>.
</ol>
<p>
Hope this helps you out a bit.</p>


<p>Related posts:<ol><li><a href='http://www.ezqueststudios.com/blog/as3-dynamic-movieclip-animation-speed/' rel='bookmark' title='Permanent Link: Dynamic Movieclip Animation Speed in AS3'>Dynamic Movieclip Animation Speed in AS3</a></li>
</ol></p>
<p>Related posts brought to you by <a href='http://mitcho.com/code/yarpp/'>Yet Another Related Posts Plugin</a>.</p>]]></content:encoded>
			<wfw:commentRss>http://www.ezqueststudios.com/blog/10-tips-flash-beginner-as3/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Creating Levels in Box2D</title>
		<link>http://www.ezqueststudios.com/blog/creating-levels-box2d/</link>
		<comments>http://www.ezqueststudios.com/blog/creating-levels-box2d/#comments</comments>
		<pubDate>Thu, 23 Apr 2009 05:23:23 +0000</pubDate>
		<dc:creator>Quest</dc:creator>
				<category><![CDATA[Flash]]></category>
		<category><![CDATA[Programming]]></category>
		<category><![CDATA[AS3]]></category>
		<category><![CDATA[box2D]]></category>

		<guid isPermaLink="false">http://www.ezqueststudios.com/blog/?p=40</guid>
		<description><![CDATA[<p><em><strong>Note:</strong> The parser in this tutorial has been updated by the curve parser <a href="http://www.ezqueststudios.com/blog/box2d-svg-parser-curves/">here</a>. This tutorial still explains InkScape and the &#8220;floors/ceilings&#8221; idea.</em></p>
<p>-&#62;</p>
<p><em>This tutorial is geared for creating levels for the Flash version of Box2D. With a little work, you can&#8230;</em></p>


Related posts:<ol><li><a href='http://www.ezqueststudios.com/blog/box2d-svg-parser-curves/' rel='bookmark' title='Permanent Link: Box2D SVG Parser with Curve Support'>Box2D SVG Parser with Curve Support</a></li>
</ol>

Related posts brought to you by <a href='http://mitcho.com/code/yarpp/'>Yet Another Related Posts Plugin</a>.]]></description>
			<content:encoded><![CDATA[<p><em><strong>Note:</strong> The parser in this tutorial has been updated by the curve parser <a href="http://www.ezqueststudios.com/blog/box2d-svg-parser-curves/">here</a>. This tutorial still explains InkScape and the &#8220;floors/ceilings&#8221; idea.</em></p>
<p>-&gt;</p>
<p><em>This tutorial is geared for creating levels for the Flash version of Box2D. With a little work, you can also use these on other versions of Box2D.</em></p>
<h3>Things you will need</h3>
<ul>
<li>The latest Box2D from the <a title="Box2DFlash SourceForge SVN Repository" href="https://sourceforge.net/scm/?type=svn&amp;group_id=210232" target="_blank">SVN Repository</a></li>
<li>Flash CS3/CS4 with ActionScript 3.0</li>
<li><a title="Vector Graphics Program" href="http://www.inkscape.org/" target="_blank">InkScape</a></li>
<li><a title="Assists with creating AS3 code" href="http://www.flashdevelop.org/community/" target="_blank">FlashDevelop</a> (<em>optional</em>)</li>
</ul>
<h3>Creating Edges in Box2D</h3>
<p>The easiest way of creating levels in Box2D uses edge chains, which can be be declared like so&#8230;</p>

<div class="wp_syntax"><div class="code"><pre class="php" style="font-family:monospace;"><span style="color: #000000; font-weight: bold;">var</span> bodyDef<span style="color: #339933;">:</span> b2BodyDef <span style="color: #339933;">=</span> <span style="color: #000000; font-weight: bold;">new</span> b2BodyDef<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #000000; font-weight: bold;">var</span> chainDef<span style="color: #339933;">:</span> b2EdgeChainDef <span style="color: #339933;">=</span> <span style="color: #000000; font-weight: bold;">new</span> b2EdgeChainDef<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
chainDef<span style="color: #339933;">.</span>friction <span style="color: #339933;">=</span> <span style="color:#800080;">0.5</span><span style="color: #339933;">;</span>
chainDef<span style="color: #339933;">.</span>restitution <span style="color: #339933;">=</span> <span style="color:#800080;">0.0</span><span style="color: #339933;">;</span>
chainDef<span style="color: #339933;">.</span>vertices<span style="color: #339933;">.</span>push<span style="color: #009900;">&#40;</span><span style="color: #000000; font-weight: bold;">new</span> b2Vec2<span style="color: #009900;">&#40;</span>x1<span style="color: #339933;">,</span> y1<span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span> <span style="color: #666666; font-style: italic;">//Must pass b2Vec2 for line coordinates</span>
chainDef<span style="color: #339933;">.</span>vertices<span style="color: #339933;">.</span>push<span style="color: #009900;">&#40;</span><span style="color: #000000; font-weight: bold;">new</span> b2Vec2<span style="color: #009900;">&#40;</span>x2<span style="color: #339933;">,</span> y2<span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
chainDef<span style="color: #339933;">.</span>vertexCount <span style="color: #339933;">=</span> chainDef<span style="color: #339933;">.</span>vertices<span style="color: #339933;">.</span>length<span style="color: #339933;">;</span> <span style="color: #666666; font-style: italic;">//# of points = however many in definition</span>
world<span style="color: #339933;">.</span>GetGroundBody<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">.</span>CreateShape<span style="color: #009900;">&#40;</span>chainDef<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span> <span style="color: #666666; font-style: italic;">//Create the edgeShape</span></pre></div></div>

<p>However, coding these levels by hand will take you much too long, especially if your level uses curves. An easy alternative to manually coding these levels is to use <a href="http://www.inkscape.org/">InkScape</a>, a program that allows you to create <a title="Wikipedia Article" href="http://en.wikipedia.org/wiki/Vector_graphics" target="_blank">vector art</a> and saves it in  <a title="Wikipedia Article: Scalable Vector Graphics" href="http://en.wikipedia.org/wiki/Scalable_Vector_Graphics" target="_blank">svg</a> format.</p>
<h3>Creating Levels in InkScape</h3>
<p>Open up an InkScape document and go to <strong>File -&gt; Document Properties</strong>. From here you may set the canvas size and enable a grid to help you draw.</p>
<p><a href="http://www.shareapic.net/content.php?id=16344189&amp;owner=Ezion" target="_blank"><img class="aligncenter" src="http://preview.shareapic.net/preview5/016344189.jpg" border="0" alt="" /></a></p>
<h3>Edges and Collision Checking</h3>
<p>You may notice  that the Y values in on the ruler in your InkScape document start at the bottom and increase as you go up. When we convert the InkScape SVG file into Box2D coordinates, the parser (converting part of the code) will determine the side of the line that checks for collision based on how your Y coordinates are set up.</p>
<p>Box2D will only check collision on one side of your lines. Which side of the line is checked for collision is determined by the way you draw it in InkScape.<br />
When your Y coordinates start at the bottom and increase as you go up, lines that go from left to right are floors, while lines that go right to left are ceilings.</p>
<p><object id="Tutorial_InkScape_Box2D.swf" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="480" height="600" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0"><param name="align" value="center" /><param name="quality" value="high" /><param name="src" value="/flash/tutorials/Tutorial_InkScape_Box2D.swf" /><param name="name" value="Creating Levels in Box2D" /><embed id="Tutorial_InkScape_Box2D.swf" type="application/x-shockwave-flash" width="480" height="600" src="/flash/tutorials/Tutorial_InkScape_Box2D.swf" name="Creating Levels in Box2D" quality="high" align="center"></embed></object></p>
<p>Notice how the ball jumps through the line in the middle of the world. This happens when it approaches from the top because that line was drawn from right-to-left, making it a ceiling.</p>
<h3>Importing the SVG and Parsing it</h3>
<p>When you are done drawing your level, save it as an SVG file and open it back up in notepad. We&#8217;re going to copy everything from the the beginning of the  tag to the end of the  tag into a Flash AS3 variable.</p>

<div class="wp_syntax"><div class="code"><pre class="php" style="font-family:monospace;"><span style="color: #000000; font-weight: bold;">var</span> svg <span style="color: #339933;">=</span>
&nbsp;
<span style="color: #666666; font-style: italic;">//All content inside SVG tags goes here</span>
&nbsp;
<span style="color: #339933;">;</span></pre></div></div>

<p>Now that we have imported the SVG, we&#8217;re going to parse it. Make a function that looks like the one below in your class.</p>

<div class="wp_syntax"><div class="code"><pre class="php" style="font-family:monospace;">import Box2D<span style="color: #339933;">.</span>Dynamics<span style="color: #339933;">.</span>b2World<span style="color: #339933;">;</span>
import Box2D<span style="color: #339933;">.</span>Common<span style="color: #339933;">.</span>Math<span style="color: #339933;">.</span>b2Vec2<span style="color: #339933;">;</span>
import Box2D<span style="color: #339933;">.</span>Collision<span style="color: #339933;">.</span>Shapes<span style="color: #339933;">.</span>b2EdgeChainDef<span style="color: #339933;">;</span>
import Box2D<span style="color: #339933;">.</span>Collision<span style="color: #339933;">.</span>Shapes<span style="color: #339933;">.</span>b2ShapeDef<span style="color: #339933;">;</span>
import Box2D<span style="color: #339933;">.</span>Dynamics<span style="color: #339933;">.</span>b2BodyDef<span style="color: #339933;">;</span>
import Box2D<span style="color: #339933;">.</span>Collision<span style="color: #339933;">.</span>Shapes<span style="color: #339933;">.</span>b2Shape<span style="color: #339933;">;</span>
&nbsp;
<span style="color: #666666; font-style: italic;">//RATIO is your physics scale of pixels to meters</span>
<span style="color: #000000; font-weight: bold;">public</span> static <span style="color: #000000; font-weight: bold;">function</span> parseThisSVG<span style="color: #009900;">&#40;</span>svg<span style="color: #339933;">:</span> XML<span style="color: #339933;">,</span> world<span style="color: #339933;">:</span> b2World<span style="color: #339933;">,</span> RATIO<span style="color: #339933;">:</span>Number<span style="color: #009900;">&#41;</span><span style="color: #339933;">:</span> void <span style="color: #009900;">&#123;</span>
<span style="color: #000000; font-weight: bold;">var</span> ns<span style="color: #339933;">:</span> <span style="color: #000000; font-weight: bold;">Namespace</span> <span style="color: #339933;">=</span> svg<span style="color: #339933;">.</span><span style="color: #000000; font-weight: bold;">namespace</span><span style="color: #009900;">&#40;</span><span style="color: #0000ff;">&quot;&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #000000; font-weight: bold;">var</span> bodyDef<span style="color: #339933;">:</span> b2BodyDef <span style="color: #339933;">=</span> <span style="color: #000000; font-weight: bold;">new</span> b2BodyDef<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
<span style="color: #000000; font-weight: bold;">var</span> chainDef<span style="color: #339933;">:</span> b2EdgeChainDef <span style="color: #339933;">=</span> <span style="color: #000000; font-weight: bold;">new</span> b2EdgeChainDef<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
chainDef<span style="color: #339933;">.</span>friction <span style="color: #339933;">=</span> <span style="color:#800080;">0.5</span><span style="color: #339933;">;</span>
chainDef<span style="color: #339933;">.</span>restitution <span style="color: #339933;">=</span> <span style="color:#800080;">0.0</span><span style="color: #339933;">;</span>
<span style="color: #b1b100;">for</span> <span style="color: #990000;">each</span> <span style="color: #009900;">&#40;</span><span style="color: #000000; font-weight: bold;">var</span> path<span style="color: #339933;">:</span> XML in svg<span style="color: #339933;">..</span>ns<span style="color: #339933;">::</span><span style="color: #004000;">path</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
	<span style="color: #000000; font-weight: bold;">var</span> d<span style="color: #339933;">:</span> String <span style="color: #339933;">=</span> path<span style="color: #339933;">.@</span>d<span style="color: #339933;">;</span>
	<span style="color: #666666; font-style: italic;">// split string at spaces or commas:</span>
	<span style="color: #000000; font-weight: bold;">var</span> regExp<span style="color: #339933;">:</span> RegExp <span style="color: #339933;">=</span> <span style="color: #339933;">/</span> <span style="color: #339933;">|,/;</span>
	<span style="color: #000000; font-weight: bold;">var</span> args<span style="color: #339933;">:</span> <span style="color: #990000;">Array</span> <span style="color: #339933;">=</span> d<span style="color: #339933;">.</span><span style="color: #990000;">split</span><span style="color: #009900;">&#40;</span>regExp<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	<span style="color: #b1b100;">if</span> <span style="color: #009900;">&#40;</span>args<span style="color: #009900;">&#91;</span>args<span style="color: #339933;">.</span>length<span style="color: #339933;">-</span><span style="color: #cc66cc;">1</span><span style="color: #009900;">&#93;</span> <span style="color: #339933;">==</span> <span style="color: #0000ff;">&quot;&quot;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
		args<span style="color: #339933;">.</span>pop<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span> <span style="color: #666666; font-style: italic;">// removes last element;</span>
	<span style="color: #009900;">&#125;</span>
	<span style="color: #000000; font-weight: bold;">var</span> i<span style="color: #339933;">:</span> int <span style="color: #339933;">=</span> <span style="color: #cc66cc;">1</span><span style="color: #339933;">;</span> <span style="color: #666666; font-style: italic;">// skip first element, which is always &quot;M&quot;.</span>
	chainDef<span style="color: #339933;">.</span>isALoop <span style="color: #339933;">=</span> <span style="color: #009900; font-weight: bold;">false</span><span style="color: #339933;">;</span>
	chainDef<span style="color: #339933;">.</span>vertices<span style="color: #339933;">.</span>length <span style="color: #339933;">=</span> <span style="color: #cc66cc;">0</span><span style="color: #339933;">;</span>
	<span style="color: #b1b100;">while</span> <span style="color: #009900;">&#40;</span><span style="color: #009900; font-weight: bold;">true</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
		<span style="color: #b1b100;">if</span> <span style="color: #009900;">&#40;</span>i <span style="color: #339933;">==</span> args<span style="color: #339933;">.</span>length <span style="color: #339933;">-</span> <span style="color: #cc66cc;">2</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
			chainDef<span style="color: #339933;">.</span>vertices<span style="color: #339933;">.</span>push<span style="color: #009900;">&#40;</span><span style="color: #000000; font-weight: bold;">new</span> b2Vec2<span style="color: #009900;">&#40;</span>args<span style="color: #009900;">&#91;</span>i<span style="color: #009900;">&#93;</span> <span style="color: #339933;">/</span> RATIO<span style="color: #339933;">,</span> args<span style="color: #009900;">&#91;</span>i<span style="color: #339933;">+</span><span style="color: #cc66cc;">1</span><span style="color: #009900;">&#93;</span> <span style="color: #339933;">/</span> RATIO <span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
			<span style="color: #b1b100;">break</span><span style="color: #339933;">;</span>
		<span style="color: #009900;">&#125;</span> <span style="color: #b1b100;">else</span> <span style="color: #b1b100;">if</span> <span style="color: #009900;">&#40;</span>args<span style="color: #009900;">&#91;</span>i<span style="color: #339933;">+</span><span style="color: #cc66cc;">2</span><span style="color: #009900;">&#93;</span> <span style="color: #339933;">==</span> <span style="color: #0000ff;">&quot;z&quot;</span> <span style="color: #339933;">||</span> args<span style="color: #009900;">&#91;</span>i<span style="color: #339933;">+</span><span style="color: #cc66cc;">2</span><span style="color: #009900;">&#93;</span> <span style="color: #339933;">==</span> <span style="color: #0000ff;">&quot;Z&quot;</span> <span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
			chainDef<span style="color: #339933;">.</span>isALoop <span style="color: #339933;">=</span> <span style="color: #009900; font-weight: bold;">true</span><span style="color: #339933;">;</span>
			<span style="color: #b1b100;">break</span><span style="color: #339933;">;</span>
			<span style="color: #009900;">&#125;</span> <span style="color: #b1b100;">else</span> <span style="color: #b1b100;">if</span> <span style="color: #009900;">&#40;</span>args<span style="color: #009900;">&#91;</span>i<span style="color: #339933;">+</span><span style="color: #cc66cc;">2</span><span style="color: #009900;">&#93;</span> <span style="color: #339933;">!=</span> <span style="color: #0000ff;">&quot;L&quot;</span><span style="color: #009900;">&#41;</span> <span style="color: #009900;">&#123;</span>
				throw <span style="color: #000000; font-weight: bold;">new</span> Error<span style="color: #009900;">&#40;</span><span style="color: #0000ff;">&quot;Unsupported: The SVG Path contains an arc command or move-to command or a relative coordinate.&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
			<span style="color: #009900;">&#125;</span>
			chainDef<span style="color: #339933;">.</span>vertices<span style="color: #339933;">.</span>push<span style="color: #009900;">&#40;</span><span style="color: #000000; font-weight: bold;">new</span> b2Vec2<span style="color: #009900;">&#40;</span>args<span style="color: #009900;">&#91;</span>i<span style="color: #009900;">&#93;</span> <span style="color: #339933;">/</span> RATIO <span style="color: #339933;">,</span> args<span style="color: #009900;">&#91;</span>i<span style="color: #339933;">+</span><span style="color: #cc66cc;">1</span><span style="color: #009900;">&#93;</span> <span style="color: #339933;">/</span> RATIO <span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
			i <span style="color: #339933;">+=</span> <span style="color: #cc66cc;">3</span><span style="color: #339933;">;</span>
		<span style="color: #009900;">&#125;</span>
		chainDef<span style="color: #339933;">.</span>vertexCount <span style="color: #339933;">=</span> chainDef<span style="color: #339933;">.</span>vertices<span style="color: #339933;">.</span>length<span style="color: #339933;">;</span>
		world<span style="color: #339933;">.</span>GetGroundBody<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">.</span>CreateShape<span style="color: #009900;">&#40;</span>chainDef<span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	<span style="color: #009900;">&#125;</span>
<span style="color: #009900;">&#125;</span></pre></div></div>

<p>When you call this function pass the SVG variable and your Box2D world variable to it and it will create all of the defined lines from your SVG.</p>
<p><a href="/source/tutorials/Levels_in_Box2D_Source.zip">Source here</a></p>
<p>That concludes the tutorial. If you need help, e-mail me or leave a comment here and I&#8217;ll see what I can do. Seeing as this is my first tutorial, constructive criticism is highly encouraged.</p>
<p>-&gt;</p>
<p><em> Credit for the parsing function goes to <a title="Box2D Forums Post: EdgeShapes" href="http://www.box2d.org/forum/viewtopic.php?f=8&amp;t=1437" target="_blank">Shaktool</a> off the Box2D forums. Another thanks to him for helping update the parser in this tutorial to <a href="http://www.ezqueststudios.com/blog/box2d-svg-parser-curves/">the curve parser</a>.</em></p>


<p>Related posts:<ol><li><a href='http://www.ezqueststudios.com/blog/box2d-svg-parser-curves/' rel='bookmark' title='Permanent Link: Box2D SVG Parser with Curve Support'>Box2D SVG Parser with Curve Support</a></li>
</ol></p>
<p>Related posts brought to you by <a href='http://mitcho.com/code/yarpp/'>Yet Another Related Posts Plugin</a>.</p>]]></content:encoded>
			<wfw:commentRss>http://www.ezqueststudios.com/blog/creating-levels-box2d/feed/</wfw:commentRss>
		<slash:comments>8</slash:comments>
		</item>
	</channel>
</rss>
