mirror of
https://github.com/wassname/phaser.git
synced 2026-07-18 12:30:44 +08:00
Tidying up the repo and adding in new documentation.
This commit is contained in:
photonstorm
@@ -0,0 +1,180 @@
|
||||
/**
|
||||
* Phaser - Display - CSS3Filters
|
||||
*
|
||||
* Allows for easy addition and modification of CSS3 Filters on DOM objects (typically the Game.Stage.canvas).
|
||||
*/
|
||||
|
||||
Phaser.Plugins.CSS3Filters = function (parent) {
|
||||
|
||||
this.parent = parent;
|
||||
|
||||
this._blur = 0;
|
||||
this._grayscale = 0;
|
||||
this._sepia = 0;
|
||||
this._brightness = 0;
|
||||
this._contrast = 0;
|
||||
this._hueRotate = 0;
|
||||
this._invert = 0;
|
||||
this._opacity = 0;
|
||||
this._saturate = 0;
|
||||
|
||||
};
|
||||
|
||||
Phaser.Plugins.CSS3Filters.prototype = {
|
||||
|
||||
setFilter: function (local, prefix, value, unit) {
|
||||
|
||||
this[local] = value;
|
||||
|
||||
if (this.parent)
|
||||
{
|
||||
this.parent.style['-webkit-filter'] = prefix + '(' + value + unit + ')';
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
Object.defineProperty(Phaser.Plugins.CSS3Filters.prototype, "blur", {
|
||||
|
||||
get: function () {
|
||||
return this._blur;
|
||||
},
|
||||
|
||||
/**
|
||||
* Applies a Gaussian blur to the DOM element. The value of 'radius' defines the value of the standard deviation to the Gaussian function,
|
||||
* or how many pixels on the screen blend into each other, so a larger value will create more blur.
|
||||
* If no parameter is provided, then a value 0 is used. The parameter is specified as a CSS length, but does not accept percentage values.
|
||||
*/
|
||||
set: function (radius) {
|
||||
this.setFilter('_blur', 'blur', radius, 'px');
|
||||
}
|
||||
});
|
||||
|
||||
Object.defineProperty(Phaser.Plugins.CSS3Filters.prototype, "grayscale", {
|
||||
get: function () {
|
||||
return this._grayscale;
|
||||
},
|
||||
|
||||
/**
|
||||
* Converts the input image to grayscale. The value of 'amount' defines the proportion of the conversion.
|
||||
* A value of 100% is completely grayscale. A value of 0% leaves the input unchanged.
|
||||
* Values between 0% and 100% are linear multipliers on the effect. If the 'amount' parameter is missing, a value of 100% is used.
|
||||
*/
|
||||
set: function (amount) {
|
||||
this.setFilter('_grayscale', 'grayscale', amount, '%');
|
||||
}
|
||||
});
|
||||
|
||||
Object.defineProperty(Phaser.Plugins.CSS3Filters.prototype, "sepia", {
|
||||
get: function () {
|
||||
return this._sepia;
|
||||
},
|
||||
|
||||
/**
|
||||
* Converts the input image to sepia. The value of 'amount' defines the proportion of the conversion.
|
||||
* A value of 100% is completely sepia. A value of 0 leaves the input unchanged.
|
||||
* Values between 0% and 100% are linear multipliers on the effect. If the 'amount' parameter is missing, a value of 100% is used.
|
||||
*/
|
||||
set: function (amount) {
|
||||
this.setFilter('_sepia', 'sepia', amount, '%');
|
||||
}
|
||||
});
|
||||
|
||||
Object.defineProperty(Phaser.Plugins.CSS3Filters.prototype, "brightness", {
|
||||
get: function () {
|
||||
return this._brightness;
|
||||
},
|
||||
|
||||
/**
|
||||
* Applies a linear multiplier to input image, making it appear more or less bright.
|
||||
* A value of 0% will create an image that is completely black. A value of 100% leaves the input unchanged.
|
||||
* Other values are linear multipliers on the effect. Values of an amount over 100% are allowed, providing brighter results.
|
||||
* If the 'amount' parameter is missing, a value of 100% is used.
|
||||
*/
|
||||
set: function (amount) {
|
||||
this.setFilter('_brightness', 'brightness', amount, '%');
|
||||
}
|
||||
});
|
||||
|
||||
Object.defineProperty(Phaser.Plugins.CSS3Filters.prototype, "contrast", {
|
||||
get: function () {
|
||||
return this._contrast;
|
||||
},
|
||||
|
||||
/**
|
||||
* Adjusts the contrast of the input. A value of 0% will create an image that is completely black.
|
||||
* A value of 100% leaves the input unchanged. Values of amount over 100% are allowed, providing results with less contrast.
|
||||
* If the 'amount' parameter is missing, a value of 100% is used.
|
||||
*/
|
||||
set: function (amount) {
|
||||
this.setFilter('_contrast', 'contrast', amount, '%');
|
||||
}
|
||||
});
|
||||
|
||||
Object.defineProperty(Phaser.Plugins.CSS3Filters.prototype, "hueRotate", {
|
||||
|
||||
get: function () {
|
||||
return this._hueRotate;
|
||||
},
|
||||
|
||||
/**
|
||||
* Applies a hue rotation on the input image. The value of 'angle' defines the number of degrees around the color circle
|
||||
* the input samples will be adjusted. A value of 0deg leaves the input unchanged. If the 'angle' parameter is missing,
|
||||
* a value of 0deg is used. Maximum value is 360deg.
|
||||
*/
|
||||
set: function (angle) {
|
||||
this.setFilter('_hueRotate', 'hue-rotate', angle, 'deg');
|
||||
}
|
||||
});
|
||||
|
||||
Object.defineProperty(Phaser.Plugins.CSS3Filters.prototype, "invert", {
|
||||
|
||||
get: function () {
|
||||
return this._invert;
|
||||
},
|
||||
|
||||
/**
|
||||
* Inverts the samples in the input image. The value of 'amount' defines the proportion of the conversion.
|
||||
* A value of 100% is completely inverted. A value of 0% leaves the input unchanged.
|
||||
* Values between 0% and 100% are linear multipliers on the effect. If the 'amount' parameter is missing, a value of 100% is used.
|
||||
*/
|
||||
set: function (value) {
|
||||
this.setFilter('_invert', 'invert', value, '%');
|
||||
}
|
||||
});
|
||||
|
||||
Object.defineProperty(Phaser.Plugins.CSS3Filters.prototype, "opacity", {
|
||||
|
||||
get: function () {
|
||||
return this._opacity;
|
||||
},
|
||||
|
||||
/**
|
||||
* Applies transparency to the samples in the input image. The value of 'amount' defines the proportion of the conversion.
|
||||
* A value of 0% is completely transparent. A value of 100% leaves the input unchanged.
|
||||
* Values between 0% and 100% are linear multipliers on the effect. This is equivalent to multiplying the input image samples by amount.
|
||||
* If the 'amount' parameter is missing, a value of 100% is used.
|
||||
* This function is similar to the more established opacity property; the difference is that with filters, some browsers provide hardware acceleration for better performance.
|
||||
*/
|
||||
set: function (value) {
|
||||
this.setFilter('_opacity', 'opacity', value, '%');
|
||||
}
|
||||
});
|
||||
|
||||
Object.defineProperty(Phaser.Plugins.CSS3Filters.prototype, "saturate", {
|
||||
|
||||
get: function () {
|
||||
return this._saturate;
|
||||
},
|
||||
|
||||
/**
|
||||
* Saturates the input image. The value of 'amount' defines the proportion of the conversion.
|
||||
* A value of 0% is completely un-saturated. A value of 100% leaves the input unchanged.
|
||||
* Other values are linear multipliers on the effect. Values of amount over 100% are allowed, providing super-saturated results.
|
||||
* If the 'amount' parameter is missing, a value of 100% is used.
|
||||
*/
|
||||
set: function (value) {
|
||||
this.setFilter('_saturate', 'saturate', value, '%');
|
||||
}
|
||||
});
|
||||
@@ -0,0 +1,231 @@
|
||||
/**
|
||||
* A collection of methods useful for manipulating and comparing colors.
|
||||
*
|
||||
* @class ColorHarmony
|
||||
* @author Richard Davey <rich@photonstorm.com>
|
||||
* @copyright 2013 Photon Storm Ltd.
|
||||
* @license https://github.com/photonstorm/phaser/blob/master/license.txt MIT License
|
||||
* @module Phaser
|
||||
*/
|
||||
|
||||
Phaser.Plugins.ColorHarmony.prototype = {
|
||||
|
||||
/**
|
||||
* Returns a Complementary Color Harmony for the given color.
|
||||
* <p>A complementary hue is one directly opposite the color given on the color wheel</p>
|
||||
* <p>Value returned in 0xAARRGGBB format with Alpha set to 255.</p>
|
||||
*
|
||||
* @method getComplementHarmony
|
||||
* @param {Number} color The color to base the harmony on.
|
||||
* @return {Number} 0xAARRGGBB format color value.
|
||||
*/
|
||||
getComplementHarmony: function (color) {
|
||||
|
||||
var hsv = Phaser.Color.RGBtoHSV(color);
|
||||
var opposite = Phaser.Color.game.math.wrapValue(hsv.hue, 180, 359);
|
||||
return Phaser.Color.HSVtoRGB(opposite, 1.0, 1.0);
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* Returns an Analogous Color Harmony for the given color.
|
||||
* <p>An Analogous harmony are hues adjacent to each other on the color wheel</p>
|
||||
* <p>Values returned in 0xAARRGGBB format with Alpha set to 255.</p>
|
||||
*
|
||||
* @method getAnalogousHarmony
|
||||
* @param {Number} color The color to base the harmony on.
|
||||
* @param {Number} threshold Control how adjacent the colors will be (default +- 30 degrees)
|
||||
* @return {Object} Object containing 3 properties: color1 (the original color), color2 (the warmer analogous color) and color3 (the colder analogous color)
|
||||
*/
|
||||
getAnalogousHarmony: function (color, threshold) {
|
||||
if (typeof threshold === "undefined") { threshold = 30; }
|
||||
var hsv = Phaser.Color.RGBtoHSV(color);
|
||||
if(threshold > 359 || threshold < 0) {
|
||||
throw Error("Color Warning: Invalid threshold given to getAnalogousHarmony()");
|
||||
}
|
||||
var warmer = Phaser.Color.game.math.wrapValue(hsv.hue, 359 - threshold, 359);
|
||||
var colder = Phaser.Color.game.math.wrapValue(hsv.hue, threshold, 359);
|
||||
return {
|
||||
color1: color,
|
||||
color2: Phaser.Color.HSVtoRGB(warmer, 1.0, 1.0),
|
||||
color3: Phaser.Color.HSVtoRGB(colder, 1.0, 1.0),
|
||||
hue1: hsv.hue,
|
||||
hue2: warmer,
|
||||
hue3: colder
|
||||
};
|
||||
},
|
||||
|
||||
/**
|
||||
* Returns an Split Complement Color Harmony for the given color.
|
||||
* <p>A Split Complement harmony are the two hues on either side of the color's Complement</p>
|
||||
* <p>Values returned in 0xAARRGGBB format with Alpha set to 255.</p>
|
||||
*
|
||||
* @method getSplitComplementHarmony
|
||||
* @param {Number} color The color to base the harmony on
|
||||
* @param {Number} threshold Control how adjacent the colors will be to the Complement (default +- 30 degrees)
|
||||
* @return {Object} An object containing 3 properties: color1 (the original color), color2 (the warmer analogous color) and color3 (the colder analogous color)
|
||||
*/
|
||||
getSplitComplementHarmony: function (color, threshold) {
|
||||
if (typeof threshold === "undefined") { threshold = 30; }
|
||||
var hsv = Phaser.Color.RGBtoHSV(color);
|
||||
if(threshold >= 359 || threshold <= 0) {
|
||||
throw Error("Phaser.Color Warning: Invalid threshold given to getSplitComplementHarmony()");
|
||||
}
|
||||
var opposite = Phaser.Color.game.math.wrapValue(hsv.hue, 180, 359);
|
||||
var warmer = Phaser.Color.game.math.wrapValue(hsv.hue, opposite - threshold, 359);
|
||||
var colder = Phaser.Color.game.math.wrapValue(hsv.hue, opposite + threshold, 359);
|
||||
return {
|
||||
color1: color,
|
||||
color2: Phaser.Color.HSVtoRGB(warmer, hsv.saturation, hsv.value),
|
||||
color3: Phaser.Color.HSVtoRGB(colder, hsv.saturation, hsv.value),
|
||||
hue1: hsv.hue,
|
||||
hue2: warmer,
|
||||
hue3: colder
|
||||
};
|
||||
},
|
||||
|
||||
/**
|
||||
* Returns a Triadic Color Harmony for the given color.
|
||||
* <p>A Triadic harmony are 3 hues equidistant from each other on the color wheel</p>
|
||||
* <p>Values returned in 0xAARRGGBB format with Alpha set to 255.</p>
|
||||
*
|
||||
* @method getTriadicHarmony
|
||||
* @param {Number} color The color to base the harmony on.
|
||||
* @return {Object} An Object containing 3 properties: color1 (the original color), color2 and color3 (the equidistant colors)
|
||||
*/
|
||||
getTriadicHarmony: function (color) {
|
||||
var hsv = Phaser.Color.RGBtoHSV(color);
|
||||
var triadic1 = Phaser.Color.game.math.wrapValue(hsv.hue, 120, 359);
|
||||
var triadic2 = Phaser.Color.game.math.wrapValue(triadic1, 120, 359);
|
||||
return {
|
||||
color1: color,
|
||||
color2: Phaser.Color.HSVtoRGB(triadic1, 1.0, 1.0),
|
||||
color3: Phaser.Color.HSVtoRGB(triadic2, 1.0, 1.0)
|
||||
};
|
||||
},
|
||||
|
||||
/**
|
||||
* Get HSV color wheel values in an array which will be 360 elements in size.
|
||||
*
|
||||
* @method getHSVColorWheel
|
||||
* @param {Number} alpha Alpha value for each color of the color wheel, between 0 (transparent) and 255 (opaque)
|
||||
* @return {Array} An array containing 360 elements corresponding to the HSV color wheel.
|
||||
*/
|
||||
getHSVColorWheel: function (alpha) {
|
||||
|
||||
alpha = alpha || 255;
|
||||
|
||||
var colors = [];
|
||||
|
||||
for (var c = 0; c <= 359; c++)
|
||||
{
|
||||
colors[c] = Phaser.Color.getWebRGB(Phaser.Color.HSVtoRGB(c, 1.0, 1.0, alpha));
|
||||
}
|
||||
|
||||
return colors;
|
||||
},
|
||||
|
||||
/**
|
||||
* Convert a HSV (hue, saturation, lightness) color space value to an RGB color
|
||||
*
|
||||
* @method HSVtoRGB
|
||||
* @param {Number} h Hue degree, between 0 and 359
|
||||
* @param {Number} s Saturation, between 0.0 (grey) and 1.0
|
||||
* @param {Number} v Value, between 0.0 (black) and 1.0
|
||||
* @param {Number} alpha Alpha value to set per color (between 0 and 255)
|
||||
* @return {Number} 32-bit ARGB color value (0xAARRGGBB)
|
||||
*/
|
||||
HSVtoRGB: function (h, s, v, alpha) {
|
||||
if (typeof alpha === "undefined") { alpha = 255; }
|
||||
var result;
|
||||
if(s == 0.0) {
|
||||
result = Phaser.Color.getColor32(alpha, v * 255, v * 255, v * 255);
|
||||
} else {
|
||||
h = h / 60.0;
|
||||
var f = h - Math.floor(h);
|
||||
var p = v * (1.0 - s);
|
||||
var q = v * (1.0 - s * f);
|
||||
var t = v * (1.0 - s * (1.0 - f));
|
||||
switch(Math.floor(h)) {
|
||||
case 0:
|
||||
result = Phaser.Color.getColor32(alpha, v * 255, t * 255, p * 255);
|
||||
break;
|
||||
case 1:
|
||||
result = Phaser.Color.getColor32(alpha, q * 255, v * 255, p * 255);
|
||||
break;
|
||||
case 2:
|
||||
result = Phaser.Color.getColor32(alpha, p * 255, v * 255, t * 255);
|
||||
break;
|
||||
case 3:
|
||||
result = Phaser.Color.getColor32(alpha, p * 255, q * 255, v * 255);
|
||||
break;
|
||||
case 4:
|
||||
result = Phaser.Color.getColor32(alpha, t * 255, p * 255, v * 255);
|
||||
break;
|
||||
case 5:
|
||||
result = Phaser.Color.getColor32(alpha, v * 255, p * 255, q * 255);
|
||||
break;
|
||||
default:
|
||||
throw new Error("Phaser.Color.HSVtoRGB : Unknown color");
|
||||
}
|
||||
}
|
||||
return result;
|
||||
},
|
||||
|
||||
/**
|
||||
* Convert an RGB color value to an object containing the HSV color space values: Hue, Saturation and Lightness
|
||||
*
|
||||
* @method RGBtoHSV
|
||||
* @param {Number} color In format 0xRRGGBB
|
||||
* @return {Object} An Object with the properties hue (from 0 to 360), saturation (from 0 to 1.0) and lightness (from 0 to 1.0, also available under .value)
|
||||
*/
|
||||
RGBtoHSV: function (color) {
|
||||
var rgb = Phaser.Color.getRGB(color);
|
||||
var red = rgb.red / 255;
|
||||
var green = rgb.green / 255;
|
||||
var blue = rgb.blue / 255;
|
||||
var min = Math.min(red, green, blue);
|
||||
var max = Math.max(red, green, blue);
|
||||
var delta = max - min;
|
||||
var lightness = (max + min) / 2;
|
||||
var hue;
|
||||
var saturation;
|
||||
// Grey color, no chroma
|
||||
if(delta == 0) {
|
||||
hue = 0;
|
||||
saturation = 0;
|
||||
} else {
|
||||
if(lightness < 0.5) {
|
||||
saturation = delta / (max + min);
|
||||
} else {
|
||||
saturation = delta / (2 - max - min);
|
||||
}
|
||||
var delta_r = (((max - red) / 6) + (delta / 2)) / delta;
|
||||
var delta_g = (((max - green) / 6) + (delta / 2)) / delta;
|
||||
var delta_b = (((max - blue) / 6) + (delta / 2)) / delta;
|
||||
if(red == max) {
|
||||
hue = delta_b - delta_g;
|
||||
} else if(green == max) {
|
||||
hue = (1 / 3) + delta_r - delta_b;
|
||||
} else if(blue == max) {
|
||||
hue = (2 / 3) + delta_g - delta_r;
|
||||
}
|
||||
if(hue < 0) {
|
||||
hue += 1;
|
||||
}
|
||||
if(hue > 1) {
|
||||
hue -= 1;
|
||||
}
|
||||
}
|
||||
// Keep the value with 0 to 359
|
||||
hue *= 360;
|
||||
hue = Math.round(hue);
|
||||
return {
|
||||
hue: hue,
|
||||
saturation: saturation,
|
||||
lightness: lightness,
|
||||
value: lightness
|
||||
};
|
||||
}
|
||||
|
||||
}
|
||||
@@ -0,0 +1,37 @@
|
||||
/**
|
||||
* A Sample Plugin demonstrating how to hook into the Phaser plugin system.
|
||||
*/
|
||||
Phaser.Plugin.SamplePlugin = function (game, parent) {
|
||||
|
||||
Phaser.Plugin.call(this, game, parent);
|
||||
|
||||
this.sprite = null;
|
||||
|
||||
};
|
||||
|
||||
// Extends the Phaser.Plugin template, setting up values we need
|
||||
Phaser.Plugin.SamplePlugin.prototype = Object.create(Phaser.Plugin.prototype);
|
||||
Phaser.Plugin.SamplePlugin.prototype.constructor = Phaser.Plugin.SamplePlugin;
|
||||
|
||||
/**
|
||||
* Add a Sprite reference to this Plugin.
|
||||
* All this plugin does is move the Sprite across the screen slowly.
|
||||
* @type {Phaser.Sprite}
|
||||
*/
|
||||
Phaser.Plugin.SamplePlugin.prototype.addSprite = function (sprite) {
|
||||
|
||||
this.sprite = sprite;
|
||||
|
||||
};
|
||||
|
||||
/**
|
||||
* This is run when the plugins update during the core game loop.
|
||||
*/
|
||||
Phaser.Plugin.SamplePlugin.prototype.update = function () {
|
||||
|
||||
if (this.sprite)
|
||||
{
|
||||
this.sprite.x += 0.5;
|
||||
}
|
||||
|
||||
};
|
||||
Reference in New Issue
Block a user