Skip to content

Latest commit

 

History

History
74 lines (62 loc) · 5.01 KB

README.md

File metadata and controls

74 lines (62 loc) · 5.01 KB
Raw

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: phaserjs/phaser#2176 Thanks for this info @cemadil