mirror of
https://github.com/photonstorm/phaser
synced 2024-11-10 15:14:47 +00:00
Added in the Color Utils and removed the less important functions into ColorHarmony plugin. Updated Stage so backgroundColor can be a string or integer now.
This commit is contained in:
parent
15fe5ed6c8
commit
5da0e42be4
41 changed files with 565 additions and 236 deletions
231
Plugins/ColorHarmony.js
Normal file
231
Plugins/ColorHarmony.js
Normal file
|
@ -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
|
||||
};
|
||||
}
|
||||
|
||||
}
|
|
@ -1,92 +0,0 @@
|
|||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<Project ToolsVersion="4.0" DefaultTargets="Build" xmlns="http://schemas.microsoft.com/developer/msbuild/2003">
|
||||
<PropertyGroup>
|
||||
<Configuration Condition=" '$(Configuration)' == '' ">Debug</Configuration>
|
||||
<ProjectGuid>{1106D1E1-DCE3-4CAF-8096-6C85F765D519}</ProjectGuid>
|
||||
<ProjectTypeGuids>{349c5851-65df-11da-9384-00065b846f21};{fae04ec0-301f-11d3-bf4b-00c04f79efbc}</ProjectTypeGuids>
|
||||
<OutputType>Library</OutputType>
|
||||
<OutputPath>bin</OutputPath>
|
||||
<TargetFrameworkVersion>v4.5</TargetFrameworkVersion>
|
||||
<DebugType>full</DebugType>
|
||||
<DebugSymbols>true</DebugSymbols>
|
||||
<UseIISExpress>true</UseIISExpress>
|
||||
<IISExpressSSLPort />
|
||||
<IISExpressAnonymousAuthentication />
|
||||
<IISExpressWindowsAuthentication />
|
||||
<IISExpressUseClassicPipelineMode />
|
||||
</PropertyGroup>
|
||||
<PropertyGroup>
|
||||
<VisualStudioVersion Condition="'$(VisualStudioVersion)' == ''">10.0</VisualStudioVersion>
|
||||
<VSToolsPath Condition="'$(VSToolsPath)' == ''">$(MSBuildExtensionsPath32)\Microsoft\VisualStudio\v$(VisualStudioVersion)</VSToolsPath>
|
||||
</PropertyGroup>
|
||||
<PropertyGroup>
|
||||
<RootNamespace>Plugins</RootNamespace>
|
||||
</PropertyGroup>
|
||||
<Import Project="$(MSBuildBinPath)\Microsoft.CSharp.targets" />
|
||||
<Import Project="$(VSToolsPath)\WebApplications\Microsoft.WebApplication.targets" Condition="'$(VSToolsPath)' != ''" />
|
||||
<ProjectExtensions>
|
||||
<VisualStudio>
|
||||
<FlavorProperties GUID="{349c5851-65df-11da-9384-00065b846f21}">
|
||||
<WebProjectProperties>
|
||||
<UseIIS>True</UseIIS>
|
||||
<AutoAssignPort>True</AutoAssignPort>
|
||||
<DevelopmentServerPort>0</DevelopmentServerPort>
|
||||
<DevelopmentServerVPath>/</DevelopmentServerVPath>
|
||||
<IISUrl>http://localhost:61985/</IISUrl>
|
||||
<NTLMAuthentication>False</NTLMAuthentication>
|
||||
<UseCustomServer>False</UseCustomServer>
|
||||
<CustomServerUrl>
|
||||
</CustomServerUrl>
|
||||
<SaveServerSettingsInUserFile>False</SaveServerSettingsInUserFile>
|
||||
</WebProjectProperties>
|
||||
</FlavorProperties>
|
||||
</VisualStudio>
|
||||
</ProjectExtensions>
|
||||
<PropertyGroup Condition="'$(Configuration)' == 'Debug'">
|
||||
<TypeScriptTarget>ES5</TypeScriptTarget>
|
||||
<TypeScriptIncludeComments>true</TypeScriptIncludeComments>
|
||||
<TypeScriptSourceMap>false</TypeScriptSourceMap>
|
||||
</PropertyGroup>
|
||||
<PropertyGroup Condition="'$(Configuration)' == 'Release'">
|
||||
<TypeScriptTarget>ES5</TypeScriptTarget>
|
||||
<TypeScriptIncludeComments>false</TypeScriptIncludeComments>
|
||||
<TypeScriptSourceMap>false</TypeScriptSourceMap>
|
||||
</PropertyGroup>
|
||||
<ItemGroup>
|
||||
<TypeScriptCompile Include="Template.ts" />
|
||||
</ItemGroup>
|
||||
<ItemGroup>
|
||||
<TypeScriptCompile Include="CameraFX\Scanlines.ts" />
|
||||
<TypeScriptCompile Include="CameraFX\Mirror.ts" />
|
||||
<TypeScriptCompile Include="CameraFX\Border.ts" />
|
||||
<Content Include="CameraFX\Border.js">
|
||||
<DependentUpon>Border.ts</DependentUpon>
|
||||
</Content>
|
||||
<TypeScriptCompile Include="CameraFX\Fade.ts" />
|
||||
<Content Include="CameraFX\Fade.js">
|
||||
<DependentUpon>Fade.ts</DependentUpon>
|
||||
</Content>
|
||||
<TypeScriptCompile Include="CameraFX\Flash.ts" />
|
||||
<Content Include="CameraFX\Flash.js">
|
||||
<DependentUpon>Flash.ts</DependentUpon>
|
||||
</Content>
|
||||
<Content Include="CameraFX\Mirror.js">
|
||||
<DependentUpon>Mirror.ts</DependentUpon>
|
||||
</Content>
|
||||
<Content Include="CameraFX\Scanlines.js">
|
||||
<DependentUpon>Scanlines.ts</DependentUpon>
|
||||
</Content>
|
||||
<TypeScriptCompile Include="CameraFX\Shadow.ts" />
|
||||
<Content Include="CameraFX\Shadow.js">
|
||||
<DependentUpon>Shadow.ts</DependentUpon>
|
||||
</Content>
|
||||
<TypeScriptCompile Include="CameraFX\Shake.ts" />
|
||||
<Content Include="CameraFX\Shake.js">
|
||||
<DependentUpon>Shake.ts</DependentUpon>
|
||||
</Content>
|
||||
<Content Include="Template.js">
|
||||
<DependentUpon>Template.ts</DependentUpon>
|
||||
</Content>
|
||||
</ItemGroup>
|
||||
<Import Project="$(VSToolsPath)\TypeScript\Microsoft.TypeScript.targets" />
|
||||
</Project>
|
|
@ -1,68 +0,0 @@
|
|||
var __extends = this.__extends || function (d, b) {
|
||||
function __() { this.constructor = d; }
|
||||
__.prototype = b.prototype;
|
||||
d.prototype = new __();
|
||||
};
|
||||
var Phaser;
|
||||
(function (Phaser) {
|
||||
/// <reference path="../Phaser/Game.ts" />
|
||||
/// <reference path="../Phaser/core/Plugin.ts" />
|
||||
/**
|
||||
* Phaser - Example Plugin
|
||||
*/
|
||||
(function (Plugins) {
|
||||
var Example = (function (_super) {
|
||||
__extends(Example, _super);
|
||||
function Example(game, parent) {
|
||||
_super.call(this, game, parent);
|
||||
this.active = true;
|
||||
this.visible = true;
|
||||
this.hasPreUpdate = false;
|
||||
this.hasUpdate = false;
|
||||
this.hasPostUpdate = false;
|
||||
this.hasPreRender = false;
|
||||
this.hasRender = false;
|
||||
this.hasPostRender = false;
|
||||
}
|
||||
Example.prototype.preUpdate = /**
|
||||
* Pre-update is called at the start of the update cycle, before any other updates have taken place.
|
||||
* It is only called if active is set to true.
|
||||
*/
|
||||
function () {
|
||||
};
|
||||
Example.prototype.update = /**
|
||||
* Pre-update is called at the start of the update cycle, after all the core system updates have taken place, but before the world update.
|
||||
* It is only called if active is set to true.
|
||||
*/
|
||||
function () {
|
||||
};
|
||||
Example.prototype.postUpdate = /**
|
||||
* Post-update is called at the end of the objects update cycle, after other update logic has taken place.
|
||||
* It is only called if active is set to true.
|
||||
*/
|
||||
function () {
|
||||
};
|
||||
Example.prototype.preRender = /**
|
||||
* Pre-render is called right before the Game Renderer starts and before any custom preRender callbacks have been run.
|
||||
* It is only called if visible is set to true.
|
||||
*/
|
||||
function () {
|
||||
};
|
||||
Example.prototype.render = /**
|
||||
* Pre-render is called right before the Game Renderer starts and before any custom preRender callbacks have been run.
|
||||
* It is only called if visible is set to true.
|
||||
*/
|
||||
function () {
|
||||
};
|
||||
Example.prototype.postRender = /**
|
||||
* Post-render is called after every camera and game object has been rendered, also after any custom postRender callbacks have been run.
|
||||
* It is only called if visible is set to true.
|
||||
*/
|
||||
function () {
|
||||
};
|
||||
return Example;
|
||||
})(Phaser.Plugin);
|
||||
Plugins.Example = Example;
|
||||
})(Phaser.Plugins || (Phaser.Plugins = {}));
|
||||
var Plugins = Phaser.Plugins;
|
||||
})(Phaser || (Phaser = {}));
|
|
@ -1,74 +0,0 @@
|
|||
/// <reference path="../Phaser/Game.ts" />
|
||||
/// <reference path="../Phaser/core/Plugin.ts" />
|
||||
|
||||
/**
|
||||
* Phaser - Example Plugin
|
||||
*/
|
||||
|
||||
module Phaser.Plugins {
|
||||
|
||||
export class Example extends Phaser.Plugin {
|
||||
|
||||
constructor(game: Phaser.Game, parent) {
|
||||
|
||||
super(game, parent);
|
||||
|
||||
this.active = true;
|
||||
this.visible = true;
|
||||
|
||||
this.hasPreUpdate = false;
|
||||
this.hasUpdate = false;
|
||||
this.hasPostUpdate = false;
|
||||
|
||||
this.hasPreRender = false;
|
||||
this.hasRender = false;
|
||||
this.hasPostRender = false;
|
||||
|
||||
}
|
||||
|
||||
/**
|
||||
* Pre-update is called at the start of the update cycle, before any other updates have taken place.
|
||||
* It is only called if active is set to true.
|
||||
*/
|
||||
public preUpdate() {
|
||||
}
|
||||
|
||||
/**
|
||||
* Pre-update is called at the start of the update cycle, after all the core system updates have taken place, but before the world update.
|
||||
* It is only called if active is set to true.
|
||||
*/
|
||||
public update() {
|
||||
}
|
||||
|
||||
/**
|
||||
* Post-update is called at the end of the objects update cycle, after other update logic has taken place.
|
||||
* It is only called if active is set to true.
|
||||
*/
|
||||
public postUpdate() {
|
||||
}
|
||||
|
||||
/**
|
||||
* Pre-render is called right before the Game Renderer starts and before any custom preRender callbacks have been run.
|
||||
* It is only called if visible is set to true.
|
||||
*/
|
||||
public preRender() {
|
||||
}
|
||||
|
||||
/**
|
||||
* Pre-render is called right before the Game Renderer starts and before any custom preRender callbacks have been run.
|
||||
* It is only called if visible is set to true.
|
||||
*/
|
||||
public render() {
|
||||
}
|
||||
|
||||
/**
|
||||
* Post-render is called after every camera and game object has been rendered, also after any custom postRender callbacks have been run.
|
||||
* It is only called if visible is set to true.
|
||||
*/
|
||||
public postRender() {
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
}
|
|
@ -1 +0,0 @@
|
|||
{"version":3,"file":"app.js","sources":["app.ts"],"names":["Greeter","Greeter.constructor","Greeter.start","","Greeter.stop","onload"],"mappings":"AAAA;IAKIA,SALEA,OAAOA,CAKGA,OAAoBA;QAC5BC,IAAIA,CAACA,OAAOA,GAAGA,OAAOA;QACtBA,IAAIA,CAACA,OAAOA,CAACA,SAASA,IAAIA,eAAeA;QACzCA,IAAIA,CAACA,IAAIA,GAAGA,QAAQA,CAACA,aAAaA,CAACA,MAAMA,CAACA;QAC1CA,IAAIA,CAACA,OAAOA,CAACA,WAAWA,CAACA,IAAIA,CAACA,IAAIA,CAACA;QACnCA,IAAIA,CAACA,IAAIA,CAACA,SAASA,GAAGA,IAAIA,IAAIA,EAAEA,CAACA,WAAWA,EAAEA;IAClDA,CAACA;IAEDD,0BAAAA;QAAAE,iBAECA;QADGA,IAAIA,CAACA,UAAUA,GAAGA,WAAWA,CAACA;YAAMC,OAAAA,KAAIA,CAACA,IAAIA,CAACA,SAASA,GAAGA,IAAIA,IAAIA,EAAEA,CAACA,WAAWA,EAAEA,CAAAA;QAA9CA,CAA8CA,EAAED,GAAGA,CAACA;IAC5FA,CAACA;IAEDF,yBAAAA;QACII,YAAYA,CAACA,IAAIA,CAACA,UAAUA,CAACA;IACjCA,CAACA;IAELJ;AAACA,CAAAA,IAAA;AAED,MAAM,CAAC,MAAM,GAAG;IACZK,IAAIA,EAAEA,GAAGA,QAAQA,CAACA,cAAcA,CAACA,SAASA,CAACA,CAACA;IAC5CA,IAAIA,OAAOA,GAAGA,IAAIA,OAAOA,CAACA,EAAEA,CAACA,CAACA;IAC9BA,OAAOA,CAACA,KAAKA,EAAEA;AACnBA,CAACA"}
|
Binary file not shown.
|
@ -91,6 +91,7 @@
|
|||
<script src="../src/sound/Sound.js"></script>
|
||||
<script src="../src/sound/SoundManager.js"></script>
|
||||
<script src="../src/utils/Debug.js"></script>
|
||||
<script src="../src/utils/Color.js"></script>
|
||||
|
||||
<script src="../src/physics/arcade/ArcadePhysics.js"></script>
|
||||
<script src="../src/physics/arcade/Body.js"></script>
|
||||
|
@ -98,3 +99,5 @@
|
|||
<script src="../src/particles/Particles.js"></script>
|
||||
<script src="../src/particles/arcade/ArcadeParticles.js"></script>
|
||||
<script src="../src/particles/arcade/Emitter.js"></script>
|
||||
|
||||
|
||||
|
|
31
examples/stagecolor.php
Normal file
31
examples/stagecolor.php
Normal file
|
@ -0,0 +1,31 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<title>phaser.js - a new beginning</title>
|
||||
<?php
|
||||
require('js.php');
|
||||
?>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<script type="text/javascript">
|
||||
|
||||
(function () {
|
||||
|
||||
var game = new Phaser.Game(800, 600, Phaser.CANVAS, '', { create: create });
|
||||
|
||||
function create() {
|
||||
|
||||
// You can set the stage color using a hex value:
|
||||
game.stage.backgroundColor = '#550000';
|
||||
|
||||
// Or a direct color value:
|
||||
game.stage.backgroundColor = 0xbbaa44;
|
||||
|
||||
}
|
||||
|
||||
})();
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
|
@ -92,8 +92,16 @@ Object.defineProperty(Phaser.Stage.prototype, "backgroundColor", {
|
|||
},
|
||||
|
||||
set: function (color) {
|
||||
this._stage.setBackgroundColor(color);
|
||||
|
||||
this._backgroundColor = color;
|
||||
|
||||
if (typeof color === 'string')
|
||||
{
|
||||
color = Phaser.Color.hexToRGB(color);
|
||||
}
|
||||
|
||||
this._stage.setBackgroundColor(color);
|
||||
|
||||
},
|
||||
|
||||
enumerable: true,
|
||||
|
|
291
src/utils/Color.js
Normal file
291
src/utils/Color.js
Normal file
|
@ -0,0 +1,291 @@
|
|||
/**
|
||||
* A collection of methods useful for manipulating and comparing colors.
|
||||
*
|
||||
* @class Color
|
||||
* @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.Color = {
|
||||
|
||||
/**
|
||||
* Given an alpha and 3 color values this will return an integer representation of it
|
||||
*
|
||||
* @method getColor32
|
||||
* @param {Number} alpha The Alpha value (between 0 and 255)
|
||||
* @param {Number} red The Red channel value (between 0 and 255)
|
||||
* @param {Number} green The Green channel value (between 0 and 255)
|
||||
* @param {Number} blue The Blue channel value (between 0 and 255)
|
||||
* @return {Number} A native color value integer (format: 0xAARRGGBB)
|
||||
*/
|
||||
getColor32: function (alpha, red, green, blue) {
|
||||
return alpha << 24 | red << 16 | green << 8 | blue;
|
||||
},
|
||||
|
||||
/**
|
||||
* Given 3 color values this will return an integer representation of it.
|
||||
*
|
||||
* @method getColor
|
||||
* @param {Number} red The Red channel value (between 0 and 255)
|
||||
* @param {Number} green The Green channel value (between 0 and 255)
|
||||
* @param {Number} blue The Blue channel value (between 0 and 255)
|
||||
* @return {Number} A native color value integer (format: 0xRRGGBB)
|
||||
*/
|
||||
getColor: function (red, green, blue) {
|
||||
return red << 16 | green << 8 | blue;
|
||||
},
|
||||
|
||||
/**
|
||||
* Converts the given hex string into an object containing the RGB values.
|
||||
*
|
||||
* @method hexToRGB
|
||||
* @param {String} The string hex color to convert.
|
||||
* @return {Object} An object with 3 properties: r,g and b.
|
||||
*/
|
||||
hexToRGB: function (h) {
|
||||
|
||||
var hex16 = (h.charAt(0) == "#") ? h.substring(1, 7) : h;
|
||||
var red = parseInt(hex16.substring(0, 2), 16);
|
||||
var green = parseInt(hex16.substring(2, 4), 16);
|
||||
var blue = parseInt(hex16.substring(4, 6), 16);
|
||||
|
||||
return red << 16 | green << 8 | blue;
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* Returns a string containing handy information about the given color including string hex value,
|
||||
* RGB format information and HSL information. Each section starts on a newline, 3 lines in total.
|
||||
*
|
||||
* @method getColorInfo
|
||||
* @param {Number} color A color value in the format 0xAARRGGBB
|
||||
* @return {String} string containing the 3 lines of information
|
||||
*/
|
||||
getColorInfo: function (color) {
|
||||
var argb = Phaser.Color.getRGB(color);
|
||||
var hsl = Phaser.Color.RGBtoHSV(color);
|
||||
// Hex format
|
||||
var result = Phaser.Color.RGBtoHexstring(color) + "\n";
|
||||
// RGB format
|
||||
result = result.concat("Alpha: " + argb.alpha + " Red: " + argb.red + " Green: " + argb.green + " Blue: " + argb.blue) + "\n";
|
||||
// HSL info
|
||||
result = result.concat("Hue: " + hsl.hue + " Saturation: " + hsl.saturation + " Lightnes: " + hsl.lightness);
|
||||
return result;
|
||||
},
|
||||
|
||||
/**
|
||||
* Return a string representation of the color in the format 0xAARRGGBB
|
||||
*
|
||||
* @method RGBtoHexstring
|
||||
* @param {Number} color The color to get the string representation for
|
||||
* @return {String A string of length 10 characters in the format 0xAARRGGBB
|
||||
*/
|
||||
RGBtoHexstring: function (color) {
|
||||
var argb = Phaser.Color.getRGB(color);
|
||||
return "0x" + Phaser.Color.colorToHexstring(argb.alpha) + Phaser.Color.colorToHexstring(argb.red) + Phaser.Color.colorToHexstring(argb.green) + Phaser.Color.colorToHexstring(argb.blue);
|
||||
},
|
||||
|
||||
/**
|
||||
* Return a string representation of the color in the format #RRGGBB
|
||||
*
|
||||
* @method RGBtoWebstring
|
||||
* @param {Number} color The color to get the string representation for
|
||||
* @return {String} A string of length 10 characters in the format 0xAARRGGBB
|
||||
*/
|
||||
RGBtoWebstring: function (color) {
|
||||
var argb = Phaser.Color.getRGB(color);
|
||||
return "#" + Phaser.Color.colorToHexstring(argb.red) + Phaser.Color.colorToHexstring(argb.green) + Phaser.Color.colorToHexstring(argb.blue);
|
||||
},
|
||||
|
||||
/**
|
||||
* Return a string containing a hex representation of the given color
|
||||
*
|
||||
* @method colorToHexstring
|
||||
* @param {Number} color The color channel to get the hex value for, must be a value between 0 and 255)
|
||||
* @return {String} A string of length 2 characters, i.e. 255 = FF, 0 = 00
|
||||
*/
|
||||
colorToHexstring: function (color) {
|
||||
var digits = "0123456789ABCDEF";
|
||||
var lsd = color % 16;
|
||||
var msd = (color - lsd) / 16;
|
||||
var hexified = digits.charAt(msd) + digits.charAt(lsd);
|
||||
return hexified;
|
||||
},
|
||||
|
||||
/**
|
||||
* Interpolates the two given colours based on the supplied step and currentStep properties.
|
||||
* @method interpolateColor
|
||||
* @param {Number} color1
|
||||
* @param {Number} color2
|
||||
* @param {Number} steps
|
||||
* @param {Number} currentStep
|
||||
* @param {Number} alpha
|
||||
* @return {Number} The interpolated color value.
|
||||
*/
|
||||
interpolateColor: function (color1, color2, steps, currentStep, alpha) {
|
||||
if (typeof alpha === "undefined") { alpha = 255; }
|
||||
var src1 = Phaser.Color.getRGB(color1);
|
||||
var src2 = Phaser.Color.getRGB(color2);
|
||||
var r = (((src2.red - src1.red) * currentStep) / steps) + src1.red;
|
||||
var g = (((src2.green - src1.green) * currentStep) / steps) + src1.green;
|
||||
var b = (((src2.blue - src1.blue) * currentStep) / steps) + src1.blue;
|
||||
return Phaser.Color.getColor32(alpha, r, g, b);
|
||||
},
|
||||
|
||||
/**
|
||||
* Interpolates the two given colours based on the supplied step and currentStep properties.
|
||||
* @method interpolateColorWithRGB
|
||||
* @param {Number} color
|
||||
* @param {Number} r
|
||||
* @param {Number} g
|
||||
* @param {Number} b
|
||||
* @param {Number} steps
|
||||
* @param {Number} currentStep
|
||||
* @return {Number} The interpolated color value.
|
||||
*/
|
||||
interpolateColorWithRGB: function (color, r, g, b, steps, currentStep) {
|
||||
var src = Phaser.Color.getRGB(color);
|
||||
var or = (((r - src.red) * currentStep) / steps) + src.red;
|
||||
var og = (((g - src.green) * currentStep) / steps) + src.green;
|
||||
var ob = (((b - src.blue) * currentStep) / steps) + src.blue;
|
||||
return Phaser.Color.getColor(or, og, ob);
|
||||
},
|
||||
|
||||
/**
|
||||
* Interpolates the two given colours based on the supplied step and currentStep properties.
|
||||
* @method interpolateRGB
|
||||
* @param {Number} r1
|
||||
* @param {Number} g1
|
||||
* @param {Number} b1
|
||||
* @param {Number} r2
|
||||
* @param {Number} g2
|
||||
* @param {Number} b2
|
||||
* @param {Number} steps
|
||||
* @param {Number} currentStep
|
||||
* @return {Number} The interpolated color value.
|
||||
*/
|
||||
interpolateRGB: function (r1, g1, b1, r2, g2, b2, steps, currentStep) {
|
||||
var r = (((r2 - r1) * currentStep) / steps) + r1;
|
||||
var g = (((g2 - g1) * currentStep) / steps) + g1;
|
||||
var b = (((b2 - b1) * currentStep) / steps) + b1;
|
||||
return Phaser.Color.getColor(r, g, b);
|
||||
},
|
||||
|
||||
/**
|
||||
* Returns a random color value between black and white
|
||||
* <p>Set the min value to start each channel from the given offset.</p>
|
||||
* <p>Set the max value to restrict the maximum color used per channel</p>
|
||||
*
|
||||
* @method getRandomColor
|
||||
* @param {Number} min The lowest value to use for the color
|
||||
* @param {Number} max The highest value to use for the color
|
||||
* @param {Number} alpha The alpha value of the returning color (default 255 = fully opaque)
|
||||
* @return {Number} 32-bit color value with alpha
|
||||
*/
|
||||
getRandomColor: function (min, max, alpha) {
|
||||
if (typeof min === "undefined") { min = 0; }
|
||||
if (typeof max === "undefined") { max = 255; }
|
||||
if (typeof alpha === "undefined") { alpha = 255; }
|
||||
// Sanity checks
|
||||
if(max > 255) {
|
||||
return Phaser.Color.getColor(255, 255, 255);
|
||||
}
|
||||
if(min > max) {
|
||||
return Phaser.Color.getColor(255, 255, 255);
|
||||
}
|
||||
var red = min + Math.round(Math.random() * (max - min));
|
||||
var green = min + Math.round(Math.random() * (max - min));
|
||||
var blue = min + Math.round(Math.random() * (max - min));
|
||||
return Phaser.Color.getColor32(alpha, red, green, blue);
|
||||
},
|
||||
|
||||
/**
|
||||
* Return the component parts of a color as an Object with the properties alpha, red, green, blue
|
||||
*
|
||||
* <p>Alpha will only be set if it exist in the given color (0xAARRGGBB)</p>
|
||||
*
|
||||
* @method getRGB
|
||||
* @param {Number} color in RGB (0xRRGGBB) or ARGB format (0xAARRGGBB)
|
||||
* @return {Object} An Object with properties: alpha, red, green, blue
|
||||
*/
|
||||
getRGB: function (color) {
|
||||
return {
|
||||
alpha: color >>> 24,
|
||||
red: color >> 16 & 0xFF,
|
||||
green: color >> 8 & 0xFF,
|
||||
blue: color & 0xFF
|
||||
};
|
||||
},
|
||||
|
||||
/**
|
||||
* Returns a CSS friendly string value from the given color.
|
||||
* @method getWebRGB
|
||||
* @param {Number} color
|
||||
* @return {String} A string in the format: 'rgba(r,g,b,a)'
|
||||
*/
|
||||
getWebRGB: function (color) {
|
||||
var alpha = (color >>> 24) / 255;
|
||||
var red = color >> 16 & 0xFF;
|
||||
var green = color >> 8 & 0xFF;
|
||||
var blue = color & 0xFF;
|
||||
return 'rgba(' + red.toString() + ',' + green.toString() + ',' + blue.toString() + ',' + alpha.toString() + ')';
|
||||
},
|
||||
|
||||
/**
|
||||
* Given a native color value (in the format 0xAARRGGBB) this will return the Alpha component, as a value between 0 and 255
|
||||
*
|
||||
* @method getAlpha
|
||||
* @param {Number} color In the format 0xAARRGGBB
|
||||
* @return {Number} The Alpha component of the color, will be between 0 and 1 (0 being no Alpha (opaque), 1 full Alpha (transparent))
|
||||
*/
|
||||
getAlpha: function (color) {
|
||||
return color >>> 24;
|
||||
},
|
||||
|
||||
/**
|
||||
* Given a native color value (in the format 0xAARRGGBB) this will return the Alpha component as a value between 0 and 1
|
||||
*
|
||||
* @method getAlphaFloat
|
||||
* @param {Number} color In the format 0xAARRGGBB
|
||||
* @return {Number} The Alpha component of the color, will be between 0 and 1 (0 being no Alpha (opaque), 1 full Alpha (transparent))
|
||||
*/
|
||||
getAlphaFloat: function (color) {
|
||||
return (color >>> 24) / 255;
|
||||
},
|
||||
|
||||
/**
|
||||
* Given a native color value (in the format 0xAARRGGBB) this will return the Red component, as a value between 0 and 255
|
||||
*
|
||||
* @method getRed
|
||||
* @param {Number} color In the format 0xAARRGGBB
|
||||
* @return {Number} The Red component of the color, will be between 0 and 255 (0 being no color, 255 full Red)
|
||||
*/
|
||||
getRed: function (color) {
|
||||
return color >> 16 & 0xFF;
|
||||
},
|
||||
|
||||
/**
|
||||
* Given a native color value (in the format 0xAARRGGBB) this will return the Green component, as a value between 0 and 255
|
||||
*
|
||||
* @method getGreen
|
||||
* @param {Number} color In the format 0xAARRGGBB
|
||||
* @return {Number} The Green component of the color, will be between 0 and 255 (0 being no color, 255 full Green)
|
||||
*/
|
||||
getGreen: function (color) {
|
||||
return color >> 8 & 0xFF;
|
||||
},
|
||||
|
||||
/**
|
||||
* Given a native color value (in the format 0xAARRGGBB) this will return the Blue component, as a value between 0 and 255
|
||||
*
|
||||
* @method getBlue
|
||||
* @param {Number} color In the format 0xAARRGGBB
|
||||
* @return {Number} The Blue component of the color, will be between 0 and 255 (0 being no color, 255 full Blue)
|
||||
*/
|
||||
getBlue: function (color) {
|
||||
return color & 0xFF;
|
||||
}
|
||||
|
||||
};
|
Loading…
Reference in a new issue