Jump to content

Different size of a container when combining Graphics and Sprite in a DisplayObjectContainer


16ar
 Share

Recommended Posts

Hello forum,

 

I am trying to make a grid of DisplayObjectContainers, so I am sorting elements depending on the width and height of each one. I add a Sprite in a container and the problem is when I add a Graphics element of the same size inside the container, the width and height changes. I narrowed the problem here :

var cont = new PIXI.DisplayObjectContainer();stage.addChild(cont);var convx = new PIXI.Sprite.fromImage('assets/img.png');//>>>>>>> image is 289x333cont.addChild(convx);var msk = new PIXI.Graphics();msk.beginFill(0x123456,0.5);msk.drawRect(0,0,convx.width,convx.height/2);          //>>>>>>> line above makes cont.width and height 309x343 (???)msk.drawRect(10,0,convx.width-20,convx.height/2-10); //>>>>>>> line above makes cont.width and height = is 289x333 (same as the image)cont.addChild(msk);

So why does the width and height changes when I draw a Rectangle of the same size in the same container ? Do you have the same problem ?

Thank you

Link to comment
Share on other sites

Maybe there is something wrong with your global scalemode constant

 

  1. PIXI.Sprite.fromImage = function(imageId, crossorigin, scaleMode)
  2. {
  3. var texture = PIXI.Texture.fromImage(imageId, crossorigin, scaleMode); return new PIXI.Sprite(texture);
  4. };

 

Graphics will apply the default scalemode if no argument is passed!

console.log(PIXI.scaleModes.DEFAULT;) and check if it is the multiplication that gives you additional 20px.

 

Another thing there could be some kind of scale applied to your container by other part of the code. FOr example to maintain the size on orientationchange. I assume that one of your containers or the stage is scaled and the width is given from pre or post scaled child. Try to llok for some answers there!

 

http://www.sevenative.com

Link to comment
Share on other sites

Thank you for your help Hubert.

 

PIXI.scaleModes.DEFAULT is 0.

The thing is that msk shows a rectangle of the same size the image though the size is different when msk is added :

 

The blue rectangle is msk and the image of the hexagon is behind.

 

Here is the full code :

<!DOCTYPE HTML><html><head>	<title>pixi.js</title>	<style>		body {			margin: 0;			padding: 0;			background-color: #FFFFFF;		}		#bg {			position: fixed;			z-index: -1; 		}		h1 {			margin: 0;		}	</style>	<script src="js/pixi.dev.js"></script>	<script src="js/hexagon.js"></script></head><body>	<canvas id="bg"></canvas>	<script>	var size = {		w: window.innerWidth || document.body.clientWidth,		h: window.innerHeight || document.body.clientHeight	}	var stage = new PIXI.Stage(0xf1ecdb);	var renderer = PIXI.autoDetectRenderer(size.w, size.h, document.getElementById("bg"), false, true);	document.body.appendChild(renderer.view);    var cont = new PIXI.DisplayObjectContainer();    stage.addChild(cont);    var convx = new PIXI.Sprite.fromImage('assets/convexe.png');    cont.addChild(convx);	var msk = new PIXI.Graphics();	msk.beginFill(0x123456,0.5);	msk.drawRect(0,0,convx.width,convx.height/2); // width : 309    height : 343	// cont.addChild(msk);	renderer.render(stage);    console.log("width : "+cont.width+"    height : "+cont.height+"     "+msk);    console.log("scale mode : "+PIXI.scaleModes.DEFAULT);    console.log("scaleX : "+msk.scale.x);	</script>	</body></html>

Here the visuel with the associated log :

 

capture1.png

Same log without the "cont.addChild(msk);"

capture2.png

Link to comment
Share on other sites

  • 2 weeks later...

PIXI.Graphics defines bounds like this:
 

var padding = this.boundsPadding;this.bounds = new PIXI.Rectangle(minX - padding, minY - padding, (maxX - minX) + padding * 2, (maxY - minY) + padding * 2);

this.boundsPadding is set to 10 in the Graphics constructor.

 

I believe that is adding the extra 20px width and 10px height.

 

Either try setting the boundsPadding to 0 or draw your image on a canvas and use that as texture. (Or use Sprites)

Link to comment
Share on other sites

Well i can't find my words to tell you how impressed and thankful i am !!!! (I'm french maybe that's why)

 

I set boundsPadding to 0 and now it works like a charm. But now the main question is why is there such a property and why set to 10 ? Plus it is not documented in the API reference. If someone has the answer I'd be happy to hear it.

 

THANK YOU

Link to comment
Share on other sites

  • 4 weeks later...

I would also like to know why ! :)

 

I can guess. I would think the margin property there to prevent sampling issues along the edges when the texture when the texture is displayed with anything other than nearest neighbour sampling. A 1-pixel margin would be enough, assuming your rendering only end up looking at immediately adjacent pixels, but if you want to support say effects such as blur a bigger margin would be needed (without this with the texture set to wrap your edges will blur with the content at the other side of the image, and set to clamp the blur will not be right either as edge pixels will be sampled as if they just keep repeating off that edge)

Link to comment
Share on other sites

I would think the margin property there to prevent sampling issues along the edges when the texture when the texture is displayed with anything other than nearest neighbour sampling. 

Are Pixi graphics are drawn directly by the rendering engine (canvas or WebGL) or do they render-to and then sample-from a bitmap?

If they're drawn directly then would pixel rounding inconsistencies you described still be an issue?

Link to comment
Share on other sites

Are Pixi graphics are drawn directly by the rendering engine (canvas or WebGL) or do they render-to and then sample-from a bitmap?

If they're drawn directly then would pixel rounding inconsistencies you described still be an issue?

Looking at Pixi's source on Github it appears that shape drawing calls wind up calling the built in canvas functions with the canvas renderer [src/pixi/renderers/canvas/CanvasGraphics.js] and builds a mesh object (approximating curves) for the GPU to rasterize if WebGL is used [src/pixi/renderers/webgl/utils/WebGLGraphics.js]

 

The point was, and I may well be wrong, presumably the graphics are rendered to a texture if a filter effect is applied in the WebGL Pixi renderer, because the filters are image space effects... would it be better to only pad if and when this is relevant? Possibly... EDIT: it seems WebGLFilterManager does add it own padding for filters, so unless the padding on Graphics is vestigial nevermind I guess?

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