A while ago I made an outrun type racing game with pixi.js v2.2.9, using graphics objects to render the road and ground polygons. This meant I had to use the Canvas renderer because with the webgl renderer I'd have had to re-upload all the graphics objects to the GPU every frame as they constantly changed shape. I'm now thinking of making a similar game so I just wanted to check whether graphics objects are now rendered differently with webgl in the latest version of pixi? In which case I might be able to modify the vertex positions of graphics objects at run time while running the webgl renderer without worrying  about the impact on performance?

I have an extensive framework built on top of pixijs 4.0.1 (mostly using composition) that we use with many of our apps but now I'd like to update to 4.5.6 and not much between both is compatible as far as I can tell. I'll probably have to go class by class and fix/update everything as I go and kinda hope everything will work at the end but I was wondering if any of you guys have some pointers as to which areas of pixi framework are fairly compatible and which are not (might save me some time).

On another note I got the ts definition for 4.5.6 here: https://github.com/pixijs/pixi-typescript and I get some errors in visual studio on that line: 

Made anything cool with pixi.js? Post it up here and share it with the world!

Whether it's a cool game demo, a fully fledged website or some tripped-out crazy experiment, we would all LOVE to see it!

To get the ball rolling, here are some pixi.js projects that exist out on the internets:

games:

http://www.goodboydigital.com/runpixierun/

http://www.theleisuresociety.co.uk/fightforeveryone/

http://flashvhtml.com/

experiments:

http://gametest.mobi/pixi/morph/

http://gametest.mobi/pixi/balls/

http://www.goodboydigital.com/pixijs/bunnymark/

hi..

i'm using 3.x with our project  and i'm testing 4.x (and i will move some good issue of 4.x like multi texture or transformstatic)

4.x's geometric values like this.position, this.scale.....  have moved to Transform Object.

and i saw following code

    /**
     * Convenience function to set the position, scale, skew and pivot at once.
     *
     * @param {number} [x=0] - The X position
     * @param {number} [y=0] - The Y position
     * @param {number} [scaleX=1] - The X scale value
     * @param {number} [scaleY=1] - The Y scale value
     * @param {number} [rotation=0] - The rotation
     * @param {number} [skewX=0] - The X skew value
     * @param {number} [skewY=0] - The Y skew value
     * @param {number} [pivotX=0] - The X pivot value
     * @param {number} [pivotY=0] - The Y pivot value
     * @return {PIXI.DisplayObject} The DisplayObject instance
     */


    DisplayObject.prototype.setTransform = function setTransform() {
        var x = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
        var y = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
        var scaleX = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 1;
        var scaleY = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 1;
        var rotation = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : 0;
        var skewX = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : 0;
        var skewY = arguments.length > 6 && arguments[6] !== undefined ? arguments[6] : 0;
        var pivotX = arguments.length > 7 && arguments[7] !== undefined ? arguments[7] : 0;
        var pivotY = arguments.length > 8 && arguments[8] !== undefined ? arguments[8] : 0;

        this.position.x = x;
        this.position.y = y;
        this.scale.x = !scaleX ? 1 : scaleX;
        this.scale.y = !scaleY ? 1 : scaleY;
        this.rotation = rotation;
        this.skew.x = skewX;
        this.skew.y = skewY;
        this.pivot.x = pivotX;
        this.pivot.y = pivotY;

        return this;
    };

there are this.position, this.scale but DisplayObject do not has them ...

can you explain how operate?

thx..
ps>  code get from pixi 4.5.6

thx.

I'm reading some tutorials about pixi.js and I can't understand the result I got from toLocal. I expect the result to be 100,100 however I got 200,200.

Console output:

bunny1: 100 100
bunny2: 200 200
200 200

Code:

    // create our little bunny friend..S
    var bunny = new PIXI.Sprite(texture);
    bunny.interactive = true;
    bunny.buttonMode = true;
    bunny.anchor.set(0.5);
    bunny.scale.set(1);
    bunny.x = 100;
    bunny.y = 100;

    // create our little bunny friend..S
    var bunny2 = new PIXI.Sprite(texture);
    bunny2.interactive = true;
    bunny2.buttonMode = true;
    bunny2.anchor.set(0.5);
    bunny2.scale.set(1);
    bunny2.x = 200;
    bunny2.y = 200;

    // add it to the stage
    app.stage.addChild(bunny);
    app.stage.addChild(bunny2);

    console.log("bunny1:",bunny.x,bunny.y)
    console.log("bunny2:",bunny2.x,bunny2.y)
    console.log(bunny.toLocal(bunny.position, bunny2).x,bunny.toLocal(bunny.position, bunny2).y)

