Jump to content

[TOPIC: topicViewTemplate]
[GLOBAL: userSmallPhoto]
Photo

Vector Graphics
Started by kilopop Oct 11 2013 06:24 PM

54 replies to this topic
[TOPIC CONTROLS]
Page 1 of 3 1 2 3
This topic has been archived. This means that you cannot reply to this topic.
[/TOPIC CONTROLS]
[modOptionsDropdown]
[/modOptionsDropdown]
[reputationFilter]
[TOPIC: post.html]
#1

kilopop

[GLOBAL: userInfoPane.html]
kilopop
  • Contributor

  • 257 posts
  • Corona SDK

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..

 



[TOPIC: post.html]
#2

kilopop

[GLOBAL: userInfoPane.html]
kilopop
  • Contributor

  • 257 posts
  • Corona SDK

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



[TOPIC: post.html]
#3

walter

[GLOBAL: userInfoPane.html]
walter
  • Moderator

  • 726 posts
  • Alumni

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



[TOPIC: post.html]
#4

richard770

[GLOBAL: userInfoPane.html]
richard770
  • Contributor

  • 112 posts
  • Corona SDK

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



[TOPIC: post.html]
#5

jeff15

[GLOBAL: userInfoPane.html]
jeff15
  • Contributor

  • 106 posts
  • Corona SDK

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.newImageVect( [parentGroup,] filename, [baseDirectory] width, height )

 

Thanks!

Jeff

 

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



[TOPIC: post.html]
#6

rakoonic2

[GLOBAL: userInfoPane.html]
rakoonic2
  • Contributor

  • 503 posts
  • Corona SDK

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 :(



[TOPIC: post.html]
#7

kilopop

[GLOBAL: userInfoPane.html]
kilopop
  • Contributor

  • 257 posts
  • Corona SDK

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?



[TOPIC: post.html]
#8

rakoonic2

[GLOBAL: userInfoPane.html]
rakoonic2
  • Contributor

  • 503 posts
  • Corona SDK

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.

[TOPIC: post.html]
#9

rakoonic2

[GLOBAL: userInfoPane.html]
rakoonic2
  • Contributor

  • 503 posts
  • Corona SDK

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



[TOPIC: post.html]
#10

jeff15

[GLOBAL: userInfoPane.html]
jeff15
  • Contributor

  • 106 posts
  • Corona SDK

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

 

Many thanks!

Jeff

 

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



[TOPIC: post.html]
#11

kilopop

[GLOBAL: userInfoPane.html]
kilopop
  • Contributor

  • 257 posts
  • Corona SDK

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..

[TOPIC: post.html]
#12

kilopop

[GLOBAL: userInfoPane.html]
kilopop
  • Contributor

  • 257 posts
  • Corona SDK

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]
        }
    ]
]
 



[TOPIC: post.html]
#13

rakoonic2

[GLOBAL: userInfoPane.html]
rakoonic2
  • Contributor

  • 503 posts
  • Corona SDK

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...



[TOPIC: post.html]
#14

jeff15

[GLOBAL: userInfoPane.html]
jeff15
  • Contributor

  • 106 posts
  • Corona SDK

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]}
    ]
]


[TOPIC: post.html]
#15

rakoonic2

[GLOBAL: userInfoPane.html]
rakoonic2
  • Contributor

  • 503 posts
  • Corona SDK

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.



[TOPIC: post.html]
#16

jeff15

[GLOBAL: userInfoPane.html]
jeff15
  • Contributor

  • 106 posts
  • Corona SDK

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.



[TOPIC: post.html]
#17

rakoonic2

[GLOBAL: userInfoPane.html]
rakoonic2
  • Contributor

  • 503 posts
  • Corona SDK

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.



[TOPIC: post.html]
#18

jeff15

[GLOBAL: userInfoPane.html]
jeff15
  • Contributor

  • 106 posts
  • Corona SDK

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? 



[TOPIC: post.html]
#19

rakoonic2

[GLOBAL: userInfoPane.html]
rakoonic2
  • Contributor

  • 503 posts
  • Corona SDK

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.



[TOPIC: post.html]
#20

kilopop

[GLOBAL: userInfoPane.html]
kilopop
  • Contributor

  • 257 posts
  • Corona SDK

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?

[TOPIC: post.html]
#21

rakoonic2

[GLOBAL: userInfoPane.html]
rakoonic2
  • Contributor

  • 503 posts
  • Corona SDK

No idea, I know nothing about all this.

JSON would give me a head start simply because Corona already has a JSON importer.

 

 

What I'd probably do is start with the JSON just to check I can do what is needed, then expand it to use SVG if possible, as I have the feeling you are almost certainly right about SVG being a better format.



[TOPIC: post.html]
#22

rakoonic2

[GLOBAL: userInfoPane.html]
rakoonic2
  • Contributor

  • 503 posts
  • Corona SDK

OK I made a start on this, and I've got stuff showing, but...

 

What the heck is happening with the polygon placement? If I create a polygon with values all around 7000, I do not expect to see it sitting at the origin :s

I understand they go through the painful (to me) process of normalising the polygon so it has the anchor at the middle (another reason I am really beginning to hate anchors), but they should at least then offset the X and Y by the amount so, you know, it appears where the points were set, at least :s

 

Anyway I expect this to only be a small delay, but it is a frustrating thing. I know I read this elsewhere on the forums, so I'm not the only one finding this behaviour unhelpful, to say the least.



[TOPIC: post.html]
#23

rakoonic2

[GLOBAL: userInfoPane.html]
rakoonic2
  • Contributor

  • 503 posts
  • Corona SDK

Righto got some placement working right, and I'm going to store all the bounding areas of each shape I create so you can see roughly where it all ended up, in case you create it but you can't see it.



[TOPIC: post.html]
#24

rakoonic2

[GLOBAL: userInfoPane.html]
rakoonic2
  • Contributor

  • 503 posts
  • Corona SDK

The face demo I've got importing ok, and should look a lot better when I have in bezier subdivision.

The icecream one for now produces a long list of errors saying it can't create the polygons due to holes or self-intersection, then produces a segment fault and crashes the simulator. I seem to be rather good at doing that lately :)

I do have some ideas on what might be the problem in that respect, but it'd be useful to know if the icecream does indeed have any holes in it, as that seems to be a (reasonable) limitation of newPolygon(). I think not, from the image, but can't hurt to double check.



[TOPIC: post.html]
#25

ingemar

[GLOBAL: userInfoPane.html]
ingemar
  • Corona Geek

  • 2,733 posts
  • Enterprise

I had a look at the Ice-Cream vector graphic in CS6, and there are some open paths with a stroke+fill.

The Cherry has two open paths, and one part of the cone are some that I could find.

Would that be the problem?




[topic_controls]
Page 1 of 3 1 2 3
 
[/topic_controls]