Render border arround container?

[OnGe]

Is there any way to draw border around container, so one can see where container really is? I know container doesnt render, but is there some trick to mock it up?

For context: Im trying to glue some sprites together to create one object. I put them in container and attach it somewhere, but it acts weird. Problem is probably that container has different size than image I can see (i.e. sprites inside container doesnt fill entire size of container, so center of it is somewhere else I think).

 

[ivan.popelyshev]

Container doesnt have size. Like, at all. Its not DIV. "width" and "height" properties are actually of bounding box calculated based on children, and if you modify them, it changes the "scale".

[OnGe]

I know. But children may be transparent, out of view or otherwise invisible. Then it inflates container and if you set, for example, container.pivot.x = container.width / 2 and try to rotate it, pivot point is somewhere else than you expected. And its hard to debug such thing. This is why I am looking for some way to outline container.

[ivan.popelyshev]

that's a very bad idea, to use width or height of container for positioning. It changes every time some child changes position.

[OnGe]

We are getting far from orginal question. But ok, i use it for pivot, so its about rotation. Any better idea? Is there any other way to set pivot on center of object, without working with width/height?

[ivan.popelyshev]

How do you define center? That's the problem here.

UPD: Imagine you have multiple children, they can be container or whatever. What is the center?

[OnGe]

In this case, center is half of width and height of container. Here is working example: http://test.onge.cz/sword/

It works fine, if everything in container si at right place. And get broken if something is somewhere else and its hard to find why. Thats why Im looking for way to outline container.

[ivan.popelyshev]

and, whats the width and height of container? How do we define it?

[ivan.popelyshev]

You can take getBounds() and add that rectangle to some graphics that will be rendered after the container. Or you can take getLocalBounds() and make graphics transform the same as container (position, scale, stuff), then you'll see how that rect is rotating.

[TheAlmightyOne]

In many cases you can assume the container size and just add a PIXI.Graphic to that container like so.

if (clientConfig.drawChunkGrid && layer.name === 'front') {
	const grid = new PIXI.Graphics()
	const text = new PIXI.Text(`${chunkPosition.x}, ${chunkPosition.y}`, {
		fontFamily: 'ArcadeClassic',
		fontSize: '16px',
		fill : '#fff',
		align: 'center',
		stroke: '#000',
		strokeThickness: 4
	})

	grid.lineStyle(1, 0x000000, 0.6)
	grid.moveTo(0, 0)
	grid.drawDashLine(fs * clientConfig.chunkSize.x, 0, 8, 8)

	grid.moveTo(0, 0)
	grid.drawDashLine(0, fs * clientConfig.chunkSize.y, 8, 8)

	chunkContainer.addChild(grid)
	chunkContainer.addChild(text)
}

use lineTo instead of this custom drawDashLine.

In this case my chunkContainers already have positions and constant dimensions.