Vector Graphics

[kilopop]

Having yet to explore Graphics 2.0, but am wondering how the state of play has developed regarding vectors?

There has been talk in blogs coming out of Corona HQ of Graphics 2.0’s vector capabilities such as this one from Walter: “One of our goals with the new graphics engine is to enable vector graphics in Corona. We’re aiming for Illustrator-level capabilities that are going to give you a new level of expressiveness…”

Does this mean Graphics 2.0 offers the tools to reproduce images from Illustrator? There are plugins that output point co-orrdinates of vector shapes not to mention SVG file formats. It would be a bit much to ask users to recreate vector images by hand coding points. A bit like hand coding pixels to make a bitmap image. As we know Corona can import bitmaps, if Graphics 2.0 does enable vector graphics it surely must allow the import of vector file formats - or at least the import of point co-ordinates?

Also, is anti-aliasing vectors now possible? Hard to imagine illustrator-level capabilities without anti-aliasing…

[kilopop]

Drawscript is a solution that outputs Illustrator shapes to graphics code for Obj-C, C++, Javascript, CreateJS, Action Script, JSON… but no Corona port yet.

http://www.drawscri.pt/

If you want a Corona port add to the requests in the Drawscript forum to build support here:

http://forums.adobe.com/thread/1175097

[walter]

Yes, anti-aliasing is supported as long as the device supports HW (GPU-based) anti-aliasing.

[richard770]

Ok, Graphics 2.0 is gonna deliver something I’ve been waiting for since I started using Corona a few years ago… the ability to create custom shapes and texture them with an image! This has so many applications in 2D game development and allows much better workflow in terms of level design, creation & storage!

But!.. and there’s always a but… I cant believe we still dont have a simple UI that would even just allow us place an object on the screen… Of course, we have coded our own, used (& paid for) 3rd party tools, or simply grabbed coords from PS or AI… or whatever art tool you use… so until now, we’ve got around this. But now, this comes to the surface again!

Corona, lets be honest, most of us dont want to use a square, rectangle or triangle or some other flat sided shape in G.2.0… we want to be able to create nice smooth/curved bezier shapes… and fill them with pretty graphics… to create all sorts of objects, terrain… whatever!

Instead, we are now waiting on a 3rd party tool that allows us do this and supports the newPolygon functions… in G2.0.

Am I being unfair? Is it too much to ask? Can you tell me how you “expected” us to use this great new feature? Where we just expected to use simple shapes that we can plot the coords for? Or procedurally generated random stuff?

Personally, I think predesigned level terrain is gonna be one of the biggest use cases for custom shapes with image fill…

But I have no way to draw it… well, not easily/quickly at the moment.

@Walter? Am I being unreasonable to expect a simple interface builder from Corona for my $$$s?

Cheers

[jeff15]

This is kind of what I was expecting (hoping for) as well. We currently create all our artwork in Illustrator which is fantastic of course for outputting bitmaps a various sizes. However… There are many cases where it would be amazing to import a vector shape and then be able to change its properties like fill color, etc. Is there some major limitation that prevents Corona from including something like the following to import svg graphics? 

display.newImage Vect ( [parentGroup,] filename, [baseDirectory] width, height )

Thanks!

Jeff

@richard770

Ok, Graphics 2.0 is gonna deliver something I’ve been waiting for since I started using Corona a few years ago… the ability to create custom shapes and texture them with an image! This has so many applications in 2D game development and allows much better workflow in terms of level design, creation & storage!

But!.. and there’s always a but… I cant believe we still dont have a simple UI that would even just allow us place an object on the screen… Of course, we have coded our own, used (& paid for) 3rd party tools, or simply grabbed coords from PS or AI… or whatever art tool you use… so until now, we’ve got around this. But now, this comes to the surface again!

Corona, lets be honest, most of us dont want to use a square, rectangle or triangle or some other flat sided shape in G.2.0… we want to be able to create nice smooth/curved bezier shapes… and fill them with pretty graphics… to create all sorts of objects, terrain… whatever!

Instead, we are now waiting on a 3rd party tool that allows us do this and supports the newPolygon functions… in G2.0.

Am I being unfair? Is it too much to ask? Can you tell me how you “expected” us to use this great new feature? Where we just expected to use simple shapes that we can plot the coords for? Or procedurally generated random stuff?

Personally, I think predesigned level terrain is gonna be one of the biggest use cases for custom shapes with image fill…

But I have no way to draw it… well, not easily/quickly at the moment.

@Walter? Am I being unreasonable to expect a simple interface builder from Corona for my $$$s?

Cheers

[rakoonic2]

