16ar Posted August 13, 2014 Share Posted August 13, 2014 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 Quote Link to comment Share on other sites More sharing options...
16ar Posted August 15, 2014 Author Share Posted August 15, 2014 Any idea ? Anyone ? Quote Link to comment Share on other sites More sharing options...
hubert Posted August 15, 2014 Share Posted August 15, 2014 Maybe there is something wrong with your global scalemode constant PIXI.Sprite.fromImage = function(imageId, crossorigin, scaleMode) { var texture = PIXI.Texture.fromImage(imageId, crossorigin, scaleMode); return new PIXI.Sprite(texture); }; 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 Quote Link to comment Share on other sites More sharing options...
16ar Posted August 16, 2014 Author Share Posted August 16, 2014 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 : Same log without the "cont.addChild(msk);" Quote Link to comment Share on other sites More sharing options...
16ar Posted August 28, 2014 Author Share Posted August 28, 2014 Hi, sorry to come back again but i still have not found the solution/reason to my problem... Can anyone try the code above and tell if he has the same issue ? Thank you everyone Quote Link to comment Share on other sites More sharing options...
Sebi Posted August 28, 2014 Share Posted August 28, 2014 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) hubert 1 Quote Link to comment Share on other sites More sharing options...
16ar Posted August 28, 2014 Author Share Posted August 28, 2014 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 Quote Link to comment Share on other sites More sharing options...
d13 Posted September 20, 2014 Share Posted September 20, 2014 But now the main question is why is there such a property and why set to 10 ? I would also like to know why ! Quote Link to comment Share on other sites More sharing options...
chg Posted September 20, 2014 Share Posted September 20, 2014 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) Quote Link to comment Share on other sites More sharing options...
d13 Posted September 20, 2014 Share Posted September 20, 2014 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? Quote Link to comment Share on other sites More sharing options...
chg Posted September 20, 2014 Share Posted September 20, 2014 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? d13 1 Quote Link to comment Share on other sites More sharing options...
Recommended Posts
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.