-
Notifications
You must be signed in to change notification settings - Fork 76
/
Crafty-sprite.html
119 lines (107 loc) · 17 KB
/
Crafty-sprite.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
<!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 - Crafty.sprite</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-raycast.html">Crafty.raycast()</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-imageWhitelist.html">Crafty.imageWhitelist()</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="Controllable.html">Controllable</a></li><li><a href="Controls.html">Controls</a></li><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="SolidMBR.html">SolidMBR</a></li><li><a href="WiredAreaMap.html">WiredAreaMap</a></li><li><a href="WiredHitBox.html">WiredHitBox</a></li><li><a href="WiredMBR.html">WiredMBR</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="CanvasLayer.html">CanvasLayer</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-createLayer.html">Crafty.createLayer()</a></li><li><a href="Crafty-defaultShader.html">Crafty.defaultShader()</a></li><li><a href="Crafty-domHelper.html">Crafty.domHelper</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-WebGLShader.html">Crafty.WebGLShader()</a></li><li><a href="DOM.html">DOM</a></li><li><a href="DomLayer.html">DomLayer</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="Renderable.html">Renderable</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><li><a href="WebGLLayer.html">WebGLLayer</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-findPointerEventTargetByComponent.html">Crafty.findPointerEventTargetByComponent()</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-multitouch.html">Crafty.multitouch()</a></li><li><a href="Crafty-selected.html">Crafty.selected</a></li><li><a href="Crafty-translatePointerEventCoordinates.html">Crafty.translatePointerEventCoordinates()</a></li><li><a href="Keyboard.html">Keyboard</a></li><li><a href="KeyboardState.html">KeyboardState</a></li><li><a href="KeyboardSystem.html">KeyboardSystem</a></li><li><a href="Mouse.html">Mouse</a></li><li><a href="MouseDrag.html">MouseDrag</a></li><li><a href="MouseState.html">MouseState</a></li><li><a href="MouseSystem.html">MouseSystem</a></li><li><a href="MouseWheel.html">MouseWheel</a></li><li><a href="Touch.html">Touch</a></li><li><a href="TouchState.html">TouchState</a></li><li><a href="TouchSystem.html">TouchSystem</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>Crafty.sprite() <span></span></h1><div class="doclet" id="Crafty-sprite"><div class="doc-source"><a href="https://github.com/craftyjs/Crafty/blob/deff7307581e69badb10b3ca08c7d0a6675d80c2/src/graphics/sprite.js#L28-L81">src/graphics/sprite.js#L28-L81</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">Crafty.sprite</span></span><span class="sig-seperator">([</span><span class="sig-phrase"><span class="sig-qualifier">Number </span><span class="sig-noun">tile</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">Number </span><span class="sig-noun">tileh</span></span><span class="sig-seperator">]],</span><span class="sig-phrase"><span class="sig-qualifier"> </span><span class="sig-qualifier">String </span><span class="sig-noun">url</span></span><span class="sig-seperator">,</span><span class="sig-phrase"><span class="sig-qualifier"> </span><span class="sig-qualifier">Object </span><span class="sig-noun">map</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">paddingX</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">paddingY</span></span><span class="sig-seperator">[,</span><span class="sig-phrase"><span class="sig-qualifier"> </span><span class="sig-qualifier">Boolean </span><span class="sig-noun">paddingAroundBorder</span></span><span class="sig-seperator">]]])</span></code><dl class="parameter"><dt> tile </dt><dd><span class="markdown"><p>Tile size of the sprite map, defaults to 1</p>
</span></dd></dl><dl class="parameter"><dt> tileh </dt><dd><span class="markdown"><p>Height of the tile; if provided, tile is interpreted as the width</p>
</span></dd></dl><dl class="parameter"><dt> url </dt><dd><span class="markdown"><p>URL of the sprite image</p>
</span></dd></dl><dl class="parameter"><dt> map </dt><dd><span class="markdown"><p>Object where the key is what becomes a new component and the value points to a position on the sprite map</p>
</span></dd></dl><dl class="parameter"><dt> paddingX </dt><dd><span class="markdown"><p>Horizontal space in between tiles. Defaults to 0.</p>
</span></dd></dl><dl class="parameter"><dt> paddingY </dt><dd><span class="markdown"><p>Vertical space in between tiles. Defaults to paddingX.</p>
</span></dd></dl><dl class="parameter"><dt> paddingAroundBorder </dt><dd><span class="markdown"><p>If padding should be applied around the border of the sprite sheet. If enabled the first tile starts at (paddingX,paddingY) instead of (0,0). Defaults to false.</p>
</span></dd></dl></div><span class="markdown"><p>Generates components based on positions in a sprite image to be applied to entities.</p>
<p>Accepts a tile size, URL and map for the name of the sprite and its position.</p>
<p>The position must be an array containing the position of the sprite where index <code>0</code>
is the <code>x</code> position, <code>1</code> is the <code>y</code> position and optionally <code>2</code> is the width and <code>3</code>
is the height. If the sprite map has padding, pass the values for the <code>x</code> padding
or <code>y</code> padding. If they are the same, just add one value.</p>
<p>If the sprite image has no consistent tile size, <code>1</code> or no argument need be
passed for tile size.</p>
<p>Entities that add the generated components are also given the <code>2D</code> component, and
a component called <code>Sprite</code>.</p>
</span><div class="example"><h4>Example</h4><span class="markdown"><pre><code class="hljs ">Crafty.sprite(<span class="hljs-string">"imgs/spritemap6.png"</span>, {<span class="hljs-attr">flower</span>:[<span class="hljs-number">0</span>,<span class="hljs-number">0</span>,<span class="hljs-number">20</span>,<span class="hljs-number">30</span>]});
<span class="hljs-keyword">var</span> flower_entity = Crafty.e(<span class="hljs-string">"2D, DOM, flower"</span>);</code></pre><p>The first line creates a component called <code>flower</code> associated with the sub-image of
spritemap6.png with top-left corner (0,0), width 20 pixels, and height 30 pixels.
The second line creates an entity with that image. (Note: The <code>2D</code> is not really
necessary here, because adding the <code>flower</code> component automatically also adds the
<code>2D</code> component.)</p>
<pre><code class="hljs ">Crafty.sprite(<span class="hljs-number">50</span>, <span class="hljs-string">"imgs/spritemap6.png"</span>, {<span class="hljs-attr">flower</span>:[<span class="hljs-number">0</span>,<span class="hljs-number">0</span>], <span class="hljs-attr">grass</span>:[<span class="hljs-number">0</span>,<span class="hljs-number">1</span>,<span class="hljs-number">3</span>,<span class="hljs-number">1</span>]});</code></pre><p>In this case, the <code>flower</code> component is pixels 0 <= x < 50, 0 <= y < 50, and the
<code>grass</code> component is pixels 0 <= x < 150, 50 <= y < 100. (The <code>3</code> means grass has a
width of 3 tiles, i.e. 150 pixels.)</p>
<pre><code class="hljs ">Crafty.sprite(<span class="hljs-number">50</span>, <span class="hljs-number">100</span>, <span class="hljs-string">"imgs/spritemap6.png"</span>, {<span class="hljs-attr">flower</span>:[<span class="hljs-number">0</span>,<span class="hljs-number">0</span>], <span class="hljs-attr">grass</span>:[<span class="hljs-number">0</span>,<span class="hljs-number">1</span>]}, <span class="hljs-number">10</span>);</code></pre><p>In this case, each tile is 50x100, and there is a spacing of 10 pixels between
consecutive tiles. So <code>flower</code> is pixels 0 <= x < 50, 0 <= y < 100, and <code>grass</code> is
pixels 0 <= x < 50, 110 <= y < 210.</p>
</span></div><div><h4>See Also</h4><ul class="see-also-list"><li><a href="Sprite.html">Sprite</a></li></ul></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 License</a>.
</p>
</div>
</div>
</body>
</html>