docs/Phaser.Camera.html

<!DOCTYPE html>

<html lang="en">
<head>
	<meta charset="utf-8">
	<title>Phaser Class: Camera</title>

	<!--[if lt IE 9]>
	<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
	<![endif]-->
	<link type="text/css" rel="stylesheet" href="styles/sunlight.default.css">

	
	<link type="text/css" rel="stylesheet" href="styles/site.cerulean.css">
	
</head>

<body>
<div class="container-fluid">
	<div class="navbar navbar-fixed-top navbar-inverse">
		<div class="navbar-inner">
			<a class="brand" href="index.html">Phaser</a>
			<ul class="nav">
				
				<li class="dropdown">
					<a href="namespaces.list.html" class="dropdown-toggle" data-toggle="dropdown">Namespaces<b
						class="caret"></b></a>

					<ul class="dropdown-menu ">
						
						<li>
							<a href="Phaser.html">Phaser</a>
						</li>
						

					</ul>
				</li>
				
				<li class="dropdown">
					<a href="classes.list.html" class="dropdown-toggle" data-toggle="dropdown">Classes<b
						class="caret"></b></a>

					<ul class="dropdown-menu ">
						
						<li>
							<a href="Phaser.Animation.html">Animation</a>
						</li>
						
						<li>
							<a href="Phaser.AnimationManager.html">AnimationManager</a>
						</li>
						
						<li>
							<a href="Phaser.AnimationParser.html">AnimationParser</a>
						</li>
						
						<li>
							<a href="Phaser.BitmapData.html">BitmapData</a>
						</li>
						
						<li>
							<a href="Phaser.BitmapText.html">BitmapText</a>
						</li>
						
						<li>
							<a href="Phaser.Button.html">Button</a>
						</li>
						
						<li>
							<a href="Phaser.Cache.html">Cache</a>
						</li>
						
						<li>
							<a href="Phaser.Camera.html">Camera</a>
						</li>
						
						<li>
							<a href="Phaser.Canvas.html">Canvas</a>
						</li>
						
						<li>
							<a href="Phaser.Circle.html">Circle</a>
						</li>
						
						<li>
							<a href="Phaser.Color.html">Color</a>
						</li>
						
						<li>
							<a href="Phaser.Device.html">Device</a>
						</li>
						
						<li>
							<a href="Phaser.Easing.html">Easing</a>
						</li>
						
						<li>
							<a href="Phaser.Easing.Back.html">Back</a>
						</li>
						
						<li>
							<a href="Phaser.Easing.Bounce.html">Bounce</a>
						</li>
						
						<li>
							<a href="Phaser.Easing.Circular.html">Circular</a>
						</li>
						
						<li>
							<a href="Phaser.Easing.Cubic.html">Cubic</a>
						</li>
						
						<li>
							<a href="Phaser.Easing.Elastic.html">Elastic</a>
						</li>
						
						<li>
							<a href="Phaser.Easing.Exponential.html">Exponential</a>
						</li>
						
						<li>
							<a href="Phaser.Easing.Linear.html">Linear</a>
						</li>
						
						<li>
							<a href="Phaser.Easing.Quadratic.html">Quadratic</a>
						</li>
						
						<li>
							<a href="Phaser.Easing.Quartic.html">Quartic</a>
						</li>
						
						<li>
							<a href="Phaser.Easing.Quintic.html">Quintic</a>
						</li>
						
						<li>
							<a href="Phaser.Easing.Sinusoidal.html">Sinusoidal</a>
						</li>
						
						<li>
							<a href="Phaser.Ellipse.html">Ellipse</a>
						</li>
						
						<li>
							<a href="Phaser.Events.html">Events</a>
						</li>
						
						<li>
							<a href="Phaser.Filter.html">Filter</a>
						</li>
						
						<li>
							<a href="Phaser.Frame.html">Frame</a>
						</li>
						
						<li>
							<a href="Phaser.FrameData.html">FrameData</a>
						</li>
						
						<li>
							<a href="Phaser.Game.html">Game</a>
						</li>
						
						<li>
							<a href="Phaser.GameObjectCreator.html">GameObjectCreator</a>
						</li>
						
						<li>
							<a href="Phaser.GameObjectFactory.html">GameObjectFactory</a>
						</li>
						
						<li>
							<a href="Phaser.Gamepad.html">Gamepad</a>
						</li>
						
						<li>
							<a href="Phaser.GamepadButton.html">GamepadButton</a>
						</li>
						
						<li>
							<a href="Phaser.Graphics.html">Graphics</a>
						</li>
						
						<li>
							<a href="Phaser.Group.html">Group</a>
						</li>
						
						<li>
							<a href="Phaser.Image.html">Image</a>
						</li>
						
						<li>
							<a href="Phaser.Input.html">Input</a>
						</li>
						
						<li>
							<a href="Phaser.InputHandler.html">InputHandler</a>
						</li>
						
						<li>
							<a href="Phaser.Key.html">Key</a>
						</li>
						
						<li>
							<a href="Phaser.Keyboard.html">Keyboard</a>
						</li>
						
						<li>
							<a href="Phaser.Line.html">Line</a>
						</li>
						
						<li>
							<a href="Phaser.LinkedList.html">LinkedList</a>
						</li>
						
						<li>
							<a href="Phaser.Loader.html">Loader</a>
						</li>
						
						<li>
							<a href="Phaser.LoaderParser.html">LoaderParser</a>
						</li>
						
						<li>
							<a href="Phaser.Math.html">Math</a>
						</li>
						
						<li>
							<a href="Phaser.Mouse.html">Mouse</a>
						</li>
						
						<li>
							<a href="Phaser.MSPointer.html">MSPointer</a>
						</li>
						
						<li>
							<a href="Phaser.Net.html">Net</a>
						</li>
						
						<li>
							<a href="Phaser.Particles.html">Particles</a>
						</li>
						
						<li>
							<a href="Phaser.Particles.Arcade.Emitter.html">Emitter</a>
						</li>
						
						<li>
							<a href="Phaser.Physics.html">Physics</a>
						</li>
						
						<li>
							<a href="Phaser.Physics.Arcade.html">Arcade</a>
						</li>
						
						<li>
							<a href="Phaser.Physics.Arcade.Body.html">Body</a>
						</li>
						
						<li>
							<a href="Phaser.Physics.Ninja.html">Ninja</a>
						</li>
						
						<li>
							<a href="Phaser.Physics.Ninja.AABB.html">AABB</a>
						</li>
						
						<li>
							<a href="Phaser.Physics.Ninja.Body.html">Body</a>
						</li>
						
						<li>
							<a href="Phaser.Physics.Ninja.Circle.html">Circle</a>
						</li>
						
						<li>
							<a href="Phaser.Physics.Ninja.Tile.html">Tile</a>
						</li>
						
						<li>
							<a href="Phaser.Physics.P2.html">P2</a>
						</li>
						
						<li>
							<a href="Phaser.Physics.P2.Body.html">Body</a>
						</li>
						
						<li>
							<a href="Phaser.Physics.P2.BodyDebug.html">BodyDebug</a>
						</li>
						
						<li>
							<a href="Phaser.Physics.P2.CollisionGroup.html">CollisionGroup</a>
						</li>
						
						<li>
							<a href="Phaser.Physics.P2.ContactMaterial.html">ContactMaterial</a>
						</li>
						
						<li>
							<a href="Phaser.Physics.P2.DistanceConstraint.html">DistanceConstraint</a>
						</li>
						
						<li>
							<a href="Phaser.Physics.P2.GearConstraint.html">GearConstraint</a>
						</li>
						
						<li>
							<a href="Phaser.Physics.P2.InversePointProxy.html">InversePointProxy</a>
						</li>
						
						<li>
							<a href="Phaser.Physics.P2.LockConstraint.html">LockConstraint</a>
						</li>
						
						<li>
							<a href="Phaser.Physics.P2.Material.html">Material</a>
						</li>
						
						<li>
							<a href="Phaser.Physics.P2.PointProxy.html">PointProxy</a>
						</li>
						
						<li>
							<a href="Phaser.Physics.P2.PrismaticConstraint.html">PrismaticConstraint</a>
						</li>
						
						<li>
							<a href="Phaser.Physics.P2.RevoluteConstraint.html">RevoluteConstraint</a>
						</li>
						
						<li>
							<a href="Phaser.Physics.P2.Spring.html">Spring</a>
						</li>
						
						<li>
							<a href="Phaser.Plugin.html">Plugin</a>
						</li>
						
						<li>
							<a href="Phaser.PluginManager.html">PluginManager</a>
						</li>
						
						<li>
							<a href="Phaser.Point.html">Point</a>
						</li>
						
						<li>
							<a href="Phaser.Pointer.html">Pointer</a>
						</li>
						
						<li>
							<a href="Phaser.Polygon.html">Polygon</a>
						</li>
						
						<li>
							<a href="Phaser.QuadTree.html">QuadTree</a>
						</li>
						
						<li>
							<a href="Phaser.RandomDataGenerator.html">RandomDataGenerator</a>
						</li>
						
						<li>
							<a href="Phaser.Rectangle.html">Rectangle</a>
						</li>
						
						<li>
							<a href="Phaser.RenderTexture.html">RenderTexture</a>
						</li>
						
						<li>
							<a href="Phaser.RequestAnimationFrame.html">RequestAnimationFrame</a>
						</li>
						
						<li>
							<a href="Phaser.RetroFont.html">RetroFont</a>
						</li>
						
						<li>
							<a href="Phaser.ScaleManager.html">ScaleManager</a>
						</li>
						
						<li>
							<a href="Phaser.Signal.html">Signal</a>
						</li>
						
						<li>
							<a href="Phaser.SinglePad.html">SinglePad</a>
						</li>
						
						<li>
							<a href="Phaser.Sound.html">Sound</a>
						</li>
						
						<li>
							<a href="Phaser.SoundManager.html">SoundManager</a>
						</li>
						
						<li>
							<a href="Phaser.Sprite.html">Sprite</a>
						</li>
						
						<li>
							<a href="Phaser.SpriteBatch.html">SpriteBatch</a>
						</li>
						
						<li>
							<a href="Phaser.Stage.html">Stage</a>
						</li>
						
						<li>
							<a href="Phaser.State.html">State</a>
						</li>
						
						<li>
							<a href="Phaser.StateManager.html">StateManager</a>
						</li>
						
						<li>
							<a href="Phaser.Text.html">Text</a>
						</li>
						
						<li>
							<a href="Phaser.Tile.html">Tile</a>
						</li>
						
						<li>
							<a href="Phaser.Tilemap.html">Tilemap</a>
						</li>
						
						<li>
							<a href="Phaser.TilemapLayer.html">TilemapLayer</a>
						</li>
						
						<li>
							<a href="Phaser.TilemapParser.html">TilemapParser</a>
						</li>
						
						<li>
							<a href="Phaser.Tileset.html">Tileset</a>
						</li>
						
						<li>
							<a href="Phaser.TileSprite.html">TileSprite</a>
						</li>
						
						<li>
							<a href="Phaser.Time.html">Time</a>
						</li>
						
						<li>
							<a href="Phaser.Timer.html">Timer</a>
						</li>
						
						<li>
							<a href="Phaser.TimerEvent.html">TimerEvent</a>
						</li>
						
						<li>
							<a href="Phaser.Touch.html">Touch</a>
						</li>
						
						<li>
							<a href="Phaser.Tween.html">Tween</a>
						</li>
						
						<li>
							<a href="Phaser.TweenManager.html">TweenManager</a>
						</li>
						
						<li>
							<a href="Phaser.Utils.html">Utils</a>
						</li>
						
						<li>
							<a href="Phaser.Utils.Debug.html">Debug</a>
						</li>
						
						<li>
							<a href="Phaser.World.html">World</a>
						</li>
						
						<li>
							<a href="SignalBinding.html">SignalBinding</a>
						</li>
						

					</ul>
				</li>
				
			</ul>
		</div>
	</div>

	<div class="row-fluid">

		
		<div class="span8">
			
				<div id="main">
					

	<h1 class="page-title">Class: Camera</h1>
