Installation

GitHub

Installation

You can use psd-to-phaser as a node module :

npm install psd-to-phaser

or, if you're not using modules, include it as a script in your <head>.

<script src="https://unpkg.com/psd-to-phaser"></script>

1. Import the Plugin (for module-users)

import PsdToPhaser from 'psd-to-phaser';

2. Initialize in Your Game Config

const config = {
  type: Phaser.AUTO,
  width: 800,
  height: 600,
  plugins: {
    global: [
      {
        key: "PsdToPhaser",
        plugin: PsdToPhaser,
        start: true,
        mapping: "P2P", // Access via this.P2P in scenes
        data: {
          debug: {
            shape: false,   // Show sprite boundaries
            label: false,   // Show sprite labels
            console: false  // Console logging
          }
        }
      }
    ]
  },
  scene: YourScene
};

new Phaser.Game(config);

3. Use in Your Scene

class YourScene extends Phaser.Scene {
  preload() {
    // Load PSD data
    this.P2P.load.load(this, 'my_psd', 'assets/psd-output');
  }
  
  create() {
    // Wait for loading to complete
    this.events.once('psdLoadComplete', () => {
      // Place the PSD content
      const psd = this.P2P.place(this, 'my_psd', 'root');
      psd.setPosition(400, 300);
    });
  }
}