Skip to content

video support added and default animations #15

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 9 commits into
base: master
Choose a base branch
from
Open

video support added and default animations #15

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
dae4f28
video support added
vitorregisrr Aug 28, 2018
b389a1e
video playing out of the modal bug fixed, playing on show and stoping…
vitorregisrr Aug 29, 2018
9a9b899
readme updated
vitorregisrr Aug 29, 2018
203c7e9
default animations added: 'fade' and 'scale', with instructions on re…
vitorregisrr Aug 29, 2018
f45aa2d
redundancy removed
vitorregisrr Aug 29, 2018
997fc43
video updateModalValue support added
vitorregisrr Aug 29, 2018
59df8e7
modal position fixed when world bounds was setted
vitorregisrr Sep 1, 2018
16694a0
new text options: lineSpacing and maxWidth
vitorregisrr Sep 2, 2018
103df06
modal position y fixed to game camera
vitorregisrr Sep 5, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
164 changes: 123 additions & 41 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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

<strong>General Options:</strong>



<ul>
<li><strong>type:</strong> This is the name of the modal, which we use to identify it</li>
<li><strong>includeBackground:</strong> This toggles the modal background on or off (default off)</li>
<li><strong>backgroundColor:</strong> This is the modal background color (default 0x000000)</li>
<li><strong>backgroundOpacity: </strong> This sets the modal background opacity (default: 0.7)</li>
<li><strong>modalCloseOnInput:</strong> If we want the modal to close when we click on the background (default off)</li>

<li><strong>type:</strong> This is the name of the modal, which we use to identify it</li>

<li><strong>includeBackground:</strong> This toggles the modal background on or off (default off)</li>

<li><strong>backgroundColor:</strong> This is the modal background color (default 0x000000)</li>

<li><strong>backgroundOpacity: </strong> This sets the modal background opacity (default: 0.7)</li>

<li><strong>modalCloseOnInput:</strong> If we want the modal to close when we click on the background (default off)</li>

<li><strong>animation:</strong>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.</li>

</ul>



<strong>Modal elements properties</strong>



<ul>
<li><strong>type</strong> | The type of the element (text, bitmapText, image, button, graphics)</li>
<li><strong>color</strong> | The color of the element (text only)</li>
<li><strong>fontFamily</strong> | The font family to use (bitmapText or text)</li>
<li><strong>fontSize</strong> | The font size of the text or bitmaptext (bitmapText or text)</li>
<li><strong>align</strong> | The alignment of the text (center, left, right and text only)</li>
<li><strong>offsetX</strong> | The offset on x-axis of the element from the center of the game (0 is dead center)</li> <li><strong>offsetY</strong> | The offset on y-axis of the element from the center of the game (0 is dead center)</li> <li><strong>contentScale</strong> | The scaling to apply to the element (1 is no scale, default = 1)</li>
<li><strong>stroke</strong> | The stroke color to apply to the text (default = 0x000000)</li>
<li><strong>strokeThickness</strong> | The stroke thickness to apply to the text (default = 0)</li>
<li><strong>content</strong> | The actual content of the element can be string, number, cache key (for images), url of image</li>
<li><strong>callback</strong> | The callback function to call when the element is clicked/touched (basically when input down event is fired)</li>
<li><strong>fixedToCamera</strong> | Whether or not the modal is fixed to camera (default = false)</li>
<li><strong>atlasParent</strong> | When adding a sprite or button from an atlasHash/Array (default = "")</li>
<li><strong>buttonHover</strong> | Key for the button state hover (default = content)</li>
<li><strong>buttonActive</strong> | Key for the button state active (default = content)</li>
<li><strong>graphicColor</strong> | Graphic color (default = 0xffffff)</li>
<li><strong>graphicOpacity</strong> | Graphic opacity (default = 1)</li>
<li><strong>graphicWidth</strong> | Graphic width (default = 200)</li>
<li><strong>graphicHeight</strong> | Graphic height (default = 200)</li>
<li><strong>graphicRadius</strong> | Graphic border radius (default = 0)</li>
<li><strong>lockPosition</strong> | locks the position after an update (default = false)</li>
<li><strong>tileSpriteWidth</strong> | The width of the TileSprite. (default = game.width)</li>
<li><strong>tileSpriteHeight</strong> | The height of the TileSprite (default = game.height)</li>
<li><strong>anchor</strong> | Anchor for element (default = {x:0,y:0})</li>
<li><strong>angle</strong> | The angle property is the rotation of the element (default = 0)</li>
<li><strong>x</strong> | The position of the element on the x axis (default = 0)</li>
<li><strong>y</strong> | The position of the element on the y axis (default = 0)</li>
<li><strong>frame</strong> | 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. </li>