@kilopop

Drawscript is a solution that outputs Illustrator shapes to graphics code for Obj-C, C++, Javascript, CreateJS, Action Script, JSON… but no Corona port yet.

http://www.drawscri.pt/

It would likely be fairly simple to write a convertor for the JSON output.

Obviously a fair amount of what Illustrator handles can’t be done or doesn’t have a direct alternative in Corona, but it should be feasible, certainly. I quite like the idea of this and would look into it myself but I don’t use Illustrator and haven’t touched anything beyond the most basic of vector shapes in a looooooong time

[kilopop]

Go on Rakoonic - you know you want to. Port port port.

But yeah it’s going to be limited. newPolygon doesn’t have beziers so you’d have to turn curves into straight paths in Illustrator. But if you can animate points, vector graphics would transform output work you could do in Corona. I’m scratching my head as to why Illustrator and Corona haven’t quite met - there is only a small bridge between them now with Graphics 2.0…

Who can join them together? Surely there’ll be something to do this? Even via SVG?

[rakoonic2]

Well you could convert the beziers into lines upon importing, so you could for example supply a subdivide parameter that would determine how many line segments to break it into. The higher the number the smoother the splits. As I say, Ive not got Illustrator - perhaps, and without promising anything, someone could export me a few files using the JSON export supplied above and maybe an SVG version, along with an image of what they represent. It should include all the items you think it likely that could be converted directly to work in corona.

[rakoonic2]

No-one wants to produce a sample for me to look into this?

[jeff15]

I do, I do! Been swamped these last few days… But will try and post something later tonight.

Many thanks!

Jeff

@rakoonic2

No-one wants to produce a sample for me to look into this?

[kilopop]

Same, tried to make a sample a few days back but the draw script only works on cs6. Will have to wait until im in at work tomorrow to get something to you, the race is on…

[kilopop]

OK Racoonic, got a friend to output. Here is a zip with vectorTest in .ai, jpeg (demo) and json file.

https://dl.dropboxusercontent.com/u/14482412/vectorTest.zip

In fact here is the code in that .json file:

[
    [
        {“opacity”: 100},
        {“fill”: [255, 204, 204]},
        {“stroke”: [0, 0, 0]},
        {“strokeWidth”: 4},
        {
            “bezier”: [7273, -7360, 7328, -7329, 7366, -7264, 7366, -7189]
        },
        {
            “bezier”: [7366, -7189, 7366, -7084, 7293, -6929, 7202, -6929]
        },
        {
            “bezier”: [7202, -6929, 7111, -6929, 7038, -7084, 7038, -7189]
        },
        {
            “bezier”: [7038, -7189, 7038, -7264, 7075, -7328, 7130, -7359]
        },
        {“line”: [7130, -7359, 7076, -7374]},
        {“line”: [7076, -7374, 7151, -7395]},
        {“line”: [7151, -7395, 7113, -7462]},
        {“line”: [7113, -7462, 7180, -7424]},
        {“line”: [7180, -7424, 7200, -7498]},
        {“line”: [7200, -7498, 7221, -7424]},
        {“line”: [7221, -7424, 7288, -7462]},
        {“line”: [7288, -7462, 7250, -7395]},
        {“line”: [7250, -7395, 7324, -7374]},
        {“line”: [7324, -7374, 7273, -7360]}
    ],
    [
        {“opacity”: 100},
        {“fill”: [0, 0, 0]},
        {
            “bezier”: [7171, -7132, 7190, -7129, 7210, -7129, 7229, -7132]
        },
        {
            “bezier”: [7229, -7132, 7234, -7133, 7239, -7128, 7239, -7123]
        },
        {
            “bezier”: [7239, -7123, 7239, -7117, 7234, -7114, 7229, -7113]
        },
        {
            “bezier”: [7229, -7113, 7210, -7110, 7190, -7109, 7171, -7113]
        },
        {
            “bezier”: [7171, -7113, 7166, -7114, 7161, -7117, 7161, -7123]
        },
        {
            “bezier”: [7161, -7123, 7161, -7128, 7166, -7132, 7171, -7132]
        }
    ],
    [
        {“opacity”: 100},
        {“fill”: [255, 255, 255]},
        {
            “bezier”: [7147, -7159, 7173, -7159, 7194, -7180, 7194, -7206]
        },
        {
            “bezier”: [7194, -7206, 7194, -7233, 7173, -7254, 7147, -7254]
        },
        {
            “bezier”: [7147, -7254, 7120, -7254, 7099, -7233, 7099, -7206]
        },
        {
            “bezier”: [7099, -7206, 7099, -7180, 7120, -7159, 7147, -7159]
        }
    ],
    [
        {“opacity”: 100},
        {“fill”: [255, 255, 255]},
        {
            “bezier”: [7248, -7159, 7275, -7159, 7296, -7180, 7296, -7206]
        },
        {
            “bezier”: [7296, -7206, 7296, -7233, 7275, -7254, 7248, -7254]
        },
        {
            “bezier”: [7248, -7254, 7222, -7254, 7201, -7233, 7201, -7206]
        },
        {
            “bezier”: [7201, -7206, 7201, -7180, 7222, -7159, 7248, -7159]
        }
    ],
    [
        {“opacity”: 100},
        {“fill”: [0, 0, 0]},
        {
            “bezier”: [7129, -7195, 7140, -7195, 7149, -7204, 7149, -7214]
        },
        {
            “bezier”: [7149, -7214, 7149, -7225, 7140, -7234, 7129, -7234]
        },
        {
            “bezier”: [7129, -7234, 7119, -7234, 7110, -7225, 7110, -7214]
        },
        {
            “bezier”: [7110, -7214, 7110, -7204, 7119, -7195, 7129, -7195]
        }
    ],
    [
        {“opacity”: 100},
        {“fill”: [0, 0, 0]},
        {
            “bezier”: [7232, -7195, 7243, -7195, 7251, -7204, 7251, -7214]
        },
        {
            “bezier”: [7251, -7214, 7251, -7225, 7243, -7234, 7232, -7234]
        },
        {
            “bezier”: [7232, -7234, 7221, -7234, 7213, -7225, 7213, -7214]
        },
        {
            “bezier”: [7213, -7214, 7213, -7204, 7221, -7195, 7232, -7195]
        }
    ]
]
 

