mirror of
https://github.com/wassname/phaser.git
synced 2026-07-21 12:40:56 +08:00
Testing
This commit is contained in:
Webeled
@@ -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');
|
||||
?>
|
||||
@@ -0,0 +1,38 @@
|
||||
<?php
|
||||
$title = "Animation from a Texture Atlas From TexturePacker";
|
||||
require('../head.php');
|
||||
?>
|
||||
|
||||
<script type="text/javascript">
|
||||
|
||||
|
||||
|
||||
var game = new Phaser.Game(800, 600, Phaser.CANVAS, '', { preload: preload, create: create });
|
||||
|
||||
function preload() {
|
||||
game.load.atlasJSONHash('bot', 'assets/sprites/running_bot.png', 'assets/sprites/running_bot.json');
|
||||
}
|
||||
|
||||
function create() {
|
||||
|
||||
// This sprite is using a texture atlas for all of its animation data
|
||||
var 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);
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
<?php
|
||||
require('../foot.php');
|
||||
?>
|
||||
@@ -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');
|
||||
?>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 4.7 KiB |
@@ -0,0 +1,63 @@
|
||||
<?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');
|
||||
?>
|
||||
|
||||
@@ -0,0 +1,101 @@
|
||||
<?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');
|
||||
?>
|
||||
|
||||
@@ -0,0 +1,46 @@
|
||||
|
||||
<?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);
|
||||
}
|
||||
function bringMeToTop(btn) {
|
||||
container.bringToTop(btn);
|
||||
}
|
||||
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
<?php
|
||||
require('../foot.php');
|
||||
?>
|
||||
@@ -0,0 +1,56 @@
|
||||
<?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');
|
||||
?>
|
||||
|
||||
@@ -0,0 +1,51 @@
|
||||
<?php
|
||||
$title = "Test Title";
|
||||
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');
|
||||
game.load.image('atari4', 'assets/sprites/atari800.png');
|
||||
game.load.image('sonic', 'assets/sprites/sonic_havok_sanity.png');
|
||||
game.load.image('duck', 'assets/sprites/darkwing_crazy.png');
|
||||
game.load.image('firstaid', 'assets/sprites/firstaid.png');
|
||||
game.load.image('diamond', 'assets/sprites/diamond.png');
|
||||
game.load.image('mushroom', 'assets/sprites/mushroom2.png');
|
||||
|
||||
}
|
||||
|
||||
function create() {
|
||||
|
||||
// This returns an array of all the image keys in the cache
|
||||
var images = game.cache.getImageKeys();
|
||||
|
||||
var test = 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 < 20; i++)
|
||||
{
|
||||
var tempSprite = test.create(game.world.randomX, game.world.randomY, game.rnd.pick(images));
|
||||
tempSprite.inputEnabled = true;
|
||||
tempSprite.input.enableDrag(false, true);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
function render() {
|
||||
game.debug.renderInputInfo(32, 32);
|
||||
}
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
<?php
|
||||
require('../foot.php');
|
||||
?>
|
||||
@@ -0,0 +1,50 @@
|
||||
<?php
|
||||
$title = "Retrieving images from the cache";
|
||||
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');
|
||||
game.load.image('atari4', 'assets/sprites/atari800.png');
|
||||
game.load.image('sonic', 'assets/sprites/sonic_havok_sanity.png');
|
||||
game.load.image('duck', 'assets/sprites/darkwing_crazy.png');
|
||||
game.load.image('firstaid', 'assets/sprites/firstaid.png');
|
||||
game.load.image('diamond', 'assets/sprites/diamond.png');
|
||||
game.load.image('mushroom', 'assets/sprites/mushroom2.png');
|
||||
|
||||
}
|
||||
|
||||
function create() {
|
||||
|
||||
// This returns an array of all the image keys in the cache
|
||||
var images = game.cache.getImageKeys();
|
||||
|
||||
// Now let's create some random sprites and enable them all for drag and 'bring to top'
|
||||
for (var i = 0; i < 20; i++)
|
||||
{
|
||||
var img = game.rnd.pick(images);
|
||||
var tempSprite = game.add.sprite(game.world.randomX, game.world.randomY, img);
|
||||
tempSprite.inputEnabled = true;
|
||||
tempSprite.input.enableDrag(false, true);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
function render() {
|
||||
game.debug.renderInputInfo(32, 32);
|
||||
}
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
<?php
|
||||
require('../foot.php');
|
||||
?>
|
||||
@@ -0,0 +1,28 @@
|
||||
<?php
|
||||
$title = "Display 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('mushroom', 'assets/sprites/mushroom2.png');
|
||||
}
|
||||
|
||||
function create() {
|
||||
|
||||
var test = game.add.sprite(200, 200, 'mushroom');
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
<?php
|
||||
require('../foot.php');
|
||||
?>
|
||||
@@ -0,0 +1,61 @@
|
||||
<?php
|
||||
$title = "Sprite Sheet and Scale";
|
||||
require('../head.php');
|
||||
?>
|
||||
|
||||
<script type="text/javascript">
|
||||
|
||||
|
||||
|
||||
var game = new Phaser.Game(800, 600, Phaser.AUTO, '', { preload: preload, create: create, update: update }, false, false);
|
||||
|
||||
var timer = 0;
|
||||
var total = 0;
|
||||
|
||||
function preload() {
|
||||
// 37x45 is the size of each frame
|
||||
// There are 18 frames in the PNG - you can leave this value blank if the frames fill up the entire PNG, but in this case there are some
|
||||
// blank frames at the end, so we tell the loader how many to load
|
||||
game.load.spritesheet('mummy', 'assets/sprites/metalslug_mummy37x45.png', 37, 45, 18);
|
||||
}
|
||||
|
||||
function create() {
|
||||
|
||||
releaseMummy();
|
||||
|
||||
}
|
||||
|
||||
function releaseMummy() {
|
||||
|
||||
var mummy = game.add.sprite(-(Math.random() * 800), game.world.randomY, 'mummy');
|
||||
|
||||
mummy.scale.setTo(2, 2);
|
||||
// If you prefer to work in degrees rather than radians then you can use Phaser.Sprite.angle
|
||||
// otherwise use Phaser.Sprite.rotation
|
||||
mummy.angle = game.rnd.angle();
|
||||
mummy.animations.add('walk');
|
||||
mummy.animations.play('walk', 50, true);
|
||||
|
||||
game.add.tween(mummy).to({ x: game.width + (1600 + mummy.x) }, 20000, Phaser.Easing.Linear.None, true);
|
||||
|
||||
total++;
|
||||
timer = game.time.now + 100;
|
||||
|
||||
}
|
||||
|
||||
function update() {
|
||||
|
||||
if (total < 200 && game.time.now > timer)
|
||||
{
|
||||
releaseMummy();
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
<?php
|
||||
require('../foot.php');
|
||||
?>
|
||||
@@ -0,0 +1,64 @@
|
||||
<?php
|
||||
$title = "Sprite Animation";
|
||||
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.atlasJSONHash('bot', 'assets/sprites/running_bot.png', 'assets/sprites/running_bot.json');
|
||||
}
|
||||
|
||||
var s;
|
||||
|
||||
function create() {
|
||||
|
||||
s = game.add.sprite(game.world.centerX, game.world.centerY, 'bot');
|
||||
// s.anchor.setTo(0.5, 0.5);
|
||||
s.scale.setTo(2, 2);
|
||||
|
||||
s.animations.add('run');
|
||||
s.animations.play('run', 10, true);
|
||||
|
||||
}
|
||||
|
||||
function update() {
|
||||
|
||||
if (game.input.keyboard.isDown(Phaser.Keyboard.LEFT))
|
||||
{
|
||||
s.x -= 4;
|
||||
}
|
||||
else if (game.input.keyboard.isDown(Phaser.Keyboard.RIGHT))
|
||||
{
|
||||
s.x += 4;
|
||||
}
|
||||
|
||||
if (game.input.keyboard.isDown(Phaser.Keyboard.UP))
|
||||
{
|
||||
s.y -= 4;
|
||||
}
|
||||
else if (game.input.keyboard.isDown(Phaser.Keyboard.DOWN))
|
||||
{
|
||||
s.y += 4;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
function render() {
|
||||
|
||||
game.debug.renderSpriteCorners(s, false, false);
|
||||
game.debug.renderSpriteInfo(s, 20, 32);
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
<?php
|
||||
require('../foot.php');
|
||||
?>
|
||||
@@ -0,0 +1,59 @@
|
||||
<?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 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,0 +1,59 @@
|
||||
<?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 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,0 +1,44 @@
|
||||
<?php
|
||||
$title = "Texture Crop";
|
||||
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.image('trsi', 'assets/pics/trsipic1_lazur.jpg');
|
||||
}
|
||||
|
||||
var r;
|
||||
var pic;
|
||||
|
||||
function create() {
|
||||
|
||||
pic = game.add.sprite(0, 0, 'trsi');
|
||||
|
||||
r = new Phaser.Rectangle(0, 0, 200, 200);
|
||||
|
||||
}
|
||||
|
||||
function update() {
|
||||
|
||||
r.x = game.input.x;
|
||||
r.y = game.input.y;
|
||||
pic.x = game.input.x;
|
||||
pic.y = game.input.y;
|
||||
|
||||
// Apply the new crop Rectangle to the sprite
|
||||
pic.crop = r;
|
||||
|
||||
}
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
<?php
|
||||
require('../foot.php');
|
||||
?>
|
||||
@@ -0,0 +1,42 @@
|
||||
<?php
|
||||
$title = "Texture Crop";
|
||||
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.image('trsi', 'assets/pics/trsipic1_lazur.jpg');
|
||||
}
|
||||
|
||||
var r;
|
||||
var pic;
|
||||
|
||||
function create() {
|
||||
|
||||
pic = game.add.sprite(game.world.centerX, 550, 'trsi');
|
||||
pic.anchor.setTo(0.5, 1);
|
||||
|
||||
r = new Phaser.Rectangle(0, 0, 200, pic.height);
|
||||
|
||||
game.add.tween(r).to( { x: pic.width - 200 }, 3000, Phaser.Easing.Bounce.Out, true, 0, 1000, true);
|
||||
|
||||
}
|
||||
|
||||
function update() {
|
||||
|
||||
// Apply the new crop Rectangle to the sprite
|
||||
pic.crop = r;
|
||||
|
||||
}
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
<?php
|
||||
require('../foot.php');
|
||||
?>
|
||||
@@ -0,0 +1,42 @@
|
||||
<?php
|
||||
$title = "Texture Crop";
|
||||
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.image('trsi', 'assets/pics/trsipic1_lazur.jpg');
|
||||
}
|
||||
|
||||
var r;
|
||||
var pic;
|
||||
|
||||
function create() {
|
||||
|
||||
pic = game.add.sprite(game.world.centerX, 550, 'trsi');
|
||||
pic.anchor.setTo(0.5, 1);
|
||||
|
||||
r = new Phaser.Rectangle(0, 0, pic.width, 0);
|
||||
|
||||
game.add.tween(r).to( { height: pic.height }, 3000, Phaser.Easing.Bounce.Out, true, 0, 1000, true);
|
||||
|
||||
}
|
||||
|
||||
function update() {
|
||||
|
||||
// Apply the new crop Rectangle to the sprite
|
||||
pic.crop = r;
|
||||
|
||||
}
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
<?php
|
||||
require('../foot.php');
|
||||
?>
|
||||
@@ -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');
|
||||
?>
|
||||
@@ -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');
|
||||
?>
|
||||
@@ -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');
|
||||
?>
|
||||
@@ -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');
|
||||
?>
|
||||
@@ -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');
|
||||
?>
|
||||
@@ -0,0 +1,34 @@
|
||||
<?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.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');
|
||||
?>
|
||||
@@ -0,0 +1,40 @@
|
||||
<?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.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');
|
||||
?>
|
||||
Reference in New Issue
Block a user