This Week in LesserPanda #4

Covering the week of 2016-05-05 to 2016-05-11.

Thought not too much changes have been brought to LesserPanda this week, Actor class is further improved. It is much more powerful, easier to use and is now fully prepared for editor support.

Improvements of Actor

Components Are Fully Configurable

The first parameter of Actor component factory methods has been changed to a setting object. You can set any properties of the component by adding keys and values into it:

scene.spawnActor(Actor, 0, 0, 'stage')
  .initSprite({
    // Pass any properties that PIXI.Sprite support here to setup
    texture: 'my_texture_key',
    anchor: { x: 0, y: 1 },
    tint: 0xff00ff,
    blendMode: 'ADD',
  });

Actor from Data

This might be the most important feature added this week, which make it possible to spawn Actor and setup its components from pre-defined data(prefab).

Since the data to setup an Actor is JSON capatible, you can even put them into JSON files and load as demand. And what's more, these JSON files can be generated from a level/scene editor.

Let's see how to define a complex Actor:

scene.spawnActor(Actor, 100, 100, 'stage')
  .initFromData({
    // Define sprite hierarchy
    sprite: {
      // Type name should match the `add*` methods
      type: 'Sprite',
      texture: 'KenPixel.fnt_image',
      anchor: { x: 0, y: 0 },
      tint: 0x00ff00,

      // Add children
      children: [
        // Define display objects as usual
        {
          type: 'Graphics',
          shape: 'Box',
          width: 10,
          height: 16,
          color: 0xffffff,
        },
        {
          type: 'Text',
          text: 'Player 1',
          font: '16px Verdana',
          fill: 'red',
          key: 'nameText',
          blendMode: 'ADD',
        },
      ],
    },
    // Add empty body field to enable it
    body: {},
  });

Other Small Changes

To be able to make setting objects capatible with JSON format, I've added helper functions to fetch textures from loader.

As a result you can pass the key of a texture to methods like initSprite:

loader.addAsset('texture.png', 'key_of_texture');

this.initSprite({
  texture: 'key_of_texture',
});

Or an array of string for textures inside a sprite atlas:

loader.addAsset('my_atlas.json', 'my_atlas');

this.initSprite({
  texture: ['my_atlas', 'my_texture_inside_the_atlas'],
});

What's Next

The design of Actor is stable now, next big thing will be adding more and more behaviors and think about the level editor.