xaviserrag / phaserjs-dialogs-plugin

#Phaser Dialogs plugin

Inspired by: netgfx

Dialogs is a plugin to help you out with the creation of dialogs on your game.

##How to install the plugin

Load the script on the html file:

  <script src="dialogs.js"></script>

Add this line of code on the same state were you want to create the dialogs (at this moment is not possible to use the Plugin on different states):

 game.Dialogs = game.plugins.add(new Phaser.Plugin.Dialogs(game));

It is necessary to pass the game to the constructor of the Plugin.

After the instantiation of the Dialogs plugin, you can now create a dialog simply calling:

game.Dialogs.createDialog(options)

##How to run the examples First of all you'll need to clone this repository on your machine. To do so run this command on the console:

git clone https://github.com/xaviserrag/phaserjs-dialogs-plugin.git

After that, you'll have the boilerplate on your machine, now is time to install all the dependencies of the project. On the main folder use:

npm install

Then change to the example folder and run:

bower install

Now you can return to the main folder and run:

grunt

Okay! Examples running! :)

###Example The object options is were all the configurations of the popup are created. This is a possible example of a configuration object:

{
   name: 'dialogName',
   hasEasyClose: true,
   hasBgScreen: true,
   bgScreenAlpha: 0.9,
   btnCloseY: 0,
   fadeIn: 'alpha',
   fadeOut: 'alpha',
   objects: [
     {
       type: 'text',
       color: '#fff',
       fontFamily: 'Arial',
       fontSize: 90,
       offsetY: -150,
       content: "Game Over"
     }
   ]
 },

First of all there are the general options, then is possible to add objects with their own properties.

###General Options

• name -> Name of the popup, to differentiate between dialogs. Default: ''.
• hasEasyClose -> If true, clicking on the screen will close the Dialog. Debault: false.
• hasBgScreen -> If true, a full layer of a color will appear, giving more focus on the dialog. Default: false.
• bgScreenColor -> Color of the bgScreen. Default 0x000000.
• bgScreenAlpha -> Alpha of the bgScreen. Default 0.7.
• bgImg -> Name of the sprite or frame that will be used for the background of the dialog. If no sprite is passed, no bg will appear.
• closeBtnSprite -> Name of the sprite or frame that will be used for the close Button. Default: ''. If no closeBtnSprite is passed, there will be no close button. Be careful to have always a close button or an easyClose activated.
• closeBtnOffsetY -> Offset Y of the close button. Default: 0 (centered on the center).

After all those properties, we can setup our fadeIn or fadeOut animations, and our objects. Let's explain those deeper.

###FadeIn and fadeOut This plugin has four types of animations, they are inverse on the In and Out.

• alpha -> Standard alpha animation from 0 to 1.
• alphaUp -> Alpha animation + a little tween moving all the dialog from the bottom to the center.
• alphaDown -> Alpha animation + a little tween moving all the dialog from the top to the center.
• alphaScale -> Alpha animation + a little scale of the dialog.

All the animations appear on the examples. In the other hand, if you don't like any of those animations. You can just pass a function to the fadeIn that returns your desired tween. Example:

fadeIn: function () {
    return this.game.add.tween(dialog)
        .from({alpha: 0}, 500, Phaser.Easing.Linear.None);
        .from({alpha: 1}, 5000, Phaser.Easing.Linear.None);
        .from({x: 550}, 500, Phaser.Easing.Linear.None, true);
}

It is important to apply the tween to the dialog object, you don't need to define it in your code. Autostart is needed too.

You can also apply all these concepts on the fadeOut property.

###Objects

####What are the objects?

The objects are all the things that you want to appear on the dialog. They can be images, bitmap fonts or normal fonts, even animations!

####Properties

• type -> 'text', 'bitmapText' or 'image'. The type of the object you want to add.
• color -> The color of the font. Default: #000.
• fontFamily -> The font used. Default: Arial.
• fontSize -> The font size used. Default: 32.
• stroke -> If stroke thickness applied, color of the stroke. Default: #000.
• strokeThickness -> the thickness of the stroke. Default: 0 (no stroke).
• align -> the align of the text. Default: center.
• offsetX -> The offset X from the center. Default: 0 (centered on the center of the screen).
• offsetY -> The offset Y from the center. Default: 0 (centered on the center of the screen).
• contentScale -> If the type is an image you can scale it with this property. Default: 1 (no scale).
• content ->

In case of an image this will be the spriteName or frameName (if an spriteSheet is used on the dialog, this will expect a frame)

In case of a text, this will be the text printed.

• animation -> If case of an image, you can pass an array of frames here like in a normal animation. It will be played as a loop. Example:

animation: ['mario00', 'mario01', 'mario02']

animation: [0, 1, 2]

• callback -> a callback that will be triggered when the object is clicked.

###Contributors

Tomás Casquero