<li><strong>type</strong> | The type of the element (text, bitmapText, image, video, sprite, button or graphics).</li>

<li><strong>color</strong> | The color of the element (text only)</li>

<li><strong>fontFamily</strong> | The font family to use (bitmapText or text)</li>

<li><strong>fontSize</strong> | The font size of the text or bitmaptext (bitmapText or text)</li>

<li><strong>align</strong> | The alignment of the text (center, left, right and text only)</li>

<li><strong>lineSpacing</strong> | The Line Spacing of the text (number, text only)</li>

<li><strong>maxWidth</strong> | The Max Width of the text, used to line break (number, text/bitmapText)</li>

<li><strong>offsetX</strong> | The offset on x-axis of the element from the center of the game (0 is dead center)</li> <li><strong>offsetY</strong> | The offset on y-axis of the element from the center of the game (0 is dead center)</li> <li><strong>contentScale</strong> | The scaling to apply to the element (1 is no scale, default = 1)</li>

<li><strong>stroke</strong> | The stroke color to apply to the text (default = 0x000000)</li>

<li><strong>strokeThickness</strong> | The stroke thickness to apply to the text (default = 0)</li>

<li><strong>content</strong> | The actual content of the element can be string, number, cache key (for images and videos), url of image</li>

<li><strong>callback</strong> | The callback function to call when the element is clicked/touched (basically when input down event is fired)</li>

<li><strong>fixedToCamera</strong> | Whether or not the modal is fixed to camera (default = false)</li>

<li><strong>atlasParent</strong> | When adding a sprite or button from an atlasHash/Array (default = "")</li>

<li><strong>buttonHover</strong> | Key for the button state hover (default = content)</li>

<li><strong>buttonActive</strong> | Key for the button state active (default = content)</li>

<li><strong>graphicColor</strong> | Graphic color (default = 0xffffff)</li>

<li><strong>graphicOpacity</strong> | Graphic opacity (default = 1)</li>

<li><strong>graphicWidth</strong> | Graphic width (default = 200)</li>

<li><strong>graphicHeight</strong> | Graphic height (default = 200)</li>

<li><strong>graphicRadius</strong> | Graphic border radius (default = 0)</li>

<li><strong>lockPosition</strong> | locks the position after an update (default = false)</li>

<li><strong>tileSpriteWidth</strong> | The width of the TileSprite. (default = game.width)</li>

<li><strong>tileSpriteHeight</strong> | The height of the TileSprite (default = game.height)</li>

<li><strong>anchor</strong> | Anchor for element (default = {x:0,y:0})</li>

<li><strong>angle</strong> | The angle property is the rotation of the element (default = 0)</li>

<li><strong>x</strong> | The position of the element on the x axis (default = 0)</li>

<li><strong>y</strong> | The position of the element on the y axis (default = 0)</li>

<li><strong>frame</strong> | 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. </li>

</ul>



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 **{}** )



<strong>Available functions</strong>



<ul>
<li><strong>createModal</strong> | The function to create a modal, takes an object with the modal properties as an argument</li>
<li><strong>showModal</strong> | The function to show a previously created modal, takes the modal name/type as an argument</li>
<li><strong>hideModal</strong> | The function to hide a previously created and shown modal, takes the modal name/type as an argument</li>
<li><strong>getModalItem</strong> | 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</li>
<li><strong>destroyModal</strong> | Remove a previously created modal from the registry</li>
<li><strong>updateModalValue</strong> | 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)</li>

<li><strong>createModal</strong> | The function to create a modal, takes an object with the modal properties as an argument</li>

<li><strong>showModal</strong> | The function to show a previously created modal, takes the modal name/type as an argument</li>

<li><strong>hideModal</strong> | The function to hide a previously created and shown modal, takes the modal name/type as an argument</li>

<li><strong>getModalItem</strong> | 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</li>

<li><strong>destroyModal</strong> | Remove a previously created modal from the registry</li>

<li><strong>updateModalValue</strong> | 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)</li>

</ul>



<hr>



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'.

<br>Issue: https://github.com/photonstorm/phaser/issues/2176
Thanks for this info @cemadil

Thanks for this info @cemadil
129 changes: 121 additions & 8 deletions src/modal.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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;
Expand All @@ -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';
Expand Down Expand Up @@ -154,13 +164,28 @@ 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 {
modalLabel = game.add.bitmapText(0, 0, itemFontfamily, String(content), itemFontSize);
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;
}
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -269,27 +303,106 @@ 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;
}

},
getModalItem: function(type, index) {
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];
}
};
};
};