<section>

<header>
    <h2>
        <span class="ancestors"><a href="Phaser.html">Phaser</a>.</span>
    
    Camera
    </h2>
    
        <div class="class-description"><p>Phaser.Camera</p></div>
    
</header>

<article>
    <div class="container-overview">
    

<dt>
    <h4 class="name" id="Camera"><span class="type-signature"></span>new Camera<span class="signature">(game, id, x, y, width, height)</span><span class="type-signature"></span></h4>
    
    
</dt>
<dd>
    
    
    <div class="description">
        <p>A Camera is your view into the game world. It has a position and size and renders only those objects within its field of view.
The game automatically creates a single Stage sized camera on boot. Move the camera around the world with Phaser.Camera.x/y</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>game</code></td>
            

            <td class="type">
            
                
<span class="param-type"><a href="Phaser.Game.html">Phaser.Game</a></span>


            </td>

            
            <td class="description last"><p>Game reference to the currently running game.</p></td>
        </tr>

	
        <tr>
            
                <td class="name"><code>id</code></td>
            

            <td class="type">
            
                
<span class="param-type">number</span>


            </td>

            
            <td class="description last"><p>Not being used at the moment, will be when Phaser supports multiple camera</p></td>
        </tr>

	
        <tr>
            
                <td class="name"><code>x</code></td>
            

            <td class="type">
            
                
