Examples (audio, button,camera), and docs

Created some examples (audio, button,camera), and documented the source
code along the way

Author: Webeled

examples/assets/audio/SoundEffects/squit.mp3

@@ -0,0 +1,51 @@
+<?php
+	$title = "Using samples and looping";
+	require('../head.php');
+?>
+
+<script type="text/javascript">
+
+(function () {
+
+	var game = new Phaser.Game(800, 600, Phaser.AUTO, '', { preload: preload, create: create, update: update, render: render });
+
+	function preload() {
+
+		game.load.image('spyro', 'assets/pics/spyro.png');
+
+        //	Firefox doesn't support mp3 files, so use ogg
+        game.load.audio('squit', ['assets/audio/SoundEffects/squit.mp3', 'assets/audio/SoundEffects/squit.ogg']);
+
+	}
+
+	var s;
+	var music;
+
+	function create() {
+
+		game.stage.backgroundColor = '#255d3b';
+
+
+        music = game.add.audio('squit',1,true);
+        music.play();
+
+		s = game.add.sprite(game.world.centerX, game.world.centerY, 'spyro');
+		s.anchor.setTo(0.5, 0.5);
+
+	}
+
+	function update() {
+		//s.rotation += 0.01;
+	}
+
+	function render() {
+        game.debug.renderSoundInfo(music, 20, 32);
+	}
+
+})();
+
+</script>
+
+<?php
+	require('../foot.php');
+?>

examples/assets/audio/SoundEffects/squit.ogg

@@ -0,0 +1,48 @@
+<?php
+	$title = "Clicking on a button ";
+	require('../head.php');
+?>
+
+<script type="text/javascript">
+
+(function () {
+
+	var game = new Phaser.Game(800, 600, Phaser.AUTO, '', { preload: preload, create: create });
+
+	function preload() {
+
+		game.load.spritesheet('button', 'assets/buttons/button_sprite_sheet.png', 193, 71);
+		game.load.image('background','assets/misc/starfield.jpg');
+
+
+	}
+	var button,
+		background;
+
+
+	function create() {
+
+		game.stage.backgroundColor = '#182d3b';
+
+
+		background=game.add.tileSprite(0, 0, 800, 600, 'background');
+
+		button = game.add.button(game.world.centerX, 400, 'button', actionOnClick, this, 2, 1, 0);
+
+       
+
+	}
+
+	function actionOnClick () {
+
+		background.visible=!background.visible;
+
+	}
+
+})();
+
+</script>
+
+<?php
+	require('../foot.php');
+?>

examples/audio/loop.php

@@ -0,0 +1,55 @@
+<?php
+	$title = "Programmatically changing the frames";
+	require('../head.php');
+?>
+
+<script type="text/javascript">
+
+(function () {
+
+	var game = new Phaser.Game(800, 600, Phaser.AUTO, '', { preload: preload, create: create });
+
+	function preload() {
+
+		game.load.spritesheet('button', 'assets/buttons/number-buttons-90x90.png', 90,90);
+		game.load.image('background','assets/misc/starfield.jpg');
+
+
+	}
+	var button,
+		background;
+
+
+	function create() {
+
+
+		//setting the background colour
+		game.stage.backgroundColor = '#182d3b';
+
+		// the numbers given in parameters are the indexes of the frames, in this order : 
+		// over,out,down
+		button = game.add.button(game.world.centerX, game.world.centerY, 'button', actionOnClick, this, 1, 0, 2);
+
+		//setting the anchor to the center
+		button.anchor.setTo(0.5,0.5);
+
+       
+
+	}
+
+	function actionOnClick () {
+		
+		//manually changing the frames of the button, i.e, how it will look when you play with it
+		button.setFrames(4,3,5);
+		console.log('You clicked on the button');
+
+
+	}
+
+})();
+
+</script>
+
+<?php
+	require('../foot.php');
+?>

examples/buttons/action on click.php

@@ -0,0 +1,56 @@
+<?php
+	$title = "Rotating a button";
+	require('../head.php');
+?>
+
+<script type="text/javascript">
+
+(function () {
+
+	var game = new Phaser.Game(800, 600, Phaser.AUTO, '', { preload: preload, create: create,update : update });
+
+	function preload() {
+
+		game.load.spritesheet('button', 'assets/buttons/button_sprite_sheet.png', 193, 71);
+		game.load.image('background','assets/misc/starfield.jpg');
+
+
+	}
+	var button,
+		background;
+
+
+	function create() {
+
+		game.stage.backgroundColor = '#cccccc';
+
+		// the numbers given in parameters are the indexes of the frames, in this order : 
+		// over,out,down
+		button = game.add.button(game.world.centerX, game.world.centerY, 'button', actionOnClick, this, 1, 0, 2);
+
+		//set the anchor of the sprite in the center, otherwise it would rotate around the top-left corner
+		button.anchor.setTo(0.5,0.5);
+
+       
+
+	}
+
+	function actionOnClick () {
+		
+		alert("Though I'm turning around, you can still click on me");
+
+
+	}
+
+	function update () {
+		
+		button.angle+=1;
+	}
+
+})();
+
+</script>
+
+<?php
+	require('../foot.php');
+?>

