Set absolute position

[alex4ero]

Hello,

I want to set the absolute position of a graphic to 0, if goes out of bounds. However, after a few hours I was not able to do this.

This is my code:

import * as PIXI from 'pixi.js'

const app = new PIXI.Application({
	width: window.innerWidth,
	height: window.innerHeight,
	antialias: true,
	view: document.querySelector('#canvas'),
})

const container = new PIXI.Container()
app.stage.addChild(container)

let graphics = new PIXI.Graphics()

for (let i = 0; i <= 0; i++) {
	graphics.beginFill(0xFFFFFF)
	graphics.drawCircle(
		Math.random() * app.renderer.width,
		Math.random() * app.renderer.height,
		10,
	)
	graphics.endFill()
}

container.addChild(graphics)

app.ticker.add((delta) => {
	container.children.forEach((circle) => {
		circle.x += 10 * delta

		if (circle.x >= app.renderer.width) {
			circle.x = 0
		}
	})
})

 

[ivan.popelyshev]

"position" is offset of whole graphics. 

graphics.drawCircle( Math.random() * app.renderer.width, Math.random() * app.renderer.height, 10, )

that's in local coords. If you draw circle in (50. 100) and your position is (10, 10) then circle will be at (60, 110). 

How to deal with that after the fact that you filled graphics with something? Well, you can take getLocalBounds(), calculate center of the thing and then subtract it from position. Usually people solve it differently: put coords in position, not in circle center.

Welcome to the forums!

Edited October 21, 2019 by ivan.popelyshev