Sign in to follow this  
OnGe

Render border arround container?

Recommended Posts

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

 

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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?

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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.

Screenshot 2019-04-02 at 11.48.30.png

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.