Skip to content

Instantly share code, notes, and snippets.

@teddykishi

teddykishi/Phaser Modals.markdown

Created April 18, 2016 19:23
Show Gist options
  • Save teddykishi/355a06542b111dd68bca039d265897a8 to your computer and use it in GitHub Desktop.
Save teddykishi/355a06542b111dd68bca039d265897a8 to your computer and use it in GitHub Desktop.
Download ZIP
Phaser Modals
Raw
index.html
<div style="font-family:'Luckiest Guy',cursive;visibility:hidden;opacity:0;position:fixed;">&nbsp;</div>
Raw
script.js
// This example uses the Phaser 2.2.2 framework
// Copyright © 2015 Michael Dobekidis
// Licensed under the terms of the MIT License
var reg = {};
var GameState = function(game) {
};
// Load images and sounds
GameState.prototype.preload = function() {
this.load.image("bg","http://i221.photobucket.com/albums/dd22/djmid71/Untitled-1_zpswmvh3qea.jpg");
this.load.image("m1", "http://i221.photobucket.com/albums/dd22/djmid71/M1_zpsdprlkpno.png");
this.load.image("m2", "http://i221.photobucket.com/albums/dd22/djmid71/M2_zpsefls9w86.png");
this.load.image("m3", "http://i221.photobucket.com/albums/dd22/djmid71/m3_zpszzqyjbpa.png");
this.load.image("m4", "http://i221.photobucket.com/albums/dd22/djmid71/m4_zps5tnlccp0.png");
this.load.image("m5", "http://i221.photobucket.com/albums/dd22/djmid71/m5_zpsdpz0cohz.png");
this.load.image("m6", "http://i221.photobucket.com/albums/dd22/djmid71/m6_zpsvfvskl1d.png"); this.load.image("gameover","http://i221.photobucket.com/albums/dd22/djmid71/gameover_zpse663rlsp.png");
this.load.image("tryagain", "http://i221.photobucket.com/albums/dd22/djmid71/tryagain_zpszyvxhs8m.png");
this.load.image("yes","http://i221.photobucket.com/albums/dd22/djmid71/yes_zpsfppqya7h.png");
this.load.image("no","http://i221.photobucket.com/albums/dd22/djmid71/no_zpsnjisaare.png");
this.load.image("twitter","http://i221.photobucket.com/albums/dd22/djmid71/twitter_zpsyadnfz48.png");
this.load.image("facebook","http://i221.photobucket.com/albums/dd22/djmid71/facebook_zpsxiqll8e0.png");
this.load.image("clear", "http://i221.photobucket.com/albums/dd22/djmid71/clear_zpspuy7nqhg.png");
this.load.image("star", "http://i221.photobucket.com/albums/dd22/djmid71/star_zpseh4eqpzn.png");
this.load.image("modalBG","http://i221.photobucket.com/albums/dd22/djmid71/modalBG_zpsgvwlxhmv.png");
};
// Setup the example
GameState.prototype.create = function() {
// initiate the modal class
reg.modal = new gameModal(game);
createModals();
// Set stage background to something sky colored
this.game.stage.backgroundColor = 0x4488cc;
this.game.add.tileSprite(0, -160, 960, 649, "bg");
var m1 = this.game.add.button(30, 50, "m1", showModal1);
var m2 = this.game.add.button(m1.width+m1.x+40, 50, "m2", showModal2);
var m3 = this.game.add.button(m2.width+m2.x+40, 50, "m3", showModal3);
var m4 = this.game.add.button(30, m1.height+m1.y+80, "m4", showModal4);
var m5 = this.game.add.button(m4.width+m4.x+40, m1.height+m1.y+80, "m5", showModal5);
var m6 = this.game.add.button(m5.width+m5.x+40,m1.height+m1.y+80, "m6", showModal6);
};
// The update() method is called every frame
GameState.prototype.update = function() {
};
function createModals() {
reg.modal.createModal({
type:"modal1",
includeBackground: true,
modalCloseOnInput: true,
itemsArr: [
{
type: "text",
content: "Simple Text with Modal background, \n nothing fancy here...",
fontFamily: "Luckiest Guy",
fontSize: 38,
color: "0xFEFF49",
offsetY: -50,
stroke: "0x000000",
strokeThickness: 5
}
]
});
//////// modal 2 ////////////
reg.modal.createModal({
type:"modal2",
includeBackground: true,
modalCloseOnInput: true,
itemsArr: [
{
type: "text",
content: "Seriously???",
fontFamily: "Luckiest Guy",
fontSize: 42,
color: "0xFEFF49",
offsetY: 50
},
{
type: "image",
content: "gameover",
offsetY: -50,
contentScale: 0.6
}
]
});
///////// modal 3 //////////
reg.modal.createModal({
type:"modal3",
includeBackground: true,
modalCloseOnInput: true,
itemsArr: [
{
type: "image",
content: "gameover",
offsetY: -110,
contentScale: 0.6
},
{
type: "image",
content: "tryagain",
contentScale: 0.6
},
{
type: "image",
content: "yes",
offsetY: 100,
offsetX: -80,
contentScale: 0.6,
callback: function () {
alert("YES!");
window.console.log("yes");
}
},
{
type: "image",
content: "no",
offsetY: 100,
offsetX: 80,
contentScale: 0.6,
callback: function () {
alert("NO!");
}
}
]
});
//////// modal 4 //////////
reg.modal.createModal({
type:"modal4",
includeBackground: true,
modalCloseOnInput: true,
itemsArr: [
{
type: "text",
content: "Share the awesomeness!",
fontFamily: "Luckiest Guy",
fontSize: 42,
color: "0xfb387c",
offsetY: -80
},
{
type: "image",
content: "twitter",
offsetY: 20,
offsetX: 80,
contentScale: 0.8,
callback: function(){
window.open("https://twitter.com/intent/tweet?text=Cool%20modals%20%40%20http%3A%2F%2Fcodepen.io%2Fnetgfx%2Fpen%2FbNLgaX", 'twitter');
}
},
{
type: "image",
content: "facebook",
offsetY: 20,
offsetX: -80,
contentScale: 0.8,
callback: function () {
window.open("http://www.facebook.com/sharer.php?u=Cool%20modals%20%40%20http%3A%2F%2Fcodepen.io%2Fnetgfx%2Fpen%2FbNLgaX")
}
}
]
});
/////// modal 5 //////////
reg.modal.createModal({
type:"modal5",
includeBackground: false,
modalCloseOnInput: true,
itemsArr: [
{
type: "image",
content: "modalBG",
offsetY: -20,
contentScale: 1
},
{
type: "image",
content: "clear",
contentScale: 0.5,
offsetY: -80
},
{
type: "image",
content: "star",
offsetY: 80,
offsetX: -100,
contentScale: 0.6
},
{
type: "image",
content: "star",
offsetY: 50,
offsetX: 0,
contentScale: 0.6
},
{
type: "image",
content: "star",
offsetY: 80,
offsetX: 100,
contentScale: 0.6
},
{
type : "text",
content: "X",
fontSize: 52,
color: "0x000000",
offsetY: -130,
offsetX: 240,
callback: function(){
reg.modal.hideModal("modal5");
}
}
]
});
////// modal 6 //////////
reg.modal.createModal({
type: "modal6",
includeBackground: true,
backgroundColor: "0xffffff",
backgroundOpacity: 0.8,
itemsArr: [
{
type: "text",
content: "Starting \nNext Level",
fontFamily: "Luckiest Guy",
fontSize: 52,
offsetY: -100
},
{
type: "text",
content: "5",
fontFamily: "Luckiest Guy",
fontSize: 42,
offsetY: 0
}
]
});
}
function showModal1(){
reg.modal.showModal("modal1");
}
function showModal2(){
reg.modal.showModal("modal2");
}
function showModal3() {
reg.modal.showModal("modal3");
}
function showModal4() {
reg.modal.showModal("modal4");
}
function showModal5() {
reg.modal.showModal("modal5");
}
function showModal6() {
reg.modal.showModal("modal6");
countDown(updateCountdown, function () {
reg.modal.hideModal("modal6");
});
}
function countDown(fn, endFn) {
var endFn = endFn || function(){};
var _timer = game.time.create(false);
_timer.start();
_timer.onComplete.add(endFn);
_timer.repeat(Phaser.Timer.SECOND, 5, fn, this);
window.console.log("adding timer", game);
}
function updateCountdown() {
var item = reg.modal.getModalItem("modal6", 3);
var index = Number(item.text);
window.console.log("index: ", index, item);
item.setText(String(index - 1));
item.update();
item.x = game.width / 2 - (item.width / 2);
item.y = game.height / 2 - (item.height / 2);
}
var game = new Phaser.Game(750, 380, Phaser.CANVAS, 'game');
game.state.add('game', GameState, true);
Raw
scripts
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="http://netgfx.com/trunk/games/phaser_modals/phaser.min.js"></script>
<script src="http://netgfx.com/trunk/games/phaser_modals/modal.js"></script>
<script src="https://platform.twitter.com/widgets.js"></script>
Raw
styles
<link href="http://fonts.googleapis.com/css?family=Luckiest+Guy" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment