Exporting Vector2 waypoints from Adobe Illustrator

For the Moto Grand Prix Manager game, I'm going to need to render a 2D race track and have some textures follow a set path on this track. I could easily create a list of Vector2 waypoints myself and experiment with their positions - but that would be too hard. I don't have experience with 3D modeling software that could probably do this easily. I do have a lot of experience using Adobe Illustrator though.

With Illustrator, I knew that I could create paths with anchor points that could represent the waypoints that I needed. The only thing that I couldn't figure out was how to export these waypoints to a format that I could import for use in XNA. Illustrator has options to export in multiple formats. The only ones that sounded promising were the AutoCad formats DWG and DXF. However, after doing a search for importing these formats to XNA I didn't come up with anying. Ideally, I need to export the paths to an XML format, which I could easily import into XNA.

I did a simple search on Google for "Export paths illustrator xml" and the first result that came up was for Mike Swanson's Adobe Illustrator to XAML Export plug-in. It is meant to export your Illustrator objects to display in XAML format such as in Silverlight or Windows Presentation Foundation (WPF). Since XAML is XML based, I thought that this might work for me. I downloaded the free plug-in and fired up Illustrator to give it a try. Sure enough, you can create paths and then export them in XAML format.

Below are the steps that I took to export a path from Illustrator and convert the anchor points to Vector2 objects that I could use as waypoints in my game.

1. Open Adobe Illustrator and create a new path using the Pen tool.
   
   


2. Draw a path and add as many anchor points as you see fit. Since I needed to create a path that followed a known race track, I took a screen shot of a race track from Google Maps and drew my path over this track. Note: you can create open or closed paths to export. If you create a closed path, one that connects back to itself to form a loop, then the exporter tool will duplicate the start/end anchor point two times in the XAML file. You can account for this by simply deleting the last waypoint if needed.
   
   
   
3. Once you have your path ready, you can export it with File -> Export and select one of the XAML file types to export as.


4. Your exported XAML file will look something like this:
   
   
5. You will have "Path" nodes which contain all of the coordinates for your waypoints. I then extracted these waypoints by reading in the XML and traversing the nodes to the Path nodes. I had some trouble initially reading the XML in the XAML file as I couldn't get to the path nodes using XPATH queries. I believe that this has to do with the XML namespace that is in the Viewbox node. Simply removing these namespaces will allow you to use XPATH on the file. I decided not to do this and simply traverse the document nodes to the ones that I needed.
6. I extracted the text of the "Data" attribute and did some cleanup on the string so that I could then split out the values into an array. Once I had these values in an array, I could then take each X and Y value to create Vector2 objects.

Once I was able to extract these Vector2 objects I saved them in a List. I am going to use this list to have objects follow a set path. I did all of this extraction in an "editor" project that I then use to serialize the list of Vector2 objects into an XML format that XNA can read - I'll leave that for another post.

I hope that this information is helpful for someone else out there.