Phaser.io Modals creator script
Switch branches/tags
Nothing to show
Clone or download
netgfx Merge pull request #13 from vitorregisrr/master
Support to spritesheets without atlas and adjustable frames.
Latest commit 3e296e7 Aug 22, 2018
Permalink
Failed to load latest commit information.
examples/example1 fixing jslint warnings May 17, 2017
phaser_modals support to spritesheet frames and sprite whithout atlas Jul 29, 2018
src bug fixies Jul 30, 2018
LICENSE Initial commit Feb 22, 2015
README.md readme.md updateModalValue revised Jul 29, 2018

README.md

Phaser_Modals

Phaser.io Modals creator script

Live Example: https://codepen.io/7linternational/pen/eeMNMm/

Tutorial blog post: http://nightlycoding.com/wordpress/phaser-io-modal-creator/

API

General Options:

  • type: This is the name of the modal, which we use to identify it
  • includeBackground: This toggles the modal background on or off (default off)
  • backgroundColor: This is the modal background color (default 0x000000)
  • backgroundOpacity: This sets the modal background opacity (default: 0.7)
  • modalCloseOnInput: If we want the modal to close when we click on the background (default off)

Modal elements properties

  • type | The type of the element (text, bitmapText, image, button, graphics)
  • color | The color of the element (text only)
  • fontFamily | The font family to use (bitmapText or text)
  • fontSize | The font size of the text or bitmaptext (bitmapText or text)
  • align | The alignment of the text (center, left, right and text only)
  • offsetX | The offset on x-axis of the element from the center of the game (0 is dead center)
  • offsetY | The offset on y-axis of the element from the center of the game (0 is dead center)
  • contentScale | The scaling to apply to the element (1 is no scale, default = 1)
  • stroke | The stroke color to apply to the text (default = 0x000000)
  • strokeThickness | The stroke thickness to apply to the text (default = 0)
  • content | The actual content of the element can be string, number, cache key (for images), url of image
  • callback | The callback function to call when the element is clicked/touched (basically when input down event is fired)
  • fixedToCamera | Whether or not the modal is fixed to camera (default = false)
  • atlasParent | When adding a sprite or button from an atlasHash/Array (default = "")
  • buttonHover | Key for the button state hover (default = content)
  • buttonActive | Key for the button state active (default = content)
  • graphicColor | Graphic color (default = 0xffffff)
  • graphicOpacity | Graphic opacity (default = 1)
  • graphicWidth | Graphic width (default = 200)
  • graphicHeight | Graphic height (default = 200)
  • graphicRadius | Graphic border radius (default = 0)
  • lockPosition | locks the position after an update (default = false)
  • tileSpriteWidth | The width of the TileSprite. (default = game.width)
  • tileSpriteHeight | The height of the TileSprite (default = game.height)
  • anchor | Anchor for element (default = {x:0,y:0})
  • angle | The angle property is the rotation of the element (default = 0)
  • x | The position of the element on the x axis (default = 0)
  • y | The position of the element on the y axis (default = 0)
  • frame | If this Sprite is using part of a sprite sheet or texture atlas you can specify the exact frame to use by giving a string or numeric index.

To make part of text BOLD include it like this:

	content: "The white {behind} me\n{is} a {[Phaser.Graphic]}"

(Add text that you want bold into {} )

Available functions

  • createModal | The function to create a modal, takes an object with the modal properties as an argument
  • showModal | The function to show a previously created modal, takes the modal name/type as an argument
  • hideModal | The function to hide a previously created and shown modal, takes the modal name/type as an argument
  • getModalItem | The function to get an element from a previously created modal, takes the modal name/type and the position of the element (index) as an argument
  • destroyModal | Remove a previously created modal from the registry
  • updateModalValue | Dynamically change the value of an element inside a modal,takes respectively: the new value, the modal name/type, and the index of the element as arguments (experimental function)

Note: Currently there is a bug on Phaser < 2.4.4 with WebGL using the last texture used if an empty sprite is created, in order to fix this you can add: innerModal.texture.baseTexture.skipRender = false;
Issue: https://github.com/photonstorm/phaser/issues/2176 Thanks for this info @cemadil