diff --git a/README.md b/README.md index 00d8e3b..427f3d7 100644 --- a/README.md +++ b/README.md @@ -48,7 +48,7 @@ #### NPM Install -``` +```sh $> npm install pixi.js ``` @@ -112,18 +112,17 @@ ```js // The application will create a renderer using WebGL, if possible, // with a fallback to a canvas render. It will also setup the ticker -// and the root stage PIXI.Container. -var app = new PIXI.Application(); +// and the root stage PIXI.Container +const app = new PIXI.Application(); // The application will create a canvas element for you that you -// can then insert into the DOM. +// can then insert into the DOM document.body.appendChild(app.view); // load the texture we need -PIXI.loader.add('bunny', 'bunny.png').load(function(loader, resources) { - - // This creates a texture from a 'bunny.png' image. - var bunny = new PIXI.Sprite(resources.bunny.texture); +PIXI.loader.add('bunny', 'bunny.png').load((loader, resources) => { + // This creates a texture from a 'bunny.png' image + const bunny = new PIXI.Sprite(resources.bunny.texture); // Setup the position of the bunny bunny.x = app.renderer.width / 2; @@ -133,11 +132,11 @@ bunny.anchor.x = 0.5; bunny.anchor.y = 0.5; - // Add the bunny to the scene we are building. + // Add the bunny to the scene we are building app.stage.addChild(bunny); // Listen for frame updates - app.ticker.add(function() { + app.ticker.add(() => { // each frame we spin the bunny around a bit bunny.rotation += 0.01; }); @@ -153,13 +152,13 @@ If you don't already have Node.js and NPM, go install them. Then, in the folder where you have cloned the repository, install the build dependencies using npm: -``` +```sh $> npm install ``` Then, to build the source, run: -``` +```sh $> npm run dist ``` @@ -168,13 +167,13 @@ If there are specific plugins you don't want, say "interaction" or "extras", you can exclude those: -``` +```sh $> npm run dist -- --exclude extras --exclude interaction ``` You can also use the short-form `-e`: -``` +```sh $> npm run dist -- -e extras -e interaction -e filters ``` @@ -182,7 +181,7 @@ The docs can be generated using npm: -``` +```sh $> npm run docs ``` diff --git a/README.md b/README.md index 00d8e3b..427f3d7 100644 --- a/README.md +++ b/README.md @@ -48,7 +48,7 @@ #### NPM Install -``` +```sh $> npm install pixi.js ``` @@ -112,18 +112,17 @@ ```js // The application will create a renderer using WebGL, if possible, // with a fallback to a canvas render. It will also setup the ticker -// and the root stage PIXI.Container. -var app = new PIXI.Application(); +// and the root stage PIXI.Container +const app = new PIXI.Application(); // The application will create a canvas element for you that you -// can then insert into the DOM. +// can then insert into the DOM document.body.appendChild(app.view); // load the texture we need -PIXI.loader.add('bunny', 'bunny.png').load(function(loader, resources) { - - // This creates a texture from a 'bunny.png' image. - var bunny = new PIXI.Sprite(resources.bunny.texture); +PIXI.loader.add('bunny', 'bunny.png').load((loader, resources) => { + // This creates a texture from a 'bunny.png' image + const bunny = new PIXI.Sprite(resources.bunny.texture); // Setup the position of the bunny bunny.x = app.renderer.width / 2; @@ -133,11 +132,11 @@ bunny.anchor.x = 0.5; bunny.anchor.y = 0.5; - // Add the bunny to the scene we are building. + // Add the bunny to the scene we are building app.stage.addChild(bunny); // Listen for frame updates - app.ticker.add(function() { + app.ticker.add(() => { // each frame we spin the bunny around a bit bunny.rotation += 0.01; }); @@ -153,13 +152,13 @@ If you don't already have Node.js and NPM, go install them. Then, in the folder where you have cloned the repository, install the build dependencies using npm: -``` +```sh $> npm install ``` Then, to build the source, run: -``` +```sh $> npm run dist ``` @@ -168,13 +167,13 @@ If there are specific plugins you don't want, say "interaction" or "extras", you can exclude those: -``` +```sh $> npm run dist -- --exclude extras --exclude interaction ``` You can also use the short-form `-e`: -``` +```sh $> npm run dist -- -e extras -e interaction -e filters ``` @@ -182,7 +181,7 @@ The docs can be generated using npm: -``` +```sh $> npm run docs ``` diff --git a/package.json b/package.json index 9d5a528..b9f5952 100644 --- a/package.json +++ b/package.json @@ -61,7 +61,7 @@ "eventemitter3": "^2.0.0", "ismobilejs": "^0.4.0", "object-assign": "^4.0.1", - "pixi-gl-core": "^1.0.3", + "pixi-gl-core": "^1.1.4", "remove-array-items": "^1.0.0", "resource-loader": "^2.0.9" }, diff --git a/README.md b/README.md index 00d8e3b..427f3d7 100644 --- a/README.md +++ b/README.md @@ -48,7 +48,7 @@ #### NPM Install -``` +```sh $> npm install pixi.js ``` @@ -112,18 +112,17 @@ ```js // The application will create a renderer using WebGL, if possible, // with a fallback to a canvas render. It will also setup the ticker -// and the root stage PIXI.Container. -var app = new PIXI.Application(); +// and the root stage PIXI.Container +const app = new PIXI.Application(); // The application will create a canvas element for you that you -// can then insert into the DOM. +// can then insert into the DOM document.body.appendChild(app.view); // load the texture we need -PIXI.loader.add('bunny', 'bunny.png').load(function(loader, resources) { - - // This creates a texture from a 'bunny.png' image. - var bunny = new PIXI.Sprite(resources.bunny.texture); +PIXI.loader.add('bunny', 'bunny.png').load((loader, resources) => { + // This creates a texture from a 'bunny.png' image + const bunny = new PIXI.Sprite(resources.bunny.texture); // Setup the position of the bunny bunny.x = app.renderer.width / 2; @@ -133,11 +132,11 @@ bunny.anchor.x = 0.5; bunny.anchor.y = 0.5; - // Add the bunny to the scene we are building. + // Add the bunny to the scene we are building app.stage.addChild(bunny); // Listen for frame updates - app.ticker.add(function() { + app.ticker.add(() => { // each frame we spin the bunny around a bit bunny.rotation += 0.01; }); @@ -153,13 +152,13 @@ If you don't already have Node.js and NPM, go install them. Then, in the folder where you have cloned the repository, install the build dependencies using npm: -``` +```sh $> npm install ``` Then, to build the source, run: -``` +```sh $> npm run dist ``` @@ -168,13 +167,13 @@ If there are specific plugins you don't want, say "interaction" or "extras", you can exclude those: -``` +```sh $> npm run dist -- --exclude extras --exclude interaction ``` You can also use the short-form `-e`: -``` +```sh $> npm run dist -- -e extras -e interaction -e filters ``` @@ -182,7 +181,7 @@ The docs can be generated using npm: -``` +```sh $> npm run docs ``` diff --git a/package.json b/package.json index 9d5a528..b9f5952 100644 --- a/package.json +++ b/package.json @@ -61,7 +61,7 @@ "eventemitter3": "^2.0.0", "ismobilejs": "^0.4.0", "object-assign": "^4.0.1", - "pixi-gl-core": "^1.0.3", + "pixi-gl-core": "^1.1.4", "remove-array-items": "^1.0.0", "resource-loader": "^2.0.9" }, diff --git a/src/core/renderers/SystemRenderer.js b/src/core/renderers/SystemRenderer.js index 698ab59..5069940 100644 --- a/src/core/renderers/SystemRenderer.js +++ b/src/core/renderers/SystemRenderer.js @@ -244,16 +244,18 @@ * @param {PIXI.DisplayObject} displayObject - The displayObject the object will be generated from * @param {number} scaleMode - Should be one of the scaleMode consts * @param {number} resolution - The resolution / device pixel ratio of the texture being generated + * @param {PIXI.Rectangle} [region] - The region of the displayObject, that shall be rendered, + * if no region is specified, defaults to the local bounds of the displayObject. * @return {PIXI.Texture} a texture of the graphics object */ - generateTexture(displayObject, scaleMode, resolution) + generateTexture(displayObject, scaleMode, resolution, region) { - const bounds = displayObject.getLocalBounds(); + region = region || displayObject.getLocalBounds(); - const renderTexture = RenderTexture.create(bounds.width | 0, bounds.height | 0, scaleMode, resolution); + const renderTexture = RenderTexture.create(region.width | 0, region.height | 0, scaleMode, resolution); - tempMatrix.tx = -bounds.x; - tempMatrix.ty = -bounds.y; + tempMatrix.tx = -region.x; + tempMatrix.ty = -region.y; this.render(displayObject, renderTexture, false, tempMatrix, true); diff --git a/README.md b/README.md index 00d8e3b..427f3d7 100644 --- a/README.md +++ b/README.md @@ -48,7 +48,7 @@ #### NPM Install -``` +```sh $> npm install pixi.js ``` @@ -112,18 +112,17 @@ ```js // The application will create a renderer using WebGL, if possible, // with a fallback to a canvas render. It will also setup the ticker -// and the root stage PIXI.Container. -var app = new PIXI.Application(); +// and the root stage PIXI.Container +const app = new PIXI.Application(); // The application will create a canvas element for you that you -// can then insert into the DOM. +// can then insert into the DOM document.body.appendChild(app.view); // load the texture we need -PIXI.loader.add('bunny', 'bunny.png').load(function(loader, resources) { - - // This creates a texture from a 'bunny.png' image. - var bunny = new PIXI.Sprite(resources.bunny.texture); +PIXI.loader.add('bunny', 'bunny.png').load((loader, resources) => { + // This creates a texture from a 'bunny.png' image + const bunny = new PIXI.Sprite(resources.bunny.texture); // Setup the position of the bunny bunny.x = app.renderer.width / 2; @@ -133,11 +132,11 @@ bunny.anchor.x = 0.5; bunny.anchor.y = 0.5; - // Add the bunny to the scene we are building. + // Add the bunny to the scene we are building app.stage.addChild(bunny); // Listen for frame updates - app.ticker.add(function() { + app.ticker.add(() => { // each frame we spin the bunny around a bit bunny.rotation += 0.01; }); @@ -153,13 +152,13 @@ If you don't already have Node.js and NPM, go install them. Then, in the folder where you have cloned the repository, install the build dependencies using npm: -``` +```sh $> npm install ``` Then, to build the source, run: -``` +```sh $> npm run dist ``` @@ -168,13 +167,13 @@ If there are specific plugins you don't want, say "interaction" or "extras", you can exclude those: -``` +```sh $> npm run dist -- --exclude extras --exclude interaction ``` You can also use the short-form `-e`: -``` +```sh $> npm run dist -- -e extras -e interaction -e filters ``` @@ -182,7 +181,7 @@ The docs can be generated using npm: -``` +```sh $> npm run docs ``` diff --git a/package.json b/package.json index 9d5a528..b9f5952 100644 --- a/package.json +++ b/package.json @@ -61,7 +61,7 @@ "eventemitter3": "^2.0.0", "ismobilejs": "^0.4.0", "object-assign": "^4.0.1", - "pixi-gl-core": "^1.0.3", + "pixi-gl-core": "^1.1.4", "remove-array-items": "^1.0.0", "resource-loader": "^2.0.9" }, diff --git a/src/core/renderers/SystemRenderer.js b/src/core/renderers/SystemRenderer.js index 698ab59..5069940 100644 --- a/src/core/renderers/SystemRenderer.js +++ b/src/core/renderers/SystemRenderer.js @@ -244,16 +244,18 @@ * @param {PIXI.DisplayObject} displayObject - The displayObject the object will be generated from * @param {number} scaleMode - Should be one of the scaleMode consts * @param {number} resolution - The resolution / device pixel ratio of the texture being generated + * @param {PIXI.Rectangle} [region] - The region of the displayObject, that shall be rendered, + * if no region is specified, defaults to the local bounds of the displayObject. * @return {PIXI.Texture} a texture of the graphics object */ - generateTexture(displayObject, scaleMode, resolution) + generateTexture(displayObject, scaleMode, resolution, region) { - const bounds = displayObject.getLocalBounds(); + region = region || displayObject.getLocalBounds(); - const renderTexture = RenderTexture.create(bounds.width | 0, bounds.height | 0, scaleMode, resolution); + const renderTexture = RenderTexture.create(region.width | 0, region.height | 0, scaleMode, resolution); - tempMatrix.tx = -bounds.x; - tempMatrix.ty = -bounds.y; + tempMatrix.tx = -region.x; + tempMatrix.ty = -region.y; this.render(displayObject, renderTexture, false, tempMatrix, true); diff --git a/src/core/renderers/webgl/WebGLRenderer.js b/src/core/renderers/webgl/WebGLRenderer.js index 3f432a1..f635e26 100644 --- a/src/core/renderers/webgl/WebGLRenderer.js +++ b/src/core/renderers/webgl/WebGLRenderer.js @@ -661,8 +661,8 @@ { this.setObjectRenderer(this.emptyRenderer); + this.bindVao(null); this._activeShader = null; - this._activeVao = null; this._activeRenderTarget = this.rootRenderTarget; for (let i = 0; i < this.boundTextures.length; i++) diff --git a/README.md b/README.md index 00d8e3b..427f3d7 100644 --- a/README.md +++ b/README.md @@ -48,7 +48,7 @@ #### NPM Install -``` +```sh $> npm install pixi.js ``` @@ -112,18 +112,17 @@ ```js // The application will create a renderer using WebGL, if possible, // with a fallback to a canvas render. It will also setup the ticker -// and the root stage PIXI.Container. -var app = new PIXI.Application(); +// and the root stage PIXI.Container +const app = new PIXI.Application(); // The application will create a canvas element for you that you -// can then insert into the DOM. +// can then insert into the DOM document.body.appendChild(app.view); // load the texture we need -PIXI.loader.add('bunny', 'bunny.png').load(function(loader, resources) { - - // This creates a texture from a 'bunny.png' image. - var bunny = new PIXI.Sprite(resources.bunny.texture); +PIXI.loader.add('bunny', 'bunny.png').load((loader, resources) => { + // This creates a texture from a 'bunny.png' image + const bunny = new PIXI.Sprite(resources.bunny.texture); // Setup the position of the bunny bunny.x = app.renderer.width / 2; @@ -133,11 +132,11 @@ bunny.anchor.x = 0.5; bunny.anchor.y = 0.5; - // Add the bunny to the scene we are building. + // Add the bunny to the scene we are building app.stage.addChild(bunny); // Listen for frame updates - app.ticker.add(function() { + app.ticker.add(() => { // each frame we spin the bunny around a bit bunny.rotation += 0.01; }); @@ -153,13 +152,13 @@ If you don't already have Node.js and NPM, go install them. Then, in the folder where you have cloned the repository, install the build dependencies using npm: -``` +```sh $> npm install ``` Then, to build the source, run: -``` +```sh $> npm run dist ``` @@ -168,13 +167,13 @@ If there are specific plugins you don't want, say "interaction" or "extras", you can exclude those: -``` +```sh $> npm run dist -- --exclude extras --exclude interaction ``` You can also use the short-form `-e`: -``` +```sh $> npm run dist -- -e extras -e interaction -e filters ``` @@ -182,7 +181,7 @@ The docs can be generated using npm: -``` +```sh $> npm run docs ``` diff --git a/package.json b/package.json index 9d5a528..b9f5952 100644 --- a/package.json +++ b/package.json @@ -61,7 +61,7 @@ "eventemitter3": "^2.0.0", "ismobilejs": "^0.4.0", "object-assign": "^4.0.1", - "pixi-gl-core": "^1.0.3", + "pixi-gl-core": "^1.1.4", "remove-array-items": "^1.0.0", "resource-loader": "^2.0.9" }, diff --git a/src/core/renderers/SystemRenderer.js b/src/core/renderers/SystemRenderer.js index 698ab59..5069940 100644 --- a/src/core/renderers/SystemRenderer.js +++ b/src/core/renderers/SystemRenderer.js @@ -244,16 +244,18 @@ * @param {PIXI.DisplayObject} displayObject - The displayObject the object will be generated from * @param {number} scaleMode - Should be one of the scaleMode consts * @param {number} resolution - The resolution / device pixel ratio of the texture being generated + * @param {PIXI.Rectangle} [region] - The region of the displayObject, that shall be rendered, + * if no region is specified, defaults to the local bounds of the displayObject. * @return {PIXI.Texture} a texture of the graphics object */ - generateTexture(displayObject, scaleMode, resolution) + generateTexture(displayObject, scaleMode, resolution, region) { - const bounds = displayObject.getLocalBounds(); + region = region || displayObject.getLocalBounds(); - const renderTexture = RenderTexture.create(bounds.width | 0, bounds.height | 0, scaleMode, resolution); + const renderTexture = RenderTexture.create(region.width | 0, region.height | 0, scaleMode, resolution); - tempMatrix.tx = -bounds.x; - tempMatrix.ty = -bounds.y; + tempMatrix.tx = -region.x; + tempMatrix.ty = -region.y; this.render(displayObject, renderTexture, false, tempMatrix, true); diff --git a/src/core/renderers/webgl/WebGLRenderer.js b/src/core/renderers/webgl/WebGLRenderer.js index 3f432a1..f635e26 100644 --- a/src/core/renderers/webgl/WebGLRenderer.js +++ b/src/core/renderers/webgl/WebGLRenderer.js @@ -661,8 +661,8 @@ { this.setObjectRenderer(this.emptyRenderer); + this.bindVao(null); this._activeShader = null; - this._activeVao = null; this._activeRenderTarget = this.rootRenderTarget; for (let i = 0; i < this.boundTextures.length; i++) diff --git a/src/interaction/InteractionManager.js b/src/interaction/InteractionManager.js index 0c737f9..32dc791 100644 --- a/src/interaction/InteractionManager.js +++ b/src/interaction/InteractionManager.js @@ -679,7 +679,6 @@ * * @param {HTMLCanvasElement} element - the DOM element which will receive mouse and touch events. * @param {number} [resolution=1] - The resolution / device pixel ratio of the new element (relative to the canvas). - * @private */ setTargetElement(element, resolution = 1) { diff --git a/README.md b/README.md index 00d8e3b..427f3d7 100644 --- a/README.md +++ b/README.md @@ -48,7 +48,7 @@ #### NPM Install -``` +```sh $> npm install pixi.js ``` @@ -112,18 +112,17 @@ ```js // The application will create a renderer using WebGL, if possible, // with a fallback to a canvas render. It will also setup the ticker -// and the root stage PIXI.Container. -var app = new PIXI.Application(); +// and the root stage PIXI.Container +const app = new PIXI.Application(); // The application will create a canvas element for you that you -// can then insert into the DOM. +// can then insert into the DOM document.body.appendChild(app.view); // load the texture we need -PIXI.loader.add('bunny', 'bunny.png').load(function(loader, resources) { - - // This creates a texture from a 'bunny.png' image. - var bunny = new PIXI.Sprite(resources.bunny.texture); +PIXI.loader.add('bunny', 'bunny.png').load((loader, resources) => { + // This creates a texture from a 'bunny.png' image + const bunny = new PIXI.Sprite(resources.bunny.texture); // Setup the position of the bunny bunny.x = app.renderer.width / 2; @@ -133,11 +132,11 @@ bunny.anchor.x = 0.5; bunny.anchor.y = 0.5; - // Add the bunny to the scene we are building. + // Add the bunny to the scene we are building app.stage.addChild(bunny); // Listen for frame updates - app.ticker.add(function() { + app.ticker.add(() => { // each frame we spin the bunny around a bit bunny.rotation += 0.01; }); @@ -153,13 +152,13 @@ If you don't already have Node.js and NPM, go install them. Then, in the folder where you have cloned the repository, install the build dependencies using npm: -``` +```sh $> npm install ``` Then, to build the source, run: -``` +```sh $> npm run dist ``` @@ -168,13 +167,13 @@ If there are specific plugins you don't want, say "interaction" or "extras", you can exclude those: -``` +```sh $> npm run dist -- --exclude extras --exclude interaction ``` You can also use the short-form `-e`: -``` +```sh $> npm run dist -- -e extras -e interaction -e filters ``` @@ -182,7 +181,7 @@ The docs can be generated using npm: -``` +```sh $> npm run docs ``` diff --git a/package.json b/package.json index 9d5a528..b9f5952 100644 --- a/package.json +++ b/package.json @@ -61,7 +61,7 @@ "eventemitter3": "^2.0.0", "ismobilejs": "^0.4.0", "object-assign": "^4.0.1", - "pixi-gl-core": "^1.0.3", + "pixi-gl-core": "^1.1.4", "remove-array-items": "^1.0.0", "resource-loader": "^2.0.9" }, diff --git a/src/core/renderers/SystemRenderer.js b/src/core/renderers/SystemRenderer.js index 698ab59..5069940 100644 --- a/src/core/renderers/SystemRenderer.js +++ b/src/core/renderers/SystemRenderer.js @@ -244,16 +244,18 @@ * @param {PIXI.DisplayObject} displayObject - The displayObject the object will be generated from * @param {number} scaleMode - Should be one of the scaleMode consts * @param {number} resolution - The resolution / device pixel ratio of the texture being generated + * @param {PIXI.Rectangle} [region] - The region of the displayObject, that shall be rendered, + * if no region is specified, defaults to the local bounds of the displayObject. * @return {PIXI.Texture} a texture of the graphics object */ - generateTexture(displayObject, scaleMode, resolution) + generateTexture(displayObject, scaleMode, resolution, region) { - const bounds = displayObject.getLocalBounds(); + region = region || displayObject.getLocalBounds(); - const renderTexture = RenderTexture.create(bounds.width | 0, bounds.height | 0, scaleMode, resolution); + const renderTexture = RenderTexture.create(region.width | 0, region.height | 0, scaleMode, resolution); - tempMatrix.tx = -bounds.x; - tempMatrix.ty = -bounds.y; + tempMatrix.tx = -region.x; + tempMatrix.ty = -region.y; this.render(displayObject, renderTexture, false, tempMatrix, true); diff --git a/src/core/renderers/webgl/WebGLRenderer.js b/src/core/renderers/webgl/WebGLRenderer.js index 3f432a1..f635e26 100644 --- a/src/core/renderers/webgl/WebGLRenderer.js +++ b/src/core/renderers/webgl/WebGLRenderer.js @@ -661,8 +661,8 @@ { this.setObjectRenderer(this.emptyRenderer); + this.bindVao(null); this._activeShader = null; - this._activeVao = null; this._activeRenderTarget = this.rootRenderTarget; for (let i = 0; i < this.boundTextures.length; i++) diff --git a/src/interaction/InteractionManager.js b/src/interaction/InteractionManager.js index 0c737f9..32dc791 100644 --- a/src/interaction/InteractionManager.js +++ b/src/interaction/InteractionManager.js @@ -679,7 +679,6 @@ * * @param {HTMLCanvasElement} element - the DOM element which will receive mouse and touch events. * @param {number} [resolution=1] - The resolution / device pixel ratio of the new element (relative to the canvas). - * @private */ setTargetElement(element, resolution = 1) { diff --git a/src/particles/ParticleContainer.js b/src/particles/ParticleContainer.js index 233ee3b..40c9361 100644 --- a/src/particles/ParticleContainer.js +++ b/src/particles/ParticleContainer.js @@ -3,9 +3,10 @@ /** * The ParticleContainer class is a really fast version of the Container built solely for speed, - * so use when you need a lot of sprites or particles. The tradeoff of the ParticleContainer is that advanced - * functionality will not work. ParticleContainer implements only the basic object transform (position, scale, rotation). - * Any other functionality like tinting, masking, etc will not work on sprites in this batch. + * so use when you need a lot of sprites or particles. The tradeoff of the ParticleContainer is that most advanced + * functionality will not work. ParticleContainer implements the basic object transform (position, scale, rotation) + * and some advanced functionality like tint (as of v4.5.6). + * Other more advanced functionality like masking, children, filters, etc will not work on sprites in this batch. * * It's extremely easy to use : *