Mirrors/phaser
2
0
Fork 0
mirror of https://github.com/photonstorm/phaser synced 2024-11-27 07:01:20 +00:00
Code Issues Projects Releases Packages Wiki Activity

Merge pull request #102 from alvinsight/dev

Browse source 
Well, almost every example works with 1.0.7 except multiple anims, plus some funky tweens examples, and renamed a lot of files
This commit is contained in:
Richard Davey 2013-10-14 05:47:38 -07:00
commit faf432bdb0
32 changed files with 599 additions and 70 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

144
examples/animation/Animation from a JSON object.php Normal file
View file

@ -0,0 +1,144 @@
<?php
$title = "Animation from a Texture Atlas";
require('../head.php');
?>
<script type="text/javascript">
var game = new Phaser.Game(800, 600, Phaser.AUTO, '', { preload: preload, create: create});
function preload() {
// Texture Atlas Method 2
//
// In this example we assume that the TexturePacker JSON data is a real json object stored as a var
// (in this case botData)
game.load.atlas('bot', 'assets/sprites/running_bot.png', null, botData);
}
var bot;
function create() {
bot = game.add.sprite(game.world.centerX, 300, 'bot');
bot.animations.add('run');
bot.animations.play('run', 10, true);
}
var botData = {
"frames": [
{
"filename": "running bot.swf/0000",
"frame": { "x": 34, "y": 128, "w": 56, "h": 60 },
"rotated": false,
"trimmed": true,
"spriteSourceSize": { "x": 0, "y": 2, "w": 56, "h": 60 },
"sourceSize": { "w": 56, "h": 64 }
},
{
"filename": "running bot.swf/0001",
"frame": { "x": 54, "y": 0, "w": 56, "h": 58 },
"rotated": false,
"trimmed": true,
"spriteSourceSize": { "x": 0, "y": 3, "w": 56, "h": 58 },
"sourceSize": { "w": 56, "h": 64 }
},
{
"filename": "running bot.swf/0002",
"frame": { "x": 54, "y": 58, "w": 56, "h": 58 },
"rotated": false,
"trimmed": true,
"spriteSourceSize": { "x": 0, "y": 3, "w": 56, "h": 58 },
"sourceSize": { "w": 56, "h": 64 }
},
{
"filename": "running bot.swf/0003",
"frame": { "x": 0, "y": 192, "w": 34, "h": 64 },
"rotated": false,
"trimmed": true,
"spriteSourceSize": { "x": 11, "y": 0, "w": 34, "h": 64 },
"sourceSize": { "w": 56, "h": 64 }
},
{
"filename": "running bot.swf/0004",
"frame": { "x": 0, "y": 64, "w": 54, "h": 64 },
"rotated": false,
"trimmed": true,
"spriteSourceSize": { "x": 1, "y": 0, "w": 54, "h": 64 },
"sourceSize": { "w": 56, "h": 64 }
},
{
"filename": "running bot.swf/0005",
"frame": { "x": 196, "y": 0, "w": 56, "h": 58 },
"rotated": false,
"trimmed": true,
"spriteSourceSize": { "x": 0, "y": 3, "w": 56, "h": 58 },
"sourceSize": { "w": 56, "h": 64 }
},
{
"filename": "running bot.swf/0006",
"frame": { "x": 0, "y": 0, "w": 54, "h": 64 },
"rotated": false,
"trimmed": true,
"spriteSourceSize": { "x": 1, "y": 0, "w": 54, "h": 64 },
"sourceSize": { "w": 56, "h": 64 }
},
{
"filename": "running bot.swf/0007",
"frame": { "x": 140, "y": 0, "w": 56, "h": 58 },
"rotated": false,
"trimmed": true,
"spriteSourceSize": { "x": 0, "y": 3, "w": 56, "h": 58 },
"sourceSize": { "w": 56, "h": 64 }
},
{
"filename": "running bot.swf/0008",
"frame": { "x": 34, "y": 188, "w": 50, "h": 60 },
"rotated": false,
"trimmed": true,
"spriteSourceSize": { "x": 3, "y": 2, "w": 50, "h": 60 },
"sourceSize": { "w": 56, "h": 64 }
},
{
"filename": "running bot.swf/0009",
"frame": { "x": 0, "y": 128, "w": 34, "h": 64 },
"rotated": false,
"trimmed": true,
"spriteSourceSize": { "x": 11, "y": 0, "w": 34, "h": 64 },
"sourceSize": { "w": 56, "h": 64 }
},
{
"filename": "running bot.swf/0010",
"frame": { "x": 84, "y": 188, "w": 56, "h": 58 },
"rotated": false,
"trimmed": true,
"spriteSourceSize": { "x": 0, "y": 3, "w": 56, "h": 58 },
"sourceSize": { "w": 56, "h": 64 }
}],
"meta": {
"app": "http://www.texturepacker.com",
"version": "1.0",
"image": "running_bot.png",
"format": "RGBA8888",
"size": { "w": 252, "h": 256 },
"scale": "0.2",
"smartupdate": "$TexturePacker:SmartUpdate:fb56f261b1eb04e3215824426595f64c$"
}
};
</script>
<?php
require('../foot.php');
?>

