Mirrors/phaser
2
0
Fork 0
mirror of https://github.com/photonstorm/phaser synced 2024-12-18 09:03:29 +00:00
Code Issues Projects Releases Packages Wiki Activity
phaser/docs/Phaser.Color.html
photonstorm 7eee1eac1f Updated docs to 2.0.1.
2014-03-24 12:41:45 +00:00

3753 lines
No EOL
52 KiB
HTML
Raw Blame History

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Phaser Class: Color</title>
<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<link type="text/css" rel="stylesheet" href="styles/sunlight.default.css">
<link type="text/css" rel="stylesheet" href="styles/site.cerulean.css">
</head>
<body>
<div class="container-fluid">
<div class="navbar navbar-fixed-top navbar-inverse">
<div class="navbar-inner">
<a class="brand" href="index.html">Phaser</a>
<ul class="nav">
<li class="dropdown">
<a href="namespaces.list.html" class="dropdown-toggle" data-toggle="dropdown">Namespaces<b
class="caret"></b></a>
<ul class="dropdown-menu ">
<li>
<a href="Phaser.html">Phaser</a>
</li>
</ul>
</li>
<li class="dropdown">
<a href="classes.list.html" class="dropdown-toggle" data-toggle="dropdown">Classes<b
class="caret"></b></a>
<ul class="dropdown-menu ">
<li>
<a href="Phaser.Animation.html">Animation</a>
</li>
<li>
<a href="Phaser.AnimationManager.html">AnimationManager</a>
</li>
<li>
<a href="Phaser.AnimationParser.html">AnimationParser</a>
</li>
<li>
<a href="Phaser.BitmapData.html">BitmapData</a>
</li>
<li>
<a href="Phaser.BitmapText.html">BitmapText</a>
</li>
<li>
<a href="Phaser.Button.html">Button</a>
</li>
<li>
<a href="Phaser.Cache.html">Cache</a>
</li>
<li>
<a href="Phaser.Camera.html">Camera</a>
</li>
<li>
<a href="Phaser.Canvas.html">Canvas</a>
</li>
<li>
<a href="Phaser.Circle.html">Circle</a>
</li>
<li>
<a href="Phaser.Color.html">Color</a>
</li>
<li>
<a href="Phaser.Device.html">Device</a>
</li>
<li>
<a href="Phaser.Easing.html">Easing</a>
</li>
<li>
<a href="Phaser.Easing.Back.html">Back</a>
</li>
<li>
<a href="Phaser.Easing.Bounce.html">Bounce</a>
</li>
<li>
<a href="Phaser.Easing.Circular.html">Circular</a>
</li>
<li>
<a href="Phaser.Easing.Cubic.html">Cubic</a>
</li>
<li>
<a href="Phaser.Easing.Elastic.html">Elastic</a>
</li>
<li>
<a href="Phaser.Easing.Exponential.html">Exponential</a>
</li>
<li>
<a href="Phaser.Easing.Linear.html">Linear</a>
</li>
<li>
<a href="Phaser.Easing.Quadratic.html">Quadratic</a>
</li>
<li>
<a href="Phaser.Easing.Quartic.html">Quartic</a>
</li>
<li>
<a href="Phaser.Easing.Quintic.html">Quintic</a>
</li>
<li>
<a href="Phaser.Easing.Sinusoidal.html">Sinusoidal</a>
</li>
<li>
<a href="Phaser.Ellipse.html">Ellipse</a>
</li>
<li>
<a href="Phaser.Events.html">Events</a>
</li>
<li>
<a href="Phaser.Filter.html">Filter</a>
</li>
<li>
<a href="Phaser.Frame.html">Frame</a>
</li>
<li>
<a href="Phaser.FrameData.html">FrameData</a>
</li>
<li>
<a href="Phaser.Game.html">Game</a>
</li>
<li>
<a href="Phaser.GameObjectCreator.html">GameObjectCreator</a>
</li>
<li>
<a href="Phaser.GameObjectFactory.html">GameObjectFactory</a>
</li>
<li>
<a href="Phaser.Gamepad.html">Gamepad</a>
</li>
<li>
<a href="Phaser.GamepadButton.html">GamepadButton</a>
</li>
<li>
<a href="Phaser.Graphics.html">Graphics</a>
</li>
<li>
<a href="Phaser.Group.html">Group</a>
</li>
<li>
<a href="Phaser.Image.html">Image</a>
</li>
<li>
<a href="Phaser.Input.html">Input</a>
</li>
<li>
<a href="Phaser.InputHandler.html">InputHandler</a>
</li>
<li>
<a href="Phaser.Key.html">Key</a>
</li>
<li>
<a href="Phaser.Keyboard.html">Keyboard</a>
</li>
<li>
<a href="Phaser.Line.html">Line</a>
</li>
<li>
<a href="Phaser.LinkedList.html">LinkedList</a>
</li>
<li>
<a href="Phaser.Loader.html">Loader</a>
</li>
<li>
<a href="Phaser.LoaderParser.html">LoaderParser</a>
</li>
<li>
<a href="Phaser.Math.html">Math</a>
</li>
<li>
<a href="Phaser.Mouse.html">Mouse</a>
</li>
<li>
<a href="Phaser.MSPointer.html">MSPointer</a>
</li>
<li>
<a href="Phaser.Net.html">Net</a>
</li>
<li>
<a href="Phaser.Particles.html">Particles</a>
</li>
<li>
<a href="Phaser.Particles.Arcade.Emitter.html">Emitter</a>
</li>
<li>
<a href="Phaser.Physics.html">Physics</a>
</li>
<li>
<a href="Phaser.Physics.Arcade.html">Arcade</a>
</li>
<li>
<a href="Phaser.Physics.Arcade.Body.html">Body</a>
</li>
<li>
<a href="Phaser.Physics.Ninja.html">Ninja</a>
</li>
<li>
<a href="Phaser.Physics.Ninja.AABB.html">AABB</a>
</li>
<li>
<a href="Phaser.Physics.Ninja.Body.html">Body</a>
</li>
<li>
<a href="Phaser.Physics.Ninja.Circle.html">Circle</a>
</li>
<li>
<a href="Phaser.Physics.Ninja.Tile.html">Tile</a>
</li>
<li>
<a href="Phaser.Physics.P2.html">P2</a>
</li>
<li>
<a href="Phaser.Physics.P2.Body.html">Body</a>
</li>
<li>
<a href="Phaser.Physics.P2.BodyDebug.html">BodyDebug</a>
</li>
<li>
<a href="Phaser.Physics.P2.CollisionGroup.html">CollisionGroup</a>
</li>
<li>
<a href="Phaser.Physics.P2.ContactMaterial.html">ContactMaterial</a>
</li>
<li>
<a href="Phaser.Physics.P2.DistanceConstraint.html">DistanceConstraint</a>
</li>
<li>
<a href="Phaser.Physics.P2.GearConstraint.html">GearConstraint</a>
</li>
<li>
<a href="Phaser.Physics.P2.InversePointProxy.html">InversePointProxy</a>
</li>
<li>
<a href="Phaser.Physics.P2.LockConstraint.html">LockConstraint</a>
</li>
<li>
<a href="Phaser.Physics.P2.Material.html">Material</a>
</li>
<li>
<a href="Phaser.Physics.P2.PointProxy.html">PointProxy</a>
</li>
<li>
<a href="Phaser.Physics.P2.PrismaticConstraint.html">PrismaticConstraint</a>
</li>
<li>
<a href="Phaser.Physics.P2.RevoluteConstraint.html">RevoluteConstraint</a>
</li>
<li>
<a href="Phaser.Physics.P2.Spring.html">Spring</a>
</li>
<li>
<a href="Phaser.Plugin.html">Plugin</a>
</li>
<li>
<a href="Phaser.PluginManager.html">PluginManager</a>
</li>
<li>
<a href="Phaser.Point.html">Point</a>
</li>
<li>
<a href="Phaser.Pointer.html">Pointer</a>
</li>
<li>
<a href="Phaser.Polygon.html">Polygon</a>
</li>
<li>
<a href="Phaser.QuadTree.html">QuadTree</a>
</li>
<li>
<a href="Phaser.RandomDataGenerator.html">RandomDataGenerator</a>
</li>
<li>
<a href="Phaser.Rectangle.html">Rectangle</a>
</li>
<li>
<a href="Phaser.RenderTexture.html">RenderTexture</a>
</li>
<li>
<a href="Phaser.RequestAnimationFrame.html">RequestAnimationFrame</a>
</li>
<li>
<a href="Phaser.RetroFont.html">RetroFont</a>
</li>
<li>
<a href="Phaser.ScaleManager.html">ScaleManager</a>
</li>
<li>
<a href="Phaser.Signal.html">Signal</a>
</li>
<li>
<a href="Phaser.SinglePad.html">SinglePad</a>
</li>
<li>
<a href="Phaser.Sound.html">Sound</a>
</li>
<li>
<a href="Phaser.SoundManager.html">SoundManager</a>
</li>
<li>
<a href="Phaser.Sprite.html">Sprite</a>
</li>
<li>
<a href="Phaser.SpriteBatch.html">SpriteBatch</a>
</li>
<li>
<a href="Phaser.Stage.html">Stage</a>
</li>
<li>
<a href="Phaser.State.html">State</a>
</li>
<li>
<a href="Phaser.StateManager.html">StateManager</a>
</li>
<li>
<a href="Phaser.Text.html">Text</a>
</li>
<li>
<a href="Phaser.Tile.html">Tile</a>
</li>
<li>
<a href="Phaser.Tilemap.html">Tilemap</a>
</li>
<li>
<a href="Phaser.TilemapLayer.html">TilemapLayer</a>
</li>
<li>
<a href="Phaser.TilemapParser.html">TilemapParser</a>
</li>
<li>
<a href="Phaser.Tileset.html">Tileset</a>
</li>
<li>
<a href="Phaser.TileSprite.html">TileSprite</a>
</li>
<li>
<a href="Phaser.Time.html">Time</a>
</li>
<li>
<a href="Phaser.Timer.html">Timer</a>
</li>
<li>
<a href="Phaser.TimerEvent.html">TimerEvent</a>
</li>
<li>
<a href="Phaser.Touch.html">Touch</a>
</li>
<li>
<a href="Phaser.Tween.html">Tween</a>
</li>
<li>
<a href="Phaser.TweenManager.html">TweenManager</a>
</li>
<li>
<a href="Phaser.Utils.html">Utils</a>
</li>
<li>
<a href="Phaser.Utils.Debug.html">Debug</a>
</li>
<li>
<a href="Phaser.World.html">World</a>
</li>
<li>
<a href="SignalBinding.html">SignalBinding</a>
</li>
</ul>
</li>
</ul>
</div>
</div>
<div class="row-fluid">
<div class="span8">
<div id="main">
<h1 class="page-title">Class: Color</h1>
<section>
<header>
<h2>
<span class="ancestors"><a href="Phaser.html">Phaser</a>.</span>
Color
</h2>
</header>
<article>
<div class="container-overview">
<dt>
<h4 class="name" id="Color"><span class="type-signature"></span>new Color<span class="signature">()</span><span class="type-signature"></span></h4>
</dt>
<dd>
<div class="description">
<p>A collection of methods useful for manipulating and comparing colors.</p>
</div>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="Color.js.html">utils/Color.js</a>, <a href="Color.js.html#sunlight-1-line-3">line 3</a>
</li></ul></dd>
</dl>
</dd>
</div>
<h3 class="subsection-title">Methods</h3>
<dl>
<dt>
<h4 class="name" id="colorToHexstring"><span class="type-signature">&lt;static> </span>colorToHexstring<span class="signature">(color)</span><span class="type-signature"> &rarr; {string}</span></h4>
</dt>
<dd>
<div class="description">
<p>Return a string containing a hex representation of the given color.</p>
</div>
<h5>Parameters:</h5>
<table class="params table table-striped">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>color</code></td>
<td class="type">
<span class="param-type">number</span>
</td>
<td class="description last"><p>The color channel to get the hex value for, must be a value between 0 and 255).</p></td>
</tr>
</tbody>
</table>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="Color.js.html">utils/Color.js</a>, <a href="Color.js.html#sunlight-1-line-127">line 127</a>
</li></ul></dd>
</dl>
<h5>Returns:</h5>
<div class="param-desc">
<p>A string of length 2 characters, i.e. 255 = FF, 0 = 00.</p>
</div>
<dl>
<dt>
Type
</dt>
<dd>
<span class="param-type">string</span>
</dd>
</dl>
</dd>
<dt>
<h4 class="name" id="getAlpha"><span class="type-signature">&lt;static> </span>getAlpha<span class="signature">(color)</span><span class="type-signature"> &rarr; {number}</span></h4>
</dt>
<dd>
<div class="description">
<p>Given a native color value (in the format 0xAARRGGBB) this will return the Alpha component, as a value between 0 and 255.</p>
</div>
<h5>Parameters:</h5>
<table class="params table table-striped">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>color</code></td>
<td class="type">
<span class="param-type">number</span>
</td>
<td class="description last"><p>In the format 0xAARRGGBB.</p></td>
</tr>
</tbody>
</table>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="Color.js.html">utils/Color.js</a>, <a href="Color.js.html#sunlight-1-line-291">line 291</a>
</li></ul></dd>
</dl>
<h5>Returns:</h5>
<div class="param-desc">
<p>The Alpha component of the color, will be between 0 and 1 (0 being no Alpha (opaque), 1 full Alpha (transparent)).</p>
</div>
<dl>
<dt>
Type
</dt>
<dd>
<span class="param-type">number</span>
</dd>
</dl>
</dd>
<dt>
<h4 class="name" id="getAlphaFloat"><span class="type-signature">&lt;static> </span>getAlphaFloat<span class="signature">(color)</span><span class="type-signature"> &rarr; {number}</span></h4>
</dt>
<dd>
<div class="description">
<p>Given a native color value (in the format 0xAARRGGBB) this will return the Alpha component as a value between 0 and 1.</p>
</div>
<h5>Parameters:</h5>
<table class="params table table-striped">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>color</code></td>
<td class="type">
<span class="param-type">number</span>
</td>
<td class="description last"><p>In the format 0xAARRGGBB.</p></td>
</tr>
</tbody>
</table>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="Color.js.html">utils/Color.js</a>, <a href="Color.js.html#sunlight-1-line-303">line 303</a>
</li></ul></dd>
</dl>
<h5>Returns:</h5>
<div class="param-desc">
<p>The Alpha component of the color, will be between 0 and 1 (0 being no Alpha (opaque), 1 full Alpha (transparent)).</p>
</div>
<dl>
<dt>
Type
</dt>
<dd>
<span class="param-type">number</span>
</dd>
</dl>
</dd>
<dt>
<h4 class="name" id="getBlue"><span class="type-signature">&lt;static> </span>getBlue<span class="signature">(color)</span><span class="type-signature"> &rarr; {number}</span></h4>
</dt>
<dd>
<div class="description">
<p>Given a native color value (in the format 0xAARRGGBB) this will return the Blue component, as a value between 0 and 255.</p>
</div>
<h5>Parameters:</h5>
<table class="params table table-striped">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>color</code></td>
<td class="type">
<span class="param-type">number</span>
</td>
<td class="description last"><p>In the format 0xAARRGGBB.</p></td>
</tr>
</tbody>
</table>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="Color.js.html">utils/Color.js</a>, <a href="Color.js.html#sunlight-1-line-339">line 339</a>
</li></ul></dd>
</dl>
<h5>Returns:</h5>
<div class="param-desc">
<p>The Blue component of the color, will be between 0 and 255 (0 being no color, 255 full Blue).</p>
</div>
<dl>
<dt>
Type
</dt>
<dd>
<span class="param-type">number</span>
</dd>
</dl>
</dd>
<dt>
<h4 class="name" id="getColor"><span class="type-signature">&lt;static> </span>getColor<span class="signature">(red, green, blue)</span><span class="type-signature"> &rarr; {number}</span></h4>
</dt>
<dd>
<div class="description">
<p>Given 3 color values this will return an integer representation of it.</p>
</div>
<h5>Parameters:</h5>
<table class="params table table-striped">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>red</code></td>
<td class="type">
<span class="param-type">number</span>
</td>
<td class="description last"><p>The Red channel value (between 0 and 255).</p></td>
</tr>
<tr>
<td class="name"><code>green</code></td>
<td class="type">
<span class="param-type">number</span>
</td>
<td class="description last"><p>The Green channel value (between 0 and 255).</p></td>
</tr>
<tr>
<td class="name"><code>blue</code></td>
<td class="type">
<span class="param-type">number</span>
</td>
<td class="description last"><p>The Blue channel value (between 0 and 255).</p></td>
</tr>
</tbody>
</table>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="Color.js.html">utils/Color.js</a>, <a href="Color.js.html#sunlight-1-line-29">line 29</a>
</li></ul></dd>
</dl>
<h5>Returns:</h5>
<div class="param-desc">
<p>A native color value integer (format: 0xRRGGBB).</p>
</div>
<dl>
<dt>
Type
</dt>
<dd>
<span class="param-type">number</span>
</dd>
</dl>
</dd>
<dt>
<h4 class="name" id="getColor32"><span class="type-signature">&lt;static> </span>getColor32<span class="signature">(alpha, red, green, blue)</span><span class="type-signature"> &rarr; {number}</span></h4>
</dt>
<dd>
<div class="description">
<p>Given an alpha and 3 color values this will return an integer representation of it.</p>
</div>
<h5>Parameters:</h5>
<table class="params table table-striped">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>alpha</code></td>
<td class="type">
<span class="param-type">number</span>
</td>
<td class="description last"><p>The Alpha value (between 0 and 255).</p></td>
</tr>
<tr>
<td class="name"><code>red</code></td>
<td class="type">
<span class="param-type">number</span>
</td>
<td class="description last"><p>The Red channel value (between 0 and 255).</p></td>
</tr>
<tr>
<td class="name"><code>green</code></td>
<td class="type">
<span class="param-type">number</span>
</td>
<td class="description last"><p>The Green channel value (between 0 and 255).</p></td>
</tr>
<tr>
<td class="name"><code>blue</code></td>
<td class="type">
<span class="param-type">number</span>
</td>
<td class="description last"><p>The Blue channel value (between 0 and 255).</p></td>
</tr>
</tbody>
</table>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="Color.js.html">utils/Color.js</a>, <a href="Color.js.html#sunlight-1-line-14">line 14</a>
</li></ul></dd>
</dl>
<h5>Returns:</h5>
<div class="param-desc">
<p>A native color value integer (format: 0xAARRGGBB).</p>
</div>
<dl>
<dt>
Type
</dt>
<dd>
<span class="param-type">number</span>
</dd>
</dl>
</dd>
<dt>
<h4 class="name" id="getColorInfo"><span class="type-signature">&lt;static> </span>getColorInfo<span class="signature">(color)</span><span class="type-signature"> &rarr; {string}</span></h4>
</dt>
<dd>
<div class="description">
<p>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.</p>
</div>
<h5>Parameters:</h5>
<table class="params table table-striped">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>color</code></td>
<td class="type">
<span class="param-type">number</span>
</td>
<td class="description last"><p>A color value in the format 0xAARRGGBB.</p></td>
</tr>
</tbody>
</table>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="Color.js.html">utils/Color.js</a>, <a href="Color.js.html#sunlight-1-line-68">line 68</a>
</li></ul></dd>
</dl>
<h5>Returns:</h5>
<div class="param-desc">
<p>String containing the 3 lines of information.</p>
</div>
<dl>
<dt>
Type
</dt>
<dd>
<span class="param-type">string</span>
</dd>
</dl>
</dd>
<dt>
<h4 class="name" id="getGreen"><span class="type-signature">&lt;static> </span>getGreen<span class="signature">(color)</span><span class="type-signature"> &rarr; {number}</span></h4>
</dt>
<dd>
<div class="description">
<p>Given a native color value (in the format 0xAARRGGBB) this will return the Green component, as a value between 0 and 255.</p>
</div>
<h5>Parameters:</h5>
<table class="params table table-striped">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>color</code></td>
<td class="type">
<span class="param-type">number</span>
</td>
<td class="description last"><p>In the format 0xAARRGGBB.</p></td>
</tr>
</tbody>
</table>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="Color.js.html">utils/Color.js</a>, <a href="Color.js.html#sunlight-1-line-327">line 327</a>
</li></ul></dd>
</dl>
<h5>Returns:</h5>
<div class="param-desc">
<p>The Green component of the color, will be between 0 and 255 (0 being no color, 255 full Green).</p>
</div>
<dl>
<dt>
Type
</dt>
<dd>
<span class="param-type">number</span>
</dd>
</dl>
</dd>
<dt>
<h4 class="name" id="getRandomColor"><span class="type-signature">&lt;static> </span>getRandomColor<span class="signature">(min, max, alpha)</span><span class="type-signature"> &rarr; {number}</span></h4>
</dt>
<dd>
<div class="description">
<p>Returns a random color value between black and white
Set the min value to start each channel from the given offset.
Set the max value to restrict the maximum color used per channel.</p>
</div>
<h5>Parameters:</h5>
<table class="params table table-striped">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>min</code></td>
<td class="type">
<span class="param-type">number</span>
</td>
<td class="description last"><p>The lowest value to use for the color.</p></td>
</tr>
<tr>
<td class="name"><code>max</code></td>
<td class="type">
<span class="param-type">number</span>
</td>
<td class="description last"><p>The highest value to use for the color.</p></td>
</tr>
<tr>
<td class="name"><code>alpha</code></td>
<td class="type">
<span class="param-type">number</span>
</td>
<td class="description last"><p>The alpha value of the returning color (default 255 = fully opaque).</p></td>
</tr>
</tbody>
</table>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="Color.js.html">utils/Color.js</a>, <a href="Color.js.html#sunlight-1-line-217">line 217</a>
</li></ul></dd>
</dl>
<h5>Returns:</h5>
<div class="param-desc">
<p>32-bit color value with alpha.</p>
</div>
<dl>
<dt>
Type
</dt>
<dd>
<span class="param-type">number</span>
</dd>
</dl>
</dd>
<dt>
<h4 class="name" id="getRed"><span class="type-signature">&lt;static> </span>getRed<span class="signature">(color)</span><span class="type-signature"> &rarr; {number}</span></h4>
</dt>
<dd>
<div class="description">
<p>Given a native color value (in the format 0xAARRGGBB) this will return the Red component, as a value between 0 and 255.</p>
</div>
<h5>Parameters:</h5>
<table class="params table table-striped">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>color</code></td>
<td class="type">
<span class="param-type">number</span>
</td>
<td class="description last"><p>In the format 0xAARRGGBB.</p></td>
</tr>
</tbody>
</table>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="Color.js.html">utils/Color.js</a>, <a href="Color.js.html#sunlight-1-line-315">line 315</a>
</li></ul></dd>
</dl>
<h5>Returns:</h5>
<div class="param-desc">
<p>The Red component of the color, will be between 0 and 255 (0 being no color, 255 full Red).</p>
</div>
<dl>
<dt>
Type
</dt>
<dd>
<span class="param-type">number</span>
</dd>
</dl>
</dd>
<dt>
<h4 class="name" id="getRGB"><span class="type-signature">&lt;static> </span>getRGB<span class="signature">(color)</span><span class="type-signature"> &rarr; {object}</span></h4>
</dt>
<dd>
<div class="description">
<p>Return the component parts of a color as an Object with the properties alpha, red, green, blue</p>
<p>Alpha will only be set if it exist in the given color (0xAARRGGBB)</p>
</div>
<h5>Parameters:</h5>
<table class="params table table-striped">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>color</code></td>
<td class="type">
<span class="param-type">number</span>
</td>
<td class="description last"><p>Color in RGB (0xRRGGBB) or ARGB format (0xAARRGGBB).</p></td>
</tr>
</tbody>
</table>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="Color.js.html">utils/Color.js</a>, <a href="Color.js.html#sunlight-1-line-252">line 252</a>
</li></ul></dd>
</dl>
<h5>Returns:</h5>
<div class="param-desc">
<p>An Object with properties: alpha, red, green, blue.</p>
</div>
<dl>
<dt>
Type
</dt>
<dd>
<span class="param-type">object</span>
</dd>
</dl>
</dd>
<dt>
<h4 class="name" id="getWebRGB"><span class="type-signature">&lt;static> </span>getWebRGB<span class="signature">(color)</span><span class="type-signature"> &rarr; {string}</span></h4>
</dt>
<dd>
<div class="description">
<p>Returns a CSS friendly string value from the given color.</p>
</div>
<h5>Parameters:</h5>
<table class="params table table-striped">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>color</code></td>
<td class="type">
<span class="param-type">number</span>
</td>
<td class="description last"></td>
</tr>
</tbody>
</table>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="Color.js.html">utils/Color.js</a>, <a href="Color.js.html#sunlight-1-line-273">line 273</a>
</li></ul></dd>
</dl>
<h5>Returns:</h5>
<div class="param-desc">
<p>A string in the format: 'rgba(r,g,b,a)'</p>
</div>
<dl>
<dt>
Type
</dt>
<dd>
<span class="param-type">string</span>
</dd>
</dl>
</dd>
<dt>
<h4 class="name" id="hexToRGB"><span class="type-signature">&lt;static> </span>hexToRGB<span class="signature">(h)</span><span class="type-signature"> &rarr; {number}</span></h4>
</dt>
<dd>
<div class="description">
<p>Converts the given hex string into an integer color value.</p>
</div>
<h5>Parameters:</h5>
<table class="params table table-striped">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>h</code></td>
<td class="type">
<span class="param-type">string</span>
</td>
<td class="description last"><p>The string hex color to convert.</p></td>
</tr>
</tbody>
</table>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="Color.js.html">utils/Color.js</a>, <a href="Color.js.html#sunlight-1-line-43">line 43</a>
</li></ul></dd>
</dl>
<h5>Returns:</h5>
<div class="param-desc">
<p>The rgb color value.</p>
</div>
<dl>
<dt>
Type
</dt>
<dd>
<span class="param-type">number</span>
</dd>
</dl>
</dd>
<dt>
<h4 class="name" id="interpolateColor"><span class="type-signature">&lt;static> </span>interpolateColor<span class="signature">(color1, color2, steps, currentStep, alpha)</span><span class="type-signature"> &rarr; {number}</span></h4>
</dt>
<dd>
<div class="description">
<p>Interpolates the two given colours based on the supplied step and currentStep properties.</p>
</div>
<h5>Parameters:</h5>
<table class="params table table-striped">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>color1</code></td>
<td class="type">
<span class="param-type">number</span>
</td>
<td class="description last"><p>The first color value.</p></td>
</tr>
<tr>
<td class="name"><code>color2</code></td>
<td class="type">
<span class="param-type">number</span>
</td>
<td class="description last"><p>The second color value.</p></td>
</tr>
<tr>
<td class="name"><code>steps</code></td>
<td class="type">
<span class="param-type">number</span>
</td>
<td class="description last"><p>The number of steps to run the interpolation over.</p></td>
</tr>
<tr>
<td class="name"><code>currentStep</code></td>
<td class="type">
<span class="param-type">number</span>
</td>
<td class="description last"><p>The currentStep value. If the interpolation will take 100 steps, a currentStep value of 50 would be half-way between the two.</p></td>
</tr>
<tr>
<td class="name"><code>alpha</code></td>
<td class="type">
<span class="param-type">number</span>
</td>
<td class="description last"><p>The alpha of the returned color.</p></td>
</tr>
</tbody>
</table>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="Color.js.html">utils/Color.js</a>, <a href="Color.js.html#sunlight-1-line-145">line 145</a>
</li></ul></dd>
</dl>
<h5>Returns:</h5>
<div class="param-desc">
<p>The interpolated color value.</p>
</div>
<dl>
<dt>
Type
</dt>
<dd>
<span class="param-type">number</span>
</dd>
</dl>
</dd>
<dt>
<h4 class="name" id="interpolateColorWithRGB"><span class="type-signature">&lt;static> </span>interpolateColorWithRGB<span class="signature">(color, r, g, b, steps, currentStep)</span><span class="type-signature"> &rarr; {number}</span></h4>
</dt>
<dd>
<div class="description">
<p>Interpolates the two given colours based on the supplied step and currentStep properties.</p>
</div>
<h5>Parameters:</h5>
<table class="params table table-striped">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>color</code></td>
<td class="type">
<span class="param-type">number</span>
</td>
<td class="description last"><p>The first color value.</p></td>
</tr>
<tr>
<td class="name"><code>r</code></td>
<td class="type">
<span class="param-type">number</span>
</td>
<td class="description last"><p>The red color value, between 0 and 0xFF (255).</p></td>
</tr>
<tr>
<td class="name"><code>g</code></td>
<td class="type">
<span class="param-type">number</span>
</td>
<td class="description last"><p>The green color value, between 0 and 0xFF (255).</p></td>
</tr>
<tr>
<td class="name"><code>b</code></td>
<td class="type">
<span class="param-type">number</span>
</td>
<td class="description last"><p>The blue color value, between 0 and 0xFF (255).</p></td>
</tr>
<tr>
<td class="name"><code>steps</code></td>
<td class="type">
<span class="param-type">number</span>
</td>
<td class="description last"><p>The number of steps to run the interpolation over.</p></td>
</tr>
<tr>
<td class="name"><code>currentStep</code></td>
<td class="type">
<span class="param-type">number</span>
</td>
<td class="description last"><p>The currentStep value. If the interpolation will take 100 steps, a currentStep value of 50 would be half-way between the two.</p></td>
</tr>
</tbody>
</table>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="Color.js.html">utils/Color.js</a>, <a href="Color.js.html#sunlight-1-line-170">line 170</a>
</li></ul></dd>
</dl>
<h5>Returns:</h5>
<div class="param-desc">
<p>The interpolated color value.</p>
</div>
<dl>
<dt>
Type
</dt>
<dd>
<span class="param-type">number</span>
</dd>
</dl>
</dd>
<dt>
<h4 class="name" id="interpolateRGB"><span class="type-signature">&lt;static> </span>interpolateRGB<span class="signature">(r1, g1, b1, r2, g2, b2, steps, currentStep)</span><span class="type-signature"> &rarr; {number}</span></h4>
</dt>
<dd>
<div class="description">
<p>Interpolates the two given colours based on the supplied step and currentStep properties.</p>
</div>
<h5>Parameters:</h5>
<table class="params table table-striped">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>r1</code></td>
<td class="type">
<span class="param-type">number</span>
</td>
<td class="description last"><p>The red color value, between 0 and 0xFF (255).</p></td>
</tr>
<tr>
<td class="name"><code>g1</code></td>
<td class="type">
<span class="param-type">number</span>
</td>
<td class="description last"><p>The green color value, between 0 and 0xFF (255).</p></td>
</tr>
<tr>
<td class="name"><code>b1</code></td>
<td class="type">
<span class="param-type">number</span>
</td>
<td class="description last"><p>The blue color value, between 0 and 0xFF (255).</p></td>
</tr>
<tr>
<td class="name"><code>r2</code></td>
<td class="type">
<span class="param-type">number</span>
</td>
<td class="description last"><p>The red color value, between 0 and 0xFF (255).</p></td>
</tr>
<tr>
<td class="name"><code>g2</code></td>
<td class="type">
<span class="param-type">number</span>
</td>
<td class="description last"><p>The green color value, between 0 and 0xFF (255).</p></td>
</tr>
<tr>
<td class="name"><code>b2</code></td>
<td class="type">
<span class="param-type">number</span>
</td>
<td class="description last"><p>The blue color value, between 0 and 0xFF (255).</p></td>
</tr>
<tr>
<td class="name"><code>steps</code></td>
<td class="type">
<span class="param-type">number</span>
</td>
<td class="description last"><p>The number of steps to run the interpolation over.</p></td>
</tr>
<tr>
<td class="name"><code>currentStep</code></td>
<td class="type">
<span class="param-type">number</span>
</td>
<td class="description last"><p>The currentStep value. If the interpolation will take 100 steps, a currentStep value of 50 would be half-way between the two.</p></td>
</tr>
</tbody>
</table>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="Color.js.html">utils/Color.js</a>, <a href="Color.js.html#sunlight-1-line-193">line 193</a>
</li></ul></dd>
</dl>
<h5>Returns:</h5>
<div class="param-desc">
<p>The interpolated color value.</p>
</div>
<dl>
<dt>
Type
</dt>
<dd>
<span class="param-type">number</span>
</dd>
</dl>
</dd>
<dt>
<h4 class="name" id="RGBtoHexstring"><span class="type-signature">&lt;static> </span>RGBtoHexstring<span class="signature">(color)</span><span class="type-signature"> &rarr; {string}</span></h4>
</dt>
<dd>
<div class="description">
<p>Return a string representation of the color in the format 0xAARRGGBB.</p>
</div>
<h5>Parameters:</h5>
<table class="params table table-striped">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>color</code></td>
<td class="type">
<span class="param-type">number</span>
</td>
<td class="description last"><p>The color to get the string representation for</p></td>
</tr>
</tbody>
</table>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="Color.js.html">utils/Color.js</a>, <a href="Color.js.html#sunlight-1-line-95">line 95</a>
</li></ul></dd>
</dl>
<h5>Returns:</h5>
<div class="param-desc">
<p>A string of length 10 characters in the format 0xAARRGGBB</p>
</div>
<dl>
<dt>
Type
</dt>
<dd>
<span class="param-type">string</span>
</dd>
</dl>
</dd>
<dt>
<h4 class="name" id="RGBtoWebstring"><span class="type-signature">&lt;static> </span>RGBtoWebstring<span class="signature">(color)</span><span class="type-signature"> &rarr; {string}</span></h4>
</dt>
<dd>
<div class="description">
<p>Return a string representation of the color in the format #RRGGBB.</p>
</div>
<h5>Parameters:</h5>
<table class="params table table-striped">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>color</code></td>
<td class="type">
<span class="param-type">number</span>
</td>
<td class="description last"><p>The color to get the string representation for.</p></td>
</tr>
</tbody>
</table>
<dl class="details">
<dt class="tag-source">Source:</dt>
<dd class="tag-source"><ul class="dummy"><li>
<a href="Color.js.html">utils/Color.js</a>, <a href="Color.js.html#sunlight-1-line-111">line 111</a>
</li></ul></dd>
</dl>
<h5>Returns:</h5>
<div class="param-desc">
<p>A string of length 10 characters in the format 0xAARRGGBB.</p>
</div>
<dl>
<dt>
Type
</dt>
<dd>
<span class="param-type">string</span>
</dd>
</dl>
</dd>
</dl>
</article>
</section>
</div>
<div class="clearfix"></div>
<footer>
<span class="copyright">
Phaser Copyright © 2012-2014 Photon Storm Ltd.
</span>
<br />
<span class="jsdoc-message">
Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.3.0-dev</a>
on Mon Mar 24 2014 12:38:41 GMT-0000 (GMT) using the <a href="https://github.com/terryweiss/docstrap">DocStrap template</a>.
</span>
</footer>
</div>
<div class="span3">
<div id="toc"></div>
</div>
<br clear="both">
</div>
</div>
<script src="scripts/sunlight.js"></script>
<script src="scripts/sunlight.javascript.js"></script>
<script src="scripts/sunlight-plugin.doclinks.js"></script>
<script src="scripts/sunlight-plugin.linenumbers.js"></script>
<script src="scripts/sunlight-plugin.menu.js"></script>
<script src="scripts/jquery.min.js"></script>
<script src="scripts/jquery.scrollTo.js"></script>
<script src="scripts/jquery.localScroll.js"></script>
<script src="scripts/bootstrap-dropdown.js"></script>
<script src="scripts/toc.js"></script>
<script> Sunlight.highlightAll({lineNumbers:true, showMenu: true, enableDoclinks :true}); </script>
<script>
$( function () {
$( "#toc" ).toc( {
anchorName : function(i, heading, prefix) {
return $(heading).attr("id") || ( prefix + i );
},
selectors : "h1,h2,h3,h4",
showAndHide : false,
scrollTo : 60
} );
$( "#toc>ul" ).addClass( "nav nav-pills nav-stacked" );
$( "#main span[id^='toc']" ).addClass( "toc-shim" );
} );
</script>
</body>
</html>
Reference in a new issue View git blame Copy permalink