Jump to content

Hatch pattern


zip87
 Share

Recommended Posts

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.

Link to comment
Share on other sites

9 minutes ago, b10b said:

You might need to explain some more about your goal?

Absolutely...

image.png.1f9c3d1146badc98c780e359151e3954.png

 

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

Link to comment
Share on other sites

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

 

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

 

image.thumb.png.4c82ae671c5b5300a5fd6a3096f63f0c.png

 

 

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.

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

  • Recently Browsing   0 members

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