<span class="param-type">number</span>


            </td>

            
            <td class="description last"><p>Position of the camera on the X axis</p></td>
        </tr>

	
        <tr>
            
                <td class="name"><code>y</code></td>
            

            <td class="type">
            
                
<span class="param-type">number</span>


            </td>

            
            <td class="description last"><p>Position of the camera on the Y axis</p></td>
        </tr>

	
        <tr>
            
                <td class="name"><code>width</code></td>
            

            <td class="type">
            
                
<span class="param-type">number</span>


            </td>

            
            <td class="description last"><p>The width of the view rectangle</p></td>
        </tr>

	
        <tr>
            
                <td class="name"><code>height</code></td>
            

            <td class="type">
            
                
<span class="param-type">number</span>


            </td>

            
            <td class="description last"><p>The height of the view rectangle</p></td>
        </tr>

	
	</tbody>
</table>

    
<dl class="details">
    

    <dt class="tag-source">Source:</dt>
    <dd class="tag-source"><ul class="dummy"><li>
        <a href="Camera.js.html">core/Camera.js</a>, <a href="Camera.js.html#sunlight-1-line-20">line 20</a>
    </li></ul></dd>
    

</dl>

    
</dd>

    
    </div>

    
        <h3 class="subsection-title">Members</h3>

        <dl>
            
<dt>
    <h4 class="name" id="FOLLOW_LOCKON"><span class="type-signature">&lt;static, constant> </span>FOLLOW_LOCKON<span class="type-signature"> :number</span></h4>
    
    
</dt>
<dd>
    
    
        <h5>Type:</h5>
        <ul>
            <li>
                
<span class="param-type">number</span>


            </li>
        </ul>
    

<dl class="details">
    

    <dt class="tag-source">Source:</dt>
    <dd class="tag-source"><ul class="dummy"><li>
        <a href="Camera.js.html">core/Camera.js</a>, <a href="Camera.js.html#sunlight-1-line-105">line 105</a>
    </li></ul></dd>
    

</dl>

    
</dd>

        
<dt>
    <h4 class="name" id="FOLLOW_PLATFORMER"><span class="type-signature">&lt;static, constant> </span>FOLLOW_PLATFORMER<span class="type-signature"> :number</span></h4>
    
    
</dt>
<dd>
    
    
        <h5>Type:</h5>
        <ul>
            <li>
                
<span class="param-type">number</span>


            </li>
        </ul>
    

<dl class="details">
    

    <dt class="tag-source">Source:</dt>
    <dd class="tag-source"><ul class="dummy"><li>
        <a href="Camera.js.html">core/Camera.js</a>, <a href="Camera.js.html#sunlight-1-line-111">line 111</a>
    </li></ul></dd>
    

</dl>

    
</dd>

        
<dt>
    <h4 class="name" id="FOLLOW_TOPDOWN"><span class="type-signature">&lt;static, constant> </span>FOLLOW_TOPDOWN<span class="type-signature"> :number</span></h4>
    
    
</dt>
<dd>
    
    
        <h5>Type:</h5>
        <ul>
            <li>
                
<span class="param-type">number</span>


            </li>
        </ul>
    

<dl class="details">
    

    <dt class="tag-source">Source:</dt>
    <dd class="tag-source"><ul class="dummy"><li>
        <a href="Camera.js.html">core/Camera.js</a>, <a href="Camera.js.html#sunlight-1-line-117">line 117</a>
    </li></ul></dd>
    

</dl>

    
</dd>

        
<dt>
    <h4 class="name" id="FOLLOW_TOPDOWN_TIGHT"><span class="type-signature">&lt;static, constant> </span>FOLLOW_TOPDOWN_TIGHT<span class="type-signature"> :number</span></h4>
    
    
</dt>
<dd>
    
    
        <h5>Type:</h5>
        <ul>
            <li>
                
<span class="param-type">number</span>


            </li>
        </ul>
    

<dl class="details">
    

    <dt class="tag-source">Source:</dt>
    <dd class="tag-source"><ul class="dummy"><li>
        <a href="Camera.js.html">core/Camera.js</a>, <a href="Camera.js.html#sunlight-1-line-123">line 123</a>
    </li></ul></dd>
    

