Where to store positional data

[dajve]

Hi there,

I thought I would try Pixi.js for a project, and noted early on that it primarily calls itself a "rendering engine". So my first step was to write the game logic using standard JS. Now the designer has supplied some assets and I'm implementing Pixi.

So previously I had classes like this:

item = {
  x: 10,
  y: 10,
  update(){
    this.x += 1;
  },
  render(){
    ctx.fillRect(this.x, this.y, 10, 10);
  }
}

My question is, should I keep my logic in the class, something like:

item = {
  x: 10,
  y: 10,
  sprite: new Sprite("asset.png"),
  update(){
    this.x += 1;
  },
  render(){
    this.sprite.position.set(this.x, this.y);
  }
}

That way I still have access to item.x and item.y for hit tests and things like that. Or would it be a good plan to just ditch almost everything I have now, and just use the Pixi Sprite?

item = {
  sprite: new Sprite("asset.png"),
  setup(){
    this.sprite.position.set(10,10);
  },
  update(){
    this.sprite.x += 1;
  }
}

I'm a relatively seasoned dev, but have zero experience with Pixi. Simple collision detection is probably the only logic I need other than updating positions. What would you do?

[ivan.popelyshev]

You can make basic collision detection for pixi objects. XY and all transform is stored in "transform" field of display objects. ".position", ".x " , ".y" are just shortcuts.

https://pixijs.io/examples/#/demos-advanced/collision-detection.js

As soon as you want something more, you have to make your own Entity object, and copy coords from it regularly. That object can have link to its pixi facet and to its physics body, its up to you how to copy coords. Its necessary also because physics objects usually have different scale of coords, for example for p2 i use "-x/100, -y/100" to convert from pixels to physics