Hatch pattern

[zip87]

Hi all,

 

sorry for this trivial question. 
How can I apply a hatch pattern on resizable Sprite?

 

Many thanks,

 

Bye

[b10b]

You might need to explain some more about your goal?

26 minutes ago, zip87 said:

How can I apply a hatch pattern on resizable Sprite?

I imagine you have a "Sprite" (which is a shape that is scalable).  I imagine it is filled with a "pattern" that is not scalable.  So as the shape grows the amount of patterns shown within it would increase?

If that's the case then consider using beginTextureFill on a Graphics object and redraw the shape each resize:
http://pixijs.download/next/docs/PIXI.Graphics.html

There are other ways to achieve similiar (masking is powerful, custom shaders even more so), but this "Graphics" route is well documented.

[zip87]

9 minutes ago, b10b said:

You might need to explain some more about your goal?

Absolutely...

 

I need to recreate something like this... At the moment shapes are sprites and I need to zoom in/out and pan on entire scene.

Thanks

[b10b]

TilingSprite might work for that as-is (because it's a rectangle):
https://pixijs.download/dev/docs/PIXI.TilingSprite.html

Adding a border is a secondary step, either use Graphics (or another 4 sprites).

Your comment abount zoom in/out of the entire scene ... you'll need to connect the TilingSprite scale to the scale of the scene and update accordingly (to maintain the absolute hatch scale).  I can't provide specifics because it depends how you've set up your sceneGraph and objects.

 

Edited November 19, 2021 by b10b

[zip87]

 

I did a test, unfortunately in addition of not getting exactly the same result (color, etc ..) I also have a serious slowdown. I have several dozen rendered objects.

[SantosR]

Have you considered writing a fragment shader to draw the hatches? Might sound overkill but it could do the job.

Edited November 23, 2021 by SantosR

[zip87]

 

10 hours ago, SantosR said:

Have you considered writing a fragment shader to draw the hatches? Might sound overkill but it could do the job.

Thanks for suggestion, but it's beyond my current capabilities.

I tried this way:

https://www.pixiplayground.com/#/edit/GLdWwNu1U56EsWXQWWdje

but graphics slows everything down, So at the moment I decided for this solution