diff --git a/src/core/display/Container.js b/src/core/display/Container.js index d037edd..039e124 100644 --- a/src/core/display/Container.js +++ b/src/core/display/Container.js @@ -95,6 +95,13 @@ }); /** + * Overridable method that can be used by Container subclasses whenever the children array is modified + * + * @private + */ +Container.prototype.onChildrenChange = function () {}; + +/** * Adds a child to the container. * * @param child {DisplayObject} The DisplayObject to add to the container @@ -130,6 +137,7 @@ child.parent = this; this.children.splice(index, 0, child); + this.onChildrenChange(); child.emit('added', this); @@ -164,6 +172,7 @@ this.children[index1] = child2; this.children[index2] = child; + this.onChildrenChange(); }; /** @@ -201,6 +210,7 @@ this.children.splice(currentIndex, 1); //remove from old position this.children.splice(index, 0, child); //add at new position + this.onChildrenChange(); }; /** @@ -249,6 +259,7 @@ child.parent = null; this.children.splice(index, 1); + this.onChildrenChange(); child.emit('removed', this); @@ -276,6 +287,13 @@ removed[i].parent = null; } + this.onChildrenChange(); + + for (var i = 0; i < removed.length; ++i) + { + removed[i].emit('removed', this); + } + return removed; } else if (range === 0 && this.children.length === 0) diff --git a/src/core/display/Container.js b/src/core/display/Container.js index d037edd..039e124 100644 --- a/src/core/display/Container.js +++ b/src/core/display/Container.js @@ -95,6 +95,13 @@ }); /** + * Overridable method that can be used by Container subclasses whenever the children array is modified + * + * @private + */ +Container.prototype.onChildrenChange = function () {}; + +/** * Adds a child to the container. * * @param child {DisplayObject} The DisplayObject to add to the container @@ -130,6 +137,7 @@ child.parent = this; this.children.splice(index, 0, child); + this.onChildrenChange(); child.emit('added', this); @@ -164,6 +172,7 @@ this.children[index1] = child2; this.children[index2] = child; + this.onChildrenChange(); }; /** @@ -201,6 +210,7 @@ this.children.splice(currentIndex, 1); //remove from old position this.children.splice(index, 0, child); //add at new position + this.onChildrenChange(); }; /** @@ -249,6 +259,7 @@ child.parent = null; this.children.splice(index, 1); + this.onChildrenChange(); child.emit('removed', this); @@ -276,6 +287,13 @@ removed[i].parent = null; } + this.onChildrenChange(); + + for (var i = 0; i < removed.length; ++i) + { + removed[i].emit('removed', this); + } + return removed; } else if (range === 0 && this.children.length === 0) diff --git a/src/core/particles/ParticleContainer.js b/src/core/particles/ParticleContainer.js index 52028fd..784bc25 100644 --- a/src/core/particles/ParticleContainer.js +++ b/src/core/particles/ParticleContainer.js @@ -25,18 +25,34 @@ * @extends PIXI.Container * @memberof PIXI * - * @param [size=15000] {number} The number of images in the SpriteBatch before it flushes. + * @param [maxSize=15000] {number} The maximum number of particles that can be renderer by the container. * @param [properties] {object} The properties of children that should be uploaded to the gpu and applied. * @param [properties.scale=false] {boolean} When true, scale be uploaded and applied. * @param [properties.position=true] {boolean} When true, position be uploaded and applied. * @param [properties.rotation=false] {boolean} When true, rotation be uploaded and applied. * @param [properties.uvs=false] {boolean} When true, uvs be uploaded and applied. * @param [properties.alpha=false] {boolean} When true, alpha be uploaded and applied. + * @param [batchSize=15000] {number} Number of particles per batch. */ -function ParticleContainer(size, properties) +function ParticleContainer(maxSize, properties, batchSize) { Container.call(this); + batchSize = batchSize || 15000; //CONST.SPRITE_BATCH_SIZE; // 2000 is a nice balance between mobile / desktop + maxSize = maxSize || 15000; + + // Making sure the batch size is valid + // 65535 is max vertex index in the index buffer (see ParticleRenderer) + // so max number of particles is 65536 / 4 = 16384 + var maxBatchSize = 16384; + if (batchSize > maxBatchSize) { + batchSize = maxBatchSize; + } + + if (batchSize > maxSize) { + batchSize = maxSize; + } + /** * Set properties to be dynamic (true) / static (false) * @@ -49,7 +65,13 @@ * @member {number} * @private */ - this._size = size || 15000; + this._maxSize = maxSize; + + /** + * @member {number} + * @private + */ + this._batchSize = batchSize; /** * @member {WebGLBuffer} @@ -139,57 +161,14 @@ }; /** - * Adds a child to this particle container at a specified index. If the index is out of bounds an error will be thrown + * Set the flag that static data should be updated to true * - * @param child {DisplayObject} The child to add - * @param index {Number} The index to place the child in - * @return {DisplayObject} The child that was added. + * @private */ -ParticleContainer.prototype.addChildAt = function (child, index) +ParticleContainer.prototype.onChildrenChange = function () { - // prevent adding self as child - if (child === this) - { - return child; - } - - if (index >= 0 && index <= this.children.length) - { - if (child.parent) - { - child.parent.removeChild(child); - } - - child.parent = this; - - this.children.splice(index, 0, child); - - this._updateStatic = true; - - return child; - } - else - { - throw new Error(child + 'addChildAt: The index '+ index +' supplied is out of bounds ' + this.children.length); - } -}; - -/** - * Removes a child from the specified index position. - * - * @param index {Number} The index to get the child from - * @return {DisplayObject} The child that was removed. - */ -ParticleContainer.prototype.removeChildAt = function (index) -{ - var child = this.getChildAt(index); - - child.parent = null; - this.children.splice(index, 1); this._updateStatic = true; - - return child; -}; +} /** * Renders the object using the Canvas renderer diff --git a/src/core/display/Container.js b/src/core/display/Container.js index d037edd..039e124 100644 --- a/src/core/display/Container.js +++ b/src/core/display/Container.js @@ -95,6 +95,13 @@ }); /** + * Overridable method that can be used by Container subclasses whenever the children array is modified + * + * @private + */ +Container.prototype.onChildrenChange = function () {}; + +/** * Adds a child to the container. * * @param child {DisplayObject} The DisplayObject to add to the container @@ -130,6 +137,7 @@ child.parent = this; this.children.splice(index, 0, child); + this.onChildrenChange(); child.emit('added', this); @@ -164,6 +172,7 @@ this.children[index1] = child2; this.children[index2] = child; + this.onChildrenChange(); }; /** @@ -201,6 +210,7 @@ this.children.splice(currentIndex, 1); //remove from old position this.children.splice(index, 0, child); //add at new position + this.onChildrenChange(); }; /** @@ -249,6 +259,7 @@ child.parent = null; this.children.splice(index, 1); + this.onChildrenChange(); child.emit('removed', this); @@ -276,6 +287,13 @@ removed[i].parent = null; } + this.onChildrenChange(); + + for (var i = 0; i < removed.length; ++i) + { + removed[i].emit('removed', this); + } + return removed; } else if (range === 0 && this.children.length === 0) diff --git a/src/core/particles/ParticleContainer.js b/src/core/particles/ParticleContainer.js index 52028fd..784bc25 100644 --- a/src/core/particles/ParticleContainer.js +++ b/src/core/particles/ParticleContainer.js @@ -25,18 +25,34 @@ * @extends PIXI.Container * @memberof PIXI * - * @param [size=15000] {number} The number of images in the SpriteBatch before it flushes. + * @param [maxSize=15000] {number} The maximum number of particles that can be renderer by the container. * @param [properties] {object} The properties of children that should be uploaded to the gpu and applied. * @param [properties.scale=false] {boolean} When true, scale be uploaded and applied. * @param [properties.position=true] {boolean} When true, position be uploaded and applied. * @param [properties.rotation=false] {boolean} When true, rotation be uploaded and applied. * @param [properties.uvs=false] {boolean} When true, uvs be uploaded and applied. * @param [properties.alpha=false] {boolean} When true, alpha be uploaded and applied. + * @param [batchSize=15000] {number} Number of particles per batch. */ -function ParticleContainer(size, properties) +function ParticleContainer(maxSize, properties, batchSize) { Container.call(this); + batchSize = batchSize || 15000; //CONST.SPRITE_BATCH_SIZE; // 2000 is a nice balance between mobile / desktop + maxSize = maxSize || 15000; + + // Making sure the batch size is valid + // 65535 is max vertex index in the index buffer (see ParticleRenderer) + // so max number of particles is 65536 / 4 = 16384 + var maxBatchSize = 16384; + if (batchSize > maxBatchSize) { + batchSize = maxBatchSize; + } + + if (batchSize > maxSize) { + batchSize = maxSize; + } + /** * Set properties to be dynamic (true) / static (false) * @@ -49,7 +65,13 @@ * @member {number} * @private */ - this._size = size || 15000; + this._maxSize = maxSize; + + /** + * @member {number} + * @private + */ + this._batchSize = batchSize; /** * @member {WebGLBuffer} @@ -139,57 +161,14 @@ }; /** - * Adds a child to this particle container at a specified index. If the index is out of bounds an error will be thrown + * Set the flag that static data should be updated to true * - * @param child {DisplayObject} The child to add - * @param index {Number} The index to place the child in - * @return {DisplayObject} The child that was added. + * @private */ -ParticleContainer.prototype.addChildAt = function (child, index) +ParticleContainer.prototype.onChildrenChange = function () { - // prevent adding self as child - if (child === this) - { - return child; - } - - if (index >= 0 && index <= this.children.length) - { - if (child.parent) - { - child.parent.removeChild(child); - } - - child.parent = this; - - this.children.splice(index, 0, child); - - this._updateStatic = true; - - return child; - } - else - { - throw new Error(child + 'addChildAt: The index '+ index +' supplied is out of bounds ' + this.children.length); - } -}; - -/** - * Removes a child from the specified index position. - * - * @param index {Number} The index to get the child from - * @return {DisplayObject} The child that was removed. - */ -ParticleContainer.prototype.removeChildAt = function (index) -{ - var child = this.getChildAt(index); - - child.parent = null; - this.children.splice(index, 1); this._updateStatic = true; - - return child; -}; +} /** * Renders the object using the Canvas renderer diff --git a/src/core/particles/webgl/ParticleRenderer.js b/src/core/particles/webgl/ParticleRenderer.js index 9f0f79d..47dc445 100644 --- a/src/core/particles/webgl/ParticleRenderer.js +++ b/src/core/particles/webgl/ParticleRenderer.js @@ -26,14 +26,11 @@ { ObjectRenderer.call(this, renderer); - /** - * The number of images in the Particle before it flushes. - * - * @member {number} - */ - this.size = 15000;//CONST.SPRITE_BATCH_SIZE; // 2000 is a nice balance between mobile / desktop - - var numIndices = this.size * 6; + // 65535 is max vertex index in the index buffer (see ParticleRenderer) + // so max number of particles is 65536 / 4 = 16384 + // and max number of element in the index buffer is 16384 * 6 = 98304 + // Creating a full index buffer, overhead is 98304 * 2 = 196Ko + var numIndices = 98304; /** * Holds the indices @@ -167,7 +164,8 @@ { var children = container.children, totalChildren = children.length, - maxSize = container._size; + maxSize = container._maxSize, + batchSize = container._batchSize; if(totalChildren === 0) { @@ -222,12 +220,12 @@ // now lets upload and render the buffers.. var j = 0; - for (var i = 0; i < totalChildren; i+=this.size) + for (var i = 0; i < totalChildren; i+=batchSize) { - var amount = ( totalChildren - i); - if(amount > this.size) + var amount = ( totalChildren - i); + if(amount > batchSize) { - amount = this.size; + amount = batchSize; } var buffer = container._buffers[j++]; @@ -261,7 +259,8 @@ { var gl = this.renderer.gl, buffers = [], - size = container._size, + size = container._maxSize, + batchSize = container._batchSize, i; // update the properties to match the state of the container.. @@ -270,9 +269,9 @@ this.properties[i].dynamic = container._properties[i]; } - for (i = 0; i < size; i += this.size) + for (i = 0; i < size; i += batchSize) { - buffers.push( new ParticleBuffer(gl, this.properties, this.size, this.shader) ); + buffers.push( new ParticleBuffer(gl, this.properties, batchSize, this.shader) ); } return buffers;