Sign in to follow this  
Saltallica

Animating texture along PIXI.Mesh.rope

Recommended Posts

Hey guys,

I'm wondering if there is a way to animate the offset position of a texture when applied to a PIXI.Mesh.rope. My goal is to have the texture "flow" in one direction. The texture in question is designed to repeat in one direction. I'm hoping if I can set the base texture to wrap along the U coordinate (using PIXI.WRAP_MODES.REPEAT), that if I can adjust the offset of the U over time, that I can effectively get the texture to wrap along the rope mesh.

Where I'm running in to trouble is, based off of research so far, I don't see a way to adjust the offset "out of the box" in PIXI. Is this even possible, or should I be taking a different approach?

 

Here's an screenshot of what I'm aiming for:

 

image.thumb.png.d00e70861156129778b91eeacef685f1.png

Note the arcing path leading from the gorilla, going over the skyscraper, and ending at a building. This is built using a mesh rope. I think it would be cool if I could

get the texture to move in one direction, similar to a tiling sprite, but along the rope.

 

Any insight is much appreciated!

 

Thanks,

Sean

Share this post


Link to post
Share on other sites

Changing Rope isn't that difficult, you can copy some parts from v5. I also had alternative Rope for v4, though without this function, you can look at it :

https://github.com/gameofbombs/pixi-heaven/tree/v4.x

https://gameofbombs.github.io/examples-heaven/#/mesh/rope-colored.js

https://gameofbombs.github.io/examples-heaven/#/mesh/rope-interpolated.js

We really cant implement everything that people want in generated meshes, and its not like they use very specific webgl stuff, its just geom, it should be easy.

Edited by ivan.popelyshev

Share this post


Link to post
Share on other sites

I see two ways

1. You can hack your texture that way it gives different UV's to rope. "texture.frame.x = ...; texture.frame.width = ...;" then "texture.updateUvs()" should do that.

2. Just modify the rope same way it works in our v.5.2.0, code is almost the same. 

https://github.com/pixijs/pixi.js/blob/dev/packages/mesh-extras/src/SimpleRope.js#L37 

https://github.com/pixijs/pixi.js/blob/dev/packages/mesh-extras/src/geometry/RopeGeometry.js#L194

Edited by ivan.popelyshev

Share this post


Link to post
Share on other sites

Ivan, here's the approach that ended up working. I discovered the frame shifting technique as you were writing your post about it 🙂 

The nice thing is, this doesn't require any deep deep diving in to PIXI internal or webgl, and works with PIXI v4. 

 

step 1 - adjust the base texture to wrap

this.pathTexture = new PIXI.Texture.fromImage('path-texture.png');

this.pathTexture.baseTexture.wrapMode = PIXI.WRAP_MODES.REPEAT;

step 2 - in my game loop update method

update(delta) {
   this.throwPath.texture.frame.x -= 200 * delta;
   this.throwPath.texture._updateUvs();
}

 

And here it is in action: https://ibb.co/FDtS3w8

animated-rope.gif

Thanks again for your help!

 

Edited by Saltallica

Share this post


Link to post
Share on other sites
9 hours ago, Saltallica said:

The nice thing is, this doesn't require any deep deep diving in to PIXI internal or webgl, and works with PIXI v4. 

That just means you'll encounter things that require deep diving in webgl later 😈 BWAHAHAHAHAHA

I'm glad its resolved.

Edited by ivan.popelyshev

Share this post


Link to post
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.

Guest
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.

Loading...
Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.