wassname/phaser
1
0
Fork 0
mirror of https://github.com/wassname/phaser.git synced 2026-08-20 12:40:12 +08:00
Code Issues Packages Projects Releases Wiki Activity

TileSprites are now much more tidy and can run from a frame in a texture. They can also be animated. New TileSprite.autoScroll function added.

Browse Source
This commit is contained in:
photonstorm
2014-02-13 23:13:10 +00:00
parent 5bbb7e390b
commit 35e4c03bad
34 changed files with 1116 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files
examples/_site/labs/bg.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.2 KiB

examples/_site/labs/labs.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 211 KiB

examples/_site/labs/logo.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 42 KiB

examples/wip/anim2.js
-73
View File
@@ -1,73 +0,0 @@
var game = new Phaser.Game(800, 600, Phaser.CANVAS, 'phaser-example', { preload: preload, create: create });
function preload() {
// game.load.atlasXML('seacreatures', 'assets/sprites/seacreatures.png', 'assets/sprites/seacreatures.xml');
game.load.atlas('seacreatures', 'assets/sprites/seacreatures_json.png', 'assets/sprites/seacreatures_json.json');
// Just a few images to use in our underwater scene
game.load.image('undersea', 'assets/pics/undersea.jpg');
game.load.image('coral', 'assets/pics/seabed.png');
}
var jellyfish;
var crab;
var greenJellyfish;
var octopus;
var purpleFish;
var seahorse;
var squid;
var stingray;
var flyingfish;
function create() {
game.add.sprite(0, 0, 'undersea');
jellyfish = game.add.sprite(670, 20, 'seacreatures', 'blueJellyfish0000');
// In the texture atlas the jellyfish uses the frame names blueJellyfish0000 to blueJellyfish0032
// So we can use the handy generateFrameNames function to create this for us.
jellyfish.animations.add('swim', Phaser.Animation.generateFrameNames('blueJellyfish', 0, 32, '', 4), 30, true);
jellyfish.animations.play('swim');
// Let's make some more sea creatures in the same way as the jellyfish
crab = game.add.sprite(550, 480, 'seacreatures');
crab.animations.add('swim', Phaser.Animation.generateFrameNames('crab1', 0, 25, '', 4), 30, true);
crab.animations.play('swim');
greenJellyfish = game.add.sprite(330, 100, 'seacreatures');
greenJellyfish.animations.add('swim', Phaser.Animation.generateFrameNames('greenJellyfish', 0, 39, '', 4), 30, true);
greenJellyfish.animations.play('swim');
octopus = game.add.sprite(160, 400, 'seacreatures');
octopus.animations.add('swim', Phaser.Animation.generateFrameNames('octopus', 0, 24, '', 4), 30, true);
octopus.animations.play('swim');
purpleFish = game.add.sprite(800, 413, 'seacreatures');
purpleFish.animations.add('swim', Phaser.Animation.generateFrameNames('purpleFish', 0, 20, '', 4), 30, true);
purpleFish.animations.play('swim');
seahorse = game.add.sprite(491, 40, 'seacreatures');
seahorse.animations.add('swim', Phaser.Animation.generateFrameNames('seahorse', 0, 5, '', 4), 30, true);
seahorse.animations.play('swim');
squid = game.add.sprite(610, 215, 'seacreatures', 'squid0000');
stingray = game.add.sprite(80, 190, 'seacreatures');
stingray.animations.add('swim', Phaser.Animation.generateFrameNames('stingray', 0, 23, '', 4), 30, true);
stingray.animations.play('swim');
flyingfish = game.add.sprite(60, 40, 'seacreatures', 'flyingFish0000');
game.add.sprite(0, 466, 'coral');
game.add.tween(purpleFish).to({ x: -200 }, 7500, Phaser.Easing.Quadratic.InOut, true, 0, 1000, false);
game.add.tween(octopus).to({ y: 530 }, 2000, Phaser.Easing.Quadratic.InOut, true, 0, 1000, true);
game.add.tween(greenJellyfish).to({ y: 250 }, 4000, Phaser.Easing.Quadratic.InOut, true, 0, 1000, true);
game.add.tween(jellyfish).to({ y: 100 }, 8000, Phaser.Easing.Quadratic.InOut, true, 0, 1000, true);
}
examples/wip/animated tilesprite.js
+75
View File
@@ -0,0 +1,75 @@
var game = new Phaser.Game(800, 600, Phaser.CANVAS, 'phaser-example', { preload: preload, create: create, update: update, render: render });
var tilesprite;
var cursors;
var count = 0;
function preload() {
game.load.image('starfield', 'assets/misc/starfield.jpg');
game.load.spritesheet('mummy', 'assets/sprites/metalslug_mummy37x45.png', 37, 45, 18);
game.load.atlas('seacreatures', 'assets/sprites/seacreatures_json.png', 'assets/sprites/seacreatures_json.json');
}
var sprite;
function create() {
// sprite = game.add.tileSprite(0, 0, 800, 600, 'starfield');
// sprite = game.add.tileSprite(100, 100, 400, 300, 'starfield');
// sprite = game.add.tileSprite(0, 0, 800, 600, 'mummy', 0);
// sprite.animations.add('walk');
// sprite.animations.play('walk', 20, true);
// x = game.add.sprite(0, 0, 'mummy');
// x.animations.add('walk');
// x.animations.play('walk', 20, true);
sprite = game.add.tileSprite(0, 0, 800, 600, 'seacreatures', 'octopus0000');
sprite.animations.add('swim', Phaser.Animation.generateFrameNames('octopus', 0, 24, '', 4), 30, true);
sprite.animations.play('swim');
cursors = game.input.keyboard.createCursorKeys();
}
function update() {
count += 0.005
sprite.tileScale.x = 2 + Math.sin(count);
sprite.tileScale.y = 2 + Math.cos(count);
sprite.tilePosition.x += 1;
sprite.tilePosition.y += 1;
if (cursors.left.isDown)
{
sprite.tilePosition.x += 4;
}
else if (cursors.right.isDown)
{
sprite.tilePosition.x -= 4;
}
if (cursors.up.isDown)
{
sprite.tilePosition.y += 4;
}
else if (cursors.down.isDown)
{
sprite.tilePosition.y -= 4;
}
}
function render() {
// game.debug.renderText(sprite.frame, 32, 32);
}
examples/wip/autoscroll.js
+33
View File
@@ -0,0 +1,33 @@
var game = new Phaser.Game(800, 600, Phaser.AUTO, 'phaser-example', { preload: preload, create: create, update: update, render: render });
var tilesprite;
var cursors;
var count = 0;
function preload() {
game.load.image('starfield', 'assets/misc/starfield.jpg');
game.load.spritesheet('mummy', 'assets/sprites/metalslug_mummy37x45.png', 37, 45, 18);
game.load.atlas('seacreatures', 'assets/sprites/seacreatures_json.png', 'assets/sprites/seacreatures_json.json');
}
var sprite;
function create() {
sprite = game.add.tileSprite(0, 0, 800, 600, 'starfield');
sprite.autoScroll(0, 200);
}
function update() {
}
function render() {
// game.debug.renderText(sprite.frame, 32, 32);
}
examples/wip/index.php
+1 -1
View File
@@ -32,7 +32,7 @@
function dirToArray($dir) {
$ignore = array('.', '..', '_site', 'assets', 'states', 'book', 'filters', 'misc');
$ignore = array('.', '..', '_site', 'assets', 'gfx', 'states', 'book', 'filters', 'misc');
$result = array();
$root = scandir($dir);
$dirs = array_diff($root, $ignore);
examples/wip/tilesprite.js
+25 -7
View File
@@ -1,5 +1,5 @@
var game = new Phaser.Game(800, 600, Phaser.AUTO, 'phaser-example', { preload: preload, create: create, update: update });
var game = new Phaser.Game(800, 600, Phaser.CANVAS, 'phaser-example', { preload: preload, create: create, update: update, render: render });
var tilesprite;
var cursors;
@@ -7,14 +7,24 @@ var cursors;
function preload() {
game.load.image('starfield', 'assets/misc/starfield.jpg');
game.load.spritesheet('mummy', 'assets/sprites/metalslug_mummy37x45.png', 37, 45, 18);
game.load.atlas('seacreatures', 'assets/sprites/seacreatures_json.png', 'assets/sprites/seacreatures_json.json');
}
var sprite;
function create() {
// tilesprite = game.add.tileSprite(0, 0, 800, 600, 'starfield');
// sprite = game.add.tileSprite(0, 0, 800, 600, 'starfield');
tilesprite = game.add.tileSprite(100, 100, 400, 300, 'starfield');
// sprite = game.add.tileSprite(100, 100, 400, 300, 'starfield');
sprite = game.add.tileSprite(100, 100, 400, 300, 'mummy');
sprite.animations.add('walk');
sprite.animations.play('walk', 20, true);
cursors = game.input.keyboard.createCursorKeys();
@@ -24,20 +34,28 @@ function update() {
if (cursors.left.isDown)
{
tilesprite.tilePosition.x += 8;
sprite.tilePosition.x += 8;
sprite.x -= 4;
}
else if (cursors.right.isDown)
{
tilesprite.tilePosition.x -= 8;
sprite.tilePosition.x -= 8;
sprite.x += 4;
}
if (cursors.up.isDown)
{
tilesprite.tilePosition.y += 8;
sprite.tilePosition.y += 8;
}
else if (cursors.down.isDown)
{
tilesprite.tilePosition.y -= 8;
sprite.tilePosition.y -= 8;
}
}
function render() {
game.debug.renderText(sprite.frame, 32, 32);
}