gamixi

Treeshakeable extensions for any PixiJS Game

This Library is in a pre-alpha stage and not ready for production yet.
Help me writing documentation by creating a Pull Request.

PixiJS Best Practices

I missed a what you should know about ... when starting with PixiJS.
That's why I will share my personal way of doing things with this awesome framework.

You figured out some better ways? Let me and all others know by providing a Pull Request!

Sprites

Sprite size

When creating Sprites with Aseprite use 240x240px to get a decent looking Button.
That means just export a 120x120px Image with 200% to expect the same results.

Sprite instantiation

According to this #6599 issue you should never use .from() to construct sprites.
Use the PIXI.Loader to preload resources and when this is done, instantiate your sprites with the new keyword.

The static .from() method is able to handle multiple different input types but is therefore not that performant. If you wanna do it the correct way, do it with new.

const loader = PIXI.Loader.shared;

loader
  .add('button_brown', 'assets/images/button_brown.png')
  .add('button_light', 'assets/images/button_light.png')
  .load(() => {
    const texture = loader.resources['button_brown'].texture;
    const sprite = new PIXI.Sprite(texture);
  });

Promises

If you wanna use async / await in your application you have to convert Pixi's callbacks to promises.
You can read here #2538 why Pixi is not using promises in their core library.

function load(loader, alias, path) {
  return new Promise(
    (resolve, reject) => {
      loader.add(alias, path).load(() => resolve(loader.resources[path]));
    }
  );
}

const resource = await load(
  PIXI.Loader.shared,
  'button_brown',
  'assets/images/button_brown.png'
);

// do anything with your loaded texture