Chapter #10 Phaser v3
Game Prototype Library


Integrated Index.html or external Boot.js

Unorthodox Method: combining index.html with game initialization logic
Download from Phaser v3 Repository
REMEMBER: ES6 classes in JavaScript are not blueprints as found in other languages. They are simply “defined objects” that are modified “at will” during runtime.

States from Functions



<script id="unorthodox">
/**  
 * File Name: combines index.html & initial boot.js  
 * Bonus File Content URL: https://leanpub.com/LoRD  
 * Description: monolithic File for controlling and displaying game scenes;  
 *  managing global variables throughout game state.  
 * Author: Stephen Gose  
 * Version: 0.0.0.15  
 * Author URL: http://www.stephen-gose.com/  
 * Support: support@pbmcube.com  
 *  
 * Copyright © 1974-2017 Stephen Gose LLC. All rights reserved.  
 *  
 * Do not sell! Do not distribute!  
 * This is a licensed permission file. Please refer to Terms of Use  
 *   and End Users License Agreement (EULA).  
 * Redistribution of part or whole of this file and  
 * the accompanying files is strictly prohibited.  
 *  
 */  
	var GAMEAPP = GAMEAPP || {};

GAMEAPP.Boot = function ()
{
    this.face = null;  
};  
  
GAMEAPP.Boot.prototype.constructor = GAMEAPP.Boot;  
  
//overwrite prototypes  
GAMEAPP.Boot.prototype = {  
  
    preload: function ()  
    {  
        this.load.image('imageKey', '');  
    },  
  
    create: function ()  
    {  
        this. = this.add.image(0, 0, 'imageKey');  
    }  
  
};  
  
//  Files specified in the State config files payload  
//  will be loaded in *before* the State is started,  
//  meaning they're available before even the  
//  State.preload function (if set) is called  
  
//  This is perfect for loading in small JSON config files for example,  
//  a tiny amount of preloader assets that the preloader  
//  itself needs to use.  
  
var stateConfig = {
    renderToTexture: true,
    x: 64,
    y: 64,
    _width: 320,
    _height: 240,
    preload: preload,
    create: create,
    files: [
        { type: 'image', key: 'imageKey', url: '' }
    ]
};  
  
var config = {  
    type: Phaser.CANVAS,  
    parent: 'phaser-example',  
    width: 800,  
    height: 500  
    scene: stateConfig
};  
  
//reference to consolidated configuration object  
var game = new Phaser.Game(config);  
  
game.scene.add('Boot', GAMEAPP.Boot, true);</script>

</body>
</html>

States from Instances


//Note: you may also create multiple states from instances.
var demo = new Phaser.Scene('Demo');

demo.preload = function () {

    this.load.image('face', 'assets/pics/bw-face.png');

}

demo.create = function () {

    this.add.image(0, 0, 'face');

}

var config = {
    type: Phaser.CANVAS,
    parent: 'phaser-example',
    width: 800,
    height: 500,
    scene: demo
};

var game = new Phaser.Game(config);

States from Objects



var config = {
    type: Phaser.CANVAS,
    parent: 'phaser-example',
    width: 800,
    height: 500,
    scene: {
        preload: preload,
        create: create
    }
};

var game = new Phaser.Game(config);

//Note: you may also create multiple states from js objects.  
//  This also permits parallel states to exist.
function preload() {

    this.load.image('face', 'assets/pics/bw-face.png');

}

function create() {

    this.add.image(0, 0, 'face');

}

See Examples here


Manual Start: Boot.js

Standard Method: using index.html to load and initilize game boot information from external module js file.

var GAMEAPP = {};

GAMEAPP.Boot = function ()
{
    this.face = null;
};

GAMEAPP.Boot.prototype.constructor = GAMEAPP.Boot;

GAMEAPP.Boot.prototype = {

    preload: function ()
    {
        this.load.image('languageSplash', 'assets/images/languageScene.png');
    },

    create: function ()
    {
        this.face = this.add.image(0, 0, 'languageSplash');
    }

};

var config = {
    type: Phaser.CANVAS,
    parent: 'phaser-example',
    width: 800,
    height: 500
};

var game = new Phaser.Game(config);

