Sign in to follow this  
nick5454

Following a path saved in svg format

Recommended Posts

I want to create a path in Adobe Illustrator, save it as svg format.

 

I want my game object ( monster ) to follow this pattern. To accomplish this I need to be able to read the SVG element (path) and calculate the point on the path based on time. This will be used in both android and iOS, so the libraries are limited.

 

Does anyone know how to read the path element below and calculate the spline. I figured I should create the spline object and grab a point from there.

 

But reading the SVG path is odd, wasn't sure if someone has done this before. I have seen one game example where they created a spline and had the object follow the path, so I assume all I need to know how to do is to create my own path objects from the svg element.

 

Any ideas, suggestions, or links is appreciated.

 

svg file text

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="0 0 1024 768" enable-background="new 0 0 1024 768" xml:space="preserve">
<path fill="#FFFFFF" stroke="#000000" stroke-miterlimit="10" d="M223.6,308.9c159.6,11.7,136.2,111.7,159.6,11.7
	c23.4-100,169.1,5.3,169.1,5.3"/>
</svg>

Share this post


Link to post
Share on other sites

The SVG specification details what the path data means.

 

Essentially, your data as of now does the following:

  • M [223.6,308.9] sets the start point of the first curve.
  • Given that the start point is already set by M, c [159.6,11.7],[136.2,111.7],[159.6,11.7] give the control points and the end point of the first curve, in that order.
  • Since there are no second "M" here, the second curve starts from where the first ends.
  • c [23.4,-100],[169.1,5.3],[169.1,5.3] specify the second curve's control points and end point.

 

Note:

  • Lowercase "c" means that the coordinates are relative to the start point of the current curve, while uppercase "C" would mean absolute canvas coordinates.
  • Since the second curve's second control point and the end point are the same point, the curve may not look like a typical cubic Bezier segment. The curve parameter would effectively seem to "slow down" towards the end here.

Share this post


Link to post
Share on other sites

Any ideas, suggestions, or links is appreciated.

1.) nik02 has already hinted at a valuable source: The specification, which is gracefully granted by a searchable internet.

 

2.) SVG is based on XML, and both iOS and Android have build-in support for reading XML. In both cases they allow you to outsource file reading and primary parsing, giving you a DOM (or you can try to use SAX-like callbacks) of the SVG document.

 

3.) SVG is a media sheet oriented thing. Your world is perhaps not (little details are given in the OP). So having a SVG document is most often not sufficient for such game specific purposes. IMHO you should stay away from it as a direct resource for your game. It is okay, of course, to import it into some tool that then exports a game ready resource (i.e. with correct orientation and a correct co-ordinate basis).

 

4.) If you want to stay with SVG path descriptions, then you can also consider to just manually copy the relevant parts off the SVG file and paste them into a still text based but line oriented resource file of your own. This file could contain many different paths, and it could contain all of the additional necessary stuff (including orientation, placing, scaling).

 

5.) Following the path then in a smooth time based manner is a totally different thing. It requires you to find a re-parametrization of the path so that it fits your needs. That is IMHO worth an own thread as soon as time has arrived.

Edited by haegarr

Share this post


Link to post
Share on other sites

Thanks for both the answers. I'm using Xamarin for ios/android so reading the xml is pretty easy and I would assume I only ever need d. I plan on using the data to create my path and load these in at start up. Only about 10-20 will exist.

 

I wanted a path so I can use a time formula to see where in the path the monster should be and place him there based on the total time the path should take when updating sprites.

 

I also chose SVG, because I can use adobe illustrator to see the path visually until I have time to create my own, or search for a premade app.

 

If you can recommend a product that will produce a path of bezier curves visually and I can get points and control points from that to build a path in my code, that would be great also.

Share this post


Link to post
Share on other sites

Blender can handle 3D Béziers and you can (relatively) easily write an exporter module in Python to get the data out in your own format. Note that 2D can be thought as a special case of 3D, in that the third dimension is constant.

 

You can also test the animations directly in Blender, as a bonus smile.png

Edited by Nik02

Share this post


Link to post
Share on other sites

 


Any ideas, suggestions, or links is appreciated.

3.) SVG is a media sheet oriented thing. Your world is perhaps not (little details are given in the OP). So having a SVG document is most often not sufficient for such game specific purposes. IMHO you should stay away from it as a direct resource for your game. It is okay, of course, to import it into some tool that then exports a game ready resource (i.e. with correct orientation and a correct co-ordinate basis).

 

4.) If you want to stay with SVG path descriptions, then you can also consider to just manually copy the relevant parts off the SVG file and paste them into a still text based but line oriented resource file of your own. This file could contain many different paths, and it could contain all of the additional necessary stuff (including orientation, placing, scaling).

Quoted for emphasis.

Browsers have SVG support and a fairly good DOM model for them. You might consider writing some javascript app mangling svg to your game-specific format. JSON is native in them so that would be your first choice. Keep us informed.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this