[rakoonic2]

Heh fun example

I’ll take a look. I’ve done bezier curve subdivision before so it shouldn’t be too tricky (assuming all the polygon stuff in G2 works ok).

What types of primitives are there that could be supported?

The face and what not look like general shapes that can support curves and straight edges.

Is there also a circle / ellipse primitive?

We’ll have to see how the polygon tool handles concave shapes. I’m not really expecting any problems on this front, but it might make for interesting times if someone wants to use these shapes for physics collisions…

[jeff15]

Okay, here’s another one. This is an ice cream cone with a number of pieces to it - but hopefully not too complicated. If it is, I guess you could just try part of it. The zip file at the link below has the ai file, png, svg, and json output. Thanks for giving this a whirl! I’m sure many will appreciate your efforts.

https://dl.dropboxusercontent.com/u/45137882/ice_cream.zip

Here’s the json:

[

    [

        {“opacity”: 100},

        {“fill”: [112, 156, 174]},

        {“bezier”: [330, 467, 330, 473, 310, 478, 286, 478]},

        {“bezier”: [286, 478, 261, 478, 241, 473, 241, 467]},

        {“bezier”: [241, 467, 241, 460, 261, 455, 286, 455]},

        {“bezier”: [286, 455, 310, 455, 330, 460, 330, 467]}

    ],

    [

        {“opacity”: 100},

        {“fill”: [195, 0, 22]},

        {“stroke”: [0, 0, 0]},

        {“strokeWidth”: 1.346269965171814},

        {“bezier”: [283, 228, 280, 223, 287, 216, 292, 216]},

        {“bezier”: [292, 216, 297, 215, 301, 216, 306, 219]},

        {“bezier”: [306, 219, 312, 223, 316, 235, 306, 237]}

    ],

    [

        {“opacity”: 100},

        {“fill”: [147, 0, 17]},

        {“bezier”: [284, 228, 282, 225, 284, 222, 287, 220]},

        {“bezier”: [287, 220, 292, 216, 290, 220, 292, 223]},

        {“bezier”: [292, 223, 293, 225, 297, 227, 299, 227]},

        {“bezier”: [299, 227, 303, 227, 308, 224, 310, 229]},

        {“bezier”: [310, 229, 312, 233, 307, 235, 303, 235]}

    ],

    [

        {“opacity”: 100},

        {“fill”: [255, 140, 255]},

        {“stroke”: [0, 0, 0]},

        {“strokeWidth”: 1.6828399896621704},

        {“bezier”: [336, 330, 340, 320, 338, 304, 334, 296]},

        {“bezier”: [334, 296, 331, 288, 327, 284, 318, 284]},

        {“bezier”: [318, 284, 309, 283, 300, 283, 292, 281]},

        {“bezier”: [292, 281, 274, 278, 252, 274, 237, 286]},

        {“bezier”: [237, 286, 225, 296, 223, 324, 233, 336]},

        {“bezier”: [233, 336, 248, 354, 268, 358, 290, 356]},

        {“bezier”: [290, 356, 308, 355, 328, 349, 336, 330]}

    ],

    [

        {“opacity”: 100},

        {“fill”: [255, 189, 255]},

        {“bezier”: [273, 310, 269, 312, 270, 313, 269, 316]},

        {“bezier”: [269, 316, 269, 317, 270, 319, 270, 320]},

        {“bezier”: [270, 320, 270, 322, 268, 323, 268, 325]},

        {“bezier”: [268, 325, 268, 327, 271, 330, 268, 333]},

        {“bezier”: [268, 333, 265, 336, 261, 336, 257, 335]},

        {“bezier”: [257, 335, 255, 335, 250, 333, 249, 331]},

        {“bezier”: [249, 331, 248, 329, 251, 326, 252, 324]},

        {“bezier”: [252, 324, 250, 323, 245, 321, 244, 319]},

        {“bezier”: [244, 319, 243, 315, 248, 317, 249, 315]},

        {“bezier”: [249, 315, 250, 310, 236, 311, 244, 306]},

        {“bezier”: [244, 306, 246, 305, 248, 306, 250, 305]},

        {“bezier”: [250, 305, 252, 303, 252, 300, 254, 299]},

        {“bezier”: [254, 299, 259, 296, 258, 302, 261, 305]},

        {“bezier”: [261, 305, 264, 308, 273, 305, 273, 310]}

    ],

    [

        {“opacity”: 100},

        {“fill”: [255, 255, 193]},

        {“stroke”: [0, 0, 0]},

        {“strokeWidth”: 1.6828399896621704},

        {“bezier”: [329, 266, 328, 262, 324, 252, 319, 246]},

        {“bezier”: [319, 246, 306, 229, 290, 243, 272, 242]},

        {“bezier”: [272, 242, 266, 242, 258, 239, 252, 242]},

        {“bezier”: [252, 242, 244, 246, 240, 254, 237, 262]},

        {“bezier”: [237, 262, 234, 273, 233, 285, 243, 290]},

        {“bezier”: [243, 290, 270, 305, 313, 297, 321, 292]},

        {“bezier”: [321, 292, 330, 286, 332, 277, 329, 266]}

    ],

    [

        {“opacity”: 100},

        {“fill”: [255, 255, 255]},

        {“bezier”: [264, 257, 258, 257, 249, 242, 246, 254]},

        {“bezier”: [246, 254, 245, 258, 246, 261, 249, 264]},

        {“bezier”: [249, 264, 250, 266, 252, 266, 253, 268]},

        {“bezier”: [253, 268, 253, 270, 252, 273, 253, 275]},

        {“bezier”: [253, 275, 254, 278, 261, 280, 264, 278]},

        {“bezier”: [264, 278, 268, 274, 262, 269, 269, 267]},

        {“bezier”: [269, 267, 273, 266, 280, 268, 281, 262]},

        {“bezier”: [281, 262, 281, 255, 268, 258, 264, 257]}

    ],

    [

        {“opacity”: 100},

        {“fill”: [70, 19, 0]},

        {“bezier”: [244, 257, 244, 259, 243, 260, 242, 261]},

        {“bezier”: [242, 261, 241, 263, 237, 264, 237, 267]},

        {“bezier”: [237, 267, 237, 271, 242, 271, 245, 269]},

        {“bezier”: [245, 269, 247, 267, 247, 263, 247, 260]},

        {“bezier”: [247, 260, 248, 258, 246, 249, 251, 250]},

        {“bezier”: [251, 250, 254, 251, 251, 255, 252, 257]},

        {“bezier”: [252, 257, 254, 260, 256, 253, 257, 252]},

        {“bezier”: [257, 252, 261, 252, 258, 258, 258, 260]},

        {“bezier”: [258, 260, 257, 264, 258, 266, 262, 263]},

        {“bezier”: [262, 263, 263, 269, 258, 273, 257, 278]},

        {“bezier”: [257, 278, 256, 282, 260, 284, 261, 288]},

        {“bezier”: [261, 288, 262, 293, 254, 301, 259, 305]},

        {“bezier”: [259, 305, 265, 309, 268, 298, 268, 294]},

        {“bezier”: [268, 294, 267, 288, 259, 283, 266, 279]},

        {“bezier”: [266, 279, 270, 276, 269, 278, 270, 274]},

        {“bezier”: [270, 274, 270, 271, 271, 267, 275, 269]},

        {“bezier”: [275, 269, 278, 271, 276, 276, 279, 279]},

        {“bezier”: [279, 279, 280, 278, 282, 248, 291, 258]},

        {“bezier”: [291, 258, 292, 260, 291, 263, 293, 264]},

        {“bezier”: [293, 264, 295, 266, 296, 263, 297, 268]},

        {“bezier”: [297, 268, 298, 273, 294, 284, 303, 281]},

        {“bezier”: [303, 281, 304, 285, 303, 290, 303, 295]},

        {“bezier”: [303, 295, 304, 297, 306, 302, 309, 301]},

        {“bezier”: [309, 301, 312, 300, 312, 292, 311, 289]},

        {“bezier”: [311, 289, 311, 285, 305, 276, 309, 271]},

        {“bezier”: [309, 271, 312, 267, 312, 275, 316, 275]},

        {“bezier”: [316, 275, 321, 275, 320, 266, 319, 263]},

        {“bezier”: [319, 263, 317, 259, 312, 255, 314, 250]},

        {“bezier”: [314, 250, 318, 252, 321, 263, 325, 262]},

        {“bezier”: [325, 262, 330, 261, 324, 252, 322, 250]},

        {“bezier”: [322, 250, 318, 244, 314, 237, 308, 234]},

        {“bezier”: [308, 234, 296, 230, 284, 226, 272, 229]},

        {“bezier”: [272, 229, 264, 230, 248, 236, 244, 246]},

        {“bezier”: [244, 246, 243, 249, 245, 252, 244, 255]},

        {“bezier”: [244, 255, 244, 256, 244, 256, 244, 257]}

    ],

    [

        {“opacity”: 100},

        {“fill”: [89, 39, 14]},

        {“bezier”: [263, 255, 262, 252, 261, 250, 261, 249]},

        {“bezier”: [261, 249, 260, 248, 261, 246, 260, 245]},

        {“bezier”: [260, 245, 258, 242, 255, 246, 252, 244]},

        {“bezier”: [252, 244, 248, 239, 265, 233, 267, 232]},

        {“bezier”: [267, 232, 270, 231, 276, 229, 279, 230]},

        {“bezier”: [279, 230, 284, 233, 277, 236, 276, 239]},

        {“bezier”: [276, 239, 275, 242, 279, 242, 279, 244]},

        {“bezier”: [279, 244, 279, 247, 275, 247, 274, 249]},

        {“bezier”: [274, 249, 272, 251, 273, 258, 270, 260]},

        {“bezier”: [270, 260, 268, 262, 265, 258, 263, 255]}

    ],

    [

        {“stroke”: [0, 255, 255]},

        {“strokeWidth”: 2.683490037918091},

        {“bezier”: [291, 247, 292, 248, 293, 250, 294, 251]}

    ],

    [

        {“stroke”: [255, 255, 0]},

        {“strokeWidth”: 2.683490037918091},

        {“bezier”: [277, 276, 278, 275, 279, 274, 280, 272]}

    ],

    [

        {“stroke”: [255, 255, 0]},

        {“strokeWidth”: 2.683490037918091},

        {“line”: [284, 236, 283, 240]}

    ],

    [

        {“stroke”: [255, 101, 0]},

        {“strokeWidth”: 2.683490037918091},

        {“bezier”: [272, 242, 273, 243, 274, 244, 275, 244]}

    ],

    [

        {“stroke”: [255, 101, 0]},

        {“strokeWidth”: 2.683490037918091},

        {“bezier”: [290, 230, 291, 231, 292, 231, 292, 232]}

    ],

    [

        {“stroke”: [255, 101, 0]},

        {“strokeWidth”: 2.683490037918091},

        {“bezier”: [304, 240, 305, 241, 305, 241, 306, 242]}

    ],

    [

        {“stroke”: [255, 101, 0]},

        {“strokeWidth”: 2.683490037918091},

        {“bezier”: [315, 264, 316, 264, 316, 263, 317, 263]}

    ],

    [

        {“stroke”: [63, 0, 255]},

        {“strokeWidth”: 2.683490037918091},

        {“bezier”: [260, 242, 261, 243, 262, 244, 263, 245]}

    ],

    [

        {“stroke”: [63, 0, 255]},

        {“strokeWidth”: 2.683490037918091},

        {“bezier”: [252, 263, 252, 261, 253, 260, 253, 259]}

    ],

    [

        {“stroke”: [63, 0, 255]},

        {“strokeWidth”: 2.683490037918091},

        {“bezier”: [280, 251, 280, 251, 280, 251, 281, 250]}

    ],

    [

        {“stroke”: [63, 0, 255]},

        {“strokeWidth”: 2.683490037918091},

        {“bezier”: [293, 237, 294, 238, 294, 238, 295, 239]}

    ],

    [

        {“stroke”: [63, 0, 255]},

        {“strokeWidth”: 2.683490037918091},

        {“line”: [309, 250, 309, 251]}

    ],

    [

        {“stroke”: [255, 0, 0]},

        {“strokeWidth”: 2.683490037918091},

        {“bezier”: [239, 260, 239, 259, 240, 259, 240, 259]}

    ],

    [

        {“stroke”: [255, 0, 0]},

        {“strokeWidth”: 2.683490037918091},

        {“bezier”: [286, 260, 286, 259, 286, 258, 287, 258]}

    ],

    [

        {“stroke”: [255, 0, 0]},

        {“strokeWidth”: 2.683490037918091},

        {“bezier”: [303, 260, 303, 261, 304, 262, 305, 263]}

    ],

    [

        {“stroke”: [255, 0, 0]},

        {“strokeWidth”: 2.683490037918091},

        {“bezier”: [314, 251, 315, 251, 315, 250, 316, 250]}

    ],

    [

        {“stroke”: [255, 0, 0]},

        {“strokeWidth”: 2.683490037918091},

        {“bezier”: [261, 279, 261, 280, 261, 280, 261, 281]}

    ],

    [

        {“stroke”: [255, 0, 0]},

        {“strokeWidth”: 2.683490037918091},

        {“bezier”: [250, 240, 251, 240, 249, 238, 249, 237]}

    ],

    [

        {“stroke”: [255, 0, 0]},

        {“strokeWidth”: 2.683490037918091},

        {“bezier”: [267, 256, 268, 256, 269, 256, 269, 256]}

    ],

    [

        {“stroke”: [0, 255, 255]},

        {“strokeWidth”: 2.683490037918091},

        {“bezier”: [261, 234, 262, 234, 262, 231, 263, 230]}

    ],

    [

        {“opacity”: 100},

        {“fill”: [210, 164, 78]},

        {“stroke”: [0, 0, 0]},

        {“strokeWidth”: 1.6828399896621704},

        {“line”: [319, 376, 310, 458]},

        {“bezier”: [310, 458, 310, 458, 308, 466, 297, 467]},

        {“bezier”: [297, 467, 286, 469, 280, 468, 280, 468]},

        {“bezier”: [280, 468, 280, 468, 262, 468, 259, 458]},

        {“bezier”: [259, 458, 255, 448, 249, 375, 249, 375]},

        {“line”: [249, 375, 319, 376]}

    ],

    [

        {“opacity”: 100},

        {“fill”: [194, 149, 90]},

        {“bezier”: [272, 393, 273, 391, 276, 388, 279, 389]},

        {“bezier”: [279, 389, 281, 390, 280, 393, 281, 394]},

        {“bezier”: [281, 394, 285, 397, 287, 387, 292, 393]},

        {“bezier”: [292, 393, 294, 397, 288, 399, 291, 403]},

        {“bezier”: [291, 403, 293, 406, 295, 406, 293, 409]},

        {“bezier”: [293, 409, 292, 411, 284, 413, 289, 416]},

        {“bezier”: [289, 416, 286, 422, 284, 415, 282, 414]},

        {“bezier”: [282, 414, 281, 413, 280, 415, 278, 415]},

        {“bezier”: [278, 415, 276, 414, 275, 411, 276, 409]},

        {“bezier”: [276, 409, 276, 409, 275, 409, 275, 408]},

        {“bezier”: [275, 408, 272, 411, 271, 411, 267, 412]},

        {“bezier”: [267, 412, 267, 416, 270, 414, 271, 416]},

        {“bezier”: [271, 416, 272, 417, 272, 419, 272, 420]},

        {“bezier”: [272, 420, 273, 422, 274, 423, 274, 424]},

        {“bezier”: [274, 424, 276, 428, 273, 426, 272, 430]},

        {“bezier”: [272, 430, 272, 432, 275, 436, 276, 436]},

        {“bezier”: [276, 436, 278, 429, 282, 434, 285, 436]},

        {“bezier”: [285, 436, 283, 440, 279, 442, 285, 444]},

        {“bezier”: [285, 444, 286, 447, 285, 449, 283, 450]},

        {“bezier”: [283, 450, 285, 453, 291, 454, 287, 458]},

        {“bezier”: [287, 458, 285, 459, 281, 461, 282, 464]},

        {“bezier”: [282, 464, 283, 465, 287, 467, 283, 467]},

        {“bezier”: [283, 467, 282, 467, 280, 467, 279, 467]},

        {“bezier”: [279, 467, 278, 467, 275, 467, 274, 466]},

        {“bezier”: [274, 466, 275, 465, 278, 464, 279, 463]},

        {“bezier”: [279, 463, 280, 461, 278, 460, 277, 459]},

        {“bezier”: [277, 459, 274, 457, 267, 457, 268, 452]},

        {“bezier”: [268, 452, 268, 449, 271, 448, 269, 444]},

        {“bezier”: [269, 444, 267, 441, 264, 443, 266, 438]},

        {“bezier”: [266, 438, 264, 437, 263, 437, 261, 437]},

        {“bezier”: [261, 437, 262, 434, 263, 433, 262, 430]},

        {“bezier”: [262, 430, 262, 428, 261, 424, 259, 423]},

        {“bezier”: [259, 423, 261, 420, 264, 419, 262, 415]},

        {“bezier”: [262, 415, 261, 415, 259, 413, 258, 412]},

        {“bezier”: [258, 412, 257, 411, 256, 409, 255, 408]},

        {“bezier”: [255, 408, 256, 408, 258, 407, 259, 406]},

        {“bezier”: [259, 406, 260, 405, 260, 403, 260, 403]},

        {“bezier”: [260, 403, 263, 398, 264, 400, 268, 403]},

        {“bezier”: [268, 403, 270, 405, 275, 406, 274, 400]},

        {“bezier”: [274, 400, 273, 396, 268, 395, 273, 391]}

    ],

    [

        {“stroke”: [239, 224, 193]},

        {“strokeWidth”: 0.6346880197525024},

        {“bezier”: [262, 386, 262, 386, 290, 421, 311, 429]}

    ],

    [

        {“stroke”: [239, 224, 193]},

        {“strokeWidth”: 0.6346880197525024},

        {“bezier”: [254, 385, 254, 385, 279, 427, 311, 438]}

    ],

    [

        {“stroke”: [239, 224, 193]},

        {“strokeWidth”: 0.6346880197525024},

        {“bezier”: [252, 395, 252, 395, 279, 441, 310, 448]}

    ],

    [

        {“stroke”: [239, 224, 193]},

        {“strokeWidth”: 0.6346880197525024},

        {“bezier”: [253, 407, 253, 407, 276, 447, 309, 454]}

    ],

    [

        {“stroke”: [239, 224, 193]},

        {“strokeWidth”: 0.6346880197525024},

        {“bezier”: [254, 417, 254, 417, 280, 458, 307, 462]}

    ],

    [

        {“stroke”: [239, 224, 193]},

        {“strokeWidth”: 0.6346880197525024},

        {“bezier”: [256, 438, 256, 438, 276, 464, 286, 465]}

    ],

    [

        {“stroke”: [239, 224, 193]},

        {“strokeWidth”: 0.6346880197525024},

        {“bezier”: [290, 387, 290, 387, 269, 413, 255, 428]},

        {“bezier”: [255, 428, 255, 428, 276, 458, 291, 461]}

    ],

    [

        {“stroke”: [239, 224, 193]},

        {“strokeWidth”: 0.6346880197525024},

        {“bezier”: [277, 385, 277, 385, 265, 401, 254, 412]}

    ],

    [

        {“stroke”: [239, 224, 193]},

        {“strokeWidth”: 0.6346880197525024},

        {“bezier”: [305, 385, 305, 385, 259, 429, 256, 437]}

    ],

    [

        {“stroke”: [239, 224, 193]},

        {“strokeWidth”: 0.6346880197525024},

        {“bezier”: [257, 445, 257, 445, 302, 399, 311, 393]}

    ],

    [

        {“stroke”: [239, 224, 193]},

        {“strokeWidth”: 0.6346880197525024},

        {“bezier”: [315, 401, 315, 401, 264, 444, 258, 452]}

    ],

    [

        {“stroke”: [239, 224, 193]},

        {“strokeWidth”: 0.6346880197525024},

        {“bezier”: [260, 459, 260, 459, 306, 417, 314, 414]}

    ],

    [

        {“stroke”: [239, 224, 193]},

        {“strokeWidth”: 0.6346880197525024},

        {“bezier”: [314, 422, 314, 422, 271, 460, 263, 462]}

    ],

    [

        {“stroke”: [239, 224, 193]},

        {“strokeWidth”: 0.6346880197525024},

        {“bezier”: [312, 432, 301, 443, 288, 462, 273, 465]}

    ],

    [

        {“stroke”: [0, 0, 0]},

        {“strokeWidth”: 1.6828399896621704},

        {“line”: [319, 376, 310, 458]},

        {“bezier”: [310, 458, 310, 458, 308, 466, 297, 467]},

        {“bezier”: [297, 467, 286, 469, 280, 468, 280, 468]},

        {“bezier”: [280, 468, 280, 468, 262, 468, 259, 458]},

        {“bezier”: [259, 458, 255, 448, 249, 375, 249, 375]},

        {“line”: [249, 375, 319, 376]}

    ],

    [

        {“stroke”: [239, 224, 193]},

        {“strokeWidth”: 0.6346880197525024},

        {“bezier”: [272, 382, 272, 382, 296, 415, 314, 419]}

    ],

    [

        {“stroke”: [239, 224, 193]},

        {“strokeWidth”: 0.6346880197525024},

        {“bezier”: [279, 381, 279, 381, 301, 404, 315, 407]}

    ],

    [

        {“opacity”: 100},

        {“fill”: [210, 164, 78]},

        {“stroke”: [0, 0, 0]},

        {“strokeWidth”: 1.6828399896621704},

        {“bezier”: [234, 337, 234, 337, 232, 338, 232, 340]},

        {“bezier”: [232, 340, 232, 343, 232, 343, 235, 345]},

        {“bezier”: [235, 345, 235, 345, 233, 366, 239, 374]},

        {“bezier”: [239, 374, 245, 382, 250, 383, 250, 383]},

        {“bezier”: [250, 383, 250, 383, 267, 387, 284, 387]},

        {“bezier”: [284, 387, 298, 387, 314, 384, 321, 379]},

        {“bezier”: [321, 379, 327, 375, 328, 374, 329, 368]},

        {“bezier”: [329, 368, 330, 362, 331, 345, 331, 345]},

        {“bezier”: [331, 345, 331, 345, 335, 342, 334, 339]},

        {“line”: [334, 339, 332, 336]},

        {“bezier”: [332, 336, 332, 336, 275, 352, 234, 337]}

    ],

    [

        {“opacity”: 100},

        {“fill”: [210, 164, 78]},

        {“stroke”: [0, 0, 0]},

        {“strokeWidth”: 1.6828399896621704},

        {“bezier”: [235, 345, 268, 359, 311, 352, 331, 345]}

    ],

    [

        {“stroke”: [0, 0, 0]},

        {“strokeWidth”: 1.346269965171814},

        {“bezier”: [301, 219, 299, 213, 302, 203, 307, 199]},

        {“bezier”: [307, 199, 310, 197, 316, 195, 315, 200]}

    ]

]

