unexpected Container dimensions

[mise]

Hi,

I'm drawing all kinds of things in a Container and noticed that the width and height of the Container were very unpredictable. I didn't find anything in this forums about this.

I boiled it down to the following simple example that gives the unexpected result that the position.x of the container is added to the width and same for y and height.
It also messes with the hitArea that is showed when you paste this into your example page.

game.createScene('Main', {
    init: function() {
        var container = new game.Container();
        container.position.set(200, 150);
        container.addTo(this.stage);
        container.interactive = true;
        
        var graphics = new game.Graphics();
        graphics.drawRect(0, 0, 100, 100);
        graphics.drawRect(100, 100, 100, 100);
        graphics.addTo(container);
        
        console.log(container.width, container.height) // 400, 350
    }
});

is this intended? If so, how can I measure the contents of the Container and get the interactive mode that I want?

I am working on a card game and ported it from Pixi to Panda because somehow Panda renders a lot prettier. In Pixi the example above would give 200, 200.

Thanks a lot,

Mise

[ftguy2018]

I think everything added to a container is relative and local the container's coordinate, do you have the same result if you add your object to the container first and then translate to 200,150 ?

[mise]

yes, same thing.

BTW, If you use Sprite in stead of Graphics it does work as expected!

[enpu]

This clearly is a bug. I have added this to the roadmap. Thanks for letting me know!

[mise]

Hi enpu,

I'm struggling a lot with container dimensions, also the dimensions of Text instances is wildly unpredictable making it hard to center anything. It also makes any mouse interaction problematic.

Do you already have an idea where this bug is? I took a look at the _getBounds function of Container, but it doesn't seem to be directly on the surface.

Anyway, can you let me know when you found it, even if it's not in a release yet?

Thanks,

mise

[enpu]

On 9/21/2018 at 5:38 PM, mise said:

also the dimensions of Text instances is wildly unpredictable making it hard to center anything

Would it be possible to get a simple example on where you are getting issues with Text instances?

[mise]

it's the same issue, Text extends Container, so if you give Text a positive x/y value, x and y get added to the width and height of the Text.

[Wolfsbane]

I don't have a fix, but I have something that might help you get going.

If you go to graphics.js, and add these two lines above this math...

//graphics.js

_getBounds: function() {
....
...
//add these two lines...at around line 211
tx = 0;
ty = 0;

//then the rest of the code
var x2 = a * (width + tx);
        var y2 = b *(width + ty);
        var x3 = (a * width) + (c * (height + tx));
        var y3 = (d * height) + (b * (width + ty));
....etc.

 

So tx/ty is set by var wt = this._worldTransform; at the top of _getBounds(), and it's returning the position of the container.

At a *guess* I think maybe if you set position of a container (but it has no content) then by default, the x,y, coordinates of the container become the position. Just a guess.

I'm not quite sure what the worldTransform() stuff does.

But if you set tx/ty to 0, before calculating the width/height, then that'll do the trick for the example you posted 

Let me know how it goes. 

(this is not a fix, it's just a little bit of debug info.. hope it helps narrow down the issue??)

[mise]

Thanks for the pointer Wolfsbane. At least it might help enpu. For me, I have already worked around it in my own code for the most part, I ported from a Pixi project, so I already had to abstract away lot of the game engine at that point.

That said, it would be nice if I could remove that work around code at some point