adamjw3 Posted March 10, 2017 Share Posted March 10, 2017 Hi Just starting with pixi (and canvas). Looking to create something similar to this ribbon effect on mobile http://beta.rallyinteractive.com/ Any advise, can this be done? any tutorials available? lack of experience in this means i'm struggling to break it down into smaller tasks, any advice. Thanks Quote Link to comment Share on other sites More sharing options...
ivan.popelyshev Posted March 10, 2017 Share Posted March 10, 2017 That's a generated mesh. Look at this demo: http://pixijs.github.io/examples/#/demos/strip-demo.js , its based on Rope: https://github.com/pixijs/pixi.js/blob/dev/src/mesh/Rope.js , you can make your own generated mesh that'll be a ribbon and not the rope. In any case, you have to clone pixijs github repo to have better access to pixi sources. Also, if my PR https://github.com/pixijs/pixi.js/pull/3820 will be accepted, it'll simplify the creation of generated meshes. adamjw3 1 Quote Link to comment Share on other sites More sharing options...
adamjw3 Posted March 10, 2017 Author Share Posted March 10, 2017 That looks great. Can't i just reference the pixijs in my project? or do i need to clone? Whats a PR? Quote Link to comment Share on other sites More sharing options...
ivan.popelyshev Posted March 10, 2017 Share Posted March 10, 2017 You have to clone it just to understand how it works. Docs are good, but PIXI is not a black box, its better to see actual sources, especially if you are going to copy some of them to make your own generated mesh. That doesn't affect the way you are referencing pixi in the project. PR is collaborative commit, I have my own pixijs branch and I'm asking core team to check it and merge into master branch. If that thing will be accepted, it will be easier to make your own generated meshes. Quote Link to comment Share on other sites More sharing options...
adamjw3 Posted March 10, 2017 Author Share Posted March 10, 2017 I see, hopefully they will do that. I'll have a play around with the rope demo over the weekend and try and get a ribbon effect. Would you recommend illustrator for creating the svg? Quote Link to comment Share on other sites More sharing options...
ivan.popelyshev Posted March 10, 2017 Share Posted March 10, 2017 I dont use illustrator and I dont use svg. You can also just use "PIXI.Graphics" for your cause. Quote Link to comment Share on other sites More sharing options...
adamjw3 Posted April 5, 2017 Author Share Posted April 5, 2017 I'm having trouble with creating the ribbon. I've started of with a straight line, similar to rope but can't workout the maths to plot the points to generate the ribbon shape. Any resources on this? Also in the example http://beta.rallyinteractive.com/ they have a shadow effect at certain points of the ribbon, would this be added to the graphic or do this with pixi? Only have a local version so no demo but hopefully will get one up soon Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.