Phaser.io Modals creator script
Live Example: https://codepen.io/7linternational/pen/eeMNMm/
Tutorial blog post: http://nightlycoding.com/wordpress/phaser-io-modal-creator/
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