place()

If you're placing a layer group, all of the descendants will be placed by default. However, place() also lets you place specific descendants using a slash path format. An optional "options" object allows you to limit the recursion ("depth") and set debugging options ("debug").

// Place a top level layer
const psd = this.P2P.place(this, "psd_key", "root");

// Place a nested layer
const sprite = this.P2P.place(this, "psd_key", "root/spiteName");

// Place all the children of a nested group with some optional overrides
const item = this.P2P.place(
  this,
  "psd_key"
  "groupName/nestedGroup",
  {
    depth: 1, // Only place top level items in this group, not the descendants
    ignore: ["background", "sprites/sprite1"], // array of paths to ignore
    debug: {
      shape: true
    },
  }
);

In the following example, click the PSD Layers button to see how the PSD layers are named and nested.

Default Methods

Several sprite methods can be called on a placed group. This just applies the method to each sprite individually. Currently, the list of supported methods (somewhat arbitrarily) includes : 'setAlpha', 'setAngle', 'setBlendMode', 'setDepth', 'setDisplaySize', 'setFlip', 'setMask', 'setOrigin', 'setPipeline', 'setPosition', 'setRotation', 'setScale', 'setScrollFactor', 'setSize', 'setTint', 'setVisible', 'setX', 'setY', 'setZ'.

// Set the alpha and rotation of a group.
const depthTest = this.P2P.place(this, "psd_key", "depthTest");
depthTest.setAlpha(0.3);
depthTest.setRotation(Math.PI / 4);

Animations

Animations automatically play when placed. However, you can override the default animation properties at several points.

1. Layer naming : In the PSD itself, the attributes of the layer name itself can control animation properties. If you pass valid animation parameters, they will be merged in when instantiating the animation.

S | bounce | animation | frameRate: 5, yoyo: true

2. Instantiation : When instantiating the sprite, you can also pass in animation parameters, so the same thing could be acheived like so :

// For individual sprites
this.P2P.place(this, "psd_key", "nested/bounce",   {
    animationOptions: {
      frameRate: 12,
      yoyo: true,
    }
  });

If you have already placed the animation, you can also override the initial settings using the updateAnimation method.

this.bounce = this.P2P.place(this, "psd_key", "nested/bounce");

this.bounce.updateAnimation({
  frameRate: 5,
  yoyo: true,
});