Skip to content

Instantly share code, notes, and snippets.

@netgfx
Created December 17, 2019 15:05
Show Gist options
  • Save netgfx/775bb79146698d480530cd60f4bf538a to your computer and use it in GitHub Desktop.
Save netgfx/775bb79146698d480530cd60f4bf538a to your computer and use it in GitHub Desktop.
Phaser 3 modal scene
/* "esversion": 6 */
import Phaser from 'phaser';
import constants from '../../../../config/constants';
import _ from 'lodash';
import {
Styles
} from "../../../utils/styles";
class ModalMissionScene extends Phaser.Scene {
constructor() {
super({
key: 'ModalMissionScene'
});
}
init(data) {
this.parentScene = data.parentScene;
this.name = data.name;
}
preload() {
}
create() {
// blend modes //
/*
ADD: 1
COLOR: 15
COLOR_BURN: 8
COLOR_DODGE: 7
COPY: 26
DARKEN: 5
DESTINATION_ATOP: 24
DESTINATION_IN: 22
DESTINATION_OUT: 23
DESTINATION_OVER: 21
DIFFERENCE: 11
ERASE: 17
EXCLUSION: 12
HARD_LIGHT: 9
HUE: 13
LIGHTEN: 6
LIGHTER: 25
LUMINOSITY: 16
MULTIPLY: 2
NORMAL: 0
OVERLAY: 4
SATURATION: 14
SCREEN: 3
SKIP_CHECK: -1
SOFT_LIGHT: 10
SOURCE_ATOP: 20
SOURCE_IN: 18
SOURCE_OUT: 19
XOR: 27
*/
this.events.on('transitionout', function(toScene, duration) {
this.tweens.add({
targets: this,
alpha: 0,
duration: 800
});
}, this);
var graphics = this.add.graphics({
lineStyle: {
width: 2,
color: 0x000000,
alpha: 0.7
},
fillStyle: {
color: 0x000000,
alpha: 0.7
}
});
var modal = new Phaser.Geom.Rectangle();
modal.width = constants.WIDTH;
modal.height = constants.HEIGHT;
graphics.fillRectShape(modal);
/////
if (this.locked === true) {
this.modalPanel = this.add.sprite(0, 0, "missionGUI", "mission_lock_panel");
this.modalPanel.setScale(0.6, 0.6);
Phaser.Display.Align.In.Center(this.modalPanel, this.add.zone(constants.WIDTH * 0.5, constants.HEIGHT * 0.5, constants.WIDTH, constants.HEIGHT));
this.closeBtn = this.add.sprite(0, 0, "missionGUI", "popup_btn_close");
this.closeBtn.setScale(0.6);
this.closeBtn.x = this.modalPanel.x + this.modalPanel.displayWidth * 0.5 - 20;
this.closeBtn.y = this.modalPanel.y - this.modalPanel.displayHeight * 0.5 + 30;
this.closeBtn.setInteractive({
useHandCursor: true
});
this.closeBtn.on(
'pointerdown',
function(pointer, item) {
this.scene.stop("ModalMissionScene");
this.parentScene.closeModal();
},
this
);
} else {
this.modalPanel = this.add.sprite(0, 0, "missionGUI", "mission_panel");
this.modalPanel.setScale(0.6, 0.6);
Phaser.Display.Align.In.Center(this.modalPanel, this.add.zone(constants.WIDTH * 0.5, constants.HEIGHT * 0.5, constants.WIDTH, constants.HEIGHT));
//
this.closeBtn = this.add.sprite(0, 0, "missionGUI", "popup_btn_close");
this.closeBtn.setScale(0.6);
this.closeBtn.x = this.modalPanel.x + this.modalPanel.displayWidth * 0.5 - 20;
this.closeBtn.y = this.modalPanel.y - this.modalPanel.displayHeight * 0.5 + 30;
this.closeBtn.setInteractive({
useHandCursor: true
});
this.closeBtn.on(
'pointerdown',
function(pointer, item) {
this.scene.stop("ModalMissionScene");
this.parentScene.closeModal();
},
this
);
//
var title = this.add.text(this.modalPanel.x, this.modalPanel.y - this.modalPanel.displayHeight * 0.5, this.difficulty.toUpperCase(), {
fontFamily: 'new_rockerregular',
fontSize: 32,
color: Styles.getColor("title", "string"),
fontStyle: 'bold',
align: 'center'
})
.setShadow(0, 0, '#1e1e1e', 5, false, true);
Phaser.Display.Align.In.Center(title, this.modalPanel);
title.y = this.modalPanel.y - this.modalPanel.displayHeight * 0.5 + 14;
this.addButton("start");
}
////
this.scene.bringToTop();
}
addButton(type) {
if (type === "start") {
this.button = this.add.sprite(0, 0, "buttons", "button_green");
this.button.setScale(0.5);
this.button.setInteractive({
useHandCursor: true
});
// add interaction //
this.button.once(
'pointerdown',
function(pointer, item) {
this.scene.remove("ModalMissionScene");
},
this
);
this.buttonLabel = this.add.text(0, 0, "START", {
fontFamily: 'fondamentoregular',
fontSize: 24,
color: '#ffffff',
fontStyle: 'normal',
align: 'center'
});
Phaser.Display.Align.In.BottomCenter(this.button, this.modalPanel, 0, -8);
this.button.y = this.modalPanel.y + this.modalPanel.displayHeight * 0.5 - this.button.displayHeight - 8;
Phaser.Display.Align.In.Center(this.buttonLabel, this.button, 0, -4);
}
}
staggeredShow() {}
update() {}
}
export default ModalMissionScene;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment