Sign in to follow this  
mobileDev

[Possible Bug] Graphics.drawPolygon and Order of vertices

Recommended Posts

Hi there,

I've been trying to generate some textures using PIXI.Graphics for some Sprites. Some of these sprites have their center a bit offset, as in wayyy outside their texture, which is what I want, I want them to rotate around a certain point. So I've used Graphics.drawPolygon and passed an array of vertices to it. So far so good. After that I use the renderer to generate a Texture, and use this to create a Sprite. All seems fine, however when positioning this new sprite with my desired Anchor point, the sprite wouldn't show at the correct location (I do some simple math first on paper to know exactly where the object should show be positioned).

So I poke around some more, trying to debug this issue, and I found out that, depending on how the order of the vertices for the object is fed to the Graphics.drawPolygon, I would get different results (of course one is the correct result and the other is the "bug"). Here is an example: 

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

As it can be seen, both Sprites show up at different locations while having the same properties (Pos, Anchor, Rotation, etc.), except how the texture was drawn:rNidtW6.png

    var verts = [];
    verts.push(0, 0);
    verts.push(20, 0);
    verts.push(20, 20);
    verts.push(0, 20);
    ...
    graphicsBox.drawPolygon(verts);
    ...

    var spriteCW = new PIXI.Sprite(app.renderer.generateTexture(...));
    ...
    spriteCW.anchor.x = 10; //<--- This will get me the red box on the image



    verts.reverse(); // !!Reverse the order of the vertices
    ...
    graphicsBox.drawPolygon(verts);
    ...

    var spriteCCW = new PIXI.Sprite(app.renderer.generateTexture(...));
    ...
    spriteCCW.anchor.x = 10; //<--- This will get me the green box on the image

 

 

 

This seem a little bit odd to me, should the order of the polygon affect how it is displayed through a Sprite? I know that working in 3D, the order will determine where the face of the polygon is pointing to, but not the position of the vertices. This might not even be a bug, but I'm not sure what I'm doing wrong or whats the best approach here.

 

 

Share this post


Link to post
Share on other sites

generateTexture takes extra pixel in texture => texture size is a bit different, anchor shows that.

You didnt close the polygon => stroke has only three lines in it,  look here: https://www.pixiplayground.com/#/edit/F3vnJZu6LODdtH~VvmrFV

However, in next version of pixi bounds wont be affected by line caps, i've specified pixijs.download/dev/pixi.js in your demo and it works: https://www.pixiplayground.com/#/edit/xoyXR_GDYnyjZer0fPEO5

That's where it was fixed: https://github.com/pixijs/pixi.js/pull/5991

Share this post


Link to post
Share on other sites

Thanks for the reply!

I had decided to migrate from v4.8, where I had encountered this issue, to v5 because I noticed it had big chances and maybe the problem would be gone with the new version. But I'm glad you guys were working on it and already have a working solution. I'll be using the dev version of pixi.

Thanks again and keep up the great work.

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.