Tween.js 16 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455
  1. /************************************************************************
  2. * Tween.js
  3. ************************************************************************
  4. * Copyright (c) 2021 Pedro Tonini Rosenberg Schneider.
  5. *
  6. * This file is part of Pandora.
  7. *
  8. * Pandora is free software: you can redistribute it and/or modify
  9. * it under the terms of the GNU General Public License as published by
  10. * the Free Software Foundation, either version 3 of the License, or
  11. * (at your option) any later version.
  12. *
  13. * Pandora is distributed in the hope that it will be useful,
  14. * but WITHOUT ANY WARRANTY; without even the implied warranty of
  15. * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
  16. * GNU General Public License for more details.
  17. *
  18. * You should have received a copy of the GNU General Public License
  19. * along with Pandora. If not, see <https://www.gnu.org/licenses/>.
  20. *************************************************************************/
  21. /**
  22. * The {@code TweenData} class represents the data that a Tween GameObject needs to
  23. * interpolate a given property.
  24. *
  25. * @author Pedro Schneider
  26. *
  27. * @class
  28. */
  29. class TweenData
  30. {
  31. /**
  32. * @constructor
  33. * Creates a TweenData Object with the specified parameters.
  34. *
  35. * @param {Object} target Object that has the property to be interpolated.
  36. * @param {String} property name of the property of target to be interpolated.
  37. * target[property] should be number, Vector2 or Color.
  38. * @param {PROPERTY_TYPE} propertyType type of the property to be interpolated.
  39. * @param {number, Vector2, Color} initVal initial value for the interpolation.
  40. * Should be the same type as target[property].
  41. * @param {number, Vector2, Color} finalVal final value for the interpolation.
  42. * Should be the same type as target[property].
  43. * @param {number} duration duration in seconds of the interpolation.
  44. * @param {TRANS_TYPE} transType transition type of the interpolation.
  45. * @param {EASE_TYPE} easeType easing type of the interpolation.
  46. * @param {number} delay delay in seconds for the interpolation to start.
  47. */
  48. constructor(target, property, propertyType, initVal, finalVal, duration, transType, easeType, delay)
  49. {
  50. this.target = target; // Object that has the property to be interpolated.
  51. this.property = property; // Name of the property to be interpolated.
  52. this.propertyType = propertyType; // Type of the property to be interpolated.
  53. // Initializes new objects for final value and initial value depending on the type.
  54. switch (this.propertyType)
  55. {
  56. case PROPERTY_TYPE.COLOR:
  57. this.initVal = new Color(initVal.r, initVal.g, initVal.b, initVal.a);
  58. this.finalVal = new Color(finalVal.r, finalVal.g, finalVal.b, finalVal.a);
  59. break;
  60. case PROPERTY_TYPE.VECTOR2:
  61. this.initVal = new Vector2(initVal.x, initVal.y);
  62. this.finalVal = new Vector2(finalVal.x, finalVal.y);
  63. break;
  64. case PROPERTY_TYPE.NUMBER:
  65. this.initVal = initVal;
  66. this.finalVal = finalVal;
  67. break;
  68. }
  69. this.duration = duration; // Duration in seconds of the interpolation
  70. this.transType = transType; // Type of the transition.
  71. this.easeType = easeType; // Type of the easing.
  72. this.t = -delay; // Current time of the interpolation.
  73. this.playing = false; // Is the interpolation playing?
  74. this.done = false; // Is the interpolation done?
  75. this.p = []; // List of sub-properties to be interpolated depending on the type.
  76. switch (this.propertyType)
  77. {
  78. case PROPERTY_TYPE.COLOR:
  79. this.p.push("r");
  80. this.p.push("g");
  81. this.p.push("b");
  82. break;
  83. case PROPERTY_TYPE.VECTOR2:
  84. this.p.push("x");
  85. this.p.push("y");
  86. break;
  87. case PROPERTY_TYPE.NUMBER:
  88. break;
  89. }
  90. this.trans = ""; // String for the transition type.
  91. switch (this.transType)
  92. {
  93. case TRANS_TYPE.LINEAR:
  94. this.trans = "Linear";
  95. break;
  96. case TRANS_TYPE.QUAD:
  97. this.trans = "Quad";
  98. break;
  99. case TRANS_TYPE.CUBIC:
  100. this.trans = "Cubic";
  101. break;
  102. case TRANS_TYPE.QUART:
  103. this.trans = "Quart";
  104. break;
  105. case TRANS_TYPE.QUINT:
  106. this.trans = "Quint";
  107. break;
  108. case TRANS_TYPE.SINE:
  109. this.trans = "Sine";
  110. break;
  111. case TRANS_TYPE.EXPONENTIAL:
  112. this.trans = "Expo";
  113. break;
  114. case TRANS_TYPE.CIRCULAR:
  115. this.trans = "Circ";
  116. break;
  117. case TRANS_TYPE.ELASTIC:
  118. this.trans = "Elastic";
  119. break;
  120. case TRANS_TYPE.BACK:
  121. this.trans = "Back";
  122. break;
  123. case TRANS_TYPE.BOUNCE:
  124. this.trans = "Bounce";
  125. break;
  126. }
  127. this.ease = ""; // String for the easing type.
  128. if (this.transType == TRANS_TYPE.LINEAR) this.ease = "ease";
  129. else
  130. {
  131. switch (this.easeType)
  132. {
  133. case EASE_TYPE.IN:
  134. this.ease = "easeIn";
  135. break;
  136. case EASE_TYPE.OUT:
  137. this.ease = "easeOut";
  138. break;
  139. case EASE_TYPE.IN_OUT:
  140. this.ease = "easeInOut";
  141. break;
  142. }
  143. }
  144. }
  145. }
  146. /**
  147. * The {@code Tween} class represents a Tween GameObject that has functionality to
  148. * interpolate any property of another GameObject if the properties are of the type
  149. * number, Vector2 or Color.
  150. *
  151. * @author Pedro Schneider
  152. *
  153. * @class
  154. */
  155. class Tween extends GameObject
  156. {
  157. /**
  158. * @constructor
  159. * Creates an empty Tween GameObject.
  160. *
  161. * @param {String} name name of the Tween GameObject.
  162. */
  163. constructor(name)
  164. {
  165. super(name);
  166. this.tweenData = [];
  167. this.doneTweens = 0;
  168. this.done = false;
  169. }
  170. /**
  171. * Add a new TweenData Object to this Tween with the necessary information to interpolate
  172. * the target's property.
  173. *
  174. * @param {Object} target Object that has the property to be interpolated.
  175. * @param {String} property name of the property of target to be interpolated.
  176. * target[property] should be number, Vector2 or Color.
  177. * @param {PROPERTY_TYPE} propertyType type of the property to be interpolated.
  178. * @param {number, Vector2, Color} initVal initial value for the interpolation.
  179. * Should be the same type as target[property].
  180. * @param {number, Vector2, Color} finalVal final value for the interpolation.
  181. * Should be the same type as target[property].
  182. * @param {number} duration duration in seconds of the interpolation.
  183. * @param {TRANS_TYPE} transType transition type of the interpolation.
  184. * Default is TRANS_TYPE.LINEAR.
  185. * @param {EASE_TYPE} easeType easing type of the interpolation.
  186. * Default is EASY_TYPE.IN_OUT.
  187. * @param {number} delay delay in seconds for the interpolation to start.
  188. * Default is 0.
  189. */
  190. interpolateProperty(target, property, propertyType, initVal, finalVal, duration, transType = 1, easeType = 3, delay = 0)
  191. {
  192. this.done = false; // Are all TweenData on this Tween done?
  193. // Adding a new TweenData.
  194. this.tweenData.push(new TweenData(target, property, propertyType, initVal, finalVal, duration, transType, easeType, delay));
  195. }
  196. /**
  197. * Given a TweenData, sets its interpolation's target's property to the appropriate value for
  198. * the current time of the interpolation.
  199. *
  200. * @param {TweenData} td reference to the TweenData Object.
  201. */
  202. interpolate(td)
  203. {
  204. if (td.propertyType == PROPERTY_TYPE.NUMBER)
  205. td.target[td.property] = Easings[td.trans][td.ease](td.t, td.initVal, td.finalVal - td.initVal, td.duration);
  206. else
  207. {
  208. for (let i = 0; i < td.p.length; i++)
  209. td.target[td.property][td.p[i]] = Easings[td.trans][td.ease](td.t, td.initVal[td.p[i]], td.finalVal[td.p[i]] - td.initVal[td.p[i]], td.duration);
  210. }
  211. }
  212. /**
  213. * Starts interpolating all TweenData Objectcs currently added to this Tween.
  214. */
  215. startAll()
  216. {
  217. for (let i = 0; i < this.tweenData.length; i++)
  218. this.tweenData[i].playing = true;
  219. }
  220. /**
  221. * Starts interpolating a specific TweenData Object based on its index.
  222. *
  223. * ! Since TwennData are not GameObjects, this is the only way to query
  224. * ! for them. The index refera to the order you added the TweenData to
  225. * ! this Tween, starting at 0.
  226. *
  227. * @param {number} idx index of the desired TweenData to start.
  228. */
  229. startByIndex(idx)
  230. {
  231. if (idx < 0 && idx >= this.tweenData.length) return;
  232. this.tweenData[idx].playing = true;
  233. }
  234. /**
  235. * Stops interpolating all TweenData Objects currently added to this Tween.
  236. */
  237. stopAll()
  238. {
  239. for (let i = 0; i < this.tweenData.length; i++)
  240. this.tweenData[i].playing = false;
  241. }
  242. /**
  243. * Stops interpolating a specific TweenData Object based on its index.
  244. *
  245. * ! Since TwennData are not GameObjects, this is the only way to query
  246. * ! for them. The index refera to the order you added the TweenData to
  247. * ! this Tween, starting at 0.
  248. *
  249. * @param {number} idx index of the desired TweenData to stop.
  250. */
  251. stopByIndex(idx)
  252. {
  253. if (idx < 0 && idx >= this.tweenData.length) return;
  254. this.tweenData[idx].playing = false;
  255. }
  256. /**
  257. * Resumes interpolating all TweenData currently added to this Tween.
  258. */
  259. resumeAll()
  260. {
  261. for (let i = 0; i < this.tweenData.length; i++)
  262. this.tweenData[i].playing = true;
  263. }
  264. /**
  265. * Resumes interpolating a specific TweenData Object based on its index.
  266. *
  267. * ! Since TwennData are not GameObjects, this is the only way to query
  268. * ! for them. The index refera to the order you added the TweenData to
  269. * ! this Tween, starting at 0.
  270. *
  271. * @param {number} idx index of the desired TweenData to resume.
  272. */
  273. resumeByIndex(idx)
  274. {
  275. if (idx < 0 && idx >= this.tweenData.length) return;
  276. this.tweenData[idx].playing = true;
  277. }
  278. /**
  279. * Resets all TweenData currently added to this Tween.
  280. */
  281. resetAll()
  282. {
  283. this.doneTweens = 0;
  284. this.done = false;
  285. for (let i = 0; i < this.tweenData.length; i++)
  286. {
  287. this.tweenData[i].t = 0;
  288. this.tweenData[i].done = false;
  289. }
  290. }
  291. /**
  292. * Resets a specific TweenData Object based on its index.
  293. *
  294. * ! Since TwennData are not GameObjects, this is the only way to query
  295. * ! for them. The index refera to the order you added the TweenData to
  296. * ! this Tween, starting at 0.
  297. *
  298. * @param {number} idx index of the desired TweenData to reset.
  299. */
  300. resetByIndex(idx)
  301. {
  302. if (idx < 0 && idx >= this.tweenData.length) return;
  303. this.doneTweens--;
  304. this.done = false;
  305. this.tweenData[idx].t = 0;
  306. this.tweenData[idx].done = false;
  307. }
  308. /**
  309. * Removes all TweenData currently added to this Tween.
  310. */
  311. removeAll()
  312. {
  313. while (this.tweenData.length > 0)
  314. this.tweenData.pop();
  315. }
  316. /**
  317. * Removes a specific TweenData Object based on its index.
  318. *
  319. * ! Since TwennData are not GameObjects, this is the only way to query
  320. * ! for them. The index refera to the order you added the TweenData to
  321. * ! this Tween, starting at 0.
  322. *
  323. * @param {number} idx index of the desired TweenData to remove.
  324. */
  325. removeByIndex(idx)
  326. {
  327. if (idx < 0 && idx >= this.tweenData.length) return;
  328. this.tweenData.splice(idx, 1);
  329. }
  330. /**
  331. * Sets the current time of all TweenData currently added to this Tween
  332. * to the specified time.
  333. *
  334. * @param {number} time time in seconds to seek all TweenData on this Tween.
  335. */
  336. seekAll(time)
  337. {
  338. if (time < 0) return;
  339. for (let i = 0; i < this.tweenData.length; i++)
  340. this.tweenData[i].t = min(time, this.tweenData[i].duration);
  341. }
  342. /**
  343. * Sets the current time of a specific TweenData Object, based on its index,
  344. * to the specified time.
  345. *
  346. * ! Since TwennData are not GameObjects, this is the only way to query
  347. * ! for them. The index refera to the order you added the TweenData to
  348. * ! this Tween, starting at 0.
  349. *
  350. * @param {number} idx index of the TweenData to seek to the time.
  351. * @param {number} time time in seconds to seek the specified TweenData
  352. */
  353. seekByIndex(idx, time)
  354. {
  355. if (idx < 0 && idx >= this.tweenData.length) return;
  356. this.tweenData[idx].t = min(time, this.tweenData[idx].duration);
  357. }
  358. /**
  359. * Called once every time all TweenData on this Tween are completed.
  360. * Emits the tweenDataAllCompleted signal.
  361. */
  362. allDone()
  363. {
  364. this.emitSignal("tweenAllCompleted");
  365. this.done = true;
  366. }
  367. /**
  368. * @override
  369. * Adds default signals for the Tween GameObject and serves as a caller
  370. * to the _initSignals() callback.
  371. *
  372. * @signal tweenAllCompleted Emited once when all TweenData on this Tween
  373. * are done.
  374. * @signal tweenCompleted Emited once when one TweenData on this Tween
  375. * is done. Passes the completed TweenData as a
  376. * parameter.
  377. * @signal tweenStarted Emited once when one TweenData on this Tween
  378. * starts. Passes the started TweenData as a
  379. * parameter.
  380. */
  381. initSignals()
  382. {
  383. this.addSignal("tweenAllCompleted");
  384. this.addSignal("tweenCompleted");
  385. this.addSignal("tweenStarted");
  386. this._initSignals();
  387. }
  388. /**
  389. * @override
  390. * Updates all TweenData added to this Tween and recursively calls the _update(delta)
  391. * callback for this GameObject and all of it's children.
  392. * @param {*} delta
  393. */
  394. update(delta)
  395. {
  396. // Checks if all TweenData are done.
  397. if (!this.done && this.doneTweens == this.tweenData.length) this.allDone();
  398. for (let i = 0; i < this.tweenData.length; i++)
  399. {
  400. // Ignores TweenData that aren't playing.
  401. if (!this.tweenData[i].playing) continue;
  402. // Interpolates TweenData that are out of the delay.
  403. if (this.tweenData[i].t >= 0)
  404. this.interpolate(this.tweenData[i]);
  405. // Checks if the TweenData just went out of the delay (just started).
  406. if (this.tweenData[i].t <= 0 && this.tweenData[i].t + delta >= 0)
  407. this.emitSignal("tweenStarted", this.tweenData[i]);
  408. // Updates TweenData's current time.
  409. this.tweenData[i].t = min(this.tweenData[i].t + delta, this.tweenData[i].duration);
  410. // Checks if the TweenData is done.
  411. if (!this.tweenData[i].done && this.tweenData[i].t == this.tweenData[i].duration)
  412. {
  413. this.emitSignal("tweenDone", this.tweenData[i]);
  414. this.tweenData[i].done = true;
  415. this.doneTweens += 1;
  416. }
  417. }
  418. this._update(delta);
  419. for (let i = 0; i < this.children.length; i++)
  420. this.children[i].update(delta);
  421. }
  422. }