How to align texture along bezier path and control it

[Dergachev Mihail]

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 example
https://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?
 

[ivan.popelyshev]

Hello, and Welcome to the forums!

Use SimpleRope instead.

Edited May 7, 2020 by ivan.popelyshev

[Dergachev Mihail]

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?)


 

[ivan.popelyshev]

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

[Dergachev Mihail]

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