how to get angled trim of texture?

[thekayaker33]

Hi, I am trying to get a trim of a texture.
HOwever, i want an angled rectangular portion of the texture.
The PIXI.Rectangle class does not have an param for angle. It assumes angle = 0;
So how would i get it, if i want angle = 60 degrees?


So far this is what i have

    var yo = PIXI.Texture.from('characterekfwj.png', options);

    var frame = new PIXI.Rectangle(yo.frame.x, yo.frame.y, yo.frame.width, yo.frame.height);
    var crop = new PIXI.Rectangle(yo.frame.x, yo.frame.y, yo.frame.width, yo.frame.height);
    var trim = new PIXI.Rectangle(yo.frame.x, yo.frame.y, yo.frame.width, yo.frame.height);

    var ztexture = new PIXI.Texture(yo.baseTexture, frame, crop, trim);

[ivan.popelyshev]

Three ways i see here

1. use mask

2. manually hack texture UV's array "texture.uvs"

3. use Graphics beginTextureFill() with calculated matrix

In any way, you have to look up those things in docs, and it'll be better if you look at them in pixijs source 

for exampel, here is texture UV: 

https://github.com/pixijs/pixi.js/blob/dev/packages/core/src/textures/TextureUvs.ts

https://github.com/pixijs/pixi.js/blob/dev/packages/core/src/textures/Texture.ts#L329

As usual: when you ask non-standard thing, prepare to dive into the code

Edited June 27, 2020 by ivan.popelyshev

[thekayaker33]

I was originally using masks, but then I saw trim and thought it might be easier to use. It seems like I need to just go back to masks since modifying the pixi src isn’t something I’m familiar with

[ivan.popelyshev]

you dont have to modify src itself, you can just hack UV's from outside

See this ? https://github.com/pixijs/pixi.js/blob/dev/packages/sprite/src/Sprite.ts#L276

texture._uvs.uvsFloat32[0] = ...

Fill it with normalized coords of corners.
Most of hacks in pixi are done from outside. Even better - if you manage this trick, i will publish it in https://github.com/pixijs/pixi.js/wiki/v5-Hacks . Hacks are encouraged.\

You can also experiment with UV's in a mesh: https://pixijs.io/examples/#/mesh-and-shaders/triangle-textured.js Two triangles, UV coords, maybe position that somehow is tied to it 

Or just use SimpleMesh , you can pass vertices and UV's there.