Thread Rating:
  • 0 Vote(s) - 0 Average
  • 1
  • 2
  • 3
  • 4
  • 5
Import SVG to JSON??
#1
What are the steps to import SVG as spline?

The JSON format I currently have from Abode Illustrator SVG to JSON is:

   

Curvy Spline JSON export format is :

   

Two ways I can think of:

1. Use any script to edit and add text to JSON file to match Curvy Spline format.
2. Look at Adobe Scripting to export it into Curvy Spline format directly.

Do I have to match it exactly for Curvy to read the JSON file or can it just read a plain list of points as well, in advanced setting options maybe??

Is there any already existing alternative?
Reply
#2
Hi,

The JSON format Curvy uses is a JSON based format that I made up for usage only inside Curvy, to share splines easily between different users, or to save/load them at runtime, or even as a way to batch process splines in the text format. So it's not a format that was made to be compatible with external tools as Adobe Illustrator. This being said, I tried to make it as easy as possible for any user to make Curvy compatible with any other JSON based format:

If you go to Curvy\ImportExport\Wrappers.cs, you will see two classes that represent the JSON equivalents of CurvySpline (namely SerializedCurvySpline) and CurvySplineSegement (namely SerializedCurvySplineSegment). By renaming, adding or removing fields in these classes, you control what Curvy seeks when reading or writing JSON files.

