Mirrors/phaser
2
0
Fork 0
mirror of https://github.com/photonstorm/phaser synced 2024-11-23 13:13:43 +00:00
Code Issues Projects Releases Packages Wiki Activity
phaser/docs/Phaser.Color.html
photonstorm 486c15f16f New docs.
2015-08-24 15:43:45 +01:00

11885 lines
No EOL
181 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/default.css">
<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 style="position: absolute; width: 143px; height: 31px; right: 10px; top: 10px; z-index: 1050"><a href="http://phaser.io"><img src="img/phaser.png" border="0" /></a></div>
<div class="navbar-inner">
<a class="brand" href="index.html">Phaser API</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 class="class-depth-0">
<a href="Phaser.html">Phaser</a>
</li>
<li class="class-depth-0">
<a href="PIXI.html">PIXI</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 class="class-depth-1">
<a href="Phaser.Animation.html">Animation</a>
</li>
<li class="class-depth-1">
<a href="Phaser.AnimationManager.html">AnimationManager</a>
</li>
<li class="class-depth-1">
<a href="Phaser.AnimationParser.html">AnimationParser</a>
</li>
<li class="class-depth-1">
<a href="Phaser.ArraySet.html">ArraySet</a>
</li>
<li class="class-depth-1">
<a href="Phaser.ArrayUtils.html">ArrayUtils</a>
</li>
<li class="class-depth-1">
<a href="Phaser.AudioSprite.html">AudioSprite</a>
</li>
<li class="class-depth-1">
<a href="Phaser.BitmapData.html">BitmapData</a>
</li>
<li class="class-depth-1">
<a href="Phaser.BitmapText.html">BitmapText</a>
</li>
<li class="class-depth-1">
<a href="Phaser.Button.html">Button</a>
</li>
<li class="class-depth-1">
<a href="Phaser.Cache.html">Cache</a>
</li>
<li class="class-depth-1">
<a href="Phaser.Camera.html">Camera</a>
</li>
<li class="class-depth-1">
<a href="Phaser.Canvas.html">Canvas</a>
</li>
<li class="class-depth-1">
<a href="Phaser.Circle.html">Circle</a>
</li>
<li class="class-depth-1">
<a href="Phaser.Color.html">Color</a>
</li>
<li class="class-depth-2">
<a href="Phaser.Component.Angle.html">Angle</a>
</li>
<li class="class-depth-2">
<a href="Phaser.Component.Animation.html">Animation</a>
</li>
<li class="class-depth-2">
<a href="Phaser.Component.AutoCull.html">AutoCull</a>
</li>
<li class="class-depth-2">
<a href="Phaser.Component.Bounds.html">Bounds</a>
</li>
<li class="class-depth-2">
<a href="Phaser.Component.BringToTop.html">BringToTop</a>
</li>
<li class="class-depth-2">
<a href="Phaser.Component.Core.html">Core</a>
</li>
<li class="class-depth-2">
<a href="Phaser.Component.Crop.html">Crop</a>
</li>
<li class="class-depth-2">
<a href="Phaser.Component.Delta.html">Delta</a>
</li>
<li class="class-depth-2">
<a href="Phaser.Component.Destroy.html">Destroy</a>
</li>
<li class="class-depth-2">
<a href="Phaser.Component.FixedToCamera.html">FixedToCamera</a>
</li>
<li class="class-depth-2">
<a href="Phaser.Component.Health.html">Health</a>
</li>
<li class="class-depth-2">
<a href="Phaser.Component.InCamera.html">InCamera</a>
</li>
<li class="class-depth-2">
<a href="Phaser.Component.InputEnabled.html">InputEnabled</a>
</li>
<li class="class-depth-2">
<a href="Phaser.Component.InWorld.html">InWorld</a>
</li>
<li class="class-depth-2">
<a href="Phaser.Component.LifeSpan.html">LifeSpan</a>
</li>
<li class="class-depth-2">
<a href="Phaser.Component.LoadTexture.html">LoadTexture</a>
</li>
<li class="class-depth-2">
<a href="Phaser.Component.Overlap.html">Overlap</a>
</li>
<li class="class-depth-2">
<a href="Phaser.Component.PhysicsBody.html">PhysicsBody</a>
</li>
<li class="class-depth-2">
<a href="Phaser.Component.Reset.html">Reset</a>
</li>
<li class="class-depth-2">
<a href="Phaser.Component.ScaleMinMax.html">ScaleMinMax</a>
</li>
<li class="class-depth-2">
<a href="Phaser.Component.Smoothed.html">Smoothed</a>
</li>
<li class="class-depth-1">
<a href="Phaser.Create.html">Create</a>
</li>
<li class="class-depth-1">
<a href="Phaser.Creature.html">Creature</a>
</li>
<li class="class-depth-1">
<a href="Phaser.Device.html">Device</a>
</li>
<li class="class-depth-1">
<a href="Phaser.DeviceButton.html">DeviceButton</a>
</li>
<li class="class-depth-1">
<a href="Phaser.DOM.html">DOM</a>
</li>
<li class="class-depth-1">
<a href="Phaser.Easing.html">Easing</a>
</li>
<li class="class-depth-2">
<a href="Phaser.Easing.Back.html">Back</a>
</li>
<li class="class-depth-2">
<a href="Phaser.Easing.Bounce.html">Bounce</a>
</li>
<li class="class-depth-2">
<a href="Phaser.Easing.Circular.html">Circular</a>
</li>
<li class="class-depth-2">
<a href="Phaser.Easing.Cubic.html">Cubic</a>
</li>
<li class="class-depth-2">
<a href="Phaser.Easing.Elastic.html">Elastic</a>
</li>
<li class="class-depth-2">
<a href="Phaser.Easing.Exponential.html">Exponential</a>
</li>
<li class="class-depth-2">
<a href="Phaser.Easing.Linear.html">Linear</a>
</li>
<li class="class-depth-2">
<a href="Phaser.Easing.Quadratic.html">Quadratic</a>
</li>
<li class="class-depth-2">
<a href="Phaser.Easing.Quartic.html">Quartic</a>
</li>
<li class="class-depth-2">
<a href="Phaser.Easing.Quintic.html">Quintic</a>
</li>
<li class="class-depth-2">
<a href="Phaser.Easing.Sinusoidal.html">Sinusoidal</a>
</li>
<li class="class-depth-1">
<a href="Phaser.Ellipse.html">Ellipse</a>
</li>
<li class="class-depth-1">
<a href="Phaser.Events.html">Events</a>
</li>
<li class="class-depth-1">
<a href="Phaser.Filter.html">Filter</a>
</li>
<li class="class-depth-1">
<a href="Phaser.FlexGrid.html">FlexGrid</a>
</li>
<li class="class-depth-1">
<a href="Phaser.FlexLayer.html">FlexLayer</a>
</li>
<li class="class-depth-1">
<a href="Phaser.Frame.html">Frame</a>
</li>
<li class="class-depth-1">
<a href="Phaser.FrameData.html">FrameData</a>
</li>
<li class="class-depth-1">
<a href="Phaser.Game.html">Game</a>
</li>
<li class="class-depth-1">
<a href="Phaser.GameObjectCreator.html">GameObjectCreator</a>
</li>
<li class="class-depth-1">
<a href="Phaser.GameObjectFactory.html">GameObjectFactory</a>
</li>
<li class="class-depth-1">
<a href="Phaser.Gamepad.html">Gamepad</a>
</li>
<li class="class-depth-1">
<a href="Phaser.Graphics.html">Graphics</a>
</li>
<li class="class-depth-1">
<a href="Phaser.Group.html">Group</a>
</li>
<li class="class-depth-1">
<a href="Phaser.Image.html">Image</a>
</li>
<li class="class-depth-1">
<a href="Phaser.ImageCollection.html">ImageCollection</a>
</li>
<li class="class-depth-1">
<a href="Phaser.Input.html">Input</a>
</li>
<li class="class-depth-1">
<a href="Phaser.InputHandler.html">InputHandler</a>
</li>
<li class="class-depth-1">
<a href="Phaser.Key.html">Key</a>
</li>
<li class="class-depth-1">
<a href="Phaser.Keyboard.html">Keyboard</a>
</li>
<li class="class-depth-1">
<a href="Phaser.Line.html">Line</a>
</li>
<li class="class-depth-1">
<a href="Phaser.LinkedList.html">LinkedList</a>
</li>
<li class="class-depth-1">
<a href="Phaser.Loader.html">Loader</a>
</li>
<li class="class-depth-1">
<a href="Phaser.LoaderParser.html">LoaderParser</a>
</li>
<li class="class-depth-1">
<a href="Phaser.Math.html">Math</a>
</li>
<li class="class-depth-1">
<a href="Phaser.Matrix.html">Matrix</a>
</li>
<li class="class-depth-1">
<a href="Phaser.Mouse.html">Mouse</a>
</li>
<li class="class-depth-1">
<a href="Phaser.MSPointer.html">MSPointer</a>
</li>
<li class="class-depth-1">
<a href="Phaser.Net.html">Net</a>
</li>
<li class="class-depth-1">
<a href="Phaser.Particle.html">Particle</a>
</li>
<li class="class-depth-1">
<a href="Phaser.Particles.html">Particles</a>
</li>
<li class="class-depth-2">
<a href="Phaser.Particles.Arcade.html">Arcade</a>
</li>
<li class="class-depth-3">
<a href="Phaser.Particles.Arcade.Emitter.html">Emitter</a>
</li>
<li class="class-depth-1">
<a href="Phaser.Physics.html">Physics</a>
</li>
<li class="class-depth-2">
<a href="Phaser.Physics.Arcade.html">Arcade</a>
</li>
<li class="class-depth-3">
<a href="Phaser.Physics.Arcade.Body.html">Body</a>
</li>
<li class="class-depth-3">
<a href="Phaser.Physics.Arcade.TilemapCollision.html">TilemapCollision</a>
</li>
<li class="class-depth-2">
<a href="Phaser.Physics.Ninja.html">Ninja</a>
</li>
<li class="class-depth-3">
<a href="Phaser.Physics.Ninja.AABB.html">AABB</a>
</li>
<li class="class-depth-3">
<a href="Phaser.Physics.Ninja.Body.html">Body</a>
</li>
<li class="class-depth-3">
<a href="Phaser.Physics.Ninja.Circle.html">Circle</a>
</li>
<li class="class-depth-3">
<a href="Phaser.Physics.Ninja.Tile.html">Tile</a>
</li>
<li class="class-depth-2">
<a href="Phaser.Physics.P2.html">P2</a>
</li>
<li class="class-depth-3">
<a href="Phaser.Physics.P2.Body.html">Body</a>
</li>
<li class="class-depth-3">
<a href="Phaser.Physics.P2.BodyDebug.html">BodyDebug</a>
</li>
<li class="class-depth-3">
<a href="Phaser.Physics.P2.CollisionGroup.html">CollisionGroup</a>
</li>
<li class="class-depth-3">
<a href="Phaser.Physics.P2.ContactMaterial.html">ContactMaterial</a>
</li>
<li class="class-depth-3">
<a href="Phaser.Physics.P2.DistanceConstraint.html">DistanceConstraint</a>
</li>
<li class="class-depth-3">
<a href="Phaser.Physics.P2.FixtureList.html">FixtureList</a>
</li>
<li class="class-depth-3">
<a href="Phaser.Physics.P2.GearConstraint.html">GearConstraint</a>
</li>
<li class="class-depth-3">
<a href="Phaser.Physics.P2.InversePointProxy.html">InversePointProxy</a>
</li>
<li class="class-depth-3">
<a href="Phaser.Physics.P2.LockConstraint.html">LockConstraint</a>
</li>
<li class="class-depth-3">
<a href="Phaser.Physics.P2.Material.html">Material</a>
</li>
<li class="class-depth-3">
<a href="Phaser.Physics.P2.PointProxy.html">PointProxy</a>
</li>
<li class="class-depth-3">
<a href="Phaser.Physics.P2.PrismaticConstraint.html">PrismaticConstraint</a>
</li>
<li class="class-depth-3">
<a href="Phaser.Physics.P2.RevoluteConstraint.html">RevoluteConstraint</a>
</li>
<li class="class-depth-3">
<a href="Phaser.Physics.P2.RotationalSpring.html">RotationalSpring</a>
</li>
<li class="class-depth-3">
<a href="Phaser.Physics.P2.Spring.html">Spring</a>
</li>
<li class="class-depth-1">
<a href="Phaser.Plugin.html">Plugin</a>
</li>
<li class="class-depth-1">
<a href="Phaser.PluginManager.html">PluginManager</a>
</li>
<li class="class-depth-1">
<a href="Phaser.Point.html">Point</a>
</li>
<li class="class-depth-1">
<a href="Phaser.Pointer.html">Pointer</a>
</li>
<li class="class-depth-1">
<a href="Phaser.Polygon.html">Polygon</a>
</li>
<li class="class-depth-1">
<a href="Phaser.QuadTree.html">QuadTree</a>
</li>
<li class="class-depth-1">
<a href="Phaser.RandomDataGenerator.html">RandomDataGenerator</a>
</li>
<li class="class-depth-1">
<a href="Phaser.Rectangle.html">Rectangle</a>
</li>
<li class="class-depth-1">
<a href="Phaser.RenderTexture.html">RenderTexture</a>
</li>
<li class="class-depth-1">
<a href="Phaser.RequestAnimationFrame.html">RequestAnimationFrame</a>
</li>
<li class="class-depth-1">
<a href="Phaser.RetroFont.html">RetroFont</a>
</li>
<li class="class-depth-1">
<a href="Phaser.Rope.html">Rope</a>
</li>
<li class="class-depth-1">
<a href="Phaser.RoundedRectangle.html">RoundedRectangle</a>
</li>
<li class="class-depth-1">
<a href="Phaser.ScaleManager.html">ScaleManager</a>
</li>
<li class="class-depth-1">
<a href="Phaser.Signal.html">Signal</a>
</li>
<li class="class-depth-1">
<a href="Phaser.SignalBinding.html">SignalBinding</a>
</li>
<li class="class-depth-1">
<a href="Phaser.SinglePad.html">SinglePad</a>
</li>
<li class="class-depth-1">
<a href="Phaser.Sound.html">Sound</a>
</li>
<li class="class-depth-1">
<a href="Phaser.SoundManager.html">SoundManager</a>
</li>
<li class="class-depth-1">
<a href="Phaser.Sprite.html">Sprite</a>
</li>
<li class="class-depth-1">
<a href="Phaser.SpriteBatch.html">SpriteBatch</a>
</li>
<li class="class-depth-1">
<a href="Phaser.Stage.html">Stage</a>
</li>
<li class="class-depth-1">
<a href="Phaser.State.html">State</a>
</li>
<li class="class-depth-1">
<a href="Phaser.StateManager.html">StateManager</a>
</li>
<li class="class-depth-1">
<a href="Phaser.Text.html">Text</a>
</li>
<li class="class-depth-1">
<a href="Phaser.Tile.html">Tile</a>
</li>
<li class="class-depth-1">
<a href="Phaser.Tilemap.html">Tilemap</a>
</li>
<li class="class-depth-1">
<a href="Phaser.TilemapLayer.html">TilemapLayer</a>
</li>
<li class="class-depth-1">
<a href="Phaser.TilemapParser.html">TilemapParser</a>
</li>
<li class="class-depth-1">
<a href="Phaser.Tileset.html">Tileset</a>
</li>
<li class="class-depth-1">
<a href="Phaser.TileSprite.html">TileSprite</a>
</li>
<li class="class-depth-1">
<a href="Phaser.Time.html">Time</a>
</li>
<li class="class-depth-1">
<a href="Phaser.Timer.html">Timer</a>
</li>
<li class="class-depth-1">
<a href="Phaser.TimerEvent.html">TimerEvent</a>
</li>
<li class="class-depth-1">
<a href="Phaser.Touch.html">Touch</a>
</li>
<li class="class-depth-1">
<a href="Phaser.Tween.html">Tween</a>
</li>
<li class="class-depth-1">
<a href="Phaser.TweenData.html">TweenData</a>
</li>
<li class="class-depth-1">
<a href="Phaser.TweenManager.html">TweenManager</a>
</li>
<li class="class-depth-1">
<a href="Phaser.Utils.html">Utils</a>
</li>
<li class="class-depth-2">
<a href="Phaser.Utils.Debug.html">Debug</a>
</li>
<li class="class-depth-1">
<a href="Phaser.Video.html">Video</a>
</li>
<li class="class-depth-1">
<a href="Phaser.World.html">World</a>
</li>
<li class="class-depth-1">
<a href="PIXI.AbstractFilter.html">AbstractFilter</a>
</li>
<li class="class-depth-1">
<a href="PIXI.BaseTexture.html">BaseTexture</a>
</li>
<li class="class-depth-1">
<a href="PIXI.CanvasBuffer.html">CanvasBuffer</a>
</li>
<li class="class-depth-1">
<a href="PIXI.CanvasGraphics.html">CanvasGraphics</a>
</li>
<li class="class-depth-1">
<a href="PIXI.CanvasMaskManager.html">CanvasMaskManager</a>
</li>
<li class="class-depth-1">
<a href="PIXI.CanvasPool.html">CanvasPool</a>
</li>
<li class="class-depth-1">
<a href="PIXI.CanvasRenderer.html">CanvasRenderer</a>
</li>
<li class="class-depth-1">
<a href="PIXI.CanvasTinter.html">CanvasTinter</a>
</li>
<li class="class-depth-1">
<a href="PIXI.ComplexPrimitiveShader.html">ComplexPrimitiveShader</a>
</li>
<li class="class-depth-1">
<a href="PIXI.DisplayObject.html">DisplayObject</a>
</li>
<li class="class-depth-1">
<a href="PIXI.DisplayObjectContainer.html">DisplayObjectContainer</a>
</li>
<li class="class-depth-1">
<a href="PIXI.Event.html">Event</a>
</li>
<li class="class-depth-1">
<a href="PIXI.EventTarget.html">EventTarget</a>
</li>
<li class="class-depth-1">
<a href="PIXI.FilterTexture.html">FilterTexture</a>
</li>
<li class="class-depth-1">
<a href="PIXI.Graphics.html">Graphics</a>
</li>
<li class="class-depth-1">
<a href="PIXI.GraphicsData.html">GraphicsData</a>
</li>
<li class="class-depth-1">
<a href="PIXI.PIXI.html">PIXI</a>
</li>
<li class="class-depth-1">
<a href="PIXI.PixiFastShader.html">PixiFastShader</a>
</li>
<li class="class-depth-1">
<a href="PIXI.PixiShader.html">PixiShader</a>
</li>
<li class="class-depth-1">
<a href="PIXI.PolyK.html">PolyK</a>
</li>
<li class="class-depth-1">
<a href="PIXI.PrimitiveShader.html">PrimitiveShader</a>
</li>
<li class="class-depth-1">
<a href="PIXI.RenderTexture.html">RenderTexture</a>
</li>
<li class="class-depth-1">
<a href="PIXI.Rope.html">Rope</a>
</li>
<li class="class-depth-1">
<a href="PIXI.Sprite.html">Sprite</a>
</li>
<li class="class-depth-1">
<a href="PIXI.SpriteBatch.html">SpriteBatch</a>
</li>
<li class="class-depth-1">
<a href="PIXI.Stage.html">Stage</a>
</li>
<li class="class-depth-1">
<a href="PIXI.Strip.html">Strip</a>
</li>
<li class="class-depth-1">
<a href="PIXI.StripShader.html">StripShader</a>
</li>
<li class="class-depth-1">
<a href="PIXI.Texture.html">Texture</a>
</li>
<li class="class-depth-1">
<a href="PIXI.TilingSprite.html">TilingSprite</a>
</li>
<li class="class-depth-1">
<a href="PIXI.WebGLBlendModeManager.html">WebGLBlendModeManager</a>
</li>
<li class="class-depth-1">
<a href="PIXI.WebGLFastSpriteBatch.html">WebGLFastSpriteBatch</a>
</li>
<li class="class-depth-1">
<a href="PIXI.WebGLFilterManager.html">WebGLFilterManager</a>
</li>
<li class="class-depth-1">
<a href="PIXI.WebGLRenderer.html">WebGLRenderer</a>
</li>
</ul>
</li>
<li class="dropdown">
<a href="global.html" class="dropdown-toggle" data-toggle="dropdown">Global<b
class="caret"></b></a>
<ul class="dropdown-menu ">
<li class="class-depth-0">
<a href="global.html#AUTO">AUTO</a>
</li>
<li class="class-depth-0">
<a href="global.html#BITMAPDATA">BITMAPDATA</a>
</li>
<li class="class-depth-0">
<a href="global.html#BITMAPTEXT">BITMAPTEXT</a>
</li>
<li class="class-depth-0">
<a href="global.html#blendModes">blendModes</a>
</li>
<li class="class-depth-0">
<a href="global.html#BUTTON">BUTTON</a>
</li>
<li class="class-depth-0">
<a href="global.html#CANVAS">CANVAS</a>
</li>
<li class="class-depth-0">
<a href="global.html#CANVAS_FILTER">CANVAS_FILTER</a>
</li>
<li class="class-depth-0">
<a href="global.html#CIRCLE">CIRCLE</a>
</li>
<li class="class-depth-0">
<a href="global.html#CREATURE">CREATURE</a>
</li>
<li class="class-depth-0">
<a href="global.html#DOWN">DOWN</a>
</li>
<li class="class-depth-0">
<a href="global.html#ELLIPSE">ELLIPSE</a>
</li>
<li class="class-depth-0">
<a href="global.html#EMITTER">EMITTER</a>
</li>
<li class="class-depth-0">
<a href="global.html#GAMES">GAMES</a>
</li>
<li class="class-depth-0">
<a href="global.html#GRAPHICS">GRAPHICS</a>
</li>
<li class="class-depth-0">
<a href="global.html#GROUP">GROUP</a>
</li>
<li class="class-depth-0">
<a href="global.html#HEADLESS">HEADLESS</a>
</li>
<li class="class-depth-0">
<a href="global.html#IMAGE">IMAGE</a>
</li>
<li class="class-depth-0">
<a href="global.html#LEFT">LEFT</a>
</li>
<li class="class-depth-0">
<a href="global.html#LINE">LINE</a>
</li>
<li class="class-depth-0">
<a href="global.html#MATRIX">MATRIX</a>
</li>
<li class="class-depth-0">
<a href="global.html#NONE">NONE</a>
</li>
<li class="class-depth-0">
<a href="global.html#POINT">POINT</a>
</li>
<li class="class-depth-0">
<a href="global.html#POINTER">POINTER</a>
</li>
<li class="class-depth-0">
<a href="global.html#POLYGON">POLYGON</a>
</li>
<li class="class-depth-0">
<a href="global.html#RECTANGLE">RECTANGLE</a>
</li>
<li class="class-depth-0">
<a href="global.html#RENDERTEXTURE">RENDERTEXTURE</a>
</li>
<li class="class-depth-0">
<a href="global.html#RETROFONT">RETROFONT</a>
</li>
<li class="class-depth-0">
<a href="global.html#RIGHT">RIGHT</a>
</li>
<li class="class-depth-0">
<a href="global.html#ROPE">ROPE</a>
</li>
<li class="class-depth-0">
<a href="global.html#ROUNDEDRECTANGLE">ROUNDEDRECTANGLE</a>
</li>
<li class="class-depth-0">
<a href="global.html#scaleModes">scaleModes</a>
</li>
<li class="class-depth-0">
<a href="global.html#SPRITE">SPRITE</a>
</li>
<li class="class-depth-0">
<a href="global.html#SPRITEBATCH">SPRITEBATCH</a>
</li>
<li class="class-depth-0">
<a href="global.html#TEXT">TEXT</a>
</li>
<li class="class-depth-0">
<a href="global.html#TILEMAP">TILEMAP</a>
</li>
<li class="class-depth-0">
<a href="global.html#TILEMAPLAYER">TILEMAPLAYER</a>
</li>
<li class="class-depth-0">
<a href="global.html#TILESPRITE">TILESPRITE</a>
</li>
<li class="class-depth-0">
<a href="global.html#UP">UP</a>
</li>
<li class="class-depth-0">
<a href="global.html#VERSION">VERSION</a>
</li>
<li class="class-depth-0">
<a href="global.html#VIDEO">VIDEO</a>
</li>
<li class="class-depth-0">
<a href="global.html#WEBGL">WEBGL</a>
</li>
<li class="class-depth-0">
<a href="global.html#WEBGL_FILTER">WEBGL_FILTER</a>
</li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Core<b class="caret"></b></a>
<ul class="dropdown-menu ">
<li class="class-depth-1"><a href="Phaser.Game.html">Game</a></li>
<li class="class-depth-1"><a href="Phaser.Group.html">Group</a></li>
<li class="class-depth-1"><a href="Phaser.World.html">World</a></li>
<li class="class-depth-1"><a href="Phaser.Loader.html">Loader</a></li>
<li class="class-depth-1"><a href="Phaser.Cache.html">Cache</a></li>
<li class="class-depth-1"><a href="Phaser.Time.html">Time</a></li>
<li class="class-depth-1"><a href="Phaser.Camera.html">Camera</a></li>
<li class="class-depth-1"><a href="Phaser.StateManager.html">State Manager</a></li>
<li class="class-depth-1"><a href="Phaser.TweenManager.html">Tween Manager</a></li>
<li class="class-depth-1"><a href="Phaser.SoundManager.html">Sound Manager</a></li>
<li class="class-depth-1"><a href="Phaser.Input.html">Input Manager</a></li>
<li class="class-depth-1"><a href="Phaser.ScaleManager.html">Scale Manager</a></li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Game Objects<b class="caret"></b></a>
<ul class="dropdown-menu ">
<li class="class-depth-1"><a href="Phaser.GameObjectFactory.html">Factory (game.add)</a></li>
<li class="class-depth-1"><a href="Phaser.GameObjectCreator.html">Creator (game.make)</a></li>
<li class="class-depth-1"><a href="Phaser.Sprite.html">Sprite</a></li>
<li class="class-depth-1"><a href="Phaser.Image.html">Image</a></li>
<li class="class-depth-1"><a href="Phaser.Sound.html">Sound</a></li>
<li class="class-depth-1"><a href="Phaser.Video.html">Video</a></li>
<li class="class-depth-1"><a href="Phaser.Particles.Arcade.Emitter.html">Particle Emitter</a></li>
<li class="class-depth-1"><a href="Phaser.Particle.html">Particle</a></li>
<li class="class-depth-1"><a href="Phaser.Text.html">Text</a></li>
<li class="class-depth-1"><a href="Phaser.Tween.html">Tween</a></li>
<li class="class-depth-1"><a href="Phaser.BitmapText.html">BitmapText</a></li>
<li class="class-depth-1"><a href="Phaser.Tilemap.html">Tilemap</a></li>
<li class="class-depth-1"><a href="Phaser.BitmapData.html">BitmapData</a></li>
<li class="class-depth-1"><a href="Phaser.RetroFont.html">RetroFont</a></li>
<li class="class-depth-1"><a href="Phaser.Button.html">Button</a></li>
<li class="class-depth-1"><a href="Phaser.Animation.html">Animation</a></li>
<li class="class-depth-1"><a href="Phaser.Graphics.html">Graphics</a></li>
<li class="class-depth-1"><a href="Phaser.RenderTexture.html">RenderTexture</a></li>
<li class="class-depth-1"><a href="Phaser.TileSprite.html">TileSprite</a></li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Geometry<b class="caret"></b></a>
<ul class="dropdown-menu ">
<li class="class-depth-1"><a href="Phaser.Circle.html">Circle</a></li>
<li class="class-depth-1"><a href="Phaser.Ellipse.html">Ellipse</a></li>
<li class="class-depth-1"><a href="Phaser.Line.html">Line</a></li>
<li class="class-depth-1"><a href="Phaser.Matrix.html">Matrix</a></li>
<li class="class-depth-1"><a href="Phaser.Point.html">Point</a></li>
<li class="class-depth-1"><a href="Phaser.Polygon.html">Polygon</a></li>
<li class="class-depth-1"><a href="Phaser.Rectangle.html">Rectangle</a></li>
<li class="class-depth-1"><a href="Phaser.RoundedRectangle.html">Rounded Rectangle</a></li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Physics<b class="caret"></b></a>
<ul class="dropdown-menu ">
<li class="class-depth-1"><a href="Phaser.Physics.Arcade.html">Arcade Physics</a></li>
<li class="class-depth-2"><a href="Phaser.Physics.Arcade.Body.html">Body</a></li>
<li class="class-depth-1"><a href="Phaser.Physics.P2.html">P2 Physics</a></li>
<li class="class-depth-2"><a href="Phaser.Physics.P2.Body.html">Body</a></li>
<li class="class-depth-2"><a href="Phaser.Physics.P2.Spring.html">Spring</a></li>
<li class="class-depth-2"><a href="Phaser.Physics.P2.CollisionGroup.html">CollisionGroup</a></li>
<li class="class-depth-2"><a href="Phaser.Physics.P2.ContactMaterial.html">ContactMaterial</a></li>
<li class="class-depth-1"><a href="Phaser.Physics.Ninja.html">Ninja Physics</a></li>
<li class="class-depth-2"><a href="Phaser.Physics.Body.html">Body</a></li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Input<b class="caret"></b></a>
<ul class="dropdown-menu ">
<li class="class-depth-1"><a href="Phaser.InputHandler.html">Input Handler</a></li>
<li class="class-depth-1"><a href="Phaser.Pointer.html">Pointer</a></li>
<li class="class-depth-1"><a href="Phaser.DeviceButton.html">Device Button</a></li>
<li class="class-depth-1"><a href="Phaser.Mouse.html">Mouse</a></li>
<li class="class-depth-1"><a href="Phaser.Keyboard.html">Keyboard</a></li>
<li class="class-depth-1"><a href="Phaser.Key.html">Key</a></li>
<li class="class-depth-1"><a href="Phaser.Gamepad.html">Gamepad</a></li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Community<b class="caret"></b></a>
<ul class="dropdown-menu ">
<li class="class-depth-1"><a href="http://phaser.io">Phaser Web Site</a></li>
<li class="class-depth-1"><a href="https://github.com/photonstorm/phaser">Phaser Github</a></li>
<li class="class-depth-1"><a href="http://phaser.io/examples">Phaser Examples</a></li>
<li class="class-depth-1"><a href="https://github.com/photonstorm/phaser-plugins">Phaser Plugins</a></li>
<li class="class-depth-1"><a href="http://www.html5gamedevs.com/forum/14-phaser/">Forum</a></li>
<li class="class-depth-1"><a href="http://stackoverflow.com/questions/tagged/phaser-framework">Stack Overflow</a></li>
<li class="class-depth-1"><a href="http://phaser.io/learn">Tutorials</a></li>
<li class="class-depth-1"><a href="https://confirmsubscription.com/h/r/369DE48E3E86AF1E">Newsletter</a></li>
<li class="class-depth-1"><a href="http://phaser.io/community/twitter">Twitter</a></li>
<li class="class-depth-1"><a href="http://phaser.io/community/irc">IRC</a></li>
<li class="class-depth-1"><a href="https://www.codeandweb.com/texturepacker/phaser">Texture Packer</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>The Phaser.Color class is a set of static methods that assist in color manipulation and conversion.</p>
</div>
<dl class="details">
<dt class="tag-source">Source -
<a href="src_utils_Color.js.html">utils/Color.js</a>, <a href="src_utils_Color.js.html#sunlight-1-line-12">line 12</a>
</dt>
</dl>
</dd>
</div>
<h3 class="subsection-title">Methods</h3>
<dl>
<dt>
<h4 class="name "
id=".blendAdd"><span class="type-signature">&lt;static> </span>blendAdd<span class="signature">(a, b)</span><span class="type-signature"> &rarr; {integer}</span></h4>
</dt>
<dd>
<div class="description">
<p>Adds the source and backdrop colors together and returns the value, up to a maximum of 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>a</code></td>
<td class="type">
<span class="param-type">integer</span>
</td>
<td class="description last"><p>The source color to blend, in the range 1 to 255.</p></td>
</tr>
<tr>
<td class="name"><code>b</code></td>
<td class="type">
<span class="param-type">integer</span>
</td>
<td class="description last"><p>The backdrop color to blend, in the range 1 to 255.</p></td>
</tr>
</tbody>
</table>
<h5>Returns:</h5>
<div class="returns">
<div class="returns-type">
<span class="param-type">integer</span>
-
</div>
<div class="returns-desc param-desc">
<p>The blended color value, in the range 1 to 255.</p>
</div>
</div>
<dl class="details">
<dt class="tag-source">Source -
<a href="src_utils_Color.js.html">utils/Color.js</a>, <a href="src_utils_Color.js.html#sunlight-1-line-1040">line 1040</a>
</dt>
</dl>
</dd>
<dt>
<h4 class="name "
id=".blendAverage"><span class="type-signature">&lt;static> </span>blendAverage<span class="signature">(a, b)</span><span class="type-signature"> &rarr; {integer}</span></h4>
</dt>
<dd>
<div class="description">
<p>Takes the average of the source and backdrop colors.</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>a</code></td>
<td class="type">
<span class="param-type">integer</span>
</td>
<td class="description last"><p>The source color to blend, in the range 1 to 255.</p></td>
</tr>
<tr>
<td class="name"><code>b</code></td>
<td class="type">
<span class="param-type">integer</span>
</td>
<td class="description last"><p>The backdrop color to blend, in the range 1 to 255.</p></td>
</tr>
</tbody>
</table>
<h5>Returns:</h5>
<div class="returns">
<div class="returns-type">
<span class="param-type">integer</span>
-
</div>
<div class="returns-desc param-desc">
<p>The blended color value, in the range 1 to 255.</p>
</div>
</div>
<dl class="details">
<dt class="tag-source">Source -
<a href="src_utils_Color.js.html">utils/Color.js</a>, <a href="src_utils_Color.js.html#sunlight-1-line-1027">line 1027</a>
</dt>
</dl>
</dd>
<dt>
<h4 class="name "
id=".blendColorBurn"><span class="type-signature">&lt;static> </span>blendColorBurn<span class="signature">(a, b)</span><span class="type-signature"> &rarr; {integer}</span></h4>
</dt>
<dd>
<div class="description">
<p>Darkens the backdrop color to reflect the source color.
Painting with white produces no change.</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>a</code></td>
<td class="type">
<span class="param-type">integer</span>
</td>
<td class="description last"><p>The source color to blend, in the range 1 to 255.</p></td>
</tr>
<tr>
<td class="name"><code>b</code></td>
<td class="type">
<span class="param-type">integer</span>
</td>
<td class="description last"><p>The backdrop color to blend, in the range 1 to 255.</p></td>
</tr>
</tbody>
</table>
<h5>Returns:</h5>
<div class="returns">
<div class="returns-type">
<span class="param-type">integer</span>
-
</div>
<div class="returns-desc param-desc">
<p>The blended color value, in the range 1 to 255.</p>
</div>
</div>
<dl class="details">
<dt class="tag-source">Source -
<a href="src_utils_Color.js.html">utils/Color.js</a>, <a href="src_utils_Color.js.html#sunlight-1-line-1199">line 1199</a>
</dt>
</dl>
</dd>
<dt>
<h4 class="name "
id=".blendColorDodge"><span class="type-signature">&lt;static> </span>blendColorDodge<span class="signature">(a, b)</span><span class="type-signature"> &rarr; {integer}</span></h4>
</dt>
<dd>
<div class="description">
<p>Brightens the backdrop color to reflect the source color.
Painting with black produces no change.</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>a</code></td>
<td class="type">
<span class="param-type">integer</span>
</td>
<td class="description last"><p>The source color to blend, in the range 1 to 255.</p></td>
</tr>
<tr>
<td class="name"><code>b</code></td>
<td class="type">
<span class="param-type">integer</span>
</td>
<td class="description last"><p>The backdrop color to blend, in the range 1 to 255.</p></td>
</tr>
</tbody>
</table>
<h5>Returns:</h5>
<div class="returns">
<div class="returns-type">
<span class="param-type">integer</span>
-
</div>
<div class="returns-desc param-desc">
<p>The blended color value, in the range 1 to 255.</p>
</div>
</div>
<dl class="details">
<dt class="tag-source">Source -
<a href="src_utils_Color.js.html">utils/Color.js</a>, <a href="src_utils_Color.js.html#sunlight-1-line-1185">line 1185</a>
</dt>
</dl>
</dd>
<dt>
<h4 class="name "
id=".blendDarken"><span class="type-signature">&lt;static> </span>blendDarken<span class="signature">(a, b)</span><span class="type-signature"> &rarr; {integer}</span></h4>
</dt>
<dd>
<div class="description">
<p>Selects the darker of the backdrop and source colors.</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>a</code></td>
<td class="type">
<span class="param-type">integer</span>
</td>
<td class="description last"><p>The source color to blend, in the range 1 to 255.</p></td>
</tr>
<tr>
<td class="name"><code>b</code></td>
<td class="type">
<span class="param-type">integer</span>
</td>
<td class="description last"><p>The backdrop color to blend, in the range 1 to 255.</p></td>
</tr>
</tbody>
</table>
<h5>Returns:</h5>
<div class="returns">
<div class="returns-type">
<span class="param-type">integer</span>
-
</div>
<div class="returns-desc param-desc">
<p>The blended color value, in the range 1 to 255.</p>
</div>
</div>
<dl class="details">
<dt class="tag-source">Source -
<a href="src_utils_Color.js.html">utils/Color.js</a>, <a href="src_utils_Color.js.html#sunlight-1-line-998">line 998</a>
</dt>
</dl>
</dd>
<dt>
<h4 class="name "
id=".blendDifference"><span class="type-signature">&lt;static> </span>blendDifference<span class="signature">(a, b)</span><span class="type-signature"> &rarr; {integer}</span></h4>
</dt>
<dd>
<div class="description">
<p>Subtracts the darker of the two constituent colors from the lighter.</p>
<p>Painting with white inverts the backdrop color; painting with black produces no change.</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>a</code></td>
<td class="type">
<span class="param-type">integer</span>
</td>
<td class="description last"><p>The source color to blend, in the range 1 to 255.</p></td>
</tr>
<tr>
<td class="name"><code>b</code></td>
<td class="type">
<span class="param-type">integer</span>
</td>
<td class="description last"><p>The backdrop color to blend, in the range 1 to 255.</p></td>
</tr>
</tbody>
</table>
<h5>Returns:</h5>
<div class="returns">
<div class="returns-type">
<span class="param-type">integer</span>
-
</div>
<div class="returns-desc param-desc">
<p>The blended color value, in the range 1 to 255.</p>
</div>
</div>
<dl class="details">
<dt class="tag-source">Source -
<a href="src_utils_Color.js.html">utils/Color.js</a>, <a href="src_utils_Color.js.html#sunlight-1-line-1066">line 1066</a>
</dt>
</dl>
</dd>
<dt>
<h4 class="name "
id=".blendExclusion"><span class="type-signature">&lt;static> </span>blendExclusion<span class="signature">(a, b)</span><span class="type-signature"> &rarr; {integer}</span></h4>
</dt>
<dd>
<div class="description">
<p>Produces an effect similar to that of the Difference mode, but lower in contrast.
Painting with white inverts the backdrop color; painting with black produces no change.</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>a</code></td>
<td class="type">
<span class="param-type">integer</span>
</td>
<td class="description last"><p>The source color to blend, in the range 1 to 255.</p></td>
</tr>
<tr>
<td class="name"><code>b</code></td>
<td class="type">
<span class="param-type">integer</span>
</td>
<td class="description last"><p>The backdrop color to blend, in the range 1 to 255.</p></td>
</tr>
</tbody>
</table>
<h5>Returns:</h5>
<div class="returns">
<div class="returns-type">
<span class="param-type">integer</span>
-
</div>
<div class="returns-desc param-desc">
<p>The blended color value, in the range 1 to 255.</p>
</div>
</div>
<dl class="details">
<dt class="tag-source">Source -
<a href="src_utils_Color.js.html">utils/Color.js</a>, <a href="src_utils_Color.js.html#sunlight-1-line-1109">line 1109</a>
</dt>
</dl>
</dd>
<dt>
<h4 class="name "
id=".blendGlow"><span class="type-signature">&lt;static> </span>blendGlow<span class="signature">(a, b)</span><span class="type-signature"> &rarr; {integer}</span></h4>
</dt>
<dd>
<div class="description">
<p>Glow blend mode. This mode is a variation of reflect mode with the source and backdrop colors swapped.</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>a</code></td>
<td class="type">
<span class="param-type">integer</span>
</td>
<td class="description last"><p>The source color to blend, in the range 1 to 255.</p></td>
</tr>
<tr>
<td class="name"><code>b</code></td>
<td class="type">
<span class="param-type">integer</span>
</td>
<td class="description last"><p>The backdrop color to blend, in the range 1 to 255.</p></td>
</tr>
</tbody>
</table>
<h5>Returns:</h5>
<div class="returns">
<div class="returns-type">
<span class="param-type">integer</span>
-
</div>
<div class="returns-desc param-desc">
<p>The blended color value, in the range 1 to 255.</p>
</div>
</div>
<dl class="details">
<dt class="tag-source">Source -
<a href="src_utils_Color.js.html">utils/Color.js</a>, <a href="src_utils_Color.js.html#sunlight-1-line-1313">line 1313</a>
</dt>
</dl>
</dd>
<dt>
<h4 class="name "
id=".blendHardLight"><span class="type-signature">&lt;static> </span>blendHardLight<span class="signature">(a, b)</span><span class="type-signature"> &rarr; {integer}</span></h4>
</dt>
<dd>
<div class="description">
<p>Multiplies or screens the colors, depending on the source color value. </p>
<p>If the source color is lighter than 0.5, the backdrop is lightened, as if it were screened;
this is useful for adding highlights to a scene. </p>
<p>If the source color is darker than 0.5, the backdrop is darkened, as if it were multiplied;
this is useful for adding shadows to a scene. </p>
<p>The degree of lightening or darkening is proportional to the difference between the source color and 0.5;
if it is equal to 0.5, the backdrop is unchanged.</p>
<p>Painting with pure black or white produces pure black or white. The effect is similar to shining a harsh spotlight on the backdrop.</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>a</code></td>
<td class="type">
<span class="param-type">integer</span>
</td>
<td class="description last"><p>The source color to blend, in the range 1 to 255.</p></td>
</tr>
<tr>
<td class="name"><code>b</code></td>
<td class="type">
<span class="param-type">integer</span>
</td>
<td class="description last"><p>The backdrop color to blend, in the range 1 to 255.</p></td>
</tr>
</tbody>
</table>
<h5>Returns:</h5>
<div class="returns">
<div class="returns-type">
<span class="param-type">integer</span>
-
</div>
<div class="returns-desc param-desc">
<p>The blended color value, in the range 1 to 255.</p>
</div>
</div>
<dl class="details">
<dt class="tag-source">Source -
<a href="src_utils_Color.js.html">utils/Color.js</a>, <a href="src_utils_Color.js.html#sunlight-1-line-1161">line 1161</a>
</dt>
</dl>
</dd>
<dt>
<h4 class="name "
id=".blendHardMix"><span class="type-signature">&lt;static> </span>blendHardMix<span class="signature">(a, b)</span><span class="type-signature"> &rarr; {integer}</span></h4>
</dt>
<dd>
<div class="description">
<p>Runs blendVividLight on the source and backdrop colors.
If the resulting color is 128 or more, it receives a value of 255; if less than 128, a value of 0.
Therefore, all blended pixels have red, green, and blue channel values of either 0 or 255.
This changes all pixels to primary additive colors (red, green, or blue), white, or black.</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>a</code></td>
<td class="type">
<span class="param-type">integer</span>
</td>
<td class="description last"><p>The source color to blend, in the range 1 to 255.</p></td>
</tr>
<tr>
<td class="name"><code>b</code></td>
<td class="type">
<span class="param-type">integer</span>
</td>
<td class="description last"><p>The backdrop color to blend, in the range 1 to 255.</p></td>
</tr>
</tbody>
</table>
<h5>Returns:</h5>
<div class="returns">
<div class="returns-type">
<span class="param-type">integer</span>
-
</div>
<div class="returns-desc param-desc">
<p>The blended color value, in the range 1 to 255.</p>
</div>
</div>
<dl class="details">
<dt class="tag-source">Source -
<a href="src_utils_Color.js.html">utils/Color.js</a>, <a href="src_utils_Color.js.html#sunlight-1-line-1284">line 1284</a>
</dt>
</dl>
</dd>
<dt>
<h4 class="name "
id=".blendLighten"><span class="type-signature">&lt;static> </span>blendLighten<span class="signature">(a, b)</span><span class="type-signature"> &rarr; {integer}</span></h4>
</dt>
<dd>
<div class="description">
<p>Selects the lighter of the backdrop and source colors.</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>a</code></td>
<td class="type">
<span class="param-type">integer</span>
</td>
<td class="description last"><p>The source color to blend, in the range 1 to 255.</p></td>
</tr>
<tr>
<td class="name"><code>b</code></td>
<td class="type">
<span class="param-type">integer</span>
</td>
<td class="description last"><p>The backdrop color to blend, in the range 1 to 255.</p></td>
</tr>
</tbody>
</table>
<h5>Returns:</h5>
<div class="returns">
<div class="returns-type">
<span class="param-type">integer</span>
-
</div>
<div class="returns-desc param-desc">
<p>The blended color value, in the range 1 to 255.</p>
</div>
</div>
<dl class="details">
<dt class="tag-source">Source -
<a href="src_utils_Color.js.html">utils/Color.js</a>, <a href="src_utils_Color.js.html#sunlight-1-line-985">line 985</a>
</dt>
</dl>
</dd>
<dt>
<h4 class="name "
id=".blendLinearBurn"><span class="type-signature">&lt;static> </span>blendLinearBurn<span class="signature">(a, b)</span><span class="type-signature"> &rarr; {integer}</span></h4>
</dt>
<dd>
<div class="description">
<p>An alias for blendSubtract, it simply sums the values of the two colors and subtracts 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>a</code></td>
<td class="type">
<span class="param-type">integer</span>
</td>
<td class="description last"><p>The source color to blend, in the range 1 to 255.</p></td>
</tr>
<tr>
<td class="name"><code>b</code></td>
<td class="type">
<span class="param-type">integer</span>
</td>
<td class="description last"><p>The backdrop color to blend, in the range 1 to 255.</p></td>
</tr>
</tbody>
</table>
<h5>Returns:</h5>
<div class="returns">
<div class="returns-type">
<span class="param-type">integer</span>
-
</div>
<div class="returns-desc param-desc">
<p>The blended color value, in the range 1 to 255.</p>
</div>
</div>
<dl class="details">
<dt class="tag-source">Source -
<a href="src_utils_Color.js.html">utils/Color.js</a>, <a href="src_utils_Color.js.html#sunlight-1-line-1226">line 1226</a>
</dt>
</dl>
</dd>
<dt>
<h4 class="name "
id=".blendLinearDodge"><span class="type-signature">&lt;static> </span>blendLinearDodge<span class="signature">(a, b)</span><span class="type-signature"> &rarr; {integer}</span></h4>
</dt>
<dd>
<div class="description">
<p>An alias for blendAdd, it simply sums the values of the two colors.</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>a</code></td>
<td class="type">
<span class="param-type">integer</span>
</td>
<td class="description last"><p>The source color to blend, in the range 1 to 255.</p></td>
</tr>
<tr>
<td class="name"><code>b</code></td>
<td class="type">
<span class="param-type">integer</span>
</td>
<td class="description last"><p>The backdrop color to blend, in the range 1 to 255.</p></td>
</tr>
</tbody>
</table>
<h5>Returns:</h5>
<div class="returns">
<div class="returns-type">
<span class="param-type">integer</span>
-
</div>
<div class="returns-desc param-desc">
<p>The blended color value, in the range 1 to 255.</p>
</div>
</div>
<dl class="details">
<dt class="tag-source">Source -
<a href="src_utils_Color.js.html">utils/Color.js</a>, <a href="src_utils_Color.js.html#sunlight-1-line-1213">line 1213</a>
</dt>
</dl>
</dd>
<dt>
<h4 class="name "
id=".blendLinearLight"><span class="type-signature">&lt;static> </span>blendLinearLight<span class="signature">(a, b)</span><span class="type-signature"> &rarr; {integer}</span></h4>
</dt>
<dd>
<div class="description">
<p>This blend mode combines Linear Dodge and Linear Burn (rescaled so that neutral colors become middle gray).
Dodge applies to values of top layer lighter than middle gray, and burn to darker values.
The calculation simplifies to the sum of bottom layer and twice the top layer, subtract 128. The contrast decreases.</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>a</code></td>
<td class="type">
<span class="param-type">integer</span>
</td>
<td class="description last"><p>The source color to blend, in the range 1 to 255.</p></td>
</tr>
<tr>
<td class="name"><code>b</code></td>
<td class="type">
<span class="param-type">integer</span>
</td>
<td class="description last"><p>The backdrop color to blend, in the range 1 to 255.</p></td>
</tr>
</tbody>
</table>
<h5>Returns:</h5>
<div class="returns">
<div class="returns-type">
<span class="param-type">integer</span>
-
</div>
<div class="returns-desc param-desc">
<p>The blended color value, in the range 1 to 255.</p>
</div>
</div>
<dl class="details">
<dt class="tag-source">Source -
<a href="src_utils_Color.js.html">utils/Color.js</a>, <a href="src_utils_Color.js.html#sunlight-1-line-1239">line 1239</a>
</dt>
</dl>
</dd>
<dt>
<h4 class="name "
id=".blendMultiply"><span class="type-signature">&lt;static> </span>blendMultiply<span class="signature">(a, b)</span><span class="type-signature"> &rarr; {integer}</span></h4>
</dt>
<dd>
<div class="description">
<p>Multiplies the backdrop and source color values.
The result color is always at least as dark as either of the two constituent
colors. Multiplying any color with black produces black;
multiplying with white leaves the original color unchanged.</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>a</code></td>
<td class="type">
<span class="param-type">integer</span>
</td>
<td class="description last"><p>The source color to blend, in the range 1 to 255.</p></td>
</tr>
<tr>
<td class="name"><code>b</code></td>
<td class="type">
<span class="param-type">integer</span>
</td>
<td class="description last"><p>The backdrop color to blend, in the range 1 to 255.</p></td>
</tr>
</tbody>
</table>
<h5>Returns:</h5>
<div class="returns">
<div class="returns-type">
<span class="param-type">integer</span>
-
</div>
<div class="returns-desc param-desc">
<p>The blended color value, in the range 1 to 255.</p>
</div>
</div>
<dl class="details">
<dt class="tag-source">Source -
<a href="src_utils_Color.js.html">utils/Color.js</a>, <a href="src_utils_Color.js.html#sunlight-1-line-1011">line 1011</a>
</dt>
</dl>
</dd>
<dt>
<h4 class="name "
id=".blendNegation"><span class="type-signature">&lt;static> </span>blendNegation<span class="signature">(a, b)</span><span class="type-signature"> &rarr; {integer}</span></h4>
</dt>
<dd>
<div class="description">
<p>Negation blend mode.</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>a</code></td>
<td class="type">
<span class="param-type">integer</span>
</td>
<td class="description last"><p>The source color to blend, in the range 1 to 255.</p></td>
</tr>
<tr>
<td class="name"><code>b</code></td>
<td class="type">
<span class="param-type">integer</span>
</td>
<td class="description last"><p>The backdrop color to blend, in the range 1 to 255.</p></td>
</tr>
</tbody>
</table>
<h5>Returns:</h5>
<div class="returns">
<div class="returns-type">
<span class="param-type">integer</span>
-
</div>
<div class="returns-desc param-desc">
<p>The blended color value, in the range 1 to 255.</p>
</div>
</div>
<dl class="details">
<dt class="tag-source">Source -
<a href="src_utils_Color.js.html">utils/Color.js</a>, <a href="src_utils_Color.js.html#sunlight-1-line-1081">line 1081</a>
</dt>
</dl>
</dd>
<dt>
<h4 class="name "
id=".blendNormal"><span class="type-signature">&lt;static> </span>blendNormal<span class="signature">(a, b)</span><span class="type-signature"> &rarr; {integer}</span></h4>
</dt>
<dd>
<div class="description">
<p>Blends the source color, ignoring the backdrop.</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>a</code></td>
<td class="type">
<span class="param-type">integer</span>
</td>
<td class="description last"><p>The source color to blend, in the range 1 to 255.</p></td>
</tr>
<tr>
<td class="name"><code>b</code></td>
<td class="type">
<span class="param-type">integer</span>
</td>
<td class="description last"><p>The backdrop color to blend, in the range 1 to 255.</p></td>
</tr>
</tbody>
</table>
<h5>Returns:</h5>
<div class="returns">
<div class="returns-type">
<span class="param-type">integer</span>
-
</div>
<div class="returns-desc param-desc">
<p>The blended color value, in the range 1 to 255.</p>
</div>
</div>
<dl class="details">
<dt class="tag-source">Source -
<a href="src_utils_Color.js.html">utils/Color.js</a>, <a href="src_utils_Color.js.html#sunlight-1-line-972">line 972</a>
</dt>
</dl>
</dd>
<dt>
<h4 class="name "
id=".blendOverlay"><span class="type-signature">&lt;static> </span>blendOverlay<span class="signature">(a, b)</span><span class="type-signature"> &rarr; {integer}</span></h4>
</dt>
<dd>
<div class="description">
<p>Multiplies or screens the colors, depending on the backdrop color.
Source colors overlay the backdrop while preserving its highlights and shadows.
The backdrop color is not replaced, but is mixed with the source color to reflect the lightness or darkness of the backdrop.</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>a</code></td>
<td class="type">
<span class="param-type">integer</span>
</td>
<td class="description last"><p>The source color to blend, in the range 1 to 255.</p></td>
</tr>
<tr>
<td class="name"><code>b</code></td>
<td class="type">
<span class="param-type">integer</span>
</td>
<td class="description last"><p>The backdrop color to blend, in the range 1 to 255.</p></td>
</tr>
</tbody>
</table>
<h5>Returns:</h5>
<div class="returns">
<div class="returns-type">
<span class="param-type">integer</span>
-
</div>
<div class="returns-desc param-desc">
<p>The blended color value, in the range 1 to 255.</p>
</div>
</div>
<dl class="details">
<dt class="tag-source">Source -
<a href="src_utils_Color.js.html">utils/Color.js</a>, <a href="src_utils_Color.js.html#sunlight-1-line-1123">line 1123</a>
</dt>
</dl>
</dd>
<dt>
<h4 class="name "
id=".blendPhoenix"><span class="type-signature">&lt;static> </span>blendPhoenix<span class="signature">(a, b)</span><span class="type-signature"> &rarr; {integer}</span></h4>
</dt>
<dd>
<div class="description">
<p>Phoenix blend mode. This subtracts the lighter color from the darker color, and adds 255, giving a bright result.</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>a</code></td>
<td class="type">
<span class="param-type">integer</span>
</td>
<td class="description last"><p>The source color to blend, in the range 1 to 255.</p></td>
</tr>
<tr>
<td class="name"><code>b</code></td>
<td class="type">
<span class="param-type">integer</span>
</td>
<td class="description last"><p>The backdrop color to blend, in the range 1 to 255.</p></td>
</tr>
</tbody>
</table>
<h5>Returns:</h5>
<div class="returns">
<div class="returns-type">
<span class="param-type">integer</span>
-
</div>
<div class="returns-desc param-desc">
<p>The blended color value, in the range 1 to 255.</p>
</div>
</div>
<dl class="details">
<dt class="tag-source">Source -
<a href="src_utils_Color.js.html">utils/Color.js</a>, <a href="src_utils_Color.js.html#sunlight-1-line-1326">line 1326</a>
</dt>
</dl>
</dd>
<dt>
<h4 class="name "
id=".blendPinLight"><span class="type-signature">&lt;static> </span>blendPinLight<span class="signature">(a, b)</span><span class="type-signature"> &rarr; {integer}</span></h4>
</dt>
<dd>
<div class="description">
<p>If the backdrop color (light source) is lighter than 50%, the blendDarken mode is used, and colors lighter than the backdrop color do not change.
If the backdrop color is darker than 50% gray, colors lighter than the blend color are replaced, and colors darker than the blend color do not change.</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>a</code></td>
<td class="type">
<span class="param-type">integer</span>
</td>
<td class="description last"><p>The source color to blend, in the range 1 to 255.</p></td>
</tr>
<tr>
<td class="name"><code>b</code></td>
<td class="type">
<span class="param-type">integer</span>
</td>
<td class="description last"><p>The backdrop color to blend, in the range 1 to 255.</p></td>
</tr>
</tbody>
</table>
<h5>Returns:</h5>
<div class="returns">
<div class="returns-type">
<span class="param-type">integer</span>
-
</div>
<div class="returns-desc param-desc">
<p>The blended color value, in the range 1 to 255.</p>
</div>
</div>
<dl class="details">
<dt class="tag-source">Source -
<a href="src_utils_Color.js.html">utils/Color.js</a>, <a href="src_utils_Color.js.html#sunlight-1-line-1270">line 1270</a>
</dt>
</dl>
</dd>
<dt>
<h4 class="name "
id=".blendReflect"><span class="type-signature">&lt;static> </span>blendReflect<span class="signature">(a, b)</span><span class="type-signature"> &rarr; {integer}</span></h4>
</dt>
<dd>
<div class="description">
<p>Reflect blend mode. This mode is useful when adding shining objects or light zones to images.</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>a</code></td>
<td class="type">
<span class="param-type">integer</span>
</td>
<td class="description last"><p>The source color to blend, in the range 1 to 255.</p></td>
</tr>
<tr>
<td class="name"><code>b</code></td>
<td class="type">
<span class="param-type">integer</span>
</td>
<td class="description last"><p>The backdrop color to blend, in the range 1 to 255.</p></td>
</tr>
</tbody>
</table>
<h5>Returns:</h5>
<div class="returns">
<div class="returns-type">
<span class="param-type">integer</span>
-
</div>
<div class="returns-desc param-desc">
<p>The blended color value, in the range 1 to 255.</p>
</div>
</div>
<dl class="details">
<dt class="tag-source">Source -
<a href="src_utils_Color.js.html">utils/Color.js</a>, <a href="src_utils_Color.js.html#sunlight-1-line-1300">line 1300</a>
</dt>
</dl>
</dd>
<dt>
<h4 class="name "
id=".blendScreen"><span class="type-signature">&lt;static> </span>blendScreen<span class="signature">(a, b)</span><span class="type-signature"> &rarr; {integer}</span></h4>
</dt>
<dd>
<div class="description">
<p>Multiplies the complements of the backdrop and source color values, then complements the result.
The result color is always at least as light as either of the two constituent colors.
Screening any color with white produces white; screening with black leaves the original color unchanged.</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>a</code></td>
<td class="type">
<span class="param-type">integer</span>
</td>
<td class="description last"><p>The source color to blend, in the range 1 to 255.</p></td>
</tr>
<tr>
<td class="name"><code>b</code></td>
<td class="type">
<span class="param-type">integer</span>
</td>
<td class="description last"><p>The backdrop color to blend, in the range 1 to 255.</p></td>
</tr>
</tbody>
</table>
<h5>Returns:</h5>
<div class="returns">
<div class="returns-type">
<span class="param-type">integer</span>
-
</div>
<div class="returns-desc param-desc">
<p>The blended color value, in the range 1 to 255.</p>
</div>
</div>
<dl class="details">
<dt class="tag-source">Source -
<a href="src_utils_Color.js.html">utils/Color.js</a>, <a href="src_utils_Color.js.html#sunlight-1-line-1094">line 1094</a>
</dt>
</dl>
</dd>
<dt>
<h4 class="name "
id=".blendSoftLight"><span class="type-signature">&lt;static> </span>blendSoftLight<span class="signature">(a, b)</span><span class="type-signature"> &rarr; {integer}</span></h4>
</dt>
<dd>
<div class="description">
<p>Darkens or lightens the colors, depending on the source color value. </p>
<p>If the source color is lighter than 0.5, the backdrop is lightened, as if it were dodged;
this is useful for adding highlights to a scene. </p>
<p>If the source color is darker than 0.5, the backdrop is darkened, as if it were burned in.
The degree of lightening or darkening is proportional to the difference between the source color and 0.5;
if it is equal to 0.5, the backdrop is unchanged.</p>
<p>Painting with pure black or white produces a distinctly darker or lighter area, but does not result in pure black or white.
The effect is similar to shining a diffused spotlight on the backdrop.</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>a</code></td>
<td class="type">
<span class="param-type">integer</span>
</td>
<td class="description last"><p>The source color to blend, in the range 1 to 255.</p></td>
</tr>
<tr>
<td class="name"><code>b</code></td>
<td class="type">
<span class="param-type">integer</span>
</td>
<td class="description last"><p>The backdrop color to blend, in the range 1 to 255.</p></td>
</tr>
</tbody>
</table>
<h5>Returns:</h5>
<div class="returns">
<div class="returns-type">
<span class="param-type">integer</span>
-
</div>
<div class="returns-desc param-desc">
<p>The blended color value, in the range 1 to 255.</p>
</div>
</div>
<dl class="details">
<dt class="tag-source">Source -
<a href="src_utils_Color.js.html">utils/Color.js</a>, <a href="src_utils_Color.js.html#sunlight-1-line-1138">line 1138</a>
</dt>
</dl>
</dd>
<dt>
<h4 class="name "
id=".blendSubtract"><span class="type-signature">&lt;static> </span>blendSubtract<span class="signature">(a, b)</span><span class="type-signature"> &rarr; {integer}</span></h4>
</dt>
<dd>
<div class="description">
<p>Combines the source and backdrop colors and returns their value minus 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>a</code></td>
<td class="type">
<span class="param-type">integer</span>
</td>
<td class="description last"><p>The source color to blend, in the range 1 to 255.</p></td>
</tr>
<tr>
<td class="name"><code>b</code></td>
<td class="type">
<span class="param-type">integer</span>
</td>
<td class="description last"><p>The backdrop color to blend, in the range 1 to 255.</p></td>
</tr>
</tbody>
</table>
<h5>Returns:</h5>
<div class="returns">
<div class="returns-type">
<span class="param-type">integer</span>
-
</div>
<div class="returns-desc param-desc">
<p>The blended color value, in the range 1 to 255.</p>
</div>
</div>
<dl class="details">
<dt class="tag-source">Source -
<a href="src_utils_Color.js.html">utils/Color.js</a>, <a href="src_utils_Color.js.html#sunlight-1-line-1053">line 1053</a>
</dt>
</dl>
</dd>
<dt>
<h4 class="name "
id=".blendVividLight"><span class="type-signature">&lt;static> </span>blendVividLight<span class="signature">(a, b)</span><span class="type-signature"> &rarr; {integer}</span></h4>
</dt>
<dd>
<div class="description">
<p>This blend mode combines Color Dodge and Color Burn (rescaled so that neutral colors become middle gray).
Dodge applies when values in the top layer are lighter than middle gray, and burn to darker values.
The middle gray is the neutral color. When color is lighter than this, this effectively moves the white point of the bottom
layer down by twice the difference; when it is darker, the black point is moved up by twice the difference. The perceived contrast increases.</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>a</code></td>
<td class="type">
<span class="param-type">integer</span>
</td>
<td class="description last"><p>The source color to blend, in the range 1 to 255.</p></td>
</tr>
<tr>
<td class="name"><code>b</code></td>
<td class="type">
<span class="param-type">integer</span>
</td>
<td class="description last"><p>The backdrop color to blend, in the range 1 to 255.</p></td>
</tr>
</tbody>
</table>
<h5>Returns:</h5>
<div class="returns">
<div class="returns-type">
<span class="param-type">integer</span>
-
</div>
<div class="returns-desc param-desc">
<p>The blended color value, in the range 1 to 255.</p>
</div>
</div>
<dl class="details">
<dt class="tag-source">Source -
<a href="src_utils_Color.js.html">utils/Color.js</a>, <a href="src_utils_Color.js.html#sunlight-1-line-1254">line 1254</a>
</dt>
</dl>
</dd>
<dt>
<h4 class="name "
id=".componentToHex"><span class="type-signature">&lt;static> </span>componentToHex<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 component.</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>
<h5>Returns:</h5>
<div class="returns">
<div class="returns-type">
<span class="param-type">string</span>
-
</div>
<div class="returns-desc param-desc">
<p>A string of length 2 characters, i.e. 255 = ff, 100 = 64.</p>
</div>
</div>
<dl class="details">
<dt class="tag-source">Source -
<a href="src_utils_Color.js.html">utils/Color.js</a>, <a href="src_utils_Color.js.html#sunlight-1-line-677">line 677</a>
</dt>
</dl>
</dd>
<dt>
<h4 class="name "
id=".createColor"><span class="type-signature">&lt;static> </span>createColor<span class="signature">(<span class="optional">r</span>, <span class="optional">g</span>, <span class="optional">b</span>, <span class="optional">a</span>, <span class="optional">h</span>, <span class="optional">s</span>, <span class="optional">l</span>, <span class="optional">v</span>)</span><span class="type-signature"> &rarr; {object}</span></h4>
</dt>
<dd>
<div class="description">
<p>A utility function to create a lightweight 'color' object with the default components.
Any components that are not specified will default to zero.</p>
<p>This is useful when you want to use a shared color object for the getPixel and getPixelAt methods.</p>
</div>
<h5>Parameters:</h5>
<table class="params table table-striped">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Argument</th>
<th>Default</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>r</code></td>
<td class="type">
<span class="param-type">number</span>
</td>
<td class="attributes">
&lt;optional><br>
</td>
<td class="default">
0
</td>
<td class="description last"><p>The red color component, in the range 0 - 255.</p></td>
</tr>
<tr>
<td class="name"><code>g</code></td>
<td class="type">
<span class="param-type">number</span>
</td>
<td class="attributes">
&lt;optional><br>
</td>
<td class="default">
0
</td>
<td class="description last"><p>The green color component, in the range 0 - 255.</p></td>
</tr>
<tr>
<td class="name"><code>b</code></td>
<td class="type">
<span class="param-type">number</span>
</td>
<td class="attributes">
&lt;optional><br>
</td>
<td class="default">
0
</td>
<td class="description last"><p>The blue color component, in the range 0 - 255.</p></td>
</tr>
<tr>
<td class="name"><code>a</code></td>
<td class="type">
<span class="param-type">number</span>
</td>
<td class="attributes">
&lt;optional><br>
</td>
<td class="default">
1
</td>
<td class="description last"><p>The alpha color component, in the range 0 - 1.</p></td>
</tr>
<tr>
<td class="name"><code>h</code></td>
<td class="type">
<span class="param-type">number</span>
</td>
<td class="attributes">
&lt;optional><br>
</td>
<td class="default">
0
</td>
<td class="description last"><p>The hue, in the range 0 - 1.</p></td>
</tr>
<tr>
<td class="name"><code>s</code></td>
<td class="type">
<span class="param-type">number</span>
</td>
<td class="attributes">
&lt;optional><br>
</td>
<td class="default">
0
</td>
<td class="description last"><p>The saturation, in the range 0 - 1.</p></td>
</tr>
<tr>
<td class="name"><code>l</code></td>
<td class="type">
<span class="param-type">number</span>
</td>
<td class="attributes">
&lt;optional><br>
</td>
<td class="default">
0
</td>
<td class="description last"><p>The lightness, in the range 0 - 1.</p></td>
</tr>
<tr>
<td class="name"><code>v</code></td>
<td class="type">
<span class="param-type">number</span>
</td>
<td class="attributes">
&lt;optional><br>
</td>
<td class="default">
0
</td>
<td class="description last"><p>The value, in the range 0 - 1.</p></td>
</tr>
</tbody>
</table>
<h5>Returns:</h5>
<div class="returns">
<div class="returns-type">
<span class="param-type">object</span>
-
</div>
<div class="returns-desc param-desc">
<p>The resulting object with r, g, b, a properties and h, s, l and v.</p>
</div>
</div>
<dl class="details">
<dt class="tag-author">Author:</dt>
<dd class="tag-author">
<ul>
<li>Matt DesLauriers (@mattdesl)</li>
</ul>
</dd>
<dt class="tag-source">Source -
<a href="src_utils_Color.js.html">utils/Color.js</a>, <a href="src_utils_Color.js.html#sunlight-1-line-421">line 421</a>
</dt>
</dl>
</dd>
<dt>
<h4 class="name "
id=".fromRGBA"><span class="type-signature">&lt;static> </span>fromRGBA<span class="signature">(rgba, <span class="optional">out</span>)</span><span class="type-signature"> &rarr; {object}</span></h4>
</dt>
<dd>
<div class="description">
<p>A utility to convert an integer in 0xRRGGBBAA format to a color object.
This does not rely on endianness.</p>
</div>
<h5>Parameters:</h5>
<table class="params table table-striped">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Argument</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>rgba</code></td>
<td class="type">
<span class="param-type">number</span>
</td>
<td class="attributes">
</td>
<td class="description last"><p>An RGBA hex</p></td>
</tr>
<tr>
<td class="name"><code>out</code></td>
<td class="type">
<span class="param-type">object</span>
</td>
<td class="attributes">
&lt;optional><br>
</td>
<td class="description last"><p>The object to use, optional.</p></td>
</tr>
</tbody>
</table>
<h5>Returns:</h5>
<div class="returns">
<div class="returns-type">
<span class="param-type">object</span>
-
</div>
<div class="returns-desc param-desc">
<p>A color object.</p>
</div>
</div>
<dl class="details">
<dt class="tag-author">Author:</dt>
<dd class="tag-author">
<ul>
<li>Matt DesLauriers (@mattdesl)</li>
</ul>
</dd>
<dt class="tag-source">Source -
<a href="src_utils_Color.js.html">utils/Color.js</a>, <a href="src_utils_Color.js.html#sunlight-1-line-97">line 97</a>
</dt>
</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>
<h5>Returns:</h5>
<div class="returns">
<div class="returns-type">
<span class="param-type">number</span>
-
</div>
<div class="returns-desc 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>
</div>
<dl class="details">
<dt class="tag-source">Source -
<a href="src_utils_Color.js.html">utils/Color.js</a>, <a href="src_utils_Color.js.html#sunlight-1-line-912">line 912</a>
</dt>
</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>
<h5>Returns:</h5>
<div class="returns">
<div class="returns-type">
<span class="param-type">number</span>
-
</div>
<div class="returns-desc 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>
</div>
<dl class="details">
<dt class="tag-source">Source -
<a href="src_utils_Color.js.html">utils/Color.js</a>, <a href="src_utils_Color.js.html#sunlight-1-line-924">line 924</a>
</dt>
</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>
<h5>Returns:</h5>
<div class="returns">
<div class="returns-type">
<span class="param-type">number</span>
-
</div>
<div class="returns-desc param-desc">
<p>The Blue component of the color, will be between 0 and 255 (0 being no color, 255 full Blue).</p>
</div>
</div>
<dl class="details">
<dt class="tag-source">Source -
<a href="src_utils_Color.js.html">utils/Color.js</a>, <a href="src_utils_Color.js.html#sunlight-1-line-960">line 960</a>
</dt>
</dl>
</dd>
<dt>
<h4 class="name "
id=".getColor"><span class="type-signature">&lt;static> </span>getColor<span class="signature">(r, g, b)</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>r</code></td>
<td class="type">
<span class="param-type">number</span>
</td>
<td class="description last"><p>The red color component, in the range 0 - 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 component, in the range 0 - 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 component, in the range 0 - 255.</p></td>
</tr>
</tbody>
</table>
<h5>Returns:</h5>
<div class="returns">
<div class="returns-type">
<span class="param-type">number</span>
-
</div>
<div class="returns-desc param-desc">
<p>A native color value integer (format: 0xRRGGBB).</p>
</div>
</div>
<dl class="details">
<dt class="tag-source">Source -
<a href="src_utils_Color.js.html">utils/Color.js</a>, <a href="src_utils_Color.js.html#sunlight-1-line-483">line 483</a>
</dt>
</dl>
</dd>
<dt>
<h4 class="name "
id=".getColor32"><span class="type-signature">&lt;static> </span>getColor32<span class="signature">(a, r, g, b)</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>a</code></td>
<td class="type">
<span class="param-type">number</span>
</td>
<td class="description last"><p>The alpha color component, in the range 0 - 255.</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 component, in the range 0 - 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 component, in the range 0 - 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 component, in the range 0 - 255.</p></td>
</tr>
</tbody>
</table>
<h5>Returns:</h5>
<div class="returns">
<div class="returns-type">
<span class="param-type">number</span>
-
</div>
<div class="returns-desc param-desc">
<p>A native color value integer (format: 0xAARRGGBB).</p>
</div>
</div>
<dl class="details">
<dt class="tag-source">Source -
<a href="src_utils_Color.js.html">utils/Color.js</a>, <a href="src_utils_Color.js.html#sunlight-1-line-466">line 466</a>
</dt>
</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>
<h5>Returns:</h5>
<div class="returns">
<div class="returns-type">
<span class="param-type">number</span>
-
</div>
<div class="returns-desc param-desc">
<p>The Green component of the color, will be between 0 and 255 (0 being no color, 255 full Green).</p>
</div>
</div>
<dl class="details">
<dt class="tag-source">Source -
<a href="src_utils_Color.js.html">utils/Color.js</a>, <a href="src_utils_Color.js.html#sunlight-1-line-948">line 948</a>
</dt>
</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>
<h5>Returns:</h5>
<div class="returns">
<div class="returns-type">
<span class="param-type">number</span>
-
</div>
<div class="returns-desc param-desc">
<p>32-bit color value with alpha.</p>
</div>
</div>
<dl class="details">
<dt class="tag-source">Source -
<a href="src_utils_Color.js.html">utils/Color.js</a>, <a href="src_utils_Color.js.html#sunlight-1-line-816">line 816</a>
</dt>
</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>
<h5>Returns:</h5>
<div class="returns">
<div class="returns-type">
<span class="param-type">number</span>
-
</div>
<div class="returns-desc param-desc">
<p>The Red component of the color, will be between 0 and 255 (0 being no color, 255 full Red).</p>
</div>
</div>
<dl class="details">
<dt class="tag-source">Source -
<a href="src_utils_Color.js.html">utils/Color.js</a>, <a href="src_utils_Color.js.html#sunlight-1-line-936">line 936</a>
</dt>
</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>
<h5>Returns:</h5>
<div class="returns">
<div class="returns-type">
<span class="param-type">object</span>
-
</div>
<div class="returns-desc param-desc">
<p>An Object with properties: alpha, red, green, blue (also r, g, b and a). Alpha will only be present if a color value &gt; 16777215 was given.</p>
</div>
</div>
<dl class="details">
<dt class="tag-source">Source -
<a href="src_utils_Color.js.html">utils/Color.js</a>, <a href="src_utils_Color.js.html#sunlight-1-line-848">line 848</a>
</dt>
</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>
|
<span class="param-type">Object</span>
</td>
<td class="description last"><p>Color in RGB (0xRRGGBB), ARGB format (0xAARRGGBB) or an Object with r, g, b, a properties.</p></td>
</tr>
</tbody>
</table>
<h5>Returns:</h5>
<div class="returns">
<div class="returns-type">
<span class="param-type">string</span>
-
</div>
<div class="returns-desc param-desc">
<p>A string in the format: 'rgba(r,g,b,a)'</p>
</div>
</div>
<dl class="details">
<dt class="tag-source">Source -
<a href="src_utils_Color.js.html">utils/Color.js</a>, <a href="src_utils_Color.js.html#sunlight-1-line-890">line 890</a>
</dt>
</dl>
</dd>
<dt>
<h4 class="name "
id=".hexToColor"><span class="type-signature">&lt;static> </span>hexToColor<span class="signature">(hex, <span class="optional">out</span>)</span><span class="type-signature"> &rarr; {object}</span></h4>
</dt>
<dd>
<div class="description">
<p>Converts a hex string into a Phaser Color object.</p>
<p>The hex string can supplied as <code>'#0033ff'</code> or the short-hand format of <code>'#03f'</code>; it can begin with an optional &quot;#&quot; or &quot;0x&quot;, or be unprefixed. </p>
<p>An alpha channel is <em>not</em> supported.</p>
</div>
<h5>Parameters:</h5>
<table class="params table table-striped">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Argument</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>hex</code></td>
<td class="type">
<span class="param-type">string</span>
</td>
<td class="attributes">
</td>
<td class="description last"><p>The color string in a hex format.</p></td>
</tr>
<tr>
<td class="name"><code>out</code></td>
<td class="type">
<span class="param-type">object</span>
</td>
<td class="attributes">
&lt;optional><br>
</td>
<td class="description last"><p>An object into which 3 properties will be created or set: r, g and b. If not provided a new object will be created.</p></td>
</tr>
</tbody>
</table>
<h5>Returns:</h5>
<div class="returns">
<div class="returns-type">
<span class="param-type">object</span>
-
</div>
<div class="returns-desc param-desc">
<p>An object with the red, green and blue values set in the r, g and b properties.</p>
</div>
</div>
<dl class="details">
<dt class="tag-source">Source -
<a href="src_utils_Color.js.html">utils/Color.js</a>, <a href="src_utils_Color.js.html#sunlight-1-line-547">line 547</a>
</dt>
</dl>
</dd>
<dt>
<h4 class="name "
id=".hexToRGB"><span class="type-signature">&lt;static> </span>hexToRGB<span class="signature">(hex)</span><span class="type-signature"> &rarr; {number}</span></h4>
</dt>
<dd>
<div class="description">
<p>Converts a 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>hex</code></td>
<td class="type">
<span class="param-type">string</span>
</td>
<td class="description last"><p>The hex string to convert. Can be in the short-hand format <code>#03f</code> or <code>#0033ff</code>.</p></td>
</tr>
</tbody>
</table>
<h5>Returns:</h5>
<div class="returns">
<div class="returns-type">
<span class="param-type">number</span>
-
</div>
<div class="returns-desc param-desc">
<p>The rgb color value in the format 0xAARRGGBB.</p>
</div>
</div>
<dl class="details">
<dt class="tag-source">Source -
<a href="src_utils_Color.js.html">utils/Color.js</a>, <a href="src_utils_Color.js.html#sunlight-1-line-528">line 528</a>
</dt>
</dl>
</dd>
<dt>
<h4 class="name "
id=".HSLColorWheel"><span class="type-signature">&lt;static> </span>HSLColorWheel<span class="signature">(<span class="optional">s</span>, <span class="optional">l</span>)</span><span class="type-signature"> &rarr; {array}</span></h4>
</dt>
<dd>
<div class="description">
<p>Get HSL color wheel values in an array which will be 360 elements in size.</p>
</div>
<h5>Parameters:</h5>
<table class="params table table-striped">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Argument</th>
<th>Default</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>s</code></td>
<td class="type">
<span class="param-type">number</span>
</td>
<td class="attributes">
&lt;optional><br>
</td>
<td class="default">
0.5
</td>
<td class="description last"><p>The saturation, in the range 0 - 1.</p></td>
</tr>
<tr>
<td class="name"><code>l</code></td>
<td class="type">
<span class="param-type">number</span>
</td>
<td class="attributes">
&lt;optional><br>
</td>
<td class="default">
0.5
</td>
<td class="description last"><p>The lightness, in the range 0 - 1.</p></td>
</tr>
</tbody>
</table>
<h5>Returns:</h5>
<div class="returns">
<div class="returns-type">
<span class="param-type">array</span>
-
</div>
<div class="returns-desc param-desc">
<p>An array containing 360 elements corresponding to the HSL color wheel.</p>
</div>
</div>
<dl class="details">
<dt class="tag-source">Source -
<a href="src_utils_Color.js.html">utils/Color.js</a>, <a href="src_utils_Color.js.html#sunlight-1-line-717">line 717</a>
</dt>
</dl>
</dd>
<dt>
<h4 class="name "
id=".HSLtoRGB"><span class="type-signature">&lt;static> </span>HSLtoRGB<span class="signature">(h, s, l, <span class="optional">out</span>)</span><span class="type-signature"> &rarr; {object}</span></h4>
</dt>
<dd>
<div class="description">
<p>Converts an HSL (hue, saturation and lightness) color value to RGB.
Conversion forumla from http://en.wikipedia.org/wiki/HSL_color_space.
Assumes HSL values are contained in the set [0, 1] and returns r, g and b values in the set [0, 255].
Based on code by Michael Jackson (https://github.com/mjijackson)</p>
</div>
<h5>Parameters:</h5>
<table class="params table table-striped">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Argument</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>h</code></td>
<td class="type">
<span class="param-type">number</span>
</td>
<td class="attributes">
</td>
<td class="description last"><p>The hue, in the range 0 - 1.</p></td>
</tr>
<tr>
<td class="name"><code>s</code></td>
<td class="type">
<span class="param-type">number</span>
</td>
<td class="attributes">
</td>
<td class="description last"><p>The saturation, in the range 0 - 1.</p></td>
</tr>
<tr>
<td class="name"><code>l</code></td>
<td class="type">
<span class="param-type">number</span>
</td>
<td class="attributes">
</td>
<td class="description last"><p>The lightness, in the range 0 - 1.</p></td>
</tr>
<tr>
<td class="name"><code>out</code></td>
<td class="type">
<span class="param-type">object</span>
</td>
<td class="attributes">
&lt;optional><br>
</td>
<td class="description last"><p>An object into which 3 properties will be created: r, g and b. If not provided a new object will be created.</p></td>
</tr>
</tbody>
</table>
<h5>Returns:</h5>
<div class="returns">
<div class="returns-type">
<span class="param-type">object</span>
-
</div>
<div class="returns-desc param-desc">
<p>An object with the red, green and blue values set in the r, g and b properties.</p>
</div>
</div>
<dl class="details">
<dt class="tag-source">Source -
<a href="src_utils_Color.js.html">utils/Color.js</a>, <a href="src_utils_Color.js.html#sunlight-1-line-203">line 203</a>
</dt>
</dl>
</dd>
<dt>
<h4 class="name "
id=".HSVColorWheel"><span class="type-signature">&lt;static> </span>HSVColorWheel<span class="signature">(<span class="optional">s</span>, <span class="optional">v</span>)</span><span class="type-signature"> &rarr; {array}</span></h4>
</dt>
<dd>
<div class="description">
<p>Get HSV color wheel values in an array which will be 360 elements in size.</p>
</div>
<h5>Parameters:</h5>
<table class="params table table-striped">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Argument</th>
<th>Default</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>s</code></td>
<td class="type">
<span class="param-type">number</span>
</td>
<td class="attributes">
&lt;optional><br>
</td>
<td class="default">
1
</td>
<td class="description last"><p>The saturation, in the range 0 - 1.</p></td>
</tr>
<tr>
<td class="name"><code>v</code></td>
<td class="type">
<span class="param-type">number</span>
</td>
<td class="attributes">
&lt;optional><br>
</td>
<td class="default">
1
</td>
<td class="description last"><p>The value, in the range 0 - 1.</p></td>
</tr>
</tbody>
</table>
<h5>Returns:</h5>
<div class="returns">
<div class="returns-type">
<span class="param-type">array</span>
-
</div>
<div class="returns-desc param-desc">
<p>An array containing 360 elements corresponding to the HSV color wheel.</p>
</div>
</div>
<dl class="details">
<dt class="tag-source">Source -
<a href="src_utils_Color.js.html">utils/Color.js</a>, <a href="src_utils_Color.js.html#sunlight-1-line-692">line 692</a>
</dt>
</dl>
</dd>
<dt>
<h4 class="name "
id=".HSVtoRGB"><span class="type-signature">&lt;static> </span>HSVtoRGB<span class="signature">(h, s, v, <span class="optional">out</span>)</span><span class="type-signature"> &rarr; {object}</span></h4>
</dt>
<dd>
<div class="description">
<p>Converts an HSV (hue, saturation and value) color value to RGB.
Conversion forumla from http://en.wikipedia.org/wiki/HSL_color_space.
Assumes HSV values are contained in the set [0, 1] and returns r, g and b values in the set [0, 255].
Based on code by Michael Jackson (https://github.com/mjijackson)</p>
</div>
<h5>Parameters:</h5>
<table class="params table table-striped">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Argument</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>h</code></td>
<td class="type">
<span class="param-type">number</span>
</td>
<td class="attributes">
</td>
<td class="description last"><p>The hue, in the range 0 - 1.</p></td>
</tr>
<tr>
<td class="name"><code>s</code></td>
<td class="type">
<span class="param-type">number</span>
</td>
<td class="attributes">
</td>
<td class="description last"><p>The saturation, in the range 0 - 1.</p></td>
</tr>
<tr>
<td class="name"><code>v</code></td>
<td class="type">
<span class="param-type">number</span>
</td>
<td class="attributes">
</td>
<td class="description last"><p>The value, in the range 0 - 1.</p></td>
</tr>
<tr>
<td class="name"><code>out</code></td>
<td class="type">
<span class="param-type">object</span>
</td>
<td class="attributes">
&lt;optional><br>
</td>
<td class="description last"><p>An object into which 3 properties will be created: r, g and b. If not provided a new object will be created.</p></td>
</tr>
</tbody>
</table>
<h5>Returns:</h5>
<div class="returns">
<div class="returns-type">
<span class="param-type">object</span>
-
</div>
<div class="returns-desc param-desc">
<p>An object with the red, green and blue values set in the r, g and b properties.</p>
</div>
</div>
<dl class="details">
<dt class="tag-source">Source -
<a href="src_utils_Color.js.html">utils/Color.js</a>, <a href="src_utils_Color.js.html#sunlight-1-line-310">line 310</a>
</dt>
</dl>
</dd>
<dt>
<h4 class="name "
id=".hueToColor"><span class="type-signature">&lt;static> </span>hueToColor<span class="signature">(p, q, t)</span><span class="type-signature"> &rarr; {number}</span></h4>
</dt>
<dd>
<div class="description">
<p>Converts a hue to an RGB color.
Based on code by Michael Jackson (https://github.com/mjijackson)</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>p</code></td>
<td class="type">
<span class="param-type">number</span>
</td>
<td class="description last"></td>
</tr>
<tr>
<td class="name"><code>q</code></td>
<td class="type">
<span class="param-type">number</span>
</td>
<td class="description last"></td>
</tr>
<tr>
<td class="name"><code>t</code></td>
<td class="type">
<span class="param-type">number</span>
</td>
<td class="description last"></td>
</tr>
</tbody>
</table>
<h5>Returns:</h5>
<div class="returns">
<div class="returns-type">
<span class="param-type">number</span>
-
</div>
<div class="returns-desc param-desc">
<p>The color component value.</p>
</div>
</div>
<dl class="details">
<dt class="tag-source">Source -
<a href="src_utils_Color.js.html">utils/Color.js</a>, <a href="src_utils_Color.js.html#sunlight-1-line-379">line 379</a>
</dt>
</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>
<h5>Returns:</h5>
<div class="returns">
<div class="returns-type">
<span class="param-type">number</span>
-
</div>
<div class="returns-desc param-desc">
<p>The interpolated color value.</p>
</div>
</div>
<dl class="details">
<dt class="tag-source">Source -
<a href="src_utils_Color.js.html">utils/Color.js</a>, <a href="src_utils_Color.js.html#sunlight-1-line-742">line 742</a>
</dt>
</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>
<h5>Returns:</h5>
<div class="returns">
<div class="returns-type">
<span class="param-type">number</span>
-
</div>
<div class="returns-desc param-desc">
<p>The interpolated color value.</p>
</div>
</div>
<dl class="details">
<dt class="tag-source">Source -
<a href="src_utils_Color.js.html">utils/Color.js</a>, <a href="src_utils_Color.js.html#sunlight-1-line-768">line 768</a>
</dt>
</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>
<h5>Returns:</h5>
<div class="returns">
<div class="returns-type">
<span class="param-type">number</span>
-
</div>
<div class="returns-desc param-desc">
<p>The interpolated color value.</p>
</div>
</div>
<dl class="details">
<dt class="tag-source">Source -
<a href="src_utils_Color.js.html">utils/Color.js</a>, <a href="src_utils_Color.js.html#sunlight-1-line-792">line 792</a>
</dt>
</dl>
</dd>
<dt>
<h4 class="name "
id=".packPixel"><span class="type-signature">&lt;static> </span>packPixel<span class="signature">(r, g, b, a)</span><span class="type-signature"> &rarr; {number}</span></h4>
</dt>
<dd>
<div class="description">
<p>Packs the r, g, b, a components into a single integer, for use with Int32Array.
If device is little endian then ABGR order is used. Otherwise RGBA order is used.</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>r</code></td>
<td class="type">
<span class="param-type">number</span>
</td>
<td class="description last"><p>The red color component, in the range 0 - 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 component, in the range 0 - 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 component, in the range 0 - 255.</p></td>
</tr>
<tr>
<td class="name"><code>a</code></td>
<td class="type">
<span class="param-type">number</span>
</td>
<td class="description last"><p>The alpha color component, in the range 0 - 255.</p></td>
</tr>
</tbody>
</table>
<h5>Returns:</h5>
<div class="returns">
<div class="returns-type">
<span class="param-type">number</span>
-
</div>
<div class="returns-desc param-desc">
<p>The packed color as uint32</p>
</div>
</div>
<dl class="details">
<dt class="tag-author">Author:</dt>
<dd class="tag-author">
<ul>
<li>Matt DesLauriers (@mattdesl)</li>
</ul>
</dd>
<dt class="tag-source">Source -
<a href="src_utils_Color.js.html">utils/Color.js</a>, <a href="src_utils_Color.js.html#sunlight-1-line-14">line 14</a>
</dt>
</dl>
</dd>
<dt>
<h4 class="name "
id=".RGBtoHSL"><span class="type-signature">&lt;static> </span>RGBtoHSL<span class="signature">(r, g, b, <span class="optional">out</span>)</span><span class="type-signature"> &rarr; {object}</span></h4>
</dt>
<dd>
<div class="description">
<p>Converts an RGB color value to HSL (hue, saturation and lightness).
Conversion forumla from http://en.wikipedia.org/wiki/HSL_color_space.
Assumes RGB values are contained in the set [0, 255] and returns h, s and l in the set [0, 1].
Based on code by Michael Jackson (https://github.com/mjijackson)</p>
</div>
<h5>Parameters:</h5>
<table class="params table table-striped">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Argument</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>r</code></td>
<td class="type">
<span class="param-type">number</span>
</td>
<td class="attributes">
</td>
<td class="description last"><p>The red color component, in the range 0 - 255.</p></td>
</tr>
<tr>
<td class="name"><code>g</code></td>
<td class="type">
<span class="param-type">number</span>
</td>
<td class="attributes">
</td>
<td class="description last"><p>The green color component, in the range 0 - 255.</p></td>
</tr>
<tr>
<td class="name"><code>b</code></td>
<td class="type">
<span class="param-type">number</span>
</td>
<td class="attributes">
</td>
<td class="description last"><p>The blue color component, in the range 0 - 255.</p></td>
</tr>
<tr>
<td class="name"><code>out</code></td>
<td class="type">
<span class="param-type">object</span>
</td>
<td class="attributes">
&lt;optional><br>
</td>
<td class="description last"><p>An object into which 3 properties will be created, h, s and l. If not provided a new object will be created.</p></td>
</tr>
</tbody>
</table>
<h5>Returns:</h5>
<div class="returns">
<div class="returns-type">
<span class="param-type">object</span>
-
</div>
<div class="returns-desc param-desc">
<p>An object with the hue, saturation and lightness values set in the h, s and l properties.</p>
</div>
</div>
<dl class="details">
<dt class="tag-source">Source -
<a href="src_utils_Color.js.html">utils/Color.js</a>, <a href="src_utils_Color.js.html#sunlight-1-line-144">line 144</a>
</dt>
</dl>
</dd>
<dt>
<h4 class="name "
id=".RGBtoHSV"><span class="type-signature">&lt;static> </span>RGBtoHSV<span class="signature">(r, g, b, <span class="optional">out</span>)</span><span class="type-signature"> &rarr; {object}</span></h4>
</dt>
<dd>
<div class="description">
<p>Converts an RGB color value to HSV (hue, saturation and value).
Conversion forumla from http://en.wikipedia.org/wiki/HSL_color_space.
Assumes RGB values are contained in the set [0, 255] and returns h, s and v in the set [0, 1].
Based on code by Michael Jackson (https://github.com/mjijackson)</p>
</div>
<h5>Parameters:</h5>
<table class="params table table-striped">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Argument</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>r</code></td>
<td class="type">
<span class="param-type">number</span>
</td>
<td class="attributes">
</td>
<td class="description last"><p>The red color component, in the range 0 - 255.</p></td>
</tr>
<tr>
<td class="name"><code>g</code></td>
<td class="type">
<span class="param-type">number</span>
</td>
<td class="attributes">
</td>
<td class="description last"><p>The green color component, in the range 0 - 255.</p></td>
</tr>
<tr>
<td class="name"><code>b</code></td>
<td class="type">
<span class="param-type">number</span>
</td>
<td class="attributes">
</td>
<td class="description last"><p>The blue color component, in the range 0 - 255.</p></td>
</tr>
<tr>
<td class="name"><code>out</code></td>
<td class="type">
<span class="param-type">object</span>
</td>
<td class="attributes">
&lt;optional><br>
</td>
<td class="description last"><p>An object into which 3 properties will be created, h, s and v. If not provided a new object will be created.</p></td>
</tr>
</tbody>
</table>
<h5>Returns:</h5>
<div class="returns">
<div class="returns-type">
<span class="param-type">object</span>
-
</div>
<div class="returns-desc param-desc">
<p>An object with the hue, saturation and value set in the h, s and v properties.</p>
</div>
</div>
<dl class="details">
<dt class="tag-source">Source -
<a href="src_utils_Color.js.html">utils/Color.js</a>, <a href="src_utils_Color.js.html#sunlight-1-line-254">line 254</a>
</dt>
</dl>
</dd>
<dt>
<h4 class="name "
id=".RGBtoString"><span class="type-signature">&lt;static> </span>RGBtoString<span class="signature">(r, g, b, <span class="optional">a</span>, <span class="optional">prefix</span>)</span><span class="type-signature"> &rarr; {string}</span></h4>
</dt>
<dd>
<div class="description">
<p>Converts the given color values into a string.
If prefix was '#' it will be in the format <code>#RRGGBB</code> otherwise <code>0xAARRGGBB</code>.</p>
</div>
<h5>Parameters:</h5>
<table class="params table table-striped">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Argument</th>
<th>Default</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>r</code></td>
<td class="type">
<span class="param-type">number</span>
</td>
<td class="attributes">
</td>
<td class="default">
</td>
<td class="description last"><p>The red color component, in the range 0 - 255.</p></td>
</tr>
<tr>
<td class="name"><code>g</code></td>
<td class="type">
<span class="param-type">number</span>
</td>
<td class="attributes">
</td>
<td class="default">
</td>
<td class="description last"><p>The green color component, in the range 0 - 255.</p></td>
</tr>
<tr>
<td class="name"><code>b</code></td>
<td class="type">
<span class="param-type">number</span>
</td>
<td class="attributes">
</td>
<td class="default">
</td>
<td class="description last"><p>The blue color component, in the range 0 - 255.</p></td>
</tr>
<tr>
<td class="name"><code>a</code></td>
<td class="type">
<span class="param-type">number</span>
</td>
<td class="attributes">
&lt;optional><br>
</td>
<td class="default">
255
</td>
<td class="description last"><p>The alpha color component, in the range 0 - 255.</p></td>
</tr>
<tr>
<td class="name"><code>prefix</code></td>
<td class="type">
<span class="param-type">string</span>
</td>
<td class="attributes">
&lt;optional><br>
</td>
<td class="default">
'#'
</td>
<td class="description last"><p>The prefix used in the return string. If '#' it will return <code>#RRGGBB</code>, else <code>0xAARRGGBB</code>.</p></td>
</tr>
</tbody>
</table>
<h5>Returns:</h5>
<div class="returns">
<div class="returns-type">
<span class="param-type">string</span>
-
</div>
<div class="returns-desc param-desc">
<p>A string containing the color values. If prefix was '#' it will be in the format <code>#RRGGBB</code> otherwise <code>0xAARRGGBB</code>.</p>
</div>
</div>
<dl class="details">
<dt class="tag-source">Source -
<a href="src_utils_Color.js.html">utils/Color.js</a>, <a href="src_utils_Color.js.html#sunlight-1-line-499">line 499</a>
</dt>
</dl>
</dd>
<dt>
<h4 class="name "
id=".toRGBA"><span class="type-signature">&lt;static> </span>toRGBA<span class="signature">(r, g, b, a)</span><span class="type-signature"> &rarr; {number}</span></h4>
</dt>
<dd>
<div class="description">
<p>A utility to convert RGBA components to a 32 bit integer in RRGGBBAA format.</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>r</code></td>
<td class="type">
<span class="param-type">number</span>
</td>
<td class="description last"><p>The red color component, in the range 0 - 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 component, in the range 0 - 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 component, in the range 0 - 255.</p></td>
</tr>
<tr>
<td class="name"><code>a</code></td>
<td class="type">
<span class="param-type">number</span>
</td>
<td class="description last"><p>The alpha color component, in the range 0 - 255.</p></td>
</tr>
</tbody>
</table>
<h5>Returns:</h5>
<div class="returns">
<div class="returns-type">
<span class="param-type">number</span>
-
</div>
<div class="returns-desc param-desc">
<p>A RGBA-packed 32 bit integer</p>
</div>
</div>
<dl class="details">
<dt class="tag-author">Author:</dt>
<dd class="tag-author">
<ul>
<li>Matt DesLauriers (@mattdesl)</li>
</ul>
</dd>
<dt class="tag-source">Source -
<a href="src_utils_Color.js.html">utils/Color.js</a>, <a href="src_utils_Color.js.html#sunlight-1-line-126">line 126</a>
</dt>
</dl>
</dd>
<dt>
<h4 class="name "
id=".unpackPixel"><span class="type-signature">&lt;static> </span>unpackPixel<span class="signature">(rgba, <span class="optional">out</span>, <span class="optional">hsl</span>, <span class="optional">hsv</span>)</span><span class="type-signature"> &rarr; {object}</span></h4>
</dt>
<dd>
<div class="description">
<p>Unpacks the r, g, b, a components into the specified color object, or a new
object, for use with Int32Array. If little endian, then ABGR order is used when
unpacking, otherwise, RGBA order is used. The resulting color object has the
<code>r, g, b, a</code> properties which are unrelated to endianness.</p>
<p>Note that the integer is assumed to be packed in the correct endianness. On little-endian
the format is 0xAABBGGRR and on big-endian the format is 0xRRGGBBAA. If you want a
endian-independent method, use fromRGBA(rgba) and toRGBA(r, g, b, a).</p>
</div>
<h5>Parameters:</h5>
<table class="params table table-striped">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Argument</th>
<th>Default</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>rgba</code></td>
<td class="type">
<span class="param-type">number</span>
</td>
<td class="attributes">
</td>
<td class="default">
</td>
<td class="description last"><p>The integer, packed in endian order by packPixel.</p></td>
</tr>
<tr>
<td class="name"><code>out</code></td>
<td class="type">
<span class="param-type">object</span>
</td>
<td class="attributes">
&lt;optional><br>
</td>
<td class="default">
</td>
<td class="description last"><p>An object into which 3 properties will be created: r, g and b. If not provided a new object will be created.</p></td>
</tr>
<tr>
<td class="name"><code>hsl</code></td>
<td class="type">
<span class="param-type">boolean</span>
</td>
<td class="attributes">
&lt;optional><br>
</td>
<td class="default">
false
</td>
<td class="description last"><p>Also convert the rgb values into hsl?</p></td>
</tr>
<tr>
<td class="name"><code>hsv</code></td>
<td class="type">
<span class="param-type">boolean</span>
</td>
<td class="attributes">
&lt;optional><br>
</td>
<td class="default">
false
</td>
<td class="description last"><p>Also convert the rgb values into hsv?</p></td>
</tr>
</tbody>
</table>
<h5>Returns:</h5>
<div class="returns">
<div class="returns-type">
<span class="param-type">object</span>
-
</div>
<div class="returns-desc param-desc">
<p>An object with the red, green and blue values set in the r, g and b properties.</p>
</div>
</div>
<dl class="details">
<dt class="tag-author">Author:</dt>
<dd class="tag-author">
<ul>
<li>Matt DesLauriers (@mattdesl)</li>
</ul>
</dd>
<dt class="tag-source">Source -
<a href="src_utils_Color.js.html">utils/Color.js</a>, <a href="src_utils_Color.js.html#sunlight-1-line-40">line 40</a>
</dt>
</dl>
</dd>
<dt>
<h4 class="name "
id=".updateColor"><span class="type-signature">&lt;static> </span>updateColor<span class="signature">(out)</span><span class="type-signature"> &rarr; {number}</span></h4>
</dt>
<dd>
<div class="description">
<p>Takes a color object and updates the rgba property.</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>out</code></td>
<td class="type">
<span class="param-type">object</span>
</td>
<td class="description last"><p>The color object to update.</p></td>
</tr>
</tbody>
</table>
<h5>Returns:</h5>
<div class="returns">
<div class="returns-type">
<span class="param-type">number</span>
-
</div>
<div class="returns-desc param-desc">
<p>A native color value integer (format: 0xAARRGGBB).</p>
</div>
</div>
<dl class="details">
<dt class="tag-source">Source -
<a href="src_utils_Color.js.html">utils/Color.js</a>, <a href="src_utils_Color.js.html#sunlight-1-line-448">line 448</a>
</dt>
</dl>
</dd>
<dt>
<h4 class="name "
id=".valueToColor"><span class="type-signature">&lt;static> </span>valueToColor<span class="signature">(value, <span class="optional">out</span>)</span><span class="type-signature"> &rarr; {object}</span></h4>
</dt>
<dd>
<div class="description">
<p>Converts a value - a &quot;hex&quot; string, a &quot;CSS 'web' string&quot;, or a number - into red, green, blue, and alpha components.</p>
<p>The value can be a string (see <code>hexToColor</code> and <code>webToColor</code> for the supported formats) or a packed integer (see <code>getRGB</code>).</p>
<p>An alpha channel is <em>not</em> supported when specifying a hex string.</p>
</div>
<h5>Parameters:</h5>
<table class="params table table-striped">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Argument</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>value</code></td>
<td class="type">
<span class="param-type">string</span>
|
<span class="param-type">number</span>
</td>
<td class="attributes">
</td>
<td class="description last"><p>The color expressed as a recognized string format or a packed integer.</p></td>
</tr>
<tr>
<td class="name"><code>out</code></td>
<td class="type">
<span class="param-type">object</span>
</td>
<td class="attributes">
&lt;optional><br>
</td>
<td class="description last"><p>The object to use for the output. If not provided a new object will be created.</p></td>
</tr>
</tbody>
</table>
<h5>Returns:</h5>
<div class="returns">
<div class="returns-type">
<span class="param-type">object</span>
-
</div>
<div class="returns-desc param-desc">
<p>The (<code>out</code>) object with the red, green, blue, and alpha values set as the r/g/b/a properties.</p>
</div>
</div>
<dl class="details">
<dt class="tag-source">Source -
<a href="src_utils_Color.js.html">utils/Color.js</a>, <a href="src_utils_Color.js.html#sunlight-1-line-624">line 624</a>
</dt>
</dl>
</dd>
<dt>
<h4 class="name "
id=".webToColor"><span class="type-signature">&lt;static> </span>webToColor<span class="signature">(web, <span class="optional">out</span>)</span><span class="type-signature"> &rarr; {object}</span></h4>
</dt>
<dd>
<div class="description">
<p>Converts a CSS 'web' string into a Phaser Color object.</p>
<p>The web string can be in the format <code>'rgb(r,g,b)'</code> or <code>'rgba(r,g,b,a)'</code> where r/g/b are in the range [0..255] and a is in the range [0..1].</p>
</div>
<h5>Parameters:</h5>
<table class="params table table-striped">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Argument</th>
<th class="last">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name"><code>web</code></td>
<td class="type">
<span class="param-type">string</span>
</td>
<td class="attributes">
</td>
<td class="description last"><p>The color string in CSS 'web' format.</p></td>
</tr>
<tr>
<td class="name"><code>out</code></td>
<td class="type">
<span class="param-type">object</span>
</td>
<td class="attributes">
&lt;optional><br>
</td>
<td class="description last"><p>An object into which 4 properties will be created: r, g, b and a. If not provided a new object will be created.</p></td>
</tr>
</tbody>
</table>
<h5>Returns:</h5>
<div class="returns">
<div class="returns-type">
<span class="param-type">object</span>
-
</div>
<div class="returns-desc param-desc">
<p>An object with the red, green, blue and alpha values set in the r, g, b and a properties.</p>
</div>
</div>
<dl class="details">
<dt class="tag-source">Source -
<a href="src_utils_Color.js.html">utils/Color.js</a>, <a href="src_utils_Color.js.html#sunlight-1-line-591">line 591</a>
</dt>
</dl>
</dd>
</dl>
</article>
</section>
</div>
<div class="clearfix"></div>
<footer>
<span class="copyright">
Phaser Copyright © 2012-2015 Photon Storm Ltd.
</span>
<br />
<span class="jsdoc-message">
Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.3.2</a>
on Mon Aug 24 2015 15:36:47 GMT+0100 (GMT Daylight Time) 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