I have a layer (displayobject) with multiple sprites inside. I want to add a circular explosion that would remove the parts of the object they overlap. So, after adding the explosion circle the current display object should.

Attached is a picture of what I want to achieve. I know that I could use a black & white mask, where everything is white and the explosion is black so it's masked, but this means creating a new bitmap as large as the entire canvas just to draw a tiny cutout and this would have to be done for each explosion.

Also, new sprites might be added after the explosion occurred, so the new items shouldn't be masked by old explosions.  The issue is that the background is a texture, not a solid color. If it was only a color I could have simply added a new circle with the background color over the shapes and it will look like a cutout. 

I think a WebGL solution such as using shaders might be used.

Question 1: Can we add a mask in PIXI that says: "hey, keep everything from the original image EXCEPT for the pixels of this mask" ?

Question 2: Do you have a better idea of how to create an explosion that removes parts of sprites that already exist and allow for new sprites to be placed over the explosion? What's the most efficient way to implement this?

PS: The sprites are actually meshes, I tried converting them to bitmap using .cacheAsBitmap on the mesh, but it seems to be buggy (the quality drastically drops and the entire mesh is actually displaced by several pixels when it is cached as a bitmap).

RemoveListener is works, but only in one way:

let spine // our spine animation
let log = () => console.log('nonsense');
let listener = {complete: log};

spine.state.addListener(listener);

And removes it like

spine.state.removeListener(listener);

It does not work if i do it like this:

let spine //our spine animation
let log = () => console.log('nonsense');

spine.state.addListener({complete: log});
// trying to remove
spine.state.addListener(log);
// or just like this
spine.state.addListener({complete: log});

Works fine if add and remove only the same object, but its long way.
Is there another way to do this?

I want to make sure I get this control technically perfect before I translate the others. I would really appreciate a code review and feedback so I can get the rest right.

Checkout the latest version of my dial knob. http://www.planetinaction.com/instrumentdemos/dialknob.htm

The page shows two dial knobs. Each can be operated separately but they can not be operated simultaneously using multi-touch. I looked at the multi-touch example code and I believe I implemented it correctly but obviously it isn't working.

Individual files: http://www.planetinaction.com/instrumentdemo

Hi All,

I'm trying to figure out if there is any functionality in PIXI to find a point on a bezier curve. For example I want to take a spurious global point and find the closest point on a curve.

Any help would be greatly appreciated.

Hi Everyone,

Browsing through the Pixi docs, it looks like the correct way to initialize a Pixi app with an initial width and height is:

let app = Pixi.Application({width: 500, height: 500});

It looks like Application only takes a single options argument.

http://pixijs.download/release/docs/PIXI.Application.html#stage

However, the examples use this format:

var app = new PIXI.Application(800, 600);

http://pixijs.github.io/examples/#/basics/basic.js

The above is how v3 used to do it - is this now deprecated, and is the format in the Doc the most up to date?

Hello! Please tell me whether to combine the pixi with react or angular to build the UI. I'm a flash developer with AS3 and turn on JS in the world of flash, works very effectively bundle Starling + Feathers, Pixi, I have not found a decent replacement Feathers. Spend time creating a UI library from scratch is not very desirable. What would you recommend friends? Thank you.

Hi all

It looks like the default time to register a tap on an object is indefinite.

Meaning that a tap event is just simply just touch on and touch off, regardless of time between. 

Is this the case, or is there a setting to shorten it within the interaction manager?

Itch.io puts my game in an iFrame. This means that event listeners don't work unless the iFrame has been clicked on (so no keyboard input). But clicking on the WebGL area within the iFrame doesn't focus the iFrame! If I make the iFrame larger than the rendering area, then click on the border(area between WebGL rendering area and iFrame edge), then my iFrame is focused, and keyboard input works again. But I can't ask players to click on the border before playing! It should be that the player lands on my page, clicks on the WebGL rendering area, and starts playing. And since this is on itch.io, I can't change the .html of the parent window (the one that contains my iFrame). I'm using hexi, so I'm using pixi v3. 

I want to make the camera follow my sprite around. (so my sprite is always in the center of the screen)

What's the best way to go about this? Does Pixi have built-in camera functions? I thought about just moving everything else relative to my sprite, but I thought this wouldn't be the best way.

