Added phaser build and hellophaser sample
This commit is contained in:
50
resources/Project Templates/Basic/Boot.js
Normal file
50
resources/Project Templates/Basic/Boot.js
Normal file
@@ -0,0 +1,50 @@
|
||||
var BasicGame = {};
|
||||
|
||||
BasicGame.Boot = function (game) {
|
||||
|
||||
};
|
||||
|
||||
BasicGame.Boot.prototype = {
|
||||
|
||||
preload: function () {
|
||||
|
||||
// Here we load the assets required for our preloader (in this case a background and a loading bar)
|
||||
this.load.image('preloaderBackground', 'images/preloader_background.jpg');
|
||||
this.load.image('preloaderBar', 'images/preloadr_bar.png');
|
||||
|
||||
},
|
||||
|
||||
create: function () {
|
||||
|
||||
// Unless you specifically know your game needs to support multi-touch I would recommend setting this to 1
|
||||
this.input.maxPointers = 1;
|
||||
|
||||
// Phaser will automatically pause if the browser tab the game is in loses focus. You can disable that here:
|
||||
this.stage.disableVisibilityChange = true;
|
||||
|
||||
if (this.game.device.desktop)
|
||||
{
|
||||
// If you have any desktop specific settings, they can go in here
|
||||
this.scale.pageAlignHorizontally = true;
|
||||
}
|
||||
else
|
||||
{
|
||||
// Same goes for mobile settings.
|
||||
// In this case we're saying "scale the game, no lower than 480x260 and no higher than 1024x768"
|
||||
this.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL;
|
||||
this.scale.minWidth = 480;
|
||||
this.scale.minHeight = 260;
|
||||
this.scale.maxWidth = 1024;
|
||||
this.scale.maxHeight = 768;
|
||||
this.scale.forceLandscape = true;
|
||||
this.scale.pageAlignHorizontally = true;
|
||||
this.scale.setScreenSize(true);
|
||||
}
|
||||
|
||||
// By this point the preloader assets have loaded to the cache, we've set the game settings
|
||||
// So now let's start the real preloader going
|
||||
this.state.start('Preloader');
|
||||
|
||||
}
|
||||
|
||||
};
|
||||
52
resources/Project Templates/Basic/Game.js
Normal file
52
resources/Project Templates/Basic/Game.js
Normal file
@@ -0,0 +1,52 @@
|
||||
|
||||
BasicGame.Game = function (game) {
|
||||
|
||||
// When a State is added to Phaser it automatically has the following properties set on it, even if they already exist:
|
||||
|
||||
this.game; // a reference to the currently running game
|
||||
this.add; // used to add sprites, text, groups, etc
|
||||
this.camera; // a reference to the game camera
|
||||
this.cache; // the game cache
|
||||
this.input; // the global input manager (you can access this.input.keyboard, this.input.mouse, as well from it)
|
||||
this.load; // for preloading assets
|
||||
this.math; // lots of useful common math operations
|
||||
this.sound; // the sound manager - add a sound, play one, set-up markers, etc
|
||||
this.stage; // the game stage
|
||||
this.time; // the clock
|
||||
this.tweens; // the tween manager
|
||||
this.state; // the state manager
|
||||
this.world; // the game world
|
||||
this.particles; // the particle manager
|
||||
this.physics; // the physics manager
|
||||
this.rnd; // the repeatable random number generator
|
||||
|
||||
// You can use any of these from any function within this State.
|
||||
// But do consider them as being 'reserved words', i.e. don't create a property for your own game called "world" or you'll over-write the world reference.
|
||||
|
||||
};
|
||||
|
||||
BasicGame.Game.prototype = {
|
||||
|
||||
create: function () {
|
||||
|
||||
// Honestly, just about anything could go here. It's YOUR game after all. Eat your heart out!
|
||||
|
||||
},
|
||||
|
||||
update: function () {
|
||||
|
||||
// Honestly, just about anything could go here. It's YOUR game after all. Eat your heart out!
|
||||
|
||||
},
|
||||
|
||||
quitGame: function (pointer) {
|
||||
|
||||
// Here you should destroy anything you no longer need.
|
||||
// Stop music, delete sprites, purge caches, free resources, all that good stuff.
|
||||
|
||||
// Then let's go back to the main menu.
|
||||
this.state.start('MainMenu');
|
||||
|
||||
}
|
||||
|
||||
};
|
||||
42
resources/Project Templates/Basic/MainMenu.js
Normal file
42
resources/Project Templates/Basic/MainMenu.js
Normal file
@@ -0,0 +1,42 @@
|
||||
|
||||
BasicGame.MainMenu = function (game) {
|
||||
|
||||
this.music = null;
|
||||
this.playButton = null;
|
||||
|
||||
};
|
||||
|
||||
BasicGame.MainMenu.prototype = {
|
||||
|
||||
create: function () {
|
||||
|
||||
// We've already preloaded our assets, so let's kick right into the Main Menu itself.
|
||||
// Here all we're doing is playing some music and adding a picture and button
|
||||
// Naturally I expect you to do something significantly better :)
|
||||
|
||||
this.music = this.add.audio('titleMusic');
|
||||
this.music.play();
|
||||
|
||||
this.add.sprite(0, 0, 'titlepage');
|
||||
|
||||
this.playButton = this.add.button(400, 600, 'playButton', this.startGame, this, 'buttonOver', 'buttonOut', 'buttonOver');
|
||||
|
||||
},
|
||||
|
||||
update: function () {
|
||||
|
||||
// Do some nice funky main menu effect here
|
||||
|
||||
},
|
||||
|
||||
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');
|
||||
|
||||
}
|
||||
|
||||
};
|
||||
61
resources/Project Templates/Basic/Preloader.js
Normal file
61
resources/Project Templates/Basic/Preloader.js
Normal file
@@ -0,0 +1,61 @@
|
||||
|
||||
BasicGame.Preloader = function (game) {
|
||||
|
||||
this.background = null;
|
||||
this.preloadBar = null;
|
||||
|
||||
this.ready = false;
|
||||
|
||||
};
|
||||
|
||||
BasicGame.Preloader.prototype = {
|
||||
|
||||
preload: function () {
|
||||
|
||||
// These are the assets we loaded in Boot.js
|
||||
// A nice sparkly background and a loading progress bar
|
||||
this.background = this.add.sprite(0, 0, 'preloaderBackground');
|
||||
this.preloadBar = this.add.sprite(300, 400, 'preloaderBar');
|
||||
|
||||
// This sets the preloadBar sprite as a loader sprite.
|
||||
// What that does is automatically crop the sprite from 0 to full-width
|
||||
// as the files below are loaded in.
|
||||
this.load.setPreloadSprite(this.preloadBar);
|
||||
|
||||
// Here we load the rest of the assets our game needs.
|
||||
// As this is just a Project Template I've not provided these assets, swap them for your own.
|
||||
this.load.image('titlepage', 'images/title.jpg');
|
||||
this.load.atlas('playButton', 'images/play_button.png', 'images/play_button.json');
|
||||
this.load.audio('titleMusic', ['audio/main_menu.mp3']);
|
||||
this.load.bitmapFont('caslon', 'fonts/caslon.png', 'fonts/caslon.xml');
|
||||
// + lots of other required assets here
|
||||
|
||||
},
|
||||
|
||||
create: function () {
|
||||
|
||||
// Once the load has finished we disable the crop because we're going to sit in the update loop for a short while as the music decodes
|
||||
this.preloadBar.cropEnabled = false;
|
||||
|
||||
},
|
||||
|
||||
update: function () {
|
||||
|
||||
// You don't actually need to do this, but I find it gives a much smoother game experience.
|
||||
// Basically it will wait for our audio file to be decoded before proceeding to the MainMenu.
|
||||
// You can jump right into the menu if you want and still play the music, but you'll have a few
|
||||
// seconds of delay while the mp3 decodes - so if you need your music to be in-sync with your menu
|
||||
// it's best to wait for it to decode here first, then carry on.
|
||||
|
||||
// If you don't have any music in your game then put the game.state.start line into the create function and delete
|
||||
// the update function completely.
|
||||
|
||||
if (this.cache.isSoundDecoded('titleMusic') && this.ready == false)
|
||||
{
|
||||
this.ready = true;
|
||||
this.state.start('MainMenu');
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
};
|
||||
39
resources/Project Templates/Basic/index.html
Normal file
39
resources/Project Templates/Basic/index.html
Normal file
@@ -0,0 +1,39 @@
|
||||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<title>Phaser Basic Project Template</title>
|
||||
<script src="phaser.min.js"></script>
|
||||
<script src="Boot.js"></script>
|
||||
<script src="Preloader.js"></script>
|
||||
<script src="MainMenu.js"></script>
|
||||
<script src="Game.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="gameContainer"></div>
|
||||
|
||||
<script type="text/javascript">
|
||||
|
||||
window.onload = function() {
|
||||
|
||||
// Create your Phaser game and inject it into the gameContainer div.
|
||||
// We did it in a window.onload event, but you can do it anywhere (requireJS load, anonymous function, jQuery dom ready, - whatever floats your boat)
|
||||
var game = new Phaser.Game(1024, 768, Phaser.AUTO, 'gameContainer');
|
||||
|
||||
// Add the States your game has.
|
||||
// You don't have to do this in the html, it could be done in your Boot state too, but for simplicity I'll keep it here.
|
||||
game.state.add('Boot', BasicGame.Boot);
|
||||
game.state.add('Preloader', BasicGame.Preloader);
|
||||
game.state.add('MainMenu', BasicGame.MainMenu);
|
||||
game.state.add('Game', BasicGame.Game);
|
||||
|
||||
// Now start the Boot state.
|
||||
game.state.start('Boot');
|
||||
|
||||
};
|
||||
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user