https://github.com/netgfx/phaser_modals
Phaser.io Modals creator script
https://github.com/netgfx/phaser_modals
Last synced: 5 months ago
JSON representation
Phaser.io Modals creator script
- Host: GitHub
- URL: https://github.com/netgfx/phaser_modals
- Owner: netgfx
- License: mit
- Created: 2015-02-22T08:14:05.000Z (over 11 years ago)
- Default Branch: master
- Last Pushed: 2018-09-05T18:19:25.000Z (almost 8 years ago)
- Last Synced: 2025-08-17T04:33:36.901Z (10 months ago)
- Language: JavaScript
- Size: 57.6 KB
- Stars: 60
- Watchers: 8
- Forks: 18
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-phaser - Modals - Phaser.io Modals creator script (Uncategorized / Uncategorized)
README
# 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