From dae4f287d59f1cb7b8124b9083c9343da4863395 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Vitor=20R=C3=A9gis?= Date: Tue, 28 Aug 2018 18:18:48 -0300 Subject: [PATCH 1/9] video support added --- src/modal.js | 14 +++++++++++--- 1 file changed, 11 insertions(+), 3 deletions(-) diff --git a/src/modal.js b/src/modal.js index afd9f51..6546ede 100644 --- a/src/modal.js +++ b/src/modal.js @@ -209,8 +209,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); + video.play(true); + modalLabel = game.add.sprite(0,0, 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,7 +278,6 @@ gameModal = function(game) { } else if (item.contentType === "image") { item.loadTexture(value); } - else if (item.contentType === "sprite") { item.frame = value; } @@ -292,4 +300,4 @@ gameModal = function(game) { delete game.modals[type]; } }; -}; +}; \ No newline at end of file From b389a1ed25236cff3b40bc838fc712edebe5aecc Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Vitor=20R=C3=A9gis?= Date: Tue, 28 Aug 2018 21:52:05 -0300 Subject: [PATCH 2/9] video playing out of the modal bug fixed, playing on show and stoping on hide --- src/modal.js | 17 ++++++++++++++++- 1 file changed, 16 insertions(+), 1 deletion(-) diff --git a/src/modal.js b/src/modal.js index 6546ede..e78625f 100644 --- a/src/modal.js +++ b/src/modal.js @@ -212,8 +212,8 @@ gameModal = function(game) { }else if (itemType === "video") { var video = game.add.video(content); - video.play(true); 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; @@ -289,10 +289,25 @@ gameModal = function(game) { showModal: function(type) { game.world.bringToTop(game.modals[type]); game.modals[type].visible = true; + //if there is a video label, start it + for(x = 0; x <= game.modals[type].length -1 ; x++){ + var e = game.modals[type].getChildAt(x) + if(e.contentType == 'video'){ + e.video.play(true); + } + } // you can add animation here }, hideModal: function(type) { game.modals[type].visible = false; + //if there is a video label, stop it + for(x = 0; x <= game.modals[type].length -1 ; x++){ + var e = game.modals[type].getChildAt(x) + if(e.contentType == 'video'){ + e.video.stop(true); + } + } + // you can add animation here }, destroyModal: function(type) { From 9a9b8990347f09155dba884ff1d59881a12773d1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Vitor=20R=C3=A9gis?= Date: Wed, 29 Aug 2018 07:40:37 -0300 Subject: [PATCH 3/9] readme updated --- README.md | 158 ++++++++++++++++++++++++++++++++++++++++-------------- 1 file changed, 117 insertions(+), 41 deletions(-) diff --git a/README.md b/README.md index 823ac4c..9c3bb07 100644 --- a/README.md +++ b/README.md @@ -1,74 +1,150 @@ + # 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)
    • +
+ + 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)
    • + +
  • 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: 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. +
Issue: https://github.com/photonstorm/phaser/issues/2176 -Thanks for this info @cemadil + +Thanks for this info @cemadil \ No newline at end of file From 203c7e93ce48cba9ef1b7d35ea8517fb644ad56d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Vitor=20R=C3=A9gis?= Date: Wed, 29 Aug 2018 14:02:48 -0300 Subject: [PATCH 4/9] default animations added: 'fade' and 'scale', with instructions on readme --- README.md | 2 ++ src/modal.js | 90 +++++++++++++++++++++++++++++++++++++++++++++------- 2 files changed, 81 insertions(+), 11 deletions(-) diff --git a/README.md b/README.md index 9c3bb07..9fba420 100644 --- a/README.md +++ b/README.md @@ -31,6 +31,8 @@ Phaser.io Modals creator script
  • 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.
    • + diff --git a/src/modal.js b/src/modal.js index e78625f..fd6bbe4 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; @@ -287,28 +295,88 @@ gameModal = function(game) { return game.modals[type].getChildAt(index); }, showModal: function(type) { - game.world.bringToTop(game.modals[type]); - game.modals[type].visible = true; + var modal = game.modals[type]; //save the current modal (just for work faster) + game.world.bringToTop(modal); + modal.visible = true; + //if there is a video label, start it - for(x = 0; x <= game.modals[type].length -1 ; x++){ - var e = game.modals[type].getChildAt(x) + for(x = 0; x <= modal.length -1 ; x++){ + var e = modal.getChildAt(x) if(e.contentType == 'video'){ e.video.play(true); - } } - // you can add animation here + } + + // 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; - //if there is a video label, stop it - for(x = 0; x <= game.modals[type].length -1 ; x++){ - var e = game.modals[type].getChildAt(x) + 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); } } - // you can add animation here + // 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); + }else{ //else just make it invisible without wait + modal.visible = false; + } }, destroyModal: function(type) { game.modals[type].destroy(); From f45aa2d02a705614a1ee338cd42a0db70bc9709d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Vitor=20R=C3=A9gis?= Date: Wed, 29 Aug 2018 15:32:01 -0300 Subject: [PATCH 5/9] redundancy removed --- src/modal.js | 2 -- 1 file changed, 2 deletions(-) diff --git a/src/modal.js b/src/modal.js index fd6bbe4..a97cab9 100644 --- a/src/modal.js +++ b/src/modal.js @@ -374,8 +374,6 @@ gameModal = function(game) { setTimeout(function(){ modal.visible = false; },animationDelay + 40); - }else{ //else just make it invisible without wait - modal.visible = false; } }, destroyModal: function(type) { From 997fc438991c86b413f58478c720dd9d4ace076c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Vitor=20R=C3=A9gis?= Date: Wed, 29 Aug 2018 20:31:46 -0300 Subject: [PATCH 6/9] video updateModalValue support added --- README.md | 2 +- src/modal.js | 3 +++ 2 files changed, 4 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index 9fba420..14de155 100644 --- a/README.md +++ b/README.md @@ -145,7 +145,7 @@ content: "The white {behind} me\n{is} a {[Phaser.Graphic]}" 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: 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. +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 diff --git a/src/modal.js b/src/modal.js index a97cab9..895fbfc 100644 --- a/src/modal.js +++ b/src/modal.js @@ -288,6 +288,9 @@ gameModal = function(game) { } else if (item.contentType === "sprite") { item.frame = value; + }else if (item.contentType == 'video'){ + item.video.changeSource(value); + item.video.loop = true; } }, From 59df8e75ed30633090ecbb704f47a1fbbbef6acb Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Vitor=20R=C3=A9gis?= Date: Sat, 1 Sep 2018 16:58:08 -0300 Subject: [PATCH 7/9] modal position fixed when world bounds was setted --- src/modal.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/modal.js b/src/modal.js index 895fbfc..bd93601 100644 --- a/src/modal.js +++ b/src/modal.js @@ -299,6 +299,8 @@ gameModal = function(game) { }, showModal: function(type) { var modal = game.modals[type]; //save the current modal (just for work faster) + + modal.x = game.camera.x; //world bounds game camera fix game.world.bringToTop(modal); modal.visible = true; From 16694a0041c766cf04b7ae48083db32f0d28834a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Vitor=20R=C3=A9gis?= Date: Sun, 2 Sep 2018 19:28:46 -0300 Subject: [PATCH 8/9] new text options: lineSpacing and maxWidth --- README.md | 4 ++++ src/modal.js | 17 +++++++++++++++++ 2 files changed, 21 insertions(+) diff --git a/README.md b/README.md index 14de155..85455c1 100644 --- a/README.md +++ b/README.md @@ -53,6 +53,10 @@ Phaser.io Modals creator script
  • 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)
    • diff --git a/src/modal.js b/src/modal.js index bd93601..10d53c8 100644 --- a/src/modal.js +++ b/src/modal.js @@ -93,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'; @@ -162,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 { @@ -169,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; } From 103df066b38aac907a0290015600f63e4af39554 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Vitor=20R=C3=A9gis?= Date: Wed, 5 Sep 2018 15:19:12 -0300 Subject: [PATCH 9/9] modal position y fixed to game camera --- src/modal.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/modal.js b/src/modal.js index 10d53c8..6bdbf29 100644 --- a/src/modal.js +++ b/src/modal.js @@ -318,6 +318,8 @@ gameModal = function(game) { 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;