diff --git a/README.md b/README.md
index 823ac4c..85455c1 100644
--- a/README.md
+++ b/README.md
@@ -1,74 +1,156 @@
+
# 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)
+
+- 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)
+
+- animation:If you want the modal make a animation when show and hide, you can choose between'fade' and 'scale'. (the default is off, just making it visible and invisible without animations). Note: If modal pauses the game, you need to pause the game BEFORE call the show function, else the animation will broken and the modal will not be showed.
+
+
+
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.
+
+- type | The type of the element (text, bitmapText, image, video, sprite, button or 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)
+
+- lineSpacing | The Line Spacing of the text (number, text only)
+
+- maxWidth | The Max Width of the text, used to line break (number, text/bitmapText)
+
+- 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 and videos), 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]}"
+
+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)
+
+- 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; ```
+
+Note for Videos: Videos will loop while the modal is open. All videos will play on the event show and stop on the event hide. I'm working on a play button. For update it with updateModalValue, you need to pass the src of the video as value on the function, for example: 'assets/video/video1.mp4'.
+
Issue: https://github.com/photonstorm/phaser/issues/2176
-Thanks for this info @cemadil
+
+Thanks for this info @cemadil
\ No newline at end of file
diff --git a/src/modal.js b/src/modal.js
index afd9f51..6bdbf29 100644
--- a/src/modal.js
+++ b/src/modal.js
@@ -27,9 +27,11 @@ gameModal = function(game) {
var hCenter = options.hCenter || true;
var itemsArr = options.itemsArr || [];
var fixedToCamera = options.fixedToCamera || false;
+ var animation = options.animation || false;
var modal;
var modalGroup = game.add.group();
+
if (fixedToCamera === true) {
modalGroup.fixedToCamera = true;
modalGroup.cameraOffset.x = 0;
@@ -63,6 +65,12 @@ gameModal = function(game) {
}
}
+ if(animation){
+ modalGroup.animation = animation;
+ }else{
+ modalGroup.animation = false;
+ }
+
if (modalBackgroundCallback) {
var _innerModal = game.add.sprite(0, 0);
_innerModal.inputEnabled = true;
@@ -85,6 +93,8 @@ gameModal = function(game) {
var itemColor = item.color || 0x000000;
var itemFontfamily = item.fontFamily || 'Arial';
var itemFontSize = item.fontSize || 32;
+ var itemMaxWidth = item.maxWidth || false;
+ var itemLineSpacing = item.lineSpacing || false;
var itemStroke = item.stroke || '0x000000';
var itemStrokeThickness = item.strokeThickness || 0;
var itemAlign = item.align || 'center';
@@ -154,6 +164,16 @@ gameModal = function(game) {
modalLabel.addFontWeight("normal", arrOfBold[j + 1] - indexMissing);
indexMissing += 2;
}
+
+ if(itemMaxWidth){
+ modalLabel.wordWrap = true;
+ modalLabel.wordWrapWidth = itemMaxWidth;
+ }
+
+ if(itemLineSpacing){
+ modalLabel.lineSpacing = itemLineSpacing;
+ }
+
modalLabel.x = ((game.width / 2) - (modalLabel.width / 2)) + offsetX;
modalLabel.y = ((game.height / 2) - (modalLabel.height / 2)) + offsetY;
} else {
@@ -161,6 +181,11 @@ gameModal = function(game) {
modalLabel.contentType = 'bitmapText';
modalLabel.align = textAlign;
modalLabel.updateText();
+
+ if(itemMaxWidth){
+ modalLabel.maxWidth = itemMaxWidth;
+ }
+
modalLabel.x = (centerX - (modalLabel.width / 2)) + offsetX;
modalLabel.y = (centerY - (modalLabel.height / 2)) + offsetY;
}
@@ -209,8 +234,17 @@ gameModal = function(game) {
modalLabel.endFill();
modalLabel.x = (centerX - ((modalLabel.width) / 2)) + offsetX;
modalLabel.y = (centerY - ((modalLabel.height) / 2)) + offsetY;
- }
+ }else if (itemType === "video") {
+ var video = game.add.video(content);
+ modalLabel = game.add.sprite(0,0, video);
+ modalLabel.video = video;
+ modalLabel.scale.setTo(contentScale, contentScale);
+ modalLabel.contentType = 'video';
+ modalLabel.x = (centerX - ((modalLabel.width) / 2)) + offsetX;
+ modalLabel.y = (centerY - ((modalLabel.height) / 2)) + offsetY;
+ }
+
modalLabel["_offsetX"] = 0;
modalLabel["_offsetY"] = 0;
modalLabel.lockPosition = lockPosition;
@@ -269,9 +303,11 @@ gameModal = function(game) {
} else if (item.contentType === "image") {
item.loadTexture(value);
}
-
else if (item.contentType === "sprite") {
item.frame = value;
+ }else if (item.contentType == 'video'){
+ item.video.changeSource(value);
+ item.video.loop = true;
}
},
@@ -279,17 +315,94 @@ gameModal = function(game) {
return game.modals[type].getChildAt(index);
},
showModal: function(type) {
- game.world.bringToTop(game.modals[type]);
- game.modals[type].visible = true;
- // you can add animation here
+ var modal = game.modals[type]; //save the current modal (just for work faster)
+
+ modal.x = game.camera.x; //world bounds game camera fix
+ modal.y = game.camera.y;
+
+ game.world.bringToTop(modal);
+ modal.visible = true;
+
+ //if there is a video label, start it
+ for(x = 0; x <= modal.length -1 ; x++){
+ var e = modal.getChildAt(x)
+ if(e.contentType == 'video'){
+ e.video.play(true);
+ }
+ }
+
+ // if the game is paused the animations dont work, so we'll test and manipulate it to make the animation and after, pause back. its easier than create other timer.
+ var paused = game.paused;
+ if(paused){
+ game.paused = false;
+ }
+ // default animations here, you can add more
+ var animationDelay = 200;
+ switch(modal.animation){
+ case 'fade':
+ modal.alpha = 0;
+ game.add.tween(modal).to({
+ alpha: 1
+ }, animationDelay, Phaser.Easing.Linear.None, true, 0);
+ break;
+
+ case 'scale':
+ modal.scale.setTo(0,0);
+ game.add.tween(modal.scale).to({
+ x: 1,
+ y: 1
+ }, animationDelay, Phaser.Easing.Linear.None, true, 0);
+ break;
+ }
+
+ setTimeout(function(){
+ if(paused){ //if the game was paused we'll pause it back when the animation over
+ game.paused = true;
+ }
+ },animationDelay + 20);
+
},
hideModal: function(type) {
- game.modals[type].visible = false;
- // you can add animation here
+ var modal = game.modals[type]; //save the current modal (just for work faster)
+
+ //if there is a video label, stop it
+ for(x = 0; x <= modal.length -1 ; x++){
+ var e = modal.getChildAt(x)
+ if(e.contentType == 'video'){
+ e.video.stop(true);
+ }
+ }
+
+ // default animations here, you can add more
+ var animationDelay = 200;
+ switch(modal.animation){
+ case 'fade':
+ game.add.tween(modal).to({
+ alpha: 0
+ }, animationDelay, Phaser.Easing.Linear.None, true, 0);
+ break;
+
+ case 'scale':
+ game.add.tween(modal.scale).to({
+ x: 0,
+ y: 0
+ }, animationDelay, Phaser.Easing.Linear.None, true, 0);
+ break;
+
+ default: // if default will just make invisible
+ modal.visible = false;
+ break;
+ }
+
+ if(modal.animation){ //if animating, wait the animation over to hide
+ setTimeout(function(){
+ modal.visible = false;
+ },animationDelay + 40);
+ }
},
destroyModal: function(type) {
game.modals[type].destroy();
delete game.modals[type];
}
};
-};
+};
\ No newline at end of file