<?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&#187; box2D Archives  &#8211; EzQuest Studios</title>
	<atom:link href="http://www.ezqueststudios.com/blog/tag/box2d/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>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>11</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>
