Examples (audio, button,camera), and docs

Created some examples (audio, button,camera), and documented the source
code along the way
This commit is contained in:
Webeled 2013-09-16 16:37:30 +02:00
parent 17e208a95e
commit fc584cf6bc
15 changed files with 393 additions and 8 deletions

Binary file not shown.

Binary file not shown.

51
examples/audio/loop.php Normal file
View file

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

View file

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

View file

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

View file

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

View file

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

View file

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

View file

@ -17,8 +17,6 @@
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);

View file

@ -3,6 +3,15 @@
*
* A Camera is your view into the game world. It has a position and size and renders only those objects within its field of view.
* The game automatically creates a single Stage sized camera on boot. Move the camera around the world with Phaser.Camera.x/y
*
* @class Phaser.Camera
* @constructor
* @param game {Phaser.Game} game reference to the currently running game.
* @param id {number} not being used at the moment, will be when Phaser supports multiple camera
* @param x {number} position of the camera on the X axis
* @param y {number} position of the camera on the Y axis
* @param width {number} the width of the view rectangle
* @param height {number} the height of the view rectangle
*/
Phaser.Camera = function (game, id, x, y, width, height) {

View file

@ -8,6 +8,13 @@
* @author Richard Davey <rich@photonstorm.com>
* @copyright 2013 Photon Storm Ltd.
* @license https://github.com/photonstorm/phaser/blob/master/license.txt MIT License
* @class Phaser.Camera
* @constructor
* @param game {Phaser.Game} game reference to the currently running game.
* @param width {number} width of the canvas element
* @param height {number} height of the canvas element
*/
Phaser.Stage = function (game, width, height) {

View file

@ -11,6 +11,10 @@
* @author Richard Davey <rich@photonstorm.com>
* @copyright 2013 Photon Storm Ltd.
* @license https://github.com/photonstorm/phaser/blob/master/license.txt MIT License
* @class World
* @constructor
* @param game {Phaser.Game} reference to the current game instance.
*/
Phaser.World = function (game) {
@ -91,7 +95,7 @@ Phaser.World.prototype = {
/**
* Updates the size of this world.
*
* @method setSize
* @param width {number} New width of the world.
* @param height {number} New height of the world.
*/
@ -111,6 +115,7 @@ Phaser.World.prototype = {
/**
* Destroyer of worlds.
* @method setSize
*/
destroy: function () {

View file

@ -1,5 +1,7 @@
/**
* Create a new <code>Button</code> object.
* @class Button
* @constructor
*
* @param game {Phaser.Game} Current game instance.
* @param [x] {number} X position of the button.
@ -58,7 +60,15 @@ Phaser.Button = function (game, x, y, key, callback, callbackContext, overFrame,
Phaser.Button.prototype = Phaser.Utils.extend(true, Phaser.Sprite.prototype, PIXI.Sprite.prototype);
Phaser.Button.prototype.constructor = Phaser.Button;
// Add our own custom methods
/**
* Used to manually set the frames that will be used for the different states of the button
* exactly like setting them in the constructor
*
* @method setFrames
* @param [overFrame] {string|number} This is the frame or frameName that will be set when this button is in an over state. Give either a number to use a frame ID or a string for a frame name.
* @param [outFrame] {string|number} This is the frame or frameName that will be set when this button is in an out state. Give either a number to use a frame ID or a string for a frame name.
* @param [downFrame] {string|number} This is the frame or frameName that will be set when this button is in a down state. Give either a number to use a frame ID or a string for a frame name.
*/
Phaser.Button.prototype.setFrames = function (overFrame, outFrame, downFrame) {

View file

@ -1,7 +1,17 @@
/**
* The Sound class
*
* @class Sound
* @constructor
* @param game {Phaser.Game} reference to the current game instance.
* @param key {string} Asset key for the sound.
* @param volume {number} default value for the volume.
* @param loop {bool} Whether or not the sound will loop.
*/
Phaser.Sound = function (game, key, volume, loop) {
volume = volume || 1;
loop = loop || false;
if (typeof loop == 'undefined') { loop = false; }
this.game = game;
this.name = '';
@ -187,8 +197,8 @@ Phaser.Sound.prototype = {
marker = marker || '';
position = position || 0;
volume = volume || 1;
loop = loop || false;
forceRestart = forceRestart || false;
if (typeof loop == 'undefined') { loop = false; }
if (typeof forceRestart == 'undefined') { forceRestart = false; }
// console.log('play ' + marker + ' position ' + position + ' volume ' + volume + ' loop ' + loop);
@ -356,7 +366,7 @@ Phaser.Sound.prototype = {
marker = marker || '';
position = position || 0;
volume = volume || 1;
loop = loop || false;
if (typeof loop == 'undefined') { loop = false; }
this.play(marker, position, volume, loop, true);