diff --git a/Tests/assets/buttons/arrow-button.png b/Tests/assets/buttons/arrow-button.png new file mode 100644 index 00000000..48dedb62 Binary files /dev/null and b/Tests/assets/buttons/arrow-button.png differ diff --git a/Tests/assets/buttons/baddie-buttons.png b/Tests/assets/buttons/baddie-buttons.png index a16940fc..27827418 100644 Binary files a/Tests/assets/buttons/baddie-buttons.png and b/Tests/assets/buttons/baddie-buttons.png differ diff --git a/Tests/assets/buttons/follow-style-button.png b/Tests/assets/buttons/follow-style-button.png index 74a0481c..e6ba5562 100644 Binary files a/Tests/assets/buttons/follow-style-button.png and b/Tests/assets/buttons/follow-style-button.png differ diff --git a/Tests/assets/buttons/number-buttons-90x90.png b/Tests/assets/buttons/number-buttons-90x90.png new file mode 100644 index 00000000..f4179877 Binary files /dev/null and b/Tests/assets/buttons/number-buttons-90x90.png differ diff --git a/Tests/assets/buttons/number-buttons.png b/Tests/assets/buttons/number-buttons.png new file mode 100644 index 00000000..8cf84b8f Binary files /dev/null and b/Tests/assets/buttons/number-buttons.png differ diff --git a/Tests/assets/buttons/revive-button.png b/Tests/assets/buttons/revive-button.png new file mode 100644 index 00000000..13ce5d7a Binary files /dev/null and b/Tests/assets/buttons/revive-button.png differ diff --git a/Tests/assets/buttons/spacebar.png b/Tests/assets/buttons/spacebar.png new file mode 100644 index 00000000..8819a73f Binary files /dev/null and b/Tests/assets/buttons/spacebar.png differ diff --git a/Tests/assets/sprites/robot/arm-l.png b/Tests/assets/sprites/robot/arm-l.png new file mode 100644 index 00000000..cadfb489 Binary files /dev/null and b/Tests/assets/sprites/robot/arm-l.png differ diff --git a/Tests/assets/sprites/robot/arm-r.png b/Tests/assets/sprites/robot/arm-r.png new file mode 100644 index 00000000..a10b3351 Binary files /dev/null and b/Tests/assets/sprites/robot/arm-r.png differ diff --git a/Tests/assets/sprites/robot/body.png b/Tests/assets/sprites/robot/body.png new file mode 100644 index 00000000..527a84b9 Binary files /dev/null and b/Tests/assets/sprites/robot/body.png differ diff --git a/Tests/assets/sprites/robot/eye.png b/Tests/assets/sprites/robot/eye.png new file mode 100644 index 00000000..d872e676 Binary files /dev/null and b/Tests/assets/sprites/robot/eye.png differ diff --git a/Tests/assets/sprites/robot/leg-l.png b/Tests/assets/sprites/robot/leg-l.png new file mode 100644 index 00000000..b1c8529e Binary files /dev/null and b/Tests/assets/sprites/robot/leg-l.png differ diff --git a/Tests/assets/sprites/robot/leg-r.png b/Tests/assets/sprites/robot/leg-r.png new file mode 100644 index 00000000..10f0d0bb Binary files /dev/null and b/Tests/assets/sprites/robot/leg-r.png differ diff --git a/Tests/assets/sprites/space-baddie-purple.png b/Tests/assets/sprites/space-baddie-purple.png new file mode 100644 index 00000000..4de7930c Binary files /dev/null and b/Tests/assets/sprites/space-baddie-purple.png differ diff --git a/Tests/assets/sprites/x.png b/Tests/assets/sprites/x.png new file mode 100644 index 00000000..b681f40d Binary files /dev/null and b/Tests/assets/sprites/x.png differ diff --git a/Tests/assets/tests/blue-circle.png b/Tests/assets/tests/blue-circle.png index 3599ff19..8ce4512c 100644 Binary files a/Tests/assets/tests/blue-circle.png and b/Tests/assets/tests/blue-circle.png differ diff --git a/Tests/assets/tests/cloud-big-2x.png b/Tests/assets/tests/cloud-big-2x.png index bdc5d1ea..e3ec533f 100644 Binary files a/Tests/assets/tests/cloud-big-2x.png and b/Tests/assets/tests/cloud-big-2x.png differ diff --git a/Tests/assets/tests/cloud-big.png b/Tests/assets/tests/cloud-big.png index b8498800..46b13333 100644 Binary files a/Tests/assets/tests/cloud-big.png and b/Tests/assets/tests/cloud-big.png differ diff --git a/Tests/assets/tests/cloud-narrow-2x.png b/Tests/assets/tests/cloud-narrow-2x.png index 3d2a65e8..1e0da630 100644 Binary files a/Tests/assets/tests/cloud-narrow-2x.png and b/Tests/assets/tests/cloud-narrow-2x.png differ diff --git a/Tests/assets/tests/cloud-narrow.png b/Tests/assets/tests/cloud-narrow.png index b2f11230..fb0428ed 100644 Binary files a/Tests/assets/tests/cloud-narrow.png and b/Tests/assets/tests/cloud-narrow.png differ diff --git a/Tests/assets/tests/cloud-small-2x.png b/Tests/assets/tests/cloud-small-2x.png index b2fe625b..5915f96c 100644 Binary files a/Tests/assets/tests/cloud-small-2x.png and b/Tests/assets/tests/cloud-small-2x.png differ diff --git a/Tests/assets/tests/cloud-small.png b/Tests/assets/tests/cloud-small.png index 14f5f8ae..d0466390 100644 Binary files a/Tests/assets/tests/cloud-small.png and b/Tests/assets/tests/cloud-small.png differ diff --git a/Tests/assets/tests/ground-2x.png b/Tests/assets/tests/ground-2x.png index 9588e6b2..981a78b8 100644 Binary files a/Tests/assets/tests/ground-2x.png and b/Tests/assets/tests/ground-2x.png differ diff --git a/Tests/assets/tests/ground.png b/Tests/assets/tests/ground.png index c4e678ec..52debe60 100644 Binary files a/Tests/assets/tests/ground.png and b/Tests/assets/tests/ground.png differ diff --git a/Tests/assets/tests/magenta-circle.png b/Tests/assets/tests/magenta-circle.png index f94db91c..e56b4b8d 100644 Binary files a/Tests/assets/tests/magenta-circle.png and b/Tests/assets/tests/magenta-circle.png differ diff --git a/Tests/assets/tests/radar-surface.png b/Tests/assets/tests/radar-surface.png index 9df7ed5f..68625919 100644 Binary files a/Tests/assets/tests/radar-surface.png and b/Tests/assets/tests/radar-surface.png differ diff --git a/Tests/assets/tests/river-2x.png b/Tests/assets/tests/river-2x.png index abed28ac..1e287c23 100644 Binary files a/Tests/assets/tests/river-2x.png and b/Tests/assets/tests/river-2x.png differ diff --git a/Tests/assets/tests/river.png b/Tests/assets/tests/river.png index a9d366b2..a7468000 100644 Binary files a/Tests/assets/tests/river.png and b/Tests/assets/tests/river.png differ diff --git a/Tests/assets/tests/sky-2x.png b/Tests/assets/tests/sky-2x.png index d7aae77d..a86d96b0 100644 Binary files a/Tests/assets/tests/sky-2x.png and b/Tests/assets/tests/sky-2x.png differ diff --git a/Tests/assets/tests/sky.png b/Tests/assets/tests/sky.png index b187718d..831017cc 100644 Binary files a/Tests/assets/tests/sky.png and b/Tests/assets/tests/sky.png differ diff --git a/Tests/assets/tests/tween/PHASER.png b/Tests/assets/tests/tween/PHASER.png new file mode 100644 index 00000000..09178f50 Binary files /dev/null and b/Tests/assets/tests/tween/PHASER.png differ diff --git a/Tests/assets/tests/tween/ribbon.png b/Tests/assets/tests/tween/ribbon.png new file mode 100644 index 00000000..674a55ae Binary files /dev/null and b/Tests/assets/tests/tween/ribbon.png differ diff --git a/Tests/assets/tests/tween/shadow.png b/Tests/assets/tests/tween/shadow.png new file mode 100644 index 00000000..60096788 Binary files /dev/null and b/Tests/assets/tests/tween/shadow.png differ diff --git a/Tests/assets/tests/yellow-circle.png b/Tests/assets/tests/yellow-circle.png index 5f7ad7b6..484ec7fd 100644 Binary files a/Tests/assets/tests/yellow-circle.png and b/Tests/assets/tests/yellow-circle.png differ diff --git a/Tests/assets/tiles/ground-tile.png b/Tests/assets/tiles/ground-tile.png index 6455834b..6498a440 100644 Binary files a/Tests/assets/tiles/ground-tile.png and b/Tests/assets/tiles/ground-tile.png differ diff --git a/Tests/cameras/camera fade.js b/Tests/cameras/camera fade.js deleted file mode 100644 index b86cbcc2..00000000 --- a/Tests/cameras/camera fade.js +++ /dev/null @@ -1,42 +0,0 @@ -/// -(function () { - var game = new Phaser.Game(this, 'game', 800, 600, init, create, update, render); - - var circle1, circle2, circle3; - var fx; - - function init() { - game.world.setSize(800, 600, true); - game.load.image('blue', 'assets/tests/blue-circle.png'); - game.load.image('yellow', 'assets/tests/yellow-circle.png'); - game.load.image('magenta', 'assets/tests/magenta-circle.png'); - - game.load.start(); - } - function create() { - circle1 = game.add.sprite(114, 34, 'blue'); - circle2 = game.add.sprite(426, 86, 'yellow'); - circle3 = game.add.sprite(221, 318, 'magenta'); - - circle1.input.start(0, false, true); - circle1.events.onInputUp.add(fade1, this); - - fx = game.camera.fx.add(Phaser.FX.Camera.Fade); - } - function update() { - } - function render() { - game.camera.fx.render(game.camera, - game.camera.x, game.camera.y, - game.camera.width, game.camera.height); - game.camera.fx.postRender(game.camera, - game.camera.x, game.camera.y, - game.camera.width, game.camera.height); - } - function fade1(pointer) { - console.log('pressed'); - fx.start(0.05, 0.5, function() { - console.log('fin'); - }); - } -})(); diff --git a/Tests/cameras/camera fx 1.js b/Tests/cameras/camera fx 1.js new file mode 100644 index 00000000..7b8cd30f --- /dev/null +++ b/Tests/cameras/camera fx 1.js @@ -0,0 +1,43 @@ +/// +(function () { + var game = new Phaser.Game(this, 'game', 800, 600, init, create, null, render); + + var btn1, btn2, btn3; + var fx; + + function init() { + game.world.setSize(800, 600, true); + game.load.image('blue', 'assets/tests/blue-circle.png'); + game.load.image('yellow', 'assets/tests/yellow-circle.png'); + game.load.image('magenta', 'assets/tests/magenta-circle.png'); + + game.load.start(); + } + function create() { + btn1 = game.add.button(114, 34, 'blue', simpleFade, this); + btn2 = game.add.button(426, 86, 'yellow', forceFade, this); + btn3 = game.add.button(221, 318, 'magenta', fadeWithCallback, this); + + fx = game.camera.fx.add(Phaser.FX.Camera.Fade); + } + function render() { + Phaser.DebugUtils.context.fillStyle = '#fff'; + Phaser.DebugUtils.context.fillText('Press to fade.', 114 + 90, 34 + 130); + Phaser.DebugUtils.context.fillText('Force to fade every time you press it.', 426 + 20, 86 + 130); + Phaser.DebugUtils.context.fillText('Popup a window when fade finished.', 221 + 30, 318 + 130); + } + function simpleFade() { + // Simply fade to black in 0.5 seconds. + fx.start(0x330033, 0.5); + } + function forceFade() { + // Force restart fade effect each time you pressed the button. + fx.start(0x003333, 0.5, null, true); + } + function fadeWithCallback() { + // Popup a alert window when fade finished. + fx.start(0x333300, 0.5, function() { + alert('Fade finished!'); + }); + } +})(); diff --git a/Tests/cameras/camera fx 2.js b/Tests/cameras/camera fx 2.js new file mode 100644 index 00000000..f700830e --- /dev/null +++ b/Tests/cameras/camera fx 2.js @@ -0,0 +1,44 @@ +/// +(function () { + var game = new Phaser.Game(this, 'game', 800, 600, init, create, null, render); + + var btn1, btn2, btn3; + var fx; + + function init() { + game.world.setSize(800, 600, true); + game.load.image('blue', 'assets/tests/blue-circle.png'); + game.load.image('yellow', 'assets/tests/yellow-circle.png'); + game.load.image('magenta', 'assets/tests/magenta-circle.png'); + + game.load.start(); + } + function create() { + btn1 = game.add.button(114, 34, 'blue', simpleFlash, this); + btn2 = game.add.button(426, 86, 'yellow', forceFlash, this); + btn3 = game.add.button(221, 318, 'magenta', flashWithCallback, this); + + // Usage of flash fx is the same as fade. + fx = game.camera.fx.add(Phaser.FX.Camera.Flash); + } + function render() { + Phaser.DebugUtils.context.fillStyle = '#fff'; + Phaser.DebugUtils.context.fillText('Press to flash.', 114 + 90, 34 + 130); + Phaser.DebugUtils.context.fillText('Force to flash every time you press it.', 426 + 20, 86 + 130); + Phaser.DebugUtils.context.fillText('Popup a window when flash finished.', 221 + 30, 318 + 130); + } + function simpleFlash() { + // Simply flash to black in 0.5 seconds. + fx.start(0x330033, 0.5); + } + function forceFlash() { + // Force restart flash effect each time you pressed the button. + fx.start(0x003333, 0.5, null, true); + } + function flashWithCallback() { + // Popup a alert window when flash finished. + fx.start(0x333300, 0.5, function() { + alert('Flash finished!'); + }); + } +})(); diff --git a/Tests/cameras/camera fx 3.js b/Tests/cameras/camera fx 3.js new file mode 100644 index 00000000..b15a0652 --- /dev/null +++ b/Tests/cameras/camera fx 3.js @@ -0,0 +1,44 @@ +/// +(function () { + var game = new Phaser.Game(this, 'game', 800, 600, init, create, null, render); + + var btn1, btn2, btn3; + var fx; + + function init() { + game.world.setSize(800, 600, true); + game.load.image('blue', 'assets/tests/blue-circle.png'); + game.load.image('yellow', 'assets/tests/yellow-circle.png'); + game.load.image('magenta', 'assets/tests/magenta-circle.png'); + + game.load.start(); + } + function create() { + btn1 = game.add.button(114, 34, 'blue', simpleShake, this); + btn2 = game.add.button(426, 86, 'yellow', forceShake, this); + btn3 = game.add.button(221, 318, 'magenta', shakeWithCallback, this); + + // Usage of shake fx is the same as fade and flash. + fx = game.camera.fx.add(Phaser.FX.Camera.Shake); + } + function render() { + Phaser.DebugUtils.context.fillStyle = '#fff'; + Phaser.DebugUtils.context.fillText('Press to shake.', 114 + 90, 34 + 130); + Phaser.DebugUtils.context.fillText('Force to shake every time you press it.', 426 + 20, 86 + 130); + Phaser.DebugUtils.context.fillText('Popup a window when shake finished.', 221 + 30, 318 + 130); + } + function simpleShake() { + // Simply shake to black in 0.5 seconds. + fx.start(0x330033, 0.5); + } + function forceShake() { + // Force restart shake effect each time you pressed the button. + fx.start(0x003333, 0.5, null, true); + } + function shakeWithCallback() { + // Popup a alert window when shake finished. + fx.start(0x333300, 0.5, function() { + alert('Shake finished!'); + }); + } +})(); diff --git a/Tests/cameras/camera scale.js b/Tests/cameras/camera scale.js new file mode 100644 index 00000000..dd132d85 --- /dev/null +++ b/Tests/cameras/camera scale.js @@ -0,0 +1,72 @@ +/// +(function () { + var game = new Phaser.Game(this, 'game', 800, 600, init, create, update, render); + + var zombieCamera; + + var zombie; + var walkSpeed = 2, + direction = 1; + + function init() { + game.world.setSize(1280, 600, true); + 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.spritesheet('zombie', 'assets/sprites/metalslug_monster39x40.png', 39, 40); + + game.load.start(); + } + function create() { + // Add background images. + game.add.sprite(0, 0, 'sky'); + game.add.sprite(0, 360, 'ground'); + game.add.sprite(0, 400, 'river'); + + // Create zombie spirte + zombie = game.add.sprite(480, 336, 'zombie'); + zombie.animations.add('walk', null, 30, true); + zombie.animations.play('walk'); + + // Create a small camera which looks at the zombie. + // Use the same settings as the default camera. + zombieCamera = game.add.camera(0, 0, 800, 600); + // Use x and y properties to set the target area. + zombieCamera.x = 420; + zombieCamera.y = 240; + // Resize the camera so that it will only look at 200x200 area. + zombieCamera.setSize(200, 200); + // Scale the camera to 2.0, now its target will be 100x100. + zombieCamera.transform.scale.setTo(2.0, 2.0); + // Use setPosition() method to set where the camera rendered + // on the screen. + zombieCamera.setPosition(0, 0); + } + function update() { + if (game.input.keyboard.isDown(Phaser.Keyboard.LEFT)) { + zombieCamera.x -= 2; + } + else if (game.input.keyboard.isDown(Phaser.Keyboard.RIGHT)) { + zombieCamera.x += 2; + } + if (game.input.keyboard.isDown(Phaser.Keyboard.UP)) { + zombieCamera.y -= 2; + } + else if (game.input.keyboard.isDown(Phaser.Keyboard.DOWN)) { + zombieCamera.y += 2; + } + // zombie wandering update + zombie.x += walkSpeed * direction; + if (zombie.x > 540 || zombie.x < 440) { + // Change walk direction. + direction *= -1; + // Flip zombie's animation. + zombie.texture.flippedX = !zombie.texture.flippedX; + } + } + function render() { + game.camera.renderDebugInfo(32, 32); + zombieCamera.renderDebugInfo(32, 128); + } +})(); diff --git a/Tests/cameras/hide from camera.js b/Tests/cameras/hide from camera.js new file mode 100644 index 00000000..231d1125 --- /dev/null +++ b/Tests/cameras/hide from camera.js @@ -0,0 +1,53 @@ +/// +(function () { + var game = new Phaser.Game(this, 'game', 800, 600, init, create, update, render); + + var radar; + var ships = []; + + var enemyCamera; + + function init() { + game.world.setSize(800, 600, true); + game.load.image('radar-surface', 'assets/tests/radar-surface.png'); + game.load.image('ship', 'assets/sprites/asteroids_ship_white.png'); + game.load.image('enemy-ship', 'assets/sprites/asteroids_ship.png'); + + game.load.start(); + } + function create() { + // Add enemies and our ship the the world. + for (var i = 0; i < 4; i++) { + ships.push(game.add.sprite(100 + i * 10, 280 + i * 16, 'enemy-ship')); + } + var ourShip = game.add.sprite(160, 300, 'ship'); + ships.push(ourShip); + + // Radar sprite is a HUD. + radar = game.add.sprite(0, 0, 'radar-surface'); + radar.transform.scrollFactor.setTo(0, 0); + + // Make the default camera rendered on the left half screen. + game.camera.setSize(400, 600); + // Add a new camera and render it on the right half screen. + // The newly created is the enemies' camera, which cannot "see" our ship. + enemyCamera = game.add.camera(0, 0, 800, 600); + enemyCamera.setSize(400, 600); + enemyCamera.setPosition(400, 0); + + // Hide our ship on the enemies' camera. + enemyCamera.hide(ourShip); + } + function update() { + for (var i = 0; i < ships.length; i++) { + ships[i].x += 1; + if (ships[i].x > 400) { + ships[i].x = 40; + } + } + } + function render() { + Phaser.DebugUtils.context.fillStyle = '#fff'; + Phaser.DebugUtils.context.fillText('Left is the player\'s camera, and right is the enemies\' camera.', 32, 100); + } +})(); diff --git a/Tests/cameras/multi camera.js b/Tests/cameras/multi camera.js index 7554e1f3..d98d8244 100644 --- a/Tests/cameras/multi camera.js +++ b/Tests/cameras/multi camera.js @@ -19,22 +19,27 @@ game.load.start(); } function create() { - // background images + // Add background images. game.add.sprite(0, 0, 'sky'); game.add.sprite(0, 360, 'ground'); game.add.sprite(0, 400, 'river'); - // zombie spirte + // Create zombie spirte zombie = game.add.sprite(480, 336, 'zombie'); zombie.animations.add('walk', null, 30, true); zombie.animations.play('walk'); - // create a small camera which looks at the zombie + // Create a small camera which looks at the zombie. + // Use the same settings as the default camera. zombieCamera = game.add.camera(0, 0, 800, 600); + // Use x and y properties to set the target area. zombieCamera.x = 420; zombieCamera.y = 240; - zombieCamera.setPosition(0, 0); + // Resize the camera so that it will only look at 200x200 area. zombieCamera.setSize(200, 200); + // Use setPosition() method to set where the camera rendered + // on the screen. + zombieCamera.setPosition(0, 0); } function update() { if (game.input.keyboard.isDown(Phaser.Keyboard.LEFT)) { @@ -52,8 +57,10 @@ // zombie wandering update zombie.x += walkSpeed * direction; if (zombie.x > 540 || zombie.x < 440) { + // Change walk direction. direction *= -1; - zombie.transform.scale.setTo(direction, 1); + // Flip zombie's animation. + zombie.texture.flippedX = !zombie.texture.flippedX; } } function render() { diff --git a/Tests/cameras/radar template.js b/Tests/cameras/radar template.js deleted file mode 100644 index 5608b2e6..00000000 --- a/Tests/cameras/radar template.js +++ /dev/null @@ -1,47 +0,0 @@ -/// -(function () { - var game = new Phaser.Game(this, 'game', 800, 600, init, create, update, render); - - var radar; - var ships = []; - - var button; - - function init() { - game.world.setSize(800, 600, true); - game.load.image('radar-surface', 'assets/tests/radar-surface.png'); - game.load.image('ship', 'assets/sprites/asteroids_ship_white.png'); - game.load.image('enemy-ship', 'assets/sprites/asteroids_ship.png'); - - game.load.image('button', 'assets/tests/320x200.png'); - - game.load.start(); - } - function create() { - for (var i = 0; i < 4; i++) { - ships.push(game.add.sprite(100 + i * 10, 300 + i * 16, 'ship')); - } - ships.push(game.add.sprite(160, 320, 'enemy-ship')); - radar = game.add.sprite(0, 0, 'radar-surface'); - - game.camera.setSize(400, 600); - var camera2 = game.add.camera(0, 0, 400, 600); - camera2.x = 400; - - button = game.add.sprite(500, 100, 'button'); - button.input.start(0, false, true); - } - function update() { - if (button.input.justReleased(0, 20)) { - } - - for (var i = 0; i < ships.length; i++) { - ships[i].x += 1; - if (ships[i].x > 400) { - ships[i].x = 40; - } - } - } - function render() { - } -})(); diff --git a/Tests/groups/add to group 1.js b/Tests/groups/add to group 1.js new file mode 100644 index 00000000..44bff9a3 --- /dev/null +++ b/Tests/groups/add to group 1.js @@ -0,0 +1,40 @@ +/// +(function () { + var game = new Phaser.Game(this, 'game', 800, 600, init, create, null, render); + + var friendAndFoe, + enemies; + + function init() { + game.load.image('ufo', 'assets/sprites/ufo.png'); + game.load.image('baddie', 'assets/sprites/space-baddie.png'); + game.load.start(); + } + 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() { + Phaser.DebugUtils.context.fillStyle = '#fff'; + Phaser.DebugUtils.context.fillText('ufo added to game.world.group and "friendAndFoe" group', 16, 24); + Phaser.DebugUtils.context.fillText('others ONLY added to "enemies" group', 16, 40); + } +})(); diff --git a/Tests/groups/add to group 2.js b/Tests/groups/add to group 2.js new file mode 100644 index 00000000..1d7b0ead --- /dev/null +++ b/Tests/groups/add to group 2.js @@ -0,0 +1,37 @@ +/// +(function () { + var game = new Phaser.Game(this, 'game', 800, 600, init, create, null, render); + function init() { + game.load.image('ufo', 'assets/sprites/ufo.png'); + game.load.image('baddie', 'assets/sprites/space-baddie.png'); + game.load.start(); + } + function create() { + // Create some local groups for later use. + friendAndFoe = game.add.group(); + enemies = game.add.group(); + + // You can directly create sprite and add it to a group + // using just one line. (One thing you should know is, the body type + // of this sprite is set to BODY_DINAMIC by default, while it's + // BODY_DISABLED by default using other creating methods.) + friendAndFoe.addNewSprite(200, 240, 'ufo', null, Phaser.Types.BODY_DISABLED); + + // 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.addNewSprite(360 + Math.random() * 200, 120 + Math.random() * 200, + 'baddie', null, + Phaser.Types.BODY_DISABLED); + } + function render() { + Phaser.DebugUtils.context.fillStyle = '#fff'; + Phaser.DebugUtils.context.fillText('Tap screen or click to create new baddies.', 16, 24); + } +})(); diff --git a/Tests/groups/bring to top.js b/Tests/groups/bring to top.js new file mode 100644 index 00000000..c28b68a9 --- /dev/null +++ b/Tests/groups/bring to top.js @@ -0,0 +1,30 @@ +(function() { + var game = new Phaser.Game(this, 'game', 800, 600, init, create, null, render); + + var container; + + function init() { + game.load.spritesheet('button', 'assets/buttons/number-buttons.png', 160, 160); + game.load.start(); + } + 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() { + Phaser.DebugUtils.context.fillStyle = '#fff'; + Phaser.DebugUtils.context.fillText('Tap or click buttons to bring it to the top.', 32, 32); + } + function bringMeToTop(btn) { + container.bringToTop(btn); + } +})(); diff --git a/Tests/groups/call all.js b/Tests/groups/call all.js new file mode 100644 index 00000000..12b78583 --- /dev/null +++ b/Tests/groups/call all.js @@ -0,0 +1,37 @@ +/// +(function () { + var game = new Phaser.Game(this, 'game', 800, 600, init, create, null, render); + + function init() { + game.load.spritesheet('item', 'assets/buttons/number-buttons-90x90.png', 90, 90); + game.load.image('reviveBtn', 'assets/buttons/revive-button.png'); + game.load.start(); + } + 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, false, 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, false, 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.group.callAll('revive'); + } + function render() { + Phaser.DebugUtils.context.fillStyle = '#fff'; + Phaser.DebugUtils.context.fillText('Tap or click an item to kill it, and press the revive button to revive them all.', 160, 500); + } +})(); diff --git a/Tests/groups/direct render.js b/Tests/groups/direct render.js new file mode 100644 index 00000000..96457e01 --- /dev/null +++ b/Tests/groups/direct render.js @@ -0,0 +1,38 @@ +/// +(function () { + var game = new Phaser.Game(this, 'game', 800, 600, init, create, null, render); + + // Left and right group. + var left, right; + // The first selected item. + var selected = null; + + function init() { + game.load.spritesheet('item', 'assets/buttons/number-buttons-90x90.png', 90, 90); + game.load.start(); + } + function create() { + left = game.add.group(); + right = new Phaser.Group(game); + // 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.addNewSprite(250, 98 * (i + 1), 'item', i, Phaser.Types.BODY_DISABLED); + // Add another to the right group. + item = right.addNewSprite(348, 98 * (i + 1), 'item', i + 3, Phaser.Types.BODY_DISABLED); + } + + exCamera = game.add.camera(0, 0, 800, 600); + exCamera.setPosition(120, 0); + } + function render() { + right.directRender(exCamera); + + Phaser.DebugUtils.context.fillStyle = '#fff'; + Phaser.DebugUtils.context.fillText('Left Group', 300, 80); + Phaser.DebugUtils.context.fillText('Right Group', 400, 80); + Phaser.DebugUtils.context.fillText('Left group is normally rendered, while the right one is ONLY rendered directly to another camera.', 120, 480); + } +})(); diff --git a/Tests/groups/for each.js b/Tests/groups/for each.js new file mode 100644 index 00000000..6c4b3821 --- /dev/null +++ b/Tests/groups/for each.js @@ -0,0 +1,35 @@ +/// +(function () { + var game = new Phaser.Game(this, 'game', 800, 600, init, create, update, render); + + var baseAlphaIncSpeed = 0.006; + + function init() { + game.load.spritesheet('item', 'assets/buttons/number-buttons-90x90.png', 90, 90); + game.load.start(); + } + 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.group.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() { + Phaser.DebugUtils.context.fillStyle = '#fff'; + Phaser.DebugUtils.context.fillText('Alpha of items is always changing.', 280, 480); + } +})(); diff --git a/Tests/groups/get first 1.js b/Tests/groups/get first 1.js new file mode 100644 index 00000000..13abf0b4 --- /dev/null +++ b/Tests/groups/get first 1.js @@ -0,0 +1,44 @@ +/// +(function () { + var game = new Phaser.Game(this, 'game', 800, 600, init, create, update, render); + + var timer, cycle; + + function init() { + game.load.spritesheet('item', 'assets/buttons/number-buttons-90x90.png', 90, 90); + game.load.image('reviveBtn', 'assets/buttons/revive-button.png'); + game.load.start(); + } + 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 besides 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() { + // Update timer. + timer += game.time.delta; + if (timer > cycle) { + timer -= cycle; + // Get the first alive item and kill it. + var item = game.world.group.getFirstAlive(); + if (item) { + item.kill(); + } + } + } + function render() { + Phaser.DebugUtils.context.fillStyle = '#fff'; + Phaser.DebugUtils.context.fillText('One item will be killed each second.', 280, 420); + // Get living and dead number of a group. + Phaser.DebugUtils.context.fillText('Living: ' + game.world.group.countLiving() + ', Dead: ' + game.world.group.countDead(), 330, 440); + } +})(); diff --git a/Tests/groups/get first 2.js b/Tests/groups/get first 2.js new file mode 100644 index 00000000..b83c8161 --- /dev/null +++ b/Tests/groups/get first 2.js @@ -0,0 +1,49 @@ +/// +(function () { + var game = new Phaser.Game(this, 'game', 800, 600, init, create, update, render); + + var timer, cycle; + + function init() { + game.load.spritesheet('item', 'assets/buttons/number-buttons-90x90.png', 90, 90); + game.load.image('reviveBtn', 'assets/buttons/revive-button.png'); + game.load.start(); + } + 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 besides 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() { + // Update timer. + timer += game.time.delta; + if (timer > cycle) { + timer -= cycle; + // Get an alive item from the group randomly, so it may not + // be the first to be killed. + // Also you can specific a range, only items between that range + // will be found and return. + // Set a range of (0, 5), so the first item will not be kill at all. + var item = game.world.group.getRandom(1, 5); + if (item) { + item.kill(); + } + } + } + function render() { + Phaser.DebugUtils.context.fillStyle = '#fff'; + Phaser.DebugUtils.context.fillText('One item will be killed each second.', 280, 420); + Phaser.DebugUtils.context.fillText('Yet the first one will NEVER be killed since we use a range from 1 to 5 for selection.', 140, 432); + // Get living and dead number of a group. + Phaser.DebugUtils.context.fillText('Living: ' + game.world.group.countLiving() + ', Dead: ' + game.world.group.countDead(), 330, 460); + } +})(); diff --git a/Tests/groups/get first 3.js b/Tests/groups/get first 3.js new file mode 100644 index 00000000..ab09aedf --- /dev/null +++ b/Tests/groups/get first 3.js @@ -0,0 +1,58 @@ +/// +(function () { + var game = new Phaser.Game(this, 'game', 800, 600, init, create, update, render); + + var killTimer, reviveTimer, cycle; + + function init() { + game.load.spritesheet('item', 'assets/buttons/number-buttons-90x90.png', 90, 90); + game.load.image('reviveBtn', 'assets/buttons/revive-button.png'); + game.load.start(); + } + 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 besides 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. + killTimer = 0; + // Another timer for reviving. + reviveTimer = 0; + cycle = 1000; + } + function update() { + // Update timers. + killTimer += game.time.delta; + reviveTimer += game.time.delta; + + // Kill first alive item every "cycle" duration. + if (killTimer > cycle) { + killTimer -= cycle; + // Get an alive item from the group and kill it. + var item = game.world.group.getFirstAlive(); + if (item) { + item.kill(); + } + } + // Revive first dead item every 1.5 "cycle" duration. + if (reviveTimer > cycle * 1.5) { + reviveTimer -= cycle * 1.5; + // Get a dead item from the group and revive it. + var item = game.world.group.getFirstDead(); + if (item) { + item.revive(); + } + } + } + function render() { + Phaser.DebugUtils.context.fillStyle = '#fff'; + Phaser.DebugUtils.context.fillText('One item will be killed each second and revived later.', 240, 420); + // Get living and dead number of a group. + Phaser.DebugUtils.context.fillText('Living: ' + game.world.group.countLiving() + ', Dead: ' + game.world.group.countDead(), 330, 440); + } +})(); diff --git a/Tests/groups/group as layer.js b/Tests/groups/group as layer.js new file mode 100644 index 00000000..1ba93a6f --- /dev/null +++ b/Tests/groups/group as layer.js @@ -0,0 +1,74 @@ +/// +(function () { + var game = new Phaser.Game(this, 'game', 800, 600, init, create, null, render); + function init() { + game.world.setSize(1280, 800, true); + + 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); + + game.load.start(); + } + 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'); + sky.transform.scrollFactor.setTo(0, 0); + skyLayer.add(sky); + // Add clouds to cloudLayer. + var cloud0 = new Phaser.Sprite(game, 200, 120, 'cloud0'); + cloud0.transform.scrollFactor.setTo(0.3, 0.1); + var cloud1 = new Phaser.Sprite(game, -60, 120, 'cloud1'); + cloud1.transform.scrollFactor.setTo(0.5, 0.1); + var cloud2 = new Phaser.Sprite(game, 900, 170, 'cloud2'); + cloud2.transform.scrollFactor.setTo(0.7, 0.1); + cloudLayer.add(cloud0); + cloudLayer.add(cloud1); + cloudLayer.add(cloud2); + // Add ground sprite to groundLayer. + var ground = new Phaser.Sprite(game, 0, 360, 'ground'); + ground.transform.scrollFactor.setTo(0.5, 0.1); + groundLayer.add(ground); + // Add river to riverLayer. + var river = new Phaser.Sprite(game, 0, 400, 'river'); + river.transform.scrollFactor.setTo(1.3, 0.16); + riverLayer.add(river); + + // Add animating sprites to spriteLayer. + var ufo = new Phaser.Sprite(game, 360, 240, 'ufo'); + ufo.animations.add('fly', null, 0, false); + ufo.animations.play('fly'); + ufo.transform.origin.setTo(0.5, 0.5); + spriteLayer.add(ufo); + } + function render() { + Phaser.DebugUtils.context.fillStyle = '#fff'; + Phaser.DebugUtils.context.fillText('sky layer: z = 0', 16, 20); + Phaser.DebugUtils.context.fillText('cloud layer: z = 1', 16, 36); + Phaser.DebugUtils.context.fillText('ground layer: z = 2', 16, 52); + Phaser.DebugUtils.context.fillText('sprite layer: z = 3', 16, 68); + Phaser.DebugUtils.context.fillText('river layer: z = 4', 16, 84); + } +})(); diff --git a/Tests/groups/group texture.js b/Tests/groups/group texture.js new file mode 100644 index 00000000..d4acd821 --- /dev/null +++ b/Tests/groups/group texture.js @@ -0,0 +1,21 @@ +/// +(function () { + var game = new Phaser.Game(this, 'game', 800, 600, init, create, null, render); + + var robot; + var eye, body, leftArm, rightArm, leftLeg, rightLeg; + + function init() { + game.load.spritesheet('buttons', 'assets/buttons/number-buttons.png', 90, 90); + game.load.start(); + } + function create() { + // Add 6 groups and childs. + var item = game.add.group(); + item.texture.loadImage('buttons'); + } + function render() { + Phaser.DebugUtils.context.fillStyle = 'rgb(0, 160, 213)'; + Phaser.DebugUtils.context.fillText('Group can have a texture too, so you can use it just like a simple sprite.', 180, 380); + } +})(); diff --git a/Tests/groups/group transform 1.js b/Tests/groups/group transform 1.js new file mode 100644 index 00000000..ceb1f0fe --- /dev/null +++ b/Tests/groups/group transform 1.js @@ -0,0 +1,65 @@ +/// +(function () { + var game = new Phaser.Game(this, 'game', 800, 600, init, create, update, render); + + var robot; + var eye, body, leftArm, rightArm, leftLeg, rightLeg; + + function init() { + 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'); + game.load.start(); + } + 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 besides the left one. + item = game.add.sprite(388, 98 * (i + 1), 'item', i + 3); + } + // 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.addNewSprite(90, 175, 'arm-l', 0, Phaser.Types.BODY_DISABLED); + rightArm = robot.addNewSprite(549, 175, 'arm-r', 0, Phaser.Types.BODY_DISABLED); + leftLeg = robot.addNewSprite(270, 325, 'leg-l', 0, Phaser.Types.BODY_DISABLED); + rightLeg = robot.addNewSprite(410, 325, 'leg-r', 0, Phaser.Types.BODY_DISABLED); + body = robot.addNewSprite(219, 32, 'body', 0, Phaser.Types.BODY_DISABLED); + eye = robot.addNewSprite(335, 173,'eye', 0, Phaser.Types.BODY_DISABLED); + + 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 update() { + } + function render() { + Phaser.DebugUtils.renderSpriteInfo(leftArm, 32, 32); + Phaser.DebugUtils.renderSpriteInfo(rightArm, 32, 152); + Phaser.DebugUtils.renderSpriteInfo(leftLeg, 32, 272); + Phaser.DebugUtils.renderSpriteInfo(rightLeg, 32, 392); + Phaser.DebugUtils.renderSpriteInfo(rightLeg, 450, 32); + Phaser.DebugUtils.renderSpriteInfo(rightLeg, 450, 152); + + Phaser.DebugUtils.context.fillStyle = 'rgb(0, 160, 213)'; + Phaser.DebugUtils.context.fillText('The robot is a group and every component is a sprite.', 240, 580); + // Phaser.DebugUtils.context.fillText('Drag each part to re-position them.', 288, 592); + Phaser.DebugUtils.context.fillText('Drag each part to re-position them. ', 288, 592); + } +})(); diff --git a/Tests/groups/group transform 2.js b/Tests/groups/group transform 2.js new file mode 100644 index 00000000..710b6a04 --- /dev/null +++ b/Tests/groups/group transform 2.js @@ -0,0 +1,48 @@ +/// +(function () { + var game = new Phaser.Game(this, 'game', 800, 600, init, create, update, render); + + var robot; + var eye, body, leftArm, rightArm, leftLeg, rightLeg; + var draggable; + + function init() { + 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'); + + game.load.start(); + } + 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 besides the left one. + item = game.add.sprite(388, 98 * (i + 1), 'item', i + 3); + } + // 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.addNewSprite(90, 175, 'arm-l', 0, Phaser.Types.BODY_DISABLED); + rightArm = robot.addNewSprite(549, 175, 'arm-r', 0, Phaser.Types.BODY_DISABLED); + leftLeg = robot.addNewSprite(270, 325, 'leg-l', 0, Phaser.Types.BODY_DISABLED); + rightLeg = robot.addNewSprite(410, 325, 'leg-r', 0, Phaser.Types.BODY_DISABLED); + body = robot.addNewSprite(219, 32, 'body', 0, Phaser.Types.BODY_DISABLED); + eye = robot.addNewSprite(335, 173,'eye', 0, Phaser.Types.BODY_DISABLED); + } + function update() { + // Change parent's rotation to change all the childs. + // robot.transform.rotation += 2; + game.world.group.transform.rotation += 2; + } + function render() { + Phaser.DebugUtils.context.fillStyle = 'rgb(0, 160, 213)'; + Phaser.DebugUtils.context.fillText('The robot is a group and every component is a sprite.', 240, 580); + } +})(); diff --git a/Tests/groups/group transform 3.js b/Tests/groups/group transform 3.js new file mode 100644 index 00000000..5031c814 --- /dev/null +++ b/Tests/groups/group transform 3.js @@ -0,0 +1,51 @@ +/// +(function () { + var game = new Phaser.Game(this, 'game', 800, 600, init, create, update, render); + + var robot; + var eye, body, leftArm, rightArm, leftLeg, rightLeg; + var draggable; + + function init() { + 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'); + + game.load.start(); + } + 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 besides the left one. + item = game.add.sprite(388, 98 * (i + 1), 'item', i + 3); + } + // 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.addNewSprite(90, 175, 'arm-l', 0, Phaser.Types.BODY_DISABLED); + rightArm = robot.addNewSprite(549, 175, 'arm-r', 0, Phaser.Types.BODY_DISABLED); + leftLeg = robot.addNewSprite(270, 325, 'leg-l', 0, Phaser.Types.BODY_DISABLED); + rightLeg = robot.addNewSprite(410, 325, 'leg-r', 0, Phaser.Types.BODY_DISABLED); + body = robot.addNewSprite(219, 32, 'body', 0, Phaser.Types.BODY_DISABLED); + eye = robot.addNewSprite(335, 173,'eye', 0, Phaser.Types.BODY_DISABLED); + + // Tween the robot's size, so all the components also scaled. + // game.add.tween(robot.transform.scale) + game.add.tween(game.world.group.transform.scale) + .to({x: 1.2, y: 1.2}, 1000, Phaser.Easing.Back.InOut, true, 0, false) + .yoyo(true); + } + function update() { + } + function render() { + Phaser.DebugUtils.context.fillStyle = 'rgb(0, 160, 213)'; + Phaser.DebugUtils.context.fillText('The robot is a group and every component is a sprite.', 240, 580); + } +})(); diff --git a/Tests/groups/recycle 1.js b/Tests/groups/recycle 1.js new file mode 100644 index 00000000..965faeb0 --- /dev/null +++ b/Tests/groups/recycle 1.js @@ -0,0 +1,46 @@ +/// +(function () { + var game = new Phaser.Game(this, 'game', 800, 600, init, create, null, render); + function init() { + game.load.image('ufo', 'assets/sprites/ufo.png'); + game.load.image('baddie', 'assets/sprites/space-baddie.png'); + game.load.spritesheet('button', 'assets/buttons/baddie-buttons.png', 224, 70); + game.load.start(); + } + function create() { + // Create some local groups for later use. + friendAndFoe = game.add.group(); + enemies = game.add.group(); + + // Create a ufo. + friendAndFoe.addNewSprite(200, 240, 'ufo', null, Phaser.Types.BODY_DISABLED); + + // Create some enemies. + for (var i = 0; i < 8; i++) { + createBaddie(); + } + + // Create buttons to create and kill baddies. + game.add.button(16, 50, 'button', createBaddie, 0, 0, 0); + game.add.button(16, 130, 'button', killBaddie, 1, 1, 1); + } + function killBaddie() { + var baddie = enemies.getFirstAlive(); + if (baddie) baddie.kill(); + } + function createBaddie() { + // Group's recycle() method will always return a valid object unless + // you did not pass an objectClass parameter. + // It will create new object instance of the given class if no "dead" + // object can be found inside the group. + var enemy = enemies.recycle(Phaser.Sprite); + enemy.texture.loadImage('baddie', false); + enemy.texture.opaque = false; + enemy.x = 360 + Math.random() * 200; + enemy.y = 120 + Math.random() * 200; + } + function render() { + Phaser.DebugUtils.context.fillStyle = '#fff'; + Phaser.DebugUtils.context.fillText('Add new baddies using recyle() instead of allocating new object every time.', 16, 24); + } +})(); diff --git a/Tests/groups/recycle 2.js b/Tests/groups/recycle 2.js new file mode 100644 index 00000000..12d7b220 --- /dev/null +++ b/Tests/groups/recycle 2.js @@ -0,0 +1,49 @@ +/// +(function () { + var game = new Phaser.Game(this, 'game', 800, 600, init, create, null, render); + function init() { + game.load.image('ufo', 'assets/sprites/ufo.png'); + game.load.image('baddie', 'assets/sprites/space-baddie.png'); + game.load.spritesheet('button', 'assets/buttons/baddie-buttons.png', 224, 70); + game.load.start(); + } + function create() { + // Create some local groups for later use. + friendAndFoe = game.add.group(); + enemies = game.add.group(); + + // Create a ufo. + friendAndFoe.addNewSprite(200, 240, 'ufo', null, Phaser.Types.BODY_DISABLED); + + // Create some enemies. + for (var i = 0; i < 8; i++) { + // Since the getFirstAvailable() which we'll use for recycling + // cannot allocate new objects, create them manually here. + enemies.addNewSprite(360 + Math.random() * 200, 120 + Math.random() * 200, + 'baddie', null, Phaser.Types.BODY_DISABLED); + } + + // Create buttons to create and kill baddies. + game.add.button(16, 50, 'button', createBaddie, 0, 0, 0); + game.add.button(16, 130, 'button', killBaddie, 1, 1, 1); + } + function killBaddie() { + var baddie = enemies.getFirstAlive(); + if (baddie) baddie.kill(); + } + function createBaddie() { + // Recycle using getFirstAvailable() as an alternative to recycle(). + // 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.getFirstAvailable(); + if (enemy) { + enemy.revive(); + } + } + function render() { + Phaser.DebugUtils.context.fillStyle = '#fff'; + Phaser.DebugUtils.context.fillText('Recycle baddies from a group using getFirstAvailable() instead of recycle().', 16, 24); + Phaser.DebugUtils.context.fillText('Notice that you cannot add more than 8 baddies since we only create 8 instance.', 16, 36); + Phaser.DebugUtils.context.fillText('Living baddies: ' + enemies.countLiving(), 340, 420); + } +})(); diff --git a/Tests/groups/remove.js b/Tests/groups/remove.js new file mode 100644 index 00000000..d7d789ff --- /dev/null +++ b/Tests/groups/remove.js @@ -0,0 +1,65 @@ +/// +(function () { + var game = new Phaser.Game(this, 'game', 800, 600, init, create, update, render); + + // Group contains items. + var items; + + function init() { + game.load.spritesheet('item', 'assets/buttons/number-buttons-90x90.png', 90, 90); + game.load.image('rect', 'assets/tests/200x100corners.png'); + game.load.image('rect2', 'assets/tests/200x100corners2.png'); + game.load.start(); + } + 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.addNewSprite(90, 90 * i, 'item', i, Phaser.Types.BODY_DISABLED); + // Enable input detection, then it's possible be dragged. + item.input.start(0, false, 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 2 rectangles, drop it at these rectangle to + // remove it from origin group normally or + // cut it from the group's array entirely. + var rect = game.add.sprite(400, 0, 'rect'); + rect.transform.scale.setTo(2.0, 3.0); + var rect2 = game.add.sprite(400, 300, 'rect2'); + rect2.transform.scale.setTo(2.0, 3.0); + } + function update() { + } + function render() { + Phaser.DebugUtils.context.fillStyle = '#fff'; + Phaser.DebugUtils.context.fillText('Size of group: ' + items.length, 100, 560); + Phaser.DebugUtils.context.fillText('Drop here to cut items from groups entirely.', 450, 24); + Phaser.DebugUtils.context.fillText('Drop here to remove it normally.', 450, 324); + } + function dropHandler(item, pointer) { + if (item.x < 90) { + item.x = 90; + } + else if (item.x > 400) { // So it is dropped in one rectangle. + if (item.y < 300) { + // Remove it from group normally, so the group's size does not change. + items.remove(item, true); + } + else { + // Remove it from group and cut from it, so the group's size decreases. + items.remove(item); + } + } + } +})(); diff --git a/Tests/groups/replace.js b/Tests/groups/replace.js new file mode 100644 index 00000000..fae0ea29 --- /dev/null +++ b/Tests/groups/replace.js @@ -0,0 +1,66 @@ +/// +(function () { + var game = new Phaser.Game(this, 'game', 800, 600, init, create, update, render); + + // Left and right group. + var left, right; + // The first selected item. + var selected = null; + + function init() { + game.load.spritesheet('item', 'assets/buttons/number-buttons-90x90.png', 90, 90); + game.load.start(); + } + 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.addNewSprite(290, 98 * (i + 1), 'item', i, Phaser.Types.BODY_DISABLED); + // Enable input. + item.input.start(0, false, true); + item.events.onInputUp.add(select); + // Add another to the right group. + item = right.addNewSprite(388, 98 * (i + 1), 'item', i + 3, Phaser.Types.BODY_DISABLED); + // Enable input. + item.input.start(0, false, 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 update() { + } + function render() { + Phaser.DebugUtils.context.fillStyle = '#fff'; + Phaser.DebugUtils.context.fillText('Left Group', 300, 80); + Phaser.DebugUtils.context.fillText('Right Group', 400, 80); + Phaser.DebugUtils.context.fillText('Click an item and one from another group to replace it.', 240, 480); + } +})(); diff --git a/Tests/groups/set all.js b/Tests/groups/set all.js new file mode 100644 index 00000000..b59555ae --- /dev/null +++ b/Tests/groups/set all.js @@ -0,0 +1,31 @@ +/// +(function () { + var game = new Phaser.Game(this, 'game', 800, 600, init, create, null, render); + + var baseIncSpeed = 0.006; + + function init() { + game.load.spritesheet('item', 'assets/buttons/number-buttons-90x90.png', 90, 90); + game.load.start(); + } + 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); + } + function resetAlpha() { + // Set "alpha" value of all the childs. + game.world.group.setAll('alpha', Math.random()); + } + function render() { + Phaser.DebugUtils.context.fillStyle = '#fff'; + Phaser.DebugUtils.context.fillText('Tap or click to set random alpha of all the items.', 240, 480); + } +})(); diff --git a/Tests/groups/sort 1.js b/Tests/groups/sort 1.js new file mode 100644 index 00000000..839971ee --- /dev/null +++ b/Tests/groups/sort 1.js @@ -0,0 +1,46 @@ +(function() { + var game = new Phaser.Game(this, 'game', 800, 600, init, create, update, render); + + var xTop, yTop, zTop; + + function init() { + game.load.image('cell', 'assets/sprites/diamond.png'); + game.load.start(); + } + function create() { + // Create 3 groups which will have different sort "index". + xTop = game.add.group(); + yTop = game.add.group(); + zTop = game.add.group(); + + var i; + for (i = 0; i < 64; i++) { + xTop.addNewSprite(160 + 48 * Math.cos(i * Math.PI / 8), 540 - i * 8, + 'cell', 0, + Phaser.Types.BODY_DISABLED); + } + for (i = 0; i < 64; i++) { + yTop.addNewSprite(340 + 48 * Math.cos(i * Math.PI / 8), 540 - i * 8, + 'cell', 0, + Phaser.Types.BODY_DISABLED); + } + for (i = 0; i < 64; i++) { + zTop.addNewSprite(520 + 48 * Math.cos(i * Math.PI / 8), 540 - i * 8, + 'cell', 0, + Phaser.Types.BODY_DISABLED); + } + } + function update() { + // Sort 3 groups using different methods, all of them are + // ascending by default. + xTop.sort('x'); + yTop.sort('y'); + zTop.sort('z'); + } + function render() { + Phaser.DebugUtils.context.fillStyle = '#fff'; + Phaser.DebugUtils.context.fillText('Left group sorted by x.', 16, 18); + Phaser.DebugUtils.context.fillText('Middle group sorted by y.', 16, 36); + Phaser.DebugUtils.context.fillText('Right group sorted by z.', 16, 54); + } +})(); diff --git a/Tests/groups/sort 2.js b/Tests/groups/sort 2.js new file mode 100644 index 00000000..9bde00b3 --- /dev/null +++ b/Tests/groups/sort 2.js @@ -0,0 +1,57 @@ +(function() { + var game = new Phaser.Game(this, 'game', 800, 600, init, create, update, render); + + // Wabbits inside this group is sorted by its "dead" property. + // Dead wabbits behinds the others. + var wabbits; + + function init() { + game.load.image('wabbit', 'assets/sprites/wabbit.png'); + game.load.start(); + } + function create() { + // Create container group. + wabbits = game.add.group(); + + // Create wabbit and add to the container. + var wabbe; + for (var i = 0; i < 64; i++) { + wabbe = wabbits.addNewSprite(Math.random() * 480 + 64, Math.random() * 480 + 32, + 'wabbit', 0, + Phaser.Types.BODY_DISABLED); + wabbe.transform.scale.setTo(2, 2); + wabbe.transform.origin.setTo(0.5, 0.5); + + // Give wabbie a flag of living or not. + wabbe.dead = false; + + wabbe.input.start(0, false, true); + wabbe.events.onInputUp.add(killMe, this); + } + } + function update() { + // sort wabbies by "exists", so killed ones will + wabbits.sort('dead', Phaser.Group.DESCENDING); + } + function render() { + Phaser.DebugUtils.context.fillStyle = '#fff'; + Phaser.DebugUtils.context.fillText('Tap or click wabbits to kill them.', 32, 32); + } + function killMe(wabbe) { + // Disable input. + wabbe.input.stop(); + + // Do not call the kill method, set its "dead" property instead. + wabbe.dead = true; + + // Kill effects. + game.add.tween(wabbe) + .to({x: wabbe.x - 48}, 2000, Phaser.Easing.Linear.None, true, 0, false); + game.add.tween(wabbe) + .to({y: 640}, 2000 - wabbe.y, Phaser.Easing.Back.In, true, 0, false); + game.add.tween(wabbe) + .to({rotation: 240}, 1000, Phaser.Easing.Back.In, true, 0, false); + game.add.tween(wabbe.transform.scale) + .to({x: 2, y: 2}, 1000, Phaser.Easing.Bounce.In, true, 0, false); + } +})(); diff --git a/Tests/groups/sub groups.js b/Tests/groups/sub groups.js new file mode 100644 index 00000000..0b069d3c --- /dev/null +++ b/Tests/groups/sub groups.js @@ -0,0 +1,60 @@ +/// +(function () { + var game = new Phaser.Game(this, 'game', 800, 600, init, create, null, render); + + // Groups for storing friends and enemies, may use for collision later. + var friendAndFoe, + enemies; + + // Groups for teaming up stuff. + var normalBaddies, + purpleBaddies; + + function init() { + 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'); + game.load.start(); + } + 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. + enemies.add(normalBaddies); + enemies.add(purpleBaddies); + + // Create a ufo as a friend sprite. + friendAndFoe.addNewSprite(200, 240, 'ufo', null, Phaser.Types.BODY_DISABLED); + + // 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; + if (Math.random() > 0.5) { + baddie = purpleBaddies.addNewSprite(360 + Math.random() * 200, 120 + Math.random() * 200, + 'purple-baddie', null, Phaser.Types.BODY_DISABLED); + } + else { + baddie = normalBaddies.addNewSprite(360 + Math.random() * 200, 120 + Math.random() * 200, + 'baddie', null, Phaser.Types.BODY_DISABLED); + } + } + function render() { + Phaser.DebugUtils.context.fillStyle = '#fff'; + Phaser.DebugUtils.context.fillText('Tap screen or click to create new baddies.', 16, 24); + Phaser.DebugUtils.context.fillText('enemies: ' + enemies.length + ' (actually ' + enemies.length + ' groups)', 16, 48); + Phaser.DebugUtils.context.fillText('normal baddies: ' + normalBaddies.length, 16, 60); + Phaser.DebugUtils.context.fillText('purple baddies: ' + purpleBaddies.length, 16, 72); + Phaser.DebugUtils.context.fillText('friends: ' + friendAndFoe.length, 16, 96); + } +})(); diff --git a/Tests/input/drop limitation.js b/Tests/input/drop limitation.js new file mode 100644 index 00000000..69c382fc --- /dev/null +++ b/Tests/input/drop limitation.js @@ -0,0 +1,46 @@ +/// +(function () { + var game = new Phaser.Game(this, 'game', 800, 600, init, create, update, render); + + function init() { + game.load.spritesheet('item', 'assets/buttons/number-buttons-90x90.png', 90, 90); + game.load.start(); + } + function create() { + // Add some items to left side, and set a onDragStop listener + // to limit its location when dropped. + var item; + for (var i = 0; i < 6; i++) { + // Directly create sprites from the left group. + item = game.add.sprite(90, 90 * i, 'item', i); + // Enable input detection, then it's possible be dragged. + item.input.start(0, false, true); + // Make this item draggable. + item.input.enableDrag(); + // Then we make it snap to left and right side, + // also make it only snaps when released. + item.input.enableSnap(90, 90, false, true); + // Limit drop location to only the 2 columns. + item.events.onDragStop.add(fixLocation); + } + } + function update() { + } + function render() { + Phaser.DebugUtils.context.fillStyle = '#fff'; + Phaser.DebugUtils.context.fillText('Group Left.', 100, 560); + Phaser.DebugUtils.context.fillText('Group Right.', 280, 560); + } + function fixLocation(item) { + // Move the items when it is already dropped. + if (item.x < 90) { + item.x = 90; + } + else if (item.x > 180 && item.x < 270) { + item.x = 180; + } + else if (item.x > 360) { + item.x = 270; + } + } +})(); diff --git a/Tests/input/keyboard 1.js b/Tests/input/keyboard 1.js new file mode 100644 index 00000000..04811a15 --- /dev/null +++ b/Tests/input/keyboard 1.js @@ -0,0 +1,79 @@ +/// +(function () { + var game = new Phaser.Game(this, 'game', 800, 600, init, create, update); + + var ufo, leftBtn, rightBtn; + var speed = 4; + + function init() { + game.world.setSize(1280, 600, true); + 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('button', 'assets/buttons/arrow-button.png', 112, 95); + + game.load.spritesheet('ufo', 'assets/sprites/ufo.png', 24, 21); + + game.load.start(); + } + function create() { + // background images + game.add.sprite(0, 0, 'sky') + .transform.scrollFactor.setTo(0, 0); + game.add.sprite(0, 360, 'ground') + .transform.scrollFactor.setTo(0.5, 0.5); + game.add.sprite(0, 400, 'river') + .transform.scrollFactor.setTo(1.3, 1.3); + game.add.sprite(200, 120, 'cloud0') + .transform.scrollFactor.setTo(0.3, 0.3); + game.add.sprite(-60, 120, 'cloud1') + .transform.scrollFactor.setTo(0.5, 0.3); + game.add.sprite(900, 170, 'cloud2') + .transform.scrollFactor.setTo(0.7, 0.3); + + // Create a ufo spirte as player. + ufo = game.add.sprite(320, 240, 'ufo'); + ufo.animations.add('fly', null, 30, false); + ufo.animations.play('fly'); + ufo.transform.origin.setTo(0.5, 0.5); + + // Make the default camera follow the ufo. + game.camera.follow(ufo); + + // Add 2 sprite to display hold direction. + leftBtn = game.add.sprite(160 - 112, 200, 'button', 0); + leftBtn.transform.scrollFactor.setTo(0, 0); + leftBtn.alpha = 0; + rightBtn = game.add.sprite(640 - 112, 200, 'button', 1); + rightBtn.alpha = 0; + rightBtn.transform.scrollFactor.setTo(0, 0); + } + function update() { + // Check key states every frame. + // Move ONLY one of the left and right key is hold. + if (game.input.keyboard.isDown(Phaser.Keyboard.LEFT) && + !game.input.keyboard.isDown(Phaser.Keyboard.RIGHT)) { + ufo.x -= speed; + ufo.rotation = -15; + leftBtn.alpha = 0.6; + } + else if (game.input.keyboard.isDown(Phaser.Keyboard.RIGHT) && + !game.input.keyboard.isDown(Phaser.Keyboard.LEFT)) { + ufo.x += speed; + ufo.rotation = 15; + rightBtn.alpha = 0.6; + } + else { + ufo.rotation = 0; + leftBtn.alpha = rightBtn.alpha = 0; + } + } + function render() { + Phaser.DebugUtils.context.fillStyle = '#fff'; + Phaser.DebugUtils.context.fillText('Hold left/right to move the ufo.'); + } +})(); diff --git a/Tests/input/keyboard 2.js b/Tests/input/keyboard 2.js new file mode 100644 index 00000000..813551b1 --- /dev/null +++ b/Tests/input/keyboard 2.js @@ -0,0 +1,106 @@ +/// +(function () { + var game = new Phaser.Game(this, 'game', 800, 600, init, create, update); + + var ufo, leftBtn, rightBtn, spaceBtn; + var speed = 4; + + function init() { + game.world.setSize(1280, 600, true); + 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('button', 'assets/buttons/arrow-button.png', 112, 95); + game.load.image('spacebar', 'assets/buttons/spacebar.png'); + + game.load.spritesheet('ufo', 'assets/sprites/ufo.png', 24, 21); + + game.load.start(); + } + function create() { + // background images + game.add.sprite(0, 0, 'sky') + .transform.scrollFactor.setTo(0, 0); + game.add.sprite(0, 360, 'ground') + .transform.scrollFactor.setTo(0.5, 0.5); + game.add.sprite(0, 400, 'river') + .transform.scrollFactor.setTo(1.3, 1.3); + game.add.sprite(200, 120, 'cloud0') + .transform.scrollFactor.setTo(0.3, 0.3); + game.add.sprite(-60, 120, 'cloud1') + .transform.scrollFactor.setTo(0.5, 0.3); + game.add.sprite(900, 170, 'cloud2') + .transform.scrollFactor.setTo(0.7, 0.3); + + // Create a ufo spirte as player. + ufo = game.add.sprite(320, 240, 'ufo'); + ufo.animations.add('fly', null, 30, false); + ufo.animations.play('fly'); + ufo.transform.origin.setTo(0.5, 0.5); + + // Make the default camera follow the ufo. + game.camera.follow(ufo); + + // Add 2 sprite to display hold direction. + leftBtn = game.add.sprite(160 - 112 / 2, 200, 'button', 0); + leftBtn.transform.scrollFactor.setTo(0, 0); + leftBtn.alpha = 0; + rightBtn = game.add.sprite(640 - 112 / 2, 200, 'button', 1); + rightBtn.alpha = 0; + rightBtn.transform.scrollFactor.setTo(0, 0); + // Add a sprite to display spacebar press. + spaceBtn = game.add.sprite(400 - 112, 100, 'spacebar'); + spaceBtn.transform.scrollFactor.setTo(0, 0); + spaceBtn.alpha = 0; + + // Prevent directions and space key events bubbling up to browser, + // since these keys will make web page scroll which is not + // expected. + game.input.keyboard.addKeyCapture([ + Phaser.Keyboard.LEFT, + Phaser.Keyboard.RIGHT, + Phaser.Keyboard.UP, + Phaser.Keyboard.DOWN, + Phaser.Keyboard.SPACEBAR + ]); + } + function update() { + // Check key states every frame. + // Move ONLY one of the left and right key is hold. + if (game.input.keyboard.isDown(Phaser.Keyboard.LEFT) && + !game.input.keyboard.isDown(Phaser.Keyboard.RIGHT)) { + ufo.x -= speed; + ufo.rotation = -15; + leftBtn.alpha = 0.6; + } + else if (game.input.keyboard.isDown(Phaser.Keyboard.RIGHT) && + !game.input.keyboard.isDown(Phaser.Keyboard.LEFT)) { + ufo.x += speed; + ufo.rotation = 15; + rightBtn.alpha = 0.6; + } + else { + ufo.rotation = 0; + leftBtn.alpha = rightBtn.alpha = 0; + } + + // 50 is a good choice if you are running 60FPS. + if (game.input.keyboard.justPressed(Phaser.Keyboard.SPACEBAR, 50)) { + console.log('space bar pressed'); + spaceBtn.alpha = 1; + } + if (spaceBtn.alpha > 0) { + spaceBtn.alpha -= 0.03; + } + } + function render() { + Phaser.DebugUtils.context.fillStyle = '#fff'; + Phaser.DebugUtils.context.fillText('Hold left/right to move the ufo.', 16, 32); + Phaser.DebugUtils.context.fillText('Direction and Space key events are stopped by Phaser now, which will no longer be sent to the browser.', 16, 48); + Phaser.DebugUtils.context.fillText('Now you can press UP/DOWN or SPACE to see what happened.', 16, 64); + } +})(); diff --git a/Tests/misc/color utils 1.js b/Tests/misc/color utils 1.js new file mode 100644 index 00000000..8943d4d0 --- /dev/null +++ b/Tests/misc/color utils 1.js @@ -0,0 +1,49 @@ +(function() { + var game = new Phaser.Game(this, 'game', 800, 600, init, create, null, render); + + var colorWheel, selected, color = '#CCA22B'; + var offset = { + x: 300 - 578 / 2, + y: 300 - 550 / 2 + }; + var rect, rectSize = 24; + + function init() { + game.load.image('color-wheel', 'assets/pics/color-wheel.png'); + game.load.start(); + } + function create() { + // Create color wheel texture. + colorWheel = game.add.dynamicTexture(578, 550); + colorWheel.pasteImage('color-wheel'); + + // Create a rectangle shows the color you just selected. + rect = new Phaser.Rectangle(0, 0, rectSize, rectSize); + selected = game.add.sprite(600, 430); + selected.width = rectSize; + selected.height = rectSize; + selected.texture.loadDynamicTexture(game.add.dynamicTexture(rectSize, rectSize)); + selected.texture.dynamicTexture.fillRect(rect, color); + + // Get the color under the position you tapped or clicked. + var pos = {}; + game.input.onTap.add(function(pointer) { + pos.x = pointer.position.x - offset.x; + pos.y = pointer.position.y - offset.y; + color = Phaser.ColorUtils.RGBtoWebstring(colorWheel.getPixel32(pos.x, pos.y)); + + // Set the rectangle's color to new selected one. + selected.texture.dynamicTexture.fillRect(rect, color); + }); + + // Set the background color to white. + game.stage.backgroundColor = '#fff'; +} + function render() { + colorWheel.render(offset.x, offset.y); + + Phaser.DebugUtils.context.fillStyle = '#000'; + Phaser.DebugUtils.context.fillText('Tap or click the color wheel to select a color.', 480, 52); + Phaser.DebugUtils.context.fillText(color, 646, 452); + } +})(); diff --git a/Tests/misc/color utils 2.js b/Tests/misc/color utils 2.js new file mode 100644 index 00000000..08d11e06 --- /dev/null +++ b/Tests/misc/color utils 2.js @@ -0,0 +1,57 @@ +(function() { + var game = new Phaser.Game(this, 'game', 800, 600, init, create, null, render); + + var colorWheel, selected, + color = 0xAACCA22B, colorStr = '#CCA22B'; + var offset = { + x: 300 - 578 / 2, + y: 300 - 550 / 2 + }; + var rect, rectSize = 24; + + function init() { + game.load.image('color-wheel', 'assets/pics/color-wheel.png'); + game.load.start(); + } + function create() { + // Create color wheel texture. + colorWheel = game.add.dynamicTexture(578, 550); + colorWheel.pasteImage('color-wheel'); + + // Create a rectangle shows the color you just selected. + rect = new Phaser.Rectangle(0, 0, rectSize, rectSize); + selected = game.add.sprite(600, 430); + selected.width = rectSize; + selected.height = rectSize; + selected.texture.loadDynamicTexture(game.add.dynamicTexture(rectSize, rectSize)); + selected.texture.dynamicTexture.fillRect(rect, colorStr); + + // Get the color under the position you tapped or clicked. + var pos = {}; + game.input.onTap.add(function(pointer) { + pos.x = pointer.position.x - offset.x; + pos.y = pointer.position.y - offset.y; + color = colorWheel.getPixel32(pos.x, pos.y); + colorStr = Phaser.ColorUtils.RGBtoWebstring(color); + + // Set the rectangle's color to new selected one. + selected.texture.dynamicTexture.fillRect(rect, colorStr); + }); + + // Set the background color to white. + game.stage.backgroundColor = '#fff'; +} + function render() { + colorWheel.render(offset.x, offset.y); + + Phaser.DebugUtils.context.fillStyle = '#000'; + Phaser.DebugUtils.context.fillText('Tap or click the color wheel to select a color.', 480, 52); + + // Display more color formated infos here. You can also get a + // string contains everything using getColorInfo(); + Phaser.DebugUtils.context.fillText('Web String: ' + colorStr, 600, 492); + Phaser.DebugUtils.context.fillText('Hex String: ' + Phaser.ColorUtils.RGBtoHexstring(color), 600, 508); + var hsv = Phaser.ColorUtils.RGBtoHSV(color); + Phaser.DebugUtils.context.fillText('HSV: (' + hsv.hue.toFixed() + ', ' + hsv.saturation.toFixed(2) + ', ' + hsv.value.toFixed(2) + ')', 600, 524); + } +})(); diff --git a/Tests/misc/color utils 3.js b/Tests/misc/color utils 3.js new file mode 100644 index 00000000..ae638d32 --- /dev/null +++ b/Tests/misc/color utils 3.js @@ -0,0 +1,151 @@ +(function() { + var game = new Phaser.Game(this, 'game', 800, 600, init, create, null, render); + + var colorWheel, + selected, + compHarmony, + analoHarmony, analoHarmony1, + splitHarmony, splitHarmony1, + triaHarmony, triaHarmony1, + color = 0xAACCA22B, colorStr = '#CCA22B', + compHColor, + analoColor, splitColor, triaColor, + analoColor1, splitColor1, triaColor1; + + var offset = { + x: 300 - 578 / 2, + y: 300 - 550 / 2 + }; + var rect, rectSize = 24; + + function init() { + game.load.image('color-wheel', 'assets/pics/color-wheel.png'); + game.load.start(); + } + function create() { + // Create color wheel texture. + colorWheel = game.add.dynamicTexture(578, 550); + colorWheel.pasteImage('color-wheel'); + + // Create a rectangle shows the color you just selected. + rect = new Phaser.Rectangle(0, 0, rectSize, rectSize); + selected = game.add.sprite(700, 290); + selected.width = rectSize; + selected.height = rectSize; + selected.texture.loadDynamicTexture(game.add.dynamicTexture(rectSize, rectSize)); + selected.texture.dynamicTexture.fillRect(rect, colorStr); + + // Create rectangles to show the harmony colors to the selected one. + compHColor = Phaser.ColorUtils.getComplementHarmony(color), + analoColor = Phaser.ColorUtils.getAnalogousHarmony(color), + splitColor = Phaser.ColorUtils.getSplitComplementHarmony(color), + triaColor = Phaser.ColorUtils.getTriadicHarmony(color); + + // Complement + compHarmony = game.add.sprite(700, 390); + compHarmony.width = rectSize; + compHarmony.height = rectSize; + compHarmony.texture.loadDynamicTexture(game.add.dynamicTexture(rectSize, rectSize)); + compHarmony.texture.dynamicTexture.fillRect(rect, Phaser.ColorUtils.RGBtoWebstring(compHColor)); + + // Analogous + analoHarmony = game.add.sprite(700, 434); + analoHarmony.width = rectSize; + analoHarmony.height = rectSize; + analoHarmony.texture.loadDynamicTexture(game.add.dynamicTexture(rectSize, rectSize)); + analoHarmony.texture.dynamicTexture.fillRect(rect, Phaser.ColorUtils.RGBtoWebstring(analoColor.color2)); + + analoHarmony1 = game.add.sprite(744, 434); + analoHarmony1.width = rectSize; + analoHarmony1.height = rectSize; + analoHarmony1.texture.loadDynamicTexture(game.add.dynamicTexture(rectSize, rectSize)); + analoHarmony1.texture.dynamicTexture.fillRect(rect, Phaser.ColorUtils.RGBtoWebstring(analoColor.color3)); + + // Split Complement + splitHarmony = game.add.sprite(700, 478); + splitHarmony.width = rectSize; + splitHarmony.height = rectSize; + splitHarmony.texture.loadDynamicTexture(game.add.dynamicTexture(rectSize, rectSize)); + splitHarmony.texture.dynamicTexture.fillRect(rect, Phaser.ColorUtils.RGBtoWebstring(splitColor.color2)); + + splitHarmony1 = game.add.sprite(744, 478); + splitHarmony1.width = rectSize; + splitHarmony1.height = rectSize; + splitHarmony1.texture.loadDynamicTexture(game.add.dynamicTexture(rectSize, rectSize)); + splitHarmony1.texture.dynamicTexture.fillRect(rect, Phaser.ColorUtils.RGBtoWebstring(splitColor.color3)); + + // Triadic + triaHarmony = game.add.sprite(700, 522); + triaHarmony.width = rectSize; + triaHarmony.height = rectSize; + triaHarmony.texture.loadDynamicTexture(game.add.dynamicTexture(rectSize, rectSize)); + triaHarmony.texture.dynamicTexture.fillRect(rect, Phaser.ColorUtils.RGBtoWebstring(triaColor.color2)); + + triaHarmony1 = game.add.sprite(744, 522); + triaHarmony1.width = rectSize; + triaHarmony1.height = rectSize; + triaHarmony1.texture.loadDynamicTexture(game.add.dynamicTexture(rectSize, rectSize)); + triaHarmony1.texture.dynamicTexture.fillRect(rect, Phaser.ColorUtils.RGBtoWebstring(triaColor.color3)); + + // Get the color under the position you tapped or clicked. + var pos = {}; + game.input.onTap.add(function(pointer) { + pos.x = pointer.position.x - offset.x; + pos.y = pointer.position.y - offset.y; + + // Update colors. + color = colorWheel.getPixel32(pos.x, pos.y); + compHColor = Phaser.ColorUtils.getComplementHarmony(color), + analoColor = Phaser.ColorUtils.getAnalogousHarmony(color).color2, + analoColor1 = Phaser.ColorUtils.getAnalogousHarmony(color).color3, + splitColor = Phaser.ColorUtils.getSplitComplementHarmony(color).color2, + splitColor1 = Phaser.ColorUtils.getSplitComplementHarmony(color).color3, + triaColor = Phaser.ColorUtils.getTriadicHarmony(color).color2; + triaColor1 = Phaser.ColorUtils.getTriadicHarmony(color).color3; + + // Calc color strings. + colorStr = Phaser.ColorUtils.RGBtoWebstring(color); + var compStr = Phaser.ColorUtils.RGBtoWebstring(compHColor), + analStr = Phaser.ColorUtils.RGBtoWebstring(analoColor), + analStr1 = Phaser.ColorUtils.RGBtoWebstring(analoColor1), + spliStr = Phaser.ColorUtils.RGBtoWebstring(splitColor), + spliStr1 = Phaser.ColorUtils.RGBtoWebstring(splitColor1), + triaStr = Phaser.ColorUtils.RGBtoWebstring(triaColor), + triaStr1 = Phaser.ColorUtils.RGBtoWebstring(triaColor1); + + // Update color of the rectangles. + selected.texture.dynamicTexture.fillRect(rect, colorStr); + compHarmony.texture.dynamicTexture.fillRect(rect, compStr); + analoHarmony.texture.dynamicTexture.fillRect(rect, analStr); + analoHarmony1.texture.dynamicTexture.fillRect(rect, analStr1); + splitHarmony.texture.dynamicTexture.fillRect(rect, spliStr); + splitHarmony1.texture.dynamicTexture.fillRect(rect, spliStr1); + triaHarmony.texture.dynamicTexture.fillRect(rect, triaStr); + triaHarmony1.texture.dynamicTexture.fillRect(rect, triaStr1); + }); + + // Set the background color to white. + game.stage.backgroundColor = '#fff'; + } + function render() { + colorWheel.render(offset.x, offset.y); + + Phaser.DebugUtils.context.fillStyle = '#000'; + Phaser.DebugUtils.context.fillText('Tap or click the color wheel to select a color.', 480, 52); + Phaser.DebugUtils.context.fillText('All the harmony colors are calculated on the fly.', 480, 590); + + // Display more color formated infos here. You can also get a + // string contains everything using getColorInfo(); + Phaser.DebugUtils.context.fillText('Selected Color: ', 600, 312); + Phaser.DebugUtils.context.fillText('Web String: ' + colorStr, 640, 342); + Phaser.DebugUtils.context.fillText('Hex String: ' + Phaser.ColorUtils.RGBtoHexstring(color), 640, 358); + var hsv = Phaser.ColorUtils.RGBtoHSV(color); + Phaser.DebugUtils.context.fillText('HSV: (' + hsv.hue.toFixed() + ', ' + hsv.saturation.toFixed(2) + ', ' + hsv.value.toFixed(2) + ')', 640, 374); + + // Harmony color types info. + Phaser.DebugUtils.context.fillText('Complement Harmony Color: ', 540, 412); + Phaser.DebugUtils.context.fillText(' Analogous Harmony Color: ', 540, 456); + Phaser.DebugUtils.context.fillText('Split Complement Harmony Color: ', 502, 500); + Phaser.DebugUtils.context.fillText(' Triadic Harmony Color: ', 540, 544); + } +})(); diff --git a/Tests/misc/dynamic texture 1.js b/Tests/misc/dynamic texture 1.js new file mode 100644 index 00000000..579b1e3c --- /dev/null +++ b/Tests/misc/dynamic texture 1.js @@ -0,0 +1,23 @@ +(function() { + var game = new Phaser.Game(this, 'game', 800, 600, null, create, null, render); + + // Pattern texture for tiling render to the stage later. + var pattern; + + function create() { + // Create a simple pattern texture. + pattern = game.add.dynamicTexture(96, 96); + pattern.fillRect(new Phaser.Rectangle(0, 0, 48, 48), '#5b35c0'); + pattern.fillRect(new Phaser.Rectangle(48, 48, 48, 48), '#5b35c0'); + pattern.fillRect(new Phaser.Rectangle(48, 0, 48, 48), '#43baf3'); + pattern.fillRect(new Phaser.Rectangle(0, 48, 48, 48), '#43baf3'); + } + function render() { + // Directly render the texture to the stage. + // In screen coordinates. + pattern.render(400 - 48, 300 - 48); + + Phaser.DebugUtils.context.fillStyle = '#fff'; + Phaser.DebugUtils.context.fillText('There\'s no sprites here, only a DynamicTexture created on the fly.', 210, 450); + } +})(); diff --git a/Tests/misc/dynamic texture 2.js b/Tests/misc/dynamic texture 2.js new file mode 100644 index 00000000..1e362587 --- /dev/null +++ b/Tests/misc/dynamic texture 2.js @@ -0,0 +1,27 @@ +(function() { + var game = new Phaser.Game(this, 'game', 800, 600, null, create, null, render); + + // Pattern texture for tiling render to the stage later. + var pattern; + + function create() { + // Create a simple pattern texture. + pattern = game.add.dynamicTexture(96, 96); + pattern.fillRect(new Phaser.Rectangle(0, 0, 48, 48), '#5b35c0'); + pattern.fillRect(new Phaser.Rectangle(48, 48, 48, 48), '#5b35c0'); + pattern.fillRect(new Phaser.Rectangle(48, 0, 48, 48), '#43baf3'); + pattern.fillRect(new Phaser.Rectangle(0, 48, 48, 48), '#43baf3'); + + // Create a sprite and load to our newly created DynamicTexture. + // Notice that loadDynamicTexture() will destroy sprite's AnimationManager, + // so all the animations already added will no longer exist. + var sprite = game.add.sprite(game.stage.centerX - 48, game.stage.centerY - 48); + sprite.texture.loadDynamicTexture(pattern); + + console.log('Size of the sprite is now: (' + sprite.width + ', ' + sprite.height + ').'); + } + function render() { + Phaser.DebugUtils.context.fillStyle = '#fff'; + Phaser.DebugUtils.context.fillText('This is a sprite whose appearance defined by a DynamicTexture created on the fly.', 160, 450); + } +})(); diff --git a/Tests/misc/dynamic texture 3.js b/Tests/misc/dynamic texture 3.js new file mode 100644 index 00000000..8758bb15 --- /dev/null +++ b/Tests/misc/dynamic texture 3.js @@ -0,0 +1,32 @@ +(function() { + var game = new Phaser.Game(this, 'game', 800, 600, init, create, null, render); + + // Pattern texture for tiling render to the stage later. + var pattern; + + function init() { + game.load.spritesheet('cat', 'assets/sprites/baddie_cat_1.png', 16, 16); + game.load.start(); + } + function create() { + // Create a simple pattern first. + pattern = game.add.dynamicTexture(64, 16); + for (var i = 0; i < 4; i++) { + pattern.fillRect(new Phaser.Rectangle(i * 16, 0, 8, 8), '#5b35c0'); + pattern.fillRect(new Phaser.Rectangle((i + 1) * 16 - 8, 8, 8, 8), '#5b35c0'); + pattern.fillRect(new Phaser.Rectangle((i + 1) * 16 - 8, 0, 8, 8), '#43baf3'); + pattern.fillRect(new Phaser.Rectangle(i * 16, 8, 8, 8), '#43baf3'); + } + + // Paste cat image to the texture, so the cat is on top of our pattern. + pattern.pasteImage('cat'); + + // Create a sprite with our result texture. + var sprite = game.add.sprite(game.stage.centerX - 32, game.stage.centerY - 8); + sprite.texture.loadDynamicTexture(pattern); + } + function render() { + Phaser.DebugUtils.context.fillStyle = '#fff'; + Phaser.DebugUtils.context.fillText('Paste exist spritesheet to a DynamicTexture created on the fly.', 220, 450); + } +})(); diff --git a/Tests/misc/rectangle utils 1.js b/Tests/misc/rectangle utils 1.js new file mode 100644 index 00000000..c3724d29 --- /dev/null +++ b/Tests/misc/rectangle utils 1.js @@ -0,0 +1,10 @@ +(function() { + var game = new Phaser.Game(this, 'game', 800, 600, init, create); + + function init() { + // body... + } + function create() { + + } +})(); diff --git a/Tests/sprites/out of screen.js b/Tests/sprites/out of screen.js new file mode 100644 index 00000000..efba6bc9 --- /dev/null +++ b/Tests/sprites/out of screen.js @@ -0,0 +1,29 @@ +(function() { + var game = new Phaser.Game(this, 'game', 800, 600, init, create, update, render); + + function init() { + game.load.spritesheet('rect', 'assets/buttons/number-buttons-90x90.png', 90, 90); + game.load.start(); + } + function create() { + var rect, factor; + for (var i = 0; i < 16; i++) { + rect = game.add.sprite(10 + Math.random() * 700, 10 + Math.random() * 300, 'rect', Math.round(Math.random() * 5)); + factor = 0.2 + Math.random() * 2; + rect.transform.scale.setTo(factor, factor); + factor = 2 + Math.random() * 6; + rect.speed = factor; + } + console.log(game.world.group.length); + } + function update() { + game.world.group.forEach(function(rect) { + // Apply speed to each rect. + rect.y += rect.speed; + // Move the rect back to screen if it's not. + if (!Phaser.SpriteUtils.onScreen(rect)) { + rect.y = 0; + } + }); + } +})(); diff --git a/Tests/sprites/rotate around.js b/Tests/sprites/rotate around.js new file mode 100644 index 00000000..01efc3fc --- /dev/null +++ b/Tests/sprites/rotate around.js @@ -0,0 +1,40 @@ +(function() { + var game = new Phaser.Game(this, 'game', 800, 600, init, create, update, render); + + var rotationSrv, angle = 0; + + function init() { + game.load.spritesheet('x', 'assets/sprites/x.png', 220, 160); + game.load.start(); + } + function create() { + // Create 6 sprites rotating around the center at the beginning. + for (var i = 0; i < 3; i++) { + game.add.sprite(210 - ((i % 2) ? 140 : 0), 120 * (i + 1), 'x', i); + game.add.sprite(370 + ((i % 2) ? 140 : 0), 120 * (i + 1), 'x', i + 3); + } + + // Set a default rotation server pointer. + rotationSrv = new Phaser.Point(game.stage.centerX, game.stage.centerY); + + // Rotate all the sprites around the touch point. + game.input.onTap.add(function(pointer) { + rotationSrv.x = pointer.position.x; + rotationSrv.y = pointer.position.y; + }); + } + function update() { + angle += 0.1; + + game.world.group.forEach(function(obj) { + var resPointer = new Phaser.Point(obj.x, obj.y); + Phaser.PointUtils.rotateAroundPoint(resPointer, rotationSrv, angle); + obj.x = resPointer.x; + obj.y = resPointer.y; + }); + } + function render() { + Phaser.DebugUtils.context.fillStyle = '#fff'; + Phaser.DebugUtils.context.fillText('Tap or click to set new rotation point.', 280, 100); + } +})(); diff --git a/Tests/tweens/easing example 1.js b/Tests/tweens/easing example 1.js new file mode 100644 index 00000000..bc2a3976 --- /dev/null +++ b/Tests/tweens/easing example 1.js @@ -0,0 +1,22 @@ +/// +(function () { + var game = new Phaser.Game(this, 'game', 800, 600, init, create); + + function init() { + game.load.spritesheet('shadow', 'assets/tests/tween/shadow.png', 80, 15); + game.load.spritesheet('PHASER', 'assets/tests/tween/PHASER.png', 70, 90); + game.load.start(); + } + function create() { + var item; + for (var i = 0; i < 6; i++) { + item = game.add.sprite(190 + 69 * i, -100, '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); + } + + // Set background color to white. + game.stage.backgroundColor = '#fff'; + } +})(); diff --git a/Tests/tweens/easing example 2.js b/Tests/tweens/easing example 2.js new file mode 100644 index 00000000..491ebd49 --- /dev/null +++ b/Tests/tweens/easing example 2.js @@ -0,0 +1,27 @@ +/// +(function () { + var game = new Phaser.Game(this, 'game', 800, 600, init, create); + + function init() { + game.load.spritesheet('shadow', 'assets/tests/tween/shadow.png', 80, 15); + game.load.spritesheet('PHASER', 'assets/tests/tween/PHASER.png', 70, 90); + game.load.start(); + } + function create() { + var item; + for (var i = 0; i < 6; i++) { + item = game.add.sprite(190 + 69 * i, -100, '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); + // Add another rotation tween to the same character. + // Notice that depends on the default origin setting, characters will + // rotate around the left-top corner which looks a little strange. + game.add.tween(item) + .to({rotation: 360}, 2400, Phaser.Easing.Cubic.In, true, 1000 + 400 * i, false); + } + + // Set background color to white. + game.stage.backgroundColor = '#fff'; + } +})(); diff --git a/Tests/tweens/easing example 3.js b/Tests/tweens/easing example 3.js new file mode 100644 index 00000000..b914e734 --- /dev/null +++ b/Tests/tweens/easing example 3.js @@ -0,0 +1,27 @@ +/// +(function () { + var game = new Phaser.Game(this, 'game', 800, 600, init, create); + + function init() { + game.load.spritesheet('shadow', 'assets/tests/tween/shadow.png', 80, 15); + game.load.spritesheet('PHASER', 'assets/tests/tween/PHASER.png', 70, 90); + game.load.start(); + } + function create() { + var item, tween; + for (var i = 0; i < 6; i++) { + item = game.add.sprite(190 + 69 * i, -100, 'PHASER', i); + // Add a simple bounce tween to each character's position. + tween = game.add.tween(item) + .to({y: 240}, 2400, Phaser.Easing.Bounce.Out, true, 1000 + 400 * i, false); + // Chain another tween to the character after it falls down. + tween.chain( + game.add.tween(item) + .to({y: 640}, 1400, Phaser.Easing.Circular.In, false, 0, false) + ); + } + + // Set background color to white. + game.stage.backgroundColor = '#fff'; + } +})(); diff --git a/Tests/tweens/easing example 4.js b/Tests/tweens/easing example 4.js new file mode 100644 index 00000000..b31b6c09 --- /dev/null +++ b/Tests/tweens/easing example 4.js @@ -0,0 +1,37 @@ +/// +(function () { + var game = new Phaser.Game(this, 'game', 800, 600, init, create); + + function init() { + game.load.spritesheet('shadow', 'assets/tests/tween/shadow.png', 80, 15); + game.load.spritesheet('PHASER', 'assets/tests/tween/PHASER.png', 70, 90); + game.load.start(); + } + function create() { + var item, tween; + for (var i = 0; i < 6; i++) { + item = game.add.sprite(190 + 69 * i, -100, 'PHASER', i); + // Set origin to the center to make the rotation look better. + item.transform.origin.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, true, 1000 + 400 * i, false); + // A more complex chain, add a falling and a rotating after + // the first tween done. Notice that tween.chain(t1).chain(t2) + // will not chain the t2 to the t1, they're both chained to + // the tween itself so they'll start the same time. + tween + .chain( + game.add.tween(item) + .to({y: 640}, 1400, Phaser.Easing.Circular.In, false, 0, false) + ) + .chain( + game.add.tween(item) + .to({rotation: 720}, 1600, Phaser.Easing.Cubic.Out, false, 200, false) + ); + } + + // Set background color to white. + game.stage.backgroundColor = '#fff'; + } +})(); diff --git a/Tests/tweens/easing example 5.js b/Tests/tweens/easing example 5.js new file mode 100644 index 00000000..aa0f276d --- /dev/null +++ b/Tests/tweens/easing example 5.js @@ -0,0 +1,38 @@ +/// +(function () { + var game = new Phaser.Game(this, 'game', 800, 600, init, create); + + function init() { + game.load.spritesheet('shadow', 'assets/tests/tween/shadow.png', 138, 15); + game.load.spritesheet('PHASER', 'assets/tests/tween/PHASER.png', 70, 90); + game.load.start(); + } + function create() { + var item, shadow, tween; + 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.transform.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.transform.origin.setTo(0.5, 0.5); + game.add.tween(shadow.transform.scale) + .to({x: 1.0, y: 1.0}, 2400, Phaser.Easing.Bounce.Out, true, 1000 + 400 * i, false); + + // 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.transform.origin.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, true, 1000 + 400 * i, false); + } + + // Set background color to white. + game.stage.backgroundColor = '#fff'; + } +})(); diff --git a/Tests/tweens/easing example 6.js b/Tests/tweens/easing example 6.js new file mode 100644 index 00000000..023b251b --- /dev/null +++ b/Tests/tweens/easing example 6.js @@ -0,0 +1,53 @@ +/// +(function () { + var game = new Phaser.Game(this, 'game', 800, 600, init, create); + + function init() { + game.load.spritesheet('shadow', 'assets/tests/tween/shadow.png', 80, 15); + game.load.spritesheet('PHASER', 'assets/tests/tween/PHASER.png', 70, 90); + game.load.spritesheet('ribbon', 'assets/tests/tween/ribbon.png', 731, 49); + game.load.start(); + } + function create() { + var ribbon = game.add.sprite(-1000, 256, 'ribbon'); + ribbon.transform.scale.setTo(1.2, 1.0); + // Add ribbon appear animation. + var tween = game.add.tween(ribbon) + .to({x: -218}, 2400, Phaser.Easing.Elastic.Out, true, 0, false); + + // Add characters and give them a delay so they'll appear after the + // ribbon already there. + var item; + var letterGroup = game.add.group(); + for (var i = 0; i < 6; i++) { + item = game.add.sprite(80 + 69 * i, -100, 'PHASER', i); + letterGroup.add(item); + // Set origin to the center to make the rotation look better. + item.transform.origin.setTo(0.5, 0.5); + // Add a simple bounce tween to each character's position. + tween = game.add.tween(item) + .to({y: 240}, 2000, Phaser.Easing.Bounce.Out, true, 1600 + 400 * i, false); + } + + // Move the ribbon out after the last letter landded. + // Instead of using delay, we can use the callback of tweens. + tween.onComplete.add(function() { + tween = game.add.tween(ribbon) + .to({x: -1000}, 1600, Phaser.Easing.Elastic.In, true, 500, false); + // Again add falling animations to the letter after ribbon disappeared. + tween.onComplete.add(function() { + var index = 5; + letterGroup.forEach(function(item) { + game.add.tween(item) + .to({y: 640}, 1000, Phaser.Easing.Circular.In, true, index * 100, false); + game.add.tween(item) + .to({rotation: 720}, 1600, Phaser.Easing.Cubic.Out, true, 200 + index * 300, false); + index--; + }); + }); + }); + + // Set background color to white. + game.stage.backgroundColor = '#fff'; + } +})();