Dergachev Mihail Posted May 7, 2020 Share Posted May 7, 2020 Hey guys, I am glad to be a part of Game Dev community! I got some problems with finding a way to create bezier curve and align texture along it. Here is my code examplehttps://www.pixiplayground.com/#/edit/95tGP9bRdtlv6Uvm0RaHx I need to create a cable and convert it so that the texture aligns with a curve Example code shows that path is just tiled, not aligned. How to get result like SimpleRope, but smooth like bezier curve? Quote Link to comment Share on other sites More sharing options...
ivan.popelyshev Posted May 7, 2020 Share Posted May 7, 2020 (edited) Hello, and Welcome to the forums! Use SimpleRope instead. Edited May 7, 2020 by ivan.popelyshev Quote Link to comment Share on other sites More sharing options...
Dergachev Mihail Posted May 7, 2020 Author Share Posted May 7, 2020 Hi Ivan, thanks for the answer SimpleRope don't give that smoothness, like bezierCurve and it hard to control. Also we need to create SimpleRope every frame to update amount of points (maybe I am wrong?) Quote Link to comment Share on other sites More sharing options...
ivan.popelyshev Posted May 7, 2020 Share Posted May 7, 2020 in Graphics case - it does the same, but it calculates bezier for you (which is not a hard task). Yes, its a problem to change number of points in a Rope, you have to make your own rope version: copy the SimpleRope and RopeGeometry classes: https://github.com/pixijs/pixi.js/blob/dev/packages/mesh-extras/src/geometry/RopeGeometry.ts No, pixi doesnt have everything from the package, i dont think we can cover all the cases people want. At the least, we keep code mostly clean for people to hack the stuff they need Quote Link to comment Share on other sites More sharing options...
Dergachev Mihail Posted May 9, 2020 Author Share Posted May 9, 2020 (edited) updateCurvePrint(cable, offset) { const curvePrint = [ 0, 0, 0, -90, 0 + offset, -200, // example offset 0, -320, 0, -400 // texture width 400, height 27 ], curve = new Bezier(curvePrint), this.curvePoints = curve.getLUT(30); } createCable() { this.rope = new PIXI.SimpleRope(this.cableTexture, this.curvePoints); } Okay, thanks. But I think this task is very often, so maybe my solution will be helpful for other peoples. I used bezier-js https://pomax.github.io/bezierjs/ to create curves. When curve created, we can get each point of curve and apply to rope. First and last point in curvePrint should be fitted to texture sizes. After that we just create Rope once and call updateCurvePrint each frame, if we want update curve. The rope working with it well enough Edited May 9, 2020 by Dergachev Mihail karlbot and ivan.popelyshev 2 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.