</dl>

    
</dd>

        
<dt>
    <h4 class="name" id="atLimit"><span class="type-signature"></span>atLimit<span class="type-signature"></span></h4>
    
    
</dt>
<dd>
    
    
<dl class="details">
    

        <h5 class="subsection-title">Properties:</h5>

        <dl>

<table class="props table table-striped">
    <thead>
	<tr>
		
		<th>Name</th>
		

		<th>Type</th>

		
		<th class="last">Description</th>
	</tr>
	</thead>

	<tbody>
	

        <tr>
            
                <td class="name"><code>atLimit</code></td>
            

            <td class="type">
            
                
<span class="param-type">boolean</span>


            </td>

            
            <td class="description last"><p>Whether this camera is flush with the World Bounds or not.</p></td>
        </tr>

	
	</tbody>
</table>
</dl>

    
    <dt class="tag-source">Source:</dt>
    <dd class="tag-source"><ul class="dummy"><li>
        <a href="Camera.js.html">core/Camera.js</a>, <a href="Camera.js.html#sunlight-1-line-74">line 74</a>
    </li></ul></dd>
    

</dl>

    
</dd>

        
<dt>
    <h4 class="name" id="bounds"><span class="type-signature"></span>bounds<span class="type-signature"></span></h4>
    
    
</dt>
<dd>
    
    <div class="description">
        <p>The Camera is bound to this Rectangle and cannot move outside of it. By default it is enabled and set to the size of the World.
The Rectangle can be located anywhere in the world and updated as often as you like. If you don't wish the Camera to be bound
at all then set this to null. The values can be anything and are in World coordinates, with 0,0 being the center of the world.</p>
    </div>
    
    
<dl class="details">
    

        <h5 class="subsection-title">Properties:</h5>

        <dl>

<table class="props table table-striped">
    <thead>
	<tr>
		
		<th>Name</th>
		

		<th>Type</th>

		
		<th class="last">Description</th>
	</tr>
	</thead>

	<tbody>
	

        <tr>
            
                <td class="name"><code>bounds</code></td>
            

            <td class="type">
            
                
<span class="param-type"><a href="Phaser.Rectangle.html">Phaser.Rectangle</a></span>


            </td>

            
            <td class="description last"><p>The Rectangle in which the Camera is bounded. Set to null to allow for movement anywhere.</p></td>
        </tr>

	
	</tbody>
</table>
</dl>

    
    <dt class="tag-source">Source:</dt>
    <dd class="tag-source"><ul class="dummy"><li>
        <a href="Camera.js.html">core/Camera.js</a>, <a href="Camera.js.html#sunlight-1-line-58">line 58</a>
    </li></ul></dd>
    

</dl>

    
</dd>

        
<dt>
    <h4 class="name" id="deadzone"><span class="type-signature"></span>deadzone<span class="type-signature"></span></h4>
    
    
</dt>
<dd>
    
    
<dl class="details">
    

        <h5 class="subsection-title">Properties:</h5>

        <dl>

<table class="props table table-striped">
    <thead>
	<tr>
		
		<th>Name</th>
		

		<th>Type</th>

		
		<th class="last">Description</th>
	</tr>
	</thead>

	<tbody>
	

        <tr>
            
                <td class="name"><code>deadzone</code></td>
            

            <td class="type">
            
                
<span class="param-type"><a href="Phaser.Rectangle.html">Phaser.Rectangle</a></span>


            </td>

            
            <td class="description last"><p>Moving inside this Rectangle will not cause camera moving.</p></td>
        </tr>

	
	</tbody>
</table>
</dl>

    
    <dt class="tag-source">Source:</dt>
    <dd class="tag-source"><ul class="dummy"><li>
        <a href="Camera.js.html">core/Camera.js</a>, <a href="Camera.js.html#sunlight-1-line-63">line 63</a>
    </li></ul></dd>
    

</dl>

    
</dd>

        
<dt>
    <h4 class="name" id="displayObject"><span class="type-signature"></span>displayObject<span class="type-signature"></span></h4>
    
    
</dt>
<dd>
    
    
<dl class="details">
    

        <h5 class="subsection-title">Properties:</h5>

        <dl>

<table class="props table table-striped">
    <thead>
	<tr>
		
		<th>Name</th>
		

		<th>Type</th>

		
		<th class="last">Description</th>
	</tr>
	</thead>

	<tbody>
	

        <tr>
            
                <td class="name"><code>displayObject</code></td>
            

            <td class="type">
            
                
<span class="param-type">PIXI.DisplayObject</span>


            </td>

            
            <td class="description last"><p>The display object to which all game objects are added. Set by World.boot</p></td>
        </tr>

	
	</tbody>
</table>
</dl>

    
    <dt class="tag-source">Source:</dt>
    <dd class="tag-source"><ul class="dummy"><li>
        <a href="Camera.js.html">core/Camera.js</a>, <a href="Camera.js.html#sunlight-1-line-92">line 92</a>
    </li></ul></dd>
    

</dl>

    
</dd>

        
<dt>
    <h4 class="name" id="game"><span class="type-signature"></span>game<span class="type-signature"></span></h4>
    
    
</dt>
<dd>
    
    
<dl class="details">
    

        <h5 class="subsection-title">Properties:</h5>

        <dl>

<table class="props table table-striped">
    <thead>
	<tr>
		
		<th>Name</th>
		

		<th>Type</th>

		
		<th class="last">Description</th>
	</tr>
	</thead>

	<tbody>
	

        <tr>
            
                <td class="name"><code>game</code></td>
            

            <td class="type">
            
                
<span class="param-type"><a href="Phaser.Game.html">Phaser.Game</a></span>


            </td>

            
            <td class="description last"><p>A reference to the currently running Game.</p></td>
        </tr>

	
	</tbody>
</table>
</dl>

    
    <dt class="tag-source">Source:</dt>
    <dd class="tag-source"><ul class="dummy"><li>
        <a href="Camera.js.html">core/Camera.js</a>, <a href="Camera.js.html#sunlight-1-line-25">line 25</a>
    </li></ul></dd>
    

