Chapter #9 Phaser v2
Game Prototype Library


Integrated Index.html and Game.js

Unorthodox Method: combining index.html with game initialization logic

<!doctype html>  
<html>  
<head>  
	<meta charset="utf-8">  
	<title>Phaser Game Prototyping - unorthodox</title>  
	<meta name="description" content="Phaser Game Prototyping Template" />  
	<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />  
	<style>  
		body{margin:0;padding:0}  
		canvas {margin: 0 auto;}  
	</style>  
	<!--  
		NOTE: Phaser library must be loaded prior to any game logic.  
		We load script files here to avoid windows.onload call.  
		Window.onload is rarely used for many reasons, and because  
		phaser doesn't wait until all resources are loaded.  
		The DOMContentLoaded event triggers when the page is ready.  
		Phaser waits for the full HTML and scripts, and then starts.  
		This is explained in greater detail in ["Phaser.JS Design Guide workbook".](https://leanpub.com/phaserjsgamedesignworkbook)
	-->  
	<script src="https://cdn.jsdelivr.net/phaser/2.6.2/phaser.min.js"></script>  
	<script src="js/states/Boot.js"></script>  
	<script src="js/states/Preloader.js"></script>  
	<script src="js/states/Languages.js"></script>  
	<script src="js/states/MainMenu.js"></script>  
</head>  
<body>
<h1>Unorthodox Method: combining index.html with game initialization logic </h1>
  <div id="orientation"></div>
  <div id="gContent"></div>
<!-- 
NOTE: Phaser library must be loaded prior to any game logic. 
We load script files here to avoid windows.onload call. 
Window.onload is rarely used for many reasons, and because 
	phaser doesn't wait until all resources are loaded.
The DOMContentLoaded event triggers when the page is ready. 
Phaser waits for the full HTML and scripts, and then starts.
This is explained in greater detail in 
	["Phaser.JS Design Guide workbook".](https://leanpub.com/phaserjsgamedesignworkbook)
-->
<script src="https://cdn.jsdelivr.net/phaser/2.6.2/phaser.min.js"></script>
<script src="js/states/Boot.js"></script>
<script src="js/states/Preloader.js"></script>
<script src="js/states/MainMenu.js"></script>
<script src="js/states/Game.js"></script>
<!-- 
NOTE: per the Phaser.JS Design Guide workbook, you may place the following
script externally or as the last head script using defer. 
-->


<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 gWidth = 880;	//Using Golden Ration is important.  
	var gHeight = 550;	//Using Golden Ration is important.  
	//Lessons learned from colleagues  
	//initial size determined   
	isMobile=navigator.userAgent.indexOf("Mobile");  
	if (isMobile != -1) {  
		//-1 is desktop/anything other than mobile device  
		console.log("isMobile="+isMobile);  
		gWidth = window.innerWidth * window.devicePixelRatio;  
		gHeight = window.innerHeight * window.devicePixelRatio;  
	}  
  
	//Separate namespace used  
	//Equal to Phaser v3 'States from Functions'; See Source Appendix  
 	var game = new Phaser.Game(gWidth, gHeight, Phaser.AUTO, "gContent",null,true);  
	//load any major scene change initially; defer everything else  
	var states = {  
		//'AboutUs':	GAMEAPP.AboutUs, 	//Deferred to MainMenu  
		'Boot':   		GAMEAPP.Boot,  
		//'Credits':	GAMEAPP.Credits, 	//Deferred to MainMenu  
		//'Donations':	GAMEAPP.Donations, 	//Deferred to MainMenu  
		//'GameOver':	GAMEAPP.GameOver, 	//Deferred to MainMenu  
		//'Help':     	GAMEAPP.Help, 		//Deferred to MainMenu  
		'Languages':	GAMEAPP.Languages,  
		'ManinMenu':	GAMEAPP.MainMenu,  
		//'Options':	GAMEAPP.Options, 	//Deferred to MainMenu  
		'Preloader':	GAMEAPP.Preloader,  
		//'Scores':   	GAMEAPP.Scores, 	//Deferred to MainMenu  
		//'Share':    	GAMEAPP.Share, 		//Deferred to MainMenu  
		//'WebMasters':	GAMEAPP.WebMasters 	//Deferred to MainMenu  
	};  
	  
	for(var state in states){  
		game.state.add(state, states[state]);  
	}
	console.table(states);  
	//daisy-chained; Equal to Phaser v3 'manual start'  
	game.state.start('Boot'); 
</script>

</body>
</html>

See Examples here


External Boot.js Module

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

/**
* File Name: boot.js
* Bonus File Content URL: https://leanpub.com/LoRD
* Description: File for controlling and displaying game scenes; 
*   managing global variables throughout game state.
* Author: Stephen Gose
* Version: 0.0.0.8
* 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.  
*  
*/  
"use strict";  
window.GAMEAPP.state.boot = {  
	preload: function(){  
		  
		//CORS: https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS  
		//https://enable-cors.org/  
		this.load.crossOrigin = 'anonymous';  
		  
		this.game.load.image('R6',  
			'assets/images/staticRooms/R6.jpg');  
		this.game.load.image('background',  
			'assets/images/staticRooms/intro.jpg');  
		this.game.load.image('story',  
			'assets/images/staticRooms/story.jpg');  
		this.game.load.atlas('button-continue',  
			'assets/spriteSheets/RightArrow-Phaser.png',  
			'assets/spriteSheets/arrowR-sprites.json');  
		// set world size  
		this.game.world.setBounds(0, 0, 800, 500);  
		  
		this.enableScaling();  
		  
		//init mt helper  
		mt.init(this.game);  
		  
		//set background color - true (set also to document.body)  
		mt.setBackgroundColor(true);  
		  
		// load assets for the Loading group ( if exists )  
		mt.loadGroup("Loading");  
	},  
	create: function(){  
		this.background = this.add.image(0, 0, 'background');  
		  
		// add all game states  
		for(var stateName in window.GAMEAPP.state){  
			this.game.state.add(stateName,  
				window.GAMEAPP.state[stateName]);  
		}  
		  
		// goto load state  
		this.game.state.start("load");  
	},  
	enableScaling: function(){  
		var game = this.game;  
		game.scale.parentIsWindow =  
			(game.canvas.parentNode == document.body);  
		game.scale.scaleMode =  
			Phaser.ScaleManager[mt.data.map.scaleMode];  
	}  
};  
      

See Examples here


Prelaod.js

Standard Method: to load game assets from external module js file.

/**
* File Name: Preloader.js  
* Bonus File Content URL: https://leanpub.com/LoRD  
* Description: 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.  
*  
*/  
"use strict";  
window.GAMEAPP.state.load = {  
	preload: function(){  
		// we have preloaded assets required for  
			Loading group objects  
		//	in the Boot state  
		var loadingGroup = mt.create("Loading");  
		
		// loading has been deleted?  
		// continue to load rest of the textures  
		if(!loadingGroup){  
			mt.preload();  
			return;  
		}
		
		// get preload sprite  
		var preload = loadingGroup.mt.children.preload;  
		
		// preload has been deleted?  
		// continue to load rest of the textures  
		if(!preload){  
			mt.preload();  
			return;  
		}
		
		// set it as preload sprite  
		// buid loading bar  
		this.load.setPreloadSprite(preload);  

		// update group transform - so we can get correct bounds  
		loadingGroup.updateTransform();  

		// get bounds  
		var bounds = loadingGroup.getBounds();  

		// move it to the center of the screen  
		loadingGroup.x = this.game.camera.width*0.5 -  
			(bounds.width) * 0.5  - bounds.x;  
		loadingGroup.y = this.game.camera.height*0.5 -  
			(bounds.height) - bounds.y;  
		// load all assets  
		mt.preload();  
	},  
	
	create: function(){  
		// loading has finished - proceed to demo state  
		this.game.add.image(0, 0, 'background');  
		//ARRA skips languages and main menu;  
		//	it goes directly to Story scene.  
		this.game.state.start("story");  
	}  
};  
      

See Examples here


Splash.js &/or Languages.js (10kB)

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

9.4.1 Scrum 2:

Initial Language JSON load - This file poplulates all the language buttons’ label and sets the dynamic file names. Once a gamer selects their native language by clicking on their national flag, a second JSON language lexicon is downloaded. This second JSON file then dynamically populates all text components with the gamer’s native language.

/**  
 * File Name: language.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.language = {  
	preload: function(){  
	
	//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 language selection state");
		this.game.add.image(0, 0, 'menus');
		
		//Language buttons - top row
		var china = this.game.add.button(this.world.centerX-110,  
			this.world.centerY-50, 'chinaBtn',  
			this.clickLangSelected, this, 1, 0, 2,0);  
		china.name = "china";  
		china.onInputOver.add(this.btnOver, this);  
		china.inputEnabled = true;  
		china.scale.setTo(0.9,0.9);  
		
		var dmark = this.game.add.button(this.world.centerX-60,  
			this.world.centerY-50, 'dmarkBtn',  
			this.clickLangSelected, this, 1, 0, 2,0);
		dmark.name = "denmark";
		dmark.onInputOver.add(this.btnOver, this);
		dmark.inputEnabled = true;
		dmark.scale.setTo(0.9,0.9);
		
		var english = this.game.add.button(this.world.centerX-10, 
			this.world.centerY-50, 'englishBtn',  
			this.clickLangSelected, this, 1, 0, 2,0);
		english.name = "english";
		english.onInputOver.add(this.btnOver, this);
		english.inputEnabled = true;
		english.scale.setTo(0.9,0.9);
		
		var french = this.game.add.button(this.world.centerX+40, 
			this.world.centerY-50, 'frenchBtn',  
			this.clickLangSelected, this, 1, 0, 2,0);  
		french.name = "french";  
		french.onInputOver.add(this.btnOver, this);  
		french.inputEnabled = true;  
		french.scale.setTo(0.9,0.9);  
		
		var german = this.game.add.button(this.world.centerX+90,  
			this.world.centerY-50, 'germanBtn',  
			this.clickLangSelected, this, 1, 0, 2,0);  
		german.name = "german";
		german.onInputOver.add(this.btnOver, this);
		german.inputEnabled = true;
		german.scale.setTo(0.9,0.9);
		
		var italy = this.game.add.button(this.world.centerX-160,  
			this.world.centerY-50, 'italyBtn',  
			this.clickLangSelected, this, 1, 0, 2,0);  
		italy.name = "italy";
		italy.onInputOver.add(this.btnOver, this);
		italy.inputEnabled = true;
		italy.scale.setTo(0.9,0.9);
		
		//Language buttons - bottom row
		var nland = this.game.add.button(this.world.centerX-135,  
			this.world.centerY+10, 'nlandBtn',  
			this.clickLangSelected, this, 1, 0, 2,0);  
		nland.name = "netherlands";
		nland.onInputOver.add(this.btnOver, this);
		nland.inputEnabled = true;
		nland.scale.setTo(0.9,0.9);
		
		var japan = this.game.add.button(this.world.centerX+65, 
			this.world.centerY+10, 'japanBtn',  
			this.clickLangSelected, this, 1, 0, 2,0);
		japan.name = "japan";
		japan.onInputOver.add(this.btnOver, this);
		japan.inputEnabled = true;
		japan.scale.setTo(0.9,0.9);
		
		var portugal = this.game.add.button(this.world.centerX+15, 
			this.world.centerY+10, 'portugalBtn',  
			this.clickLangSelected, this, 1, 0, 2,0);  
		portugal.name = "portugal";
		portugal.onInputOver.add(this.btnOver, this);
		portugal.inputEnabled = true;
		portugal.scale.setTo(0.9,0.9);
		
		var spain = this.game.add.button(this.world.centerX-35,  
			this.world.centerY+10, 'spainBtn',  
			this.clickLangSelected, this, 1, 0, 2,0);  
		spain.name = "spain";
		spain.onInputOver.add(this.btnOver, this);
		spain.inputEnabled = true;
		spain.scale.setTo(0.9,0.9);
		
		var sweden = this.game.add.button(this.world.centerX-85,  
			this.world.centerY+10, 'swedenBtn',  
			this.clickLangSelected, this, 1, 0, 2,0);  
		sweden.name = "sweden";
		sweden.onInputOver.add(this.btnOver, this);
		sweden.inputEnabled = true;
		sweden.scale.setTo(0.9,0.9);
		
		//Goto main menu
		var buttonContinue = this.game.add.button(this.world.width,  
			this.world.centerY+100, 'button-continue', this.clickContinue,  
			this, 1, 0, 2,0);  
		  
		buttonContinue.anchor.set(1,1);  
		buttonContinue.x = this.world.width+buttonContinue.width+20;  
		
		this.add.tween(buttonContinue).to({x: this.world.width-20},  
			500, Phaser.Easing.Exponential.Out, true);

		this._toolTip = this.game.add.text(this.world.centerX,  
			this.world.centerY-80, 
			GAMEAPP.InfoText, GAMEAPP.styleRA);  
		this._toolTip.anchor.set(0.5,0.5);  
		
		this.camera.flash(0x000000, 500, false);  
	},  
	
	update: function(){  
		
	},
	
	btnOver: function(butn){  
		switch(butn.name){  
			case "china":  
				console.log("Chinese selected");
				this._toolTip.setText("Chinese | 中文 ");  
				break;
			
			case "denmark":
				console.log("Danish selected");
				this._toolTip.setText("Danish | Dansk sprog ");  
				break;  
			
			case "english":  
				console.log("English selected");
				this._toolTip.setText("Default Language: English\n  
					Select language then click arrow to enter.");  
				break;  
			
			case "french":  
				console.log("French selected");  
				this._toolTip.setText("French | langue française ");  
				break;  

			case "german":  
				console.log("German selected");  
				this._toolTip.setText("German | deutsche Sprache ");  
				break;  
				
			case "italy":  
				console.log("Italian selected");  
				this._toolTip.setText("Italian | lingua italiana ");  
				break;  
			
			case "japan":  
				console.log("Japanese selected");  
				this._toolTip.setText("Japanese | 日本語 ");  
				break;  
			
			case "netherlands":  
				console.log("Dutch selected");  
				this._toolTip.setText("Dutch | Nederlandse taal ");  
				break;  
			
			case "portugal":  
				console.log("Portuguese selected");  
				this._toolTip.setText("Portuguese | idioma portugues ");  
				break;  
			
			case "spain":  
				console.log("Spanish selected");  
				this._toolTip.setText("Spanish | língua espanhola ");  
				break;  
			
			case "sweden":  
				console.log("Swedish selected");  
				this._toolTip.setText("Swedish | Svenska språket ");  
				break;  
			
			default:  
				console.log("English selected");  
				this._toolTip.setText("Default Language: English\n  
					Select language then click arrow to enter.");  
				break;  
		}
	},
	
	clickContinue: function() {
		GAMEAPP._playAudio('click');
		this.camera.fade(0x000000, 200, false);
		this.time.events.add(200, function() {
			//this.game.state.start('Main');  
			//BBS & Flash website: TIGStart method  
			this.game.state.start('story');		  
			//ARRA Main Entrance rv_3 through rv_8  
		}, this);
		
	},
	
	clickLangSelected: function() {
		GAMEAPP._playAudio('click');
		this.camera.fade(0x000000, 200, false);
		this.time.events.add(200, function() {
			//this.game.state.start('Main');	
			//BBS & Flash website: TIGStart method
			this.game.state.start('story');		
			//ARRA Main Entrance rv_3 through rv_8
		}, this);
		
	},
	
	_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);
		}
	}
};
};
//Sample JSON lexicon of 36 languages:  
{  "language"[  
	{btn: "us_btn", tooltip:"English / US", file:"en_US"},  
	{btn: "de_btn", tooltip:"German / Deutsch", file:"de"},  
	{btn: "swed_btn", tooltip"Swedish / svenska", file:"swed"},  
	{btn: "fr_btn", tooltip:"French / français", file:"fr"},  
	{btn: "fili_btn", tooltip:"Filipino / Filipino", file:"fili"},  
	{btn: "hun_btn", tooltip"Hungarian / magyar" file:"hun"},  
	{btn: "bulg_btn", tooltip:"Bulgarian / български", file:"bulg"},  
	{btn: "japan_btn", tooltip:"Japanese / 日本人", file:"japan"},  
	{btn: "china_btn", tooltip:"Chinese / 中國", file:"chin-simp"},  
	{btn: "hindi_btn", tooltip:"Hindi / हिन्दी", file:"hindi"},  
	{btn: "grk_btn", tooltip:"Greek / ελληνικά", file:"grk"},  
	{btn: "italy_btn", tooltip: "Italian / italiano", file:"italy"},  
	{btn: "israel_btn", tooltip:"Hebrew / עברית", file:"israel"},  
	{btn: "mala_btn", tooltip:"Malaysian / Malaysia", file:"mala"},  
	{btn: "mex_btn", tooltip:"Mexican / mexicano", file:"mex"},  
	{btn: "mont_btn", tooltip:"Montenegrin / црногорски", file:"mont"},  
	{btn: "serb_btn", tooltip:"Serbian / српски", file:"serb"},  
	{btn: "dutch_btn", tooltip:"Dutch / Nederlands", file:"dutch"},  
	{btn: "be_btn", tooltip:"Belgium / België", file:"be"},  
	{btn: "spain_btn", tooltip:"Spanish / español", file:"spain"},  
	{btn: "sa_btn", tooltip:"Saudi / سعودي", file:"sa"},  
	{btn: "rom_btn", tooltip:"Romanian  / român", file:"rom"},  
	{btn: "port_btn", tooltip:"Portuguese / português", file:"port"},  
	{btn: "ru_btn", tooltip:"Russian / русский", file:"ru"},  
	{btn: "sing_btn", tooltip:"Singapore / சிங்கப்பூர்", file:"sing"},  
	{btn: "hk_btn", tooltip:"HongKong / 香港", file:"hongK"},  
	{btn: "thai_btn", tooltip:"Thailand / ไทย", file:"thai_US"},  
	{btn: "tur_btn", tooltip:"Turkish / Türk", file:"turk"},  
	{btn: "viet_btn", tooltip:"Vietnamese / tiếng Việt", file:"viet"},  
	{btn: "kor_btn", tooltip:"Korean / 한국의", file:"kor"},  
	{btn: "braz_btn", tooltip:"Brazilian / brasileiro", file:"braz"},  
	{btn: "czech_btn", tooltip:"Czech / čeština", file:"czech"},  
	{btn: "pol_btn", tooltip:"Polish / polski", file:"pol"},  
	{btn: "finn_btn", tooltip:= "Finnish / suomalainen", file:"finn"},  
	{btn: "norw_btn", tooltip:"Norwegian / norsk", file:"norw"},  
	{btn: "denm_btn", tooltip:"Danish / dansk", file:"denm"}  
	]  
} 
//ARRA v15 as2 original; you will need to research your own content.

function assignLanguage(lang) {

	trace(“ switch - lang: “ + lang);

	switch (lang)

	{

		case 0 :
			//US English

			sales = “http://www.pbmcube.com/arra/index-enus.php”;

			wikiinfo = “”;

			pbm3info = “”;

			instruct = “”;

			playtxt = “Play”;

			playown = “”;

			playThis = “Play this month’s NEW RPG!”;

			playLast = “Play previous month’s Featured Game!”;

			playBonus = “NEW Featured Bonus Game!”;

			opttxt = “Game Options”;

			sharetxt = “Share with a Friend”;

			helptxt = “How to play”;

			moretxt = “More Adventures”;

			credittxt = “Credits”;

			introPara = “After a two-day journey, you arrive

				at the dreaded ruins of the Wyvern.

				Just ahead you can see the main gate.”;

			break;

		case 1 :

			//german = 1

			sales = “http://www.pbmcube.com/arra/index-ende.php”;

			wikiinfo = “”;

			pbm3info = “”;

			instruct = “Anleitung: \n Verwenden Sie Pfeiltasten zu bewegen.

			\n\n Überqueren Sie die Straße. \n Überqueren den Fluss.\n\n

			Geben Sie eine geheime Höhle für mehr Spaß.\n Achtung

			Gefahr!!”;

			playtxt = “Spiel”;

			playown = “”;

			playThis = “Spielen dieses Monats Neues Spiel!”;

			playLast = “Spielen Vormonat Spiel!”;

			playBonus = “NEU Bonusspiel!”;

			opttxt = “Spieloptionen”;

			sharetxt = “Aktien dieser”;

			helptxt = “Anweisungen”;

			moretxt = “mehr”;

			credittxt = “Abspann”;

			introPara = “Sie gelangen auf das gefürchtete Ruinen

				nach einer zweitägigen Reise. Sie sehen

				das Haupttor kurz vor.”;

			break;

		case 2 :

			//swedish = 2

			sales = “http://www.pbmcube.com/arra/index-ense.php”;

			wikiinfo = “”;

			pbm3info = “”;

			instruct = “”;

			playtxt = “Spela”;

			playown = “”;

			playThis = “Spela denna månads nya spel!”;

			playLast = “Spela föregående månads Dagens spel!”;

			playBonus = “NY Dagens bonusspelet!”;

			opttxt = “Spelalternativ”;

			sharetxt = “VARA DELAKTIG I”;

			helptxt = “instruktioner”;

			moretxt = “mer”;

			credittxt = “eftertexterna”;

			introPara = “Du kommer fram till den fruktade ruinerna

				efter två dagars resa. Du ser huvudingången

				precis framför oss.”;

			break;

		case 3 :

			//spanish = 3

			sales = “http://www.pbmcube.com/arra/index-enes.php”;

			wikiinfo = “”;

			pbm3info = “”;

			instruct = “”;

			playtxt = “Jugar a este juego”;

			playown = “”;

			playThis = “El juego NUEVO de este mes!”;

			playLast = “Escuchar mes anterior destacados del juego!”;

			playBonus = “NUEVA destacados juego de bonificación!”;

			opttxt = “Opciones de juego”;

			sharetxt = “Compartir esta”;

			helptxt = “Instrucciones”;

			moretxt = “Más”;

			credittxt = “Créditos”;

			introPara = “Usted llega a las ruinas temida después 
				de un viaje de dos días. Usted ve la puerta principal, 
				justo por delante.”;

			break;  




	case 5 :  
		//italian = 5  
		sales = "http://www.pbmcube.com/arra/index-enit.php";  
		wikiinfo = "";  
		pbm3info = "";  
		instruct = "";  
		playtxt = "Giocare questo gioco";  
		playown = "";  
		playThis = "Ascolta nuovo gioco di questo mese!";  
		playLast = "Gioco consigliati mesi Ascolta precedente!";  
		playBonus = "Nuovo gioco bonus!";  
		opttxt = "Opzioni del gioco";  
		sharetxt = "Condividere questo gioco";  
		helptxt = "Istruzioni di gioco";  
		moretxt = "Quantità";  
		credittxt = "Associare";  
		introPara = "Si raggiungono i ruderi temuta dopo un viaggio  
			di due giorni. Si vede il cancello principale  
			poco più avanti.";  
		break;  
  
	case 8 :  
		//japanese = 8  
		sales = "http://www.pbmcube.com/arra/index-enjp.php";  
		wikiinfo = "";  
		pbm3info = "";  
		instruct = "";  
		playtxt = "このゲームをプレイ";  
		playown = "";  
		playThis = "今月の新しいゲームをプレイ!";  
		playLast = "前月のゲームをプレイ!";  
		playBonus = "新しいボーナスゲーム!";  
		opttxt = "ゲームオプション";  
		sharetxt = "共有このゲーム";  
		helptxt = "ゲームの説明";  
		moretxt = "より多くのゲーム";  
		credittxt = "閉じるクレジット";  
		introPara = "この2日間の旅の後の恐ろしい遺跡に到着します。  
			あなただけの前の正門を参照してください。";  
		break;  
  
	case 10 :  
		//french = 10  
		sales = "http://www.pbmcube.com/arra/index-enfr.php";  
		wikiinfo = "";  
		pbm3info = "";  
		instruct = "";  
		playtxt = "Jouer à ce jeu";  
		playown = "";  
		playThis = "Jeu de nouvelles de ce mois!";  
		playLast = "Jeu du mois précédent!";  
		playBonus = "Nouveau Jeu à Bonus!";  
		opttxt = "options de jeu";  
		sharetxt = "partager ce jeu";  
		helptxt = "Instructions du jeu";  
		moretxt = "plus de jeux de";  
		credittxt = "générique de fin";  
		introPara = "Vous arrivez aux ruines redoutée après  
			un voyage de deux jours. Vous voyez la porte principale,  
			juste devant.";  
		break;  
  
	case 11 :  
		//Chinese simplified  
		sales = "http://www.pbmcube.com/arra/" + patchPanel;  
		wikiinfo = "";  
		pbm3info = "";  
		instruct = "";  
		playtxt = "玩这个游戏";  
		playown = "";  
		playThis = "玩这个月的新游戏!";  
		playLast = "播放前一个月的游戏!";  
		playBonus = "新精选奖赏游戏!";  
		opttxt = "游戏选项";  
		sharetxt = "分享此游戏";  
		helptxt = "游戏说明";  
		moretxt = "更多的游戏";  
		credittxt = "片尾";  
		introPara = "你到达后,为期两天的旅程可怕的废墟。你看大门就在前方。";    
		break;  
  
	case 14 :  
		//Portuguese | Brazil  
		sales = "http://www.pbmcube.com/arra/index-enprt.php";  
		wikiinfo = "";  
		pbm3info = "";  
		instruct = "";  
		playtxt = "Jogar este jogo";  
		playown = "";  
		playThis = "Jogo novo deste mês!";  
		playLast = "Jogo em destaque do mês anterior!";  
		playBonus = "Destaque Novo jogo de bónus!";  
		opttxt = "opções de jogo";  
		sharetxt = "Compartilhe este jogo";  
		helptxt = "Instruções de jogo";  
		moretxt = "mais jogos";  
		credittxt = "créditos finais";  
		introPara = "Você chega na temida ruínas após uma viagem  
			de dois dias. Você vê o portão principal para a frente.";  
		break;  
  
	case 18 :  
		//Dutch | Netherlands | Belgium  
		sales = "http://www.pbmcube.com/arra/index-ennl.php";  
		wikiinfo = "";  
		pbm3info = "";  
		instruct = "";  
		playtxt = "dit spel";  
		playown = "";  
		playThis = "Speel deze maand nieuwe spel!";  
		playLast = "Speel vorige maand Spel!";  
		playBonus = "Nieuwe Aanbevolen bonusspel!";  
		opttxt = "spelopties";  
		sharetxt = "aandeel dit spel";  
		helptxt = "Spelregels";  
		moretxt = "meer games";  
		credittxt = "Credits";  
		introPara = "U komt op de gevreesde ruines na een reis  
			van twee dagen. U ziet de hoofdingang net voor.";  
		break;  
  
		//===========================================  
	case 28 :  
		//danish  
		sales = "http://www.pbmcube.com/arra/index-endk.php";  
		wikiinfo = "";  
		pbm3info = "";  
		instruct = "";  
		playtxt = "spille dette spil";  
		playown = "";  
		playThis = "Spil denne måneds Nyt spil!";  
		playLast = "Afspil forrige måneds Udvalgte spil!";  
		playBonus = "NY Udvalgte bonusspil!";  
		opttxt = "spilindstillinger";  
		sharetxt = "deler dette spil";  
		helptxt = "spil instruktioner";  
		moretxt = "flere spil";  
		credittxt = "afsluttende credits";  
		introPara = "Du ankommer til den frygtede ruinerne efter  
			en to-dages tur. Du kan se de hovedporten lige forude.";  
		break;  
}  

}      

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.state.start('Main');	
			//BBS & Flash website: TIGStart method
			this.game.state.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.state.start('Game');

	},
	GameCredits: function (pointer) {

		//	And start the actual game
		this.state.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.state.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://www.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


CMS Main Menu

Standard Method: to load Game Main Menu from content management system.

See Examples here


Game Over

Standard Method: transition game to final administration from external module js file.

<?php
	
	/**
	 * File Name: HighScores.php (back-end server)  
	 * File URL: http://www.renown-games.com/MozartMusicMatch/
	 * Description: 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 © 2008-2016 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.  
	 *
	 */
	
	class HighScores
	{
		
	public function __construct() {
		$username = "<USER NAME HERE>";
		$password = "<PASSWORD HERE>";
		$db = "<DATABSASE NAME HERE>";
		mysql_connect("localhost",$username,$password);
		mysql_select_db($db);
	}
	
	
	public function saveScore($gameID, $score, $initials, $dateStamp, $hash)
	{
		$sql = "SELECT `secretkey` FROM `GameIDs` WHERE `id` = \"".$gameID."\"";
		$res = mysql_query($sql);
		if (mysql_numrows($res) == false) //GAME ID DOES NOT EXIST
		{
			return "ERROR - GAME ID DOES NOT EXIST";
		}
		//GAME ID EXISTS - VERIFY HASH
		$secretKey = mysql_fetch_object($res)->secretkey;
		$compareHash = $secretKey.$score.$initials.$dateStamp;
		$compareHash = md5(md5($compareHash));
		if ($compareHash != $hash)
		{
			return "ERROR - HASH DOES NOT MATCH";
		}
		//CHECK TO SEE IF IDENTICAL SCORE RECORD EXISTS
		$sql = "SELECT * FROM `Scores_".$gameID."` WHERE `score`=".$score." AND `datestamp`=".$dateStamp." AND `initials`=\"".\
$initials."\"";
		$res = mysql_query($sql);
		if (mysql_numrows($res) > 0) //RECORD ALREADY EXISTS
		{
			return "ERROR - SCORE ALREADY EXISTS";
		}
		//VALID REQUEST - SAVE SCORE TO SELECTED GAME TABLE
		$sql = "INSERT INTO `Scores_".$gameID."` (`score`,`initials`,`datestamp`) VALUES (".$score.", \"".$initials."\", \"".$\
dateStamp."\")";
		$res = mysql_query($sql);
		return $res;
	}
	
	public function getScores($gameID, $number)
	{
		$sql = "SELECT * FROM `GameIDs` WHERE `id` = \"".$gameID."\"";
		$res = mysql_query($sql);
		if (mysql_numrows($res) == false) //GAME ID DOES NOT EXIST
		{
			return false;
		}
		//RETRIEVE REQUESTED NUMBER OF SCORES, OR HOWEVER MANY ARE THERE
		$sql = "SELECT * FROM `Scores_".$gameID."` ORDER BY `score` DESC LIMIT ".$number;
		$res = mysql_query($sql);
		$scores = array();
		for ($i = 0; $i < mysql_num_rows($res); $i++)
		{
			array_push($scores, mysql_fetch_assoc($res));
		}
		return $scores;
	}
	
	}

	?>

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