I googled around a bit, but with no luck. 

Any tips or resources would be much appreciated.

Thanks.

I'd like to be able in runtime to replace the sprite sheet with the HD version in runtime.

i've tried using `hackTextureBySlotIndex` and iterating over all slots, but it requires already cropped textures, and i just want to swap the whole thing.

is it possible to do so without swapping the whole spine object? or is it impossible because of resolution changes?

Hey there, i am new to JS and PIXI and tried to rebuild a pong game in PIXI.JS to make it responsive. (https://robots.thoughtbot.com/pong-clone-in-javascript)

It seems to work but i run into the issue that all elements have a trail on movement, do i have to rerender the stage to avoid the trail or am i missing something?

https://jsfiddle.net/02utycqq/

// define gamne variables
const appWidth = window.innerWidth;
const appHeight = window.innerHeight;
const paddleWidth = 50;
const paddleHeight = 10;
const ballSize = 5;
const appWidthHalf = appWidth / 2;
const appHeightHalf = appHeight / 2;
const paddleWidthHalf = paddleWidth / 2;
const pongColor = 0x57dfbf;
const computerPositionX = appWidthHalf - paddleWidthHalf;
const computerPositionY = 50;
const playerPositionX = computerPositionX;
const playerPositionY = appHeight - computerPositionY - paddleHeight;
const ballPositionX = appWidthHalf;
const ballPositionY = appHeightHalf;
const playerSpeed = 4;
const computerSpeed = 4;
const ballSpeed = 3;

// Setup the ticker and the root stage PIXI.Container.
const app = new PIXI.Application(appWidth, appHeight, {
  antialias: false,
  transparent: false,
  resolution: 1,
});

function Paddle(x, y, width, height) {
  this.x = x;
  this.y = y;
  this.width = width;
  this.height = height;
  this.x_speed = 0;
  this.y_speed = 0;
}

Paddle.prototype.render = function renderPaddle() {
  this.graphics = new PIXI.Graphics();
  this.graphics.beginFill(pongColor);
  this.graphics.drawRect(this.x, this.y, this.width, this.height);
  this.graphics.endFill();
  app.stage.addChild(this.graphics);
};

Paddle.prototype.move = function (x, y) {
  this.x += x;
  this.y += y;
  this.x_speed = x;
  this.y_speed = y;
  if (this.x < 0) {
    this.x = 0;
    this.x_speed = 0;
  } else if (this.x + this.width > appWidth) {
    this.x = appWidth - this.width;
    this.x_speed = 0;
  }
};

function Player() {
  this.paddle = new Paddle(playerPositionX, playerPositionY, paddleWidth, paddleHeight);
}

Player.prototype.render = function renderPlayer() {
  this.paddle.render();
};

Player.prototype.update = function () {
  for (const key in keysDown) {
    const value = Number(key);
    if (value === 37) {
      this.paddle.move(-playerSpeed, 0);
    } else if (value === 39) {
      this.paddle.move(playerSpeed, 0);
    } else {
      this.paddle.move(0, 0);
    }
  }
};

function Computer() {
  this.paddle = new Paddle(computerPositionX, computerPositionY, paddleWidth, paddleHeight);
}

Computer.prototype.render = function renderComputer() {
  this.paddle.render();
};

Computer.prototype.update = function (ball) {
  const x_pos = ball.x;
  // eslint-disable-next-line
  let diff = -(this.paddle.x + this.paddle.width / 2 - x_pos);
  if (diff < 0 && diff < -computerSpeed) {
    diff = -ballSize;
  } else if (diff > 0 && diff > computerSpeed) {
    diff = ballSize;
  }
  this.paddle.move(diff, 0);
  if (this.paddle.x < 0) {
    this.paddle.x = 0;
  } else if (this.paddle.x + this.paddle.width > appWidth) {
    this.paddle.x = appWidth - this.paddle.width;
  }
};

function Ball(x, y) {
  this.x = x;
  this.y = y;
  this.width = ballSize;
  this.height = ballSize;
  this.x_speed = 0;
  this.y_speed = ballSpeed;
}

Ball.prototype.render = function renderBall() {
  this.graphics = new PIXI.Graphics();
  this.graphics.beginFill(pongColor);
  this.graphics.drawRect(this.x, this.y, this.width, this.height);
  this.graphics.endFill();
  app.stage.addChild(this.graphics);
};

Ball.prototype.update = function (paddle1, paddle2) {
  this.x += this.x_speed;
  this.y += this.y_speed;
  const top_x = this.x - ballSize;
  const top_y = this.y - ballSize;
  const bottom_x = this.x + ballSize;
  const bottom_y = this.y + ballSize;

  if (this.x - ballSize < 0) {
    this.x = ballSize;
    this.x_speed = -this.x_speed;
  } else if (this.x + ballSize > appWidth) {
    this.x = appWidth - ballSize;
    this.x_speed = -this.x_speed;
  }

  if (this.y < 0 || this.y > appHeight) {
    this.x_speed = 0;
    this.y_speed = ballSpeed;
    this.x = appWidthHalf;
    this.y = appHeightHalf;
  }

  if (top_y > appHeightHalf) {
    if (
      top_y < paddle1.y + paddle1.height &&
      bottom_y > paddle1.y &&
      top_x < paddle1.x + paddle1.width &&
      bottom_x > paddle1.x
    ) {
      this.y_speed = -ballSpeed;
      this.x_speed += paddle1.x_speed / 2;
      this.y += this.y_speed;
    }
  } else if (
    top_y < paddle2.y + paddle2.height &&
    bottom_y > paddle2.y &&
    top_x < paddle2.x + paddle2.width &&
    bottom_x > paddle2.x
  ) {
    this.y_speed = ballSpeed;
    this.x_speed += paddle2.x_speed / 2;
    this.y += this.y_speed;
  }
};

const player = new Player();
const computer = new Computer();
const ball = new Ball(ballPositionX, ballPositionY);

function render() {
  player.render();
  computer.render();
  ball.render();
}

function update() {
  player.update();
  computer.update(ball);
  ball.update(player.paddle, computer.paddle);
}

function step() {
  update();
  render();
  // app.ticker.update(step);
}

document.body.appendChild(app.view);
app.ticker.add(step);

// Controls

const keysDown = {};

window.addEventListener('keydown', (event) => {
  keysDown[event.keyCode] = true;
});

window.addEventListener('keyup', (event) => {
  delete keysDown[event.keyCode];
});

// resize function for app
function resize() {
  app.view.style.position = 'absolute';
  app.view.style.width = `${window.innerWidth}px`;
  app.view.style.height = `${window.innerHeight}px`;
  app.view.style.display = 'block';
}

window.onresize = () => {
  app.ticker.add(resize);
};

Thanks a lot.

I have to destroy a PIXI app and create it later on the same page, but it doesn't seem to work. No error is thrown but it simply doesn't show anything after the restart.

Here is the edited basic example (https://pixijs.github.io/examples/#/basics/basic.js ):

var app;

function create() {
  app = new PIXI.Application(800, 600, {backgroundColor : 0x1099bb});
document.body.appendChild(app.view);

// create a new Sprite from an image path
var bunny = PIXI.Sprite.fromImage('required/assets/basics/bunny.png')

// center the sprite's anchor point
bunny.anchor.set(0.5);

// move the sprite to the center of the screen
bunny.x = app.renderer.width / 2;
bunny.y = app.renderer.height / 2;

app.stage.addChild(bunny);

// Listen for animate update
app.ticker.add(function(delta) {
    // just for fun, let's rotate mr rabbit a little
    // delta is 1 if running at 100% performance
    // creates frame-independent tranformation
    bunny.rotation += 0.1 * delta;
});
  console.log(PIXI);
  
}

create();
setTimeout(() => {
  app.destroy();
  setTimeout(create, 200);
}, 1000);

I'm wondering how to create stages and how to change between them. It seems like there's only 1 stage per application and you just add and remove children from them. I saw the removeChildren() method and I tried invoking it. It does remove the container but it also generates a heap of WebGL errors with INVALID_OPERATION.

So I'm wondering how I should be approaching this. 

So it's been a while since i played with pixi.js, there has been new version etc. I have used version 4.4.0 last time. Has lots of things changed?

Anyhow, here is my jsfiddle: https://jsfiddle.net/hp4yn6kz/2/

As you can see, you cant see any text in the canvas. I also tried with texture atlas, but it renders nothing. Did i do something wrong? This worked before.

I wanted to ask how memory intensive pixi containers are, that is...
 

var container = new PIXI.Container();

My game works by utilizing multiple containers as convenient layers that I can loop through cleanly and flick visibility on and off for different game states. 

Before I get much farther in development, I wanted to ask if this was a bad practice or if there was a better one? Thanks!