Added a new Full Screen Mobile template example.

README.md

@@ -169,6 +169,12 @@ We also provide a Grunt script that will build Phaser from source along with all
 Run `grunt` in the phaser folder for a list of command-line options.
 
 
+Koding
+------
+
+You can [![clone the Phaser repo in Koding](http://learn.koding.com/btn/clone_d.png)][koding] and then start editing and previewing code right away using their web based VM development system.
+
+
 Bower
 -----
 
@@ -295,33 +301,37 @@ Although Phaser 1.0 is a brand new release it is born from years of experience b
 Road Map
 --------
 
-The 1.1 release was a massive under-taking, but we're really happy with how Phaser is progressing. It's becoming more solid and versatile with each iteration. Here is what's on our road map for future versions:
+The 1.1 release was a massive under-taking, but we're really happy with how Phaser is progressing. It's becoming more solid and versatile with each iteration. Here is what's on our road map:
 
 Version 1.2 ("Saldaea")
 
-* Update to Pixi 1.5 - currently still in dev branch only, but lots of nice internal changes and new features we want to take advantage of.
-* Start integration with the p2.js physics system.
+* Update to Pixi 1.4 - this newly released build has lots of internal changes and new features we want to take advantage of.
 
-Beyond version 1.2
+Version 1.3 ("Shienar")
 
 * Enhance the State Management, so you can perform non-destructive State swaps and persistence.
 * Dedicated CocoonJS packaging features (screencanvas, etc)
 * A more advanced Particle system, one that can render to a single canvas (rather than spawn hundreds of Sprites), more advanced effects, etc.
-* Massively enhance the audio side of Phaser. Although it does what it does well, it could do with taking more advantage of Web Audio - echo effects, positional sound, etc.
-* Comprehensive testing across Firefox OS devices, CocoonJS and Ejecta.
-* Integration with third party services like Google Play Game Services and Amazon JS SDK.
 * Ability to control DOM elements from the core game and layer them into the game.
 * Touch Gestures.
-* Virtual d-pad support and also support for the Joypad API.
-* Test out packaging with Node-webkit.
-* Flash CC HTML5 export integration.
-* Game parameters stored in Google Docs.
-* Add a d-pad example (http://www.html5gamedevs.com/topic/1574-gameinputondown-question/)
-* Create more touch input examples (http://www.html5gamedevs.com/topic/1556-mobile-touch-event/)
-* Look at HiDPI Canvas settings.
 * Support for parallel asset loading.
 * Fixed width bitmap font support, plus enhanced Bitmap font rendering.
 
+Version 2.0 ("Aes Sedai")
+
+* Integrate p2.js physics system completely.
+* Comprehensive testing across Firefox OS devices, CocoonJS and Ejecta.
+* Integration with third party services like Google Play Game Services and Amazon JS SDK.
+* Flash CC HTML5 export integration.
+* Massively enhance the audio side of Phaser. Although it does what it does well, it could do with taking more advantage of Web Audio - echo effects, positional sound, etc.
+
+Beyond version 2.0
+
+* Test out packaging with Node-webkit.
+* Game parameters stored in Google Docs.
+* Look at HiDPI Canvas settings.
+* Multiple Camera support.
+
 
 Contributing
 ------------
@@ -354,5 +364,6 @@ Phaser is released under the [MIT License](http://opensource.org/licenses/MIT).
 
 [1]: https://github.com/photonstorm/phaser/issues
 [phaser]: https://github.com/photonstorm/phaser
+[koding]: https://koding.com/Teamwork?import=https://github.com/photonstorm/phaser/archive/master.zip&c=git1
 
 [![Analytics](https://ga-beacon.appspot.com/UA-44006568-2/phaser/index)](https://github.com/igrigorik/ga-beacon)

examples/wip/circlebox.js

@@ -0,0 +1,75 @@
+
+var game = new Phaser.Game(800, 600, Phaser.CANVAS, 'phaser-example', { preload: preload, create: create, update: update, render: render });
+
+function preload() {
+
+	game.load.image('wizball', 'assets/sprites/wizball.png');
+	game.load.image('platform', 'assets/sprites/interference_tunnel.png');
+
+}
+
+var ball;
+var circle;
+var platform;
+
+function create() {
+
+	//	Our ball sprite
+	ball = game.add.sprite(420, 100, 'wizball');
+	ball.anchor.setTo(0.5, 0.5);
+
+	ball.body.customSeparateX = true;
+	ball.body.customSeparateY = true;
+
+	ball.body.velocity.y = 150;
+	ball.body.bounce.y = 0.9;
+
+	//	Our collision circle
+	circle = new Phaser.Circle(200, 100, 188);
+
+	//	Our platform
+	platform = game.add.sprite(200, 450, 'platform');
+	platform.body.immovable = true;
+
+}
+
+function update() {
+
+	// ball.x = game.input.x;
+	// ball.y = game.input.y;
+
+	circle.x = ball.x;
+	circle.y = ball.y;
+
+	//	This is a rect vs. rect collision. The callback will check the circle.
+	game.physics.overlap(ball, platform, null, processCallback, this);
+
+}
+
+function processCallback(a, b) {
+
+	// console.log('p', a.y, b.y);
+
+	if (Phaser.Circle.intersectsRectangle(circle, platform.body))
+	{
+		console.log('boom', ball.body.overlapX, ball.body.overlapY);
+        // ball.body.x = ball.body.x - ball.body.overlapX;
+        // ball.body.velocity.x = platform.body.velocity.x - ball.body.velocity.x * ball.body.bounce.x;
+
+        ball.body.y -= 10;
+        ball.body.velocity.y *= -1 * ball.body.bounce.y;
+	}
+
+	return true;
+
+}
+
+function render() {
+
+	game.debug.renderText(Phaser.Circle.intersectsRectangle(circle, platform.body), 32, 32);
+	game.debug.renderText(ball.body.velocity.y, 32, 64);
+	// game.debug.renderText(ball.body.overlapY, 64, 64);
+	game.debug.renderCircle(circle);
+	game.debug.renderRectangle(platform.body);
+
+}

resources/Project Templates/Full Screen Mobile/css/stylesheet.css

@@ -0,0 +1,19 @@
+body {
+    margin: 0px 0px 1px 0px; /* the extra 1px allows the iOS inner/outer check to work */
+    background: #000;
+}
+
+#orientation {
+    margin: 0 auto;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-image: url(../images/orientation.jpg); 
+    background-repeat: no-repeat;
+    background-position: center;
+    background-color: rgb(0, 0, 0);
+    z-index: 999;
+    display: none;
+}

resources/Project Templates/Full Screen Mobile/index.html

@@ -0,0 +1,65 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+	<title>Phaser Full Screen Mobile Example</title>
+	<meta charset="utf-8">
+	<meta http-equiv="X-UA-Compatible" content="chrome=1, IE=9">
+	<meta name="format-detection" content="telephone=no">
+	<meta name="HandheldFriendly" content="true" />
+	<meta name="apple-mobile-web-app-capable" content="yes">
+	<meta name="apple-mobile-web-app-status-bar-style" content="black">
+	<meta name="format-detection" content="telephone=no">
+	<meta name="HandheldFriendly" content="true" />
+	<meta name="robots" content="noindex,nofollow" />
+	<meta name="apple-mobile-web-app-capable" content="yes" />
+	<meta name="apple-mobile-web-app-status-bar-style" content="black" />
+	<meta name="apple-mobile-web-app-title" content="Phaser App">
+	<meta name="viewport" content="initial-scale=1 maximum-scale=1 user-scalable=0 minimal-ui" />
+	<link rel="apple-touch-icon" href="/apple-touch-icon.png">
+	<link rel="apple-touch-icon" sizes="57x57" href="icons/app_icon_57x57.png">
+	<link rel="apple-touch-icon" sizes="60x60" href="icons/app_icon_60x60.png">
+	<link rel="apple-touch-icon" sizes="72x72" href="icons/app_icon_72x72.png">
+	<link rel="apple-touch-icon" sizes="76x76" href="icons/app_icon_76x76.png">
+	<link rel="apple-touch-icon" sizes="114x114" href="icons/app_icon_114x114.png">
+	<link rel="apple-touch-icon" sizes="120x120" href="icons/app_icon_120x120.png">
+	<link rel="apple-touch-icon" sizes="144x144" href="icons/app_icon_144x144.png">
+	<link rel="apple-touch-icon" sizes="152x152" href="icons/app_icon_152x152.png">
+	<link rel="apple-touch-icon" sizes="256x256" href="icons/app_icon_256x256.png">
+	<link rel="apple-touch-icon" sizes="512x512" href="icons/app_icon_512x512.png">
+	<link rel="apple-touch-icon" sizes="1024x1024" href="icons/app_icon_1024x1024.png">
+	<link rel="stylesheet" href="css/stylesheet.css" type="text/css" charset="utf-8" />
+	<script src="js/phaser.min.js"></script>
+	<script src="src/Boot.js"></script>
+	<script src="src/Preloader.js"></script>
+	<script src="src/MainMenu.js"></script>
+	<script src="src/Game.js"></script>
+</head>
+<body>
+
+	<div id="game"></div>
+	<div id="orientation"></div>
+
+<script type="text/javascript">
+
+(function () {
+
+	//	Create your Phaser game and inject it into the game 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)
+	//	We're using a game size of 1024 x 768 here, but you can use whatever you feel makes sense for your game of course.
+	var game = new Phaser.Game(1024, 768, Phaser.AUTO, 'game');
+
+	//	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>

resources/Project Templates/Full Screen Mobile/src/Boot.js

@@ -0,0 +1,86 @@
+BasicGame = {
+
+    /* Here we've just got some global level vars that persist regardless of State swaps */
+    score: 0,
+
+    /* If the music in your game needs to play through-out a few State swaps, then you could reference it here */
+    music: null,
+
+    /* Your game can check BasicGame.orientated in internal loops to know if it should pause or not */
+    orientated: false
+
+};
+
+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 () {
+
+        this.game.input.maxPointers = 1;
+        this.game.stage.disableVisibilityChange = true;
+
+        if (this.game.device.desktop)
+        {
+            this.game.stage.scaleMode = Phaser.StageScaleMode.SHOW_ALL;
+            this.game.stage.scale.minWidth = 480;
+            this.game.stage.scale.minHeight = 260;
+            this.game.stage.scale.maxWidth = 1024;
+            this.game.stage.scale.maxHeight = 768;
+            this.game.stage.scale.pageAlignHorizontally = true;
+            this.game.stage.scale.pageAlignVertically = true;
+            this.game.stage.scale.setScreenSize(true);
+        }
+        else
+        {
+            this.game.stage.scaleMode = Phaser.StageScaleMode.SHOW_ALL;
+            this.game.stage.scale.minWidth = 480;
+            this.game.stage.scale.minHeight = 260;
+            this.game.stage.scale.maxWidth = 1024;
+            this.game.stage.scale.maxHeight = 768;
+            this.game.stage.scale.pageAlignHorizontally = true;
+            this.game.stage.scale.pageAlignVertically = true;
+            this.game.stage.scale.forceOrientation(true, false);
+            this.game.stage.scale.hasResized.add(this.gameResized, this);
+            this.game.stage.scale.enterIncorrectOrientation.add(this.enterIncorrectOrientation, this);
+            this.game.stage.scale.leaveIncorrectOrientation.add(this.leaveIncorrectOrientation, this);
+            this.game.stage.scale.setScreenSize(true);
+        }
+
+        this.game.state.start('Preloader');
+
+    },
+
+    gameResized: function (width, height) {
+
+        //  This could be handy if you need to do any extra processing if the game resizes.
+        //  A resize could happen if for example swapping orientation on a device.
+
+    },
+
+    enterIncorrectOrientation: function () {
+
+        BasicGame.orientated = false;
+
+        document.getElementById('orientation').style.display = 'block';
+
+    },
+
+    leaveIncorrectOrientation: function () {
+
+        BasicGame.orientated = true;
+
+        document.getElementById('orientation').style.display = 'none';
+
+    }
+
+};

resources/Project Templates/Full Screen Mobile/src/Game.js

@@ -0,0 +1,51 @@
+
+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.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.game.state.start('MainMenu');
+
+	}
+
+};

resources/Project Templates/Full Screen Mobile/src/MainMenu.js

@@ -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.game.state.start('Game');
+
+	}
+
+};

resources/Project Templates/Full Screen Mobile/src/Preloader.js

@@ -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, the lines below won't work as the files themselves will 404, they are just an example of use.
+		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.game.state.start('MainMenu');
+		}
+
+	}
+
+};