Source: core/Application.js

core/Application.js

  1. import { autoDetectRenderer } from './autoDetectRenderer';
  2. import Container from './display/Container';
  3. import { shared, Ticker } from './ticker';
  4. import settings from './settings';
  5. import { UPDATE_PRIORITY } from './const';
  6. /**
  7. * Convenience class to create a new PIXI application.
  8. * This class automatically creates the renderer, ticker
  9. * and root container.
  10. *
  11. * @example
  12. * // Create the application
  13. * const app = new PIXI.Application();
  14. *
  15. * // Add the view to the DOM
  16. * documentAlias.body.appendChild(app.view);
  17. *
  18. * // ex, add display objects
  19. * app.stage.addChild(PIXI.Sprite.fromImage('something.png'));
  20. *
  21. * @class
  22. * @memberof PIXI
  23. */
  24. export default class Application
  25. {
  26. // eslint-disable-next-line valid-jsdoc
  27. /**
  28. * @param {object} [options] - The optional renderer parameters
  29. * @param {boolean} [options.autoStart=true] - automatically starts the rendering after the construction.
  30. * Note that setting this parameter to false does NOT stop the shared ticker even if you set
  31. * options.sharedTicker to true in case that it is already started. Stop it by your own.
  32. * @param {number} [options.width=800] - the width of the renderers view
  33. * @param {number} [options.height=600] - the height of the renderers view
  34. * @param {HTMLCanvasElement} [options.view] - the canvas to use as a view, optional
  35. * @param {boolean} [options.transparent=false] - If the render view is transparent, default false
  36. * @param {boolean} [options.antialias=false] - sets antialias (only applicable in chrome at the moment)
  37. * @param {boolean} [options.preserveDrawingBuffer=false] - enables drawing buffer preservation, enable this if you
  38. * need to call toDataUrl on the webgl context
  39. * @param {number} [options.resolution=1] - The resolution / device pixel ratio of the renderer, retina would be 2
  40. * @param {boolean} [options.forceCanvas=false] - prevents selection of WebGL renderer, even if such is present
  41. * @param {number} [options.backgroundColor=0x000000] - The background color of the rendered area
  42. * (shown if not transparent).
  43. * @param {boolean} [options.clearBeforeRender=true] - This sets if the renderer will clear the canvas or
  44. * not before the new render pass.
  45. * @param {boolean} [options.roundPixels=false] - If true PixiJS will Math.floor() x/y values when rendering,
  46. * stopping pixel interpolation.
  47. * @param {boolean} [options.forceFXAA=false] - forces FXAA antialiasing to be used over native.
  48. * FXAA is faster, but may not always look as great **webgl only**
  49. * @param {boolean} [options.legacy=false] - `true` to ensure compatibility with older / less advanced devices.
  50. * If you experience unexplained flickering try setting this to true. **webgl only**
  51. * @param {string} [options.powerPreference] - Parameter passed to webgl context, set to "high-performance"
  52. * for devices with dual graphics card **webgl only**
  53. * @param {boolean} [options.sharedTicker=false] - `true` to use PIXI.ticker.shared, `false` to create new ticker.
  54. * @param {boolean} [options.sharedLoader=false] - `true` to use PIXI.loaders.shared, `false` to create new Loader.
  55. */
  56. constructor(options, arg2, arg3, arg4, arg5)
  57. {
  58. // Support for constructor(width, height, options, noWebGL, useSharedTicker)
  59. if (typeof options === 'number')
  60. {
  61. options = Object.assign({
  62. width: options,
  63. height: arg2 || settings.RENDER_OPTIONS.height,
  64. forceCanvas: !!arg4,
  65. sharedTicker: !!arg5,
  66. }, arg3);
  67. }
  68. /**
  69. * The default options, so we mixin functionality later.
  70. * @member {object}
  71. * @protected
  72. */
  73. this._options = options = Object.assign({
  74. autoStart: true,
  75. sharedTicker: false,
  76. forceCanvas: false,
  77. sharedLoader: false,
  78. }, options);
  79. /**
  80. * WebGL renderer if available, otherwise CanvasRenderer
  81. * @member {PIXI.WebGLRenderer|PIXI.CanvasRenderer}
  82. */
  83. this.renderer = autoDetectRenderer(options);
  84. /**
  85. * The root display container that's rendered.
  86. * @member {PIXI.Container}
  87. */
  88. this.stage = new Container();
  89. /**
  90. * Internal reference to the ticker
  91. * @member {PIXI.ticker.Ticker}
  92. * @private
  93. */
  94. this._ticker = null;
  95. /**
  96. * Ticker for doing render updates.
  97. * @member {PIXI.ticker.Ticker}
  98. * @default PIXI.ticker.shared
  99. */
  100. this.ticker = options.sharedTicker ? shared : new Ticker();
  101. // Start the rendering
  102. if (options.autoStart)
  103. {
  104. this.start();
  105. }
  106. }
  107. set ticker(ticker) // eslint-disable-line require-jsdoc
  108. {
  109. if (this._ticker)
  110. {
  111. this._ticker.remove(this.render, this);
  112. }
  113. this._ticker = ticker;
  114. if (ticker)
  115. {
  116. ticker.add(this.render, this, UPDATE_PRIORITY.LOW);
  117. }
  118. }
  119. get ticker() // eslint-disable-line require-jsdoc
  120. {
  121. return this._ticker;
  122. }
  123. /**
  124. * Render the current stage.
  125. */
  126. render()
  127. {
  128. this.renderer.render(this.stage);
  129. }
  130. /**
  131. * Convenience method for stopping the render.
  132. */
  133. stop()
  134. {
  135. this._ticker.stop();
  136. }
  137. /**
  138. * Convenience method for starting the render.
  139. */
  140. start()
  141. {
  142. this._ticker.start();
  143. }
  144. /**
  145. * Reference to the renderer's canvas element.
  146. * @member {HTMLCanvasElement}
  147. * @readonly
  148. */
  149. get view()
  150. {
  151. return this.renderer.view;
  152. }
  153. /**
  154. * Reference to the renderer's screen rectangle. Its safe to use as filterArea or hitArea for whole screen
  155. * @member {PIXI.Rectangle}
  156. * @readonly
  157. */
  158. get screen()
  159. {
  160. return this.renderer.screen;
  161. }
  162. /**
  163. * Destroy and don't use after this.
  164. * @param {Boolean} [removeView=false] Automatically remove canvas from DOM.
  165. * @param {object|boolean} [stageOptions] - Options parameter. A boolean will act as if all options
  166. * have been set to that value
  167. * @param {boolean} [stageOptions.children=false] - if set to true, all the children will have their destroy
  168. * method called as well. 'stageOptions' will be passed on to those calls.
  169. * @param {boolean} [stageOptions.texture=false] - Only used for child Sprites if stageOptions.children is set
  170. * to true. Should it destroy the texture of the child sprite
  171. * @param {boolean} [stageOptions.baseTexture=false] - Only used for child Sprites if stageOptions.children is set
  172. * to true. Should it destroy the base texture of the child sprite
  173. */
  174. destroy(removeView, stageOptions)
  175. {
  176. if (this._ticker)
  177. {
  178. const oldTicker = this._ticker;
  179. this.ticker = null;
  180. oldTicker.destroy();
  181. }
  182. this.stage.destroy(stageOptions);
  183. this.stage = null;
  184. this.renderer.destroy(removeView);
  185. this.renderer = null;
  186. this._options = null;
  187. }
  188. }