API Documentation for: 0.2.8
Show:

File:DisplayObject.js

  1. /**
  2. * @module Pixi Flash
  3. * @namespace pixiflash
  4. */
  5. (function(undefined)
  6. {
  7. var Point = PIXI.Point;
  8. var ColorFilter = pixiflash.ColorFilter;
  9. var uniqueId = 0;
  10. /**
  11. * Mixins for the display objects used for bridging CreateJS over to PIXI.
  12. * @class DisplayObject
  13. */
  14. var DisplayObject = function()
  15. {
  16. this.id = ++uniqueId;
  17. //mark these objects so that we can recognize them internally.
  18. this._isPixiFlash = true;
  19. /**
  20. * x and y skew of the display object, with values in radians.
  21. * @property {PIXI.Point} skew
  22. */
  23. this.skew = new Point();
  24. /**
  25. * Rotation of the display object, with values in radians.
  26. * @property {Number} rotation
  27. */
  28. this._rotation = 0;
  29. this._srB = 0;
  30. this._srC = 0;
  31. this._crA = 1;
  32. this._crD = 1;
  33. this._cachedRotY = 0;
  34. this._cachedRotX = 0;
  35. /**
  36. * If false, the tick will not run on this display object (or its children). This can provide some performance benefits.
  37. * In addition to preventing the "tick" event from being dispatched, it will also prevent tick related updates
  38. * on some display objects (ex. Sprite & MovieClip frame advancing, DOMElement visibility handling).
  39. * @property tickEnabled
  40. * @type Boolean
  41. * @default true
  42. **/
  43. this.tickEnabled = true;
  44. //remove all listeners on this instance, because the CreateJS published files from flash
  45. //makes prototypes in a way that breaks normal PIXI listener usage.
  46. this.removeAllListeners();
  47.  
  48. // Bound functions need to be bound later
  49. this.boundMaskChanged = false;
  50.  
  51. //initialize tint variables:
  52. this._lastComputedTint = this._lastSelfTint = this._lastParentTint = this._selfTint = 0xFFFFFF;
  53. this.__filters = null;
  54. };
  55.  
  56. var p = DisplayObject.prototype;
  57. var DEG_TO_RAD = Math.PI / 180;
  58. var RAD_TO_DEG = 180 / Math.PI;
  59. var PI_2 = Math.PI * 2;
  60. Object.defineProperties(p,
  61. {
  62. /**
  63. * Private array of filters - for interpretation of CJS ColorFilters as PIXI tint
  64. * @property {Array} _filters
  65. */
  66. _filters:
  67. {
  68. enumerable: true,
  69. get: function() { return this.__filters; },
  70. set: function(value)
  71. {
  72. if(value.length == 1 && value[0] instanceof ColorFilter)
  73. {
  74. //ColorFilter added by CJS exporter - convert to PIXI tint
  75. this.tint = value[0].tint;
  76. this.__filters = null;
  77. }
  78. else
  79. {
  80. this.__filters = value;
  81. }
  82. }
  83. },
  84. /**
  85. * Tint to apply to this display object - Interpreted from CJS ColorFilter (multiplicative only)
  86. * @property {UInt} tint
  87. */
  88. tint:
  89. {
  90. enumerable: true,
  91. get: function() {
  92. if(this.parent && this.parent._isPixiFlash)
  93. {
  94. var selfTint = this._selfTint;
  95. var parentTint = this.parent.tint;
  96.  
  97. if(selfTint == 0xFFFFFF)
  98. this._lastComputedTint = parentTint;
  99. else if(parentTint == 0xFFFFFF)
  100. this._lastComputedTint = selfTint;
  101. if(this._selfTint != this._lastSelfTint || this.parent.tint != this._lastParentTint)
  102. {
  103. //calculate tint first time
  104. var max = 255;
  105. var parentR = (parentTint >> 16) & 0xff;
  106. var parentG = (parentTint >> 8) & 0xff;
  107. var parentB = parentTint & 0xff;
  108. var selfR = (selfTint >> 16) & 0xff;
  109. var selfG = (selfTint >> 8) & 0xff;
  110. var selfB = selfTint & 0xff;
  111.  
  112. this._lastComputedTint = (Math.round((parentR * selfR) / max) << 16) | (Math.round((parentG * selfG) / max) << 8) | Math.round((parentB * selfB) / max);
  113. }
  114.  
  115. this._lastSelfTint = selfTint;
  116. this._lastParentTint = parentTint;
  117.  
  118. return this._lastComputedTint;
  119. }
  120. else
  121. {
  122. return this._selfTint;
  123. }
  124. },
  125. set: function(value)
  126. {
  127. this._selfTint = value;
  128. }
  129. },
  130. /**
  131. * The x skew value of the display object, in degrees.
  132. * This property provides parity with CreateJS display objects.
  133. * @property {Number} skewX
  134. */
  135. skewX:
  136. {
  137. enumerable: true,
  138. get: function() { return this.skew.x * RAD_TO_DEG; },
  139. set: function(value)
  140. {
  141. this.skew.x = value * DEG_TO_RAD;
  142. }
  143. },
  144. /**
  145. * The y skew value of the display object, in degrees.
  146. * This property provides parity with CreateJS display objects.
  147. * @property {Number} skewY
  148. */
  149. skewY:
  150. {
  151. enumerable: true,
  152. get: function() { return this.skew.y * RAD_TO_DEG; },
  153. set: function(value)
  154. {
  155. this.skew.y = value * DEG_TO_RAD;
  156. }
  157. },
  158. /**
  159. * The rotation of the display object, in degrees.
  160. * This overrides the radian degrees of the PIXI display objects so that
  161. * tweening exported from Flash will work correctly.
  162. * @property {Number} rotation
  163. */
  164. rotation:
  165. {
  166. enumerable: true,
  167. get: function() { return this._rotation * RAD_TO_DEG; },
  168. set: function(value)
  169. {
  170. this._rotation = value * DEG_TO_RAD;
  171. }
  172. },
  173. /**
  174. * The x scale value of the display object.
  175. * This property provides parity with CreateJS display objects.
  176. * @property {Number} scaleX
  177. */
  178. scaleX:
  179. {
  180. enumerable: true,
  181. get: function() { return this.scale.x; },
  182. set: function(value)
  183. {
  184. this.scale.x = value;
  185. }
  186. },
  187. /**
  188. * The y scale value of the display object.
  189. * This property provides parity with CreateJS display objects.
  190. * @property {Number} scaleY
  191. */
  192. scaleY:
  193. {
  194. enumerable: true,
  195. get: function() { return this.scale.y; },
  196. set: function(value)
  197. {
  198. this.scale.y = value;
  199. }
  200. },
  201. /**
  202. * The x value of the registration, or pivot, point.
  203. * This property provides parity with CreateJS display objects.
  204. * @property {Number} regX
  205. */
  206. regX:
  207. {
  208. enumerable: true,
  209. get: function() { return this.pivot.x; },
  210. set: function(value)
  211. {
  212. this.pivot.x = value;
  213. }
  214. },
  215. /**
  216. * The y value of the registration, or pivot, point.
  217. * This property provides parity with CreateJS display objects.
  218. * @property {Number} regY
  219. */
  220. regY:
  221. {
  222. enumerable: true,
  223. get: function() { return this.pivot.y; },
  224. set: function(value)
  225. {
  226. this.pivot.y = value;
  227. }
  228. },
  229.  
  230. /**
  231. * The drawing graphics, these are necessary
  232. * for the compability with EaselJS Flash exports.
  233. * @property {pixiflash.Shape|pixiflash.Sprite} mask
  234. */
  235. mask: {
  236. enumerable: true,
  237. get: function()
  238. {
  239. return this._mask;
  240. },
  241. set: function (mask)
  242. {
  243. if (this._mask)
  244. {
  245. // Remove the old mask if we're a shape
  246. if (this._mask.__parentShape)
  247. {
  248. var parentShape = this._mask.__parentShape;
  249. if (parentShape.parent)
  250. parentShape.parent.removeChild(parentShape);
  251. parentShape.off('graphicsChanged', this.onShapeChanged);
  252. delete this._mask.__parentShape;
  253. }
  254. this._mask.renderable = true;
  255. }
  256. // If the mask is a shape apply the graphics as the shape
  257. if (mask && mask instanceof pixiflash.Shape)
  258. {
  259. this._mask = mask.graphics;
  260. this._mask.__parentShape = mask;
  261. if(!this.boundMaskChanged)
  262. {
  263. this.boundMaskChanged = true;
  264. this.onShapeChanged = this.onShapeChanged.bind(this);
  265. }
  266. mask.once('graphicsChanged', this.onShapeChanged);
  267. }
  268. else
  269. {
  270. this._mask = mask;
  271. }
  272. if (this._mask)
  273. {
  274. // Wait until we're add and then add the mask
  275. // on the same container as this display object
  276. if (!this.parent)
  277. {
  278. this.once("added", function()
  279. {
  280. if(!this._mask) return;
  281. this.parent.addChild(this._mask.__parentShape || this._mask);
  282. });
  283. }
  284. else
  285. {
  286. this.parent.addChild(this._mask.__parentShape || this._mask);
  287. }
  288. this._mask.renderable = false;
  289. }
  290. }
  291. }
  292. });
  293.  
  294. /**
  295. * Dummy function for CJS export compatibility
  296. * @method cache
  297. */
  298. p.cache = function()
  299. {
  300. //don't do anything!
  301. };
  302.  
  303. /**
  304. * Graphics object was updated on the shape dynamically, update the mask
  305. * @method onShapeChanged
  306. * @private
  307. * @param {pixiflash.Shape} shape
  308. */
  309. p.onShapeChanged = function(shape)
  310. {
  311. // reset the shape mask
  312. this.mask = shape;
  313. };
  314. p.displayObjectUpdateTransform = function()
  315. {
  316. // create some matrix refs for easy access
  317. var pt = this.parent.worldTransform;
  318. var wt = this.worldTransform;
  319.  
  320. // temporary matrix variables
  321. var a, b, c, d, tx, ty,
  322. rotY = this._rotation + this.skew.y,
  323. rotX = this._rotation + this.skew.x;
  324.  
  325. // so if rotation is between 0 then we can simplify the multiplication process...
  326. if (rotY % PI_2 || rotX % PI_2)
  327. {
  328. // check to see if the rotation is the same as the previous render. This means we only need to use sin and cos when rotation actually changes
  329. if (rotX !== this._cachedRotX || rotY !== this._cachedRotY)
  330. {
  331. // cache new values
  332. this._cachedRotX = rotX;
  333. this._cachedRotY = rotY;
  334. // recalculate expensive ops
  335. this._crA = Math.cos(rotY);
  336. this._srB = Math.sin(rotY);
  337. this._srC = Math.sin(-rotX);
  338. this._crD = Math.cos(rotX);
  339. }
  340.  
  341. // get the matrix values of the displayobject based on its transform properties..
  342. a = this._crA * this.scale.x;
  343. b = this._srB * this.scale.x;
  344. c = this._srC * this.scale.y;
  345. d = this._crD * this.scale.y;
  346. tx = this.position.x;
  347. ty = this.position.y;
  348.  
  349. // check for pivot.. not often used so geared towards that fact!
  350. if (this.pivot.x || this.pivot.y)
  351. {
  352. tx -= this.pivot.x * a + this.pivot.y * c;
  353. ty -= this.pivot.x * b + this.pivot.y * d;
  354. }
  355.  
  356. // concat the parent matrix with the objects transform.
  357. wt.a = a * pt.a + b * pt.c;
  358. wt.b = a * pt.b + b * pt.d;
  359. wt.c = c * pt.a + d * pt.c;
  360. wt.d = c * pt.b + d * pt.d;
  361. wt.tx = tx * pt.a + ty * pt.c + pt.tx;
  362. wt.ty = tx * pt.b + ty * pt.d + pt.ty;
  363. }
  364. else
  365. {
  366. // lets do the fast version as we know there is no rotation..
  367. a = this.scale.x;
  368. d = this.scale.y;
  369.  
  370. tx = this.position.x - this.pivot.x * a;
  371. ty = this.position.y - this.pivot.y * d;
  372.  
  373. wt.a = a * pt.a;
  374. wt.b = a * pt.b;
  375. wt.c = d * pt.c;
  376. wt.d = d * pt.d;
  377. wt.tx = tx * pt.a + ty * pt.c + pt.tx;
  378. wt.ty = tx * pt.b + ty * pt.d + pt.ty;
  379. }
  380.  
  381. // multiply the alphas..
  382. this.worldAlpha = this.alpha * this.parent.worldAlpha;
  383.  
  384. // reset the bounds each time this is called!
  385. this._currentBounds = null;
  386. };
  387. p.setTransform = function(x, y, scaleX, scaleY, rotation, skewX, skewY, regX, regY)
  388. {
  389. this.position.x = x || 0;
  390. this.position.y = y || 0;
  391. this.scale.x = !scaleX ? 1 : scaleX;
  392. this.scale.y = !scaleY ? 1 : scaleY;
  393. this.rotation = rotation || 0;
  394. this.skewX = skewX || 0;
  395. this.skewY = skewY || 0;
  396. this.pivot.x = regX || 0;
  397. this.pivot.y = regY || 0;
  398. return this;
  399. };
  400. DisplayObject.mixin = function(targetPrototype)
  401. {
  402. for(var prop in p)
  403. {
  404. // For things that we set using Object.defineProperty
  405. // very important that enumerable:true for the
  406. // defineProperty options
  407. var propDesc = Object.getOwnPropertyDescriptor(p, prop);
  408. if(propDesc)
  409. {
  410. Object.defineProperty(targetPrototype, prop, propDesc);
  411. }
  412. else
  413. {
  414. // Should cover all other prototype methods/properties
  415. targetPrototype[prop] = p[prop];
  416. }
  417. }
  418. };
  419. pixiflash.DisplayObject = DisplayObject;
  420. }());