mirror of
https://github.com/photonstorm/phaser
synced 2024-11-10 15:14:47 +00:00
Add typescript source for the 46 tests added last time.
This commit is contained in:
Sean
parent
04106b1388
commit
7cae283a4c
49 changed files with 2485 additions and 0 deletions
64
Tests/cameras/basic follow.ts
Normal file
64
Tests/cameras/basic follow.ts
Normal file
|
|
@ -0,0 +1,64 @@
|
|||
/// <reference path="../../Phaser/Game.ts" />
|
||||
(function () {
|
||||
var game = new Phaser.Game(this, 'game', 800, 600, init, create, update);
|
||||
|
||||
var ufo: Phaser.Sprite;
|
||||
var speed: Number = 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('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);
|
||||
|
||||
// ufo spirte
|
||||
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 camera follows ufo
|
||||
game.camera.follow(ufo);
|
||||
}
|
||||
function update() {
|
||||
if (game.input.keyboard.isDown(Phaser.Keyboard.LEFT)) {
|
||||
ufo.x -= speed;
|
||||
ufo.rotation = -15;
|
||||
}
|
||||
else if (game.input.keyboard.isDown(Phaser.Keyboard.RIGHT)) {
|
||||
ufo.x += speed;
|
||||
ufo.rotation = 15;
|
||||
}
|
||||
else {
|
||||
ufo.rotation = 0;
|
||||
}
|
||||
if (game.input.keyboard.isDown(Phaser.Keyboard.UP)) {
|
||||
ufo.y -= speed;
|
||||
}
|
||||
else if (game.input.keyboard.isDown(Phaser.Keyboard.DOWN)) {
|
||||
ufo.y += speed;
|
||||
}
|
||||
}
|
||||
})();
|
||||
45
Tests/cameras/camera fx 1.ts
Normal file
45
Tests/cameras/camera fx 1.ts
Normal file
|
|
@ -0,0 +1,45 @@
|
|||
/// <reference path="../../Phaser/Game.ts" />
|
||||
(function () {
|
||||
var game = new Phaser.Game(this, 'game', 800, 600, init, create, null, render);
|
||||
|
||||
var btn1: Phaser.Button,
|
||||
btn2: Phaser.Button,
|
||||
btn3: Phaser.Button;
|
||||
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!');
|
||||
});
|
||||
}
|
||||
})();
|
||||
46
Tests/cameras/camera fx 2.ts
Normal file
46
Tests/cameras/camera fx 2.ts
Normal file
|
|
@ -0,0 +1,46 @@
|
|||
/// <reference path="../../Phaser/Game.ts" />
|
||||
(function () {
|
||||
var game = new Phaser.Game(this, 'game', 800, 600, init, create, null, render);
|
||||
|
||||
var btn1: Phaser.Button,
|
||||
btn2: Phaser.Button,
|
||||
btn3: Phaser.Button;
|
||||
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!');
|
||||
});
|
||||
}
|
||||
})();
|
||||
46
Tests/cameras/camera fx 3.ts
Normal file
46
Tests/cameras/camera fx 3.ts
Normal file
|
|
@ -0,0 +1,46 @@
|
|||
/// <reference path="../../Phaser/Game.ts" />
|
||||
(function () {
|
||||
var game = new Phaser.Game(this, 'game', 800, 600, init, create, null, render);
|
||||
|
||||
var btn1: Phaser.Button,
|
||||
btn2: Phaser.Button,
|
||||
btn3: Phaser.Button;
|
||||
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!');
|
||||
});
|
||||
}
|
||||
})();
|
||||
72
Tests/cameras/camera scale.ts
Normal file
72
Tests/cameras/camera scale.ts
Normal file
|
|
@ -0,0 +1,72 @@
|
|||
/// <reference path="../../Phaser/Game.ts" />
|
||||
(function () {
|
||||
var game = new Phaser.Game(this, 'game', 800, 600, init, create, update, render);
|
||||
|
||||
var zombieCamera: Phaser.Camera;
|
||||
|
||||
var zombie: Phaser.Sprite;
|
||||
var walkSpeed: Number = 2,
|
||||
direction: Number = 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);
|
||||
}
|
||||
})();
|
||||
19
Tests/cameras/camera texture.ts
Normal file
19
Tests/cameras/camera texture.ts
Normal file
|
|
@ -0,0 +1,19 @@
|
|||
/// <reference path="../../Phaser/Game.ts" />
|
||||
(function () {
|
||||
var game = new Phaser.Game(this, 'game', 800, 600, init, create, null, render);
|
||||
|
||||
function init() {
|
||||
game.world.setSize(800, 600, true);
|
||||
game.load.image('background', 'assets/misc/water_texture.jpg');
|
||||
|
||||
game.load.start();
|
||||
}
|
||||
function create() {
|
||||
game.camera.texture.loadImage('background', false);
|
||||
}
|
||||
function render() {
|
||||
Phaser.DebugUtils.context.fillStyle = 'rgb(255, 255, 255)';
|
||||
Phaser.DebugUtils.context.fillText('Draw background image using camera.texture property.',
|
||||
196, 320);
|
||||
}
|
||||
})();
|
||||
102
Tests/cameras/follow styles.ts
Normal file
102
Tests/cameras/follow styles.ts
Normal file
|
|
@ -0,0 +1,102 @@
|
|||
/// <reference path="../../Phaser/Game.ts" />
|
||||
(function () {
|
||||
var game = new Phaser.Game(this, 'game', 800, 600, init, create, update, render);
|
||||
|
||||
var ufo: Phaser.Sprite,
|
||||
speed: Number = 4;
|
||||
|
||||
var btn0: Phaser.Button,
|
||||
btn1: Phaser.Button,
|
||||
btn2: Phaser.Button,
|
||||
btn3: Phaser.Button;
|
||||
var style: String = 'default';
|
||||
|
||||
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('button', 'assets/buttons/follow-style-button.png', 224, 70);
|
||||
|
||||
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.1);
|
||||
game.add.sprite(0, 400, 'river')
|
||||
.transform.scrollFactor.setTo(1.3, 0.16);
|
||||
game.add.sprite(200, 120, 'cloud0')
|
||||
.transform.scrollFactor.setTo(0.3, 0.1);
|
||||
game.add.sprite(-60, 120, 'cloud1')
|
||||
.transform.scrollFactor.setTo(0.5, 0.1);
|
||||
game.add.sprite(900, 170, 'cloud2')
|
||||
.transform.scrollFactor.setTo(0.7, 0.1);
|
||||
// ufo spirte
|
||||
ufo = game.add.sprite(360, 240, 'ufo');
|
||||
ufo.animations.add('fly', null, 30, false);
|
||||
ufo.animations.play('fly');
|
||||
ufo.transform.origin.setTo(0.5, 0.5);
|
||||
|
||||
// make camera follows ufo
|
||||
game.camera.follow(ufo);
|
||||
|
||||
// follow style switch buttons
|
||||
btn0 = game.add.button(16, 40, 'button', lockonFollow, 0, 0, 0);
|
||||
btn1 = game.add.button(16, 120, 'button', platformerFollow, 1, 1, 1);
|
||||
btn2 = game.add.button(16, 200, 'button', topdownFollow, 2, 2, 2);
|
||||
btn3 = game.add.button(16, 280, 'button', topdownTightFollow, 3, 3, 3);
|
||||
}
|
||||
function update() {
|
||||
if (game.input.keyboard.isDown(Phaser.Keyboard.LEFT)) {
|
||||
ufo.x -= speed;
|
||||
ufo.rotation = -15;
|
||||
}
|
||||
else if (game.input.keyboard.isDown(Phaser.Keyboard.RIGHT)) {
|
||||
ufo.x += speed;
|
||||
ufo.rotation = 15;
|
||||
}
|
||||
else {
|
||||
ufo.rotation = 0;
|
||||
}
|
||||
if (game.input.keyboard.isDown(Phaser.Keyboard.UP)) {
|
||||
ufo.y -= speed;
|
||||
}
|
||||
else if (game.input.keyboard.isDown(Phaser.Keyboard.DOWN)) {
|
||||
ufo.y += speed;
|
||||
}
|
||||
}
|
||||
function render() {
|
||||
if (game.camera.deadzone) {
|
||||
Phaser.DebugUtils.renderRectangle(game.camera.deadzone, 'rgba(240, 112, 111, 0.4)');
|
||||
}
|
||||
// game.camera.renderDebugInfo(400, 16);
|
||||
Phaser.DebugUtils.context.fillStyle = '#fff';
|
||||
Phaser.DebugUtils.context.fillText('Click buttons to switch between different styles.', 360, 32);
|
||||
Phaser.DebugUtils.context.fillText('Current style: ' + style, 360, 48);
|
||||
}
|
||||
function lockonFollow() {
|
||||
game.camera.follow(ufo, Phaser.Camera.STYLE_LOCKON);
|
||||
style = 'STYLE_LOCKON';
|
||||
}
|
||||
function platformerFollow() {
|
||||
game.camera.follow(ufo, Phaser.Camera.STYLE_PLATFORMER);
|
||||
style = 'STYLE_PLATFORMER';
|
||||
}
|
||||
function topdownFollow() {
|
||||
game.camera.follow(ufo, Phaser.Camera.STYLE_TOPDOWN);
|
||||
style = 'STYLE_TOPDOWN';
|
||||
}
|
||||
function topdownTightFollow() {
|
||||
game.camera.follow(ufo, Phaser.Camera.STYLE_TOPDOWN_TIGHT);
|
||||
style = 'STYLE_TOPDOWN_TIGHT';
|
||||
}
|
||||
})();
|
||||
53
Tests/cameras/hide from camera.ts
Normal file
53
Tests/cameras/hide from camera.ts
Normal file
|
|
@ -0,0 +1,53 @@
|
|||
/// <reference path="../../Phaser/Game.ts" />
|
||||
(function () {
|
||||
var game = new Phaser.Game(this, 'game', 800, 600, init, create, update, render);
|
||||
|
||||
var radar: Phaser.Sprite;
|
||||
var ships: Phaser.Sprite[] = [];
|
||||
|
||||
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: Phaser.Sprite = 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);
|
||||
}
|
||||
})();
|
||||
70
Tests/cameras/multi camera.ts
Normal file
70
Tests/cameras/multi camera.ts
Normal file
|
|
@ -0,0 +1,70 @@
|
|||
/// <reference path="../../Phaser/Game.ts" />
|
||||
(function () {
|
||||
var game = new Phaser.Game(this, 'game', 800, 600, init, create, update, render);
|
||||
|
||||
var zombieCamera: Phaser.Camera;
|
||||
|
||||
var zombie: Phaser.Sprite;
|
||||
var walkSpeed: Number = 2,
|
||||
direction: Number = 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);
|
||||
// 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);
|
||||
}
|
||||
})();
|
||||
44
Tests/cameras/scrollfactor compare.ts
Normal file
44
Tests/cameras/scrollfactor compare.ts
Normal file
|
|
@ -0,0 +1,44 @@
|
|||
/// <reference path="../../Phaser/Game.ts" />
|
||||
(function () {
|
||||
var game = new Phaser.Game(this, 'game', 800, 600, init, create, update, render);
|
||||
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.start();
|
||||
}
|
||||
function create() {
|
||||
// background sky, which does not move at all
|
||||
game.add.sprite(0, 0, 'sky')
|
||||
.transform.scrollFactor.setTo(0, 0);
|
||||
|
||||
// clouds with different scroll factor which moves slower than camera
|
||||
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);
|
||||
|
||||
// forground objects which moves equal or faster than camera
|
||||
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);
|
||||
}
|
||||
function update() {
|
||||
if (game.input.keyboard.isDown(Phaser.Keyboard.LEFT)) {
|
||||
game.camera.x -= 3;
|
||||
}
|
||||
else if (game.input.keyboard.isDown(Phaser.Keyboard.RIGHT)) {
|
||||
game.camera.x += 3;
|
||||
}
|
||||
}
|
||||
function render() {
|
||||
// game.camera.renderDebugInfo(32, 32);
|
||||
}
|
||||
})();
|
||||
40
Tests/groups/add to group 1.ts
Normal file
40
Tests/groups/add to group 1.ts
Normal file
|
|
@ -0,0 +1,40 @@
|
|||
/// <reference path="../../Phaser/Game.ts" />
|
||||
(function () {
|
||||
var game = new Phaser.Game(this, 'game', 800, 600, init, create, null, render);
|
||||
|
||||
var friendAndFoe: Phaser.Group,
|
||||
enemies: Phaser.Group;
|
||||
|
||||
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: Phaser.Sprite = 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);
|
||||
}
|
||||
})();
|
||||
41
Tests/groups/add to group 2.ts
Normal file
41
Tests/groups/add to group 2.ts
Normal file
|
|
@ -0,0 +1,41 @@
|
|||
/// <reference path="../../Phaser/Game.ts" />
|
||||
(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();
|
||||
}
|
||||
|
||||
var friendAndFoe: Phaser.Group,
|
||||
enemies: Phaser.Group;
|
||||
|
||||
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);
|
||||
}
|
||||
})();
|
||||
30
Tests/groups/bring to top.ts
Normal file
30
Tests/groups/bring to top.ts
Normal file
|
|
@ -0,0 +1,30 @@
|
|||
(function() {
|
||||
var game = new Phaser.Game(this, 'game', 800, 600, init, create, null, render);
|
||||
|
||||
var container: Phaser.Group;
|
||||
|
||||
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);
|
||||
}
|
||||
})();
|
||||
37
Tests/groups/call all.ts
Normal file
37
Tests/groups/call all.ts
Normal file
|
|
@ -0,0 +1,37 @@
|
|||
/// <reference path="../../Phaser/Game.ts" />
|
||||
(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: Phaser.Sprite;
|
||||
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);
|
||||
}
|
||||
})();
|
||||
38
Tests/groups/direct render.ts
Normal file
38
Tests/groups/direct render.ts
Normal file
|
|
@ -0,0 +1,38 @@
|
|||
/// <reference path="../../Phaser/Game.ts" />
|
||||
(function () {
|
||||
var game = new Phaser.Game(this, 'game', 800, 600, init, create, null, render);
|
||||
|
||||
// Left and right group.
|
||||
var left:: Phaser.Group, right: Phaser.Group;
|
||||
// The first selected item.
|
||||
var selected: Phaser.Sprite = 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: Phaser.Sprite;
|
||||
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);
|
||||
}
|
||||
})();
|
||||
35
Tests/groups/for each.ts
Normal file
35
Tests/groups/for each.ts
Normal file
|
|
@ -0,0 +1,35 @@
|
|||
/// <reference path="../../Phaser/Game.ts" />
|
||||
(function () {
|
||||
var game = new Phaser.Game(this, 'game', 800, 600, init, create, update, render);
|
||||
|
||||
var baseAlphaIncSpeed: Number = 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);
|
||||
}
|
||||
})();
|
||||
45
Tests/groups/get first 1.ts
Normal file
45
Tests/groups/get first 1.ts
Normal file
|
|
@ -0,0 +1,45 @@
|
|||
/// <reference path="../../Phaser/Game.ts" />
|
||||
(function () {
|
||||
var game = new Phaser.Game(this, 'game', 800, 600, init, create, update, render);
|
||||
|
||||
var timer: Number,
|
||||
cycle: Number;
|
||||
|
||||
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: Phaser.Sprite;
|
||||
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);
|
||||
}
|
||||
})();
|
||||
50
Tests/groups/get first 2.ts
Normal file
50
Tests/groups/get first 2.ts
Normal file
|
|
@ -0,0 +1,50 @@
|
|||
/// <reference path="../../Phaser/Game.ts" />
|
||||
(function () {
|
||||
var game = new Phaser.Game(this, 'game', 800, 600, init, create, update, render);
|
||||
|
||||
var timer: Number,
|
||||
cycle: Number;
|
||||
|
||||
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: Phaser.Sprite;
|
||||
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: Phaser.Sprite = 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);
|
||||
}
|
||||
})();
|
||||
60
Tests/groups/get first 3.ts
Normal file
60
Tests/groups/get first 3.ts
Normal file
|
|
@ -0,0 +1,60 @@
|
|||
/// <reference path="../../Phaser/Game.ts" />
|
||||
(function () {
|
||||
var game = new Phaser.Game(this, 'game', 800, 600, init, create, update, render);
|
||||
|
||||
var killTimer: Number,
|
||||
reviveTimer: Number,
|
||||
cycle: Number;
|
||||
|
||||
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: Phaser.Sprite;
|
||||
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: Phaser.Sprite = 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: Phaser.Sprite = 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);
|
||||
}
|
||||
})();
|
||||
74
Tests/groups/group as layer.ts
Normal file
74
Tests/groups/group as layer.ts
Normal file
|
|
@ -0,0 +1,74 @@
|
|||
/// <reference path="../../Phaser/Game.ts" />
|
||||
(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: Phaser.Group = game.add.group();
|
||||
skyLayer.z = 0;
|
||||
// Create the cloud layer, only beyond the sky.
|
||||
var cloudLayer: Phaser.Group = game.add.group();
|
||||
cloudLayer.z = 1;
|
||||
// Create the ground, behind the river and beyond clouds.
|
||||
var groundLayer: Phaser.Group = 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: Phaser.Group = game.add.group();
|
||||
spriteLayer.z = 3;
|
||||
// Create the river layer, beyond everything.
|
||||
var riverLayer: Phaser.Group = game.add.group();
|
||||
riverLayer.z = 4;
|
||||
|
||||
// Add sky background to skyLayer.
|
||||
var sky: Phaser.Sprite = new Phaser.Sprite(game, 0, 0, 'sky');
|
||||
sky.transform.scrollFactor.setTo(0, 0);
|
||||
skyLayer.add(sky);
|
||||
// Add clouds to cloudLayer.
|
||||
var cloud0: Phaser.Sprite = new Phaser.Sprite(game, 200, 120, 'cloud0');
|
||||
cloud0.transform.scrollFactor.setTo(0.3, 0.1);
|
||||
var cloud1: Phaser.Sprite = new Phaser.Sprite(game, -60, 120, 'cloud1');
|
||||
cloud1.transform.scrollFactor.setTo(0.5, 0.1);
|
||||
var cloud2: Phaser.Sprite = 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: Phaser.Sprite = new Phaser.Sprite(game, 0, 360, 'ground');
|
||||
ground.transform.scrollFactor.setTo(0.5, 0.1);
|
||||
groundLayer.add(ground);
|
||||
// Add river to riverLayer.
|
||||
var river: Phaser.Sprite = 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: Phaser.Sprite = 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);
|
||||
}
|
||||
})();
|
||||
70
Tests/groups/group transform 1.ts
Normal file
70
Tests/groups/group transform 1.ts
Normal file
|
|
@ -0,0 +1,70 @@
|
|||
/// <reference path="../../Phaser/Game.ts" />
|
||||
(function () {
|
||||
var game = new Phaser.Game(this, 'game', 800, 600, init, create, update, render);
|
||||
|
||||
var robot: Phaser.Group;
|
||||
var eye: Phaser.Sprite,
|
||||
body: Phaser.Sprite,
|
||||
leftArm: Phaser.Sprite,
|
||||
rightArm: Phaser.Sprite,
|
||||
leftLeg: Phaser.Sprite,
|
||||
rightLeg: Phaser.Sprite;
|
||||
|
||||
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: Phaser.Sprite;
|
||||
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);
|
||||
}
|
||||
})();
|
||||
52
Tests/groups/group transform 2.ts
Normal file
52
Tests/groups/group transform 2.ts
Normal file
|
|
@ -0,0 +1,52 @@
|
|||
/// <reference path="../../Phaser/Game.ts" />
|
||||
(function () {
|
||||
var game = new Phaser.Game(this, 'game', 800, 600, init, create, update, render);
|
||||
|
||||
var robot: Phaser.Group;
|
||||
var eye: Phaser.Sprite,
|
||||
body: Phaser.Sprite,
|
||||
leftArm: Phaser.Sprite,
|
||||
rightArm: Phaser.Sprite,
|
||||
leftLeg: Phaser.Sprite,
|
||||
rightLeg: Phaser.Sprite;
|
||||
|
||||
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: Phaser.Sprite;
|
||||
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);
|
||||
}
|
||||
})();
|
||||
55
Tests/groups/group transform 3.ts
Normal file
55
Tests/groups/group transform 3.ts
Normal file
|
|
@ -0,0 +1,55 @@
|
|||
/// <reference path="../../Phaser/Game.ts" />
|
||||
(function () {
|
||||
var game = new Phaser.Game(this, 'game', 800, 600, init, create, update, render);
|
||||
|
||||
var robot: Phaser.Group;
|
||||
var eye: Phaser.Sprite,
|
||||
body: Phaser.Sprite,
|
||||
leftArm: Phaser.Sprite,
|
||||
rightArm: Phaser.Sprite,
|
||||
leftLeg: Phaser.Sprite,
|
||||
rightLeg: Phaser.Sprite;
|
||||
|
||||
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: Phaser.Sprite;
|
||||
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);
|
||||
}
|
||||
})();
|
||||
|
|
@ -1,6 +1,10 @@
|
|||
/// <reference path="../../Phaser/Game.ts" />
|
||||
(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');
|
||||
|
|
|
|||
50
Tests/groups/recycle 1.ts
Normal file
50
Tests/groups/recycle 1.ts
Normal file
|
|
@ -0,0 +1,50 @@
|
|||
/// <reference path="../../Phaser/Game.ts" />
|
||||
(function () {
|
||||
var game = new Phaser.Game(this, 'game', 800, 600, init, create, null, render);
|
||||
|
||||
var friendAndFoe: Phaser.Group,
|
||||
enemies: Phaser.Group;
|
||||
|
||||
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: Phaser.Sprite = 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: Phaser.Sprite = 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);
|
||||
}
|
||||
})();
|
||||
53
Tests/groups/recycle 2.ts
Normal file
53
Tests/groups/recycle 2.ts
Normal file
|
|
@ -0,0 +1,53 @@
|
|||
/// <reference path="../../Phaser/Game.ts" />
|
||||
(function () {
|
||||
var game = new Phaser.Game(this, 'game', 800, 600, init, create, null, render);
|
||||
|
||||
var friendAndFoe: Phaser.Group,
|
||||
enemies: Phaser.Group;
|
||||
|
||||
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: Phaser.Sprite = 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: Phaser.Sprite = 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);
|
||||
}
|
||||
})();
|
||||
65
Tests/groups/remove.ts
Normal file
65
Tests/groups/remove.ts
Normal file
|
|
@ -0,0 +1,65 @@
|
|||
/// <reference path="../../Phaser/Game.ts" />
|
||||
(function () {
|
||||
var game = new Phaser.Game(this, 'game', 800, 600, init, create, update, render);
|
||||
|
||||
// Group contains items.
|
||||
var items: Phaser.Group;
|
||||
|
||||
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: Phaser.Sprite;
|
||||
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: Phaser.Sprite = game.add.sprite(400, 0, 'rect');
|
||||
rect.transform.scale.setTo(2.0, 3.0);
|
||||
var rect2: Phaser.Sprite = 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);
|
||||
}
|
||||
}
|
||||
}
|
||||
})();
|
||||
66
Tests/groups/replace.ts
Normal file
66
Tests/groups/replace.ts
Normal file
|
|
@ -0,0 +1,66 @@
|
|||
/// <reference path="../../Phaser/Game.ts" />
|
||||
(function () {
|
||||
var game = new Phaser.Game(this, 'game', 800, 600, init, create, update, render);
|
||||
|
||||
// Left and right group.
|
||||
var left: Phaser.Group, right: Phaser.Group;
|
||||
// The first selected item.
|
||||
var selected: Phaser.Sprite = 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: Phaser.Sprite;
|
||||
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);
|
||||
}
|
||||
})();
|
||||
31
Tests/groups/set all.ts
Normal file
31
Tests/groups/set all.ts
Normal file
|
|
@ -0,0 +1,31 @@
|
|||
/// <reference path="../../Phaser/Game.ts" />
|
||||
(function () {
|
||||
var game = new Phaser.Game(this, 'game', 800, 600, init, create, null, render);
|
||||
|
||||
var baseIncSpeed: Number = 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);
|
||||
}
|
||||
})();
|
||||
48
Tests/groups/sort 1.ts
Normal file
48
Tests/groups/sort 1.ts
Normal file
|
|
@ -0,0 +1,48 @@
|
|||
(function() {
|
||||
var game = new Phaser.Game(this, 'game', 800, 600, init, create, update, render);
|
||||
|
||||
var xTop: Phaser.Group,
|
||||
yTop: Phaser.Group,
|
||||
zTop: Phaser.Group;
|
||||
|
||||
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: Number;
|
||||
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);
|
||||
}
|
||||
})();
|
||||
57
Tests/groups/sort 2.ts
Normal file
57
Tests/groups/sort 2.ts
Normal file
|
|
@ -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: Phaser.Group;
|
||||
|
||||
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: Phaser.Sprite;
|
||||
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);
|
||||
}
|
||||
})();
|
||||
60
Tests/groups/sub groups.ts
Normal file
60
Tests/groups/sub groups.ts
Normal file
|
|
@ -0,0 +1,60 @@
|
|||
/// <reference path="../../Phaser/Game.ts" />
|
||||
(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: Phaser.Group,
|
||||
enemies: Phaser.Group;
|
||||
|
||||
// Groups for teaming up stuff.
|
||||
var normalBaddies: Phaser.Group,
|
||||
purpleBaddies: Phaser.Group;
|
||||
|
||||
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: Phaser.Sprite;
|
||||
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);
|
||||
}
|
||||
})();
|
||||
46
Tests/input/drop limitation.ts
Normal file
46
Tests/input/drop limitation.ts
Normal file
|
|
@ -0,0 +1,46 @@
|
|||
/// <reference path="../../Phaser/Game.ts" />
|
||||
(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: Phaser.Sprite;
|
||||
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;
|
||||
}
|
||||
}
|
||||
})();
|
||||
81
Tests/input/keyboard 1.ts
Normal file
81
Tests/input/keyboard 1.ts
Normal file
|
|
@ -0,0 +1,81 @@
|
|||
/// <reference path="../../Phaser/Game.ts" />
|
||||
(function () {
|
||||
var game = new Phaser.Game(this, 'game', 800, 600, init, create, update);
|
||||
|
||||
var ufo: Phaser.Sprite,
|
||||
leftBtn: Phaser.Sprite,
|
||||
rightBtn: Phaser.Sprite;
|
||||
var speed: Number = 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.');
|
||||
}
|
||||
})();
|
||||
110
Tests/input/keyboard 2.ts
Normal file
110
Tests/input/keyboard 2.ts
Normal file
|
|
@ -0,0 +1,110 @@
|
|||
/// <reference path="../../Phaser/Game.ts" />
|
||||
(function () {
|
||||
var game = new Phaser.Game(this, 'game', 800, 600, init, create, update);
|
||||
|
||||
var ufo: Phaser.Sprite,
|
||||
leftBtn: Phaser.Sprite,
|
||||
rightBtn: Phaser.Sprite,
|
||||
spaceBtn: Phaser.Sprite;
|
||||
|
||||
var speed: Number = 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);
|
||||
}
|
||||
})();
|
||||
52
Tests/misc/color utils 1.ts
Normal file
52
Tests/misc/color utils 1.ts
Normal file
|
|
@ -0,0 +1,52 @@
|
|||
(function() {
|
||||
var game = new Phaser.Game(this, 'game', 800, 600, init, create, null, render);
|
||||
|
||||
var colorWheel: Phaser.Sprite,
|
||||
selected: Phaser.Sprite,
|
||||
color: String = '#CCA22B';
|
||||
var offset = {
|
||||
x: 300 - 578 / 2,
|
||||
y: 300 - 550 / 2
|
||||
};
|
||||
var rect: Phaser.Rectangle,
|
||||
rectSize: Number = 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);
|
||||
}
|
||||
})();
|
||||
60
Tests/misc/color utils 2.ts
Normal file
60
Tests/misc/color utils 2.ts
Normal file
|
|
@ -0,0 +1,60 @@
|
|||
(function() {
|
||||
var game = new Phaser.Game(this, 'game', 800, 600, init, create, null, render);
|
||||
|
||||
var colorWheel: Phaser.Sprite,
|
||||
selected: Phaser.Sprite,
|
||||
color: Number = 0xAACCA22B,
|
||||
colorStr: String = '#CCA22B';
|
||||
var offset = {
|
||||
x: 300 - 578 / 2,
|
||||
y: 300 - 550 / 2
|
||||
};
|
||||
var rect: Phaser.Rectangle,
|
||||
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);
|
||||
}
|
||||
})();
|
||||
153
Tests/misc/color utils 3.ts
Normal file
153
Tests/misc/color utils 3.ts
Normal file
|
|
@ -0,0 +1,153 @@
|
|||
(function() {
|
||||
var game = new Phaser.Game(this, 'game', 800, 600, init, create, null, render);
|
||||
|
||||
var colorWheel: Phaser.Sprite,
|
||||
selected: Phaser.Sprite,
|
||||
compHarmony: Phaser.Sprite,
|
||||
analoHarmony: Phaser.Sprite, analoHarmony1: Phaser.Sprite,
|
||||
splitHarmony: Phaser.Sprite, splitHarmony1: Phaser.Sprite,
|
||||
triaHarmony: Phaser.Sprite, triaHarmony1: Phaser.Sprite,
|
||||
|
||||
color: Number = 0xAACCA22B, colorStr: String = '#CCA22B',
|
||||
compHColor: Number,
|
||||
analoColor: Number, splitColor: Number, triaColor: Number,
|
||||
analoColor1: Number, splitColor1: Number, triaColor1: Number;
|
||||
|
||||
var offset = {
|
||||
x: 300 - 578 / 2,
|
||||
y: 300 - 550 / 2
|
||||
};
|
||||
var rect: Phaser.Rectangle,
|
||||
rectSize: Number = 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: String = Phaser.ColorUtils.RGBtoWebstring(compHColor),
|
||||
analStr: String = Phaser.ColorUtils.RGBtoWebstring(analoColor),
|
||||
analStr1: String = Phaser.ColorUtils.RGBtoWebstring(analoColor1),
|
||||
spliStr: String = Phaser.ColorUtils.RGBtoWebstring(splitColor),
|
||||
spliStr1: String = Phaser.ColorUtils.RGBtoWebstring(splitColor1),
|
||||
triaStr: String = Phaser.ColorUtils.RGBtoWebstring(triaColor),
|
||||
triaStr1: String = 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);
|
||||
}
|
||||
})();
|
||||
23
Tests/misc/dynamic texture 1.ts
Normal file
23
Tests/misc/dynamic texture 1.ts
Normal file
|
|
@ -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: Phaser.DynamicTexture;
|
||||
|
||||
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);
|
||||
}
|
||||
})();
|
||||
27
Tests/misc/dynamic texture 2.ts
Normal file
27
Tests/misc/dynamic texture 2.ts
Normal file
|
|
@ -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: Phaser.DynamicTexture;
|
||||
|
||||
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: Phaser.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);
|
||||
}
|
||||
})();
|
||||
32
Tests/misc/dynamic texture 3.ts
Normal file
32
Tests/misc/dynamic texture 3.ts
Normal file
|
|
@ -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: Phaser.DynamicTexture;
|
||||
|
||||
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: Phaser.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);
|
||||
}
|
||||
})();
|
||||
30
Tests/sprites/out of screen.ts
Normal file
30
Tests/sprites/out of screen.ts
Normal file
|
|
@ -0,0 +1,30 @@
|
|||
(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: Phaser.Sprite,
|
||||
factor: Number;
|
||||
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;
|
||||
}
|
||||
});
|
||||
}
|
||||
})();
|
||||
41
Tests/sprites/rotate around.ts
Normal file
41
Tests/sprites/rotate around.ts
Normal file
|
|
@ -0,0 +1,41 @@
|
|||
(function() {
|
||||
var game = new Phaser.Game(this, 'game', 800, 600, init, create, update, render);
|
||||
|
||||
var rotationSrv: Phaser.Point,
|
||||
angle: Number = 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);
|
||||
}
|
||||
})();
|
||||
22
Tests/tweens/easing example 1.ts
Normal file
22
Tests/tweens/easing example 1.ts
Normal file
|
|
@ -0,0 +1,22 @@
|
|||
/// <reference path="../../Phaser/Game.ts" />
|
||||
(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: Phaser.Sprite;
|
||||
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';
|
||||
}
|
||||
})();
|
||||
27
Tests/tweens/easing example 2.ts
Normal file
27
Tests/tweens/easing example 2.ts
Normal file
|
|
@ -0,0 +1,27 @@
|
|||
/// <reference path="../../Phaser/Game.ts" />
|
||||
(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: Phaser.Sprite;
|
||||
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';
|
||||
}
|
||||
})();
|
||||
28
Tests/tweens/easing example 3.ts
Normal file
28
Tests/tweens/easing example 3.ts
Normal file
|
|
@ -0,0 +1,28 @@
|
|||
/// <reference path="../../Phaser/Game.ts" />
|
||||
(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: Phaser.Sprite,
|
||||
tween: Phaser.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';
|
||||
}
|
||||
})();
|
||||
38
Tests/tweens/easing example 4.ts
Normal file
38
Tests/tweens/easing example 4.ts
Normal file
|
|
@ -0,0 +1,38 @@
|
|||
/// <reference path="../../Phaser/Game.ts" />
|
||||
(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: Phaser.Sprite,
|
||||
tween: Phaser.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';
|
||||
}
|
||||
})();
|
||||
40
Tests/tweens/easing example 5.ts
Normal file
40
Tests/tweens/easing example 5.ts
Normal file
|
|
@ -0,0 +1,40 @@
|
|||
/// <reference path="../../Phaser/Game.ts" />
|
||||
(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: Phaser.Sprite,
|
||||
shadow: Phaser.Sprite,
|
||||
tween: Phaser.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';
|
||||
}
|
||||
})();
|
||||
53
Tests/tweens/easing example 6.ts
Normal file
53
Tests/tweens/easing example 6.ts
Normal file
|
|
@ -0,0 +1,53 @@
|
|||
/// <reference path="../../Phaser/Game.ts" />
|
||||
(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: Phaser.Sprite = game.add.sprite(-1000, 256, 'ribbon');
|
||||
ribbon.transform.scale.setTo(1.2, 1.0);
|
||||
// Add ribbon appear animation.
|
||||
var tween: Phaser.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: Phaser.Sprite;
|
||||
var letterGroup: Phaser.Group = 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: Number = 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';
|
||||
}
|
||||
})();
|
||||
Loading…
Reference in a new issue