[rakoonic2]

There’s no real issue with ‘complicated’ as it all breaks down nicely enough in the JSON file.

I think I am more likely to run into centering problems than anything else, from what I’ve read in the forums, but I have high hopes something useful might come out of all this.

I won’t have time today to look into it, but just as an aside I can’t promise each object will be an individual polygon object - I may have to create several objects and merge them into a display group.

[jeff15]

The functionality that I’m especially looking for is being able to change things like fill color of a vector shape exported from Illustrator. An example would be something like a bunch of shapes in a coloring book where you want to let users “paint” them different colors.

[rakoonic2]

Ah that’s awesome.

Well the goal would be to get in each shape as a seperate shape in corona as well, rather than just a purely visual match.

So once that is in, it’d be fine.

One question though - how would you know which object is which - is there a way of placing a name tag or something on an object that gets exported? If so, a few helper functions would be enough to do what you want, once everything is in and pretty.

[jeff15]

I’m a little unclear on what the import to Corona process would look like. That is, what do you expect the workflow would be from exporting the Illustrator json to working with a shape within Corona? Would there be an opportunity to insert a name into the json file somehow and have become a property of the shape? 

[rakoonic2]

What I’m planning for now is you simply copy and paste the JSON export contents into a text file, and would pass that file name to the import routine, so yeah you could add in tags and what-not.

The problem is more how to identify each object in the case you can’t put tags or names or IDs into the objects from within Illustrator - say you export a file with 200 objects, how exactly are you going to track down which object receives the ID?

There’s no real benefit over adding it manually to the JSON output as opposed to doing it in corona (in fact it’d probably be easier in Corona, as you’d be working on the objects individually as opposed to having to find the X object and its definition in JSON).

The end result, however, would likely be a display group with each object as a child within it, so you’d be able to iterate through them at will. The tag idea would enable you to find objects directly by this tag though, making it much simpler.

[kilopop]

Just away from the office right now but wondering whether labels would be output to json if each object is put to its own layer (example I sent was all objects on one layer) probably those labels would show up on the svg. Rakoonic, would svg be a better format to use than json?