sprite-tiling.js 17 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366
  1. /*!
  2. * @pixi/sprite-tiling - v6.5.10
  3. * Compiled Thu, 06 Jul 2023 15:25:11 UTC
  4. *
  5. * @pixi/sprite-tiling is licensed under the MIT License.
  6. * http://www.opensource.org/licenses/mit-license
  7. */
  8. 'use strict';
  9. Object.defineProperty(exports, '__esModule', { value: true });
  10. var core = require('@pixi/core');
  11. var math = require('@pixi/math');
  12. var sprite = require('@pixi/sprite');
  13. var constants = require('@pixi/constants');
  14. var utils = require('@pixi/utils');
  15. /*! *****************************************************************************
  16. Copyright (c) Microsoft Corporation.
  17. Permission to use, copy, modify, and/or distribute this software for any
  18. purpose with or without fee is hereby granted.
  19. THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
  20. REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
  21. AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
  22. INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
  23. LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
  24. OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
  25. PERFORMANCE OF THIS SOFTWARE.
  26. ***************************************************************************** */
  27. /* global Reflect, Promise */
  28. var extendStatics = function(d, b) {
  29. extendStatics = Object.setPrototypeOf ||
  30. ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
  31. function (d, b) { for (var p in b) { if (b.hasOwnProperty(p)) { d[p] = b[p]; } } };
  32. return extendStatics(d, b);
  33. };
  34. function __extends(d, b) {
  35. extendStatics(d, b);
  36. function __() { this.constructor = d; }
  37. d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
  38. }
  39. var tempPoint = new math.Point();
  40. /**
  41. * A tiling sprite is a fast way of rendering a tiling image.
  42. * @memberof PIXI
  43. */
  44. var TilingSprite = /** @class */ (function (_super) {
  45. __extends(TilingSprite, _super);
  46. /**
  47. * @param texture - The texture of the tiling sprite.
  48. * @param width - The width of the tiling sprite.
  49. * @param height - The height of the tiling sprite.
  50. */
  51. function TilingSprite(texture, width, height) {
  52. if (width === void 0) { width = 100; }
  53. if (height === void 0) { height = 100; }
  54. var _this = _super.call(this, texture) || this;
  55. _this.tileTransform = new math.Transform();
  56. // The width of the tiling sprite
  57. _this._width = width;
  58. // The height of the tiling sprite
  59. _this._height = height;
  60. _this.uvMatrix = _this.texture.uvMatrix || new core.TextureMatrix(texture);
  61. /**
  62. * Plugin that is responsible for rendering this element.
  63. * Allows to customize the rendering process without overriding '_render' method.
  64. * @default 'tilingSprite'
  65. */
  66. _this.pluginName = 'tilingSprite';
  67. _this.uvRespectAnchor = false;
  68. return _this;
  69. }
  70. Object.defineProperty(TilingSprite.prototype, "clampMargin", {
  71. /**
  72. * Changes frame clamping in corresponding textureTransform, shortcut
  73. * Change to -0.5 to add a pixel to the edge, recommended for transparent trimmed textures in atlas
  74. * @default 0.5
  75. * @member {number}
  76. */
  77. get: function () {
  78. return this.uvMatrix.clampMargin;
  79. },
  80. set: function (value) {
  81. this.uvMatrix.clampMargin = value;
  82. this.uvMatrix.update(true);
  83. },
  84. enumerable: false,
  85. configurable: true
  86. });
  87. Object.defineProperty(TilingSprite.prototype, "tileScale", {
  88. /** The scaling of the image that is being tiled. */
  89. get: function () {
  90. return this.tileTransform.scale;
  91. },
  92. set: function (value) {
  93. this.tileTransform.scale.copyFrom(value);
  94. },
  95. enumerable: false,
  96. configurable: true
  97. });
  98. Object.defineProperty(TilingSprite.prototype, "tilePosition", {
  99. /** The offset of the image that is being tiled. */
  100. get: function () {
  101. return this.tileTransform.position;
  102. },
  103. set: function (value) {
  104. this.tileTransform.position.copyFrom(value);
  105. },
  106. enumerable: false,
  107. configurable: true
  108. });
  109. /**
  110. * @protected
  111. */
  112. TilingSprite.prototype._onTextureUpdate = function () {
  113. if (this.uvMatrix) {
  114. this.uvMatrix.texture = this._texture;
  115. }
  116. this._cachedTint = 0xFFFFFF;
  117. };
  118. /**
  119. * Renders the object using the WebGL renderer
  120. * @param renderer - The renderer
  121. */
  122. TilingSprite.prototype._render = function (renderer) {
  123. // tweak our texture temporarily..
  124. var texture = this._texture;
  125. if (!texture || !texture.valid) {
  126. return;
  127. }
  128. this.tileTransform.updateLocalTransform();
  129. this.uvMatrix.update();
  130. renderer.batch.setObjectRenderer(renderer.plugins[this.pluginName]);
  131. renderer.plugins[this.pluginName].render(this);
  132. };
  133. /** Updates the bounds of the tiling sprite. */
  134. TilingSprite.prototype._calculateBounds = function () {
  135. var minX = this._width * -this._anchor._x;
  136. var minY = this._height * -this._anchor._y;
  137. var maxX = this._width * (1 - this._anchor._x);
  138. var maxY = this._height * (1 - this._anchor._y);
  139. this._bounds.addFrame(this.transform, minX, minY, maxX, maxY);
  140. };
  141. /**
  142. * Gets the local bounds of the sprite object.
  143. * @param rect - Optional output rectangle.
  144. * @returns The bounds.
  145. */
  146. TilingSprite.prototype.getLocalBounds = function (rect) {
  147. // we can do a fast local bounds if the sprite has no children!
  148. if (this.children.length === 0) {
  149. this._bounds.minX = this._width * -this._anchor._x;
  150. this._bounds.minY = this._height * -this._anchor._y;
  151. this._bounds.maxX = this._width * (1 - this._anchor._x);
  152. this._bounds.maxY = this._height * (1 - this._anchor._y);
  153. if (!rect) {
  154. if (!this._localBoundsRect) {
  155. this._localBoundsRect = new math.Rectangle();
  156. }
  157. rect = this._localBoundsRect;
  158. }
  159. return this._bounds.getRectangle(rect);
  160. }
  161. return _super.prototype.getLocalBounds.call(this, rect);
  162. };
  163. /**
  164. * Checks if a point is inside this tiling sprite.
  165. * @param point - The point to check.
  166. * @returns Whether or not the sprite contains the point.
  167. */
  168. TilingSprite.prototype.containsPoint = function (point) {
  169. this.worldTransform.applyInverse(point, tempPoint);
  170. var width = this._width;
  171. var height = this._height;
  172. var x1 = -width * this.anchor._x;
  173. if (tempPoint.x >= x1 && tempPoint.x < x1 + width) {
  174. var y1 = -height * this.anchor._y;
  175. if (tempPoint.y >= y1 && tempPoint.y < y1 + height) {
  176. return true;
  177. }
  178. }
  179. return false;
  180. };
  181. /**
  182. * Destroys this sprite and optionally its texture and children
  183. * @param {object|boolean} [options] - Options parameter. A boolean will act as if all options
  184. * have been set to that value
  185. * @param {boolean} [options.children=false] - if set to true, all the children will have their destroy
  186. * method called as well. 'options' will be passed on to those calls.
  187. * @param {boolean} [options.texture=false] - Should it destroy the current texture of the sprite as well
  188. * @param {boolean} [options.baseTexture=false] - Should it destroy the base texture of the sprite as well
  189. */
  190. TilingSprite.prototype.destroy = function (options) {
  191. _super.prototype.destroy.call(this, options);
  192. this.tileTransform = null;
  193. this.uvMatrix = null;
  194. };
  195. /**
  196. * Helper function that creates a new tiling sprite based on the source you provide.
  197. * The source can be - frame id, image url, video url, canvas element, video element, base texture
  198. * @static
  199. * @param {string|PIXI.Texture|HTMLCanvasElement|HTMLVideoElement} source - Source to create texture from
  200. * @param {object} options - See {@link PIXI.BaseTexture}'s constructor for options.
  201. * @param {number} options.width - required width of the tiling sprite
  202. * @param {number} options.height - required height of the tiling sprite
  203. * @returns {PIXI.TilingSprite} The newly created texture
  204. */
  205. TilingSprite.from = function (source, options) {
  206. var texture = (source instanceof core.Texture)
  207. ? source
  208. : core.Texture.from(source, options);
  209. return new TilingSprite(texture, options.width, options.height);
  210. };
  211. Object.defineProperty(TilingSprite.prototype, "width", {
  212. /** The width of the sprite, setting this will actually modify the scale to achieve the value set. */
  213. get: function () {
  214. return this._width;
  215. },
  216. set: function (value) {
  217. this._width = value;
  218. },
  219. enumerable: false,
  220. configurable: true
  221. });
  222. Object.defineProperty(TilingSprite.prototype, "height", {
  223. /** The height of the TilingSprite, setting this will actually modify the scale to achieve the value set. */
  224. get: function () {
  225. return this._height;
  226. },
  227. set: function (value) {
  228. this._height = value;
  229. },
  230. enumerable: false,
  231. configurable: true
  232. });
  233. return TilingSprite;
  234. }(sprite.Sprite));
  235. var fragmentSimpleSrc = "#version 100\n#define SHADER_NAME Tiling-Sprite-Simple-100\n\nprecision lowp float;\n\nvarying vec2 vTextureCoord;\n\nuniform sampler2D uSampler;\nuniform vec4 uColor;\n\nvoid main(void)\n{\n vec4 texSample = texture2D(uSampler, vTextureCoord);\n gl_FragColor = texSample * uColor;\n}\n";
  236. var gl1VertexSrc = "#version 100\n#define SHADER_NAME Tiling-Sprite-100\n\nprecision lowp float;\n\nattribute vec2 aVertexPosition;\nattribute vec2 aTextureCoord;\n\nuniform mat3 projectionMatrix;\nuniform mat3 translationMatrix;\nuniform mat3 uTransform;\n\nvarying vec2 vTextureCoord;\n\nvoid main(void)\n{\n gl_Position = vec4((projectionMatrix * translationMatrix * vec3(aVertexPosition, 1.0)).xy, 0.0, 1.0);\n\n vTextureCoord = (uTransform * vec3(aTextureCoord, 1.0)).xy;\n}\n";
  237. var gl1FragmentSrc = "#version 100\n#ifdef GL_EXT_shader_texture_lod\n #extension GL_EXT_shader_texture_lod : enable\n#endif\n#define SHADER_NAME Tiling-Sprite-100\n\nprecision lowp float;\n\nvarying vec2 vTextureCoord;\n\nuniform sampler2D uSampler;\nuniform vec4 uColor;\nuniform mat3 uMapCoord;\nuniform vec4 uClampFrame;\nuniform vec2 uClampOffset;\n\nvoid main(void)\n{\n vec2 coord = vTextureCoord + ceil(uClampOffset - vTextureCoord);\n coord = (uMapCoord * vec3(coord, 1.0)).xy;\n vec2 unclamped = coord;\n coord = clamp(coord, uClampFrame.xy, uClampFrame.zw);\n\n #ifdef GL_EXT_shader_texture_lod\n vec4 texSample = unclamped == coord\n ? texture2D(uSampler, coord) \n : texture2DLodEXT(uSampler, coord, 0);\n #else\n vec4 texSample = texture2D(uSampler, coord);\n #endif\n\n gl_FragColor = texSample * uColor;\n}\n";
  238. var gl2VertexSrc = "#version 300 es\n#define SHADER_NAME Tiling-Sprite-300\n\nprecision lowp float;\n\nin vec2 aVertexPosition;\nin vec2 aTextureCoord;\n\nuniform mat3 projectionMatrix;\nuniform mat3 translationMatrix;\nuniform mat3 uTransform;\n\nout vec2 vTextureCoord;\n\nvoid main(void)\n{\n gl_Position = vec4((projectionMatrix * translationMatrix * vec3(aVertexPosition, 1.0)).xy, 0.0, 1.0);\n\n vTextureCoord = (uTransform * vec3(aTextureCoord, 1.0)).xy;\n}\n";
  239. var gl2FragmentSrc = "#version 300 es\n#define SHADER_NAME Tiling-Sprite-100\n\nprecision lowp float;\n\nin vec2 vTextureCoord;\n\nout vec4 fragmentColor;\n\nuniform sampler2D uSampler;\nuniform vec4 uColor;\nuniform mat3 uMapCoord;\nuniform vec4 uClampFrame;\nuniform vec2 uClampOffset;\n\nvoid main(void)\n{\n vec2 coord = vTextureCoord + ceil(uClampOffset - vTextureCoord);\n coord = (uMapCoord * vec3(coord, 1.0)).xy;\n vec2 unclamped = coord;\n coord = clamp(coord, uClampFrame.xy, uClampFrame.zw);\n\n vec4 texSample = texture(uSampler, coord, unclamped == coord ? 0.0f : -32.0f);// lod-bias very negative to force lod 0\n\n fragmentColor = texSample * uColor;\n}\n";
  240. var tempMat = new math.Matrix();
  241. /**
  242. * WebGL renderer plugin for tiling sprites
  243. * @class
  244. * @memberof PIXI
  245. * @extends PIXI.ObjectRenderer
  246. */
  247. var TilingSpriteRenderer = /** @class */ (function (_super) {
  248. __extends(TilingSpriteRenderer, _super);
  249. /**
  250. * constructor for renderer
  251. * @param {PIXI.Renderer} renderer - The renderer this tiling awesomeness works for.
  252. */
  253. function TilingSpriteRenderer(renderer) {
  254. var _this = _super.call(this, renderer) || this;
  255. // WebGL version is not available during initialization!
  256. renderer.runners.contextChange.add(_this);
  257. _this.quad = new core.QuadUv();
  258. /**
  259. * The WebGL state in which this renderer will work.
  260. * @member {PIXI.State}
  261. * @readonly
  262. */
  263. _this.state = core.State.for2d();
  264. return _this;
  265. }
  266. /** Creates shaders when context is initialized. */
  267. TilingSpriteRenderer.prototype.contextChange = function () {
  268. var renderer = this.renderer;
  269. var uniforms = { globals: renderer.globalUniforms };
  270. this.simpleShader = core.Shader.from(gl1VertexSrc, fragmentSimpleSrc, uniforms);
  271. this.shader = renderer.context.webGLVersion > 1
  272. ? core.Shader.from(gl2VertexSrc, gl2FragmentSrc, uniforms)
  273. : core.Shader.from(gl1VertexSrc, gl1FragmentSrc, uniforms);
  274. };
  275. /**
  276. * @param {PIXI.TilingSprite} ts - tilingSprite to be rendered
  277. */
  278. TilingSpriteRenderer.prototype.render = function (ts) {
  279. var renderer = this.renderer;
  280. var quad = this.quad;
  281. var vertices = quad.vertices;
  282. vertices[0] = vertices[6] = (ts._width) * -ts.anchor.x;
  283. vertices[1] = vertices[3] = ts._height * -ts.anchor.y;
  284. vertices[2] = vertices[4] = (ts._width) * (1.0 - ts.anchor.x);
  285. vertices[5] = vertices[7] = ts._height * (1.0 - ts.anchor.y);
  286. var anchorX = ts.uvRespectAnchor ? ts.anchor.x : 0;
  287. var anchorY = ts.uvRespectAnchor ? ts.anchor.y : 0;
  288. vertices = quad.uvs;
  289. vertices[0] = vertices[6] = -anchorX;
  290. vertices[1] = vertices[3] = -anchorY;
  291. vertices[2] = vertices[4] = 1.0 - anchorX;
  292. vertices[5] = vertices[7] = 1.0 - anchorY;
  293. quad.invalidate();
  294. var tex = ts._texture;
  295. var baseTex = tex.baseTexture;
  296. var premultiplied = baseTex.alphaMode > 0;
  297. var lt = ts.tileTransform.localTransform;
  298. var uv = ts.uvMatrix;
  299. var isSimple = baseTex.isPowerOfTwo
  300. && tex.frame.width === baseTex.width && tex.frame.height === baseTex.height;
  301. // auto, force repeat wrapMode for big tiling textures
  302. if (isSimple) {
  303. if (!baseTex._glTextures[renderer.CONTEXT_UID]) {
  304. if (baseTex.wrapMode === constants.WRAP_MODES.CLAMP) {
  305. baseTex.wrapMode = constants.WRAP_MODES.REPEAT;
  306. }
  307. }
  308. else {
  309. isSimple = baseTex.wrapMode !== constants.WRAP_MODES.CLAMP;
  310. }
  311. }
  312. var shader = isSimple ? this.simpleShader : this.shader;
  313. var w = tex.width;
  314. var h = tex.height;
  315. var W = ts._width;
  316. var H = ts._height;
  317. tempMat.set(lt.a * w / W, lt.b * w / H, lt.c * h / W, lt.d * h / H, lt.tx / W, lt.ty / H);
  318. // that part is the same as above:
  319. // tempMat.identity();
  320. // tempMat.scale(tex.width, tex.height);
  321. // tempMat.prepend(lt);
  322. // tempMat.scale(1.0 / ts._width, 1.0 / ts._height);
  323. tempMat.invert();
  324. if (isSimple) {
  325. tempMat.prepend(uv.mapCoord);
  326. }
  327. else {
  328. shader.uniforms.uMapCoord = uv.mapCoord.toArray(true);
  329. shader.uniforms.uClampFrame = uv.uClampFrame;
  330. shader.uniforms.uClampOffset = uv.uClampOffset;
  331. }
  332. shader.uniforms.uTransform = tempMat.toArray(true);
  333. shader.uniforms.uColor = utils.premultiplyTintToRgba(ts.tint, ts.worldAlpha, shader.uniforms.uColor, premultiplied);
  334. shader.uniforms.translationMatrix = ts.transform.worldTransform.toArray(true);
  335. shader.uniforms.uSampler = tex;
  336. renderer.shader.bind(shader);
  337. renderer.geometry.bind(quad);
  338. this.state.blendMode = utils.correctBlendMode(ts.blendMode, premultiplied);
  339. renderer.state.set(this.state);
  340. renderer.geometry.draw(this.renderer.gl.TRIANGLES, 6, 0);
  341. };
  342. /** @ignore */
  343. TilingSpriteRenderer.extension = {
  344. name: 'tilingSprite',
  345. type: core.ExtensionType.RendererPlugin,
  346. };
  347. return TilingSpriteRenderer;
  348. }(core.ObjectRenderer));
  349. exports.TilingSprite = TilingSprite;
  350. exports.TilingSpriteRenderer = TilingSpriteRenderer;
  351. //# sourceMappingURL=sprite-tiling.js.map