</dl>

    
</dd>

        
<dt>
    <h4 class="name" id="height"><span class="type-signature"></span>height<span class="type-signature"></span></h4>
    
    
</dt>
<dd>
    
    <div class="description">
        <p>The Cameras height. By default this is the same as the Game size and should not be adjusted for now.</p>
    </div>
    
    
<dl class="details">
    

        <h5 class="subsection-title">Properties:</h5>

        <dl>

<table class="props table table-striped">
    <thead>
	<tr>
		
		<th>Name</th>
		

		<th>Type</th>

		
		<th class="last">Description</th>
	</tr>
	</thead>

	<tbody>
	

        <tr>
            
                <td class="name"><code>height</code></td>
            

            <td class="type">
            
                
<span class="param-type">number</span>


            </td>

            
            <td class="description last"><p>Gets or sets the cameras height.</p></td>
        </tr>

	
	</tbody>
</table>
</dl>

    
    <dt class="tag-source">Source:</dt>
    <dd class="tag-source"><ul class="dummy"><li>
        <a href="Camera.js.html">core/Camera.js</a>, <a href="Camera.js.html#sunlight-1-line-420">line 420</a>
    </li></ul></dd>
    

</dl>

    
</dd>

        
<dt>
    <h4 class="name" id="id"><span class="type-signature"></span>id<span class="type-signature"></span></h4>
    
    
</dt>
<dd>
    
    
<dl class="details">
    

        <h5 class="subsection-title">Properties:</h5>

        <dl>

<table class="props table table-striped">
    <thead>
	<tr>
		
		<th>Name</th>
		

		<th>Type</th>

		
		<th class="last">Description</th>
	</tr>
	</thead>

	<tbody>
	

        <tr>
            
                <td class="name"><code>id</code></td>
            

            <td class="type">
            
                
<span class="param-type">number</span>


            </td>

            
            <td class="description last"><p>Reserved for future multiple camera set-ups.</p></td>
        </tr>

	
	</tbody>
</table>
</dl>

    
    <dt class="tag-default">Default Value:</dt>
    <dd class="tag-default"><ul class="dummy"><li>0</li></ul></dd>
    

    <dt class="tag-source">Source:</dt>
    <dd class="tag-source"><ul class="dummy"><li>
        <a href="Camera.js.html">core/Camera.js</a>, <a href="Camera.js.html#sunlight-1-line-36">line 36</a>
    </li></ul></dd>
    

</dl>

    
</dd>

        
<dt>
    <h4 class="name" id="scale"><span class="type-signature"></span>scale<span class="type-signature"></span></h4>
    
    
</dt>
<dd>
    
    
<dl class="details">
    

        <h5 class="subsection-title">Properties:</h5>

        <dl>

<table class="props table table-striped">
    <thead>
	<tr>
		
		<th>Name</th>
		

		<th>Type</th>

		
		<th class="last">Description</th>
	</tr>
	</thead>

	<tbody>
	

        <tr>
            
                <td class="name"><code>scale</code></td>
            

            <td class="type">
            
                
<span class="param-type"><a href="Phaser.Point.html">Phaser.Point</a></span>


            </td>

            
            <td class="description last"><p>The scale of the display object to which all game objects are added. Set by World.boot</p></td>
        </tr>

	
	</tbody>
</table>
</dl>

    
    <dt class="tag-source">Source:</dt>
    <dd class="tag-source"><ul class="dummy"><li>
        <a href="Camera.js.html">core/Camera.js</a>, <a href="Camera.js.html#sunlight-1-line-97">line 97</a>
    </li></ul></dd>
    

</dl>

    
</dd>

        
<dt>
    <h4 class="name" id="screenView"><span class="type-signature"></span>screenView<span class="type-signature"></span></h4>
    
    
</dt>
<dd>
    
    
<dl class="details">
    

        <h5 class="subsection-title">Properties:</h5>

        <dl>

<table class="props table table-striped">
    <thead>
	<tr>
		
		<th>Name</th>
		

		<th>Type</th>

		
		<th class="last">Description</th>
	</tr>
	</thead>

	<tbody>
	

        <tr>
            
                <td class="name"><code>screenView</code></td>
            

            <td class="type">
            
                
<span class="param-type"><a href="Phaser.Rectangle.html">Phaser.Rectangle</a></span>


            </td>

            
            <td class="description last"><p>Used by Sprites to work out Camera culling.</p></td>
        </tr>

	
	</tbody>
</table>
</dl>

    
    <dt class="tag-source">Source:</dt>
    <dd class="tag-source"><ul class="dummy"><li>
        <a href="Camera.js.html">core/Camera.js</a>, <a href="Camera.js.html#sunlight-1-line-50">line 50</a>
    </li></ul></dd>
    

</dl>

    
</dd>

        
<dt>
    <h4 class="name" id="target"><span class="type-signature"></span>target<span class="type-signature"></span></h4>
    
    
</dt>
<dd>
    
    
<dl class="details">
    

        <h5 class="subsection-title">Properties:</h5>

        <dl>

<table class="props table table-striped">
    <thead>
	<tr>
		
		<th>Name</th>
		

		<th>Type</th>

		
		<th class="last">Description</th>
	</tr>
	</thead>

	<tbody>
	

        <tr>
            
                <td class="name"><code>target</code></td>
            

            <td class="type">
            
                
<span class="param-type"><a href="Phaser.Sprite.html">Phaser.Sprite</a></span>


            </td>

            
            <td class="description last"><p>If the camera is tracking a Sprite, this is a reference to it, otherwise null.</p></td>
        </tr>

	
	</tbody>
</table>
</dl>

    
    <dt class="tag-default">Default Value:</dt>
    <dd class="tag-default"><ul class="dummy"><li>null</li></ul></dd>
    

    <dt class="tag-source">Source:</dt>
    <dd class="tag-source"><ul class="dummy"><li>
        <a href="Camera.js.html">core/Camera.js</a>, <a href="Camera.js.html#sunlight-1-line-80">line 80</a>
    </li></ul></dd>
    

