Added phaser build and hellophaser sample

This commit is contained in:
2014-06-09 21:32:48 -07:00
parent 49f23abbe8
commit 48b5c5714a
856 changed files with 954584 additions and 0 deletions

View 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');
}
};

View 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');
}
};

View 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');
}
};

View 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');
}
}
};

View 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>