/
2D.html
207 lines (195 loc) · 44.6 KB
/
2D.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Crafty - 2D</title>
<link type="text/css" rel="stylesheet" href="/craftyjs-site.css" />
<link href='http://fonts.googleapis.com/css?family=Arvo:regular,bold' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,600' rel='stylesheet' type='text/css'>
<link rel="shortcut icon" href="/favicon.ico">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js" type="text/javascript"></script>
<link rel="stylesheet" href="/github.css"/>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-23935213-2']);
_gaq.push(['_trackPageview']);
(function () {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
</head>
<body>
<div id = "header-background"> </div>
<div id = "page-frame">
<div id="header">
<nav class="navbar">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="/"> <img class="logo" src="/images/text-logo.png" /> </a>
</div>
<div class="collapse navbar-collapse navbar-right" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li><a href="/">Home</a></li>
<li><a href="/getting-started/">Getting started</a></li>
<li><a href="/documentation/">Documentation</a></li>
<li><a href="/api/">API</a></li>
<li><a href="https://groups.google.com/forum/#!forum/craftyjs">Forum</a></li>
<li><a href="/components/">Components</a></li>
<li class="emph"><a href="/#install">Download</a></li>
</ul>
</div>
</div>
</nav>
</div>
<div id="main">
<div id="content" class="container">
<div id="docs"><div class="toc-holder" id="doc-nav"><ul id="doc-level-one"><li><a href="events.html">List of Events</a></li><li class="category">Core<ul class="category-list"><li><a href="Crafty.html">Crafty</a></li><li><a href="Crafty Core.html">Crafty Core</a></li><li><a href="Crafty-bind.html">Crafty.bind</a></li><li><a href="Crafty-c.html">Crafty.c</a></li><li><a href="Crafty-clone.html">Crafty.clone</a></li><li><a href="Crafty-defineField.html">Crafty.defineField</a></li><li><a href="Crafty-e.html">Crafty.e</a></li><li><a href="Crafty-extend.html">Crafty.extend</a></li><li><a href="Crafty-frame.html">Crafty.frame</a></li><li><a href="Crafty-getVersion.html">Crafty.getVersion</a></li><li><a href="Crafty-init.html">Crafty.init</a></li><li><a href="Crafty-isPaused.html">Crafty.isPaused</a></li><li><a href="Crafty-one.html">Crafty.one</a></li><li><a href="Crafty-pause.html">Crafty.pause</a></li><li><a href="Crafty-s.html">Crafty.s</a></li><li><a href="Crafty-settings.html">Crafty.settings</a></li><li><a href="Crafty-stage.html">Crafty.stage</a></li><li><a href="Crafty-stop.html">Crafty.stop</a></li><li><a href="Crafty-support.html">Crafty.support</a></li><li><a href="Crafty-trigger.html">Crafty.trigger</a></li><li><a href="Crafty-unbind.html">Crafty.unbind</a></li><li><a href="Crafty-uniqueBind.html">Crafty.uniqueBind</a></li></ul></li><li class="category">2D<ul class="category-list"><li><a href="2D.html">2D</a></li><li><a href="AngularMotion.html">AngularMotion</a></li><li><a href="Collision.html">Collision</a></li><li><a href="Crafty-circle.html">Crafty.circle</a></li><li><a href="Crafty-diamondIso.html">Crafty.diamondIso</a></li><li><a href="Crafty-HashMap.html">Crafty.HashMap</a></li><li><a href="Crafty-isometric.html">Crafty.isometric</a></li><li><a href="Crafty-map.html">Crafty.map</a></li><li><a href="Crafty-math-Matrix2D.html">Crafty.math.Matrix2D</a></li><li><a href="Crafty-math-Vector2D.html">Crafty.math.Vector2D</a></li><li><a href="Crafty-polygon.html">Crafty.polygon</a></li><li><a href="Crafty-rectManager.html">Crafty.rectManager</a></li><li><a href="Gravity.html">Gravity</a></li><li><a href="GroundAttacher.html">GroundAttacher</a></li><li><a href="Motion.html">Motion</a></li><li><a href="Supportable.html">Supportable</a></li></ul></li><li class="category">Animation<ul class="category-list"><li><a href="Crafty-easing.html">Crafty.easing</a></li><li><a href="SpriteAnimation.html">SpriteAnimation</a></li><li><a href="Tween.html">Tween</a></li></ul></li><li class="category">Assets<ul class="category-list"><li><a href="Crafty-asset.html">Crafty.asset</a></li><li><a href="Crafty-assets.html">Crafty.assets</a></li><li><a href="Crafty-image_whitelist.html">Crafty.image_whitelist</a></li><li><a href="Crafty-load.html">Crafty.load</a></li><li><a href="Crafty-paths.html">Crafty.paths</a></li><li><a href="Crafty-removeAssets.html">Crafty.removeAssets</a></li></ul></li><li class="category">Audio<ul class="category-list"><li><a href="Crafty-audio.html">Crafty.audio</a></li></ul></li><li class="category">Controls<ul class="category-list"><li><a href="Draggable.html">Draggable</a></li><li><a href="Fourway.html">Fourway</a></li><li><a href="Jumper.html">Jumper</a></li><li><a href="Multiway.html">Multiway</a></li><li><a href="Twoway.html">Twoway</a></li></ul></li><li class="category">Debug<ul class="category-list"><li><a href="Crafty-error.html">Crafty.error</a></li><li><a href="Crafty-log.html">Crafty.log</a></li><li><a href="DebugCanvas.html">DebugCanvas</a></li><li><a href="DebugPolygon.html">DebugPolygon</a></li><li><a href="DebugRectangle.html">DebugRectangle</a></li><li><a href="SolidAreaMap.html">SolidAreaMap</a></li><li><a href="SolidHitBox.html">SolidHitBox</a></li><li><a href="VisibleMBR.html">VisibleMBR</a></li><li><a href="WiredAreaMap.html">WiredAreaMap</a></li><li><a href="WiredHitBox.html">WiredHitBox</a></li></ul></li><li class="category">Events<ul class="category-list"><li><a href="Crafty-addEvent.html">Crafty.addEvent</a></li><li><a href="Crafty-bind.html">Crafty.bind</a></li><li><a href="Crafty-one.html">Crafty.one</a></li><li><a href="Crafty-removeEvent.html">Crafty.removeEvent</a></li><li><a href="Crafty-trigger.html">Crafty.trigger</a></li><li><a href="Crafty-unbind.html">Crafty.unbind</a></li><li><a href="Crafty-uniqueBind.html">Crafty.uniqueBind</a></li></ul></li><li class="category">Game Loop<ul class="category-list"><li><a href="Crafty-timer.html">Crafty.timer</a></li></ul></li><li class="category">Graphics<ul class="category-list"><li><a href="Canvas.html">Canvas</a></li><li><a href="Color.html">Color</a></li><li><a href="Crafty-assignColor.html">Crafty.assignColor</a></li><li><a href="Crafty-background.html">Crafty.background</a></li><li><a href="Crafty-canvasLayer.html">Crafty.canvasLayer</a></li><li><a href="Crafty-domHelper.html">Crafty.domHelper</a></li><li><a href="Crafty-domLayer.html">Crafty.domLayer</a></li><li><a href="Crafty-pixelart.html">Crafty.pixelart</a></li><li><a href="Crafty-sprite.html">Crafty.sprite</a></li><li><a href="Crafty-webgl.html">Crafty.webgl</a></li><li><a href="DOM.html">DOM</a></li><li><a href="HTML.html">HTML</a></li><li><a href="Image.html">Image</a></li><li><a href="Particles.html">Particles</a></li><li><a href="Sprite.html">Sprite</a></li><li><a href="Text.html">Text</a></li><li><a href="WebGL.html">WebGL</a></li></ul></li><li class="category">Input<ul class="category-list"><li><a href="AreaMap.html">AreaMap</a></li><li><a href="Button.html">Button</a></li><li><a href="Crafty-eventObject.html">Crafty.eventObject</a></li><li><a href="Crafty-findClosestEntityByComponent.html">Crafty.findClosestEntityByComponent</a></li><li><a href="Crafty-keydown.html">Crafty.keydown</a></li><li><a href="Crafty-keys.html">Crafty.keys</a></li><li><a href="Crafty-mouseButtons.html">Crafty.mouseButtons</a></li><li><a href="Crafty-mouseDispatch.html">Crafty.mouseDispatch</a></li><li><a href="Crafty-mouseWheelDispatch.html">Crafty.mouseWheelDispatch</a></li><li><a href="Crafty-multitouch.html">Crafty.multitouch</a></li><li><a href="Crafty-touchDispatch.html">Crafty.touchDispatch</a></li><li><a href="Keyboard.html">Keyboard</a></li><li><a href="KeyboardEvent.html">KeyboardEvent</a></li><li><a href="Mouse.html">Mouse</a></li><li><a href="MouseDrag.html">MouseDrag</a></li><li><a href="Touch.html">Touch</a></li></ul></li><li class="category">Misc<ul class="category-list"><li><a href="Crafty-addEvent.html">Crafty.addEvent</a></li><li><a href="Crafty-device.html">Crafty.device</a></li><li><a href="Crafty-removeEvent.html">Crafty.removeEvent</a></li><li><a href="Crafty-support.html">Crafty.support</a></li></ul></li><li class="category">Model<ul class="category-list"><li><a href="Model.html">Model</a></li></ul></li><li class="category">Scenes<ul class="category-list"><li><a href="Crafty-scene.html">Crafty.scene</a></li></ul></li><li class="category">Stage<ul class="category-list"><li><a href="Crafty-background.html">Crafty.background</a></li><li><a href="Crafty-scene.html">Crafty.scene</a></li><li><a href="Crafty-viewport.html">Crafty.viewport</a></li></ul></li><li class="category">Utilities<ul class="category-list"><li><a href="Crafty-math.html">Crafty.math</a></li><li><a href="Delay.html">Delay</a></li><li><a href="Storage.html">Storage</a></li></ul></li></ul></div><div id="doc-content" class="doc-page-holder"><div class="doc-page"><h1>2D</h1><div class="doclet" id="2D"><div class="doc-source"><a href="https://github.com/craftyjs/Crafty/blob/5c34e4039278e39defc230858d1e83c078935f50/src/spatial/2d.js#L19-27">src/spatial/2d.js#L19-27</a></div><span class="markdown"><p>Component for any entity that has a position on the stage.</p>
</span><div class="triggered-events"><h4>Events</h4><div class="trigger-list"><dl class="trigger"><dt>Move <span>[<span class="trigger-data"><span class="obj-name">Old position</span><span class="obj-props"> = { _x:Number, _y:Number, _w:Number, _h:Number }</span></span>]</span></dt><dd>when the entity has moved</dd></dl><dl class="trigger"><dt>Invalidate </dt><dd>when the entity needs to be redrawn</dd></dl><dl class="trigger"><dt>Rotate <span>[<span class="trigger-data"><span class="obj-name">Data</span><span class="obj-props"> = { cos:Number, sin:Number, deg:Number, rad:Number, o: {x:Number, y:Number}}</span></span>]</span></dt><dd>when the entity is rotated</dd></dl><dl class="trigger"><dt>Reorder </dt><dd>when the entity's z index has changed</dd></dl></div></div></div><div><h4>Methods and Properties</h4><ul class="page-toc"><li><a href="#-_attr">._attr</a></li><li><a href="#-_cascade">._cascade</a></li><li><a href="#-_globalZ">._globalZ</a></li><li><a href="#-alpha">.alpha</a></li><li><a href="#-area">.area</a></li><li><a href="#-attach">.attach</a></li><li><a href="#-contains">.contains</a></li><li><a href="#-detach">.detach</a></li><li><a href="#-flip">.flip</a></li><li><a href="#-h">.h</a></li><li><a href="#-intersect">.intersect</a></li><li><a href="#-isAt">.isAt</a></li><li><a href="#-mbr">.mbr</a></li><li><a href="#-move">.move</a></li><li><a href="#-offsetBoundary">.offsetBoundary</a></li><li><a href="#-origin">.origin</a></li><li><a href="#-pos">.pos</a></li><li><a href="#-rotation">.rotation</a></li><li><a href="#-shift">.shift</a></li><li><a href="#-unflip">.unflip</a></li><li><a href="#-visible">.visible</a></li><li><a href="#-w">.w</a></li><li><a href="#-within">.within</a></li><li><a href="#-x">.x</a></li><li><a href="#-y">.y</a></li><li><a href="#-z">.z</a></li></ul><div class="doclet" id="-_attr"><a href="#doc-nav" class="doc-top">Back to top</a><h2 class="doclet-header">._attr</h2><div class="doc-source"><a href="https://github.com/craftyjs/Crafty/blob/5c34e4039278e39defc230858d1e83c078935f50/src/spatial/2d.js#L861-866">src/spatial/2d.js#L861-866</a></div><span class="markdown"><p>Setter method for all 2D properties including
x, y, w, h, alpha, rotation and visible.</p>
</span></div><div class="doclet" id="-_cascade"><a href="#doc-nav" class="doc-top">Back to top</a><h2 class="doclet-header">._cascade</h2><div class="doc-source"><a href="https://github.com/craftyjs/Crafty/blob/5c34e4039278e39defc230858d1e83c078935f50/src/spatial/2d.js#L653-663">src/spatial/2d.js#L653-663</a></div><div class="crafty-method"><code class="signature"><span class="sig-phrase"><span class="sig-qualifier">public </span><span class="sig-qualifier">void </span><span class="sig-noun">._cascade</span></span><span class="sig-seperator">(</span><span class="sig-phrase"><span class="sig-noun">e</span></span><span class="sig-seperator">)</span></code><dl class="parameter"><dt> e </dt><dd><span class="markdown"><p>An object describing the motion</p>
</span></dd></dl></div><span class="markdown"><p>Move or rotate the entity's children according to a certain motion.
This method is part of a function bound to "Move": It is used
internally for ensuring that when a parent moves, the child also
moves in the same way.</p>
</span></div><div class="doclet" id="-_globalZ"><a href="#doc-nav" class="doc-top">Back to top</a><h2 class="doclet-header">._globalZ</h2><div class="doc-source"><a href="https://github.com/craftyjs/Crafty/blob/5c34e4039278e39defc230858d1e83c078935f50/src/spatial/2d.js#L123-127">src/spatial/2d.js#L123-127</a></div><span class="markdown"><p>When two entities overlap, the one with the larger <code>_globalZ</code> will be on top of the other.</p>
</span></div><div class="doclet" id="-alpha"><a href="#doc-nav" class="doc-top">Back to top</a><h2 class="doclet-header">.alpha</h2><div class="doc-source"><a href="https://github.com/craftyjs/Crafty/blob/5c34e4039278e39defc230858d1e83c078935f50/src/spatial/2d.js#L107-111">src/spatial/2d.js#L107-111</a></div><span class="markdown"><p>Transparency of an entity. Must be a decimal value between 0.0 being fully transparent to 1.0 being fully opaque.</p>
</span></div><div class="doclet" id="-area"><a href="#doc-nav" class="doc-top">Back to top</a><h2 class="doclet-header">.area</h2><div class="doc-source"><a href="https://github.com/craftyjs/Crafty/blob/5c34e4039278e39defc230858d1e83c078935f50/src/spatial/2d.js#L450-455">src/spatial/2d.js#L450-455</a></div><div class="crafty-method"><code class="signature"><span class="sig-phrase"><span class="sig-qualifier">public </span><span class="sig-qualifier">Number </span><span class="sig-noun">.area</span></span><span class="sig-seperator">(</span><span class="sig-phrase"><span class="sig-noun">void</span></span><span class="sig-seperator">)</span></code></div><span class="markdown"><p>Calculates the area of the entity</p>
</span></div><div class="doclet" id="-attach"><a href="#doc-nav" class="doc-top">Back to top</a><h2 class="doclet-header">.attach</h2><div class="doc-source"><a href="https://github.com/craftyjs/Crafty/blob/5c34e4039278e39defc230858d1e83c078935f50/src/spatial/2d.js#L690-707">src/spatial/2d.js#L690-707</a></div><div class="crafty-method"><code class="signature"><span class="sig-phrase"><span class="sig-qualifier">public </span><span class="sig-qualifier">this </span><span class="sig-noun">.attach</span></span><span class="sig-seperator">(</span><span class="sig-phrase"><span class="sig-qualifier">Entity </span><span class="sig-noun">obj</span></span><span class="sig-seperator">[,</span><span class="sig-phrase"><span class="sig-qualifier"> </span><span class="sig-noun">..</span></span><span class="sig-seperator">,</span><span class="sig-phrase"><span class="sig-qualifier"> </span><span class="sig-qualifier">Entity </span><span class="sig-noun">objN</span></span><span class="sig-seperator">])</span></code><dl class="parameter"><dt> obj </dt><dd><span class="markdown"><p>Child entity(s) to attach</p>
</span></dd></dl></div><span class="markdown"><p>Sets one or more entities to be children, with the current entity (<code>this</code>)
as the parent. When the parent moves or rotates, its children move or
rotate by the same amount. (But not vice-versa: If you move a child, it
will not move the parent.) When the parent is destroyed, its children are
destroyed.</p>
<p>For any entity, <code>this._children</code> is the array of its children entity
objects (if any), and <code>this._parent</code> is its parent entity object (if any).</p>
<p>As many objects as wanted can be attached, and a hierarchy of objects is
possible by attaching.</p>
</span></div><div class="doclet" id="-contains"><a href="#doc-nav" class="doc-top">Back to top</a><h2 class="doclet-header">.contains</h2><div class="doc-source"><a href="https://github.com/craftyjs/Crafty/blob/5c34e4039278e39defc230858d1e83c078935f50/src/spatial/2d.js#L520-532">src/spatial/2d.js#L520-532</a></div><div class="crafty-method"><code class="signature"><span class="sig-phrase"><span class="sig-qualifier">public </span><span class="sig-qualifier">Boolean </span><span class="sig-noun">.contains</span></span><span class="sig-seperator">(</span><span class="sig-phrase"><span class="sig-qualifier">Number </span><span class="sig-noun">x</span></span><span class="sig-seperator">,</span><span class="sig-phrase"><span class="sig-qualifier"> </span><span class="sig-qualifier">Number </span><span class="sig-noun">y</span></span><span class="sig-seperator">,</span><span class="sig-phrase"><span class="sig-qualifier"> </span><span class="sig-qualifier">Number </span><span class="sig-noun">w</span></span><span class="sig-seperator">,</span><span class="sig-phrase"><span class="sig-qualifier"> </span><span class="sig-qualifier">Number </span><span class="sig-noun">h</span></span><span class="sig-seperator">)</span></code><dl class="parameter"><dt> x </dt><dd><span class="markdown"><p>X position of the rect</p>
</span></dd></dl><dl class="parameter"><dt> y </dt><dd><span class="markdown"><p>Y position of the rect</p>
</span></dd></dl><dl class="parameter"><dt> w </dt><dd><span class="markdown"><p>Width of the rect</p>
</span></dd></dl><dl class="parameter"><dt> h </dt><dd><span class="markdown"><p>Height of the rect</p>
</span></dd></dl></div><div class="crafty-method"><code class="signature"><span class="sig-phrase"><span class="sig-qualifier">public </span><span class="sig-qualifier">Boolean </span><span class="sig-noun">.contains</span></span><span class="sig-seperator">(</span><span class="sig-phrase"><span class="sig-qualifier">Object </span><span class="sig-noun">rect</span></span><span class="sig-seperator">)</span></code><dl class="parameter"><dt> rect </dt><dd><span class="markdown"><p>An object that must have the <code>_x, _y, _w, _h</code> values as properties.</p>
</span></dd></dl></div><span class="markdown"><p>Determines if the rectangle is within the current entity. If the entity is rotated, its MBR is used for the test.</p>
</span></div><div class="doclet" id="-detach"><a href="#doc-nav" class="doc-top">Back to top</a><h2 class="doclet-header">.detach</h2><div class="doc-source"><a href="https://github.com/craftyjs/Crafty/blob/5c34e4039278e39defc230858d1e83c078935f50/src/spatial/2d.js#L725-733">src/spatial/2d.js#L725-733</a></div><div class="crafty-method"><code class="signature"><span class="sig-phrase"><span class="sig-qualifier">public </span><span class="sig-qualifier">this </span><span class="sig-noun">.detach</span></span><span class="sig-seperator">([</span><span class="sig-phrase"><span class="sig-qualifier">Entity </span><span class="sig-noun">obj</span></span><span class="sig-seperator">])</span></code><dl class="parameter"><dt> obj </dt><dd><span class="markdown"><p>The entity to detach. Left blank will remove all attached entities</p>
</span></dd></dl></div><span class="markdown"><p>Stop an entity from following the current entity. Passing no arguments will stop
every entity attached.</p>
</span></div><div class="doclet" id="-flip"><a href="#doc-nav" class="doc-top">Back to top</a><h2 class="doclet-header">.flip</h2><div class="doc-source"><a href="https://github.com/craftyjs/Crafty/blob/5c34e4039278e39defc230858d1e83c078935f50/src/spatial/2d.js#L803-816">src/spatial/2d.js#L803-816</a></div><div class="triggered-events"><h4>Events</h4><div class="trigger-list"><dl class="trigger"><dt>Invalidate </dt><dd>when the entity has flipped</dd></dl></div></div><div class="crafty-method"><code class="signature"><span class="sig-phrase"><span class="sig-qualifier">public </span><span class="sig-qualifier">this </span><span class="sig-noun">.flip</span></span><span class="sig-seperator">(</span><span class="sig-phrase"><span class="sig-qualifier">String </span><span class="sig-noun">dir</span></span><span class="sig-seperator">)</span></code><dl class="parameter"><dt> dir </dt><dd><span class="markdown"><p>Flip direction</p>
</span></dd></dl></div><span class="markdown"><p>Flip entity on passed direction</p>
</span><div class="example"><h4>Example</h4><span class="markdown"><pre><code class="hljs "><span class="hljs-keyword">this</span>.flip(<span class="hljs-string">"X"</span>)</code></pre></span></div></div><div class="doclet" id="-h"><a href="#doc-nav" class="doc-top">Back to top</a><h2 class="doclet-header">.h</h2><div class="doc-source"><a href="https://github.com/craftyjs/Crafty/blob/5c34e4039278e39defc230858d1e83c078935f50/src/spatial/2d.js#L58-67">src/spatial/2d.js#L58-67</a></div><span class="markdown"><p>The height of the entity. When modified, will automatically be redrawn.
Is actually a getter/setter so when using this value for calculations and not modifying it,
use the <code>._h</code> property.</p>
<p>Changing this value is not recommended as canvas has terrible resize quality and DOM will just clip the image.</p>
</span><div><h4>See Also</h4><ul class="see-also-list"><li><a href="#-_attr">._attr</a></li></ul></div></div><div class="doclet" id="-intersect"><a href="#doc-nav" class="doc-top">Back to top</a><h2 class="doclet-header">.intersect</h2><div class="doc-source"><a href="https://github.com/craftyjs/Crafty/blob/5c34e4039278e39defc230858d1e83c078935f50/src/spatial/2d.js#L460-472">src/spatial/2d.js#L460-472</a></div><div class="crafty-method"><code class="signature"><span class="sig-phrase"><span class="sig-qualifier">public </span><span class="sig-qualifier">Boolean </span><span class="sig-noun">.intersect</span></span><span class="sig-seperator">(</span><span class="sig-phrase"><span class="sig-qualifier">Number </span><span class="sig-noun">x</span></span><span class="sig-seperator">,</span><span class="sig-phrase"><span class="sig-qualifier"> </span><span class="sig-qualifier">Number </span><span class="sig-noun">y</span></span><span class="sig-seperator">,</span><span class="sig-phrase"><span class="sig-qualifier"> </span><span class="sig-qualifier">Number </span><span class="sig-noun">w</span></span><span class="sig-seperator">,</span><span class="sig-phrase"><span class="sig-qualifier"> </span><span class="sig-qualifier">Number </span><span class="sig-noun">h</span></span><span class="sig-seperator">)</span></code><dl class="parameter"><dt> x </dt><dd><span class="markdown"><p>X position of the rect</p>
</span></dd></dl><dl class="parameter"><dt> y </dt><dd><span class="markdown"><p>Y position of the rect</p>
</span></dd></dl><dl class="parameter"><dt> w </dt><dd><span class="markdown"><p>Width of the rect</p>
</span></dd></dl><dl class="parameter"><dt> h </dt><dd><span class="markdown"><p>Height of the rect</p>
</span></dd></dl></div><div class="crafty-method"><code class="signature"><span class="sig-phrase"><span class="sig-qualifier">public </span><span class="sig-qualifier">Boolean </span><span class="sig-noun">.intersect</span></span><span class="sig-seperator">(</span><span class="sig-phrase"><span class="sig-qualifier">Object </span><span class="sig-noun">rect</span></span><span class="sig-seperator">)</span></code><dl class="parameter"><dt> rect </dt><dd><span class="markdown"><p>An object that must have the <code>_x, _y, _w, _h</code> values as properties</p>
</span></dd></dl></div><span class="markdown"><p>Determines if this entity intersects a rectangle. If the entity is rotated, its MBR is used for the test.</p>
</span></div><div class="doclet" id="-isAt"><a href="#doc-nav" class="doc-top">Back to top</a><h2 class="doclet-header">.isAt</h2><div class="doc-source"><a href="https://github.com/craftyjs/Crafty/blob/5c34e4039278e39defc230858d1e83c078935f50/src/spatial/2d.js#L591-602">src/spatial/2d.js#L591-602</a></div><div class="crafty-method"><code class="signature"><span class="sig-phrase"><span class="sig-qualifier">public </span><span class="sig-qualifier">Boolean </span><span class="sig-noun">.isAt</span></span><span class="sig-seperator">(</span><span class="sig-phrase"><span class="sig-qualifier">Number </span><span class="sig-noun">x</span></span><span class="sig-seperator">,</span><span class="sig-phrase"><span class="sig-qualifier"> </span><span class="sig-qualifier">Number </span><span class="sig-noun">y</span></span><span class="sig-seperator">)</span></code><dl class="parameter"><dt> x </dt><dd><span class="markdown"><p>X position of the point</p>
</span></dd></dl><dl class="parameter"><dt> y </dt><dd><span class="markdown"><p>Y position of the point</p>
</span></dd></dl></div><span class="markdown"><p>Determines whether a point is contained by the entity. Unlike other methods,
an object can't be passed. The arguments require the x and y value.</p>
<p>The given point is tested against the first of the following that exists: a mapArea associated with "Mouse", the hitarea associated with "Collision", or the object's MBR.</p>
</span></div><div class="doclet" id="-mbr"><a href="#doc-nav" class="doc-top">Back to top</a><h2 class="doclet-header">.mbr</h2><div class="doc-source"><a href="https://github.com/craftyjs/Crafty/blob/5c34e4039278e39defc230858d1e83c078935f50/src/spatial/2d.js#L571-577">src/spatial/2d.js#L571-577</a></div><div class="crafty-method"><code class="signature"><span class="sig-phrase"><span class="sig-qualifier">public </span><span class="sig-qualifier">Object </span><span class="sig-noun">.mbr</span></span><span class="sig-seperator">()</span></code></div><span class="markdown"><p>Returns the minimum bounding rectangle. If there is no rotation
on the entity it will return the rect.</p>
</span></div><div class="doclet" id="-move"><a href="#doc-nav" class="doc-top">Back to top</a><h2 class="doclet-header">.move</h2><div class="doc-source"><a href="https://github.com/craftyjs/Crafty/blob/5c34e4039278e39defc230858d1e83c078935f50/src/spatial/2d.js#L614-622">src/spatial/2d.js#L614-622</a></div><div class="crafty-method"><code class="signature"><span class="sig-phrase"><span class="sig-qualifier">public </span><span class="sig-qualifier">this </span><span class="sig-noun">.move</span></span><span class="sig-seperator">(</span><span class="sig-phrase"><span class="sig-qualifier">String </span><span class="sig-noun">dir</span></span><span class="sig-seperator">,</span><span class="sig-phrase"><span class="sig-qualifier"> </span><span class="sig-qualifier">Number </span><span class="sig-noun">by</span></span><span class="sig-seperator">)</span></code><dl class="parameter"><dt> dir </dt><dd><span class="markdown"><p>Direction to move (n,s,e,w,ne,nw,se,sw)</p>
</span></dd></dl><dl class="parameter"><dt> by </dt><dd><span class="markdown"><p>Amount to move in the specified direction</p>
</span></dd></dl></div><span class="markdown"><p>Quick method to move the entity in a direction (n, s, e, w, ne, nw, se, sw) by an amount of pixels.</p>
</span></div><div class="doclet" id="-offsetBoundary"><a href="#doc-nav" class="doc-top">Back to top</a><h2 class="doclet-header">.offsetBoundary</h2><div class="doc-source"><a href="https://github.com/craftyjs/Crafty/blob/5c34e4039278e39defc230858d1e83c078935f50/src/spatial/2d.js#L316-332">src/spatial/2d.js#L316-332</a></div><span class="markdown"><p>Extends the MBR of the entity by a specified amount.</p>
</span><div class="triggered-events"><h4>Events</h4><div class="trigger-list"><dl class="trigger"><dt>BoundaryOffset </dt><dd>when the MBR offset changes</dd></dl></div></div><div class="crafty-method"><code class="signature"><span class="sig-phrase"><span class="sig-qualifier">public </span><span class="sig-qualifier">this </span><span class="sig-noun">.offsetBoundary</span></span><span class="sig-seperator">(</span><span class="sig-phrase"><span class="sig-qualifier">Number </span><span class="sig-noun">dx1</span></span><span class="sig-seperator">,</span><span class="sig-phrase"><span class="sig-qualifier"> </span><span class="sig-qualifier">Number </span><span class="sig-noun">dy1</span></span><span class="sig-seperator">,</span><span class="sig-phrase"><span class="sig-qualifier"> </span><span class="sig-qualifier">Number </span><span class="sig-noun">dx2</span></span><span class="sig-seperator">,</span><span class="sig-phrase"><span class="sig-qualifier"> </span><span class="sig-qualifier">Number </span><span class="sig-noun">dy2</span></span><span class="sig-seperator">)</span></code><dl class="parameter"><dt> dx1 </dt><dd><span class="markdown"><p>Extends the MBR to the left by this amount</p>
</span></dd></dl><dl class="parameter"><dt> dy1 </dt><dd><span class="markdown"><p>Extends the MBR upward by this amount</p>
</span></dd></dl><dl class="parameter"><dt> dx2 </dt><dd><span class="markdown"><p>Extends the MBR to the right by this amount</p>
</span></dd></dl><dl class="parameter"><dt> dy2 </dt><dd><span class="markdown"><p>Extends the MBR downward by this amount</p>
</span></dd></dl></div><div class="crafty-method"><code class="signature"><span class="sig-phrase"><span class="sig-qualifier">public </span><span class="sig-qualifier">this </span><span class="sig-noun">.offsetBoundary</span></span><span class="sig-seperator">(</span><span class="sig-phrase"><span class="sig-qualifier">Number </span><span class="sig-noun">offset</span></span><span class="sig-seperator">)</span></code><dl class="parameter"><dt> offset </dt><dd><span class="markdown"><p>Extend the MBR in all directions by this amount</p>
</span></dd></dl></div><span class="markdown"><p>You would most likely use this function to ensure that custom canvas rendering beyond the extent of the entity's normal bounds is not clipped.</p>
</span></div><div class="doclet" id="-origin"><a href="#doc-nav" class="doc-top">Back to top</a><h2 class="doclet-header">.origin</h2><div class="doc-source"><a href="https://github.com/craftyjs/Crafty/blob/5c34e4039278e39defc230858d1e83c078935f50/src/spatial/2d.js#L756-778">src/spatial/2d.js#L756-778</a></div><div class="crafty-method"><code class="signature"><span class="sig-phrase"><span class="sig-qualifier">public </span><span class="sig-qualifier">this </span><span class="sig-noun">.origin</span></span><span class="sig-seperator">(</span><span class="sig-phrase"><span class="sig-qualifier">Number </span><span class="sig-noun">x</span></span><span class="sig-seperator">,</span><span class="sig-phrase"><span class="sig-qualifier"> </span><span class="sig-qualifier">Number </span><span class="sig-noun">y</span></span><span class="sig-seperator">)</span></code><dl class="parameter"><dt> x </dt><dd><span class="markdown"><p>Pixel value of origin offset on the X axis</p>
</span></dd></dl><dl class="parameter"><dt> y </dt><dd><span class="markdown"><p>Pixel value of origin offset on the Y axis</p>
</span></dd></dl></div><div class="crafty-method"><code class="signature"><span class="sig-phrase"><span class="sig-qualifier">public </span><span class="sig-qualifier">this </span><span class="sig-noun">.origin</span></span><span class="sig-seperator">(</span><span class="sig-phrase"><span class="sig-qualifier">String </span><span class="sig-noun">offset</span></span><span class="sig-seperator">)</span></code><dl class="parameter"><dt> offset </dt><dd><span class="markdown"><p>Combination of center, top, bottom, middle, left and right</p>
</span></dd></dl></div><span class="markdown"><p>Set the origin point of an entity for it to rotate around.</p>
</span><div class="example"><h4>Example</h4><span class="markdown"><pre><code class="hljs "><span class="hljs-keyword">this</span>.origin(<span class="hljs-string">"top left"</span>)
<span class="hljs-keyword">this</span>.origin(<span class="hljs-string">"center"</span>)
<span class="hljs-keyword">this</span>.origin(<span class="hljs-string">"bottom right"</span>)
<span class="hljs-keyword">this</span>.origin(<span class="hljs-string">"middle right"</span>)</code></pre></span></div><div><h4>See Also</h4><ul class="see-also-list"><li><a href="#-rotation">.rotation</a></li></ul></div></div><div class="doclet" id="-pos"><a href="#doc-nav" class="doc-top">Back to top</a><h2 class="doclet-header">.pos</h2><div class="doc-source"><a href="https://github.com/craftyjs/Crafty/blob/5c34e4039278e39defc230858d1e83c078935f50/src/spatial/2d.js#L550-561">src/spatial/2d.js#L550-561</a></div><div class="crafty-method"><code class="signature"><span class="sig-phrase"><span class="sig-qualifier">public </span><span class="sig-qualifier">Object </span><span class="sig-noun">.pos</span></span><span class="sig-seperator">([</span><span class="sig-phrase"><span class="sig-qualifier">Object </span><span class="sig-noun">pos</span></span><span class="sig-seperator">])</span></code><dl class="parameter"><dt> pos </dt><dd><span class="markdown"><p>an object to use as output</p>
</span></dd></dl><dl class="parameter returns"><dt class="returns"> [Returns] </dt><dd><span class="markdown"><p>An object with this entity's <code>_x</code>, <code>_y</code>, <code>_w</code>, and <code>_h</code> values. If an object is passed in, it will be reused rather than creating a new object.</p>
</span></dd></dl></div><div class="note"><span class="markdown"><p><strong>Note:</strong> The keys have an underscore prefix. This is due to the x, y, w, h properties being setters and getters that wrap the underlying properties with an underscore (_x, _y, _w, _h).</p>
</span></div></div><div class="doclet" id="-rotation"><a href="#doc-nav" class="doc-top">Back to top</a><h2 class="doclet-header">.rotation</h2><div class="doc-source"><a href="https://github.com/craftyjs/Crafty/blob/5c34e4039278e39defc230858d1e83c078935f50/src/spatial/2d.js#L84-105">src/spatial/2d.js#L84-105</a></div><span class="markdown"><p>The rotation state of the entity, in clockwise degrees.
<code>this.rotation = 0</code> sets it to its original orientation; <code>this.rotation = 10</code>
sets it to 10 degrees clockwise from its original orientation;
<code>this.rotation = -10</code> sets it to 10 degrees counterclockwise from its
original orientation, etc.</p>
<p>When modified, will automatically be redrawn. Is actually a getter/setter
so when using this value for calculations and not modifying it,
use the <code>._rotation</code> property.</p>
<p><code>this.rotation = 0</code> does the same thing as <code>this.rotation = 360</code> or <code>720</code> or
<code>-360</code> or <code>36000</code> etc. So you can keep increasing or decreasing the angle for continuous
rotation. (Numerical errors do not occur until you get to millions of degrees.)</p>
<p>The default is to rotate the entity around its (initial) top-left corner; use
<code>.origin()</code> to change that.</p>
</span><div><h4>See Also</h4><ul class="see-also-list"><li><a href="#-_attr">._attr</a></li><li><a href="#-origin">.origin</a></li></ul></div></div><div class="doclet" id="-shift"><a href="#doc-nav" class="doc-top">Back to top</a><h2 class="doclet-header">.shift</h2><div class="doc-source"><a href="https://github.com/craftyjs/Crafty/blob/5c34e4039278e39defc230858d1e83c078935f50/src/spatial/2d.js#L632-643">src/spatial/2d.js#L632-643</a></div><div class="crafty-method"><code class="signature"><span class="sig-phrase"><span class="sig-qualifier">public </span><span class="sig-qualifier">this </span><span class="sig-noun">.shift</span></span><span class="sig-seperator">(</span><span class="sig-phrase"><span class="sig-qualifier">Number </span><span class="sig-noun">x</span></span><span class="sig-seperator">,</span><span class="sig-phrase"><span class="sig-qualifier"> </span><span class="sig-qualifier">Number </span><span class="sig-noun">y</span></span><span class="sig-seperator">,</span><span class="sig-phrase"><span class="sig-qualifier"> </span><span class="sig-qualifier">Number </span><span class="sig-noun">w</span></span><span class="sig-seperator">,</span><span class="sig-phrase"><span class="sig-qualifier"> </span><span class="sig-qualifier">Number </span><span class="sig-noun">h</span></span><span class="sig-seperator">)</span></code><dl class="parameter"><dt> x </dt><dd><span class="markdown"><p>Amount to move X</p>
</span></dd></dl><dl class="parameter"><dt> y </dt><dd><span class="markdown"><p>Amount to move Y</p>
</span></dd></dl><dl class="parameter"><dt> w </dt><dd><span class="markdown"><p>Amount to widen</p>
</span></dd></dl><dl class="parameter"><dt> h </dt><dd><span class="markdown"><p>Amount to increase height</p>
</span></dd></dl></div><span class="markdown"><p>Shift or move the entity by an amount. Use negative values
for an opposite direction.</p>
</span></div><div class="doclet" id="-unflip"><a href="#doc-nav" class="doc-top">Back to top</a><h2 class="doclet-header">.unflip</h2><div class="doc-source"><a href="https://github.com/craftyjs/Crafty/blob/5c34e4039278e39defc230858d1e83c078935f50/src/spatial/2d.js#L826-839">src/spatial/2d.js#L826-839</a></div><div class="triggered-events"><h4>Events</h4><div class="trigger-list"><dl class="trigger"><dt>Invalidate </dt><dd>when the entity has unflipped</dd></dl></div></div><div class="crafty-method"><code class="signature"><span class="sig-phrase"><span class="sig-qualifier">public </span><span class="sig-qualifier">this </span><span class="sig-noun">.unflip</span></span><span class="sig-seperator">(</span><span class="sig-phrase"><span class="sig-qualifier">String </span><span class="sig-noun">dir</span></span><span class="sig-seperator">)</span></code><dl class="parameter"><dt> dir </dt><dd><span class="markdown"><p>Unflip direction</p>
</span></dd></dl></div><span class="markdown"><p>Unflip entity on passed direction (if it's flipped)</p>
</span><div class="example"><h4>Example</h4><span class="markdown"><pre><code class="hljs "><span class="hljs-keyword">this</span>.unflip(<span class="hljs-string">"X"</span>)</code></pre></span></div></div><div class="doclet" id="-visible"><a href="#doc-nav" class="doc-top">Back to top</a><h2 class="doclet-header">.visible</h2><div class="doc-source"><a href="https://github.com/craftyjs/Crafty/blob/5c34e4039278e39defc230858d1e83c078935f50/src/spatial/2d.js#L113-120">src/spatial/2d.js#L113-120</a></div><span class="markdown"><p>If the entity is visible or not. Accepts a true or false value.
Can be used for optimization by setting an entities visibility to false when not needed to be drawn.</p>
<p>The entity will still exist and can be collided with but just won't be drawn.</p>
</span></div><div class="doclet" id="-w"><a href="#doc-nav" class="doc-top">Back to top</a><h2 class="doclet-header">.w</h2><div class="doc-source"><a href="https://github.com/craftyjs/Crafty/blob/5c34e4039278e39defc230858d1e83c078935f50/src/spatial/2d.js#L47-56">src/spatial/2d.js#L47-56</a></div><span class="markdown"><p>The width of the entity. When modified, will automatically be redrawn.
Is actually a getter/setter so when using this value for calculations and not modifying it,
use the <code>._w</code> property.</p>
<p>Changing this value is not recommended as canvas has terrible resize quality and DOM will just clip the image.</p>
</span><div><h4>See Also</h4><ul class="see-also-list"><li><a href="#-_attr">._attr</a></li></ul></div></div><div class="doclet" id="-within"><a href="#doc-nav" class="doc-top">Back to top</a><h2 class="doclet-header">.within</h2><div class="doc-source"><a href="https://github.com/craftyjs/Crafty/blob/5c34e4039278e39defc230858d1e83c078935f50/src/spatial/2d.js#L490-502">src/spatial/2d.js#L490-502</a></div><div class="crafty-method"><code class="signature"><span class="sig-phrase"><span class="sig-qualifier">public </span><span class="sig-qualifier">Boolean </span><span class="sig-noun">.within</span></span><span class="sig-seperator">(</span><span class="sig-phrase"><span class="sig-qualifier">Number </span><span class="sig-noun">x</span></span><span class="sig-seperator">,</span><span class="sig-phrase"><span class="sig-qualifier"> </span><span class="sig-qualifier">Number </span><span class="sig-noun">y</span></span><span class="sig-seperator">,</span><span class="sig-phrase"><span class="sig-qualifier"> </span><span class="sig-qualifier">Number </span><span class="sig-noun">w</span></span><span class="sig-seperator">,</span><span class="sig-phrase"><span class="sig-qualifier"> </span><span class="sig-qualifier">Number </span><span class="sig-noun">h</span></span><span class="sig-seperator">)</span></code><dl class="parameter"><dt> x </dt><dd><span class="markdown"><p>X position of the rect</p>
</span></dd></dl><dl class="parameter"><dt> y </dt><dd><span class="markdown"><p>Y position of the rect</p>
</span></dd></dl><dl class="parameter"><dt> w </dt><dd><span class="markdown"><p>Width of the rect</p>
</span></dd></dl><dl class="parameter"><dt> h </dt><dd><span class="markdown"><p>Height of the rect</p>
</span></dd></dl></div><div class="crafty-method"><code class="signature"><span class="sig-phrase"><span class="sig-qualifier">public </span><span class="sig-qualifier">Boolean </span><span class="sig-noun">.within</span></span><span class="sig-seperator">(</span><span class="sig-phrase"><span class="sig-qualifier">Object </span><span class="sig-noun">rect</span></span><span class="sig-seperator">)</span></code><dl class="parameter"><dt> rect </dt><dd><span class="markdown"><p>An object that must have the <code>_x, _y, _w, _h</code> values as properties</p>
</span></dd></dl></div><span class="markdown"><p>Determines if this current entity is within another rectangle.</p>
</span></div><div class="doclet" id="-x"><a href="#doc-nav" class="doc-top">Back to top</a><h2 class="doclet-header">.x</h2><div class="doc-source"><a href="https://github.com/craftyjs/Crafty/blob/5c34e4039278e39defc230858d1e83c078935f50/src/spatial/2d.js#L29-36">src/spatial/2d.js#L29-36</a></div><span class="markdown"><p>The <code>x</code> position on the stage. When modified, will automatically be redrawn.
Is actually a getter/setter so when using this value for calculations and not modifying it,
use the <code>._x</code> property.</p>
</span><div><h4>See Also</h4><ul class="see-also-list"><li><a href="#-_attr">._attr</a></li></ul></div></div><div class="doclet" id="-y"><a href="#doc-nav" class="doc-top">Back to top</a><h2 class="doclet-header">.y</h2><div class="doc-source"><a href="https://github.com/craftyjs/Crafty/blob/5c34e4039278e39defc230858d1e83c078935f50/src/spatial/2d.js#L38-45">src/spatial/2d.js#L38-45</a></div><span class="markdown"><p>The <code>y</code> position on the stage. When modified, will automatically be redrawn.
Is actually a getter/setter so when using this value for calculations and not modifying it,
use the <code>._y</code> property.</p>
</span><div><h4>See Also</h4><ul class="see-also-list"><li><a href="#-_attr">._attr</a></li></ul></div></div><div class="doclet" id="-z"><a href="#doc-nav" class="doc-top">Back to top</a><h2 class="doclet-header">.z</h2><div class="doc-source"><a href="https://github.com/craftyjs/Crafty/blob/5c34e4039278e39defc230858d1e83c078935f50/src/spatial/2d.js#L69-82">src/spatial/2d.js#L69-82</a></div><span class="markdown"><p>The <code>z</code> index on the stage. When modified, will automatically be redrawn.
Is actually a getter/setter so when using this value for calculations and not modifying it,
use the <code>._z</code> property.</p>
<p>A higher <code>z</code> value will be closer to the front of the stage. A smaller <code>z</code> value will be closer to the back.
A global Z index is produced based on its <code>z</code> value as well as the GID (which entity was created first).
Therefore entities will naturally maintain order depending on when it was created if same z value.</p>
<p><code>z</code> is required to be an integer, e.g. <code>z=11.2</code> is not allowed.</p>
</span><div><h4>See Also</h4><ul class="see-also-list"><li><a href="#-_attr">._attr</a></li></ul></div></div></div></div></div></div>
</div>
</div>
<div class="clearer"></div>
<div id="footer">
<div id="contact">
<a href="https://groups.google.com/forum/#!forum/craftyjs">
<img src="/images/google.png" />
google groups</a>
<a href="mailto:starwed@gmail.com">
<img src="/images/email.png" />
starwed@gmail.com</a>
<a href="https://github.com/craftyjs/Crafty">
<img src="/images/github.png" />
github</a>
</div>
<ul>
<li><a href="/">Home</a></li>
<li><a href="/getting-started/">Getting started</a></li>
<li><a href="/documentation/">Documentation</a></li>
<li><a href="/api/">API</a></li>
<li><a href="https://groups.google.com/forum/#!forum/craftyjs">Forum</a></li>
<li><a href="/components/">Modules</a></li>
<li class="emph"><a href="/#install">Download</a></li>
</ul>
<p>
© Crafty 2010-2015. Crafty is distributed under the <a href="http://en.wikipedia.org/wiki/MIT_License">MIT</a> or <a href="http://en.wikipedia.org/wiki/GNU_General_Public_License">GPL</a>
license.
</p>
</div>
</div>
</body>
</html>