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.
The "boot.js" loads the "Artwork Theme" (AT) Component. It holds the "... all the artwork used by the Game Framework Component for the visual elements ... " of the game. We could replace (i.e., overwrite!) the current artwork theme but retain the same file names in the "boot.js" and have a "new game with different artwork theme" using the same Game Mechanics (GM) and Game Framework Mechanisms (GFM).
<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: https://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>
//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);
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
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
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
Standard Method: to load splash scene or language scene from external module js file.
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
Standard Method: load game main menu options from external module js file.
/**
* File Name: mainMenu.js
* File URL: https://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: https://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("https://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("https://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("https://renown-games.com/shop/index.php?id=prod-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.