</dl>

    
</dd>

        
<dt>
    <h4 class="name" id="view"><span class="type-signature"></span>view<span class="type-signature"></span></h4>
    
    
</dt>
<dd>
    
    <div class="description">
        <p>Camera view.
The view into the world we wish to render (by default the game dimensions).
The x/y values are in world coordinates, not screen coordinates, the width/height is how many pixels to render.
Objects outside of this view are not rendered if set to camera cull.</p>
    </div>
    
    
<dl class="details">
    

        <h5 class="subsection-title">Properties:</h5>

        <dl>

<table class="props table table-striped">
    <thead>
	<tr>
		
		<th>Name</th>
		

		<th>Type</th>

		
		<th class="last">Description</th>
	</tr>
	</thead>

	<tbody>
	

        <tr>
            
                <td class="name"><code>view</code></td>
            

            <td class="type">
            
                
<span class="param-type"><a href="Phaser.Rectangle.html">Phaser.Rectangle</a></span>


            </td>

            
            <td class="description last"></td>
        </tr>

	
	</tbody>
</table>
</dl>

    
    <dt class="tag-source">Source:</dt>
    <dd class="tag-source"><ul class="dummy"><li>
        <a href="Camera.js.html">core/Camera.js</a>, <a href="Camera.js.html#sunlight-1-line-45">line 45</a>
    </li></ul></dd>
    

</dl>

    
</dd>

        
<dt>
    <h4 class="name" id="visible"><span class="type-signature"></span>visible<span class="type-signature"></span></h4>
    
    
</dt>
<dd>
    
    
<dl class="details">
    

        <h5 class="subsection-title">Properties:</h5>

        <dl>

<table class="props table table-striped">
    <thead>
	<tr>
		
		<th>Name</th>
		

		<th>Type</th>

		
		<th class="last">Description</th>
	</tr>
	</thead>

	<tbody>
	

        <tr>
            
                <td class="name"><code>visible</code></td>
            

            <td class="type">
            
                
<span class="param-type">boolean</span>


            </td>

            
            <td class="description last"><p>Whether this camera is visible or not.</p></td>
        </tr>

	
	</tbody>
</table>
</dl>

    
    <dt class="tag-default">Default Value:</dt>
    <dd class="tag-default"><ul class="dummy"><li>true</li></ul></dd>
    

    <dt class="tag-source">Source:</dt>
    <dd class="tag-source"><ul class="dummy"><li>
        <a href="Camera.js.html">core/Camera.js</a>, <a href="Camera.js.html#sunlight-1-line-69">line 69</a>
    </li></ul></dd>
    

</dl>

    
</dd>

        
<dt>
    <h4 class="name" id="width"><span class="type-signature"></span>width<span class="type-signature"></span></h4>
    
    
</dt>
<dd>
    
    <div class="description">
        <p>The Cameras width. By default this is the same as the Game size and should not be adjusted for now.</p>
    </div>
    
    
<dl class="details">
    

        <h5 class="subsection-title">Properties:</h5>

        <dl>

<table class="props table table-striped">
    <thead>
	<tr>
		
		<th>Name</th>
		

		<th>Type</th>

		
		<th class="last">Description</th>
	</tr>
	</thead>

	<tbody>
	

        <tr>
            
                <td class="name"><code>width</code></td>
            

            <td class="type">
            
                
<span class="param-type">number</span>


            </td>

            
            <td class="description last"><p>Gets or sets the cameras width.</p></td>
        </tr>

	
	</tbody>
</table>
</dl>

    
    <dt class="tag-source">Source:</dt>
    <dd class="tag-source"><ul class="dummy"><li>
        <a href="Camera.js.html">core/Camera.js</a>, <a href="Camera.js.html#sunlight-1-line-403">line 403</a>
    </li></ul></dd>
    

</dl>

    
</dd>

        
<dt>
    <h4 class="name" id="world"><span class="type-signature"></span>world<span class="type-signature"></span></h4>
    
    
</dt>
<dd>
    
    
<dl class="details">
    

        <h5 class="subsection-title">Properties:</h5>

        <dl>

<table class="props table table-striped">
    <thead>
	<tr>
		
		<th>Name</th>
		

		<th>Type</th>

		
		<th class="last">Description</th>
	</tr>
	</thead>

	<tbody>
	

        <tr>
            
                <td class="name"><code>world</code></td>
            

            <td class="type">
            
                
<span class="param-type"><a href="Phaser.World.html">Phaser.World</a></span>


            </td>

            
            <td class="description last"><p>A reference to the game world.</p></td>
        </tr>

	
	</tbody>
</table>
</dl>

    
    <dt class="tag-source">Source:</dt>
    <dd class="tag-source"><ul class="dummy"><li>
        <a href="Camera.js.html">core/Camera.js</a>, <a href="Camera.js.html#sunlight-1-line-30">line 30</a>
    </li></ul></dd>
    

</dl>

    
</dd>

        
<dt>
    <h4 class="name" id="x"><span class="type-signature"></span>x<span class="type-signature"></span></h4>
    
    
</dt>
<dd>
    
    <div class="description">
        <p>The Cameras x coordinate. This value is automatically clamped if it falls outside of the World bounds.</p>
    </div>
    
    
<dl class="details">
    

        <h5 class="subsection-title">Properties:</h5>

        <dl>

<table class="props table table-striped">
    <thead>
	<tr>
		
		<th>Name</th>
		

		<th>Type</th>

		
		<th class="last">Description</th>
	</tr>
	</thead>

	<tbody>
	

        <tr>
            
                <td class="name"><code>x</code></td>
            

            <td class="type">
            
                
<span class="param-type">number</span>


            </td>

            
            <td class="description last"><p>Gets or sets the cameras x position.</p></td>
        </tr>

	
	</tbody>
