Sign in to follow this  
thekayaker33

how to get angled trim of texture?

Recommended Posts

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);

Share this post


Link to post
Share on other sites

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 by ivan.popelyshev

Share this post


Link to post
Share on other sites

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.

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.