2
examples/animation/texture atlas.php → examples/animation/Animation from a texturePacker file.php
View file

@ -1,5 +1,5 @@
<?php
$title = "Animation from a Texture Atlas";
$title = "Animation from a Texture Atlas From TexturePacker";
require('../head.php');
?>

52
examples/animation/animation wraparound.php Normal file
View file

@ -0,0 +1,52 @@
<?php
$title = "Animation Wraparound";
require('../head.php');
?>
<script type="text/javascript">
var game = new Phaser.Game(800, 600, Phaser.AUTO, '', { preload: preload, create: create,update:update });
function preload() {
game.load.atlasJSONHash('bot', 'assets/sprites/running_bot.png', 'assets/sprites/running_bot.json');
}
var bot;
function create() {
// This sprite is using a texture atlas for all of its animation data
bot = game.add.sprite(200, 200, 'bot');
// Here we add a new animation called 'run'
// We haven't specified any frames because it's using every frame in the texture atlas
bot.animations.add('run');
// And this starts the animation playing by using its key ("run")
// 15 is the frame rate (15fps)
// true means it will loop when it finishes
bot.animations.play('run', 15, true);
}
function update() {
bot.x -= 2;
if (bot.x < -bot.width)
{
bot.x = game.world.width;
}
}
</script>
<?php
require('../foot.php');
?>

0
examples/assets/maps/cybernoid.png → examples/assets/maps/cybernoid.png.png
View file

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 4.7 KiB

After

Width:  |  Height:  |  Size: 4.7 KiB

2
examples/camera/follow styles.php
View file

