mirror of
https://github.com/photonstorm/phaser
synced 2024-11-23 21:24:09 +00:00
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:
parent
17e208a95e
commit
fc584cf6bc
15 changed files with 393 additions and 8 deletions
BIN
examples/assets/audio/SoundEffects/squit.mp3
Normal file
BIN
examples/assets/audio/SoundEffects/squit.mp3
Normal file
Binary file not shown.
BIN
examples/assets/audio/SoundEffects/squit.ogg
Normal file
BIN
examples/assets/audio/SoundEffects/squit.ogg
Normal file
Binary file not shown.
51
examples/audio/loop.php
Normal file
51
examples/audio/loop.php
Normal 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');
|
||||
?>
|
48
examples/buttons/action on click.php
Normal file
48
examples/buttons/action on click.php
Normal 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');
|
||||
?>
|
55
examples/buttons/changing the frames.php
Normal file
55
examples/buttons/changing the frames.php
Normal 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');
|
||||
?>
|
56
examples/buttons/rotated buttons.php
Normal file
56
examples/buttons/rotated buttons.php
Normal 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');
|
||||
?>
|
76
examples/camera/basic follow.php
Normal file
76
examples/camera/basic follow.php
Normal 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');
|
||||
?>
|
60
examples/camera/moving the game camera.php
Normal file
60
examples/camera/moving the game camera.php
Normal 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');
|
||||
?>
|
|
@ -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);
|
||||
|
|
|
@ -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) {
|
||||
|
|
|
@ -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) {
|
||||
|
||||
|
|
|
@ -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 () {
|
||||
|
||||
|
|
|
@ -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) {
|
||||
|
||||
|
|
|
@ -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);
|
||||
|
||||
|
|
Loading…
Reference in a new issue