</table>
</dl>

    
    <dt class="tag-source">Source:</dt>
    <dd class="tag-source"><ul class="dummy"><li>
        <a href="Camera.js.html">core/Camera.js</a>, <a href="Camera.js.html#sunlight-1-line-357">line 357</a>
    </li></ul></dd>
    

</dl>

    
</dd>

        
<dt>
    <h4 class="name" id="y"><span class="type-signature"></span>y<span class="type-signature"></span></h4>
    
    
</dt>
<dd>
    
    <div class="description">
        <p>The Cameras y coordinate. This value is automatically clamped if it falls outside of the World bounds.</p>
    </div>
    
    
<dl class="details">
    

        <h5 class="subsection-title">Properties:</h5>

        <dl>

<table class="props table table-striped">
    <thead>
	<tr>
		
		<th>Name</th>
		

		<th>Type</th>

		
		<th class="last">Description</th>
	</tr>
	</thead>

	<tbody>
	

        <tr>
            
                <td class="name"><code>y</code></td>
            

            <td class="type">
            
                
<span class="param-type">number</span>


            </td>

            
            <td class="description last"><p>Gets or sets the cameras y position.</p></td>
        </tr>

	
	</tbody>
</table>
</dl>

    
    <dt class="tag-source">Source:</dt>
    <dd class="tag-source"><ul class="dummy"><li>
        <a href="Camera.js.html">core/Camera.js</a>, <a href="Camera.js.html#sunlight-1-line-380">line 380</a>
    </li></ul></dd>
    

</dl>

    
</dd>

        </dl>
    

        <h3 class="subsection-title">Methods</h3>

        <dl>
            
<dt>
    <h4 class="name" id="checkWorldBounds"><span class="type-signature"></span>checkWorldBounds<span class="signature">()</span><span class="type-signature"></span></h4>
    
    
</dt>
<dd>
    
    
    <div class="description">
        <p>Method called to ensure the camera doesn't venture outside of the game world.</p>
    </div>
    

<dl class="details">
    

    <dt class="tag-source">Source:</dt>
    <dd class="tag-source"><ul class="dummy"><li>
        <a href="Camera.js.html">core/Camera.js</a>, <a href="Camera.js.html#sunlight-1-line-268">line 268</a>
    </li></ul></dd>
    

</dl>

    
</dd>

        
<dt>
    <h4 class="name" id="focusOn"><span class="type-signature"></span>focusOn<span class="signature">(displayObject)</span><span class="type-signature"></span></h4>
    
    
</dt>
<dd>
    
    
    <div class="description">
        <p>Move the camera focus on a display object instantly.</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>displayObject</code></td>
            

            <td class="type">
            
                
<span class="param-type">any</span>


            </td>

            
            <td class="description last"><p>The display object to focus the camera on. Must have visible x/y properties.</p></td>
        </tr>

	
	</tbody>
</table>

    
<dl class="details">
    

    <dt class="tag-source">Source:</dt>
    <dd class="tag-source"><ul class="dummy"><li>
        <a href="Camera.js.html">core/Camera.js</a>, <a href="Camera.js.html#sunlight-1-line-170">line 170</a>
    </li></ul></dd>
    

</dl>

    
</dd>

        
<dt>
    <h4 class="name" id="focusOnXY"><span class="type-signature"></span>focusOnXY<span class="signature">(x, y)</span><span class="type-signature"></span></h4>
    
    
</dt>
<dd>
    
    
    <div class="description">
        <p>Move the camera focus on a location instantly.</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>x</code></td>
            

            <td class="type">
            
                
<span class="param-type">number</span>


            </td>

            
            <td class="description last"><p>X position.</p></td>
        </tr>

	
        <tr>
            
                <td class="name"><code>y</code></td>
            

            <td class="type">
            
                
<span class="param-type">number</span>


            </td>

            
            <td class="description last"><p>Y position.</p></td>
        </tr>

	
	</tbody>
</table>

    
<dl class="details">
    

    <dt class="tag-source">Source:</dt>
    <dd class="tag-source"><ul class="dummy"><li>
        <a href="Camera.js.html">core/Camera.js</a>, <a href="Camera.js.html#sunlight-1-line-181">line 181</a>
    </li></ul></dd>
    

</dl>

    
</dd>

        
<dt>
    <h4 class="name" id="follow"><span class="type-signature"></span>follow<span class="signature">(target, <span class="optional">style</span>)</span><span class="type-signature"></span></h4>
    
    
</dt>
<dd>
    
    
    <div class="description">
        <p>Tells this camera which sprite to follow.</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>target</code></td>
            

            <td class="type">
            
                
<span class="param-type"><a href="Phaser.Sprite.html">Phaser.Sprite</a></span>
|

<span class="param-type"><a href="Phaser.Image.html">Phaser.Image</a></span>
|

<span class="param-type"><a href="Phaser.Text.html">Phaser.Text</a></span>


            </td>

            
                <td class="attributes">
                

                </td>
            

            <td class="description last"><p>The object you want the camera to track. Set to null to not follow anything.</p></td>
        </tr>

	
        <tr>
            
                <td class="name"><code>style</code></td>
            

            <td class="type">
            
                
<span class="param-type">number</span>


            </td>

            
                <td class="attributes">
                
                    &lt;optional><br>
                

                </td>
            

            <td class="description last"><p>Leverage one of the existing &quot;deadzone&quot; presets. If you use a custom deadzone, ignore this parameter and manually specify the deadzone after calling follow().</p></td>
        </tr>

	
	</tbody>
</table>

    
<dl class="details">
    

    <dt class="tag-source">Source:</dt>
    <dd class="tag-source"><ul class="dummy"><li>
        <a href="Camera.js.html">core/Camera.js</a>, <a href="Camera.js.html#sunlight-1-line-127">line 127</a>
    </li></ul></dd>
    

