jdotr

Phaser 3 nine slice plugin!

Recommended Posts

Hey All!

I needed to display some dialog boxes in a recent game and the old 9-slice plugin wasn't ported to v3 yet so I wrote one (github repo). I have a live demo here and a gif of it in use follows. Would love to see this get some use outside of my projects so give it a spin. I'm pretty active on the discord and try to check in here weekly so feel free to ping if you have any questions!

9slice-demo.gif.aec8b2b888294055b8488fa0677c7808.gif

 

Happy hacking!

Share this post


Link to post
Share on other sites
On 6/20/2018 at 8:32 AM, jdotr said:

Hey All!

I needed to display some dialog boxes in a recent game and the old 9-slice plugin wasn't ported to v3 yet so I wrote one (github repo). I have a live demo here and a gif of it in use follows. Would love to see this get some use outside of my projects so give it a spin. I'm pretty active on the discord and try to check in here weekly so feel free to ping if you have any questions!

9slice-demo.gif.aec8b2b888294055b8488fa0677c7808.gif

 

Happy hacking!

@jdotr I am trying to use this plugin in my game. Getting the following error: Uncaught ReferenceError: NineSlicePlugin is not defined. 
My code is look like this.

    <script
  type="text/javascript"
  src="https://github.com/jdotrjs/phaser3-nineslice/releases/download/v0.3.7/nineslice.js"
></script>
var conf = {
  type: Phaser.AUTO,
  width: window.innerWidth,
  height: window.innerHeight,
  backgroundColor: 0x57407c,
  plugins: {
    global: [ NineSlicePlugin.DefaultCfg ],
  },
  scene: [gameScene]
};

game = new Phaser.Game(conf);
let gameScene = new Phaser.Scene('Game');

gameScene.create = function () {

    this.dlg = this.add.nineslice(
        110, 110,   // this is the starting x/y location
        340, 240,   // the width and height of your object
        'dlgLarge', // a key to an already loaded image
        88,         // the width and height to offset for a corner slice
        24          // (optional) pixels to offset when computing the safe usage area
      )
   };

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Recently Browsing   0 members

    No registered users viewing this page.