Jump to content

How to align texture along bezier path and control it

Dergachev Mihail

Recommended Posts

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

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?


Link to comment
Share on other sites

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

Link to comment
Share on other sites

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 by Dergachev Mihail
Link to comment
Share on other sites

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.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...