Jump to content

Set absolute position


Recommended Posts


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

let graphics = new PIXI.Graphics()

for (let i = 0; i <= 0; i++) {
		Math.random() * app.renderer.width,
		Math.random() * app.renderer.height,


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

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


Link to comment
Share on other sites

"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 by ivan.popelyshev
Link to comment
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.

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.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...