Revamping the examples area.

This commit is contained in:
photonstorm
2013-10-22 03:58:20 +01:00
parent 82df8c9f54
commit 07724e5001
380 changed files with 8619 additions and 10707 deletions
+34
View File
@@ -0,0 +1,34 @@
var game = new Phaser.Game(800, 600, Phaser.CANVAS, 'phaser-example', { preload: preload, create: create });
var friendAndFoe;
var enemies;
function preload() {
game.load.image('ufo', 'assets/sprites/ufo.png');
game.load.image('baddie', 'assets/sprites/space-baddie.png');
}
function create() {
// Here we create 2 new groups
friendAndFoe = game.add.group();
enemies = game.add.group();
for (var i = 0; i < 16; i++)
{
// This creates a new Phaser.Sprite instance within the group
// It will be randomly placed within the world and use the 'baddie' image to display
enemies.create(360 + Math.random() * 200, 120 + Math.random() * 200, 'baddie');
}
// You can also add existing sprites to a group.
// Here we'll create a local sprite called 'ufo'
var ufo = game.add.sprite(200, 240, 'ufo');
// And then add it to the group
friendAndFoe.add(ufo);
}
-63
View File
@@ -1,63 +0,0 @@
<?php
$title = "Adding to group using 'add'";
require('../head.php');
?>
<script type="text/javascript">
var game = new Phaser.Game(800, 600, Phaser.CANVAS, '', { preload: preload, create: create,render:render });
var friendAndFoe,
enemies;
function preload() {
game.load.image('ufo', 'assets/sprites/ufo.png');
game.load.image('baddie', 'assets/sprites/space-baddie.png');
}
function create() {
// Create some local groups for later use.
friendAndFoe = game.add.group();
enemies = game.add.group();
// Use game.add (GameObjectFactory) to create sprites, those
// newly created ones will be added to game.world.group
// automatically. While you can still use new to allocate and
// only add them to your own groups.
var ufo = game.add.sprite(200, 240, 'ufo');
friendAndFoe.add(ufo);
// Create some enemies using new keyword.
// (Don't forget to pass game as the first parameter.)
var enemy;
for (var i = 0; i < 16; i++) {
enemy = new Phaser.Sprite(game,
360 + Math.random() * 200, 120 + Math.random() * 200,
'baddie');
enemies.add(enemy);
}
}
function render() {
game.debug.renderText('ufo added to game.world.and "friendAndFoe" group', 20, 24);
game.debug.renderText('others ONLY added to "enemies" group', 20, 40);
}
</script>
<?php
require('../foot.php');
?>
+34
View File
@@ -0,0 +1,34 @@
var game = new Phaser.Game(800, 600, Phaser.CANVAS, 'phaser-example', { preload: preload, create: create, render: render });
function preload() {
game.load.spritesheet('button', 'assets/buttons/number-buttons.png', 160, 160);
}
var container;
function create() {
container = game.add.group();
// Add buttons to container.
container.add(game.add.button(200, 100, 'button', bringMeToTop, this, 0, 0, 0));
container.add(game.add.button(300, 100, 'button', bringMeToTop, this, 1, 1, 1));
container.add(game.add.button(100, 200, 'button', bringMeToTop, this, 2, 2, 2));
container.add(game.add.button(400, 200, 'button', bringMeToTop, this, 3, 3, 3));
container.add(game.add.button(300, 300, 'button', bringMeToTop, this, 4, 4, 4));
container.add(game.add.button(200, 300, 'button', bringMeToTop, this, 5, 5, 5));
}
function render() {
game.debug.renderText('Tap or click button to bring it to the top.', 32, 32);
}
function bringMeToTop(btn) {
container.bringToTop(btn);
}
-47
View File
@@ -1,47 +0,0 @@
<?php
$title = "Bring to Top using parent container";
require('../head.php');
?>
<script type="text/javascript">
var game = new Phaser.Game(800, 600, Phaser.CANVAS, '', { preload: preload, create: create,render : render });
var container;
function preload() {
game.load.spritesheet('button', 'assets/buttons/number-buttons.png', 160, 160);
}
function create() {
// Container for sorting the buttons, which we'll use to make buttons
// to the top later.
container = game.add.group();
// Add buttons to container.
container.add(game.add.button(200, 100, 'button', bringMeToTop, this, 0, 0, 0));
container.add(game.add.button(300, 100, 'button', bringMeToTop, this, 1, 1, 1));
container.add(game.add.button(100, 200, 'button', bringMeToTop, this, 2, 2, 2));
container.add(game.add.button(400, 200, 'button', bringMeToTop, this, 3, 3, 3));
container.add(game.add.button(300, 300, 'button', bringMeToTop, this, 4, 4, 4));
container.add(game.add.button(200, 300, 'button', bringMeToTop, this, 5, 5, 5));
}
function render() {
game.debug.renderText('Tap or click buttons to bring it to the top.', 32, 32);
}
//The sprite added as a parameter will be brought to top
function bringMeToTop(btn) {
container.bringToTop(btn);
}
</script>
<?php
require('../foot.php');
?>
+83
View File
@@ -0,0 +1,83 @@
var game = new Phaser.Game(800, 600, Phaser.CANVAS, 'phaser-example', { preload: preload, create: create, update: update, render: render });
function preload() {
game.load.image('beast', 'assets/pics/shadow_of_the_beast2_karamoon.png');
game.load.image('snot', 'assets/pics/nslide_snot.png');
game.load.image('atari1', 'assets/sprites/atari130xe.png');
game.load.image('sonic', 'assets/sprites/sonic_havok_sanity.png');
game.load.image('coke', 'assets/sprites/cokecan.png');
game.load.image('disk', 'assets/sprites/oz_pov_melting_disk.png');
}
var group1;
var group2;
var coke;
var disk;
function create() {
// Create a background image
game.add.sprite(0, 0, 'beast');
// Create a Group that will sit above the background image
group1 = game.add.group();
// Create a Group that will sit above Group 1
group2 = game.add.group();
// Now let's create some random sprites and enable them all for drag and 'bring to top'
for (var i = 0; i < 10; i++)
{
var tempSprite = game.add.sprite(game.stage.randomX, game.stage.randomY, 'atari1');
tempSprite.name = 'atari' + i;
tempSprite.input.start(i, true);
tempSprite.input.enableDrag(false, true);
group1.add(tempSprite);
// Sonics
var tempSprite=game.add.sprite(game.stage.randomX, game.stage.randomY, 'sonic');
tempSprite.name = 'sonic' + i;
tempSprite.input.start(10 + i, true);
tempSprite.input.enableDrag(false, true);
group2.add(tempSprite);
}
// Add 2 control sprites into each group - these cannot be dragged but should be bought to the top each time
coke = group1.create(100, 100, 'coke');
disk = group2.create(400, 300, 'disk');
// Create a foreground image - everything should appear behind this, even when dragged
var snot = game.add.sprite(game.world.centerX, game.world.height, 'snot');
snot.anchor.setTo(0.5, 1);
// You can click and drag any sprite but Sonic sprites should always appear above the Atari sprites
// and both types of sprite should only ever appear above the background and behind the
}
function update() {
if (game.input.keyboard.justReleased(Phaser.Keyboard.ONE))
{
coke.bringToTop();
}
if (game.input.keyboard.justReleased(Phaser.Keyboard.TWO))
{
disk.bringToTop();
}
}
function render() {
game.debug.renderInputInfo(32, 32);
}
-101
View File
@@ -1,101 +0,0 @@
<?php
$title = "Bringing to top and game indexes";
require('../head.php');
?>
<script type="text/javascript">
var game = new Phaser.Game(800, 600, Phaser.CANVAS, '', { preload: preload, create: create,update:update,render:render });
function preload() {
game.load.image('beast', 'assets/pics/shadow_of_the_beast2_karamoon.png');
game.load.image('snot', 'assets/pics/nslide_snot.png');
game.load.image('atari1', 'assets/sprites/atari130xe.png');
game.load.image('sonic', 'assets/sprites/sonic_havok_sanity.png');
game.load.image('coke', 'assets/sprites/cokecan.png');
game.load.image('disk', 'assets/sprites/oz_pov_melting_disk.png');
}
var group1,
group2,
coke,
disk;
function create() {
// Create a background image
game.add.sprite(0, 0, 'beast');
// Create a Group that will sit above the background image
group1 = game.add.group();
// Create a Group that will sit above Group 1
group2 = game.add.group();
// Now let's create some random sprites and enable them all for drag and 'bring to top'
for (var i = 0; i < 10; i++)
{
var tempSprite = game.add.sprite(game.stage.randomX, game.stage.randomY, 'atari1');
tempSprite.name = 'atari' + i;
tempSprite.input.start(i, true);
tempSprite.input.enableDrag(false, true);
group1.add(tempSprite);
// Sonics
var tempSprite=game.add.sprite(game.stage.randomX, game.stage.randomY, 'sonic');
tempSprite.name = 'sonic' + i;
tempSprite.input.start(10 + i, true);
tempSprite.input.enableDrag(false, true);
group2.add(tempSprite);
}
// Add 2 control sprites into each group - these cannot be dragged but should be bought to the top each time
coke = group1.create(100, 100, 'coke');
disk = group2.create(400, 300, 'disk');
// Create a foreground image - everything should appear behind this, even when dragged
var snot = game.add.sprite(game.world.centerX, game.world.height, 'snot');
snot.anchor.setTo(0.5, 1);
// You can click and drag any sprite but Sonic sprites should always appear above the Atari sprites
// and both types of sprite should only ever appear above the background and behind the
}
function update() {
if (game.input.keyboard.justReleased(Phaser.Keyboard.ONE))
{
coke.bringToTop();
}
if (game.input.keyboard.justReleased(Phaser.Keyboard.TWO))
{
disk.bringToTop();
}
}
function render() {
game.debug.renderInputInfo(32, 32);
}
</script>
<?php
require('../foot.php');
?>
+52
View File
@@ -0,0 +1,52 @@
var game = new Phaser.Game(800, 600, Phaser.CANVAS, 'phaser-example', { preload: preload, create: create, render: render });
function preload() {
game.load.spritesheet('item', 'assets/buttons/number-buttons-90x90.png', 90, 90);
game.load.image('reviveBtn', 'assets/buttons/revive-button.png');
}
function create() {
// Add some items.
var item;
for (var i = 0; i < 3; i++)
{
// Give the items a different alpha increase speed.
item = game.add.sprite(290, 98 * (i + 1), 'item', i);
// Enable input.
item.input.start(0, true);
item.events.onInputUp.add(kill);
// An item besides the left one.
item = game.add.sprite(388, 98 * (i + 1), 'item', i + 3);
item.input.start(0, true);
item.events.onInputUp.add(kill);
}
// Add a button to revive all the items.
game.add.button(270, 400, 'reviveBtn', reviveAll, this, 0, 0, 0);
}
function kill(item) {
item.kill();
}
function reviveAll() {
game.world.callAll('revive');
}
function render() {
game.debug.renderText('Tap or click an item to kill it, and press the revive button to revive them all.', 160, 500);
}
-52
View File
@@ -1,52 +0,0 @@
<?php
$title = "Calling a function on all members of the group";
require('../head.php');
?>
<script type="text/javascript">
var game = new Phaser.Game(800, 600, Phaser.CANVAS, '', { preload: preload, create: create,render : render });
function preload() {
game.load.spritesheet('item', 'assets/buttons/number-buttons-90x90.png', 90, 90);
game.load.image('reviveBtn', 'assets/buttons/revive-button.png');
}
function create() {
// Add some items.
var item;
for (var i = 0; i < 3; i++) {
// Give the items a different alpha increase speed.
item = game.add.sprite(290, 98 * (i + 1), 'item', i);
// Enable input.
item.input.start(0, true);
item.events.onInputUp.add(kill);
// An item besides the left one.
item = game.add.sprite(388, 98 * (i + 1), 'item', i + 3);
item.input.start(0, true);
item.events.onInputUp.add(kill);
}
// Add a button to revive all the items.
game.add.button(270, 400, 'reviveBtn', reviveAll, this, 0, 0, 0);
}
function kill(item) {
item.kill();
}
function reviveAll() {
game.world.callAll('revive');
}
function render() {
game.debug.renderText('Tap or click an item to kill it, and press the revive button to revive them all.', 160, 500);
}
</script>
<?php
require('../foot.php');
?>
+36
View File
@@ -0,0 +1,36 @@
var game = new Phaser.Game(800, 600, Phaser.AUTO, 'phaser-example', { preload: preload, create: create});
function preload() {
game.load.image('sonic', 'assets/sprites/sonic_havok_sanity.png');
}
var firstGroup;
function create() {
// Here we'll create a new Group
firstGroup = game.add.group();
// And add some sprites to it
for (var i = 0; i < 10; i++)
{
// Create a new sprite at a random screen location
var newSprite = new Phaser.Sprite(game, game.stage.randomX, game.stage.randomY, 'sonic');
// This set-ups a listener for the event, view your console.log output to see the result
newSprite.events.onAddedToGroup.add(logGroupAdd);
// Add the sprite to the Group
firstGroup.add(newSprite);
}
}
function logGroupAdd(sprite, group) {
console.log('Sprite added to Group', group.ID, 'at z-index:', group.getIndex(sprite));
}
-57
View File
@@ -1,57 +0,0 @@
<?php
$title = "Add a new sprite and log what happened";
require('../head.php');
?>
<script type="text/javascript">
var game = new Phaser.Game(800, 600, Phaser.AUTO, '', { preload: preload, create: create});
function preload() {
// Using Phasers asset loader we load up a PNG from the assets folder
game.load.image('sonic', 'assets/sprites/sonic_havok_sanity.png');
}
var firstGroup;
function create() {
// Here we'll create a new Group
firstGroup = game.add.group();
// And add some sprites to it
for (var i = 0; i < 10; i++)
{
// Create a new sprite at a random screen location
var newSprite = new Phaser.Sprite(game, game.stage.randomX, game.stage.randomY, 'sonic');
// This set-ups a listener for the event, view your console.log output to see the result
newSprite.events.onAddedToGroup.add(logGroupAdd);
// Add the sprite to the Group
firstGroup.add(newSprite);
}
}
function logGroupAdd(sprite, group) {
console.log('Sprite added to Group', group.ID, 'at z-index:', group.getIndex(sprite));
}
</script>
<?php
require('../foot.php');
?>
@@ -0,0 +1,45 @@
var game = new Phaser.Game(800, 600, Phaser.CANVAS, 'phaser-example', { preload: preload, create: create, render: render });
function preload() {
game.load.image('ufo', 'assets/sprites/ufo.png');
game.load.image('baddie', 'assets/sprites/space-baddie.png');
}
var friendAndFoe;
var enemies;
function create() {
// Create some local groups for later use.
friendAndFoe = game.add.group();
enemies = game.add.group();
// You can directly create a sprite and add it to a group
// using just one line.
friendAndFoe.create(200, 240, 'ufo');
// Create some enemies.
for (var i = 0; i < 8; i++)
{
createBaddie();
}
// Tap to create new baddie sprites.
game.input.onTap.add(createBaddie, this);
}
function createBaddie() {
enemies.create(360 + Math.random() * 200, 120 + Math.random() * 200,'baddie');
}
function render() {
game.debug.renderText('Tap screen or click to create new baddies.', 16, 24);
}
@@ -1,56 +0,0 @@
<?php
$title = "Adding to group using create";
require('../head.php');
?>
<script type="text/javascript">
var game = new Phaser.Game(800, 600, Phaser.CANVAS, '', { preload: preload, create: create,render:render });
function preload() {
game.load.image('ufo', 'assets/sprites/ufo.png');
game.load.image('baddie', 'assets/sprites/space-baddie.png');
}
var friendAndFoe,
enemies;
function create() {
// Create some local groups for later use.
friendAndFoe = game.add.group();
enemies = game.add.group();
// You can directly create a sprite and add it to a group
// using just one line.
friendAndFoe.create(200, 240, 'ufo');
// Create some enemies.
for (var i = 0; i < 8; i++) {
createBaddie();
}
// Tap to create new baddie sprites.
game.input.onTap.add(createBaddie, this);
}
function createBaddie() {
enemies.create(360 + Math.random() * 200, 120 + Math.random() * 200,'baddie');
}
function render() {
game.debug.renderText('Tap screen or click to create new baddies.', 16, 24);
}
</script>
<?php
require('../foot.php');
?>
+43
View File
@@ -0,0 +1,43 @@
var game = new Phaser.Game(800, 600, Phaser.AUTO, 'phaser-example', { preload: preload, create: create });
function preload() {
game.load.image('atari1', 'assets/sprites/atari130xe.png');
game.load.image('atari2', 'assets/sprites/atari800xl.png');
game.load.image('card', 'assets/sprites/mana_card.png');
}
var items;
var card;
function create() {
items = game.add.group();
// Items are rendered in the depth order in which they are added to the Group
items.create(64, 100, 'atari1');
card = items.create(240, 80, 'card');
items.create(280, 100, 'atari2');
game.input.onTap.addOnce(removeCard, this);// obviously the event can be fired only once
}
function removeCard() {
// Now let's kill the card sprite
card.kill();
game.input.onTap.addOnce(replaceCard, this);
}
function replaceCard() {
// And bring it back to life again - I assume it will render in the same place as before?
var bob = items.getFirstDead();
bob.revive();
}
-64
View File
@@ -1,64 +0,0 @@
<?php
$title = "Retaining the display order when a sprite is dead";
require('../head.php');
?>
<script type="text/javascript">
var game = new Phaser.Game(800, 600, Phaser.AUTO, '', { preload: preload, create: create });
function preload() {
game.load.image('atari1', 'assets/sprites/atari130xe.png');
game.load.image('atari2', 'assets/sprites/atari800xl.png');
game.load.image('card', 'assets/sprites/mana_card.png');
}
var items,
card;
function create() {
items = game.add.group();
// Items are rendered in the depth order in which they are added to the Group
items.create(64, 100, 'atari1');
card = items.create(240, 80, 'card');
items.create(280, 100, 'atari2');
game.input.onTap.addOnce(removeCard, this);// obviously the event can be fired only once
}
function removeCard() {
// Now let's kill the card sprite
card.kill();
game.input.onTap.addOnce(replaceCard, this);
}
function replaceCard() {
// And bring it back to life again - I assume it will render in the same place as before?
var bob = items.getFirstDead();
bob.revive();
}
</script>
<?php
require('../foot.php');
?>
+43
View File
@@ -0,0 +1,43 @@
var game = new Phaser.Game(800, 600, Phaser.CANVAS, 'phaser-example', { preload: preload, create: create, update: update, render: render });
var baseAlphaIncSpeed= 0.006;
function preload() {
game.load.spritesheet('item', 'assets/buttons/number-buttons-90x90.png', 90, 90);
}
function create() {
for (var i = 0; i < 3; i++)
{
// Note: alphaIncSpeed is a new property we're adding to Phaser.Sprite, not a pre-existing one
game.add.sprite(290, 98 * (i + 1), 'item', i).alphaIncSpeed = baseAlphaIncSpeed * (i + 1);
game.add.sprite(388, 98 * (i + 1), 'item', i + 3).alphaIncSpeed = baseAlphaIncSpeed * (i + 4);
}
}
function update() {
// Animating alpha property of each item using forEach() method.
game.world.forEach(function(item) {
// Update alpha first.
item.alpha -= item.alphaIncSpeed;
// Check for switch between increasing and descreasing.
if (item.alpha < 0.001 || item.alpha > 0.999)
{
item.alphaIncSpeed *= -1;
}
});
}
function render() {
game.debug.renderText('Alpha of items is always changing.', 280, 480);
}
-50
View File
@@ -1,50 +0,0 @@
<?php
$title = "iterating over a group";
require('../head.php');
?>
<script type="text/javascript">
var game = new Phaser.Game(800, 600, Phaser.CANVAS, '', { preload: preload, create: create,update:update,render : render });
var baseAlphaIncSpeed= 0.006;
function preload() {
game.load.spritesheet('item', 'assets/buttons/number-buttons-90x90.png', 90, 90);
}
function create() {
// Add some items.
for (var i = 0; i < 3; i++) {
game.add.sprite(290, 98 * (i + 1), 'item', i)
.alphaIncSpeed = baseAlphaIncSpeed * (i + 1);
game.add.sprite(388, 98 * (i + 1), 'item', i + 3)
.alphaIncSpeed = baseAlphaIncSpeed * (i + 4);
}
}
function update() {
// Animating alpha property of each item using forEach() method.
game.world.forEach(function(item) {
// Update alpha first.
item.alpha -= item.alphaIncSpeed;
// Check for switch between increasing and descreasing.
if (item.alpha < 0.001 || item.alpha > 0.999) {
item.alphaIncSpeed *= -1;
}
});
}
function render() {
game.debug.renderText('Alpha of items is always changing.', 280, 480);
}
</script>
<?php
require('../foot.php');
?>
+60
View File
@@ -0,0 +1,60 @@
var game = new Phaser.Game(800, 600, Phaser.CANVAS, 'phaser-example', { preload: preload, create: create, update: update, render: render });
function preload() {
game.load.spritesheet('item', 'assets/buttons/number-buttons-90x90.png', 90, 90);
game.load.image('reviveBtn', 'assets/buttons/revive-button.png');
}
var timer;
var cycle;
function create() {
// Add some items.
var item;
for (var i = 0; i < 3; i++)
{
// Give the items a different alpha increase speed.
item = game.add.sprite(290, 98 * (i + 1), 'item', i);
// An item beside the left one.
item = game.add.sprite(388, 98 * (i + 1), 'item', i + 3);
}
// Set a timer so we can perform an action after a delay.
timer = 0;
cycle = 1000;
}
function update() {
if (game.time.now > timer)
{
// Update timer.
timer = game.time.now +cycle;
// Get the first alive item and kill it.
var item = game.world.getFirstAlive();
if (item)
{
item.kill();
}
}
}
function render() {
game.debug.renderText('One item will be killed each second.', 280, 420);
// Get living and dead number of a group.
game.debug.renderText('Living: ' + game.world.countLiving() + ', Dead: ' + game.world.countDead(), 330, 440);
}
-72
View File
@@ -1,72 +0,0 @@
<?php
$title = "Getting the first child";
require('../head.php');
?>
<script type="text/javascript">
var game = new Phaser.Game(800, 600, Phaser.CANVAS, '', { preload: preload, create: create,update:update,render:render});
function preload() {
game.load.spritesheet('item', 'assets/buttons/number-buttons-90x90.png', 90, 90);
game.load.image('reviveBtn', 'assets/buttons/revive-button.png');
}
var timer,
cycle;
function create() {
// Add some items.
var item;
for (var i = 0; i < 3; i++) {
// Give the items a different alpha increase speed.
item = game.add.sprite(290, 98 * (i + 1), 'item', i);
// An item beside the left one.
item = game.add.sprite(388, 98 * (i + 1), 'item', i + 3);
}
// Set a timer so we can perform an action after a delay.
timer = 0;
cycle = 1000;
}
function update() {
if (game.time.now > timer) {
// Update timer.
timer = game.time.now +cycle;
// Get the first alive item and kill it.
var item = game.world.getFirstAlive();
if(item){
item.kill();
}
}
}
function render() {
game.debug.renderText('One item will be killed each second.', 280, 420);
// Get living and dead number of a group.
game.debug.renderText('Living: ' + game.world.countLiving() + ', Dead: ' + game.world.countDead(), 330, 440);
}
</script>
<?php
require('../foot.php');
?>
+73
View File
@@ -0,0 +1,73 @@
var game = new Phaser.Game(800, 600, Phaser.CANVAS, 'phaser-example', { preload: preload, create: create, render: render });
function preload() {
game.world.setBounds(0,0,1280, 800);
game.load.image('ground', 'assets/tests/ground-2x.png');
game.load.image('river', 'assets/tests/river-2x.png');
game.load.image('sky', 'assets/tests/sky-2x.png');
game.load.image('cloud0', 'assets/tests/cloud-big-2x.png');
game.load.image('cloud1', 'assets/tests/cloud-narrow-2x.png');
game.load.image('cloud2', 'assets/tests/cloud-small-2x.png');
game.load.spritesheet('ufo', 'assets/sprites/ufo.png', 24, 21);
}
function create() {
// Create the sky layer, behind everything and donot move.
var skyLayer = game.add.group();
skyLayer.z = 0;
// Create the cloud layer, only beyond the sky.
var cloudLayer = game.add.group();
cloudLayer.z = 1;
// Create the ground, behind the river and beyond clouds.
var groundLayer = game.add.group();
groundLayer.z = 2;
// Create the sprite layer. This should behind the river,
// and beyond the ground, cloud and sky layer.
var spriteLayer = game.add.group();
spriteLayer.z = 3;
// Create the river layer, beyond everything.
var riverLayer = game.add.group();
riverLayer.z = 4;
// Add sky background to skyLayer.
var sky = new Phaser.Sprite(game, 0, 0, 'sky');
skyLayer.add(sky);
// Add clouds to cloudLayer.
var cloud0 = new Phaser.Sprite(game, 200, 120, 'cloud0');
var cloud1 = new Phaser.Sprite(game, -60, 120, 'cloud1');
var cloud2 = new Phaser.Sprite(game, 900, 170, 'cloud2');
cloudLayer.add(cloud0);
cloudLayer.add(cloud1);
cloudLayer.add(cloud2);
// Add ground sprite to groundLayer.
var ground = new Phaser.Sprite(game, 0, 360, 'ground');
groundLayer.add(ground);
// Add river to riverLayer.
var river = new Phaser.Sprite(game, 0, 400, 'river');
riverLayer.add(river);
// Add sprites to spriteLayer.
var ufo = new Phaser.Sprite(game, 360, 240, 'ufo');
ufo.anchor.setTo(0.5, 0.5);
spriteLayer.add(ufo);
}
function render() {
game.debug.renderText('sky layer: z = 0', 16, 20);
game.debug.renderText('cloud layer: z = 1', 16, 36);
game.debug.renderText('ground layer: z = 2', 16, 52);
game.debug.renderText('sprite layer: z = 3', 16, 68);
game.debug.renderText('river layer: z = 4', 16, 84);
}
-85
View File
@@ -1,85 +0,0 @@
<?php
$title = "Using groups to handle indexes inside of your game";
require('../head.php');
?>
<script type="text/javascript">
var game = new Phaser.Game(800, 600, Phaser.CANVAS, '', { preload: preload, create: create,render:render});
function preload() {
game.world.setBounds(0,0,1280, 800);
game.load.image('ground', 'assets/tests/ground-2x.png');
game.load.image('river', 'assets/tests/river-2x.png');
game.load.image('sky', 'assets/tests/sky-2x.png');
game.load.image('cloud0', 'assets/tests/cloud-big-2x.png');
game.load.image('cloud1', 'assets/tests/cloud-narrow-2x.png');
game.load.image('cloud2', 'assets/tests/cloud-small-2x.png');
game.load.spritesheet('ufo', 'assets/sprites/ufo.png', 24, 21);
}
function create() {
// Create the sky layer, behind everything and donot move.
var skyLayer = game.add.group();
skyLayer.z = 0;
// Create the cloud layer, only beyond the sky.
var cloudLayer = game.add.group();
cloudLayer.z = 1;
// Create the ground, behind the river and beyond clouds.
var groundLayer = game.add.group();
groundLayer.z = 2;
// Create the sprite layer. This should behind the river,
// and beyond the ground, cloud and sky layer.
var spriteLayer = game.add.group();
spriteLayer.z = 3;
// Create the river layer, beyond everything.
var riverLayer = game.add.group();
riverLayer.z = 4;
// Add sky background to skyLayer.
var sky = new Phaser.Sprite(game, 0, 0, 'sky');
skyLayer.add(sky);
// Add clouds to cloudLayer.
var cloud0 = new Phaser.Sprite(game, 200, 120, 'cloud0');
var cloud1 = new Phaser.Sprite(game, -60, 120, 'cloud1');
var cloud2 = new Phaser.Sprite(game, 900, 170, 'cloud2');
cloudLayer.add(cloud0);
cloudLayer.add(cloud1);
cloudLayer.add(cloud2);
// Add ground sprite to groundLayer.
var ground = new Phaser.Sprite(game, 0, 360, 'ground');
groundLayer.add(ground);
// Add river to riverLayer.
var river = new Phaser.Sprite(game, 0, 400, 'river');
riverLayer.add(river);
// Add sprites to spriteLayer.
var ufo = new Phaser.Sprite(game, 360, 240, 'ufo');
ufo.anchor.setTo(0.5, 0.5);
spriteLayer.add(ufo);
}
function render() {
game.debug.renderText('sky layer: z = 0', 16, 20);
game.debug.renderText('cloud layer: z = 1', 16, 36);
game.debug.renderText('ground layer: z = 2', 16, 52);
game.debug.renderText('sprite layer: z = 3', 16, 68);
game.debug.renderText('river layer: z = 4', 16, 84);
}
</script>
<?php
require('../foot.php');
?>
@@ -0,0 +1,50 @@
var game = new Phaser.Game(800, 600, Phaser.CANVAS, 'phaser-example', { preload: preload, create: create, update: update, render: render });
var robot;
var eye;
var body;
var leftArm;
var rightArm;
var leftLeg;
var rightLeg;
function preload() {
game.load.image('eye', 'assets/sprites/robot/eye.png');
game.load.image('body', 'assets/sprites/robot/body.png');
game.load.image('arm-l', 'assets/sprites/robot/arm-l.png');
game.load.image('arm-r', 'assets/sprites/robot/arm-r.png');
game.load.image('leg-l', 'assets/sprites/robot/leg-l.png');
game.load.image('leg-r', 'assets/sprites/robot/leg-r.png');
}
function create() {
// Use groups of sprites to create a big robot.
// Robot itself, you can subclass group class in a real game.
robot = game.add.group();
// Robot components.
leftArm = robot.create(90, 175, 'arm-l');
rightArm = robot.create(549, 175, 'arm-r');
leftLeg = robot.create(270, 325, 'leg-l');
rightLeg = robot.create(410, 325, 'leg-r');
body = robot.create(219, 32, 'body');
eye = robot.create(335, 173,'eye');
}
function update() {
// Change parent's rotation to change all the childs.
robot.angle += 2;
}
function render() {
game.debug.renderText('The robot is a group and every component is a sprite.', 240, 580);
}
@@ -1,63 +0,0 @@
<?php
$title = "Rotating an entire group";
require('../head.php');
?>
<script type="text/javascript">
var game = new Phaser.Game(800, 600, Phaser.CANVAS, '', { preload: preload, create: create,update : update,render:render});
var robot;
var eye,
body,
leftArm,
rightArm,
leftLeg,
rightLeg;
function preload() {
game.load.image('eye', 'assets/sprites/robot/eye.png');
game.load.image('body', 'assets/sprites/robot/body.png');
game.load.image('arm-l', 'assets/sprites/robot/arm-l.png');
game.load.image('arm-r', 'assets/sprites/robot/arm-r.png');
game.load.image('leg-l', 'assets/sprites/robot/leg-l.png');
game.load.image('leg-r', 'assets/sprites/robot/leg-r.png');
}
function create() {
// Use groups of sprites to create a big robot.
// Robot itself, you can subclass group class in a real game.
robot = game.add.group();
// Robot components.
leftArm = robot.create(90, 175, 'arm-l');
rightArm = robot.create(549, 175, 'arm-r');
leftLeg = robot.create(270, 325, 'leg-l');
rightLeg = robot.create(410, 325, 'leg-r');
body = robot.create(219, 32, 'body');
eye = robot.create(335, 173,'eye');
}
function update() {
// Change parent's rotation to change all the childs.
robot.angle+=2;
}
function render() {
game.debug.renderText('The robot is a group and every component is a sprite.', 240, 580);
}
</script>
<?php
require('../foot.php');
?>
@@ -0,0 +1,46 @@
var game = new Phaser.Game(800, 600, Phaser.CANVAS, 'phaser-example', { preload: preload, create: create, render: render });
var robot;
var eye;
var body;
var leftArm;
var rightArm;
var leftLeg;
var rightLeg;
function preload() {
game.load.image('eye', 'assets/sprites/robot/eye.png');
game.load.image('body', 'assets/sprites/robot/body.png');
game.load.image('arm-l', 'assets/sprites/robot/arm-l.png');
game.load.image('arm-r', 'assets/sprites/robot/arm-r.png');
game.load.image('leg-l', 'assets/sprites/robot/leg-l.png');
game.load.image('leg-r', 'assets/sprites/robot/leg-r.png');
}
function create() {
// Use groups of sprites to create a big robot.
// Robot itself, you can subclass group class in a real game.
robot = game.add.group();
// Robot components.
leftArm = robot.create(90, 175, 'arm-l');
rightArm = robot.create(549, 175, 'arm-r');
leftLeg = robot.create(270, 325, 'leg-l');
rightLeg = robot.create(410, 325, 'leg-r');
body = robot.create(219, 32, 'body');
eye = robot.create(335, 173,'eye');
// Tween the robot's size, so all the components also scaled.
game.add.tween(robot._container.scale).to( {x: 1.2, y: 1.2}, 1000, Phaser.Easing.Back.InOut, true, 0, false).yoyo(true);
}
function render() {
game.debug.renderText('The robot is a group and every component is a sprite.', 240, 580);
}
@@ -1,63 +0,0 @@
<?php
$title = "Tweening an entire group";
require('../head.php');
?>
<script type="text/javascript">
var game = new Phaser.Game(800, 600, Phaser.CANVAS, '', { preload: preload, create: create,render:render});
var robot;
var eye,
body,
leftArm,
rightArm,
leftLeg,
rightLeg;
function preload() {
game.load.image('eye', 'assets/sprites/robot/eye.png');
game.load.image('body', 'assets/sprites/robot/body.png');
game.load.image('arm-l', 'assets/sprites/robot/arm-l.png');
game.load.image('arm-r', 'assets/sprites/robot/arm-r.png');
game.load.image('leg-l', 'assets/sprites/robot/leg-l.png');
game.load.image('leg-r', 'assets/sprites/robot/leg-r.png');
}
function create() {
// Use groups of sprites to create a big robot.
// Robot itself, you can subclass group class in a real game.
robot = game.add.group();
// Robot components.
leftArm = robot.create(90, 175, 'arm-l');
rightArm = robot.create(549, 175, 'arm-r');
leftLeg = robot.create(270, 325, 'leg-l');
rightLeg = robot.create(410, 325, 'leg-r');
body = robot.create(219, 32, 'body');
eye = robot.create(335, 173,'eye');
// Tween the robot's size, so all the components also scaled.
game.add.tween(robot._container.scale)
.to({x: 1.2, y: 1.2}, 1000, Phaser.Easing.Back.InOut, true, 0, false)
.yoyo(true);
}
function render() {
game.debug.renderText('The robot is a group and every component is a sprite.', 240, 580);
}
</script>
<?php
require('../foot.php');
?>
+65
View File
@@ -0,0 +1,65 @@
var game = new Phaser.Game(800, 600, Phaser.CANVAS, 'phaser-example', { preload: preload, create: create, render: render });
var robot;
var eye;
var body;
var leftArm;
var rightArm;
var leftLeg;
var rightLeg;
function preload() {
game.load.image('eye', 'assets/sprites/robot/eye.png');
game.load.image('body', 'assets/sprites/robot/body.png');
game.load.image('arm-l', 'assets/sprites/robot/arm-l.png');
game.load.image('arm-r', 'assets/sprites/robot/arm-r.png');
game.load.image('leg-l', 'assets/sprites/robot/leg-l.png');
game.load.image('leg-r', 'assets/sprites/robot/leg-r.png');
}
function create() {
// Use groups of sprites to create a big robot.
// Robot itself, you can subclass group class in a real game.
robot = game.add.group();
// Robot components.
leftArm = robot.create(90, 175, 'arm-l');
rightArm = robot.create(549, 175, 'arm-r');
leftLeg = robot.create(270, 325, 'leg-l');
rightLeg = robot.create(410, 325, 'leg-r');
body = robot.create(219, 32, 'body');
eye = robot.create(335, 173,'eye');
leftArm.input.start(0, false, true);
leftArm.input.enableDrag();
rightArm.input.start(0, false, true);
rightArm.input.enableDrag();
leftLeg.input.start(0, false, true);
leftLeg.input.enableDrag();
rightLeg.input.start(0, false, true);
rightLeg.input.enableDrag();
body.input.start(0, false, true);
body.input.enableDrag();
eye.input.start(0, false, true);
eye.input.enableDrag();
}
function render() {
game.debug.renderSpriteInfo(leftArm, 32, 30);
game.debug.renderSpriteInfo(rightArm, 32, 180);
game.debug.renderSpriteInfo(leftLeg, 32, 325);
game.debug.renderSpriteInfo(rightLeg, 32, 470);
game.debug.renderSpriteInfo(rightLeg, 450, 30);
game.debug.renderSpriteInfo(rightLeg, 450, 180);
game.debug.renderText('The robot is a group and every component is a sprite.', 240, 580);
game.debug.renderText('Drag each part to re-position them. ', 288, 592);
}
-78
View File
@@ -1,78 +0,0 @@
<?php
$title = "Grouping and dragging";
require('../head.php');
?>
<script type="text/javascript">
var game = new Phaser.Game(800, 600, Phaser.CANVAS, '', { preload: preload, create: create,render:render});
var robot;
var eye,
body,
leftArm,
rightArm,
leftLeg,
rightLeg;
function preload() {
game.load.image('eye', 'assets/sprites/robot/eye.png');
game.load.image('body', 'assets/sprites/robot/body.png');
game.load.image('arm-l', 'assets/sprites/robot/arm-l.png');
game.load.image('arm-r', 'assets/sprites/robot/arm-r.png');
game.load.image('leg-l', 'assets/sprites/robot/leg-l.png');
game.load.image('leg-r', 'assets/sprites/robot/leg-r.png');
}
function create() {
// Use groups of sprites to create a big robot.
// Robot itself, you can subclass group class in a real game.
robot = game.add.group();
// Robot components.
leftArm = robot.create(90, 175, 'arm-l');
rightArm = robot.create(549, 175, 'arm-r');
leftLeg = robot.create(270, 325, 'leg-l');
rightLeg = robot.create(410, 325, 'leg-r');
body = robot.create(219, 32, 'body');
eye = robot.create(335, 173,'eye');
leftArm.input.start(0, false, true);
leftArm.input.enableDrag();
rightArm.input.start(0, false, true);
rightArm.input.enableDrag();
leftLeg.input.start(0, false, true);
leftLeg.input.enableDrag();
rightLeg.input.start(0, false, true);
rightLeg.input.enableDrag();
body.input.start(0, false, true);
body.input.enableDrag();
eye.input.start(0, false, true);
eye.input.enableDrag();
}
function render() {
game.debug.renderSpriteInfo(leftArm, 32, 30);
game.debug.renderSpriteInfo(rightArm, 32, 180);
game.debug.renderSpriteInfo(leftLeg, 32, 325);
game.debug.renderSpriteInfo(rightLeg, 32, 470);
game.debug.renderSpriteInfo(rightLeg, 450, 30);
game.debug.renderSpriteInfo(rightLeg, 450, 180);
game.debug.renderText('The robot is a group and every component is a sprite.', 240, 580);
game.debug.renderText('Drag each part to re-position them. ', 288, 592);
}
</script>
<?php
require('../foot.php');
?>
+62
View File
@@ -0,0 +1,62 @@
var game = new Phaser.Game(800, 600, Phaser.CANVAS, 'phaser-example', { preload: preload, create: create, render: render });
var enemies;
function preload() {
game.load.image('baddie', 'assets/sprites/space-baddie.png');
game.load.spritesheet('button', 'assets/buttons/baddie-buttons.png', 224, 70);
}
function create() {
// Create a enemies group to store the baddies
enemies = game.add.group();
// Create some enemies.
for (var i = 0; i < 8; i++)
{
// Since the getFirstExists() which we'll use for recycling
// cannot allocate new objects, create them manually here.
enemies.create(360 + Math.random() * 200, 120 + Math.random() * 200, 'baddie');
}
// Create buttons to create and kill baddies.
game.add.button(16, 50, 'button', createBaddie,this, 0, 0, 0);
game.add.button(16, 130, 'button', killBaddie,this, 1, 1, 1);
}
function killBaddie() {
var baddie = enemies.getFirstAlive();
if (baddie)
{
baddie.kill();
}
}
function createBaddie() {
// Recycle using getFirstExists(false)
// Notice that this method will not create new objects if there's no one
// available, and it won't change size of this group.
var enemy = enemies.getFirstExists(false);
if (enemy)
{
enemy.revive();
}
}
function render() {
game.debug.renderText('Recycle baddies from a group using getFirstExists.', 16, 24);
game.debug.renderText('Notice that you cannot add more than 8 baddies since we only create 8 instance.', 16, 36);
game.debug.renderText('Living baddies: ' + (enemies.countLiving()), 340, 420);
}
-70
View File
@@ -1,70 +0,0 @@
<?php
$title = "Recycling inside a group";
require('../head.php');
?>
<script type="text/javascript">
var game = new Phaser.Game(800, 600, Phaser.CANVAS, '', { preload: preload, create: create,render:render});
var enemies;
function preload() {
game.load.image('baddie', 'assets/sprites/space-baddie.png');
game.load.spritesheet('button', 'assets/buttons/baddie-buttons.png', 224, 70);
}
function create() {
// Create a enemies group to store the baddies
enemies = game.add.group();
// Create some enemies.
for (var i = 0; i < 8; i++) {
// Since the getFirstExists() which we'll use for recycling
// cannot allocate new objects, create them manually here.
enemies.create(360 + Math.random() * 200, 120 + Math.random() * 200,
'baddie');
}
// Create buttons to create and kill baddies.
game.add.button(16, 50, 'button', createBaddie,this, 0, 0, 0);
game.add.button(16, 130, 'button', killBaddie,this, 1, 1, 1);
}
function killBaddie() {
var baddie = enemies.getFirstAlive();
if (baddie) baddie.kill();
}
function createBaddie() {
// Recycle using getFirstExists(false)
// Notice that this method will not create new objects if there's no one
// available, and it won't change size of this group.
var enemy = enemies.getFirstExists(false);
if (enemy) {
enemy.revive();
}
}
function render() {
game.debug.renderText('Recycle baddies from a group using getFirstExists.', 16, 24);
game.debug.renderText('Notice that you cannot add more than 8 baddies since we only create 8 instance.', 16, 36);
game.debug.renderText('Living baddies: ' + (enemies.countLiving()), 340, 420);
}
</script>
<?php
require('../foot.php');
?>
+64
View File
@@ -0,0 +1,64 @@
var game = new Phaser.Game(800, 600, Phaser.CANVAS, 'phaser-example', { preload: preload, create: create, render: render });
var items;
function preload() {
game.load.spritesheet('item', 'assets/buttons/number-buttons-90x90.png', 90, 90);
game.load.image('rect', 'assets/tests/200x100corners.png');
}
function create() {
// Create item container group.
items = game.add.group();
// Add some items and add them to the container group,
// then you can drag and drop them to remove.
var item;
for (var i = 0; i < 6; i++)
{
// Directly create sprites from the group.
item = items.create(90, 90 * i, 'item', i);
// Enable input detection, then it's possible be dragged.
item.input.start(0,true);
// Make this item draggable.
item.input.enableDrag();
// Then we make it snap to 90x90 grids.
item.input.enableSnap(90, 90, false, true);
// Add a handler to remove it using different options when dropped.
item.events.onDragStop.add(dropHandler);
}
// Create a rectangle drop it at this rectangle to
// remove it from origin group normally or
// cut it from the group's array entirely.
var rect = game.add.sprite(390, 0, 'rect');
rect.scale.setTo(2.0, 3.0);
}
function render() {
game.debug.renderText('Size of group: ' + items.length, 100, 560);
game.debug.renderText('Drop here to cut items from groups entirely.', 390, 24);
}
function dropHandler(item, pointer) {
if (item.x < 90)
{
item.x = 90;
}
else if (item.x > 400)
{
// So it is dropped in one rectangle.
// Remove it from group normally, so the group's size does not change.
items.remove(item);
console.log("Group length : "+items.length);
}
}
-73
View File
@@ -1,73 +0,0 @@
<?php
$title = "Remove a sprite from a group";
require('../head.php');
?>
<script type="text/javascript">
var game = new Phaser.Game(800, 600, Phaser.CANVAS, '', { preload: preload, create: create,render:render});
// Group contains items.
var items;
function preload() {
game.load.spritesheet('item', 'assets/buttons/number-buttons-90x90.png', 90, 90);
game.load.image('rect', 'assets/tests/200x100corners.png');
}
function create() {
// Create item container group.
items = game.add.group();
// Add some items and add them to the container group,
// then you can drag and drop them to remove.
var item;
for (var i = 0; i < 6; i++) {
// Directly create sprites from the group.
item = items.create(90, 90 * i, 'item', i);
// Enable input detection, then it's possible be dragged.
item.input.start(0,true);
// Make this item draggable.
item.input.enableDrag();
// Then we make it snap to 90x90 grids.
item.input.enableSnap(90, 90, false, true);
// Add a handler to remove it using different options when dropped.
item.events.onDragStop.add(dropHandler);
}
// Create a rectangle drop it at this rectangle to
// remove it from origin group normally or
// cut it from the group's array entirely.
var rect = game.add.sprite(390, 0, 'rect');
rect.scale.setTo(2.0, 3.0);
}
function render() {
game.debug.renderText('Size of group: ' + items.length, 100, 560);
game.debug.renderText('Drop here to cut items from groups entirely.', 390, 24);
}
function dropHandler(item, pointer) {
if (item.x < 90) {
item.x = 90;
}
else if (item.x > 400) { // So it is dropped in one rectangle.
// Remove it from group normally, so the group's size does not change.
items.remove(item);
console.log("Group length : "+items.length);
}
}
</script>
<?php
require('../foot.php');
?>
+76
View File
@@ -0,0 +1,76 @@
var game = new Phaser.Game(800, 600, Phaser.CANVAS, 'phaser-example', { preload: preload, create: create, render: render });
// Left and right group.
var left
var right;
// The first selected item.
var selected = null;
function preload() {
game.load.spritesheet('item', 'assets/buttons/number-buttons-90x90.png', 90, 90);
}
function create() {
left = game.add.group();
right = game.add.group();
// Add some items to left side, and set a onDragStop listener
// to limit its location when dropped.
var item;
for (var i = 0; i < 3; i++)
{
// Directly create sprites from the left group.
item = left.create(290, 98 * (i + 1), 'item', i);
// Enable input.
item.input.start(0, false, true);
item.events.onInputUp.add(select);
// Add another to the right group.
item = right.create(388, 98 * (i + 1), 'item', i + 3);
// Enable input.
item.input.start(0,true);
item.events.onInputUp.add(select);
}
}
function select(item, pointer) {
// If there's no one selected, mark it as selected.
if (!selected)
{
selected = item;
selected.alpha = 0.5;
}
else
{
// Items from different group selected, replace with each other;
// Something like a swap action, maybe better done with
// group.swap() method.
if (selected.group !== item.group)
{
// Move the later selected to the first selected item's position.
item.x = selected.x;
item.y = selected.y;
// Replace first selected with the second one.
selected.group.replace(selected, item);
}
else
{
selected.alpha = 1;
}
// After checking, now clear the helper var.
selected = null;
}
}
function render() {
game.debug.renderText('Left Group', 300, 80);
game.debug.renderText('Right Group', 400, 80);
game.debug.renderText('Click an item and one from another group to replace it.', 240, 480);
}
-79
View File
@@ -1,79 +0,0 @@
<?php
$title = "Replace items from different groups";
require('../head.php');
?>
<script type="text/javascript">
var game = new Phaser.Game(800, 600, Phaser.CANVAS, '', { preload: preload, create: create,render:render});
// Left and right group.
var left, right;
// The first selected item.
var selected = null;
function preload() {
game.load.spritesheet('item', 'assets/buttons/number-buttons-90x90.png', 90, 90);
}
function create() {
left = game.add.group();
right = game.add.group();
// Add some items to left side, and set a onDragStop listener
// to limit its location when dropped.
var item;
for (var i = 0; i < 3; i++) {
// Directly create sprites from the left group.
item = left.create(290, 98 * (i + 1), 'item', i);
// Enable input.
item.input.start(0, false, true);
item.events.onInputUp.add(select);
// Add another to the right group.
item = right.create(388, 98 * (i + 1), 'item', i + 3);
// Enable input.
item.input.start(0,true);
item.events.onInputUp.add(select);
}
}
function select(item, pointer) {
// If there's no one selected, mark it as selected.
if (!selected) {
selected = item;
selected.alpha = 0.5;
}
else {
// Items from different group selected, replace with each other;
// Something like a swap action, maybe better done with
// group.swap() method.
if (selected.group !== item.group) {
// Move the later selected to the first selected item's position.
item.x = selected.x;
item.y = selected.y;
// Replace first selected with the second one.
selected.group.replace(selected, item);
}
else {
selected.alpha = 1;
}
// After checking, now clear the helper var.
selected = null;
}
}
function render() {
game.debug.renderText('Left Group', 300, 80);
game.debug.renderText('Right Group', 400, 80);
game.debug.renderText('Click an item and one from another group to replace it.', 240, 480);
}
</script>
<?php
require('../foot.php');
?>
+35
View File
@@ -0,0 +1,35 @@
var game = new Phaser.Game(800, 600, Phaser.CANVAS, 'phaser-example', { preload: preload, create: create, render: render });
var baseIncSpeed= 0.006;
function preload() {
game.load.spritesheet('item', 'assets/buttons/number-buttons-90x90.png', 90, 90);
}
function create() {
// Add some items.
for (var i = 0; i < 3; i++)
{
// Give the items a different alpha increase speed.
game.add.sprite(290, 98 * (i + 1), 'item', i).alphaIncSpeed = baseIncSpeed * (i + 1);
game.add.sprite(388, 98 * (i + 1), 'item', i + 3).alphaIncSpeed = baseIncSpeed * (i + 4);
}
game.input.onTap.add(resetAlpha,this);
}
function resetAlpha() {
// Set "alpha" value of all the childs.
game.world.setAll('alpha', Math.random());
}
function render() {
game.debug.renderText('Tap or click to set random alpha of all the items.', 240, 480);
}
-46
View File
@@ -1,46 +0,0 @@
<?php
$title = "Setting properies of all children";
require('../head.php');
?>
<script type="text/javascript">
var game = new Phaser.Game(800, 600, Phaser.CANVAS, '', { preload: preload, create: create,render:render});
var baseIncSpeed= 0.006;
function preload() {
game.load.spritesheet('item', 'assets/buttons/number-buttons-90x90.png', 90, 90);
}
function create() {
// Add some items.
for (var i = 0; i < 3; i++) {
// Give the items a different alpha increase speed.
game.add.sprite(290, 98 * (i + 1), 'item', i)
.alphaIncSpeed = baseIncSpeed * (i + 1);
game.add.sprite(388, 98 * (i + 1), 'item', i + 3)
.alphaIncSpeed = baseIncSpeed * (i + 4);
}
game.input.onTap.add(resetAlpha,this);
}
function resetAlpha() {
// Set "alpha" value of all the childs.
game.world.setAll('alpha', Math.random());
}
function render() {
game.debug.renderText('Tap or click to set random alpha of all the items.', 240, 480);
}
</script>
<?php
require('../foot.php');
?>
@@ -0,0 +1,72 @@
var game = new Phaser.Game(800, 600, Phaser.CANVAS, 'phaser-example', { preload: preload, create: create, render: render });
// Groups for storing friends and enemies, may use for collision later.
var friendAndFoe;
var enemies;
// Groups for teaming up stuff.
var normalBaddies;
var purpleBaddies;
function preload() {
game.load.image('ufo', 'assets/sprites/ufo.png');
game.load.image('baddie', 'assets/sprites/space-baddie.png');
game.load.image('purple-baddie', 'assets/sprites/space-baddie-purple.png');
}
function create() {
// Create some local groups for later use.
friendAndFoe = game.add.group();
enemies = game.add.group();
normalBaddies = game.add.group();
purpleBaddies = game.add.group();
// Add both teams to enemies group, using the Pixi container otherwise it's impossible
enemies.add(normalBaddies._container);
enemies.add(purpleBaddies._container);
// Create a ufo as a friend sprite.
friendAndFoe.create(200, 240, 'ufo');
// Create some enemies.
for (var i = 0; i < 16; i++)
{
createBaddie();
}
// Tap to create new baddie sprites.
game.input.onTap.add(createBaddie, this);
}
function createBaddie() {
var baddie;
// Of course, the baddies created will belong to their respective groups
if (Math.random() > 0.5)
{
baddie = purpleBaddies.create(360 + Math.random() * 200, 120 + Math.random() * 200, 'purple-baddie');
}
else
{
baddie = normalBaddies.create(360 + Math.random() * 200, 120 + Math.random() * 200, 'baddie');
}
}
function render() {
game.debug.renderStyle = '#fff';
game.debug.renderText('Tap screen or click to create new baddies.', 16, 24);
game.debug.renderText('enemies: ' + enemies.length + ' (actually ' + enemies.length + ' groups)', 16, 48);
game.debug.renderText('normal baddies: ' + normalBaddies.length, 16, 60);
game.debug.renderText('purple baddies: ' + purpleBaddies.length, 16, 72);
game.debug.renderText('friends: ' + friendAndFoe.length, 16, 96);
}
@@ -1,77 +0,0 @@
<?php
$title = "Group length and sub groups";
require('../head.php');
?>
<script type="text/javascript">
var game = new Phaser.Game(800, 600, Phaser.CANVAS, '', { preload: preload, create: create,render:render});
// Groups for storing friends and enemies, may use for collision later.
var friendAndFoe,
enemies;
// Groups for teaming up stuff.
var normalBaddies,
purpleBaddies;
function preload() {
game.load.image('ufo', 'assets/sprites/ufo.png');
game.load.image('baddie', 'assets/sprites/space-baddie.png');
game.load.image('purple-baddie', 'assets/sprites/space-baddie-purple.png');
}
function create() {
// Create some local groups for later use.
friendAndFoe = game.add.group();
enemies = game.add.group();
normalBaddies = game.add.group();
purpleBaddies = game.add.group();
// Add both teams to enemies group, using the Pixi container otherwise it's impossible
enemies.add(normalBaddies._container);
enemies.add(purpleBaddies._container);
// Create a ufo as a friend sprite.
friendAndFoe.create(200, 240, 'ufo');
// Create some enemies.
for (var i = 0; i < 16; i++) {
createBaddie();
}
// Tap to create new baddie sprites.
game.input.onTap.add(createBaddie, this);
}
function createBaddie() {
var baddie;
// Of course, the baddies created will belong to their respective groups
if (Math.random() > 0.5) {
baddie = purpleBaddies.create(360 + Math.random() * 200, 120 + Math.random() * 200,
'purple-baddie');
}
else {
baddie = normalBaddies.create(360 + Math.random() * 200, 120 + Math.random() * 200,
'baddie');
}
}
function render() {
game.debug.renderStyle = '#fff';
game.debug.renderText('Tap screen or click to create new baddies.', 16, 24);
game.debug.renderText('enemies: ' + enemies.length + ' (actually ' + enemies.length + ' groups)', 16, 48);
game.debug.renderText('normal baddies: ' + normalBaddies.length, 16, 60);
game.debug.renderText('purple baddies: ' + purpleBaddies.length, 16, 72);
game.debug.renderText('friends: ' + friendAndFoe.length, 16, 96);
}
</script>
<?php
require('../foot.php');
?>
@@ -0,0 +1,35 @@
var game = new Phaser.Game(800, 600, Phaser.CANVAS, 'phaser-example', { preload: preload, create: create, render: render });
function preload() {
game.load.image('atari1', 'assets/sprites/atari130xe.png');
game.load.image('atari2', 'assets/sprites/atari800xl.png');
}
var atari1;
var atari2;
function create() {
// Items are rendered in the depth order in which they are added to the Group
atari1 = game.add.sprite(100, 100, 'atari1');
atari2 = game.add.sprite(250, 90, 'atari2');
game.input.onTap.add(swapSprites, this);
}
function swapSprites() {
//The 2 Sprites are in the global world Group (World class extends the Group class), but this will work for any Group:
game.world.swap(atari1, atari2);
}
function render () {
game.debug.renderText('Tap screen to swap the children and therefore swap their indexes.', 10, 280);
}
@@ -1,51 +0,0 @@
<?php
$title = "Swap children inside a group";
require('../head.php');
?>
<script type="text/javascript">
var game = new Phaser.Game(800, 600, Phaser.CANVAS, '', { preload: preload, create: create,render:render});
function preload() {
game.load.image('atari1', 'assets/sprites/atari130xe.png');
game.load.image('atari2', 'assets/sprites/atari800xl.png');
}
var atari1,
atari2;
function create() {
// Items are rendered in the depth order in which they are added to the Group
atari1 = game.add.sprite(100, 100, 'atari1');
atari2 = game.add.sprite(250, 90, 'atari2');
game.input.onTap.add(swapSprites, this);
}
function swapSprites() {
//The 2 Sprites are in the global world Group (World class extends the Group class), but this will work for any Group:
game.world.swap(atari1, atari2);
}
function render () {
game.debug.renderText('Tap screen to swap the children and therefore swap their indexes.', 10, 280);
}
</script>
<?php
require('../foot.php');
?>