game.scene.add('Boot', GAMEAPP.Boot);

game.scene.start('Boot');
      

See Examples here


Prelaod.js

Standard Method: new payload state for Phaser v3 game assets from external module js file.

//  Files specified in the State config files payload
//  will be loaded in *before* the State is started,
//  meaning they're available before even the State.preload function (if set) is called

//  This is perfect for loading in small JSON config files for example,
//  or a tiny amount of preloader assets that the preloader itself needs to use.

var stateConfig = {
    preload: preload,
    create: create,
    files: [
        { type: 'image', key: 'sonic', url: 'assets/sprites/sample.png' }
    ]
};

var gameConfig = {
    type: Phaser.CANVAS,
    parent: 'phaser-example',
    width: 800,
    height: 500,
    scene: stateConfig
};

var game = new Phaser.Game(gameConfig);

function preload() {

    //  You can still preload other assets too
    this.load.image('face', 'assets/pics/sample.png');

}

function create() {

    this.add.image(0, 0, 'face');
    this.add.image(0, 0, 'sonic');

}
      

See Examples here


Splash.js &/or Languages.js

Standard Method: to load splash scene or language scene from external module js file.

as Modal (new in Phaser 3):


      var mainStateConfig = {
    key: 'background',
    active: true,
    create: createBackground,
    files: [
        { type: 'image', key: 'face', url: 'assets/images/language.png' }
    ]
};

var modalStateConfig = {
    key: 'modal',
    create: createModal,
    files: [
        { type: 'image', key: 'logo', url: 'assets/images/languagesSelect.png' }
    ]
};

var gameConfig = {
    type: Phaser.CANVAS,
    parent: 'phaser-example',
    width: 800,
    height: 500,
    scene: [ mainStateConfig, modalStateConfig ]
};

var game = new Phaser.Game(gameConfig);
      

See Examples here


Game Main Menu

Standard Method: load game main menu options from external module js file.

/**  
 * File Name: mainMenu.js  
 * File URL: http://www.adventurers-of-renown.com/GAMEAPP/index.html  
 * Description: File for controlling initial entry into game shell  
 * and scenes; managing global variables throughout game state.  
 * Author: Stephen Gose  
 * Version: 0.0.0.15  
 * Author URL: http://www.stephen-gose.com/  
 * Support: support@pbmcube.com  
 *  
 * Copyright © \u00A9 1974-2017 Stephen Gose LLC. All rights reserved.  
 *   
 * Do not sell! Do not distribute!  
 * This is a licensed permission file. Please refer to Terms of Use  
 *   and End Users License Agreement (EULA).  
 * Search for [ //**TODO** ] to tailor this file for your own use  
 * and will void any support agreement.  
 *  
 * Redistribution of part or whole of this file and  
 * the accompanying files is strictly prohibited.  
 *  
 * This file is automatically loaded from state/load.js  
 * to change default state - change state/load.js at line: 34  
 */  
