Animating texture along PIXI.Mesh.rope

[Saltallica]

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:

 

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

[ivan.popelyshev]

Ehm, it works already, look in pixi 5.2.0. In case you need more, just modify that Rope

[Saltallica]

Thanks - we're are still on PIXI version 4 for this project - I fear we have so many dependencies on how it works that upgrading may be impossible, I'll take a look!

[Saltallica]

Looking over the v5 documentation for PIXI.SimpleRope, Texture, and BaseTexture - nothing really stands out to me that says 'HEY! Set this to offset a texture'. Any hints?

[ivan.popelyshev]

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 November 17, 2019 by ivan.popelyshev

[Saltallica]

I do see something about adjusting the "frame". But I want to use the whole texture and just offset it in the X..err.. U position.

[ivan.popelyshev]

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 November 17, 2019 by ivan.popelyshev

[Saltallica]

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

Thanks again for your help!

 

Edited November 22, 2019 by Saltallica

[ivan.popelyshev]

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 November 22, 2019 by ivan.popelyshev