Hello everyone, I’ve been using cocos2d-x for some time now but I am not familiar with Creator and Javascript so I might talk non-sense here, but anyway.
My (probably stupid)question is this one: can a JS framework like two.js be integrated in a Creator project? I am mostly interested in working with SVG files and achieveing things like shape morphing and stroke animation. Also, this should work on mobile, web and hopefully desktop. Is there a way to achieve this using Cocos Creator?
Thanks!
you could try to use the “headless” setup they describe in the docs and provide cc.Game.canvas as the domElement param when creating a Two object. i’m reserved that it’ll work though 
the way it’s architectured, i don’t think it fits in the CC architecture without changes.
as alternative, there’s this https://github.com/2youyou2/ccc.raphael, but it doesn’t work for latest cocos creator (2.0.x). i’ve hacked it to work (partially) on the latest CC, but haven’t yet published it, wasn’t sure if there’s any interest in such things. but if you’d like, i could try to make it public.
@Karg I also checked Raphael and the integration from 2youyou2, but decided to ditch it since it’s not supported anymore. Also, I wasn’t sure if in older CC versions it would work on both native(iOS, Android etc.) and web projects. The thing is that I am trying to find a good cross-platform SVG manipulation solution and at this point it seems that web tools are the best at working with SVGs so that’s why I was asking this question.
Of course that if you have time and will be able to, I’d love to see Raphael work on CC as much as I’d love to see Two.js or any other solution that will allow us to explore the whole potential that the SVG format has in the same way that these frameworks do on the web, but on native projects as well.
Looking forward to hearing from you regarding this issue, and thanks a lot for your time!
@Boby made the port public here https://github.com/stefandee/raphael-example - let me know if it works for you.
@Karg Great, thanks a lot! Unfortunately I might not have time to try it this week, but I’ll definitely check it as soon as possible and let you know how it goes. Thanks again!
@Karg I have checked your example project and it seems to work on CC 2.1.3, it runs fine, but unfortunately it seems that the Raphael framework does not have very good capabilities in terms of SVG rendering and animations. Hopefully someone will be able to integrate a more potent framework sometime so we can have real vector capabilities in Cocos Creator. I’m sure there are a lot of people out there who are still searching for a good mobile solution for using vector graphics and animations.
yeah, raphael svg support is very basic. but since you’re using 2.1.3, perhaps you’d be better off using 3d objects instead of svgs. it would be faster and it’ll look better, as cc.Graphics rendering lacks anti-aliasing for webgl context.
the demos you linked above (shape morphing and stroke animation) can be achieved with pure Cocos Creator using cc.Graphics, you don’t need an additional vector library. you can even do them in 3d, if you like 
@Karg well the main issue is that the project I need this for is very “art intensive” and all the art comes in vector format so using a capable framework like Two.js would suit me very well. Otherwise I’d have to find a way to convert the SVG into 3D data and work with that afterwards. Also, I’m not very good with 3D programming and although I believe I could achieve the shape morphing by doing some mesh transformations, I’m not sure how I could achieve the line(stroke) animations using the 3D APIs.
i’ve had minor succes doing a basic integration of two.js and cc. however, svg support in two.js is not proper: it’s not possible to load a file or create a svg from a string. it’s only able to parse existing “svg” html tags and translate it internally into draw commands. at least, as far as i’ve investigated.
in order to achieve svg support in cc, it’s first necessary for the cc.Graphics#fill to have support for fill rules, e.g. explicit/argument support for even-odd and implicit support for clockwise-counterclockwise paths (https://www.sitepoint.com/understanding-svg-fill-rule-property/). but i’m not sure if this is even on the radar for Cocos Creator team.
secondly, it’s parsing svg files with support for major graphics packages. while the 2youyou2 raphael port did some good groundwork, there’s still more work to be done on that front.
and a bit of blunder on my side, it’s possible to enable webgl anti-alias like shown in the examples: https://github.com/cocos-creator/example-cases/blob/master/assets/scripts/Init%20Engine.js