PageRenderTime 51ms CodeModel.GetById 20ms RepoModel.GetById 0ms app.codeStats 0ms

/docs/Tileset.js.html

https://gitlab.com/lobsterhands/phaser
HTML | 759 lines | 566 code | 190 blank | 3 comment | 0 complexity | e5006a27fa9132a2e17721b716c84da1 MD5 | raw file
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="utf-8">
  5. <title>Phaser Source: tilemap/Tileset.js</title>
  6. <!--[if lt IE 9]>
  7. <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
  8. <![endif]-->
  9. <link type="text/css" rel="stylesheet" href="styles/sunlight.default.css">
  10. <link type="text/css" rel="stylesheet" href="styles/site.cerulean.css">
  11. </head>
  12. <body>
  13. <div class="container-fluid">
  14. <div class="navbar navbar-fixed-top navbar-inverse">
  15. <div class="navbar-inner">
  16. <a class="brand" href="index.html">Phaser</a>
  17. <ul class="nav">
  18. <li class="dropdown">
  19. <a href="namespaces.list.html" class="dropdown-toggle" data-toggle="dropdown">Namespaces<b
  20. class="caret"></b></a>
  21. <ul class="dropdown-menu ">
  22. <li class="class-depth-0">
  23. <a href="Phaser.html">Phaser</a>
  24. </li>
  25. </ul>
  26. </li>
  27. <li class="dropdown">
  28. <a href="classes.list.html" class="dropdown-toggle" data-toggle="dropdown">Classes<b
  29. class="caret"></b></a>
  30. <ul class="dropdown-menu ">
  31. <li class="class-depth-1">
  32. <a href="Phaser.Animation.html">Animation</a>
  33. </li>
  34. <li class="class-depth-1">
  35. <a href="Phaser.AnimationManager.html">AnimationManager</a>
  36. </li>
  37. <li class="class-depth-1">
  38. <a href="Phaser.AnimationParser.html">AnimationParser</a>
  39. </li>
  40. <li class="class-depth-1">
  41. <a href="Phaser.BitmapData.html">BitmapData</a>
  42. </li>
  43. <li class="class-depth-1">
  44. <a href="Phaser.BitmapText.html">BitmapText</a>
  45. </li>
  46. <li class="class-depth-1">
  47. <a href="Phaser.Button.html">Button</a>
  48. </li>
  49. <li class="class-depth-1">
  50. <a href="Phaser.Cache.html">Cache</a>
  51. </li>
  52. <li class="class-depth-1">
  53. <a href="Phaser.Camera.html">Camera</a>
  54. </li>
  55. <li class="class-depth-1">
  56. <a href="Phaser.Canvas.html">Canvas</a>
  57. </li>
  58. <li class="class-depth-1">
  59. <a href="Phaser.Circle.html">Circle</a>
  60. </li>
  61. <li class="class-depth-1">
  62. <a href="Phaser.Color.html">Color</a>
  63. </li>
  64. <li class="class-depth-1">
  65. <a href="Phaser.Device.html">Device</a>
  66. </li>
  67. <li class="class-depth-1">
  68. <a href="Phaser.Easing.html">Easing</a>
  69. </li>
  70. <li class="class-depth-2">
  71. <a href="Phaser.Easing.Back.html">Back</a>
  72. </li>
  73. <li class="class-depth-2">
  74. <a href="Phaser.Easing.Bounce.html">Bounce</a>
  75. </li>
  76. <li class="class-depth-2">
  77. <a href="Phaser.Easing.Circular.html">Circular</a>
  78. </li>
  79. <li class="class-depth-2">
  80. <a href="Phaser.Easing.Cubic.html">Cubic</a>
  81. </li>
  82. <li class="class-depth-2">
  83. <a href="Phaser.Easing.Elastic.html">Elastic</a>
  84. </li>
  85. <li class="class-depth-2">
  86. <a href="Phaser.Easing.Exponential.html">Exponential</a>
  87. </li>
  88. <li class="class-depth-2">
  89. <a href="Phaser.Easing.Linear.html">Linear</a>
  90. </li>
  91. <li class="class-depth-2">
  92. <a href="Phaser.Easing.Quadratic.html">Quadratic</a>
  93. </li>
  94. <li class="class-depth-2">
  95. <a href="Phaser.Easing.Quartic.html">Quartic</a>
  96. </li>
  97. <li class="class-depth-2">
  98. <a href="Phaser.Easing.Quintic.html">Quintic</a>
  99. </li>
  100. <li class="class-depth-2">
  101. <a href="Phaser.Easing.Sinusoidal.html">Sinusoidal</a>
  102. </li>
  103. <li class="class-depth-1">
  104. <a href="Phaser.Ellipse.html">Ellipse</a>
  105. </li>
  106. <li class="class-depth-1">
  107. <a href="Phaser.Events.html">Events</a>
  108. </li>
  109. <li class="class-depth-1">
  110. <a href="Phaser.Filter.html">Filter</a>
  111. </li>
  112. <li class="class-depth-1">
  113. <a href="Phaser.Frame.html">Frame</a>
  114. </li>
  115. <li class="class-depth-1">
  116. <a href="Phaser.FrameData.html">FrameData</a>
  117. </li>
  118. <li class="class-depth-1">
  119. <a href="Phaser.Game.html">Game</a>
  120. </li>
  121. <li class="class-depth-1">
  122. <a href="Phaser.GameObjectCreator.html">GameObjectCreator</a>
  123. </li>
  124. <li class="class-depth-1">
  125. <a href="Phaser.GameObjectFactory.html">GameObjectFactory</a>
  126. </li>
  127. <li class="class-depth-1">
  128. <a href="Phaser.Gamepad.html">Gamepad</a>
  129. </li>
  130. <li class="class-depth-1">
  131. <a href="Phaser.GamepadButton.html">GamepadButton</a>
  132. </li>
  133. <li class="class-depth-1">
  134. <a href="Phaser.Graphics.html">Graphics</a>
  135. </li>
  136. <li class="class-depth-1">
  137. <a href="Phaser.Group.html">Group</a>
  138. </li>
  139. <li class="class-depth-1">
  140. <a href="Phaser.Image.html">Image</a>
  141. </li>
  142. <li class="class-depth-1">
  143. <a href="Phaser.Input.html">Input</a>
  144. </li>
  145. <li class="class-depth-1">
  146. <a href="Phaser.InputHandler.html">InputHandler</a>
  147. </li>
  148. <li class="class-depth-1">
  149. <a href="Phaser.Key.html">Key</a>
  150. </li>
  151. <li class="class-depth-1">
  152. <a href="Phaser.Keyboard.html">Keyboard</a>
  153. </li>
  154. <li class="class-depth-1">
  155. <a href="Phaser.Line.html">Line</a>
  156. </li>
  157. <li class="class-depth-1">
  158. <a href="Phaser.LinkedList.html">LinkedList</a>
  159. </li>
  160. <li class="class-depth-1">
  161. <a href="Phaser.Loader.html">Loader</a>
  162. </li>
  163. <li class="class-depth-1">
  164. <a href="Phaser.LoaderParser.html">LoaderParser</a>
  165. </li>
  166. <li class="class-depth-1">
  167. <a href="Phaser.Math.html">Math</a>
  168. </li>
  169. <li class="class-depth-1">
  170. <a href="Phaser.Mouse.html">Mouse</a>
  171. </li>
  172. <li class="class-depth-1">
  173. <a href="Phaser.MSPointer.html">MSPointer</a>
  174. </li>
  175. <li class="class-depth-1">
  176. <a href="Phaser.Net.html">Net</a>
  177. </li>
  178. <li class="class-depth-1">
  179. <a href="Phaser.Particle.html">Particle</a>
  180. </li>
  181. <li class="class-depth-1">
  182. <a href="Phaser.Particles.html">Particles</a>
  183. </li>
  184. <li class="class-depth-3">
  185. <a href="Phaser.Particles.Arcade.Emitter.html">Emitter</a>
  186. </li>
  187. <li class="class-depth-1">
  188. <a href="Phaser.Physics.html">Physics</a>
  189. </li>
  190. <li class="class-depth-2">
  191. <a href="Phaser.Physics.Arcade.html">Arcade</a>
  192. </li>
  193. <li class="class-depth-3">
  194. <a href="Phaser.Physics.Arcade.Body.html">Body</a>
  195. </li>
  196. <li class="class-depth-2">
  197. <a href="Phaser.Physics.Ninja.html">Ninja</a>
  198. </li>
  199. <li class="class-depth-3">
  200. <a href="Phaser.Physics.Ninja.AABB.html">AABB</a>
  201. </li>
  202. <li class="class-depth-3">
  203. <a href="Phaser.Physics.Ninja.Body.html">Body</a>
  204. </li>
  205. <li class="class-depth-3">
  206. <a href="Phaser.Physics.Ninja.Circle.html">Circle</a>
  207. </li>
  208. <li class="class-depth-3">
  209. <a href="Phaser.Physics.Ninja.Tile.html">Tile</a>
  210. </li>
  211. <li class="class-depth-2">
  212. <a href="Phaser.Physics.P2.html">P2</a>
  213. </li>
  214. <li class="class-depth-3">
  215. <a href="Phaser.Physics.P2.Body.html">Body</a>
  216. </li>
  217. <li class="class-depth-3">
  218. <a href="Phaser.Physics.P2.BodyDebug.html">BodyDebug</a>
  219. </li>
  220. <li class="class-depth-3">
  221. <a href="Phaser.Physics.P2.CollisionGroup.html">CollisionGroup</a>
  222. </li>
  223. <li class="class-depth-3">
  224. <a href="Phaser.Physics.P2.ContactMaterial.html">ContactMaterial</a>
  225. </li>
  226. <li class="class-depth-3">
  227. <a href="Phaser.Physics.P2.DistanceConstraint.html">DistanceConstraint</a>
  228. </li>
  229. <li class="class-depth-3">
  230. <a href="Phaser.Physics.P2.FixtureList.html">FixtureList</a>
  231. </li>
  232. <li class="class-depth-3">
  233. <a href="Phaser.Physics.P2.GearConstraint.html">GearConstraint</a>
  234. </li>
  235. <li class="class-depth-3">
  236. <a href="Phaser.Physics.P2.InversePointProxy.html">InversePointProxy</a>
  237. </li>
  238. <li class="class-depth-3">
  239. <a href="Phaser.Physics.P2.LockConstraint.html">LockConstraint</a>
  240. </li>
  241. <li class="class-depth-3">
  242. <a href="Phaser.Physics.P2.Material.html">Material</a>
  243. </li>
  244. <li class="class-depth-3">
  245. <a href="Phaser.Physics.P2.PointProxy.html">PointProxy</a>
  246. </li>
  247. <li class="class-depth-3">
  248. <a href="Phaser.Physics.P2.PrismaticConstraint.html">PrismaticConstraint</a>
  249. </li>
  250. <li class="class-depth-3">
  251. <a href="Phaser.Physics.P2.RevoluteConstraint.html">RevoluteConstraint</a>
  252. </li>
  253. <li class="class-depth-3">
  254. <a href="Phaser.Physics.P2.Spring.html">Spring</a>
  255. </li>
  256. <li class="class-depth-1">
  257. <a href="Phaser.Plugin.html">Plugin</a>
  258. </li>
  259. <li class="class-depth-1">
  260. <a href="Phaser.PluginManager.html">PluginManager</a>
  261. </li>
  262. <li class="class-depth-1">
  263. <a href="Phaser.Point.html">Point</a>
  264. </li>
  265. <li class="class-depth-1">
  266. <a href="Phaser.Pointer.html">Pointer</a>
  267. </li>
  268. <li class="class-depth-1">
  269. <a href="Phaser.Polygon.html">Polygon</a>
  270. </li>
  271. <li class="class-depth-1">
  272. <a href="Phaser.QuadTree.html">QuadTree</a>
  273. </li>
  274. <li class="class-depth-1">
  275. <a href="Phaser.RandomDataGenerator.html">RandomDataGenerator</a>
  276. </li>
  277. <li class="class-depth-1">
  278. <a href="Phaser.Rectangle.html">Rectangle</a>
  279. </li>
  280. <li class="class-depth-1">
  281. <a href="Phaser.RenderTexture.html">RenderTexture</a>
  282. </li>
  283. <li class="class-depth-1">
  284. <a href="Phaser.RequestAnimationFrame.html">RequestAnimationFrame</a>
  285. </li>
  286. <li class="class-depth-1">
  287. <a href="Phaser.RetroFont.html">RetroFont</a>
  288. </li>
  289. <li class="class-depth-1">
  290. <a href="Phaser.ScaleManager.html">ScaleManager</a>
  291. </li>
  292. <li class="class-depth-1">
  293. <a href="Phaser.Signal.html">Signal</a>
  294. </li>
  295. <li class="class-depth-1">
  296. <a href="Phaser.SignalBinding.html">SignalBinding</a>
  297. </li>
  298. <li class="class-depth-1">
  299. <a href="Phaser.SinglePad.html">SinglePad</a>
  300. </li>
  301. <li class="class-depth-1">
  302. <a href="Phaser.Sound.html">Sound</a>
  303. </li>
  304. <li class="class-depth-1">
  305. <a href="Phaser.SoundManager.html">SoundManager</a>
  306. </li>
  307. <li class="class-depth-1">
  308. <a href="Phaser.Sprite.html">Sprite</a>
  309. </li>
  310. <li class="class-depth-1">
  311. <a href="Phaser.SpriteBatch.html">SpriteBatch</a>
  312. </li>
  313. <li class="class-depth-1">
  314. <a href="Phaser.Stage.html">Stage</a>
  315. </li>
  316. <li class="class-depth-1">
  317. <a href="Phaser.State.html">State</a>
  318. </li>
  319. <li class="class-depth-1">
  320. <a href="Phaser.StateManager.html">StateManager</a>
  321. </li>
  322. <li class="class-depth-1">
  323. <a href="Phaser.Text.html">Text</a>
  324. </li>
  325. <li class="class-depth-1">
  326. <a href="Phaser.Tile.html">Tile</a>
  327. </li>
  328. <li class="class-depth-1">
  329. <a href="Phaser.Tilemap.html">Tilemap</a>
  330. </li>
  331. <li class="class-depth-1">
  332. <a href="Phaser.TilemapLayer.html">TilemapLayer</a>
  333. </li>
  334. <li class="class-depth-1">
  335. <a href="Phaser.TilemapParser.html">TilemapParser</a>
  336. </li>
  337. <li class="class-depth-1">
  338. <a href="Phaser.Tileset.html">Tileset</a>
  339. </li>
  340. <li class="class-depth-1">
  341. <a href="Phaser.TileSprite.html">TileSprite</a>
  342. </li>
  343. <li class="class-depth-1">
  344. <a href="Phaser.Time.html">Time</a>
  345. </li>
  346. <li class="class-depth-1">
  347. <a href="Phaser.Timer.html">Timer</a>
  348. </li>
  349. <li class="class-depth-1">
  350. <a href="Phaser.TimerEvent.html">TimerEvent</a>
  351. </li>
  352. <li class="class-depth-1">
  353. <a href="Phaser.Touch.html">Touch</a>
  354. </li>
  355. <li class="class-depth-1">
  356. <a href="Phaser.Tween.html">Tween</a>
  357. </li>
  358. <li class="class-depth-1">
  359. <a href="Phaser.TweenManager.html">TweenManager</a>
  360. </li>
  361. <li class="class-depth-1">
  362. <a href="Phaser.Utils.html">Utils</a>
  363. </li>
  364. <li class="class-depth-2">
  365. <a href="Phaser.Utils.Debug.html">Debug</a>
  366. </li>
  367. <li class="class-depth-1">
  368. <a href="Phaser.World.html">World</a>
  369. </li>
  370. </ul>
  371. </li>
  372. </ul>
  373. </div>
  374. </div>
  375. <div class="row-fluid">
  376. <div class="span12">
  377. <div id="main">
  378. <h1 class="page-title">Source: tilemap/Tileset.js</h1>
  379. <section>
  380. <article>
  381. <pre class="sunlight-highlight-javascript linenums">/**
  382. * @author Richard Davey &lt;rich@photonstorm.com>
  383. * @copyright 2014 Photon Storm Ltd.
  384. * @license {@link https://github.com/photonstorm/phaser/blob/master/license.txt|MIT License}
  385. */
  386. /**
  387. * A Tile set is a combination of an image containing the tiles and collision data per tile.
  388. * You should not normally instantiate this class directly.
  389. *
  390. * @class Phaser.Tileset
  391. * @constructor
  392. * @param {string} name - The name of the tileset in the map data.
  393. * @param {number} firstgid - The Tiled firstgid value. In non-Tiled data this should be considered the starting index value of the first tile in this set.
  394. * @param {number} [width=32] - Width of each tile in pixels.
  395. * @param {number} [height=32] - Height of each tile in pixels.
  396. * @param {number} [margin=0] - The amount of margin around the tilesheet.
  397. * @param {number} [spacing=0] - The amount of spacing between each tile in the sheet.
  398. * @param {object} [properties] - Tileset properties.
  399. */
  400. Phaser.Tileset = function (name, firstgid, width, height, margin, spacing, properties) {
  401. if (typeof width === 'undefined' || width &lt;= 0) { width = 32; }
  402. if (typeof height === 'undefined' || height &lt;= 0) { height = 32; }
  403. if (typeof margin === 'undefined') { margin = 0; }
  404. if (typeof spacing === 'undefined') { spacing = 0; }
  405. /**
  406. * @property {string} name - The name of the Tileset.
  407. */
  408. this.name = name;
  409. /**
  410. * @property {number} firstgid - The Tiled firstgid value. In non-Tiled data this should be considered the starting index value of the first tile in this set.
  411. */
  412. this.firstgid = firstgid;
  413. /**
  414. * @property {number} tileWidth - The width of a tile in pixels.
  415. */
  416. this.tileWidth = width;
  417. /**
  418. * @property {number} tileHeight - The height of a tile in pixels.
  419. */
  420. this.tileHeight = height;
  421. /**
  422. * @property {number} tileMargin - The margin around the tiles in the tileset.
  423. */
  424. this.tileMargin = margin;
  425. /**
  426. * @property {number} tileSpacing - The spacing in pixels between each tile in the tileset.
  427. */
  428. this.tileSpacing = spacing;
  429. /**
  430. * @property {object} properties - Tileset specific properties (typically defined in the Tiled editor).
  431. */
  432. this.properties = properties;
  433. /**
  434. * @property {object} image - The image used for rendering. This is a reference to the image stored in Phaser.Cache.
  435. */
  436. this.image = null;
  437. /**
  438. * @property {number} rows - The number of rows in the tile sheet.
  439. */
  440. this.rows = 0;
  441. /**
  442. * @property {number} columns - The number of columns in the tile sheet.
  443. */
  444. this.columns = 0;
  445. /**
  446. * @property {number} total - The total number of tiles in the tilesheet.
  447. */
  448. this.total = 0;
  449. /**
  450. * @property {array} draw - The tile drawImage look-up table
  451. * @private
  452. */
  453. this.drawCoords = [];
  454. };
  455. Phaser.Tileset.prototype = {
  456. /**
  457. * Draws a tile from this Tileset at the given coordinates on the context.
  458. *
  459. * @method Phaser.Tileset#draw
  460. * @param {HTMLCanvasContext} context - The context to draw the tile onto.
  461. * @param {number} x - The x coordinate to draw to.
  462. * @param {number} y - The y coordinate to draw to.
  463. * @param {number} index - The index of the tile within the set to draw.
  464. */
  465. draw: function (context, x, y, index) {
  466. if (!this.image || !this.drawCoords[index])
  467. {
  468. return;
  469. }
  470. context.drawImage(
  471. this.image,
  472. this.drawCoords[index][0],
  473. this.drawCoords[index][1],
  474. this.tileWidth,
  475. this.tileHeight,
  476. x,
  477. y,
  478. this.tileWidth,
  479. this.tileHeight
  480. );
  481. },
  482. /**
  483. * Adds a reference from this Tileset to an Image stored in the Phaser.Cache.
  484. *
  485. * @method Phaser.Tileset#setImage
  486. * @param {Image} image - The image this tileset will use to draw with.
  487. */
  488. setImage: function (image) {
  489. this.image = image;
  490. this.rows = Math.round((image.height - this.tileMargin) / (this.tileHeight + this.tileSpacing));
  491. this.columns = Math.round((image.width - this.tileMargin) / (this.tileWidth + this.tileSpacing));
  492. this.total = this.rows * this.columns;
  493. // Create the index look-up
  494. this.drawCoords.length = 0;
  495. var tx = this.tileMargin;
  496. var ty = this.tileMargin;
  497. var i = this.firstgid;
  498. for (var y = 0; y &lt; this.rows; y++)
  499. {
  500. for (var x = 0; x &lt; this.columns; x++)
  501. {
  502. this.drawCoords[i] = [ tx, ty ];
  503. tx += this.tileWidth + this.tileSpacing;
  504. i++;
  505. }
  506. tx = this.tileMargin;
  507. ty += this.tileHeight + this.tileSpacing;
  508. }
  509. },
  510. /**
  511. * Sets tile spacing and margins.
  512. *
  513. * @method Phaser.Tileset#setSpacing
  514. * @param {number} [tileMargin] - The margin around the tiles in the sheet.
  515. * @param {number} [tileSpacing] - The spacing between the tiles in the sheet.
  516. */
  517. setSpacing: function (margin, spacing) {
  518. this.tileMargin = margin;
  519. this.tileSpacing = spacing;
  520. this.setImage(this.image);
  521. }
  522. };
  523. Phaser.Tileset.prototype.constructor = Phaser.Tileset;
  524. </pre>
  525. </article>
  526. </section>
  527. </div>
  528. <div class="clearfix"></div>
  529. <footer>
  530. <span class="copyright">
  531. Phaser Copyright © 2012-2014 Photon Storm Ltd.
  532. </span>
  533. <br />
  534. <span class="jsdoc-message">
  535. Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.3.0-dev</a>
  536. on Fri Apr 11 2014 13:25:03 GMT+0100 (BST) using the <a href="https://github.com/terryweiss/docstrap">DocStrap template</a>.
  537. </span>
  538. </footer>
  539. </div>
  540. <br clear="both">
  541. </div>
  542. </div>
  543. <script src="scripts/sunlight.js"></script>
  544. <script src="scripts/sunlight.javascript.js"></script>
  545. <script src="scripts/sunlight-plugin.doclinks.js"></script>
  546. <script src="scripts/sunlight-plugin.linenumbers.js"></script>
  547. <script src="scripts/sunlight-plugin.menu.js"></script>
  548. <script src="scripts/jquery.min.js"></script>
  549. <script src="scripts/jquery.scrollTo.js"></script>
  550. <script src="scripts/jquery.localScroll.js"></script>
  551. <script src="scripts/bootstrap-dropdown.js"></script>
  552. <script src="scripts/toc.js"></script>
  553. <script> Sunlight.highlightAll({lineNumbers:true, showMenu: true, enableDoclinks :true}); </script>
  554. <script>
  555. $( function () {
  556. $( "#toc" ).toc( {
  557. anchorName : function(i, heading, prefix) {
  558. return $(heading).attr("id") || ( prefix + i );
  559. },
  560. selectors : "h1,h2,h3,h4",
  561. showAndHide : false,
  562. scrollTo : 60
  563. } );
  564. $( "#toc>ul" ).addClass( "nav nav-pills nav-stacked" );
  565. $( "#main span[id^='toc']" ).addClass( "toc-shim" );
  566. } );
  567. </script>
  568. </body>
  569. </html>