"use strict";  
window.GAMEAPP.state.story = {  
	preload: function(){  
		console.log(" %c ARRA rv_15 Story & Main Menu Game Prototype", "color:white; background:red");  
		GAMEAPP.InfoText = "Main Menu Selections";  
		//ARRA mainMenu & Story collapse into one scene  
		this.game.load.image('story', 'assets/images/staticRooms/story.jpg');  
		this.load.spritesheet('button',  
			'assets/spriteSheets/mmog-sprites-silver.png', 129, 30);  
		GAMEAPP._assignLanguage(GAMEAPP.gameLanguage);  
		//using altas for graphics; loading graphics for the  
		//	main menu state now;  
		//	they should be in the cache when needed.  
		//	game theme music file should be deferred to splash/language phase.  
		//navigation and menu buttons;  
		//two methods to load spriteSheets: 1) classic or 2) texture atlas  
		//load navigation buttons using classic method  
		//using programmatic method  
		this._preloadResources();  
	},  
	  
	create: function(){  
		console.log("starting story line & Main Menu state");  
		this.game.add.image(0, 0, 'story');  
		  
		//Static english language assignment here; use global variable to attach selected language  
		var playtxt = this.add.text(0, 0, "Play" , GAMEAPP.styleBTN);  
		var opttxt = this.add.text(0, 0, "Options", GAMEAPP.styleBTN);  
		var sharetxt =  this.add.text(0, 0, "Share", GAMEAPP.styleBTN);  
		  
		var moretxt = this.add.text(0, 0, "More", GAMEAPP.styleBTN); 	
		var credittxt = this.add.text(0, 0, "Credits", GAMEAPP.styleBTN);	
		var webtxt = this.add.text(0, 0, "License", GAMEAPP.styleBTN);	
		var donationtxt = this.add.text(0, 0, "Donations", GAMEAPP.styleBTN);  
		  
		// the alignment of the text is independent of the bounds,  
		//  try changing to 'center' or 'right'  
		var style = { font: "14px Arial", fill: "#FFF",  
			align: "center", boundsAlignH: "left", boundsAlignV:  
			"top", wordWrap: true, wordWrapWidth: 230 };  
		  
		this.introParatxt = this.add.text(0,0, GAMEAPP.introPara, style);  
		this.introParatxt.setShadow(3, 3, 'rgba(0,0,0,0.5)', 5);  
		this.introParatxt.setTextBounds(530, 138, 780, 400);  
		this.introParatxt.fontWeight = 'bold';  
		  
		this._toolTip = this.game.add.text(670, this.world.centerY-10, GAMEAPP.InfoText, style);  
		this._toolTip.anchor.set(0.5,0.5);  
		this._toolTip.setShadow(3, 3, 'rgba(0,0,0,0.5)', 5);  
		this._toolTip.fontWeight = 'bold';  
		
		//Main Menu creation  
		//this.soundButton = this.add.button(10, 10, 'soundButton', this.toggleThemeMusic, this);  
		  
		// Play   
		this.playButton = this.add.button(670, 280, 'button',  
			this.startGame, this, 2, 1, 0);  
		this.playButton.anchor.set(0.5,0);  
		this.playButton.scale.setTo(0.7,0.7);  
		this.playButton.name = "play";  
		this.playButton.onInputOver.add(this.btnOver, this);  
		this.playButton.addChild(playtxt).anchor.set(0.5,0);  
		  
		// Credit   
		this.creditButton = this.add.button(615, 320, 'button',  
			this.GameCredits, this, 2, 1, 0);  
		this.creditButton.anchor.set(0.5,0);
		this.creditButton.scale.setTo(0.7,0.7);
		this.creditButton.name = "credit";
		this.creditButton.onInputOver.add(this.btnOver, this);
		this.creditButton.addChild(credittxt).anchor.set(0.5,0);
		
		// Share - external
		this.shareButton = this.add.button(615, 360, 'button',  
			this.GameShare, this, 2, 1, 0);  
		this.shareButton.anchor.set(0.5,0);
		this.shareButton.scale.setTo(0.7,0.7);
		this.shareButton.name = "share";
		this.shareButton.onInputOver.add(this.btnOver, this);
		this.shareButton.addChild(sharetxt).anchor.set(0.5,0);
		
		// Game Options : Language Selection
		this.optButton = this.add.button(615, 400, 'button',  
			this.GameOptions, this, 2, 1, 0);  
		this.optButton.anchor.set(0.5,0);
		this.optButton.scale.setTo(0.7,0.7);
		this.optButton.name = "options";
		this.optButton.onInputOver.add(this.btnOver, this);
		this.optButton.addChild(opttxt).anchor.set(0.5,0);
		
		// More Games - external 
		this.moreButton = this.add.button(735, 320, 'button',  
			this.MoreGame, this, 2, 1, 0);  
		this.moreButton.anchor.set(0.5,0);
		this.moreButton.scale.setTo(0.7,0.7);
		this.moreButton.name = "more";
		this.moreButton.onInputOver.add(this.btnOver, this);
		this.moreButton.addChild(moretxt).anchor.set(0.5,0);
		
		// Web Masters & customer License - external 
		this.webButton = this.add.button(735, 360, 'button',  
			this.WebMaster, this, 2, 1, 0);  
		this.webButton.anchor.set(0.5,0);
		this.webButton.scale.setTo(0.7,0.7);
		this.webButton.name = "web";
		this.webButton.onInputOver.add(this.btnOver, this);
		this.webButton.addChild(webtxt).anchor.set(0.5,0);

		// Donation Link - external
		this.donaButton = this.add.button(735, 400, 'button',  
			this.GameDonations, this, 2, 1, 0);  
		this.donaButton.anchor.set(0.5,0);
		this.donaButton.scale.setTo(0.7,0.7);
		this.donaButton.name = "dona";
		this.donaButton.onInputOver.add(this.btnOver, this);
		this.donaButton.addChild(donationtxt).anchor.set(0.5,0);


		this.camera.flash(0x000000, 500, false);
	},
	
	update: function(){
		
	},
	
	clickContinue: function() {
		GAMEAPP._playAudio('click');
		this.camera.fade(0x000000, 200, false);
		this.time.events.add(200, function() {
			//this.game.scene.start('Main');	
			//BBS & Flash website: TIGStart method
			this.game.scene.start('R6');		
			//ARRA Main Entrance rv_3 through rv_8
		}, this);
		
	},
	
	btnOver: function(butn){
		switch(butn.name){
			case "play":
				console.log("Play selected");
				this._toolTip.setText(GAMEAPP.playtxt); 
			break;
			case "credit":
				console.log("Credit selected");
				this._toolTip.setText(GAMEAPP.credittxt);
			break;
			case "share":
				console.log("Share selected");
				this._toolTip.setText(GAMEAPP.sharetxt);
			break;
			case "options":
				console.log("Options selected");
				this._toolTip.setText(GAMEAPP.opttxt);
			break;
			case "more":
				console.log("More selected");
				this._toolTip.setText(GAMEAPP.moretxt);
			break;
			case "web":
				console.log("Web selected");
				this._toolTip.setText("Webmasters");
			break;
			case "dona":
				console.log("Donations selected");
				this._toolTip.setText("Support us");
			break;
		}
	},
	
	startGame: function (pointer) {
		//	Ok, the Play Button has been clicked or touched,  
		//	so let's stop the music (otherwise it'll carry on playing)  
		//this.music.stop();  
		//	And start the actual game  
		this.scene.start('Game');

	},
	GameCredits: function (pointer) {

		//	And start the actual game
		this.scene.start('credits');

	},
	GameOptions: function (pointer) {

		//	Ok, the Play Button has been clicked or touched,  
		//so let's stop the music (otherwise it'll carry on playing)  
		//this.music.stop();  
		//	And start the actual game  
		this.scene.start('language');  

	},
	
	//uses right-side plugin
	GameShare: function (pointer) {
		//	Ok, the Play Button has been clicked or touched,  
		//so let's stop the music (otherwise it'll carry on playing)  
		//this.music.stop();  
		//originally moved to separate internal scene; now off-site
		window.open("http://www.pbmcube.net/", "_blank");

	},
	
	MoreGame: function (pointer) {

		//	Ok, the Play Button has been clicked or touched,  
		//so let's stop the music (otherwise it'll carry on playing)  
		//this.music.stop();  
		//	And start the actual game  
		//originally moved to separate internal scene; now off-site
		window.open("http://www.renown-games.com./index.html", "_blank");

	},
	WebMaster: function (pointer) {

		//	Ok, the Play Button has been clicked or touched,  
		//so let's stop the music (otherwise it'll carry on playing)  
		//this.music.stop();  
		//	And start the actual game  
		//originally moved to separate internal scene; now off-site
		window.open("http://shop.pbmcube.net/downloads/category/software-source-code/ssc5/", "_blank");

	},
	
	GameDonations: function (pointer) {

		//	Ok, the Play Button has been clicked or touched,  
		//so let's stop the music (otherwise it'll carry on playing)  
		//this.music.stop();  
		//	And start the actual game  
		//originally moved to separate internal scene; now off-site
		window.open("https://www.paypal.me/pbmcube", "_blank");

	},

	_preloadResources() {
	var pack = this.resources;
		for(var method in pack) {
			pack[method].forEach(function(args) {  
				var loader = this.load[method];  
				loader && loader.apply(this.load, args);  
			}, this);
		}
	}
};

};   

See Examples here

Copyright © 2017, Stephen Gose LLC.
All rights reserved.