@ -36,7 +36,7 @@
function create() {
//make the world larger than the actual canvas
game.world.setBounds(1400,1400);
game.world.setBounds(0,0,1400,1400);
for(var i=0,nb=10;i<nb;i++){

2
examples/camera/moving the camera.php
View file

@ -18,7 +18,7 @@
game.stage.backgroundColor = '#2d2d2d';
// Make our game world 2000x2000 pixels in size (the default is to match the game size)
game.world.setBounds(2000, 2000);
game.world.setBounds(0,0,2000, 2000);
for (var i = 0; i < 50; i++)
{

58
examples/camera/moving the game camera.php
View file

@ -1,58 +0,0 @@
<?php
$title = "Moving the game camera with the keyboard";
require('../head.php');
?>
<script type="text/javascript">
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.setBounds(2000,2000);
game.stage.backgroundColor = '#255d3b';
// adding the tilemap
game.add.tilemap(0, 150, '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');
?>

0
examples/groups/add to group 1.php → examples/groups/add to group after creation.php
View file

0
examples/groups/bring to top 2.php → examples/groups/bring a group to top.php
View file

0
examples/groups/bring to top.php → examples/groups/bring specific sprites to top.php
View file

0
examples/groups/add to group 2.php → examples/groups/create a sprite inside a group.php
View file

2
examples/input/cursor key movement.php
View file

@ -8,7 +8,7 @@
window.onload = function () {
var game = new Phaser.Game(800, 600, Phaser.CANVAS, '', { preload: preload, create: create, update: update, render : render });
// var game = new Phaser.Game(800, 600, Phaser.AUTO, '', { preload: preload, create: create, update: update, render: render });
function preload() {

0
examples/input/bring to top2.php → examples/input/drag several sprites.php
View file

2
examples/input/follow mouse.php
View file

@ -29,7 +29,7 @@
if (game.input.mousePointer.isDown)
{
// 400 is the speed it will move towards the mouse
game.physics.moveTowardsMouse(sprite, 400);
game.physics.moveToPointer(sprite, 400);
// if it's overlapping the mouse, don't move any more
if (Phaser.Rectangle.contains(sprite.body, game.input.x, game.input.y))

2
examples/input/bring to top.php → examples/loader/random images from loader.php
View file

@ -1,5 +1,5 @@
<?php
$title = "Test Title";
$title = "Retrieving images from the cache";
require('../head.php');
?>

4
examples/physics/group move towards object.php
View file

@ -1,5 +1,5 @@
<?php
$title = "Group move towards object";
$title = "Group moves towards object";
require('../head.php');
?>
@ -35,7 +35,7 @@
// First is the callback
// Second is the context in which the callback runs, in this case game.physics
// Third is the parameter the callback expects - it is always sent the Group child as the first parameter
balls.forEach(game.physics.moveTowardsMouse, game.physics, false, 200);
balls.forEach(game.physics.moveToPointer, game.physics, false, 200);
}
else
{

5
examples/sprites/sprite1.php → examples/sprites/add a sprite.php
View file

@ -7,7 +7,7 @@
var game = new Phaser.Game(800, 600, Phaser.AUTO, '', { preload: preload, create: create, update: update });
var game = new Phaser.Game(800, 600, Phaser.AUTO, '', { preload: preload, create: create });
function preload() {
game.load.image('mushroom', 'assets/sprites/mushroom2.png');
@ -19,9 +19,6 @@
}
function update() {
}
</script>

0
examples/sprites/sprite3.php → examples/sprites/add several sprites.php
View file

0
examples/sprites/sprite4.php → examples/sprites/move a sprite.php
View file

59
examples/sprites/several sprites using one texture file.php Normal file
View file

@ -0,0 +1,59 @@
<?php
$title = "Several sprites using only one texture file";
require('../head.php');
?>
<script type="text/javascript">
var game = new Phaser.Game(800, 600, Phaser.AUTO, '', { preload: preload, create: create});
function preload() {
// Texture Atlas Method 4
//
// We load a TexturePacker JSON file and image and show you how to make several unique sprites from the same file
game.load.atlas('atlas', 'assets/pics/texturepacker_test.png', 'assets/pics/texturepacker_test.json');
}
var chick;
var car;
var mech;
var robot;
var cop;
function create() {
game.stage.backgroundColor = 'rgb(40, 40, 40)';
chick = game.add.sprite(64, 64, 'atlas');
// You can set the frame based on the frame name (which TexturePacker usually sets to be the filename of the image itself)
chick.frameName = 'budbrain_chick.png';
// Or by setting the frame index
//chick.frame = 0;
cop = game.add.sprite(600, 64, 'atlas');
cop.frameName = 'ladycop.png';
robot = game.add.sprite(50, 300, 'atlas');
robot.frameName = 'robot.png';
car = game.add.sprite(100, 400, 'atlas');
car.frameName = 'supercars_parsec.png';
mech = game.add.sprite(250, 100, 'atlas');
mech.frameName = 'titan_mech.png';
}
</script>
<?php
require('../foot.php');
?>

0
examples/texture crop/crop3.php → examples/texture crop/crop and see part of an image.php
View file

0
examples/texture crop/crop2.php → examples/texture crop/crop and tween horizontally.php
View file

0
examples/texture crop/crop.php → examples/texture crop/crop and tween vertically.php
View file

0
examples/tile sprites/tilesprite1.php → examples/tile sprites/tilesprite inside crop rect.php
View file

0
examples/tile sprites/tilesprite2.php → examples/tile sprites/tilesprite.php
View file

48
examples/tweens/bounce.php Normal file
View file

@ -0,0 +1,48 @@
<?php
$title = "Bounce";
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('ball', 'assets/sprites/yellow_ball.png');
}
var ball;
function create() {
ball = game.add.sprite(300, 0, 'ball');
startBounceTween();
}
function startBounceTween() {
ball.y = 0;
var bounce=game.add.tween(ball);
bounce.to({ y: game.world.height-ball.height }, 1000 + Math.random() * 3000, Phaser.Easing.Bounce.In);
bounce.onComplete.add(startBounceTween, this);
bounce.start();
}
</script>
<?php
require('../foot.php');
?>

44
examples/tweens/bubbles.php Normal file
View file

@ -0,0 +1,44 @@
<?php
$title = "Primary bubble example";
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('space', 'assets/misc/starfield.png', 138, 15);
game.load.image('ball', 'assets/sprites/shinyball.png');
}
function create() {
game.add.tileSprite(0,0,800,600,'space');
for(var i=0;i<30;i++){
var sprite=game.add.sprite(game.world.randomX,game.world.randomY,'ball');
//Fade in a sprite :
game.add.tween(sprite)
.to({y : -50},Math.random()*4500,Phaser.Easing.Cubic.Out)
.start();
game.add.tween(sprite)
.to({alpha : 0},Math.random()*4500,Phaser.Easing.Quadratic.InOut)
.delay(Math.random()*500)
.start();
}
}
</script>
<?php
require('../foot.php');
?>

73
examples/tweens/combined tweens.php Normal file
View file

@ -0,0 +1,73 @@
<?php
$title = "Little animated story";
require('../head.php');
?>
<script type="text/javascript">
var game = new Phaser.Game(800, 600, Phaser.AUTO, '', {preload:preload,create: create });
function preload() {
game.load.spritesheet('pig', 'assets/sprites/invaderpig.png', 124, 104);
game.load.image('starfield', 'assets/misc/starfield.jpg');
game.load.image('mushroom', 'assets/sprites/mushroom2.png');
}
var mushroom,
pig,
pigArrives,
s;
function create() {
game.add.tileSprite(0,0,800,600,'starfield');
pig=game.add.sprite(-50,200,'pig',1);
pig.scale.setTo(0.5,0.5);
mushroom=game.add.sprite(380,200,'mushroom');
mushroom.anchor.setTo(0.5,0.5);
pigArrives= game.add.tween(pig);
pigArrives.to({x:150}, 1000, Phaser.Easing.Bounce.Out);
pigArrives.onComplete.add(firstTween, this);
pigArrives.start();
}
function firstTween() {
s=game.add.tween(mushroom.scale);
s.to({x : 2,y:2}, 1000, Phaser.Easing.Linear.None);
s.onComplete.addOnce(theEnd, this);
s.start();
}
function theEnd() {
e=game.add.tween(pig);
e.to({x:-150}, 1000, Phaser.Easing.Bounce.Out);
e.start();
}
</script>
<?php
require('../foot.php');
?>

42
examples/tweens/easing spritesheets.php Normal file
View file

@ -0,0 +1,42 @@
<?php
$title = "Easing using spritesheets";
require('../head.php');
?>
<script type="text/javascript">
var game = new Phaser.Game(800, 600, Phaser.AUTO, '', {preload:preload,create: create });
function preload() {
game.load.spritesheet('PHASER', 'assets/tests/tween/PHASER.png', 70, 90);
game.load.image('starfield', 'assets/misc/starfield.jpg');
}
function create() {
var item;
game.add.tileSprite(0,0,800,600,'starfield');
for (var i = 0; i < 6; i++) {
item = game.add.sprite(190 + 69 * i, -90, 'PHASER', i);
// Add a simple bounce tween to each character's position.
game.add.tween(item)
.to({y: 240}, 2400, Phaser.Easing.Bounce.Out, true, 1000 + 400 * i, false);
}
}
</script>
<?php
require('../foot.php');
?>

54
examples/tweens/easing.php Normal file
View file

@ -0,0 +1,54 @@
<?php
$title = "Using duration and scale";
require('../head.php');
?>
<script type="text/javascript">
var game = new Phaser.Game(800, 600, Phaser.AUTO, '', { preload: preload, create: create });
function preload() {
game.load.spritesheet('shadow', 'assets/tests/tween/shadow.png', 138, 15);
game.load.spritesheet('PHASER', 'assets/tests/tween/PHASER.png', 70, 90);
}
function create() {
var item,
shadow,
tween;
// Sets background color to white.
game.stage.backgroundColor = '#fff';
for (var i = 0; i < 6; i++) {
// Add a shadow to the location which characters will land on.
// And tween their size to make them look like a real shadow.
// Put the following code before items to give shadow a lower
// render order.
shadow = game.add.sprite(190 + 69 * i, 284, 'shadow');
// Set shadow's size 0 so that it'll be invisible at the beginning.
shadow.scale.setTo(0.0, 0.0);
// Also set the origin to the center since we don't want to
// see the shadow scale to the left top.
shadow.anchor.setTo(0.5, 0.5);
game.add.tween(shadow.scale)
.to({x: 1.0, y: 1.0}, 2400, Phaser.Easing.Bounce.Out);
// Add characters on top of shadows.
item = game.add.sprite(190 + 69 * i, -100, 'PHASER', i);
// Set origin to the center to make the rotation look better.
item.anchor.setTo(0.5, 0.5);
// Add a simple bounce tween to each character's position.
tween = game.add.tween(item)
.to({y: 240}, 2400, Phaser.Easing.Bounce.Out);
}
}
</script>
<?php
require('../foot.php');
?>

34
examples/tweens/fading in a sprite.php Normal file
View file

@ -0,0 +1,34 @@
<?php
$title = "Alpha fading a sprite";
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('space', 'assets/misc/starfield.png', 138, 15);
game.load.image('ball', 'assets/sprites/shinyball.png');
}
function create() {
game.add.tileSprite(0,0,800,600,'space');
var sprite=game.add.sprite(400,300,'ball');
//Fade in a sprite :
game.add.tween(sprite)
.to({alpha : 0},1500,Phaser.Easing.Linear.None)
.start();
}
</script>
<?php
require('../foot.php');
?>

40
examples/tweens/tweening several properties.php Normal file
View file

@ -0,0 +1,40 @@
<?php
$title = "Tweening several properties";
require('../head.php');
?>
<script type="text/javascript">
var game = new Phaser.Game(800, 600, Phaser.AUTO, '', {preload:preload,create: create });
function preload() {
game.load.spritesheet('shadow', 'assets/tests/tween/shadow.png', 68, 15);
game.load.spritesheet('PHASER', 'assets/tests/tween/PHASER.png', 70, 90);
}
function create() {
game.stage.backgroundColor='#ffffff';
var item;
for (var i = 0; i < 6; i++) {
item = game.add.sprite(190 + 69 * i, -100, 'PHASER', i);
item.anchor.setTo(0.5,0.5);
// Add a simple bounce tween to each character's position.
game.add.tween(item)
.to({y: 240}, 2400, Phaser.Easing.Bounce.Out, true, 1000 + 400 * i, false);
// Add another rotation tween to the same character.
game.add.tween(item)
.to({rotation: 360}, 2400, Phaser.Easing.Cubic.In, true, 1000 + 400 * i, false);
}
}
</script>
<?php
require('../foot.php');
?>