Experimental Constructor Options

[bigtimebuddy]

⚠️ Work in progress

Trying out some more declarative constructor options for display objects. I feel like you should be able to set things like x/y from the constructor of display objects. Currently, only implemented Sprite, Container, DisplayObject.

const container = new Container();
const sprite = new Sprite(Texture.WHITE);
sprite.tint = 'red';
sprite.x = 100;
sprite.y = 100;
sprite.height = 200;
sprite.width = 200;
sprite.anchor.x = 0.5;
sprite.anchor.y = 0.5;
sprite.alpha = 0.8;
container.addChild(sprite);

const container = new Container({
  children: [
    new Sprite({
       texture: Texture.WHITE,
       tint: 'red',
       x: 100,
       y: 100,
       width: 200,
       height: 200,
       anchor: { x: 0.5, y: 0.5 },
       alpha: 0.8,
    })
  ]
});

Demo:
https://jsfiddle.net/bigtimebuddy/m2rz5k18/

TODO

• DisplayObject
• Container
• Sprite
• AnimatedSprite
• Text
• HTMLText
• Graphics
• Mesh
• ParticleContainer
• BitmapText
• TilingSprite

[codesandbox-ci]

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit 796c39f:

Sandbox	Source
pixi.js-sandbox	Configuration

[bigtimebuddy]

Here's another example with events:
https://jsfiddle.net/bigtimebuddy/mxaeq40o/

new Sprite({
  eventMode: 'static',
  cursor: 'pointer',
  onclick: () => console.log('clicked!'),
})