examples/buttons/changing the frames.php

@@ -0,0 +1,76 @@
+ 
+ <?php
+	$title = "Following the player";
+	require('../head.php');
+?>
+
+<script type="text/javascript">
+
+(function () {
+
+	var game = new Phaser.Game(800, 600, Phaser.CANVAS, '', { preload: preload, create: create, update: update });
+
+    var baddie,
+        keys=Phaser.Keyboard;
+
+	function preload() {
+
+        game.load.image('background','assets/misc/starfield.jpg');
+        game.load.image('ufo','assets/sprites/ufo.png');
+        game.load.image('baddie','assets/sprites/space-baddie.png');
+
+
+	}
+
+    
+
+	function create() {
+
+		game.add.tileSprite(0, 0, 2000, 2000, 'background');
+
+        game.world.setSize(1400,1400);
+
+        for(var i=0,nb=10;i<nb;i++){
+
+            game.add.sprite(game.world.randomX,game.world.randomY,'ufo');
+        }
+
+        baddie=game.add.sprite(150,320,'baddie');
+
+        game.camera.follow(baddie);
+
+	}
+
+	function update() {
+
+		baddie.body.velocity.x=baddie.body.velocity.y=0;
+
+
+        if(game.input.keyboard.isDown(keys.LEFT) && !game.input.keyboard.isDown(keys.RIGHT)){
+            
+            baddie.body.velocity.x=-155;
+            
+        }
+        else if(game.input.keyboard.isDown(keys.RIGHT) && !game.input.keyboard.isDown(keys.LEFT)){
+            baddie.body.velocity.x=155;
+
+        }
+        else if(game.input.keyboard.isDown(keys.UP) && !game.input.keyboard.isDown(keys.DOWN)){
+            
+            baddie.angle=90;
+            baddie.body.velocity.y=-155;
+            
+        }
+        else if(game.input.keyboard.isDown(keys.DOWN) && !game.input.keyboard.isDown(keys.UP)){
+            baddie.angle=90;
+            baddie.body.velocity.y=155;
+        }
+	}
+
+})();
+
+</script>
+
+<?php
+	require('../foot.php');
+?>

examples/buttons/rotated buttons.php

@@ -0,0 +1,60 @@
+ 
+ <?php
+	$title = "Moving the game camera with the keyboard";
+	require('../head.php');
+?>
+
+<script type="text/javascript">
+
+(function () {
+
+	var game = new Phaser.Game(800, 600, Phaser.AUTO, '', { preload: preload, create: create, update: update });
+
+	function preload() {
+
+        game.load.tilemap('snes', 'assets/maps/smb_tiles.png', 'assets/maps/smb_level1.json', null, Phaser.Tilemap.JSON);
+	}
+
+	function create() {
+
+
+		//setting the size of the game world larger than the tilemap's size
+		game.world.setSize(2000,2000);
+
+        // game.camera.width=150;
+        // game.camera.height=150;
+
+		game.stage.backgroundColor = '#255d3b';
+
+		// adding the tilemap
+        game.add.tilemap(0, 168, 'snes');
+
+	}
+
+	function update() {
+		if (game.input.keyboard.isDown(Phaser.Keyboard.LEFT))
+        {
+            game.camera.x -= 8;
+        }
+        else if (game.input.keyboard.isDown(Phaser.Keyboard.RIGHT))
+        {
+            game.camera.x += 8;
+        }
+
+        if (game.input.keyboard.isDown(Phaser.Keyboard.UP))
+        {
+            game.camera.y -= 8;
+        }
+        else if (game.input.keyboard.isDown(Phaser.Keyboard.DOWN))
+        {
+            game.camera.y += 8;
+        }
+	}
+
+})();
+
+</script>
+
+<?php
+	require('../foot.php');
+?>

examples/camera/basic follow.php

@@ -17,8 +17,6 @@ function preload() {
 
 	function create() {
 
-		// game.world._stage.backgroundColorString = '#182d3b';
-
 		s = game.add.sprite(game.world.centerX, game.world.centerY, 'bot');
 		// s.anchor.setTo(0.5, 0.5);
 		s.scale.setTo(2, 2);