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

46 tests with assets and javascript code.

Browse Source
This commit is contained in:
Sean
2013-07-18 15:13:58 +08:00
parent d620fc7796
commit 9f30f656bc
83 changed files with 2168 additions and 94 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Tests/misc/color utils 1.js
+49
View File
@@ -0,0 +1,49 @@
(function() {
var game = new Phaser.Game(this, 'game', 800, 600, init, create, null, render);
var colorWheel, selected, color = '#CCA22B';
var offset = {
x: 300 - 578 / 2,
y: 300 - 550 / 2
};
var rect, rectSize = 24;
function init() {
game.load.image('color-wheel', 'assets/pics/color-wheel.png');
game.load.start();
}
function create() {
// Create color wheel texture.
colorWheel = game.add.dynamicTexture(578, 550);
colorWheel.pasteImage('color-wheel');
// Create a rectangle shows the color you just selected.
rect = new Phaser.Rectangle(0, 0, rectSize, rectSize);
selected = game.add.sprite(600, 430);
selected.width = rectSize;
selected.height = rectSize;
selected.texture.loadDynamicTexture(game.add.dynamicTexture(rectSize, rectSize));
selected.texture.dynamicTexture.fillRect(rect, color);
// Get the color under the position you tapped or clicked.
var pos = {};
game.input.onTap.add(function(pointer) {
pos.x = pointer.position.x - offset.x;
pos.y = pointer.position.y - offset.y;
color = Phaser.ColorUtils.RGBtoWebstring(colorWheel.getPixel32(pos.x, pos.y));
// Set the rectangle's color to new selected one.
selected.texture.dynamicTexture.fillRect(rect, color);
});
// Set the background color to white.
game.stage.backgroundColor = '#fff';
}
function render() {
colorWheel.render(offset.x, offset.y);
Phaser.DebugUtils.context.fillStyle = '#000';
Phaser.DebugUtils.context.fillText('Tap or click the color wheel to select a color.', 480, 52);
Phaser.DebugUtils.context.fillText(color, 646, 452);
}
})();
Tests/misc/color utils 2.js
+57
View File
@@ -0,0 +1,57 @@
(function() {
var game = new Phaser.Game(this, 'game', 800, 600, init, create, null, render);
var colorWheel, selected,
color = 0xAACCA22B, colorStr = '#CCA22B';
var offset = {
x: 300 - 578 / 2,
y: 300 - 550 / 2
};
var rect, rectSize = 24;
function init() {
game.load.image('color-wheel', 'assets/pics/color-wheel.png');
game.load.start();
}
function create() {
// Create color wheel texture.
colorWheel = game.add.dynamicTexture(578, 550);
colorWheel.pasteImage('color-wheel');
// Create a rectangle shows the color you just selected.
rect = new Phaser.Rectangle(0, 0, rectSize, rectSize);
selected = game.add.sprite(600, 430);
selected.width = rectSize;
selected.height = rectSize;
selected.texture.loadDynamicTexture(game.add.dynamicTexture(rectSize, rectSize));
selected.texture.dynamicTexture.fillRect(rect, colorStr);
// Get the color under the position you tapped or clicked.
var pos = {};
game.input.onTap.add(function(pointer) {
pos.x = pointer.position.x - offset.x;
pos.y = pointer.position.y - offset.y;
color = colorWheel.getPixel32(pos.x, pos.y);
colorStr = Phaser.ColorUtils.RGBtoWebstring(color);
// Set the rectangle's color to new selected one.
selected.texture.dynamicTexture.fillRect(rect, colorStr);
});
// Set the background color to white.
game.stage.backgroundColor = '#fff';
}
function render() {
colorWheel.render(offset.x, offset.y);
Phaser.DebugUtils.context.fillStyle = '#000';
Phaser.DebugUtils.context.fillText('Tap or click the color wheel to select a color.', 480, 52);
// Display more color formated infos here. You can also get a
// string contains everything using getColorInfo();
Phaser.DebugUtils.context.fillText('Web String: ' + colorStr, 600, 492);
Phaser.DebugUtils.context.fillText('Hex String: ' + Phaser.ColorUtils.RGBtoHexstring(color), 600, 508);
var hsv = Phaser.ColorUtils.RGBtoHSV(color);
Phaser.DebugUtils.context.fillText('HSV: (' + hsv.hue.toFixed() + ', ' + hsv.saturation.toFixed(2) + ', ' + hsv.value.toFixed(2) + ')', 600, 524);
}
})();
Tests/misc/color utils 3.js
+151
View File
@@ -0,0 +1,151 @@
(function() {
var game = new Phaser.Game(this, 'game', 800, 600, init, create, null, render);
var colorWheel,
selected,
compHarmony,
analoHarmony, analoHarmony1,
splitHarmony, splitHarmony1,
triaHarmony, triaHarmony1,
color = 0xAACCA22B, colorStr = '#CCA22B',
compHColor,
analoColor, splitColor, triaColor,
analoColor1, splitColor1, triaColor1;
var offset = {
x: 300 - 578 / 2,
y: 300 - 550 / 2
};
var rect, rectSize = 24;
function init() {
game.load.image('color-wheel', 'assets/pics/color-wheel.png');
game.load.start();
}
function create() {
// Create color wheel texture.
colorWheel = game.add.dynamicTexture(578, 550);
colorWheel.pasteImage('color-wheel');
// Create a rectangle shows the color you just selected.
rect = new Phaser.Rectangle(0, 0, rectSize, rectSize);
selected = game.add.sprite(700, 290);
selected.width = rectSize;
selected.height = rectSize;
selected.texture.loadDynamicTexture(game.add.dynamicTexture(rectSize, rectSize));
selected.texture.dynamicTexture.fillRect(rect, colorStr);
// Create rectangles to show the harmony colors to the selected one.
compHColor = Phaser.ColorUtils.getComplementHarmony(color),
analoColor = Phaser.ColorUtils.getAnalogousHarmony(color),
splitColor = Phaser.ColorUtils.getSplitComplementHarmony(color),
triaColor = Phaser.ColorUtils.getTriadicHarmony(color);
// Complement
compHarmony = game.add.sprite(700, 390);
compHarmony.width = rectSize;
compHarmony.height = rectSize;
compHarmony.texture.loadDynamicTexture(game.add.dynamicTexture(rectSize, rectSize));
compHarmony.texture.dynamicTexture.fillRect(rect, Phaser.ColorUtils.RGBtoWebstring(compHColor));
// Analogous
analoHarmony = game.add.sprite(700, 434);
analoHarmony.width = rectSize;
analoHarmony.height = rectSize;
analoHarmony.texture.loadDynamicTexture(game.add.dynamicTexture(rectSize, rectSize));
analoHarmony.texture.dynamicTexture.fillRect(rect, Phaser.ColorUtils.RGBtoWebstring(analoColor.color2));
analoHarmony1 = game.add.sprite(744, 434);
analoHarmony1.width = rectSize;
analoHarmony1.height = rectSize;
analoHarmony1.texture.loadDynamicTexture(game.add.dynamicTexture(rectSize, rectSize));
analoHarmony1.texture.dynamicTexture.fillRect(rect, Phaser.ColorUtils.RGBtoWebstring(analoColor.color3));
// Split Complement
splitHarmony = game.add.sprite(700, 478);
splitHarmony.width = rectSize;
splitHarmony.height = rectSize;
splitHarmony.texture.loadDynamicTexture(game.add.dynamicTexture(rectSize, rectSize));
splitHarmony.texture.dynamicTexture.fillRect(rect, Phaser.ColorUtils.RGBtoWebstring(splitColor.color2));
splitHarmony1 = game.add.sprite(744, 478);
splitHarmony1.width = rectSize;
splitHarmony1.height = rectSize;
splitHarmony1.texture.loadDynamicTexture(game.add.dynamicTexture(rectSize, rectSize));
splitHarmony1.texture.dynamicTexture.fillRect(rect, Phaser.ColorUtils.RGBtoWebstring(splitColor.color3));
// Triadic
triaHarmony = game.add.sprite(700, 522);
triaHarmony.width = rectSize;
triaHarmony.height = rectSize;
triaHarmony.texture.loadDynamicTexture(game.add.dynamicTexture(rectSize, rectSize));
triaHarmony.texture.dynamicTexture.fillRect(rect, Phaser.ColorUtils.RGBtoWebstring(triaColor.color2));
triaHarmony1 = game.add.sprite(744, 522);
triaHarmony1.width = rectSize;
triaHarmony1.height = rectSize;
triaHarmony1.texture.loadDynamicTexture(game.add.dynamicTexture(rectSize, rectSize));
triaHarmony1.texture.dynamicTexture.fillRect(rect, Phaser.ColorUtils.RGBtoWebstring(triaColor.color3));
// Get the color under the position you tapped or clicked.
var pos = {};
game.input.onTap.add(function(pointer) {
pos.x = pointer.position.x - offset.x;
pos.y = pointer.position.y - offset.y;
// Update colors.
color = colorWheel.getPixel32(pos.x, pos.y);
compHColor = Phaser.ColorUtils.getComplementHarmony(color),
analoColor = Phaser.ColorUtils.getAnalogousHarmony(color).color2,
analoColor1 = Phaser.ColorUtils.getAnalogousHarmony(color).color3,
splitColor = Phaser.ColorUtils.getSplitComplementHarmony(color).color2,
splitColor1 = Phaser.ColorUtils.getSplitComplementHarmony(color).color3,
triaColor = Phaser.ColorUtils.getTriadicHarmony(color).color2;
triaColor1 = Phaser.ColorUtils.getTriadicHarmony(color).color3;
// Calc color strings.
colorStr = Phaser.ColorUtils.RGBtoWebstring(color);
var compStr = Phaser.ColorUtils.RGBtoWebstring(compHColor),
analStr = Phaser.ColorUtils.RGBtoWebstring(analoColor),
analStr1 = Phaser.ColorUtils.RGBtoWebstring(analoColor1),
spliStr = Phaser.ColorUtils.RGBtoWebstring(splitColor),
spliStr1 = Phaser.ColorUtils.RGBtoWebstring(splitColor1),
triaStr = Phaser.ColorUtils.RGBtoWebstring(triaColor),
triaStr1 = Phaser.ColorUtils.RGBtoWebstring(triaColor1);
// Update color of the rectangles.
selected.texture.dynamicTexture.fillRect(rect, colorStr);
compHarmony.texture.dynamicTexture.fillRect(rect, compStr);
analoHarmony.texture.dynamicTexture.fillRect(rect, analStr);
analoHarmony1.texture.dynamicTexture.fillRect(rect, analStr1);
splitHarmony.texture.dynamicTexture.fillRect(rect, spliStr);
splitHarmony1.texture.dynamicTexture.fillRect(rect, spliStr1);
triaHarmony.texture.dynamicTexture.fillRect(rect, triaStr);
triaHarmony1.texture.dynamicTexture.fillRect(rect, triaStr1);
});
// Set the background color to white.
game.stage.backgroundColor = '#fff';
}
function render() {
colorWheel.render(offset.x, offset.y);
Phaser.DebugUtils.context.fillStyle = '#000';
Phaser.DebugUtils.context.fillText('Tap or click the color wheel to select a color.', 480, 52);
Phaser.DebugUtils.context.fillText('All the harmony colors are calculated on the fly.', 480, 590);
// Display more color formated infos here. You can also get a
// string contains everything using getColorInfo();
Phaser.DebugUtils.context.fillText('Selected Color: ', 600, 312);
Phaser.DebugUtils.context.fillText('Web String: ' + colorStr, 640, 342);
Phaser.DebugUtils.context.fillText('Hex String: ' + Phaser.ColorUtils.RGBtoHexstring(color), 640, 358);
var hsv = Phaser.ColorUtils.RGBtoHSV(color);
Phaser.DebugUtils.context.fillText('HSV: (' + hsv.hue.toFixed() + ', ' + hsv.saturation.toFixed(2) + ', ' + hsv.value.toFixed(2) + ')', 640, 374);
// Harmony color types info.
Phaser.DebugUtils.context.fillText('Complement Harmony Color: ', 540, 412);
Phaser.DebugUtils.context.fillText(' Analogous Harmony Color: ', 540, 456);
Phaser.DebugUtils.context.fillText('Split Complement Harmony Color: ', 502, 500);
Phaser.DebugUtils.context.fillText(' Triadic Harmony Color: ', 540, 544);
}
})();
Tests/misc/dynamic texture 1.js
+23
View 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;
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);
}
})();
Tests/misc/dynamic texture 2.js
+27
View 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;
function create() {
// Create a simple pattern texture.
pattern = game.add.dynamicTexture(96, 96);
pattern.fillRect(new Phaser.Rectangle(0, 0, 48, 48), '#5b35c0');
pattern.fillRect(new Phaser.Rectangle(48, 48, 48, 48), '#5b35c0');
pattern.fillRect(new Phaser.Rectangle(48, 0, 48, 48), '#43baf3');
pattern.fillRect(new Phaser.Rectangle(0, 48, 48, 48), '#43baf3');
// Create a sprite and load to our newly created DynamicTexture.
// Notice that loadDynamicTexture() will destroy sprite's AnimationManager,
// so all the animations already added will no longer exist.
var sprite = game.add.sprite(game.stage.centerX - 48, game.stage.centerY - 48);
sprite.texture.loadDynamicTexture(pattern);
console.log('Size of the sprite is now: (' + sprite.width + ', ' + sprite.height + ').');
}
function render() {
Phaser.DebugUtils.context.fillStyle = '#fff';
Phaser.DebugUtils.context.fillText('This is a sprite whose appearance defined by a DynamicTexture created on the fly.', 160, 450);
}
})();
Tests/misc/dynamic texture 3.js
+32
View 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;
function init() {
game.load.spritesheet('cat', 'assets/sprites/baddie_cat_1.png', 16, 16);
game.load.start();
}
function create() {
// Create a simple pattern first.
pattern = game.add.dynamicTexture(64, 16);
for (var i = 0; i < 4; i++) {
pattern.fillRect(new Phaser.Rectangle(i * 16, 0, 8, 8), '#5b35c0');
pattern.fillRect(new Phaser.Rectangle((i + 1) * 16 - 8, 8, 8, 8), '#5b35c0');
pattern.fillRect(new Phaser.Rectangle((i + 1) * 16 - 8, 0, 8, 8), '#43baf3');
pattern.fillRect(new Phaser.Rectangle(i * 16, 8, 8, 8), '#43baf3');
}
// Paste cat image to the texture, so the cat is on top of our pattern.
pattern.pasteImage('cat');
// Create a sprite with our result texture.
var sprite = game.add.sprite(game.stage.centerX - 32, game.stage.centerY - 8);
sprite.texture.loadDynamicTexture(pattern);
}
function render() {
Phaser.DebugUtils.context.fillStyle = '#fff';
Phaser.DebugUtils.context.fillText('Paste exist spritesheet to a DynamicTexture created on the fly.', 220, 450);
}
})();
Tests/misc/rectangle utils 1.js
+10
View File
@@ -0,0 +1,10 @@
(function() {
var game = new Phaser.Game(this, 'game', 800, 600, init, create);
function init() {
// body...
}
function create() {
}
})();