New mini responsive template.

Author: photonstorm

resources/Project Templates/Responsive/Boot.js

@@ -0,0 +1,38 @@
+var BasicGame = {};
+
+BasicGame.Boot = function (game) {
+
+};
+
+BasicGame.Boot.prototype = {
+
+    init: 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;
+
+        //  This tells the game to resize the renderer to match the game dimensions (i.e. 100% browser width / height)
+        this.scale.scaleMode = Phaser.ScaleManager.RESIZE;
+
+    },
+
+    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 () {
+
+        //  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');
+
+    }
+
+};

resources/Project Templates/Responsive/Game.js

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

resources/Project Templates/Responsive/MainMenu.js

@@ -0,0 +1,56 @@
+
+BasicGame.MainMenu = function (game) {
+
+	this.bg;
+	this.spriteTopLeft;
+	this.spriteTopRight;
+	this.spriteBottomLeft;
+	this.spriteBottomRight;
+
+};
+
+BasicGame.MainMenu.prototype = {
+
+	create: function () {
+
+	    this.bg = this.add.tileSprite(0, 0, this.game.width, this.game.height, 'starfield');
+
+	    this.spriteTopLeft = this.add.sprite(0, 0, 'tetris3');
+
+	    this.spriteTopRight = this.add.sprite(game.width, 0, 'tetris1');
+	    this.spriteTopRight.anchor.set(1, 0);
+
+	    this.spriteBottomLeft = this.add.sprite(0, game.height, 'tetris2');
+	    this.spriteBottomLeft.anchor.set(0, 1);
+
+	    this.spriteBottomRight = this.add.sprite(game.width, game.height, 'tetris3');
+	    this.spriteBottomRight.anchor.set(1, 1);
+
+	},
+
+	update: function () {
+
+		//	Do some nice funky main menu effect here
+
+	},
+
+	resize: function (width, height) {
+
+		//	If the game container is resized this function will be called automatically.
+		//	You can use it to align sprites that should be fixed in place and other responsive display things.
+
+	    this.bg.width = width;
+	    this.bg.height = height;
+
+	    this.spriteMiddle.x = this.game.world.centerX;
+	    this.spriteMiddle.y = this.game.world.centerY;
+
+	    this.spriteTopRight.x = this.game.width;
+	    this.spriteBottomLeft.y = this.game.height;
+
+	    this.spriteBottomRight.x = this.game.width;
+	    this.spriteBottomRight.y = this.game.height;
+
+	}
+
+};

resources/Project Templates/Responsive/Preloader.js

@@ -0,0 +1,44 @@
+
+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.
+		//	You can find all of these assets in the Phaser Examples repository
+
+	    this.load.image('tetris1', 'assets/sprites/tetrisblock1.png');
+	    this.load.image('tetris2', 'assets/sprites/tetrisblock2.png');
+	    this.load.image('tetris3', 'assets/sprites/tetrisblock3.png');
+	    this.load.image('hotdog', 'assets/sprites/hotdog.png');
+	    this.load.image('starfield', 'assets/skies/deep-space.jpg');
+
+	},
+
+	create: function () {
+
+		this.state.start('MainMenu');
+
+	}
+
+};

resources/Project Templates/Responsive/index.html

@@ -0,0 +1,42 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+	<meta charset="UTF-8" />
+	<title>Phaser Responsive 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>
+    <style>
+        body {
+            margin: 0;
+            padding: 0;
+        }
+    </style>
+</head>
+<body>
+
+<script type="text/javascript">
+
+window.onload = function() {
+
+	//	100% of the browser window - see Boot.js for additional configuration
+	var game = new Phaser.Game("100%", "100%", Phaser.AUTO, '');
+
+	//	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>