</dl>

    
</dd>

        
<dt>
    <h4 class="name" id="reset"><span class="type-signature"></span>reset<span class="signature">()</span><span class="type-signature"></span></h4>
    
    
</dt>
<dd>
    
    
    <div class="description">
        <p>Resets the camera back to 0,0 and un-follows any object it may have been tracking.</p>
    </div>
    

<dl class="details">
    

    <dt class="tag-source">Source:</dt>
    <dd class="tag-source"><ul class="dummy"><li>
        <a href="Camera.js.html">core/Camera.js</a>, <a href="Camera.js.html#sunlight-1-line-340">line 340</a>
    </li></ul></dd>
    

</dl>

    
</dd>

        
<dt>
    <h4 class="name" id="setBoundsToWorld"><span class="type-signature"></span>setBoundsToWorld<span class="signature">()</span><span class="type-signature"></span></h4>
    
    
</dt>
<dd>
    
    
    <div class="description">
        <p>Update the Camera bounds to match the game world.</p>
    </div>
    

<dl class="details">
    

    <dt class="tag-source">Source:</dt>
    <dd class="tag-source"><ul class="dummy"><li>
        <a href="Camera.js.html">core/Camera.js</a>, <a href="Camera.js.html#sunlight-1-line-258">line 258</a>
    </li></ul></dd>
    

</dl>

    
</dd>

        
<dt>
    <h4 class="name" id="setPosition"><span class="type-signature"></span>setPosition<span class="signature">(x, y)</span><span class="type-signature"></span></h4>
    
    
</dt>
<dd>
    
    
    <div class="description">
        <p>A helper function to set both the X and Y properties of the camera at once
without having to use game.camera.x and game.camera.y.</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>x</code></td>
            

            <td class="type">
            
                
<span class="param-type">number</span>


            </td>

            
            <td class="description last"><p>X position.</p></td>
        </tr>

	
        <tr>
            
                <td class="name"><code>y</code></td>
            

            <td class="type">
            
                
<span class="param-type">number</span>


            </td>

            
            <td class="description last"><p>Y position.</p></td>
        </tr>

	
	</tbody>
</table>

    
<dl class="details">
    

    <dt class="tag-source">Source:</dt>
    <dd class="tag-source"><ul class="dummy"><li>
        <a href="Camera.js.html">core/Camera.js</a>, <a href="Camera.js.html#sunlight-1-line-306">line 306</a>
    </li></ul></dd>
    

</dl>

    
</dd>

        
<dt>
    <h4 class="name" id="setSize"><span class="type-signature"></span>setSize<span class="signature">(width, height)</span><span class="type-signature"></span></h4>
    
    
</dt>
<dd>
    
    
    <div class="description">
        <p>Sets the size of the view rectangle given the width and height in parameters.</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>width</code></td>
            

            <td class="type">
            
                
<span class="param-type">number</span>


            </td>

            
            <td class="description last"><p>The desired width.</p></td>
        </tr>

	
        <tr>
            
                <td class="name"><code>height</code></td>
            

            <td class="type">
            
                
<span class="param-type">number</span>


            </td>

            
            <td class="description last"><p>The desired height.</p></td>
        </tr>

	
	</tbody>
</table>

    
<dl class="details">
    

    <dt class="tag-source">Source:</dt>
    <dd class="tag-source"><ul class="dummy"><li>
        <a href="Camera.js.html">core/Camera.js</a>, <a href="Camera.js.html#sunlight-1-line-326">line 326</a>
    </li></ul></dd>
    

</dl>

    
</dd>

        
<dt>
    <h4 class="name" id="update"><span class="type-signature"></span>update<span class="signature">()</span><span class="type-signature"></span></h4>
    
    
</dt>
<dd>
    
    
    <div class="description">
        <p>Update focusing and scrolling.</p>
    </div>
    

<dl class="details">
    

    <dt class="tag-source">Source:</dt>
    <dd class="tag-source"><ul class="dummy"><li>
        <a href="Camera.js.html">core/Camera.js</a>, <a href="Camera.js.html#sunlight-1-line-193">line 193</a>
    </li></ul></dd>
    

</dl>

    
</dd>

        </dl>
    

</article>

</section>


				</div>

				<div class="clearfix"></div>
				<footer>
					
					
		<span class="copyright">
		Phaser Copyright © 2012-2014 Photon Storm Ltd.
		</span>
					<br />
					
		<span class="jsdoc-message">
		Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.3.0-dev</a>
		on Fri Mar 28 2014 01:41:25 GMT-0000 (GMT) using the <a href="https://github.com/terryweiss/docstrap">DocStrap template</a>.
		</span>
				</footer>
			</div>

			
			<div class="span3">
				<div id="toc"></div>
			</div>
			
			<br clear="both">
		</div>

	</div>
	<script src="scripts/sunlight.js"></script>
	<script src="scripts/sunlight.javascript.js"></script>
	<script src="scripts/sunlight-plugin.doclinks.js"></script>
	<script src="scripts/sunlight-plugin.linenumbers.js"></script>
	<script src="scripts/sunlight-plugin.menu.js"></script>
	<script src="scripts/jquery.min.js"></script>
	<script src="scripts/jquery.scrollTo.js"></script>
	<script src="scripts/jquery.localScroll.js"></script>
	<script src="scripts/bootstrap-dropdown.js"></script>
	<script src="scripts/toc.js"></script>


	<script>  Sunlight.highlightAll({lineNumbers:true,  showMenu: true, enableDoclinks :true}); </script>

	<script>
		$( function () {
			$( "#toc" ).toc( {
			    anchorName  : function(i, heading, prefix) {
					return $(heading).attr("id") || ( prefix + i );
				},
				selectors   : "h1,h2,h3,h4",
				showAndHide : false,
				scrollTo    : 60
			} );
			$( "#toc>ul" ).addClass( "nav nav-pills nav-stacked" );
			$( "#main span[id^='toc']" ).addClass( "toc-shim" );

		} );
	</script>

	
</body>
</html>