Curvy expects a file that is an array of splines. Your file is an array of layers, which in turn are arrays of splines. So you will have to handle this difference either at the file level (by putting all the splines at the same layer) or at the code level (by modifying Curvy's code reading the JSON files to add the notion of layers, in Curvy\Base\Editor\Wizards\ImportExportWizard.cs)

I know I dumped a lot of information here, so don't hesitate if you need me to explain further some point that might be not clear.

I hope this helped.
Please consider leaving a review for Curvy. This will help a lot keeping Curvy relevant in the eyes of the Asset Store algorithm.
Reply
#3
(11-04-2018, 08:36 PM)_Aka_ Wrote: Hi,

The JSON format Curvy uses is a JSON based format that I made up for usage only inside Curvy, to share splines easily between different users, or to save/load them at runtime, or even as a way to batch process splines in the text format. So it's not a format that was made to be compatible with external tools as Adobe Illustrator. This being said, I tried to make it as easy as possible for any user to make Curvy compatible with any other JSON based format:

If you go to Curvy\ImportExport\Wrappers.cs, you will see two classes that represent the JSON equivalents of CurvySpline (namely SerializedCurvySpline) and CurvySplineSegement (namely SerializedCurvySplineSegment). By renaming, adding or removing fields in these classes, you control what Curvy seeks when reading or writing JSON files.

Curvy expects a file that is an array of splines. Your file is an array of layers, which in turn are arrays of splines. So you will have to handle this difference either at the file level (by putting all the splines at the same layer) or at the code level (by modifying Curvy's code reading the JSON files to add the notion of layers, in Curvy\Base\Editor\Wizards\ImportExportWizard.cs)

I know I dumped a lot of information here, so don't hesitate if you need me to explain further some point that might be not clear.

I hope this helped.

Thank you for all the information.
It was very helpful.


Simplified JSON input file using Wrappers.cs

Matched the format from just (x,y) coordinates of illustrator to Curvy JSON format.

Illustrator to Curvy :
Anchor(x,y) to ControlPoint(x,y,0)
leftDirection (x,y) to HandleIn(x,y,0)
RightDirection (x,y) to HandleOut(x,y,0)

Assumed Rotation to be {x:0.0,y:0.0,z:0.0}

Import/Export Wizard Couldn't read it.
Clubbed all ControlPoints to the same coordinates.

JSON File in txt format is attached - Illustrator.txt

It was stupid to assume rotation to be zero, I think. What's wrong?


Attached Files
.txt   Illustrator.txt (Size: 1.97 KB / Downloads: 4)
Reply
#4
Big Grin 
JSON file was already clubbed Big Grin


Happens when Array.push is used with a constant data type. Have to check the rotation part tho.
Reply
#5
Hi,
Sorry, but I don't understand what "clubbed" means in this context. I searched on the net but couldn't find. Could you explain this to me?

I took a look at your file, and here are the issues I noticed:
  • all the control points have the same position
  • some important fields are not present. To be honest, Curvy should assign a valid default value to these fields if they are missing. I will include this in the next version. Until then, please add at least these two fields
    "CacheDensity": 50,
    "MaxPointsPerUnit": 8.0,
Having your control points' rotation set to 0,0,0 is ok, as long as you don't want any "twist" along your spline. Also, keep in mind that your json does not define a value for the spline's Orientation field, which means that the spline has an Orientation set to None

After taking in consideration the above, do you still have any issue with your importing process?
Please consider leaving a review for Curvy. This will help a lot keeping Curvy relevant in the eyes of the Asset Store algorithm.
Reply
#6
(11-13-2018, 11:34 AM)_Aka_ Wrote: Hi,
Sorry, but I don't understand what "clubbed" means in this context. I searched on the net but couldn't find. Could you explain this to me?
Sorry about that I meant all the control points have the same position.


(11-13-2018, 11:34 AM)_Aka_ Wrote: After taking in consideration the above, do you still have any issue with your importing process?


Considering all of above, Still spline doesn't look like the one in Illustrator.

Import/Export Wizard is reading the JSON file.

Also Changed someOther settings

CurvyGlobalManager Default.Interplation to Bezier.
CurvySplineSegment AutoHandles to false.
etc.

The only reason I wanted to import directly from Illustrator  is because it's precision art.
Somehow it's precision is being compromised in the import process.

I have decided to turn the precision art into png and use Curvy for Movement as usual.

I will be asking for help again. Curvy tends to show up in every new project somehow. Wink 

Thanks a lot.
Reply
#7
You are welcome
Could you please send me a picture of the spline on Illustrator, and the picture and/or json of the spline on Curvy? I would like to see how different they are, and hopefully pinpoint the cause of the difference
Please consider leaving a review for Curvy. This will help a lot keeping Curvy relevant in the eyes of the Asset Store algorithm.
Reply
#8
Here's a simple spline in Illustrator and curvy. The Illustrator file and exported JSON File is attached as SimpleSpline.zip

   

   

Github link   is Illustrator Point Exporter for Curvy

Sorry I just uploaded the full exporter.js file in a hurry. You will not be able to see the commit changes.

All the changes have been made from lines 1180 to 1326.

I am still manually deleting this  {layers:[   ........ ]}
from the exported JSON file.

The layers part was useful for later development.

HandleIn and HandleOut part is confusing in exporter.js


Attached Files
.zip   SimpleSpline.zip (Size: 307.77 KB / Downloads: 6)
Reply
#9
Hi,

From looking at the pictures, I suspect a sign inversion of the handles coordinates, and maybe even a scale issue.
In the following picture, you will see that the handles of this CP are all going in the same direction, instead of opposite ones (which is needed to have smooth curves). The same is true for all the CPs.
   
And from looking at the JSON file you feed Curvy with, the suspected sign inversion is done before reaching Curvy.

I don't have access to Adobe Illustrator, so I can't open your ai file and export the spline. Can you please send me the exported JSON, the one with no modifications related to Curvy. Also, a screenshot from within illustrator showing the handles of the control points (and their positions too if possible) would be helpful.

Thanks
Please consider leaving a review for Curvy. This will help a lot keeping Curvy relevant in the eyes of the Asset Store algorithm.
Reply
#10
(11-15-2018, 10:55 AM)_Aka_ Wrote: Hi,

From looking at the pictures, I suspect a sign inversion of the handles coordinates, and maybe even a scale issue.
In the following picture, you will see that the handles of this CP are all going in the same direction, instead of opposite ones (which is needed to have smooth curves). The same is true for all the CPs.

And from looking at the JSON file you feed Curvy with, the suspected sign inversion is done before reaching Curvy.

I don't have access to Adobe Illustrator, so I can't open your ai file and export the spline. Can you please send me the exported JSON, the one with no modifications related to Curvy. Also, a screenshot from within illustrator showing the handles of the control points (and their positions too if possible) would be helpful.

Thanks

Yes you are right. I am using Math.abs() on all handles in javascript. 

JSON file is attached. It's in the SimpleSpline.zip file.

Can't send the screenshot of handles because I can only get position of one handle at a time. Can print all handles but the problem is all handle positions are relative as they are substracted from Artboard (like Canvas or Parent GameObject) to be able to  read from multiple Artboards.

Sorry. I have moved on from the import process to creating the game art. It's taking a lot of time. Will get back to this later.

Thanks.
Reply


Possibly Related Threads…
Thread Author Replies Views Last Post
  Import/Export, Spline from code Mos Def 4 783 02-14-2022, 11:42 AM
Last Post: _Aka_
  Import splines from GeoJson Qpid36 4 4,084 11-22-2019, 03:45 PM
Last Post: _Aka_
  3ds max import? turbo 9 11,956 09-16-2019, 01:36 PM
Last Post: _Aka_
  Unable to import in 2018.4.2 LTS unity romit99 1 2,192 06-25-2019, 11:56 AM
Last Post: _Aka_

Forum Jump: