Unorthodox Method: combining index.html with game initialization logic
Download from Phaser v3.24+ 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.
<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/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.