diff --git a/bundles/pixi.js-legacy/package.json b/bundles/pixi.js-legacy/package.json index 1565ef3..97abd4a 100644 --- a/bundles/pixi.js-legacy/package.json +++ b/bundles/pixi.js-legacy/package.json @@ -40,6 +40,7 @@ "@pixi/canvas-renderer": "^5.0.4", "@pixi/canvas-sprite": "^5.0.4", "@pixi/canvas-sprite-tiling": "^5.0.4", + "@pixi/canvas-text": "^5.0.4", "pixi.js": "^5.0.4" } } diff --git a/bundles/pixi.js-legacy/package.json b/bundles/pixi.js-legacy/package.json index 1565ef3..97abd4a 100644 --- a/bundles/pixi.js-legacy/package.json +++ b/bundles/pixi.js-legacy/package.json @@ -40,6 +40,7 @@ "@pixi/canvas-renderer": "^5.0.4", "@pixi/canvas-sprite": "^5.0.4", "@pixi/canvas-sprite-tiling": "^5.0.4", + "@pixi/canvas-text": "^5.0.4", "pixi.js": "^5.0.4" } } diff --git a/bundles/pixi.js-legacy/src/index.js b/bundles/pixi.js-legacy/src/index.js index 956019c..f1598a1 100644 --- a/bundles/pixi.js-legacy/src/index.js +++ b/bundles/pixi.js-legacy/src/index.js @@ -8,6 +8,7 @@ import '@pixi/canvas-sprite-tiling'; import '@pixi/canvas-particles'; import '@pixi/canvas-display'; +import '@pixi/canvas-text'; CanvasRenderer.registerPlugin('accessibility', accessibility.AccessibilityManager); CanvasRenderer.registerPlugin('extract', canvasExtract.CanvasExtract); diff --git a/bundles/pixi.js-legacy/package.json b/bundles/pixi.js-legacy/package.json index 1565ef3..97abd4a 100644 --- a/bundles/pixi.js-legacy/package.json +++ b/bundles/pixi.js-legacy/package.json @@ -40,6 +40,7 @@ "@pixi/canvas-renderer": "^5.0.4", "@pixi/canvas-sprite": "^5.0.4", "@pixi/canvas-sprite-tiling": "^5.0.4", + "@pixi/canvas-text": "^5.0.4", "pixi.js": "^5.0.4" } } diff --git a/bundles/pixi.js-legacy/src/index.js b/bundles/pixi.js-legacy/src/index.js index 956019c..f1598a1 100644 --- a/bundles/pixi.js-legacy/src/index.js +++ b/bundles/pixi.js-legacy/src/index.js @@ -8,6 +8,7 @@ import '@pixi/canvas-sprite-tiling'; import '@pixi/canvas-particles'; import '@pixi/canvas-display'; +import '@pixi/canvas-text'; CanvasRenderer.registerPlugin('accessibility', accessibility.AccessibilityManager); CanvasRenderer.registerPlugin('extract', canvasExtract.CanvasExtract); diff --git a/packages/canvas/canvas-graphics/src/CanvasGraphicsRenderer.js b/packages/canvas/canvas-graphics/src/CanvasGraphicsRenderer.js index b7b7a7e..cabe8e2 100644 --- a/packages/canvas/canvas-graphics/src/CanvasGraphicsRenderer.js +++ b/packages/canvas/canvas-graphics/src/CanvasGraphicsRenderer.js @@ -55,7 +55,7 @@ if (graphics.canvasTintDirty !== graphics.dirty || graphics._prevTint !== graphics.tint) { - // this.updateGraphicsTint(graphics); + this.updateGraphicsTint(graphics); } renderer.setBlendMode(graphics.blendMode); @@ -69,8 +69,8 @@ const fillStyle = data.fillStyle; const lineStyle = data.lineStyle; - const fillColor = fillStyle.color;// data._fillTint; - const lineColor = lineStyle.color;// data._lineTint; + const fillColor = data._fillTint; + const lineColor = data._lineTint; context.lineWidth = lineStyle.width; @@ -298,13 +298,14 @@ const tintR = ((graphics.tint >> 16) & 0xFF) / 255; const tintG = ((graphics.tint >> 8) & 0xFF) / 255; const tintB = (graphics.tint & 0xFF) / 255; + const graphicsData = graphics.geometry.graphicsData; - for (let i = 0; i < graphics.graphicsData.length; ++i) + for (let i = 0; i < graphicsData.length; ++i) { - const data = graphics.graphicsData[i]; + const data = graphicsData[i]; - const fillColor = data.fillColor | 0; - const lineColor = data.lineColor | 0; + const fillColor = data.fillStyle.color | 0; + const lineColor = data.lineStyle.color | 0; // super inline, cos optimization :) data._fillTint = ( diff --git a/bundles/pixi.js-legacy/package.json b/bundles/pixi.js-legacy/package.json index 1565ef3..97abd4a 100644 --- a/bundles/pixi.js-legacy/package.json +++ b/bundles/pixi.js-legacy/package.json @@ -40,6 +40,7 @@ "@pixi/canvas-renderer": "^5.0.4", "@pixi/canvas-sprite": "^5.0.4", "@pixi/canvas-sprite-tiling": "^5.0.4", + "@pixi/canvas-text": "^5.0.4", "pixi.js": "^5.0.4" } } diff --git a/bundles/pixi.js-legacy/src/index.js b/bundles/pixi.js-legacy/src/index.js index 956019c..f1598a1 100644 --- a/bundles/pixi.js-legacy/src/index.js +++ b/bundles/pixi.js-legacy/src/index.js @@ -8,6 +8,7 @@ import '@pixi/canvas-sprite-tiling'; import '@pixi/canvas-particles'; import '@pixi/canvas-display'; +import '@pixi/canvas-text'; CanvasRenderer.registerPlugin('accessibility', accessibility.AccessibilityManager); CanvasRenderer.registerPlugin('extract', canvasExtract.CanvasExtract); diff --git a/packages/canvas/canvas-graphics/src/CanvasGraphicsRenderer.js b/packages/canvas/canvas-graphics/src/CanvasGraphicsRenderer.js index b7b7a7e..cabe8e2 100644 --- a/packages/canvas/canvas-graphics/src/CanvasGraphicsRenderer.js +++ b/packages/canvas/canvas-graphics/src/CanvasGraphicsRenderer.js @@ -55,7 +55,7 @@ if (graphics.canvasTintDirty !== graphics.dirty || graphics._prevTint !== graphics.tint) { - // this.updateGraphicsTint(graphics); + this.updateGraphicsTint(graphics); } renderer.setBlendMode(graphics.blendMode); @@ -69,8 +69,8 @@ const fillStyle = data.fillStyle; const lineStyle = data.lineStyle; - const fillColor = fillStyle.color;// data._fillTint; - const lineColor = lineStyle.color;// data._lineTint; + const fillColor = data._fillTint; + const lineColor = data._lineTint; context.lineWidth = lineStyle.width; @@ -298,13 +298,14 @@ const tintR = ((graphics.tint >> 16) & 0xFF) / 255; const tintG = ((graphics.tint >> 8) & 0xFF) / 255; const tintB = (graphics.tint & 0xFF) / 255; + const graphicsData = graphics.geometry.graphicsData; - for (let i = 0; i < graphics.graphicsData.length; ++i) + for (let i = 0; i < graphicsData.length; ++i) { - const data = graphics.graphicsData[i]; + const data = graphicsData[i]; - const fillColor = data.fillColor | 0; - const lineColor = data.lineColor | 0; + const fillColor = data.fillStyle.color | 0; + const lineColor = data.lineStyle.color | 0; // super inline, cos optimization :) data._fillTint = ( diff --git a/packages/canvas/canvas-mesh/src/NineSlicePlane.js b/packages/canvas/canvas-mesh/src/NineSlicePlane.js index d5ce07f..dccfd79 100644 --- a/packages/canvas/canvas-mesh/src/NineSlicePlane.js +++ b/packages/canvas/canvas-mesh/src/NineSlicePlane.js @@ -39,7 +39,7 @@ const transform = this.worldTransform; const res = renderer.resolution; const isTinted = this.tint !== 0xFFFFFF; - const texture = this._texture; + const texture = this.texture; // Work out tinting if (isTinted) diff --git a/bundles/pixi.js-legacy/package.json b/bundles/pixi.js-legacy/package.json index 1565ef3..97abd4a 100644 --- a/bundles/pixi.js-legacy/package.json +++ b/bundles/pixi.js-legacy/package.json @@ -40,6 +40,7 @@ "@pixi/canvas-renderer": "^5.0.4", "@pixi/canvas-sprite": "^5.0.4", "@pixi/canvas-sprite-tiling": "^5.0.4", + "@pixi/canvas-text": "^5.0.4", "pixi.js": "^5.0.4" } } diff --git a/bundles/pixi.js-legacy/src/index.js b/bundles/pixi.js-legacy/src/index.js index 956019c..f1598a1 100644 --- a/bundles/pixi.js-legacy/src/index.js +++ b/bundles/pixi.js-legacy/src/index.js @@ -8,6 +8,7 @@ import '@pixi/canvas-sprite-tiling'; import '@pixi/canvas-particles'; import '@pixi/canvas-display'; +import '@pixi/canvas-text'; CanvasRenderer.registerPlugin('accessibility', accessibility.AccessibilityManager); CanvasRenderer.registerPlugin('extract', canvasExtract.CanvasExtract); diff --git a/packages/canvas/canvas-graphics/src/CanvasGraphicsRenderer.js b/packages/canvas/canvas-graphics/src/CanvasGraphicsRenderer.js index b7b7a7e..cabe8e2 100644 --- a/packages/canvas/canvas-graphics/src/CanvasGraphicsRenderer.js +++ b/packages/canvas/canvas-graphics/src/CanvasGraphicsRenderer.js @@ -55,7 +55,7 @@ if (graphics.canvasTintDirty !== graphics.dirty || graphics._prevTint !== graphics.tint) { - // this.updateGraphicsTint(graphics); + this.updateGraphicsTint(graphics); } renderer.setBlendMode(graphics.blendMode); @@ -69,8 +69,8 @@ const fillStyle = data.fillStyle; const lineStyle = data.lineStyle; - const fillColor = fillStyle.color;// data._fillTint; - const lineColor = lineStyle.color;// data._lineTint; + const fillColor = data._fillTint; + const lineColor = data._lineTint; context.lineWidth = lineStyle.width; @@ -298,13 +298,14 @@ const tintR = ((graphics.tint >> 16) & 0xFF) / 255; const tintG = ((graphics.tint >> 8) & 0xFF) / 255; const tintB = (graphics.tint & 0xFF) / 255; + const graphicsData = graphics.geometry.graphicsData; - for (let i = 0; i < graphics.graphicsData.length; ++i) + for (let i = 0; i < graphicsData.length; ++i) { - const data = graphics.graphicsData[i]; + const data = graphicsData[i]; - const fillColor = data.fillColor | 0; - const lineColor = data.lineColor | 0; + const fillColor = data.fillStyle.color | 0; + const lineColor = data.lineStyle.color | 0; // super inline, cos optimization :) data._fillTint = ( diff --git a/packages/canvas/canvas-mesh/src/NineSlicePlane.js b/packages/canvas/canvas-mesh/src/NineSlicePlane.js index d5ce07f..dccfd79 100644 --- a/packages/canvas/canvas-mesh/src/NineSlicePlane.js +++ b/packages/canvas/canvas-mesh/src/NineSlicePlane.js @@ -39,7 +39,7 @@ const transform = this.worldTransform; const res = renderer.resolution; const isTinted = this.tint !== 0xFFFFFF; - const texture = this._texture; + const texture = this.texture; // Work out tinting if (isTinted) diff --git a/packages/canvas/canvas-renderer/src/CanvasTinter.js b/packages/canvas/canvas-renderer/src/CanvasTinter.js index 6ea164b..7abf0f3 100644 --- a/packages/canvas/canvas-renderer/src/CanvasTinter.js +++ b/packages/canvas/canvas-renderer/src/CanvasTinter.js @@ -21,7 +21,7 @@ */ getTintedCanvas: (sprite, color) => { - const texture = sprite._texture; + const texture = sprite.texture; color = CanvasTinter.roundColor(color); diff --git a/bundles/pixi.js-legacy/package.json b/bundles/pixi.js-legacy/package.json index 1565ef3..97abd4a 100644 --- a/bundles/pixi.js-legacy/package.json +++ b/bundles/pixi.js-legacy/package.json @@ -40,6 +40,7 @@ "@pixi/canvas-renderer": "^5.0.4", "@pixi/canvas-sprite": "^5.0.4", "@pixi/canvas-sprite-tiling": "^5.0.4", + "@pixi/canvas-text": "^5.0.4", "pixi.js": "^5.0.4" } } diff --git a/bundles/pixi.js-legacy/src/index.js b/bundles/pixi.js-legacy/src/index.js index 956019c..f1598a1 100644 --- a/bundles/pixi.js-legacy/src/index.js +++ b/bundles/pixi.js-legacy/src/index.js @@ -8,6 +8,7 @@ import '@pixi/canvas-sprite-tiling'; import '@pixi/canvas-particles'; import '@pixi/canvas-display'; +import '@pixi/canvas-text'; CanvasRenderer.registerPlugin('accessibility', accessibility.AccessibilityManager); CanvasRenderer.registerPlugin('extract', canvasExtract.CanvasExtract); diff --git a/packages/canvas/canvas-graphics/src/CanvasGraphicsRenderer.js b/packages/canvas/canvas-graphics/src/CanvasGraphicsRenderer.js index b7b7a7e..cabe8e2 100644 --- a/packages/canvas/canvas-graphics/src/CanvasGraphicsRenderer.js +++ b/packages/canvas/canvas-graphics/src/CanvasGraphicsRenderer.js @@ -55,7 +55,7 @@ if (graphics.canvasTintDirty !== graphics.dirty || graphics._prevTint !== graphics.tint) { - // this.updateGraphicsTint(graphics); + this.updateGraphicsTint(graphics); } renderer.setBlendMode(graphics.blendMode); @@ -69,8 +69,8 @@ const fillStyle = data.fillStyle; const lineStyle = data.lineStyle; - const fillColor = fillStyle.color;// data._fillTint; - const lineColor = lineStyle.color;// data._lineTint; + const fillColor = data._fillTint; + const lineColor = data._lineTint; context.lineWidth = lineStyle.width; @@ -298,13 +298,14 @@ const tintR = ((graphics.tint >> 16) & 0xFF) / 255; const tintG = ((graphics.tint >> 8) & 0xFF) / 255; const tintB = (graphics.tint & 0xFF) / 255; + const graphicsData = graphics.geometry.graphicsData; - for (let i = 0; i < graphics.graphicsData.length; ++i) + for (let i = 0; i < graphicsData.length; ++i) { - const data = graphics.graphicsData[i]; + const data = graphicsData[i]; - const fillColor = data.fillColor | 0; - const lineColor = data.lineColor | 0; + const fillColor = data.fillStyle.color | 0; + const lineColor = data.lineStyle.color | 0; // super inline, cos optimization :) data._fillTint = ( diff --git a/packages/canvas/canvas-mesh/src/NineSlicePlane.js b/packages/canvas/canvas-mesh/src/NineSlicePlane.js index d5ce07f..dccfd79 100644 --- a/packages/canvas/canvas-mesh/src/NineSlicePlane.js +++ b/packages/canvas/canvas-mesh/src/NineSlicePlane.js @@ -39,7 +39,7 @@ const transform = this.worldTransform; const res = renderer.resolution; const isTinted = this.tint !== 0xFFFFFF; - const texture = this._texture; + const texture = this.texture; // Work out tinting if (isTinted) diff --git a/packages/canvas/canvas-renderer/src/CanvasTinter.js b/packages/canvas/canvas-renderer/src/CanvasTinter.js index 6ea164b..7abf0f3 100644 --- a/packages/canvas/canvas-renderer/src/CanvasTinter.js +++ b/packages/canvas/canvas-renderer/src/CanvasTinter.js @@ -21,7 +21,7 @@ */ getTintedCanvas: (sprite, color) => { - const texture = sprite._texture; + const texture = sprite.texture; color = CanvasTinter.roundColor(color); diff --git a/packages/canvas/canvas-text/LICENSE b/packages/canvas/canvas-text/LICENSE new file mode 100644 index 0000000..148e3eb --- /dev/null +++ b/packages/canvas/canvas-text/LICENSE @@ -0,0 +1,21 @@ +The MIT License + +Copyright (c) 2013-2018 Mathew Groves, Chad Engler + +Permission is hereby granted, free of charge, to any person obtaining a copy +of this software and associated documentation files (the "Software"), to deal +in the Software without restriction, including without limitation the rights +to use, copy, modify, merge, publish, distribute, sublicense, and/or sell +copies of the Software, and to permit persons to whom the Software is +furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in +all copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, +FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE +AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER +LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, +OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN +THE SOFTWARE. \ No newline at end of file diff --git a/bundles/pixi.js-legacy/package.json b/bundles/pixi.js-legacy/package.json index 1565ef3..97abd4a 100644 --- a/bundles/pixi.js-legacy/package.json +++ b/bundles/pixi.js-legacy/package.json @@ -40,6 +40,7 @@ "@pixi/canvas-renderer": "^5.0.4", "@pixi/canvas-sprite": "^5.0.4", "@pixi/canvas-sprite-tiling": "^5.0.4", + "@pixi/canvas-text": "^5.0.4", "pixi.js": "^5.0.4" } } diff --git a/bundles/pixi.js-legacy/src/index.js b/bundles/pixi.js-legacy/src/index.js index 956019c..f1598a1 100644 --- a/bundles/pixi.js-legacy/src/index.js +++ b/bundles/pixi.js-legacy/src/index.js @@ -8,6 +8,7 @@ import '@pixi/canvas-sprite-tiling'; import '@pixi/canvas-particles'; import '@pixi/canvas-display'; +import '@pixi/canvas-text'; CanvasRenderer.registerPlugin('accessibility', accessibility.AccessibilityManager); CanvasRenderer.registerPlugin('extract', canvasExtract.CanvasExtract); diff --git a/packages/canvas/canvas-graphics/src/CanvasGraphicsRenderer.js b/packages/canvas/canvas-graphics/src/CanvasGraphicsRenderer.js index b7b7a7e..cabe8e2 100644 --- a/packages/canvas/canvas-graphics/src/CanvasGraphicsRenderer.js +++ b/packages/canvas/canvas-graphics/src/CanvasGraphicsRenderer.js @@ -55,7 +55,7 @@ if (graphics.canvasTintDirty !== graphics.dirty || graphics._prevTint !== graphics.tint) { - // this.updateGraphicsTint(graphics); + this.updateGraphicsTint(graphics); } renderer.setBlendMode(graphics.blendMode); @@ -69,8 +69,8 @@ const fillStyle = data.fillStyle; const lineStyle = data.lineStyle; - const fillColor = fillStyle.color;// data._fillTint; - const lineColor = lineStyle.color;// data._lineTint; + const fillColor = data._fillTint; + const lineColor = data._lineTint; context.lineWidth = lineStyle.width; @@ -298,13 +298,14 @@ const tintR = ((graphics.tint >> 16) & 0xFF) / 255; const tintG = ((graphics.tint >> 8) & 0xFF) / 255; const tintB = (graphics.tint & 0xFF) / 255; + const graphicsData = graphics.geometry.graphicsData; - for (let i = 0; i < graphics.graphicsData.length; ++i) + for (let i = 0; i < graphicsData.length; ++i) { - const data = graphics.graphicsData[i]; + const data = graphicsData[i]; - const fillColor = data.fillColor | 0; - const lineColor = data.lineColor | 0; + const fillColor = data.fillStyle.color | 0; + const lineColor = data.lineStyle.color | 0; // super inline, cos optimization :) data._fillTint = ( diff --git a/packages/canvas/canvas-mesh/src/NineSlicePlane.js b/packages/canvas/canvas-mesh/src/NineSlicePlane.js index d5ce07f..dccfd79 100644 --- a/packages/canvas/canvas-mesh/src/NineSlicePlane.js +++ b/packages/canvas/canvas-mesh/src/NineSlicePlane.js @@ -39,7 +39,7 @@ const transform = this.worldTransform; const res = renderer.resolution; const isTinted = this.tint !== 0xFFFFFF; - const texture = this._texture; + const texture = this.texture; // Work out tinting if (isTinted) diff --git a/packages/canvas/canvas-renderer/src/CanvasTinter.js b/packages/canvas/canvas-renderer/src/CanvasTinter.js index 6ea164b..7abf0f3 100644 --- a/packages/canvas/canvas-renderer/src/CanvasTinter.js +++ b/packages/canvas/canvas-renderer/src/CanvasTinter.js @@ -21,7 +21,7 @@ */ getTintedCanvas: (sprite, color) => { - const texture = sprite._texture; + const texture = sprite.texture; color = CanvasTinter.roundColor(color); diff --git a/packages/canvas/canvas-text/LICENSE b/packages/canvas/canvas-text/LICENSE new file mode 100644 index 0000000..148e3eb --- /dev/null +++ b/packages/canvas/canvas-text/LICENSE @@ -0,0 +1,21 @@ +The MIT License + +Copyright (c) 2013-2018 Mathew Groves, Chad Engler + +Permission is hereby granted, free of charge, to any person obtaining a copy +of this software and associated documentation files (the "Software"), to deal +in the Software without restriction, including without limitation the rights +to use, copy, modify, merge, publish, distribute, sublicense, and/or sell +copies of the Software, and to permit persons to whom the Software is +furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in +all copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, +FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE +AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER +LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, +OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN +THE SOFTWARE. \ No newline at end of file diff --git a/packages/canvas/canvas-text/README.md b/packages/canvas/canvas-text/README.md new file mode 100644 index 0000000..d6d3b4c --- /dev/null +++ b/packages/canvas/canvas-text/README.md @@ -0,0 +1,13 @@ +# @pixi/canvas-text + +## Installation + +```bash +npm install @pixi/canvas-text +``` + +## Usage + +```js +import '@pixi/canvas-text'; +``` \ No newline at end of file diff --git a/bundles/pixi.js-legacy/package.json b/bundles/pixi.js-legacy/package.json index 1565ef3..97abd4a 100644 --- a/bundles/pixi.js-legacy/package.json +++ b/bundles/pixi.js-legacy/package.json @@ -40,6 +40,7 @@ "@pixi/canvas-renderer": "^5.0.4", "@pixi/canvas-sprite": "^5.0.4", "@pixi/canvas-sprite-tiling": "^5.0.4", + "@pixi/canvas-text": "^5.0.4", "pixi.js": "^5.0.4" } } diff --git a/bundles/pixi.js-legacy/src/index.js b/bundles/pixi.js-legacy/src/index.js index 956019c..f1598a1 100644 --- a/bundles/pixi.js-legacy/src/index.js +++ b/bundles/pixi.js-legacy/src/index.js @@ -8,6 +8,7 @@ import '@pixi/canvas-sprite-tiling'; import '@pixi/canvas-particles'; import '@pixi/canvas-display'; +import '@pixi/canvas-text'; CanvasRenderer.registerPlugin('accessibility', accessibility.AccessibilityManager); CanvasRenderer.registerPlugin('extract', canvasExtract.CanvasExtract); diff --git a/packages/canvas/canvas-graphics/src/CanvasGraphicsRenderer.js b/packages/canvas/canvas-graphics/src/CanvasGraphicsRenderer.js index b7b7a7e..cabe8e2 100644 --- a/packages/canvas/canvas-graphics/src/CanvasGraphicsRenderer.js +++ b/packages/canvas/canvas-graphics/src/CanvasGraphicsRenderer.js @@ -55,7 +55,7 @@ if (graphics.canvasTintDirty !== graphics.dirty || graphics._prevTint !== graphics.tint) { - // this.updateGraphicsTint(graphics); + this.updateGraphicsTint(graphics); } renderer.setBlendMode(graphics.blendMode); @@ -69,8 +69,8 @@ const fillStyle = data.fillStyle; const lineStyle = data.lineStyle; - const fillColor = fillStyle.color;// data._fillTint; - const lineColor = lineStyle.color;// data._lineTint; + const fillColor = data._fillTint; + const lineColor = data._lineTint; context.lineWidth = lineStyle.width; @@ -298,13 +298,14 @@ const tintR = ((graphics.tint >> 16) & 0xFF) / 255; const tintG = ((graphics.tint >> 8) & 0xFF) / 255; const tintB = (graphics.tint & 0xFF) / 255; + const graphicsData = graphics.geometry.graphicsData; - for (let i = 0; i < graphics.graphicsData.length; ++i) + for (let i = 0; i < graphicsData.length; ++i) { - const data = graphics.graphicsData[i]; + const data = graphicsData[i]; - const fillColor = data.fillColor | 0; - const lineColor = data.lineColor | 0; + const fillColor = data.fillStyle.color | 0; + const lineColor = data.lineStyle.color | 0; // super inline, cos optimization :) data._fillTint = ( diff --git a/packages/canvas/canvas-mesh/src/NineSlicePlane.js b/packages/canvas/canvas-mesh/src/NineSlicePlane.js index d5ce07f..dccfd79 100644 --- a/packages/canvas/canvas-mesh/src/NineSlicePlane.js +++ b/packages/canvas/canvas-mesh/src/NineSlicePlane.js @@ -39,7 +39,7 @@ const transform = this.worldTransform; const res = renderer.resolution; const isTinted = this.tint !== 0xFFFFFF; - const texture = this._texture; + const texture = this.texture; // Work out tinting if (isTinted) diff --git a/packages/canvas/canvas-renderer/src/CanvasTinter.js b/packages/canvas/canvas-renderer/src/CanvasTinter.js index 6ea164b..7abf0f3 100644 --- a/packages/canvas/canvas-renderer/src/CanvasTinter.js +++ b/packages/canvas/canvas-renderer/src/CanvasTinter.js @@ -21,7 +21,7 @@ */ getTintedCanvas: (sprite, color) => { - const texture = sprite._texture; + const texture = sprite.texture; color = CanvasTinter.roundColor(color); diff --git a/packages/canvas/canvas-text/LICENSE b/packages/canvas/canvas-text/LICENSE new file mode 100644 index 0000000..148e3eb --- /dev/null +++ b/packages/canvas/canvas-text/LICENSE @@ -0,0 +1,21 @@ +The MIT License + +Copyright (c) 2013-2018 Mathew Groves, Chad Engler + +Permission is hereby granted, free of charge, to any person obtaining a copy +of this software and associated documentation files (the "Software"), to deal +in the Software without restriction, including without limitation the rights +to use, copy, modify, merge, publish, distribute, sublicense, and/or sell +copies of the Software, and to permit persons to whom the Software is +furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in +all copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, +FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE +AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER +LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, +OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN +THE SOFTWARE. \ No newline at end of file diff --git a/packages/canvas/canvas-text/README.md b/packages/canvas/canvas-text/README.md new file mode 100644 index 0000000..d6d3b4c --- /dev/null +++ b/packages/canvas/canvas-text/README.md @@ -0,0 +1,13 @@ +# @pixi/canvas-text + +## Installation + +```bash +npm install @pixi/canvas-text +``` + +## Usage + +```js +import '@pixi/canvas-text'; +``` \ No newline at end of file diff --git a/packages/canvas/canvas-text/package.json b/packages/canvas/canvas-text/package.json new file mode 100644 index 0000000..7d3ba59 --- /dev/null +++ b/packages/canvas/canvas-text/package.json @@ -0,0 +1,28 @@ +{ + "name": "@pixi/canvas-text", + "version": "5.0.4", + "main": "lib/canvas-text.js", + "module": "lib/canvas-text.es.js", + "bundle": "dist/canvas-text.js", + "bundleNoExports": true, + "description": "Canvas mixin for the text package", + "author": "Dave Moore", + "homepage": "http://pixijs.com/", + "bugs": "https://github.com/pixijs/pixi.js/issues", + "license": "MIT", + "repository": { + "type": "git", + "url": "https://github.com/pixijs/pixi.js.git" + }, + "publishConfig": { + "access": "public" + }, + "files": [ + "lib", + "dist" + ], + "dependencies": { + "@pixi/sprite": "^5.0.4", + "@pixi/text": "^5.0.4" + } +} diff --git a/bundles/pixi.js-legacy/package.json b/bundles/pixi.js-legacy/package.json index 1565ef3..97abd4a 100644 --- a/bundles/pixi.js-legacy/package.json +++ b/bundles/pixi.js-legacy/package.json @@ -40,6 +40,7 @@ "@pixi/canvas-renderer": "^5.0.4", "@pixi/canvas-sprite": "^5.0.4", "@pixi/canvas-sprite-tiling": "^5.0.4", + "@pixi/canvas-text": "^5.0.4", "pixi.js": "^5.0.4" } } diff --git a/bundles/pixi.js-legacy/src/index.js b/bundles/pixi.js-legacy/src/index.js index 956019c..f1598a1 100644 --- a/bundles/pixi.js-legacy/src/index.js +++ b/bundles/pixi.js-legacy/src/index.js @@ -8,6 +8,7 @@ import '@pixi/canvas-sprite-tiling'; import '@pixi/canvas-particles'; import '@pixi/canvas-display'; +import '@pixi/canvas-text'; CanvasRenderer.registerPlugin('accessibility', accessibility.AccessibilityManager); CanvasRenderer.registerPlugin('extract', canvasExtract.CanvasExtract); diff --git a/packages/canvas/canvas-graphics/src/CanvasGraphicsRenderer.js b/packages/canvas/canvas-graphics/src/CanvasGraphicsRenderer.js index b7b7a7e..cabe8e2 100644 --- a/packages/canvas/canvas-graphics/src/CanvasGraphicsRenderer.js +++ b/packages/canvas/canvas-graphics/src/CanvasGraphicsRenderer.js @@ -55,7 +55,7 @@ if (graphics.canvasTintDirty !== graphics.dirty || graphics._prevTint !== graphics.tint) { - // this.updateGraphicsTint(graphics); + this.updateGraphicsTint(graphics); } renderer.setBlendMode(graphics.blendMode); @@ -69,8 +69,8 @@ const fillStyle = data.fillStyle; const lineStyle = data.lineStyle; - const fillColor = fillStyle.color;// data._fillTint; - const lineColor = lineStyle.color;// data._lineTint; + const fillColor = data._fillTint; + const lineColor = data._lineTint; context.lineWidth = lineStyle.width; @@ -298,13 +298,14 @@ const tintR = ((graphics.tint >> 16) & 0xFF) / 255; const tintG = ((graphics.tint >> 8) & 0xFF) / 255; const tintB = (graphics.tint & 0xFF) / 255; + const graphicsData = graphics.geometry.graphicsData; - for (let i = 0; i < graphics.graphicsData.length; ++i) + for (let i = 0; i < graphicsData.length; ++i) { - const data = graphics.graphicsData[i]; + const data = graphicsData[i]; - const fillColor = data.fillColor | 0; - const lineColor = data.lineColor | 0; + const fillColor = data.fillStyle.color | 0; + const lineColor = data.lineStyle.color | 0; // super inline, cos optimization :) data._fillTint = ( diff --git a/packages/canvas/canvas-mesh/src/NineSlicePlane.js b/packages/canvas/canvas-mesh/src/NineSlicePlane.js index d5ce07f..dccfd79 100644 --- a/packages/canvas/canvas-mesh/src/NineSlicePlane.js +++ b/packages/canvas/canvas-mesh/src/NineSlicePlane.js @@ -39,7 +39,7 @@ const transform = this.worldTransform; const res = renderer.resolution; const isTinted = this.tint !== 0xFFFFFF; - const texture = this._texture; + const texture = this.texture; // Work out tinting if (isTinted) diff --git a/packages/canvas/canvas-renderer/src/CanvasTinter.js b/packages/canvas/canvas-renderer/src/CanvasTinter.js index 6ea164b..7abf0f3 100644 --- a/packages/canvas/canvas-renderer/src/CanvasTinter.js +++ b/packages/canvas/canvas-renderer/src/CanvasTinter.js @@ -21,7 +21,7 @@ */ getTintedCanvas: (sprite, color) => { - const texture = sprite._texture; + const texture = sprite.texture; color = CanvasTinter.roundColor(color); diff --git a/packages/canvas/canvas-text/LICENSE b/packages/canvas/canvas-text/LICENSE new file mode 100644 index 0000000..148e3eb --- /dev/null +++ b/packages/canvas/canvas-text/LICENSE @@ -0,0 +1,21 @@ +The MIT License + +Copyright (c) 2013-2018 Mathew Groves, Chad Engler + +Permission is hereby granted, free of charge, to any person obtaining a copy +of this software and associated documentation files (the "Software"), to deal +in the Software without restriction, including without limitation the rights +to use, copy, modify, merge, publish, distribute, sublicense, and/or sell +copies of the Software, and to permit persons to whom the Software is +furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in +all copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, +FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE +AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER +LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, +OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN +THE SOFTWARE. \ No newline at end of file diff --git a/packages/canvas/canvas-text/README.md b/packages/canvas/canvas-text/README.md new file mode 100644 index 0000000..d6d3b4c --- /dev/null +++ b/packages/canvas/canvas-text/README.md @@ -0,0 +1,13 @@ +# @pixi/canvas-text + +## Installation + +```bash +npm install @pixi/canvas-text +``` + +## Usage + +```js +import '@pixi/canvas-text'; +``` \ No newline at end of file diff --git a/packages/canvas/canvas-text/package.json b/packages/canvas/canvas-text/package.json new file mode 100644 index 0000000..7d3ba59 --- /dev/null +++ b/packages/canvas/canvas-text/package.json @@ -0,0 +1,28 @@ +{ + "name": "@pixi/canvas-text", + "version": "5.0.4", + "main": "lib/canvas-text.js", + "module": "lib/canvas-text.es.js", + "bundle": "dist/canvas-text.js", + "bundleNoExports": true, + "description": "Canvas mixin for the text package", + "author": "Dave Moore", + "homepage": "http://pixijs.com/", + "bugs": "https://github.com/pixijs/pixi.js/issues", + "license": "MIT", + "repository": { + "type": "git", + "url": "https://github.com/pixijs/pixi.js.git" + }, + "publishConfig": { + "access": "public" + }, + "files": [ + "lib", + "dist" + ], + "dependencies": { + "@pixi/sprite": "^5.0.4", + "@pixi/text": "^5.0.4" + } +} diff --git a/packages/canvas/canvas-text/src/Text.js b/packages/canvas/canvas-text/src/Text.js new file mode 100644 index 0000000..0e0f9f5 --- /dev/null +++ b/packages/canvas/canvas-text/src/Text.js @@ -0,0 +1,23 @@ +import { Text } from '@pixi/text'; +import { Sprite } from '@pixi/sprite'; + +/** + * Renders the object using the Canvas renderer + * + * @method _renderCanvas + * @memberof PIXI.Text# + * @private + * @param {PIXI.CanvasRenderer} renderer - The renderer + */ +Text.prototype._renderCanvas = function _renderCanvas(renderer) +{ + if (this._autoResolution && this._resolution !== renderer.resolution) + { + this._resolution = renderer.resolution; + this.dirty = true; + } + + this.updateText(true); + + Sprite.prototype._renderCanvas.call(this, renderer); +}; diff --git a/bundles/pixi.js-legacy/package.json b/bundles/pixi.js-legacy/package.json index 1565ef3..97abd4a 100644 --- a/bundles/pixi.js-legacy/package.json +++ b/bundles/pixi.js-legacy/package.json @@ -40,6 +40,7 @@ "@pixi/canvas-renderer": "^5.0.4", "@pixi/canvas-sprite": "^5.0.4", "@pixi/canvas-sprite-tiling": "^5.0.4", + "@pixi/canvas-text": "^5.0.4", "pixi.js": "^5.0.4" } } diff --git a/bundles/pixi.js-legacy/src/index.js b/bundles/pixi.js-legacy/src/index.js index 956019c..f1598a1 100644 --- a/bundles/pixi.js-legacy/src/index.js +++ b/bundles/pixi.js-legacy/src/index.js @@ -8,6 +8,7 @@ import '@pixi/canvas-sprite-tiling'; import '@pixi/canvas-particles'; import '@pixi/canvas-display'; +import '@pixi/canvas-text'; CanvasRenderer.registerPlugin('accessibility', accessibility.AccessibilityManager); CanvasRenderer.registerPlugin('extract', canvasExtract.CanvasExtract); diff --git a/packages/canvas/canvas-graphics/src/CanvasGraphicsRenderer.js b/packages/canvas/canvas-graphics/src/CanvasGraphicsRenderer.js index b7b7a7e..cabe8e2 100644 --- a/packages/canvas/canvas-graphics/src/CanvasGraphicsRenderer.js +++ b/packages/canvas/canvas-graphics/src/CanvasGraphicsRenderer.js @@ -55,7 +55,7 @@ if (graphics.canvasTintDirty !== graphics.dirty || graphics._prevTint !== graphics.tint) { - // this.updateGraphicsTint(graphics); + this.updateGraphicsTint(graphics); } renderer.setBlendMode(graphics.blendMode); @@ -69,8 +69,8 @@ const fillStyle = data.fillStyle; const lineStyle = data.lineStyle; - const fillColor = fillStyle.color;// data._fillTint; - const lineColor = lineStyle.color;// data._lineTint; + const fillColor = data._fillTint; + const lineColor = data._lineTint; context.lineWidth = lineStyle.width; @@ -298,13 +298,14 @@ const tintR = ((graphics.tint >> 16) & 0xFF) / 255; const tintG = ((graphics.tint >> 8) & 0xFF) / 255; const tintB = (graphics.tint & 0xFF) / 255; + const graphicsData = graphics.geometry.graphicsData; - for (let i = 0; i < graphics.graphicsData.length; ++i) + for (let i = 0; i < graphicsData.length; ++i) { - const data = graphics.graphicsData[i]; + const data = graphicsData[i]; - const fillColor = data.fillColor | 0; - const lineColor = data.lineColor | 0; + const fillColor = data.fillStyle.color | 0; + const lineColor = data.lineStyle.color | 0; // super inline, cos optimization :) data._fillTint = ( diff --git a/packages/canvas/canvas-mesh/src/NineSlicePlane.js b/packages/canvas/canvas-mesh/src/NineSlicePlane.js index d5ce07f..dccfd79 100644 --- a/packages/canvas/canvas-mesh/src/NineSlicePlane.js +++ b/packages/canvas/canvas-mesh/src/NineSlicePlane.js @@ -39,7 +39,7 @@ const transform = this.worldTransform; const res = renderer.resolution; const isTinted = this.tint !== 0xFFFFFF; - const texture = this._texture; + const texture = this.texture; // Work out tinting if (isTinted) diff --git a/packages/canvas/canvas-renderer/src/CanvasTinter.js b/packages/canvas/canvas-renderer/src/CanvasTinter.js index 6ea164b..7abf0f3 100644 --- a/packages/canvas/canvas-renderer/src/CanvasTinter.js +++ b/packages/canvas/canvas-renderer/src/CanvasTinter.js @@ -21,7 +21,7 @@ */ getTintedCanvas: (sprite, color) => { - const texture = sprite._texture; + const texture = sprite.texture; color = CanvasTinter.roundColor(color); diff --git a/packages/canvas/canvas-text/LICENSE b/packages/canvas/canvas-text/LICENSE new file mode 100644 index 0000000..148e3eb --- /dev/null +++ b/packages/canvas/canvas-text/LICENSE @@ -0,0 +1,21 @@ +The MIT License + +Copyright (c) 2013-2018 Mathew Groves, Chad Engler + +Permission is hereby granted, free of charge, to any person obtaining a copy +of this software and associated documentation files (the "Software"), to deal +in the Software without restriction, including without limitation the rights +to use, copy, modify, merge, publish, distribute, sublicense, and/or sell +copies of the Software, and to permit persons to whom the Software is +furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in +all copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, +FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE +AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER +LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, +OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN +THE SOFTWARE. \ No newline at end of file diff --git a/packages/canvas/canvas-text/README.md b/packages/canvas/canvas-text/README.md new file mode 100644 index 0000000..d6d3b4c --- /dev/null +++ b/packages/canvas/canvas-text/README.md @@ -0,0 +1,13 @@ +# @pixi/canvas-text + +## Installation + +```bash +npm install @pixi/canvas-text +``` + +## Usage + +```js +import '@pixi/canvas-text'; +``` \ No newline at end of file diff --git a/packages/canvas/canvas-text/package.json b/packages/canvas/canvas-text/package.json new file mode 100644 index 0000000..7d3ba59 --- /dev/null +++ b/packages/canvas/canvas-text/package.json @@ -0,0 +1,28 @@ +{ + "name": "@pixi/canvas-text", + "version": "5.0.4", + "main": "lib/canvas-text.js", + "module": "lib/canvas-text.es.js", + "bundle": "dist/canvas-text.js", + "bundleNoExports": true, + "description": "Canvas mixin for the text package", + "author": "Dave Moore", + "homepage": "http://pixijs.com/", + "bugs": "https://github.com/pixijs/pixi.js/issues", + "license": "MIT", + "repository": { + "type": "git", + "url": "https://github.com/pixijs/pixi.js.git" + }, + "publishConfig": { + "access": "public" + }, + "files": [ + "lib", + "dist" + ], + "dependencies": { + "@pixi/sprite": "^5.0.4", + "@pixi/text": "^5.0.4" + } +} diff --git a/packages/canvas/canvas-text/src/Text.js b/packages/canvas/canvas-text/src/Text.js new file mode 100644 index 0000000..0e0f9f5 --- /dev/null +++ b/packages/canvas/canvas-text/src/Text.js @@ -0,0 +1,23 @@ +import { Text } from '@pixi/text'; +import { Sprite } from '@pixi/sprite'; + +/** + * Renders the object using the Canvas renderer + * + * @method _renderCanvas + * @memberof PIXI.Text# + * @private + * @param {PIXI.CanvasRenderer} renderer - The renderer + */ +Text.prototype._renderCanvas = function _renderCanvas(renderer) +{ + if (this._autoResolution && this._resolution !== renderer.resolution) + { + this._resolution = renderer.resolution; + this.dirty = true; + } + + this.updateText(true); + + Sprite.prototype._renderCanvas.call(this, renderer); +}; diff --git a/packages/canvas/canvas-text/src/index.js b/packages/canvas/canvas-text/src/index.js new file mode 100644 index 0000000..7bdb7ed --- /dev/null +++ b/packages/canvas/canvas-text/src/index.js @@ -0,0 +1 @@ +import './Text'; diff --git a/bundles/pixi.js-legacy/package.json b/bundles/pixi.js-legacy/package.json index 1565ef3..97abd4a 100644 --- a/bundles/pixi.js-legacy/package.json +++ b/bundles/pixi.js-legacy/package.json @@ -40,6 +40,7 @@ "@pixi/canvas-renderer": "^5.0.4", "@pixi/canvas-sprite": "^5.0.4", "@pixi/canvas-sprite-tiling": "^5.0.4", + "@pixi/canvas-text": "^5.0.4", "pixi.js": "^5.0.4" } } diff --git a/bundles/pixi.js-legacy/src/index.js b/bundles/pixi.js-legacy/src/index.js index 956019c..f1598a1 100644 --- a/bundles/pixi.js-legacy/src/index.js +++ b/bundles/pixi.js-legacy/src/index.js @@ -8,6 +8,7 @@ import '@pixi/canvas-sprite-tiling'; import '@pixi/canvas-particles'; import '@pixi/canvas-display'; +import '@pixi/canvas-text'; CanvasRenderer.registerPlugin('accessibility', accessibility.AccessibilityManager); CanvasRenderer.registerPlugin('extract', canvasExtract.CanvasExtract); diff --git a/packages/canvas/canvas-graphics/src/CanvasGraphicsRenderer.js b/packages/canvas/canvas-graphics/src/CanvasGraphicsRenderer.js index b7b7a7e..cabe8e2 100644 --- a/packages/canvas/canvas-graphics/src/CanvasGraphicsRenderer.js +++ b/packages/canvas/canvas-graphics/src/CanvasGraphicsRenderer.js @@ -55,7 +55,7 @@ if (graphics.canvasTintDirty !== graphics.dirty || graphics._prevTint !== graphics.tint) { - // this.updateGraphicsTint(graphics); + this.updateGraphicsTint(graphics); } renderer.setBlendMode(graphics.blendMode); @@ -69,8 +69,8 @@ const fillStyle = data.fillStyle; const lineStyle = data.lineStyle; - const fillColor = fillStyle.color;// data._fillTint; - const lineColor = lineStyle.color;// data._lineTint; + const fillColor = data._fillTint; + const lineColor = data._lineTint; context.lineWidth = lineStyle.width; @@ -298,13 +298,14 @@ const tintR = ((graphics.tint >> 16) & 0xFF) / 255; const tintG = ((graphics.tint >> 8) & 0xFF) / 255; const tintB = (graphics.tint & 0xFF) / 255; + const graphicsData = graphics.geometry.graphicsData; - for (let i = 0; i < graphics.graphicsData.length; ++i) + for (let i = 0; i < graphicsData.length; ++i) { - const data = graphics.graphicsData[i]; + const data = graphicsData[i]; - const fillColor = data.fillColor | 0; - const lineColor = data.lineColor | 0; + const fillColor = data.fillStyle.color | 0; + const lineColor = data.lineStyle.color | 0; // super inline, cos optimization :) data._fillTint = ( diff --git a/packages/canvas/canvas-mesh/src/NineSlicePlane.js b/packages/canvas/canvas-mesh/src/NineSlicePlane.js index d5ce07f..dccfd79 100644 --- a/packages/canvas/canvas-mesh/src/NineSlicePlane.js +++ b/packages/canvas/canvas-mesh/src/NineSlicePlane.js @@ -39,7 +39,7 @@ const transform = this.worldTransform; const res = renderer.resolution; const isTinted = this.tint !== 0xFFFFFF; - const texture = this._texture; + const texture = this.texture; // Work out tinting if (isTinted) diff --git a/packages/canvas/canvas-renderer/src/CanvasTinter.js b/packages/canvas/canvas-renderer/src/CanvasTinter.js index 6ea164b..7abf0f3 100644 --- a/packages/canvas/canvas-renderer/src/CanvasTinter.js +++ b/packages/canvas/canvas-renderer/src/CanvasTinter.js @@ -21,7 +21,7 @@ */ getTintedCanvas: (sprite, color) => { - const texture = sprite._texture; + const texture = sprite.texture; color = CanvasTinter.roundColor(color); diff --git a/packages/canvas/canvas-text/LICENSE b/packages/canvas/canvas-text/LICENSE new file mode 100644 index 0000000..148e3eb --- /dev/null +++ b/packages/canvas/canvas-text/LICENSE @@ -0,0 +1,21 @@ +The MIT License + +Copyright (c) 2013-2018 Mathew Groves, Chad Engler + +Permission is hereby granted, free of charge, to any person obtaining a copy +of this software and associated documentation files (the "Software"), to deal +in the Software without restriction, including without limitation the rights +to use, copy, modify, merge, publish, distribute, sublicense, and/or sell +copies of the Software, and to permit persons to whom the Software is +furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in +all copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, +FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE +AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER +LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, +OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN +THE SOFTWARE. \ No newline at end of file diff --git a/packages/canvas/canvas-text/README.md b/packages/canvas/canvas-text/README.md new file mode 100644 index 0000000..d6d3b4c --- /dev/null +++ b/packages/canvas/canvas-text/README.md @@ -0,0 +1,13 @@ +# @pixi/canvas-text + +## Installation + +```bash +npm install @pixi/canvas-text +``` + +## Usage + +```js +import '@pixi/canvas-text'; +``` \ No newline at end of file diff --git a/packages/canvas/canvas-text/package.json b/packages/canvas/canvas-text/package.json new file mode 100644 index 0000000..7d3ba59 --- /dev/null +++ b/packages/canvas/canvas-text/package.json @@ -0,0 +1,28 @@ +{ + "name": "@pixi/canvas-text", + "version": "5.0.4", + "main": "lib/canvas-text.js", + "module": "lib/canvas-text.es.js", + "bundle": "dist/canvas-text.js", + "bundleNoExports": true, + "description": "Canvas mixin for the text package", + "author": "Dave Moore", + "homepage": "http://pixijs.com/", + "bugs": "https://github.com/pixijs/pixi.js/issues", + "license": "MIT", + "repository": { + "type": "git", + "url": "https://github.com/pixijs/pixi.js.git" + }, + "publishConfig": { + "access": "public" + }, + "files": [ + "lib", + "dist" + ], + "dependencies": { + "@pixi/sprite": "^5.0.4", + "@pixi/text": "^5.0.4" + } +} diff --git a/packages/canvas/canvas-text/src/Text.js b/packages/canvas/canvas-text/src/Text.js new file mode 100644 index 0000000..0e0f9f5 --- /dev/null +++ b/packages/canvas/canvas-text/src/Text.js @@ -0,0 +1,23 @@ +import { Text } from '@pixi/text'; +import { Sprite } from '@pixi/sprite'; + +/** + * Renders the object using the Canvas renderer + * + * @method _renderCanvas + * @memberof PIXI.Text# + * @private + * @param {PIXI.CanvasRenderer} renderer - The renderer + */ +Text.prototype._renderCanvas = function _renderCanvas(renderer) +{ + if (this._autoResolution && this._resolution !== renderer.resolution) + { + this._resolution = renderer.resolution; + this.dirty = true; + } + + this.updateText(true); + + Sprite.prototype._renderCanvas.call(this, renderer); +}; diff --git a/packages/canvas/canvas-text/src/index.js b/packages/canvas/canvas-text/src/index.js new file mode 100644 index 0000000..7bdb7ed --- /dev/null +++ b/packages/canvas/canvas-text/src/index.js @@ -0,0 +1 @@ +import './Text'; diff --git a/packages/core/src/batch/BatchBuffer.js b/packages/core/src/batch/BatchBuffer.js deleted file mode 100644 index b80bc7e..0000000 --- a/packages/core/src/batch/BatchBuffer.js +++ /dev/null @@ -1,41 +0,0 @@ -/** - * Used by the BatchRenderer - * - * @class - * @memberof PIXI - */ -export default class BatchBuffer -{ - /** - * @param {number} size - The size of the buffer in bytes. - */ - constructor(size) - { - this.vertices = new ArrayBuffer(size); - - /** - * View on the vertices as a Float32Array for positions - * - * @member {Float32Array} - */ - this.float32View = new Float32Array(this.vertices); - - /** - * View on the vertices as a Uint32Array for uvs - * - * @member {Float32Array} - */ - this.uint32View = new Uint32Array(this.vertices); - } - - /** - * Destroys the buffer. - * - */ - destroy() - { - this.vertices = null; - this.float32View = null; - this.uint32View = null; - } -} diff --git a/bundles/pixi.js-legacy/package.json b/bundles/pixi.js-legacy/package.json index 1565ef3..97abd4a 100644 --- a/bundles/pixi.js-legacy/package.json +++ b/bundles/pixi.js-legacy/package.json @@ -40,6 +40,7 @@ "@pixi/canvas-renderer": "^5.0.4", "@pixi/canvas-sprite": "^5.0.4", "@pixi/canvas-sprite-tiling": "^5.0.4", + "@pixi/canvas-text": "^5.0.4", "pixi.js": "^5.0.4" } } diff --git a/bundles/pixi.js-legacy/src/index.js b/bundles/pixi.js-legacy/src/index.js index 956019c..f1598a1 100644 --- a/bundles/pixi.js-legacy/src/index.js +++ b/bundles/pixi.js-legacy/src/index.js @@ -8,6 +8,7 @@ import '@pixi/canvas-sprite-tiling'; import '@pixi/canvas-particles'; import '@pixi/canvas-display'; +import '@pixi/canvas-text'; CanvasRenderer.registerPlugin('accessibility', accessibility.AccessibilityManager); CanvasRenderer.registerPlugin('extract', canvasExtract.CanvasExtract); diff --git a/packages/canvas/canvas-graphics/src/CanvasGraphicsRenderer.js b/packages/canvas/canvas-graphics/src/CanvasGraphicsRenderer.js index b7b7a7e..cabe8e2 100644 --- a/packages/canvas/canvas-graphics/src/CanvasGraphicsRenderer.js +++ b/packages/canvas/canvas-graphics/src/CanvasGraphicsRenderer.js @@ -55,7 +55,7 @@ if (graphics.canvasTintDirty !== graphics.dirty || graphics._prevTint !== graphics.tint) { - // this.updateGraphicsTint(graphics); + this.updateGraphicsTint(graphics); } renderer.setBlendMode(graphics.blendMode); @@ -69,8 +69,8 @@ const fillStyle = data.fillStyle; const lineStyle = data.lineStyle; - const fillColor = fillStyle.color;// data._fillTint; - const lineColor = lineStyle.color;// data._lineTint; + const fillColor = data._fillTint; + const lineColor = data._lineTint; context.lineWidth = lineStyle.width; @@ -298,13 +298,14 @@ const tintR = ((graphics.tint >> 16) & 0xFF) / 255; const tintG = ((graphics.tint >> 8) & 0xFF) / 255; const tintB = (graphics.tint & 0xFF) / 255; + const graphicsData = graphics.geometry.graphicsData; - for (let i = 0; i < graphics.graphicsData.length; ++i) + for (let i = 0; i < graphicsData.length; ++i) { - const data = graphics.graphicsData[i]; + const data = graphicsData[i]; - const fillColor = data.fillColor | 0; - const lineColor = data.lineColor | 0; + const fillColor = data.fillStyle.color | 0; + const lineColor = data.lineStyle.color | 0; // super inline, cos optimization :) data._fillTint = ( diff --git a/packages/canvas/canvas-mesh/src/NineSlicePlane.js b/packages/canvas/canvas-mesh/src/NineSlicePlane.js index d5ce07f..dccfd79 100644 --- a/packages/canvas/canvas-mesh/src/NineSlicePlane.js +++ b/packages/canvas/canvas-mesh/src/NineSlicePlane.js @@ -39,7 +39,7 @@ const transform = this.worldTransform; const res = renderer.resolution; const isTinted = this.tint !== 0xFFFFFF; - const texture = this._texture; + const texture = this.texture; // Work out tinting if (isTinted) diff --git a/packages/canvas/canvas-renderer/src/CanvasTinter.js b/packages/canvas/canvas-renderer/src/CanvasTinter.js index 6ea164b..7abf0f3 100644 --- a/packages/canvas/canvas-renderer/src/CanvasTinter.js +++ b/packages/canvas/canvas-renderer/src/CanvasTinter.js @@ -21,7 +21,7 @@ */ getTintedCanvas: (sprite, color) => { - const texture = sprite._texture; + const texture = sprite.texture; color = CanvasTinter.roundColor(color); diff --git a/packages/canvas/canvas-text/LICENSE b/packages/canvas/canvas-text/LICENSE new file mode 100644 index 0000000..148e3eb --- /dev/null +++ b/packages/canvas/canvas-text/LICENSE @@ -0,0 +1,21 @@ +The MIT License + +Copyright (c) 2013-2018 Mathew Groves, Chad Engler + +Permission is hereby granted, free of charge, to any person obtaining a copy +of this software and associated documentation files (the "Software"), to deal +in the Software without restriction, including without limitation the rights +to use, copy, modify, merge, publish, distribute, sublicense, and/or sell +copies of the Software, and to permit persons to whom the Software is +furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in +all copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, +FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE +AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER +LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, +OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN +THE SOFTWARE. \ No newline at end of file diff --git a/packages/canvas/canvas-text/README.md b/packages/canvas/canvas-text/README.md new file mode 100644 index 0000000..d6d3b4c --- /dev/null +++ b/packages/canvas/canvas-text/README.md @@ -0,0 +1,13 @@ +# @pixi/canvas-text + +## Installation + +```bash +npm install @pixi/canvas-text +``` + +## Usage + +```js +import '@pixi/canvas-text'; +``` \ No newline at end of file diff --git a/packages/canvas/canvas-text/package.json b/packages/canvas/canvas-text/package.json new file mode 100644 index 0000000..7d3ba59 --- /dev/null +++ b/packages/canvas/canvas-text/package.json @@ -0,0 +1,28 @@ +{ + "name": "@pixi/canvas-text", + "version": "5.0.4", + "main": "lib/canvas-text.js", + "module": "lib/canvas-text.es.js", + "bundle": "dist/canvas-text.js", + "bundleNoExports": true, + "description": "Canvas mixin for the text package", + "author": "Dave Moore", + "homepage": "http://pixijs.com/", + "bugs": "https://github.com/pixijs/pixi.js/issues", + "license": "MIT", + "repository": { + "type": "git", + "url": "https://github.com/pixijs/pixi.js.git" + }, + "publishConfig": { + "access": "public" + }, + "files": [ + "lib", + "dist" + ], + "dependencies": { + "@pixi/sprite": "^5.0.4", + "@pixi/text": "^5.0.4" + } +} diff --git a/packages/canvas/canvas-text/src/Text.js b/packages/canvas/canvas-text/src/Text.js new file mode 100644 index 0000000..0e0f9f5 --- /dev/null +++ b/packages/canvas/canvas-text/src/Text.js @@ -0,0 +1,23 @@ +import { Text } from '@pixi/text'; +import { Sprite } from '@pixi/sprite'; + +/** + * Renders the object using the Canvas renderer + * + * @method _renderCanvas + * @memberof PIXI.Text# + * @private + * @param {PIXI.CanvasRenderer} renderer - The renderer + */ +Text.prototype._renderCanvas = function _renderCanvas(renderer) +{ + if (this._autoResolution && this._resolution !== renderer.resolution) + { + this._resolution = renderer.resolution; + this.dirty = true; + } + + this.updateText(true); + + Sprite.prototype._renderCanvas.call(this, renderer); +}; diff --git a/packages/canvas/canvas-text/src/index.js b/packages/canvas/canvas-text/src/index.js new file mode 100644 index 0000000..7bdb7ed --- /dev/null +++ b/packages/canvas/canvas-text/src/index.js @@ -0,0 +1 @@ +import './Text'; diff --git a/packages/core/src/batch/BatchBuffer.js b/packages/core/src/batch/BatchBuffer.js deleted file mode 100644 index b80bc7e..0000000 --- a/packages/core/src/batch/BatchBuffer.js +++ /dev/null @@ -1,41 +0,0 @@ -/** - * Used by the BatchRenderer - * - * @class - * @memberof PIXI - */ -export default class BatchBuffer -{ - /** - * @param {number} size - The size of the buffer in bytes. - */ - constructor(size) - { - this.vertices = new ArrayBuffer(size); - - /** - * View on the vertices as a Float32Array for positions - * - * @member {Float32Array} - */ - this.float32View = new Float32Array(this.vertices); - - /** - * View on the vertices as a Uint32Array for uvs - * - * @member {Float32Array} - */ - this.uint32View = new Uint32Array(this.vertices); - } - - /** - * Destroys the buffer. - * - */ - destroy() - { - this.vertices = null; - this.float32View = null; - this.uint32View = null; - } -} diff --git a/packages/core/src/batch/BatchRenderer.js b/packages/core/src/batch/BatchRenderer.js index e15f6c5..d75a35d 100644 --- a/packages/core/src/batch/BatchRenderer.js +++ b/packages/core/src/batch/BatchRenderer.js @@ -1,11 +1,13 @@ import BatchDrawCall from './BatchDrawCall'; import BaseTexture from '../textures/BaseTexture'; -import State from '../state/State'; import ObjectRenderer from './ObjectRenderer'; +import State from '../state/State'; +import ViewableBuffer from '../geometry/ViewableBuffer'; + import checkMaxIfStatementsInShader from '../shader/utils/checkMaxIfStatementsInShader'; + import { settings } from '@pixi/settings'; import { premultiplyBlendMode, premultiplyTint, nextPow2, log2 } from '@pixi/utils'; -import BatchBuffer from './BatchBuffer'; import { ENV } from '@pixi/constants'; /** @@ -195,7 +197,7 @@ } /** - * Pool of `BatchBuffer` objects that are sorted in + * Pool of `ViewableBuffer` objects that are sorted in * order of increasing size. The flush method uses * the buffer with the least size above the amount * it requires. These are used for passing attributes. @@ -203,7 +205,7 @@ * The first buffer has a size of 8; each subsequent * buffer has double capacity of its previous. * - * @member {PIXI.BatchBuffer} + * @member {PIXI.ViewableBuffer} * @private * @see PIXI.BatchRenderer#getAttributeBuffer */ @@ -312,8 +314,7 @@ } /** - * Renders the content and empties the current batch. - * + * Renders the content _now_ and empties the current batch. */ flush() { @@ -322,52 +323,48 @@ return; } - const gl = this.renderer.gl; - const MAX_TEXTURES = this.MAX_TEXTURES; - const vertSize = this.vertexSize; - - const buffer = this.getAttributeBuffer(this._vertexCount); + const attributeBuffer = this.getAttributeBuffer(this._vertexCount); const indexBuffer = this.getIndexBuffer(this._indexCount); + const gl = this.renderer.gl; - const elements = this._bufferedElements; - const _drawCalls = this._drawCalls; - - const float32View = buffer.float32View; - const uint32View = buffer.uint32View; + const { + _bufferedElements: elements, + _drawCalls: drawCalls, + MAX_TEXTURES, + _packedGeometries: packedGeometries, + vertexSize, + } = this; const touch = this.renderer.textureGC.count; let index = 0; let _indexCount = 0; + let nextTexture; let currentTexture; + let textureCount = 0; + + let currentGroup = drawCalls[0]; let groupCount = 0; - let textureCount = 0; - let currentGroup = _drawCalls[0]; - - let blendMode = -1;// premultiplyBlendMode[elements[0]._texture.baseTexture.premultiplyAlpha ? 0 : ][elements[0].blendMode]; + let blendMode = -1;// blend-mode of previous element/sprite/object! currentGroup.textureCount = 0; currentGroup.start = 0; currentGroup.blend = blendMode; let TICK = ++BaseTexture._globalBatch; - let i; for (i = 0; i < this._bufferSize; ++i) { - // upload the sprite elements... - // they have all ready been calculated so we just need to push them into the buffer. - const sprite = elements[i]; elements[i] = null; - nextTexture = sprite._texture.baseTexture; - const spriteBlendMode = premultiplyBlendMode[nextTexture.premultiplyAlpha ? 1 : 0][sprite.blendMode]; + const spriteBlendMode = premultiplyBlendMode[ + nextTexture.premultiplyAlpha ? 1 : 0][sprite.blendMode]; if (blendMode !== spriteBlendMode) { @@ -393,7 +390,7 @@ currentGroup.size = _indexCount - currentGroup.start; - currentGroup = _drawCalls[groupCount++]; + currentGroup = drawCalls[groupCount++]; currentGroup.textureCount = 0; currentGroup.blend = blendMode; currentGroup.start = _indexCount; @@ -408,63 +405,49 @@ } } - this.packInterleavedGeometry(sprite, float32View, uint32View, indexBuffer, index, _indexCount);// argb, nextTexture._id, float32View, uint32View, indexBuffer, index, _indexCount); + this.packInterleavedGeometry(sprite, attributeBuffer, + indexBuffer, index, _indexCount); // push a graphics.. - index += (sprite.vertexData.length / 2) * vertSize; + index += (sprite.vertexData.length / 2) * vertexSize; _indexCount += sprite.indices.length; } BaseTexture._globalBatch = TICK; - currentGroup.size = _indexCount - currentGroup.start; if (!settings.CAN_UPLOAD_SAME_BUFFER) - { - // this is still needed for IOS performance.. - // it really does not like uploading to the same buffer in a single frame! + { /* Usually on iOS devices, where the browser doesn't + like uploads to the same buffer in a single frame. */ if (this._packedGeometryPoolSize <= this._flushId) { this._packedGeometryPoolSize++; - /* eslint-disable max-len */ - this._packedGeometries[this._flushId] = new (this.geometryClass)(); + packedGeometries[this._flushId] = new (this.geometryClass)(); } - this._packedGeometries[this._flushId]._buffer.update(buffer.vertices, 0); - this._packedGeometries[this._flushId]._indexBuffer.update(indexBuffer, 0); + packedGeometries[this._flushId]._buffer.update(attributeBuffer.rawBinaryData, 0); + packedGeometries[this._flushId]._indexBuffer.update(indexBuffer, 0); - // this.vertexBuffers[this._flushId].update(buffer.vertices, 0); - this.renderer.geometry.bind(this._packedGeometries[this._flushId]); - + this.renderer.geometry.bind(packedGeometries[this._flushId]); this.renderer.geometry.updateBuffers(); - this._flushId++; } else { // lets use the faster option, always use buffer number 0 - this._packedGeometries[this._flushId]._buffer.update(buffer.vertices, 0); - this._packedGeometries[this._flushId]._indexBuffer.update(indexBuffer, 0); - - // if (true)// this.spriteOnly) - // { - // this._packedGeometries[this._flushId].indexBuffer = this.defualtSpriteIndexBuffer; - // this._packedGeometries[this._flushId].buffers[1] = this.defualtSpriteIndexBuffer; - // } + packedGeometries[this._flushId]._buffer.update(attributeBuffer.rawBinaryData, 0); + packedGeometries[this._flushId]._indexBuffer.update(indexBuffer, 0); this.renderer.geometry.updateBuffers(); } - // this.renderer.state.set(this.state); - const textureSystem = this.renderer.texture; const stateSystem = this.renderer.state; - // e.log(groupCount); - // / render the _drawCalls.. + // Upload textures and do the draw calls for (i = 0; i < groupCount; i++) { - const group = _drawCalls[i]; + const group = drawCalls[i]; const groupTextureCount = group.textureCount; for (let j = 0; j < groupTextureCount; j++) @@ -473,13 +456,7 @@ group.textures[j] = null; } - // this.state.blendMode = group.blend; - // this.state.blend = true; - - // this.renderer.state.setState(this.state); - // set the blend mode.. stateSystem.setBlendMode(group.blend); - gl.drawElements(group.type, group.size, gl.UNSIGNED_SHORT, group.start * 2); } @@ -507,7 +484,6 @@ /** * Stops and flushes the current batch. - * */ stop() { @@ -548,7 +524,7 @@ * can hold atleast `size` floats. * * @param {number} size - minimum capacity required - * @return {BatchBuffer} - buffer than can hold atleast `size` floats + * @return {ViewableBuffer} - buffer than can hold atleast `size` floats * @private */ getAttributeBuffer(size) @@ -567,7 +543,7 @@ if (!buffer) { - this._aBuffers[roundedSize] = buffer = new BatchBuffer(roundedSize * this.vertexSize * 4); + this._aBuffers[roundedSize] = buffer = new ViewableBuffer(roundedSize * this.vertexSize * 4); } return buffer; @@ -613,16 +589,19 @@ * present. * * @param {PIXI.Sprite} element - element being rendered - * @param {Float32Array} float32View - float32-view of the attribute buffer - * @param {Uint32Array} uint32View - uint32-view of the attribute buffer + * @param {PIXI.ViewableBuffer} attributeBuffer - attribute buffer. * @param {Uint16Array} indexBuffer - index buffer * @param {number} aIndex - number of floats already in the attribute buffer * @param {number} iIndex - number of indices already in `indexBuffer` */ - packInterleavedGeometry(element, - float32View, uint32View, indexBuffer, aIndex, iIndex) + packInterleavedGeometry(element, attributeBuffer, indexBuffer, aIndex, iIndex) { - const p = aIndex / this.vertexSize; + const { + uint32View, + float32View, + } = attributeBuffer; + + const packedVertices = aIndex / this.vertexSize; const uvs = element.uvs; const indicies = element.indices; const vertexData = element.vertexData; @@ -647,7 +626,7 @@ for (let i = 0; i < indicies.length; i++) { - indexBuffer[iIndex++] = p + indicies[i]; + indexBuffer[iIndex++] = packedVertices + indicies[i]; } } } diff --git a/bundles/pixi.js-legacy/package.json b/bundles/pixi.js-legacy/package.json index 1565ef3..97abd4a 100644 --- a/bundles/pixi.js-legacy/package.json +++ b/bundles/pixi.js-legacy/package.json @@ -40,6 +40,7 @@ "@pixi/canvas-renderer": "^5.0.4", "@pixi/canvas-sprite": "^5.0.4", "@pixi/canvas-sprite-tiling": "^5.0.4", + "@pixi/canvas-text": "^5.0.4", "pixi.js": "^5.0.4" } } diff --git a/bundles/pixi.js-legacy/src/index.js b/bundles/pixi.js-legacy/src/index.js index 956019c..f1598a1 100644 --- a/bundles/pixi.js-legacy/src/index.js +++ b/bundles/pixi.js-legacy/src/index.js @@ -8,6 +8,7 @@ import '@pixi/canvas-sprite-tiling'; import '@pixi/canvas-particles'; import '@pixi/canvas-display'; +import '@pixi/canvas-text'; CanvasRenderer.registerPlugin('accessibility', accessibility.AccessibilityManager); CanvasRenderer.registerPlugin('extract', canvasExtract.CanvasExtract); diff --git a/packages/canvas/canvas-graphics/src/CanvasGraphicsRenderer.js b/packages/canvas/canvas-graphics/src/CanvasGraphicsRenderer.js index b7b7a7e..cabe8e2 100644 --- a/packages/canvas/canvas-graphics/src/CanvasGraphicsRenderer.js +++ b/packages/canvas/canvas-graphics/src/CanvasGraphicsRenderer.js @@ -55,7 +55,7 @@ if (graphics.canvasTintDirty !== graphics.dirty || graphics._prevTint !== graphics.tint) { - // this.updateGraphicsTint(graphics); + this.updateGraphicsTint(graphics); } renderer.setBlendMode(graphics.blendMode); @@ -69,8 +69,8 @@ const fillStyle = data.fillStyle; const lineStyle = data.lineStyle; - const fillColor = fillStyle.color;// data._fillTint; - const lineColor = lineStyle.color;// data._lineTint; + const fillColor = data._fillTint; + const lineColor = data._lineTint; context.lineWidth = lineStyle.width; @@ -298,13 +298,14 @@ const tintR = ((graphics.tint >> 16) & 0xFF) / 255; const tintG = ((graphics.tint >> 8) & 0xFF) / 255; const tintB = (graphics.tint & 0xFF) / 255; + const graphicsData = graphics.geometry.graphicsData; - for (let i = 0; i < graphics.graphicsData.length; ++i) + for (let i = 0; i < graphicsData.length; ++i) { - const data = graphics.graphicsData[i]; + const data = graphicsData[i]; - const fillColor = data.fillColor | 0; - const lineColor = data.lineColor | 0; + const fillColor = data.fillStyle.color | 0; + const lineColor = data.lineStyle.color | 0; // super inline, cos optimization :) data._fillTint = ( diff --git a/packages/canvas/canvas-mesh/src/NineSlicePlane.js b/packages/canvas/canvas-mesh/src/NineSlicePlane.js index d5ce07f..dccfd79 100644 --- a/packages/canvas/canvas-mesh/src/NineSlicePlane.js +++ b/packages/canvas/canvas-mesh/src/NineSlicePlane.js @@ -39,7 +39,7 @@ const transform = this.worldTransform; const res = renderer.resolution; const isTinted = this.tint !== 0xFFFFFF; - const texture = this._texture; + const texture = this.texture; // Work out tinting if (isTinted) diff --git a/packages/canvas/canvas-renderer/src/CanvasTinter.js b/packages/canvas/canvas-renderer/src/CanvasTinter.js index 6ea164b..7abf0f3 100644 --- a/packages/canvas/canvas-renderer/src/CanvasTinter.js +++ b/packages/canvas/canvas-renderer/src/CanvasTinter.js @@ -21,7 +21,7 @@ */ getTintedCanvas: (sprite, color) => { - const texture = sprite._texture; + const texture = sprite.texture; color = CanvasTinter.roundColor(color); diff --git a/packages/canvas/canvas-text/LICENSE b/packages/canvas/canvas-text/LICENSE new file mode 100644 index 0000000..148e3eb --- /dev/null +++ b/packages/canvas/canvas-text/LICENSE @@ -0,0 +1,21 @@ +The MIT License + +Copyright (c) 2013-2018 Mathew Groves, Chad Engler + +Permission is hereby granted, free of charge, to any person obtaining a copy +of this software and associated documentation files (the "Software"), to deal +in the Software without restriction, including without limitation the rights +to use, copy, modify, merge, publish, distribute, sublicense, and/or sell +copies of the Software, and to permit persons to whom the Software is +furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in +all copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, +FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE +AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER +LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, +OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN +THE SOFTWARE. \ No newline at end of file diff --git a/packages/canvas/canvas-text/README.md b/packages/canvas/canvas-text/README.md new file mode 100644 index 0000000..d6d3b4c --- /dev/null +++ b/packages/canvas/canvas-text/README.md @@ -0,0 +1,13 @@ +# @pixi/canvas-text + +## Installation + +```bash +npm install @pixi/canvas-text +``` + +## Usage + +```js +import '@pixi/canvas-text'; +``` \ No newline at end of file diff --git a/packages/canvas/canvas-text/package.json b/packages/canvas/canvas-text/package.json new file mode 100644 index 0000000..7d3ba59 --- /dev/null +++ b/packages/canvas/canvas-text/package.json @@ -0,0 +1,28 @@ +{ + "name": "@pixi/canvas-text", + "version": "5.0.4", + "main": "lib/canvas-text.js", + "module": "lib/canvas-text.es.js", + "bundle": "dist/canvas-text.js", + "bundleNoExports": true, + "description": "Canvas mixin for the text package", + "author": "Dave Moore", + "homepage": "http://pixijs.com/", + "bugs": "https://github.com/pixijs/pixi.js/issues", + "license": "MIT", + "repository": { + "type": "git", + "url": "https://github.com/pixijs/pixi.js.git" + }, + "publishConfig": { + "access": "public" + }, + "files": [ + "lib", + "dist" + ], + "dependencies": { + "@pixi/sprite": "^5.0.4", + "@pixi/text": "^5.0.4" + } +} diff --git a/packages/canvas/canvas-text/src/Text.js b/packages/canvas/canvas-text/src/Text.js new file mode 100644 index 0000000..0e0f9f5 --- /dev/null +++ b/packages/canvas/canvas-text/src/Text.js @@ -0,0 +1,23 @@ +import { Text } from '@pixi/text'; +import { Sprite } from '@pixi/sprite'; + +/** + * Renders the object using the Canvas renderer + * + * @method _renderCanvas + * @memberof PIXI.Text# + * @private + * @param {PIXI.CanvasRenderer} renderer - The renderer + */ +Text.prototype._renderCanvas = function _renderCanvas(renderer) +{ + if (this._autoResolution && this._resolution !== renderer.resolution) + { + this._resolution = renderer.resolution; + this.dirty = true; + } + + this.updateText(true); + + Sprite.prototype._renderCanvas.call(this, renderer); +}; diff --git a/packages/canvas/canvas-text/src/index.js b/packages/canvas/canvas-text/src/index.js new file mode 100644 index 0000000..7bdb7ed --- /dev/null +++ b/packages/canvas/canvas-text/src/index.js @@ -0,0 +1 @@ +import './Text'; diff --git a/packages/core/src/batch/BatchBuffer.js b/packages/core/src/batch/BatchBuffer.js deleted file mode 100644 index b80bc7e..0000000 --- a/packages/core/src/batch/BatchBuffer.js +++ /dev/null @@ -1,41 +0,0 @@ -/** - * Used by the BatchRenderer - * - * @class - * @memberof PIXI - */ -export default class BatchBuffer -{ - /** - * @param {number} size - The size of the buffer in bytes. - */ - constructor(size) - { - this.vertices = new ArrayBuffer(size); - - /** - * View on the vertices as a Float32Array for positions - * - * @member {Float32Array} - */ - this.float32View = new Float32Array(this.vertices); - - /** - * View on the vertices as a Uint32Array for uvs - * - * @member {Float32Array} - */ - this.uint32View = new Uint32Array(this.vertices); - } - - /** - * Destroys the buffer. - * - */ - destroy() - { - this.vertices = null; - this.float32View = null; - this.uint32View = null; - } -} diff --git a/packages/core/src/batch/BatchRenderer.js b/packages/core/src/batch/BatchRenderer.js index e15f6c5..d75a35d 100644 --- a/packages/core/src/batch/BatchRenderer.js +++ b/packages/core/src/batch/BatchRenderer.js @@ -1,11 +1,13 @@ import BatchDrawCall from './BatchDrawCall'; import BaseTexture from '../textures/BaseTexture'; -import State from '../state/State'; import ObjectRenderer from './ObjectRenderer'; +import State from '../state/State'; +import ViewableBuffer from '../geometry/ViewableBuffer'; + import checkMaxIfStatementsInShader from '../shader/utils/checkMaxIfStatementsInShader'; + import { settings } from '@pixi/settings'; import { premultiplyBlendMode, premultiplyTint, nextPow2, log2 } from '@pixi/utils'; -import BatchBuffer from './BatchBuffer'; import { ENV } from '@pixi/constants'; /** @@ -195,7 +197,7 @@ } /** - * Pool of `BatchBuffer` objects that are sorted in + * Pool of `ViewableBuffer` objects that are sorted in * order of increasing size. The flush method uses * the buffer with the least size above the amount * it requires. These are used for passing attributes. @@ -203,7 +205,7 @@ * The first buffer has a size of 8; each subsequent * buffer has double capacity of its previous. * - * @member {PIXI.BatchBuffer} + * @member {PIXI.ViewableBuffer} * @private * @see PIXI.BatchRenderer#getAttributeBuffer */ @@ -312,8 +314,7 @@ } /** - * Renders the content and empties the current batch. - * + * Renders the content _now_ and empties the current batch. */ flush() { @@ -322,52 +323,48 @@ return; } - const gl = this.renderer.gl; - const MAX_TEXTURES = this.MAX_TEXTURES; - const vertSize = this.vertexSize; - - const buffer = this.getAttributeBuffer(this._vertexCount); + const attributeBuffer = this.getAttributeBuffer(this._vertexCount); const indexBuffer = this.getIndexBuffer(this._indexCount); + const gl = this.renderer.gl; - const elements = this._bufferedElements; - const _drawCalls = this._drawCalls; - - const float32View = buffer.float32View; - const uint32View = buffer.uint32View; + const { + _bufferedElements: elements, + _drawCalls: drawCalls, + MAX_TEXTURES, + _packedGeometries: packedGeometries, + vertexSize, + } = this; const touch = this.renderer.textureGC.count; let index = 0; let _indexCount = 0; + let nextTexture; let currentTexture; + let textureCount = 0; + + let currentGroup = drawCalls[0]; let groupCount = 0; - let textureCount = 0; - let currentGroup = _drawCalls[0]; - - let blendMode = -1;// premultiplyBlendMode[elements[0]._texture.baseTexture.premultiplyAlpha ? 0 : ][elements[0].blendMode]; + let blendMode = -1;// blend-mode of previous element/sprite/object! currentGroup.textureCount = 0; currentGroup.start = 0; currentGroup.blend = blendMode; let TICK = ++BaseTexture._globalBatch; - let i; for (i = 0; i < this._bufferSize; ++i) { - // upload the sprite elements... - // they have all ready been calculated so we just need to push them into the buffer. - const sprite = elements[i]; elements[i] = null; - nextTexture = sprite._texture.baseTexture; - const spriteBlendMode = premultiplyBlendMode[nextTexture.premultiplyAlpha ? 1 : 0][sprite.blendMode]; + const spriteBlendMode = premultiplyBlendMode[ + nextTexture.premultiplyAlpha ? 1 : 0][sprite.blendMode]; if (blendMode !== spriteBlendMode) { @@ -393,7 +390,7 @@ currentGroup.size = _indexCount - currentGroup.start; - currentGroup = _drawCalls[groupCount++]; + currentGroup = drawCalls[groupCount++]; currentGroup.textureCount = 0; currentGroup.blend = blendMode; currentGroup.start = _indexCount; @@ -408,63 +405,49 @@ } } - this.packInterleavedGeometry(sprite, float32View, uint32View, indexBuffer, index, _indexCount);// argb, nextTexture._id, float32View, uint32View, indexBuffer, index, _indexCount); + this.packInterleavedGeometry(sprite, attributeBuffer, + indexBuffer, index, _indexCount); // push a graphics.. - index += (sprite.vertexData.length / 2) * vertSize; + index += (sprite.vertexData.length / 2) * vertexSize; _indexCount += sprite.indices.length; } BaseTexture._globalBatch = TICK; - currentGroup.size = _indexCount - currentGroup.start; if (!settings.CAN_UPLOAD_SAME_BUFFER) - { - // this is still needed for IOS performance.. - // it really does not like uploading to the same buffer in a single frame! + { /* Usually on iOS devices, where the browser doesn't + like uploads to the same buffer in a single frame. */ if (this._packedGeometryPoolSize <= this._flushId) { this._packedGeometryPoolSize++; - /* eslint-disable max-len */ - this._packedGeometries[this._flushId] = new (this.geometryClass)(); + packedGeometries[this._flushId] = new (this.geometryClass)(); } - this._packedGeometries[this._flushId]._buffer.update(buffer.vertices, 0); - this._packedGeometries[this._flushId]._indexBuffer.update(indexBuffer, 0); + packedGeometries[this._flushId]._buffer.update(attributeBuffer.rawBinaryData, 0); + packedGeometries[this._flushId]._indexBuffer.update(indexBuffer, 0); - // this.vertexBuffers[this._flushId].update(buffer.vertices, 0); - this.renderer.geometry.bind(this._packedGeometries[this._flushId]); - + this.renderer.geometry.bind(packedGeometries[this._flushId]); this.renderer.geometry.updateBuffers(); - this._flushId++; } else { // lets use the faster option, always use buffer number 0 - this._packedGeometries[this._flushId]._buffer.update(buffer.vertices, 0); - this._packedGeometries[this._flushId]._indexBuffer.update(indexBuffer, 0); - - // if (true)// this.spriteOnly) - // { - // this._packedGeometries[this._flushId].indexBuffer = this.defualtSpriteIndexBuffer; - // this._packedGeometries[this._flushId].buffers[1] = this.defualtSpriteIndexBuffer; - // } + packedGeometries[this._flushId]._buffer.update(attributeBuffer.rawBinaryData, 0); + packedGeometries[this._flushId]._indexBuffer.update(indexBuffer, 0); this.renderer.geometry.updateBuffers(); } - // this.renderer.state.set(this.state); - const textureSystem = this.renderer.texture; const stateSystem = this.renderer.state; - // e.log(groupCount); - // / render the _drawCalls.. + // Upload textures and do the draw calls for (i = 0; i < groupCount; i++) { - const group = _drawCalls[i]; + const group = drawCalls[i]; const groupTextureCount = group.textureCount; for (let j = 0; j < groupTextureCount; j++) @@ -473,13 +456,7 @@ group.textures[j] = null; } - // this.state.blendMode = group.blend; - // this.state.blend = true; - - // this.renderer.state.setState(this.state); - // set the blend mode.. stateSystem.setBlendMode(group.blend); - gl.drawElements(group.type, group.size, gl.UNSIGNED_SHORT, group.start * 2); } @@ -507,7 +484,6 @@ /** * Stops and flushes the current batch. - * */ stop() { @@ -548,7 +524,7 @@ * can hold atleast `size` floats. * * @param {number} size - minimum capacity required - * @return {BatchBuffer} - buffer than can hold atleast `size` floats + * @return {ViewableBuffer} - buffer than can hold atleast `size` floats * @private */ getAttributeBuffer(size) @@ -567,7 +543,7 @@ if (!buffer) { - this._aBuffers[roundedSize] = buffer = new BatchBuffer(roundedSize * this.vertexSize * 4); + this._aBuffers[roundedSize] = buffer = new ViewableBuffer(roundedSize * this.vertexSize * 4); } return buffer; @@ -613,16 +589,19 @@ * present. * * @param {PIXI.Sprite} element - element being rendered - * @param {Float32Array} float32View - float32-view of the attribute buffer - * @param {Uint32Array} uint32View - uint32-view of the attribute buffer + * @param {PIXI.ViewableBuffer} attributeBuffer - attribute buffer. * @param {Uint16Array} indexBuffer - index buffer * @param {number} aIndex - number of floats already in the attribute buffer * @param {number} iIndex - number of indices already in `indexBuffer` */ - packInterleavedGeometry(element, - float32View, uint32View, indexBuffer, aIndex, iIndex) + packInterleavedGeometry(element, attributeBuffer, indexBuffer, aIndex, iIndex) { - const p = aIndex / this.vertexSize; + const { + uint32View, + float32View, + } = attributeBuffer; + + const packedVertices = aIndex / this.vertexSize; const uvs = element.uvs; const indicies = element.indices; const vertexData = element.vertexData; @@ -647,7 +626,7 @@ for (let i = 0; i < indicies.length; i++) { - indexBuffer[iIndex++] = p + indicies[i]; + indexBuffer[iIndex++] = packedVertices + indicies[i]; } } } diff --git a/packages/core/src/batch/ObjectRenderer.js b/packages/core/src/batch/ObjectRenderer.js index 0c851a9..1776347 100644 --- a/packages/core/src/batch/ObjectRenderer.js +++ b/packages/core/src/batch/ObjectRenderer.js @@ -1,35 +1,29 @@ -import System from '../System'; - /** - * Base for a common object renderer that can be used as a system renderer plugin. + * Base for a common object renderer that can be used as a + * system renderer plugin. * * @class * @extends PIXI.System * @memberof PIXI */ -export default class ObjectRenderer extends System +export default class ObjectRenderer { /** - * Starts the renderer and sets the shader - * + * @param {PIXI.Renderer} renderer - The renderer this manager works for. */ - start() + constructor(renderer) { - // set the shader.. + /** + * The renderer this manager works for. + * + * @member {PIXI.Renderer} + */ + this.renderer = renderer; } /** - * Stops the renderer - * - */ - stop() - { - this.flush(); - } - - /** - * Stub method for rendering content and emptying the current batch. - * + * Stub method that should be used to empty the current + * batch by rendering objects now. */ flush() { @@ -37,7 +31,37 @@ } /** - * Renders an object + * Generic destruction method that frees all resources. This + * should be called by subclasses. + */ + destroy() + { + this.renderer = null; + } + + /** + * Stub method that initializes any state required before + * rendering starts. It is different from the `prerender` + * signal, which occurs every frame, in that it is called + * whenever an object requests _this_ renderer specifically. + */ + start() + { + // set the shader.. + } + + /** + * Stops the renderer. It should free up any state and + * become dormant. + */ + stop() + { + this.flush(); + } + + /** + * Keeps the object to render. It doesn't have to be + * rendered immediately. * * @param {PIXI.DisplayObject} object - The object to render. */ diff --git a/bundles/pixi.js-legacy/package.json b/bundles/pixi.js-legacy/package.json index 1565ef3..97abd4a 100644 --- a/bundles/pixi.js-legacy/package.json +++ b/bundles/pixi.js-legacy/package.json @@ -40,6 +40,7 @@ "@pixi/canvas-renderer": "^5.0.4", "@pixi/canvas-sprite": "^5.0.4", "@pixi/canvas-sprite-tiling": "^5.0.4", + "@pixi/canvas-text": "^5.0.4", "pixi.js": "^5.0.4" } } diff --git a/bundles/pixi.js-legacy/src/index.js b/bundles/pixi.js-legacy/src/index.js index 956019c..f1598a1 100644 --- a/bundles/pixi.js-legacy/src/index.js +++ b/bundles/pixi.js-legacy/src/index.js @@ -8,6 +8,7 @@ import '@pixi/canvas-sprite-tiling'; import '@pixi/canvas-particles'; import '@pixi/canvas-display'; +import '@pixi/canvas-text'; CanvasRenderer.registerPlugin('accessibility', accessibility.AccessibilityManager); CanvasRenderer.registerPlugin('extract', canvasExtract.CanvasExtract); diff --git a/packages/canvas/canvas-graphics/src/CanvasGraphicsRenderer.js b/packages/canvas/canvas-graphics/src/CanvasGraphicsRenderer.js index b7b7a7e..cabe8e2 100644 --- a/packages/canvas/canvas-graphics/src/CanvasGraphicsRenderer.js +++ b/packages/canvas/canvas-graphics/src/CanvasGraphicsRenderer.js @@ -55,7 +55,7 @@ if (graphics.canvasTintDirty !== graphics.dirty || graphics._prevTint !== graphics.tint) { - // this.updateGraphicsTint(graphics); + this.updateGraphicsTint(graphics); } renderer.setBlendMode(graphics.blendMode); @@ -69,8 +69,8 @@ const fillStyle = data.fillStyle; const lineStyle = data.lineStyle; - const fillColor = fillStyle.color;// data._fillTint; - const lineColor = lineStyle.color;// data._lineTint; + const fillColor = data._fillTint; + const lineColor = data._lineTint; context.lineWidth = lineStyle.width; @@ -298,13 +298,14 @@ const tintR = ((graphics.tint >> 16) & 0xFF) / 255; const tintG = ((graphics.tint >> 8) & 0xFF) / 255; const tintB = (graphics.tint & 0xFF) / 255; + const graphicsData = graphics.geometry.graphicsData; - for (let i = 0; i < graphics.graphicsData.length; ++i) + for (let i = 0; i < graphicsData.length; ++i) { - const data = graphics.graphicsData[i]; + const data = graphicsData[i]; - const fillColor = data.fillColor | 0; - const lineColor = data.lineColor | 0; + const fillColor = data.fillStyle.color | 0; + const lineColor = data.lineStyle.color | 0; // super inline, cos optimization :) data._fillTint = ( diff --git a/packages/canvas/canvas-mesh/src/NineSlicePlane.js b/packages/canvas/canvas-mesh/src/NineSlicePlane.js index d5ce07f..dccfd79 100644 --- a/packages/canvas/canvas-mesh/src/NineSlicePlane.js +++ b/packages/canvas/canvas-mesh/src/NineSlicePlane.js @@ -39,7 +39,7 @@ const transform = this.worldTransform; const res = renderer.resolution; const isTinted = this.tint !== 0xFFFFFF; - const texture = this._texture; + const texture = this.texture; // Work out tinting if (isTinted) diff --git a/packages/canvas/canvas-renderer/src/CanvasTinter.js b/packages/canvas/canvas-renderer/src/CanvasTinter.js index 6ea164b..7abf0f3 100644 --- a/packages/canvas/canvas-renderer/src/CanvasTinter.js +++ b/packages/canvas/canvas-renderer/src/CanvasTinter.js @@ -21,7 +21,7 @@ */ getTintedCanvas: (sprite, color) => { - const texture = sprite._texture; + const texture = sprite.texture; color = CanvasTinter.roundColor(color); diff --git a/packages/canvas/canvas-text/LICENSE b/packages/canvas/canvas-text/LICENSE new file mode 100644 index 0000000..148e3eb --- /dev/null +++ b/packages/canvas/canvas-text/LICENSE @@ -0,0 +1,21 @@ +The MIT License + +Copyright (c) 2013-2018 Mathew Groves, Chad Engler + +Permission is hereby granted, free of charge, to any person obtaining a copy +of this software and associated documentation files (the "Software"), to deal +in the Software without restriction, including without limitation the rights +to use, copy, modify, merge, publish, distribute, sublicense, and/or sell +copies of the Software, and to permit persons to whom the Software is +furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in +all copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, +FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE +AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER +LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, +OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN +THE SOFTWARE. \ No newline at end of file diff --git a/packages/canvas/canvas-text/README.md b/packages/canvas/canvas-text/README.md new file mode 100644 index 0000000..d6d3b4c --- /dev/null +++ b/packages/canvas/canvas-text/README.md @@ -0,0 +1,13 @@ +# @pixi/canvas-text + +## Installation + +```bash +npm install @pixi/canvas-text +``` + +## Usage + +```js +import '@pixi/canvas-text'; +``` \ No newline at end of file diff --git a/packages/canvas/canvas-text/package.json b/packages/canvas/canvas-text/package.json new file mode 100644 index 0000000..7d3ba59 --- /dev/null +++ b/packages/canvas/canvas-text/package.json @@ -0,0 +1,28 @@ +{ + "name": "@pixi/canvas-text", + "version": "5.0.4", + "main": "lib/canvas-text.js", + "module": "lib/canvas-text.es.js", + "bundle": "dist/canvas-text.js", + "bundleNoExports": true, + "description": "Canvas mixin for the text package", + "author": "Dave Moore", + "homepage": "http://pixijs.com/", + "bugs": "https://github.com/pixijs/pixi.js/issues", + "license": "MIT", + "repository": { + "type": "git", + "url": "https://github.com/pixijs/pixi.js.git" + }, + "publishConfig": { + "access": "public" + }, + "files": [ + "lib", + "dist" + ], + "dependencies": { + "@pixi/sprite": "^5.0.4", + "@pixi/text": "^5.0.4" + } +} diff --git a/packages/canvas/canvas-text/src/Text.js b/packages/canvas/canvas-text/src/Text.js new file mode 100644 index 0000000..0e0f9f5 --- /dev/null +++ b/packages/canvas/canvas-text/src/Text.js @@ -0,0 +1,23 @@ +import { Text } from '@pixi/text'; +import { Sprite } from '@pixi/sprite'; + +/** + * Renders the object using the Canvas renderer + * + * @method _renderCanvas + * @memberof PIXI.Text# + * @private + * @param {PIXI.CanvasRenderer} renderer - The renderer + */ +Text.prototype._renderCanvas = function _renderCanvas(renderer) +{ + if (this._autoResolution && this._resolution !== renderer.resolution) + { + this._resolution = renderer.resolution; + this.dirty = true; + } + + this.updateText(true); + + Sprite.prototype._renderCanvas.call(this, renderer); +}; diff --git a/packages/canvas/canvas-text/src/index.js b/packages/canvas/canvas-text/src/index.js new file mode 100644 index 0000000..7bdb7ed --- /dev/null +++ b/packages/canvas/canvas-text/src/index.js @@ -0,0 +1 @@ +import './Text'; diff --git a/packages/core/src/batch/BatchBuffer.js b/packages/core/src/batch/BatchBuffer.js deleted file mode 100644 index b80bc7e..0000000 --- a/packages/core/src/batch/BatchBuffer.js +++ /dev/null @@ -1,41 +0,0 @@ -/** - * Used by the BatchRenderer - * - * @class - * @memberof PIXI - */ -export default class BatchBuffer -{ - /** - * @param {number} size - The size of the buffer in bytes. - */ - constructor(size) - { - this.vertices = new ArrayBuffer(size); - - /** - * View on the vertices as a Float32Array for positions - * - * @member {Float32Array} - */ - this.float32View = new Float32Array(this.vertices); - - /** - * View on the vertices as a Uint32Array for uvs - * - * @member {Float32Array} - */ - this.uint32View = new Uint32Array(this.vertices); - } - - /** - * Destroys the buffer. - * - */ - destroy() - { - this.vertices = null; - this.float32View = null; - this.uint32View = null; - } -} diff --git a/packages/core/src/batch/BatchRenderer.js b/packages/core/src/batch/BatchRenderer.js index e15f6c5..d75a35d 100644 --- a/packages/core/src/batch/BatchRenderer.js +++ b/packages/core/src/batch/BatchRenderer.js @@ -1,11 +1,13 @@ import BatchDrawCall from './BatchDrawCall'; import BaseTexture from '../textures/BaseTexture'; -import State from '../state/State'; import ObjectRenderer from './ObjectRenderer'; +import State from '../state/State'; +import ViewableBuffer from '../geometry/ViewableBuffer'; + import checkMaxIfStatementsInShader from '../shader/utils/checkMaxIfStatementsInShader'; + import { settings } from '@pixi/settings'; import { premultiplyBlendMode, premultiplyTint, nextPow2, log2 } from '@pixi/utils'; -import BatchBuffer from './BatchBuffer'; import { ENV } from '@pixi/constants'; /** @@ -195,7 +197,7 @@ } /** - * Pool of `BatchBuffer` objects that are sorted in + * Pool of `ViewableBuffer` objects that are sorted in * order of increasing size. The flush method uses * the buffer with the least size above the amount * it requires. These are used for passing attributes. @@ -203,7 +205,7 @@ * The first buffer has a size of 8; each subsequent * buffer has double capacity of its previous. * - * @member {PIXI.BatchBuffer} + * @member {PIXI.ViewableBuffer} * @private * @see PIXI.BatchRenderer#getAttributeBuffer */ @@ -312,8 +314,7 @@ } /** - * Renders the content and empties the current batch. - * + * Renders the content _now_ and empties the current batch. */ flush() { @@ -322,52 +323,48 @@ return; } - const gl = this.renderer.gl; - const MAX_TEXTURES = this.MAX_TEXTURES; - const vertSize = this.vertexSize; - - const buffer = this.getAttributeBuffer(this._vertexCount); + const attributeBuffer = this.getAttributeBuffer(this._vertexCount); const indexBuffer = this.getIndexBuffer(this._indexCount); + const gl = this.renderer.gl; - const elements = this._bufferedElements; - const _drawCalls = this._drawCalls; - - const float32View = buffer.float32View; - const uint32View = buffer.uint32View; + const { + _bufferedElements: elements, + _drawCalls: drawCalls, + MAX_TEXTURES, + _packedGeometries: packedGeometries, + vertexSize, + } = this; const touch = this.renderer.textureGC.count; let index = 0; let _indexCount = 0; + let nextTexture; let currentTexture; + let textureCount = 0; + + let currentGroup = drawCalls[0]; let groupCount = 0; - let textureCount = 0; - let currentGroup = _drawCalls[0]; - - let blendMode = -1;// premultiplyBlendMode[elements[0]._texture.baseTexture.premultiplyAlpha ? 0 : ][elements[0].blendMode]; + let blendMode = -1;// blend-mode of previous element/sprite/object! currentGroup.textureCount = 0; currentGroup.start = 0; currentGroup.blend = blendMode; let TICK = ++BaseTexture._globalBatch; - let i; for (i = 0; i < this._bufferSize; ++i) { - // upload the sprite elements... - // they have all ready been calculated so we just need to push them into the buffer. - const sprite = elements[i]; elements[i] = null; - nextTexture = sprite._texture.baseTexture; - const spriteBlendMode = premultiplyBlendMode[nextTexture.premultiplyAlpha ? 1 : 0][sprite.blendMode]; + const spriteBlendMode = premultiplyBlendMode[ + nextTexture.premultiplyAlpha ? 1 : 0][sprite.blendMode]; if (blendMode !== spriteBlendMode) { @@ -393,7 +390,7 @@ currentGroup.size = _indexCount - currentGroup.start; - currentGroup = _drawCalls[groupCount++]; + currentGroup = drawCalls[groupCount++]; currentGroup.textureCount = 0; currentGroup.blend = blendMode; currentGroup.start = _indexCount; @@ -408,63 +405,49 @@ } } - this.packInterleavedGeometry(sprite, float32View, uint32View, indexBuffer, index, _indexCount);// argb, nextTexture._id, float32View, uint32View, indexBuffer, index, _indexCount); + this.packInterleavedGeometry(sprite, attributeBuffer, + indexBuffer, index, _indexCount); // push a graphics.. - index += (sprite.vertexData.length / 2) * vertSize; + index += (sprite.vertexData.length / 2) * vertexSize; _indexCount += sprite.indices.length; } BaseTexture._globalBatch = TICK; - currentGroup.size = _indexCount - currentGroup.start; if (!settings.CAN_UPLOAD_SAME_BUFFER) - { - // this is still needed for IOS performance.. - // it really does not like uploading to the same buffer in a single frame! + { /* Usually on iOS devices, where the browser doesn't + like uploads to the same buffer in a single frame. */ if (this._packedGeometryPoolSize <= this._flushId) { this._packedGeometryPoolSize++; - /* eslint-disable max-len */ - this._packedGeometries[this._flushId] = new (this.geometryClass)(); + packedGeometries[this._flushId] = new (this.geometryClass)(); } - this._packedGeometries[this._flushId]._buffer.update(buffer.vertices, 0); - this._packedGeometries[this._flushId]._indexBuffer.update(indexBuffer, 0); + packedGeometries[this._flushId]._buffer.update(attributeBuffer.rawBinaryData, 0); + packedGeometries[this._flushId]._indexBuffer.update(indexBuffer, 0); - // this.vertexBuffers[this._flushId].update(buffer.vertices, 0); - this.renderer.geometry.bind(this._packedGeometries[this._flushId]); - + this.renderer.geometry.bind(packedGeometries[this._flushId]); this.renderer.geometry.updateBuffers(); - this._flushId++; } else { // lets use the faster option, always use buffer number 0 - this._packedGeometries[this._flushId]._buffer.update(buffer.vertices, 0); - this._packedGeometries[this._flushId]._indexBuffer.update(indexBuffer, 0); - - // if (true)// this.spriteOnly) - // { - // this._packedGeometries[this._flushId].indexBuffer = this.defualtSpriteIndexBuffer; - // this._packedGeometries[this._flushId].buffers[1] = this.defualtSpriteIndexBuffer; - // } + packedGeometries[this._flushId]._buffer.update(attributeBuffer.rawBinaryData, 0); + packedGeometries[this._flushId]._indexBuffer.update(indexBuffer, 0); this.renderer.geometry.updateBuffers(); } - // this.renderer.state.set(this.state); - const textureSystem = this.renderer.texture; const stateSystem = this.renderer.state; - // e.log(groupCount); - // / render the _drawCalls.. + // Upload textures and do the draw calls for (i = 0; i < groupCount; i++) { - const group = _drawCalls[i]; + const group = drawCalls[i]; const groupTextureCount = group.textureCount; for (let j = 0; j < groupTextureCount; j++) @@ -473,13 +456,7 @@ group.textures[j] = null; } - // this.state.blendMode = group.blend; - // this.state.blend = true; - - // this.renderer.state.setState(this.state); - // set the blend mode.. stateSystem.setBlendMode(group.blend); - gl.drawElements(group.type, group.size, gl.UNSIGNED_SHORT, group.start * 2); } @@ -507,7 +484,6 @@ /** * Stops and flushes the current batch. - * */ stop() { @@ -548,7 +524,7 @@ * can hold atleast `size` floats. * * @param {number} size - minimum capacity required - * @return {BatchBuffer} - buffer than can hold atleast `size` floats + * @return {ViewableBuffer} - buffer than can hold atleast `size` floats * @private */ getAttributeBuffer(size) @@ -567,7 +543,7 @@ if (!buffer) { - this._aBuffers[roundedSize] = buffer = new BatchBuffer(roundedSize * this.vertexSize * 4); + this._aBuffers[roundedSize] = buffer = new ViewableBuffer(roundedSize * this.vertexSize * 4); } return buffer; @@ -613,16 +589,19 @@ * present. * * @param {PIXI.Sprite} element - element being rendered - * @param {Float32Array} float32View - float32-view of the attribute buffer - * @param {Uint32Array} uint32View - uint32-view of the attribute buffer + * @param {PIXI.ViewableBuffer} attributeBuffer - attribute buffer. * @param {Uint16Array} indexBuffer - index buffer * @param {number} aIndex - number of floats already in the attribute buffer * @param {number} iIndex - number of indices already in `indexBuffer` */ - packInterleavedGeometry(element, - float32View, uint32View, indexBuffer, aIndex, iIndex) + packInterleavedGeometry(element, attributeBuffer, indexBuffer, aIndex, iIndex) { - const p = aIndex / this.vertexSize; + const { + uint32View, + float32View, + } = attributeBuffer; + + const packedVertices = aIndex / this.vertexSize; const uvs = element.uvs; const indicies = element.indices; const vertexData = element.vertexData; @@ -647,7 +626,7 @@ for (let i = 0; i < indicies.length; i++) { - indexBuffer[iIndex++] = p + indicies[i]; + indexBuffer[iIndex++] = packedVertices + indicies[i]; } } } diff --git a/packages/core/src/batch/ObjectRenderer.js b/packages/core/src/batch/ObjectRenderer.js index 0c851a9..1776347 100644 --- a/packages/core/src/batch/ObjectRenderer.js +++ b/packages/core/src/batch/ObjectRenderer.js @@ -1,35 +1,29 @@ -import System from '../System'; - /** - * Base for a common object renderer that can be used as a system renderer plugin. + * Base for a common object renderer that can be used as a + * system renderer plugin. * * @class * @extends PIXI.System * @memberof PIXI */ -export default class ObjectRenderer extends System +export default class ObjectRenderer { /** - * Starts the renderer and sets the shader - * + * @param {PIXI.Renderer} renderer - The renderer this manager works for. */ - start() + constructor(renderer) { - // set the shader.. + /** + * The renderer this manager works for. + * + * @member {PIXI.Renderer} + */ + this.renderer = renderer; } /** - * Stops the renderer - * - */ - stop() - { - this.flush(); - } - - /** - * Stub method for rendering content and emptying the current batch. - * + * Stub method that should be used to empty the current + * batch by rendering objects now. */ flush() { @@ -37,7 +31,37 @@ } /** - * Renders an object + * Generic destruction method that frees all resources. This + * should be called by subclasses. + */ + destroy() + { + this.renderer = null; + } + + /** + * Stub method that initializes any state required before + * rendering starts. It is different from the `prerender` + * signal, which occurs every frame, in that it is called + * whenever an object requests _this_ renderer specifically. + */ + start() + { + // set the shader.. + } + + /** + * Stops the renderer. It should free up any state and + * become dormant. + */ + stop() + { + this.flush(); + } + + /** + * Keeps the object to render. It doesn't have to be + * rendered immediately. * * @param {PIXI.DisplayObject} object - The object to render. */ diff --git a/packages/core/src/context/ContextSystem.js b/packages/core/src/context/ContextSystem.js index 1b90abb..77a03ad 100644 --- a/packages/core/src/context/ContextSystem.js +++ b/packages/core/src/context/ContextSystem.js @@ -65,6 +65,8 @@ contextChange(gl) { this.gl = gl; + this.renderer.gl = gl; + this.renderer.CONTEXT_UID = CONTEXT_UID++; // restore a context if it was previously lost if (gl.isContextLost() && gl.getExtension('WEBGL_lose_context')) diff --git a/bundles/pixi.js-legacy/package.json b/bundles/pixi.js-legacy/package.json index 1565ef3..97abd4a 100644 --- a/bundles/pixi.js-legacy/package.json +++ b/bundles/pixi.js-legacy/package.json @@ -40,6 +40,7 @@ "@pixi/canvas-renderer": "^5.0.4", "@pixi/canvas-sprite": "^5.0.4", "@pixi/canvas-sprite-tiling": "^5.0.4", + "@pixi/canvas-text": "^5.0.4", "pixi.js": "^5.0.4" } } diff --git a/bundles/pixi.js-legacy/src/index.js b/bundles/pixi.js-legacy/src/index.js index 956019c..f1598a1 100644 --- a/bundles/pixi.js-legacy/src/index.js +++ b/bundles/pixi.js-legacy/src/index.js @@ -8,6 +8,7 @@ import '@pixi/canvas-sprite-tiling'; import '@pixi/canvas-particles'; import '@pixi/canvas-display'; +import '@pixi/canvas-text'; CanvasRenderer.registerPlugin('accessibility', accessibility.AccessibilityManager); CanvasRenderer.registerPlugin('extract', canvasExtract.CanvasExtract); diff --git a/packages/canvas/canvas-graphics/src/CanvasGraphicsRenderer.js b/packages/canvas/canvas-graphics/src/CanvasGraphicsRenderer.js index b7b7a7e..cabe8e2 100644 --- a/packages/canvas/canvas-graphics/src/CanvasGraphicsRenderer.js +++ b/packages/canvas/canvas-graphics/src/CanvasGraphicsRenderer.js @@ -55,7 +55,7 @@ if (graphics.canvasTintDirty !== graphics.dirty || graphics._prevTint !== graphics.tint) { - // this.updateGraphicsTint(graphics); + this.updateGraphicsTint(graphics); } renderer.setBlendMode(graphics.blendMode); @@ -69,8 +69,8 @@ const fillStyle = data.fillStyle; const lineStyle = data.lineStyle; - const fillColor = fillStyle.color;// data._fillTint; - const lineColor = lineStyle.color;// data._lineTint; + const fillColor = data._fillTint; + const lineColor = data._lineTint; context.lineWidth = lineStyle.width; @@ -298,13 +298,14 @@ const tintR = ((graphics.tint >> 16) & 0xFF) / 255; const tintG = ((graphics.tint >> 8) & 0xFF) / 255; const tintB = (graphics.tint & 0xFF) / 255; + const graphicsData = graphics.geometry.graphicsData; - for (let i = 0; i < graphics.graphicsData.length; ++i) + for (let i = 0; i < graphicsData.length; ++i) { - const data = graphics.graphicsData[i]; + const data = graphicsData[i]; - const fillColor = data.fillColor | 0; - const lineColor = data.lineColor | 0; + const fillColor = data.fillStyle.color | 0; + const lineColor = data.lineStyle.color | 0; // super inline, cos optimization :) data._fillTint = ( diff --git a/packages/canvas/canvas-mesh/src/NineSlicePlane.js b/packages/canvas/canvas-mesh/src/NineSlicePlane.js index d5ce07f..dccfd79 100644 --- a/packages/canvas/canvas-mesh/src/NineSlicePlane.js +++ b/packages/canvas/canvas-mesh/src/NineSlicePlane.js @@ -39,7 +39,7 @@ const transform = this.worldTransform; const res = renderer.resolution; const isTinted = this.tint !== 0xFFFFFF; - const texture = this._texture; + const texture = this.texture; // Work out tinting if (isTinted) diff --git a/packages/canvas/canvas-renderer/src/CanvasTinter.js b/packages/canvas/canvas-renderer/src/CanvasTinter.js index 6ea164b..7abf0f3 100644 --- a/packages/canvas/canvas-renderer/src/CanvasTinter.js +++ b/packages/canvas/canvas-renderer/src/CanvasTinter.js @@ -21,7 +21,7 @@ */ getTintedCanvas: (sprite, color) => { - const texture = sprite._texture; + const texture = sprite.texture; color = CanvasTinter.roundColor(color); diff --git a/packages/canvas/canvas-text/LICENSE b/packages/canvas/canvas-text/LICENSE new file mode 100644 index 0000000..148e3eb --- /dev/null +++ b/packages/canvas/canvas-text/LICENSE @@ -0,0 +1,21 @@ +The MIT License + +Copyright (c) 2013-2018 Mathew Groves, Chad Engler + +Permission is hereby granted, free of charge, to any person obtaining a copy +of this software and associated documentation files (the "Software"), to deal +in the Software without restriction, including without limitation the rights +to use, copy, modify, merge, publish, distribute, sublicense, and/or sell +copies of the Software, and to permit persons to whom the Software is +furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in +all copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, +FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE +AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER +LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, +OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN +THE SOFTWARE. \ No newline at end of file diff --git a/packages/canvas/canvas-text/README.md b/packages/canvas/canvas-text/README.md new file mode 100644 index 0000000..d6d3b4c --- /dev/null +++ b/packages/canvas/canvas-text/README.md @@ -0,0 +1,13 @@ +# @pixi/canvas-text + +## Installation + +```bash +npm install @pixi/canvas-text +``` + +## Usage + +```js +import '@pixi/canvas-text'; +``` \ No newline at end of file diff --git a/packages/canvas/canvas-text/package.json b/packages/canvas/canvas-text/package.json new file mode 100644 index 0000000..7d3ba59 --- /dev/null +++ b/packages/canvas/canvas-text/package.json @@ -0,0 +1,28 @@ +{ + "name": "@pixi/canvas-text", + "version": "5.0.4", + "main": "lib/canvas-text.js", + "module": "lib/canvas-text.es.js", + "bundle": "dist/canvas-text.js", + "bundleNoExports": true, + "description": "Canvas mixin for the text package", + "author": "Dave Moore", + "homepage": "http://pixijs.com/", + "bugs": "https://github.com/pixijs/pixi.js/issues", + "license": "MIT", + "repository": { + "type": "git", + "url": "https://github.com/pixijs/pixi.js.git" + }, + "publishConfig": { + "access": "public" + }, + "files": [ + "lib", + "dist" + ], + "dependencies": { + "@pixi/sprite": "^5.0.4", + "@pixi/text": "^5.0.4" + } +} diff --git a/packages/canvas/canvas-text/src/Text.js b/packages/canvas/canvas-text/src/Text.js new file mode 100644 index 0000000..0e0f9f5 --- /dev/null +++ b/packages/canvas/canvas-text/src/Text.js @@ -0,0 +1,23 @@ +import { Text } from '@pixi/text'; +import { Sprite } from '@pixi/sprite'; + +/** + * Renders the object using the Canvas renderer + * + * @method _renderCanvas + * @memberof PIXI.Text# + * @private + * @param {PIXI.CanvasRenderer} renderer - The renderer + */ +Text.prototype._renderCanvas = function _renderCanvas(renderer) +{ + if (this._autoResolution && this._resolution !== renderer.resolution) + { + this._resolution = renderer.resolution; + this.dirty = true; + } + + this.updateText(true); + + Sprite.prototype._renderCanvas.call(this, renderer); +}; diff --git a/packages/canvas/canvas-text/src/index.js b/packages/canvas/canvas-text/src/index.js new file mode 100644 index 0000000..7bdb7ed --- /dev/null +++ b/packages/canvas/canvas-text/src/index.js @@ -0,0 +1 @@ +import './Text'; diff --git a/packages/core/src/batch/BatchBuffer.js b/packages/core/src/batch/BatchBuffer.js deleted file mode 100644 index b80bc7e..0000000 --- a/packages/core/src/batch/BatchBuffer.js +++ /dev/null @@ -1,41 +0,0 @@ -/** - * Used by the BatchRenderer - * - * @class - * @memberof PIXI - */ -export default class BatchBuffer -{ - /** - * @param {number} size - The size of the buffer in bytes. - */ - constructor(size) - { - this.vertices = new ArrayBuffer(size); - - /** - * View on the vertices as a Float32Array for positions - * - * @member {Float32Array} - */ - this.float32View = new Float32Array(this.vertices); - - /** - * View on the vertices as a Uint32Array for uvs - * - * @member {Float32Array} - */ - this.uint32View = new Uint32Array(this.vertices); - } - - /** - * Destroys the buffer. - * - */ - destroy() - { - this.vertices = null; - this.float32View = null; - this.uint32View = null; - } -} diff --git a/packages/core/src/batch/BatchRenderer.js b/packages/core/src/batch/BatchRenderer.js index e15f6c5..d75a35d 100644 --- a/packages/core/src/batch/BatchRenderer.js +++ b/packages/core/src/batch/BatchRenderer.js @@ -1,11 +1,13 @@ import BatchDrawCall from './BatchDrawCall'; import BaseTexture from '../textures/BaseTexture'; -import State from '../state/State'; import ObjectRenderer from './ObjectRenderer'; +import State from '../state/State'; +import ViewableBuffer from '../geometry/ViewableBuffer'; + import checkMaxIfStatementsInShader from '../shader/utils/checkMaxIfStatementsInShader'; + import { settings } from '@pixi/settings'; import { premultiplyBlendMode, premultiplyTint, nextPow2, log2 } from '@pixi/utils'; -import BatchBuffer from './BatchBuffer'; import { ENV } from '@pixi/constants'; /** @@ -195,7 +197,7 @@ } /** - * Pool of `BatchBuffer` objects that are sorted in + * Pool of `ViewableBuffer` objects that are sorted in * order of increasing size. The flush method uses * the buffer with the least size above the amount * it requires. These are used for passing attributes. @@ -203,7 +205,7 @@ * The first buffer has a size of 8; each subsequent * buffer has double capacity of its previous. * - * @member {PIXI.BatchBuffer} + * @member {PIXI.ViewableBuffer} * @private * @see PIXI.BatchRenderer#getAttributeBuffer */ @@ -312,8 +314,7 @@ } /** - * Renders the content and empties the current batch. - * + * Renders the content _now_ and empties the current batch. */ flush() { @@ -322,52 +323,48 @@ return; } - const gl = this.renderer.gl; - const MAX_TEXTURES = this.MAX_TEXTURES; - const vertSize = this.vertexSize; - - const buffer = this.getAttributeBuffer(this._vertexCount); + const attributeBuffer = this.getAttributeBuffer(this._vertexCount); const indexBuffer = this.getIndexBuffer(this._indexCount); + const gl = this.renderer.gl; - const elements = this._bufferedElements; - const _drawCalls = this._drawCalls; - - const float32View = buffer.float32View; - const uint32View = buffer.uint32View; + const { + _bufferedElements: elements, + _drawCalls: drawCalls, + MAX_TEXTURES, + _packedGeometries: packedGeometries, + vertexSize, + } = this; const touch = this.renderer.textureGC.count; let index = 0; let _indexCount = 0; + let nextTexture; let currentTexture; + let textureCount = 0; + + let currentGroup = drawCalls[0]; let groupCount = 0; - let textureCount = 0; - let currentGroup = _drawCalls[0]; - - let blendMode = -1;// premultiplyBlendMode[elements[0]._texture.baseTexture.premultiplyAlpha ? 0 : ][elements[0].blendMode]; + let blendMode = -1;// blend-mode of previous element/sprite/object! currentGroup.textureCount = 0; currentGroup.start = 0; currentGroup.blend = blendMode; let TICK = ++BaseTexture._globalBatch; - let i; for (i = 0; i < this._bufferSize; ++i) { - // upload the sprite elements... - // they have all ready been calculated so we just need to push them into the buffer. - const sprite = elements[i]; elements[i] = null; - nextTexture = sprite._texture.baseTexture; - const spriteBlendMode = premultiplyBlendMode[nextTexture.premultiplyAlpha ? 1 : 0][sprite.blendMode]; + const spriteBlendMode = premultiplyBlendMode[ + nextTexture.premultiplyAlpha ? 1 : 0][sprite.blendMode]; if (blendMode !== spriteBlendMode) { @@ -393,7 +390,7 @@ currentGroup.size = _indexCount - currentGroup.start; - currentGroup = _drawCalls[groupCount++]; + currentGroup = drawCalls[groupCount++]; currentGroup.textureCount = 0; currentGroup.blend = blendMode; currentGroup.start = _indexCount; @@ -408,63 +405,49 @@ } } - this.packInterleavedGeometry(sprite, float32View, uint32View, indexBuffer, index, _indexCount);// argb, nextTexture._id, float32View, uint32View, indexBuffer, index, _indexCount); + this.packInterleavedGeometry(sprite, attributeBuffer, + indexBuffer, index, _indexCount); // push a graphics.. - index += (sprite.vertexData.length / 2) * vertSize; + index += (sprite.vertexData.length / 2) * vertexSize; _indexCount += sprite.indices.length; } BaseTexture._globalBatch = TICK; - currentGroup.size = _indexCount - currentGroup.start; if (!settings.CAN_UPLOAD_SAME_BUFFER) - { - // this is still needed for IOS performance.. - // it really does not like uploading to the same buffer in a single frame! + { /* Usually on iOS devices, where the browser doesn't + like uploads to the same buffer in a single frame. */ if (this._packedGeometryPoolSize <= this._flushId) { this._packedGeometryPoolSize++; - /* eslint-disable max-len */ - this._packedGeometries[this._flushId] = new (this.geometryClass)(); + packedGeometries[this._flushId] = new (this.geometryClass)(); } - this._packedGeometries[this._flushId]._buffer.update(buffer.vertices, 0); - this._packedGeometries[this._flushId]._indexBuffer.update(indexBuffer, 0); + packedGeometries[this._flushId]._buffer.update(attributeBuffer.rawBinaryData, 0); + packedGeometries[this._flushId]._indexBuffer.update(indexBuffer, 0); - // this.vertexBuffers[this._flushId].update(buffer.vertices, 0); - this.renderer.geometry.bind(this._packedGeometries[this._flushId]); - + this.renderer.geometry.bind(packedGeometries[this._flushId]); this.renderer.geometry.updateBuffers(); - this._flushId++; } else { // lets use the faster option, always use buffer number 0 - this._packedGeometries[this._flushId]._buffer.update(buffer.vertices, 0); - this._packedGeometries[this._flushId]._indexBuffer.update(indexBuffer, 0); - - // if (true)// this.spriteOnly) - // { - // this._packedGeometries[this._flushId].indexBuffer = this.defualtSpriteIndexBuffer; - // this._packedGeometries[this._flushId].buffers[1] = this.defualtSpriteIndexBuffer; - // } + packedGeometries[this._flushId]._buffer.update(attributeBuffer.rawBinaryData, 0); + packedGeometries[this._flushId]._indexBuffer.update(indexBuffer, 0); this.renderer.geometry.updateBuffers(); } - // this.renderer.state.set(this.state); - const textureSystem = this.renderer.texture; const stateSystem = this.renderer.state; - // e.log(groupCount); - // / render the _drawCalls.. + // Upload textures and do the draw calls for (i = 0; i < groupCount; i++) { - const group = _drawCalls[i]; + const group = drawCalls[i]; const groupTextureCount = group.textureCount; for (let j = 0; j < groupTextureCount; j++) @@ -473,13 +456,7 @@ group.textures[j] = null; } - // this.state.blendMode = group.blend; - // this.state.blend = true; - - // this.renderer.state.setState(this.state); - // set the blend mode.. stateSystem.setBlendMode(group.blend); - gl.drawElements(group.type, group.size, gl.UNSIGNED_SHORT, group.start * 2); } @@ -507,7 +484,6 @@ /** * Stops and flushes the current batch. - * */ stop() { @@ -548,7 +524,7 @@ * can hold atleast `size` floats. * * @param {number} size - minimum capacity required - * @return {BatchBuffer} - buffer than can hold atleast `size` floats + * @return {ViewableBuffer} - buffer than can hold atleast `size` floats * @private */ getAttributeBuffer(size) @@ -567,7 +543,7 @@ if (!buffer) { - this._aBuffers[roundedSize] = buffer = new BatchBuffer(roundedSize * this.vertexSize * 4); + this._aBuffers[roundedSize] = buffer = new ViewableBuffer(roundedSize * this.vertexSize * 4); } return buffer; @@ -613,16 +589,19 @@ * present. * * @param {PIXI.Sprite} element - element being rendered - * @param {Float32Array} float32View - float32-view of the attribute buffer - * @param {Uint32Array} uint32View - uint32-view of the attribute buffer + * @param {PIXI.ViewableBuffer} attributeBuffer - attribute buffer. * @param {Uint16Array} indexBuffer - index buffer * @param {number} aIndex - number of floats already in the attribute buffer * @param {number} iIndex - number of indices already in `indexBuffer` */ - packInterleavedGeometry(element, - float32View, uint32View, indexBuffer, aIndex, iIndex) + packInterleavedGeometry(element, attributeBuffer, indexBuffer, aIndex, iIndex) { - const p = aIndex / this.vertexSize; + const { + uint32View, + float32View, + } = attributeBuffer; + + const packedVertices = aIndex / this.vertexSize; const uvs = element.uvs; const indicies = element.indices; const vertexData = element.vertexData; @@ -647,7 +626,7 @@ for (let i = 0; i < indicies.length; i++) { - indexBuffer[iIndex++] = p + indicies[i]; + indexBuffer[iIndex++] = packedVertices + indicies[i]; } } } diff --git a/packages/core/src/batch/ObjectRenderer.js b/packages/core/src/batch/ObjectRenderer.js index 0c851a9..1776347 100644 --- a/packages/core/src/batch/ObjectRenderer.js +++ b/packages/core/src/batch/ObjectRenderer.js @@ -1,35 +1,29 @@ -import System from '../System'; - /** - * Base for a common object renderer that can be used as a system renderer plugin. + * Base for a common object renderer that can be used as a + * system renderer plugin. * * @class * @extends PIXI.System * @memberof PIXI */ -export default class ObjectRenderer extends System +export default class ObjectRenderer { /** - * Starts the renderer and sets the shader - * + * @param {PIXI.Renderer} renderer - The renderer this manager works for. */ - start() + constructor(renderer) { - // set the shader.. + /** + * The renderer this manager works for. + * + * @member {PIXI.Renderer} + */ + this.renderer = renderer; } /** - * Stops the renderer - * - */ - stop() - { - this.flush(); - } - - /** - * Stub method for rendering content and emptying the current batch. - * + * Stub method that should be used to empty the current + * batch by rendering objects now. */ flush() { @@ -37,7 +31,37 @@ } /** - * Renders an object + * Generic destruction method that frees all resources. This + * should be called by subclasses. + */ + destroy() + { + this.renderer = null; + } + + /** + * Stub method that initializes any state required before + * rendering starts. It is different from the `prerender` + * signal, which occurs every frame, in that it is called + * whenever an object requests _this_ renderer specifically. + */ + start() + { + // set the shader.. + } + + /** + * Stops the renderer. It should free up any state and + * become dormant. + */ + stop() + { + this.flush(); + } + + /** + * Keeps the object to render. It doesn't have to be + * rendered immediately. * * @param {PIXI.DisplayObject} object - The object to render. */ diff --git a/packages/core/src/context/ContextSystem.js b/packages/core/src/context/ContextSystem.js index 1b90abb..77a03ad 100644 --- a/packages/core/src/context/ContextSystem.js +++ b/packages/core/src/context/ContextSystem.js @@ -65,6 +65,8 @@ contextChange(gl) { this.gl = gl; + this.renderer.gl = gl; + this.renderer.CONTEXT_UID = CONTEXT_UID++; // restore a context if it was previously lost if (gl.isContextLost() && gl.getExtension('WEBGL_lose_context')) diff --git a/packages/core/src/geometry/ViewableBuffer.js b/packages/core/src/geometry/ViewableBuffer.js new file mode 100644 index 0000000..fb4b52f --- /dev/null +++ b/packages/core/src/geometry/ViewableBuffer.js @@ -0,0 +1,159 @@ +/** + * Flexible wrapper around `ArrayBuffer` that also provides + * typed array views on demand. + * + * @class + * @memberof PIXI + */ +export default class ViewableBuffer +{ + /** + * @param {number} size - The size of the buffer in bytes. + */ + constructor(size) + { + /** + * Underlying `ArrayBuffer` that holds all the data + * and is of capacity `size`. + * + * @member {ArrayBuffer} + */ + this.rawBinaryData = new ArrayBuffer(size); + + /** + * View on the raw binary data as a `Uint32Array`. + * + * @member {Uint32Array} + */ + this.uint32View = new Uint32Array(this.rawBinaryData); + + /** + * View on the raw binary data as a `Float32Array`. + * + * @member {Float32Array} + */ + this.float32View = new Float32Array(this.rawBinaryData); + } + + /** + * View on the raw binary data as a `Int8Array`. + * + * @member {Int8Array} + */ + get int8View() + { + if (!this._int8View) + { + this._int8View = new Int8Array(this.rawBinaryData); + } + + return this._int8View; + } + + /** + * View on the raw binary data as a `Uint8Array`. + * + * @member {Uint8Array} + */ + get uint8View() + { + if (!this._uint8View) + { + this._uint8View = new Uint8Array(this.rawBinaryData); + } + + return this._uint8View; + } + + /** + * View on the raw binary data as a `Int16Array`. + * + * @member {Int16Array} + */ + get int16View() + { + if (!this._int16View) + { + this._int16View = new Int16Array(this.rawBinaryData); + } + + return this._int16View; + } + + /** + * View on the raw binary data as a `Uint16Array`. + * + * @member {Uint16Array} + */ + get uint16View() + { + if (!this._uint16View) + { + this._uint16View = new Uint16Array(this.rawBinaryData); + } + + return this._uint16View; + } + + /** + * View on the raw binary data as a `Int32Array`. + * + * @member {Int32Array} + */ + get int32View() + { + if (!this._int32View) + { + this._int32View = new Int32Array(this.rawBinaryData); + } + + return this._int32View; + } + + /** + * Returns the view of the given type. + * + * @param {string} type - One of `int8`, `uint8`, `int16`, + * `uint16`, `int32`, `uint32`, and `float32`. + * @return typed array of given type + */ + view(type) + { + return this[`${type}View`]; + } + + /** + * Destroys all buffer references. Do not use after calling + * this. + */ + destroy() + { + this.rawBinaryData = null; + this._int8View = null; + this._uint8View = null; + this._int16View = null; + this._uint16View = null; + this._int32View = null; + this.uint32View = null; + this.float32View = null; + } + + static sizeOf(type) + { + switch (type) + { + case 'int8': + case 'uint8': + return 1; + case 'int16': + case 'uint16': + return 2; + case 'int32': + case 'uint32': + case 'float32': + return 4; + default: + throw new Error(`${type} isn't a valid view type`); + } + } +} diff --git a/bundles/pixi.js-legacy/package.json b/bundles/pixi.js-legacy/package.json index 1565ef3..97abd4a 100644 --- a/bundles/pixi.js-legacy/package.json +++ b/bundles/pixi.js-legacy/package.json @@ -40,6 +40,7 @@ "@pixi/canvas-renderer": "^5.0.4", "@pixi/canvas-sprite": "^5.0.4", "@pixi/canvas-sprite-tiling": "^5.0.4", + "@pixi/canvas-text": "^5.0.4", "pixi.js": "^5.0.4" } } diff --git a/bundles/pixi.js-legacy/src/index.js b/bundles/pixi.js-legacy/src/index.js index 956019c..f1598a1 100644 --- a/bundles/pixi.js-legacy/src/index.js +++ b/bundles/pixi.js-legacy/src/index.js @@ -8,6 +8,7 @@ import '@pixi/canvas-sprite-tiling'; import '@pixi/canvas-particles'; import '@pixi/canvas-display'; +import '@pixi/canvas-text'; CanvasRenderer.registerPlugin('accessibility', accessibility.AccessibilityManager); CanvasRenderer.registerPlugin('extract', canvasExtract.CanvasExtract); diff --git a/packages/canvas/canvas-graphics/src/CanvasGraphicsRenderer.js b/packages/canvas/canvas-graphics/src/CanvasGraphicsRenderer.js index b7b7a7e..cabe8e2 100644 --- a/packages/canvas/canvas-graphics/src/CanvasGraphicsRenderer.js +++ b/packages/canvas/canvas-graphics/src/CanvasGraphicsRenderer.js @@ -55,7 +55,7 @@ if (graphics.canvasTintDirty !== graphics.dirty || graphics._prevTint !== graphics.tint) { - // this.updateGraphicsTint(graphics); + this.updateGraphicsTint(graphics); } renderer.setBlendMode(graphics.blendMode); @@ -69,8 +69,8 @@ const fillStyle = data.fillStyle; const lineStyle = data.lineStyle; - const fillColor = fillStyle.color;// data._fillTint; - const lineColor = lineStyle.color;// data._lineTint; + const fillColor = data._fillTint; + const lineColor = data._lineTint; context.lineWidth = lineStyle.width; @@ -298,13 +298,14 @@ const tintR = ((graphics.tint >> 16) & 0xFF) / 255; const tintG = ((graphics.tint >> 8) & 0xFF) / 255; const tintB = (graphics.tint & 0xFF) / 255; + const graphicsData = graphics.geometry.graphicsData; - for (let i = 0; i < graphics.graphicsData.length; ++i) + for (let i = 0; i < graphicsData.length; ++i) { - const data = graphics.graphicsData[i]; + const data = graphicsData[i]; - const fillColor = data.fillColor | 0; - const lineColor = data.lineColor | 0; + const fillColor = data.fillStyle.color | 0; + const lineColor = data.lineStyle.color | 0; // super inline, cos optimization :) data._fillTint = ( diff --git a/packages/canvas/canvas-mesh/src/NineSlicePlane.js b/packages/canvas/canvas-mesh/src/NineSlicePlane.js index d5ce07f..dccfd79 100644 --- a/packages/canvas/canvas-mesh/src/NineSlicePlane.js +++ b/packages/canvas/canvas-mesh/src/NineSlicePlane.js @@ -39,7 +39,7 @@ const transform = this.worldTransform; const res = renderer.resolution; const isTinted = this.tint !== 0xFFFFFF; - const texture = this._texture; + const texture = this.texture; // Work out tinting if (isTinted) diff --git a/packages/canvas/canvas-renderer/src/CanvasTinter.js b/packages/canvas/canvas-renderer/src/CanvasTinter.js index 6ea164b..7abf0f3 100644 --- a/packages/canvas/canvas-renderer/src/CanvasTinter.js +++ b/packages/canvas/canvas-renderer/src/CanvasTinter.js @@ -21,7 +21,7 @@ */ getTintedCanvas: (sprite, color) => { - const texture = sprite._texture; + const texture = sprite.texture; color = CanvasTinter.roundColor(color); diff --git a/packages/canvas/canvas-text/LICENSE b/packages/canvas/canvas-text/LICENSE new file mode 100644 index 0000000..148e3eb --- /dev/null +++ b/packages/canvas/canvas-text/LICENSE @@ -0,0 +1,21 @@ +The MIT License + +Copyright (c) 2013-2018 Mathew Groves, Chad Engler + +Permission is hereby granted, free of charge, to any person obtaining a copy +of this software and associated documentation files (the "Software"), to deal +in the Software without restriction, including without limitation the rights +to use, copy, modify, merge, publish, distribute, sublicense, and/or sell +copies of the Software, and to permit persons to whom the Software is +furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in +all copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, +FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE +AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER +LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, +OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN +THE SOFTWARE. \ No newline at end of file diff --git a/packages/canvas/canvas-text/README.md b/packages/canvas/canvas-text/README.md new file mode 100644 index 0000000..d6d3b4c --- /dev/null +++ b/packages/canvas/canvas-text/README.md @@ -0,0 +1,13 @@ +# @pixi/canvas-text + +## Installation + +```bash +npm install @pixi/canvas-text +``` + +## Usage + +```js +import '@pixi/canvas-text'; +``` \ No newline at end of file diff --git a/packages/canvas/canvas-text/package.json b/packages/canvas/canvas-text/package.json new file mode 100644 index 0000000..7d3ba59 --- /dev/null +++ b/packages/canvas/canvas-text/package.json @@ -0,0 +1,28 @@ +{ + "name": "@pixi/canvas-text", + "version": "5.0.4", + "main": "lib/canvas-text.js", + "module": "lib/canvas-text.es.js", + "bundle": "dist/canvas-text.js", + "bundleNoExports": true, + "description": "Canvas mixin for the text package", + "author": "Dave Moore", + "homepage": "http://pixijs.com/", + "bugs": "https://github.com/pixijs/pixi.js/issues", + "license": "MIT", + "repository": { + "type": "git", + "url": "https://github.com/pixijs/pixi.js.git" + }, + "publishConfig": { + "access": "public" + }, + "files": [ + "lib", + "dist" + ], + "dependencies": { + "@pixi/sprite": "^5.0.4", + "@pixi/text": "^5.0.4" + } +} diff --git a/packages/canvas/canvas-text/src/Text.js b/packages/canvas/canvas-text/src/Text.js new file mode 100644 index 0000000..0e0f9f5 --- /dev/null +++ b/packages/canvas/canvas-text/src/Text.js @@ -0,0 +1,23 @@ +import { Text } from '@pixi/text'; +import { Sprite } from '@pixi/sprite'; + +/** + * Renders the object using the Canvas renderer + * + * @method _renderCanvas + * @memberof PIXI.Text# + * @private + * @param {PIXI.CanvasRenderer} renderer - The renderer + */ +Text.prototype._renderCanvas = function _renderCanvas(renderer) +{ + if (this._autoResolution && this._resolution !== renderer.resolution) + { + this._resolution = renderer.resolution; + this.dirty = true; + } + + this.updateText(true); + + Sprite.prototype._renderCanvas.call(this, renderer); +}; diff --git a/packages/canvas/canvas-text/src/index.js b/packages/canvas/canvas-text/src/index.js new file mode 100644 index 0000000..7bdb7ed --- /dev/null +++ b/packages/canvas/canvas-text/src/index.js @@ -0,0 +1 @@ +import './Text'; diff --git a/packages/core/src/batch/BatchBuffer.js b/packages/core/src/batch/BatchBuffer.js deleted file mode 100644 index b80bc7e..0000000 --- a/packages/core/src/batch/BatchBuffer.js +++ /dev/null @@ -1,41 +0,0 @@ -/** - * Used by the BatchRenderer - * - * @class - * @memberof PIXI - */ -export default class BatchBuffer -{ - /** - * @param {number} size - The size of the buffer in bytes. - */ - constructor(size) - { - this.vertices = new ArrayBuffer(size); - - /** - * View on the vertices as a Float32Array for positions - * - * @member {Float32Array} - */ - this.float32View = new Float32Array(this.vertices); - - /** - * View on the vertices as a Uint32Array for uvs - * - * @member {Float32Array} - */ - this.uint32View = new Uint32Array(this.vertices); - } - - /** - * Destroys the buffer. - * - */ - destroy() - { - this.vertices = null; - this.float32View = null; - this.uint32View = null; - } -} diff --git a/packages/core/src/batch/BatchRenderer.js b/packages/core/src/batch/BatchRenderer.js index e15f6c5..d75a35d 100644 --- a/packages/core/src/batch/BatchRenderer.js +++ b/packages/core/src/batch/BatchRenderer.js @@ -1,11 +1,13 @@ import BatchDrawCall from './BatchDrawCall'; import BaseTexture from '../textures/BaseTexture'; -import State from '../state/State'; import ObjectRenderer from './ObjectRenderer'; +import State from '../state/State'; +import ViewableBuffer from '../geometry/ViewableBuffer'; + import checkMaxIfStatementsInShader from '../shader/utils/checkMaxIfStatementsInShader'; + import { settings } from '@pixi/settings'; import { premultiplyBlendMode, premultiplyTint, nextPow2, log2 } from '@pixi/utils'; -import BatchBuffer from './BatchBuffer'; import { ENV } from '@pixi/constants'; /** @@ -195,7 +197,7 @@ } /** - * Pool of `BatchBuffer` objects that are sorted in + * Pool of `ViewableBuffer` objects that are sorted in * order of increasing size. The flush method uses * the buffer with the least size above the amount * it requires. These are used for passing attributes. @@ -203,7 +205,7 @@ * The first buffer has a size of 8; each subsequent * buffer has double capacity of its previous. * - * @member {PIXI.BatchBuffer} + * @member {PIXI.ViewableBuffer} * @private * @see PIXI.BatchRenderer#getAttributeBuffer */ @@ -312,8 +314,7 @@ } /** - * Renders the content and empties the current batch. - * + * Renders the content _now_ and empties the current batch. */ flush() { @@ -322,52 +323,48 @@ return; } - const gl = this.renderer.gl; - const MAX_TEXTURES = this.MAX_TEXTURES; - const vertSize = this.vertexSize; - - const buffer = this.getAttributeBuffer(this._vertexCount); + const attributeBuffer = this.getAttributeBuffer(this._vertexCount); const indexBuffer = this.getIndexBuffer(this._indexCount); + const gl = this.renderer.gl; - const elements = this._bufferedElements; - const _drawCalls = this._drawCalls; - - const float32View = buffer.float32View; - const uint32View = buffer.uint32View; + const { + _bufferedElements: elements, + _drawCalls: drawCalls, + MAX_TEXTURES, + _packedGeometries: packedGeometries, + vertexSize, + } = this; const touch = this.renderer.textureGC.count; let index = 0; let _indexCount = 0; + let nextTexture; let currentTexture; + let textureCount = 0; + + let currentGroup = drawCalls[0]; let groupCount = 0; - let textureCount = 0; - let currentGroup = _drawCalls[0]; - - let blendMode = -1;// premultiplyBlendMode[elements[0]._texture.baseTexture.premultiplyAlpha ? 0 : ][elements[0].blendMode]; + let blendMode = -1;// blend-mode of previous element/sprite/object! currentGroup.textureCount = 0; currentGroup.start = 0; currentGroup.blend = blendMode; let TICK = ++BaseTexture._globalBatch; - let i; for (i = 0; i < this._bufferSize; ++i) { - // upload the sprite elements... - // they have all ready been calculated so we just need to push them into the buffer. - const sprite = elements[i]; elements[i] = null; - nextTexture = sprite._texture.baseTexture; - const spriteBlendMode = premultiplyBlendMode[nextTexture.premultiplyAlpha ? 1 : 0][sprite.blendMode]; + const spriteBlendMode = premultiplyBlendMode[ + nextTexture.premultiplyAlpha ? 1 : 0][sprite.blendMode]; if (blendMode !== spriteBlendMode) { @@ -393,7 +390,7 @@ currentGroup.size = _indexCount - currentGroup.start; - currentGroup = _drawCalls[groupCount++]; + currentGroup = drawCalls[groupCount++]; currentGroup.textureCount = 0; currentGroup.blend = blendMode; currentGroup.start = _indexCount; @@ -408,63 +405,49 @@ } } - this.packInterleavedGeometry(sprite, float32View, uint32View, indexBuffer, index, _indexCount);// argb, nextTexture._id, float32View, uint32View, indexBuffer, index, _indexCount); + this.packInterleavedGeometry(sprite, attributeBuffer, + indexBuffer, index, _indexCount); // push a graphics.. - index += (sprite.vertexData.length / 2) * vertSize; + index += (sprite.vertexData.length / 2) * vertexSize; _indexCount += sprite.indices.length; } BaseTexture._globalBatch = TICK; - currentGroup.size = _indexCount - currentGroup.start; if (!settings.CAN_UPLOAD_SAME_BUFFER) - { - // this is still needed for IOS performance.. - // it really does not like uploading to the same buffer in a single frame! + { /* Usually on iOS devices, where the browser doesn't + like uploads to the same buffer in a single frame. */ if (this._packedGeometryPoolSize <= this._flushId) { this._packedGeometryPoolSize++; - /* eslint-disable max-len */ - this._packedGeometries[this._flushId] = new (this.geometryClass)(); + packedGeometries[this._flushId] = new (this.geometryClass)(); } - this._packedGeometries[this._flushId]._buffer.update(buffer.vertices, 0); - this._packedGeometries[this._flushId]._indexBuffer.update(indexBuffer, 0); + packedGeometries[this._flushId]._buffer.update(attributeBuffer.rawBinaryData, 0); + packedGeometries[this._flushId]._indexBuffer.update(indexBuffer, 0); - // this.vertexBuffers[this._flushId].update(buffer.vertices, 0); - this.renderer.geometry.bind(this._packedGeometries[this._flushId]); - + this.renderer.geometry.bind(packedGeometries[this._flushId]); this.renderer.geometry.updateBuffers(); - this._flushId++; } else { // lets use the faster option, always use buffer number 0 - this._packedGeometries[this._flushId]._buffer.update(buffer.vertices, 0); - this._packedGeometries[this._flushId]._indexBuffer.update(indexBuffer, 0); - - // if (true)// this.spriteOnly) - // { - // this._packedGeometries[this._flushId].indexBuffer = this.defualtSpriteIndexBuffer; - // this._packedGeometries[this._flushId].buffers[1] = this.defualtSpriteIndexBuffer; - // } + packedGeometries[this._flushId]._buffer.update(attributeBuffer.rawBinaryData, 0); + packedGeometries[this._flushId]._indexBuffer.update(indexBuffer, 0); this.renderer.geometry.updateBuffers(); } - // this.renderer.state.set(this.state); - const textureSystem = this.renderer.texture; const stateSystem = this.renderer.state; - // e.log(groupCount); - // / render the _drawCalls.. + // Upload textures and do the draw calls for (i = 0; i < groupCount; i++) { - const group = _drawCalls[i]; + const group = drawCalls[i]; const groupTextureCount = group.textureCount; for (let j = 0; j < groupTextureCount; j++) @@ -473,13 +456,7 @@ group.textures[j] = null; } - // this.state.blendMode = group.blend; - // this.state.blend = true; - - // this.renderer.state.setState(this.state); - // set the blend mode.. stateSystem.setBlendMode(group.blend); - gl.drawElements(group.type, group.size, gl.UNSIGNED_SHORT, group.start * 2); } @@ -507,7 +484,6 @@ /** * Stops and flushes the current batch. - * */ stop() { @@ -548,7 +524,7 @@ * can hold atleast `size` floats. * * @param {number} size - minimum capacity required - * @return {BatchBuffer} - buffer than can hold atleast `size` floats + * @return {ViewableBuffer} - buffer than can hold atleast `size` floats * @private */ getAttributeBuffer(size) @@ -567,7 +543,7 @@ if (!buffer) { - this._aBuffers[roundedSize] = buffer = new BatchBuffer(roundedSize * this.vertexSize * 4); + this._aBuffers[roundedSize] = buffer = new ViewableBuffer(roundedSize * this.vertexSize * 4); } return buffer; @@ -613,16 +589,19 @@ * present. * * @param {PIXI.Sprite} element - element being rendered - * @param {Float32Array} float32View - float32-view of the attribute buffer - * @param {Uint32Array} uint32View - uint32-view of the attribute buffer + * @param {PIXI.ViewableBuffer} attributeBuffer - attribute buffer. * @param {Uint16Array} indexBuffer - index buffer * @param {number} aIndex - number of floats already in the attribute buffer * @param {number} iIndex - number of indices already in `indexBuffer` */ - packInterleavedGeometry(element, - float32View, uint32View, indexBuffer, aIndex, iIndex) + packInterleavedGeometry(element, attributeBuffer, indexBuffer, aIndex, iIndex) { - const p = aIndex / this.vertexSize; + const { + uint32View, + float32View, + } = attributeBuffer; + + const packedVertices = aIndex / this.vertexSize; const uvs = element.uvs; const indicies = element.indices; const vertexData = element.vertexData; @@ -647,7 +626,7 @@ for (let i = 0; i < indicies.length; i++) { - indexBuffer[iIndex++] = p + indicies[i]; + indexBuffer[iIndex++] = packedVertices + indicies[i]; } } } diff --git a/packages/core/src/batch/ObjectRenderer.js b/packages/core/src/batch/ObjectRenderer.js index 0c851a9..1776347 100644 --- a/packages/core/src/batch/ObjectRenderer.js +++ b/packages/core/src/batch/ObjectRenderer.js @@ -1,35 +1,29 @@ -import System from '../System'; - /** - * Base for a common object renderer that can be used as a system renderer plugin. + * Base for a common object renderer that can be used as a + * system renderer plugin. * * @class * @extends PIXI.System * @memberof PIXI */ -export default class ObjectRenderer extends System +export default class ObjectRenderer { /** - * Starts the renderer and sets the shader - * + * @param {PIXI.Renderer} renderer - The renderer this manager works for. */ - start() + constructor(renderer) { - // set the shader.. + /** + * The renderer this manager works for. + * + * @member {PIXI.Renderer} + */ + this.renderer = renderer; } /** - * Stops the renderer - * - */ - stop() - { - this.flush(); - } - - /** - * Stub method for rendering content and emptying the current batch. - * + * Stub method that should be used to empty the current + * batch by rendering objects now. */ flush() { @@ -37,7 +31,37 @@ } /** - * Renders an object + * Generic destruction method that frees all resources. This + * should be called by subclasses. + */ + destroy() + { + this.renderer = null; + } + + /** + * Stub method that initializes any state required before + * rendering starts. It is different from the `prerender` + * signal, which occurs every frame, in that it is called + * whenever an object requests _this_ renderer specifically. + */ + start() + { + // set the shader.. + } + + /** + * Stops the renderer. It should free up any state and + * become dormant. + */ + stop() + { + this.flush(); + } + + /** + * Keeps the object to render. It doesn't have to be + * rendered immediately. * * @param {PIXI.DisplayObject} object - The object to render. */ diff --git a/packages/core/src/context/ContextSystem.js b/packages/core/src/context/ContextSystem.js index 1b90abb..77a03ad 100644 --- a/packages/core/src/context/ContextSystem.js +++ b/packages/core/src/context/ContextSystem.js @@ -65,6 +65,8 @@ contextChange(gl) { this.gl = gl; + this.renderer.gl = gl; + this.renderer.CONTEXT_UID = CONTEXT_UID++; // restore a context if it was previously lost if (gl.isContextLost() && gl.getExtension('WEBGL_lose_context')) diff --git a/packages/core/src/geometry/ViewableBuffer.js b/packages/core/src/geometry/ViewableBuffer.js new file mode 100644 index 0000000..fb4b52f --- /dev/null +++ b/packages/core/src/geometry/ViewableBuffer.js @@ -0,0 +1,159 @@ +/** + * Flexible wrapper around `ArrayBuffer` that also provides + * typed array views on demand. + * + * @class + * @memberof PIXI + */ +export default class ViewableBuffer +{ + /** + * @param {number} size - The size of the buffer in bytes. + */ + constructor(size) + { + /** + * Underlying `ArrayBuffer` that holds all the data + * and is of capacity `size`. + * + * @member {ArrayBuffer} + */ + this.rawBinaryData = new ArrayBuffer(size); + + /** + * View on the raw binary data as a `Uint32Array`. + * + * @member {Uint32Array} + */ + this.uint32View = new Uint32Array(this.rawBinaryData); + + /** + * View on the raw binary data as a `Float32Array`. + * + * @member {Float32Array} + */ + this.float32View = new Float32Array(this.rawBinaryData); + } + + /** + * View on the raw binary data as a `Int8Array`. + * + * @member {Int8Array} + */ + get int8View() + { + if (!this._int8View) + { + this._int8View = new Int8Array(this.rawBinaryData); + } + + return this._int8View; + } + + /** + * View on the raw binary data as a `Uint8Array`. + * + * @member {Uint8Array} + */ + get uint8View() + { + if (!this._uint8View) + { + this._uint8View = new Uint8Array(this.rawBinaryData); + } + + return this._uint8View; + } + + /** + * View on the raw binary data as a `Int16Array`. + * + * @member {Int16Array} + */ + get int16View() + { + if (!this._int16View) + { + this._int16View = new Int16Array(this.rawBinaryData); + } + + return this._int16View; + } + + /** + * View on the raw binary data as a `Uint16Array`. + * + * @member {Uint16Array} + */ + get uint16View() + { + if (!this._uint16View) + { + this._uint16View = new Uint16Array(this.rawBinaryData); + } + + return this._uint16View; + } + + /** + * View on the raw binary data as a `Int32Array`. + * + * @member {Int32Array} + */ + get int32View() + { + if (!this._int32View) + { + this._int32View = new Int32Array(this.rawBinaryData); + } + + return this._int32View; + } + + /** + * Returns the view of the given type. + * + * @param {string} type - One of `int8`, `uint8`, `int16`, + * `uint16`, `int32`, `uint32`, and `float32`. + * @return typed array of given type + */ + view(type) + { + return this[`${type}View`]; + } + + /** + * Destroys all buffer references. Do not use after calling + * this. + */ + destroy() + { + this.rawBinaryData = null; + this._int8View = null; + this._uint8View = null; + this._int16View = null; + this._uint16View = null; + this._int32View = null; + this.uint32View = null; + this.float32View = null; + } + + static sizeOf(type) + { + switch (type) + { + case 'int8': + case 'uint8': + return 1; + case 'int16': + case 'uint16': + return 2; + case 'int32': + case 'uint32': + case 'float32': + return 4; + default: + throw new Error(`${type} isn't a valid view type`); + } + } +} diff --git a/packages/core/src/index.js b/packages/core/src/index.js index 47d6883..55a092b 100644 --- a/packages/core/src/index.js +++ b/packages/core/src/index.js @@ -39,3 +39,4 @@ export { default as Attribute } from './geometry/Attribute'; export { default as Buffer } from './geometry/Buffer'; export { default as Geometry } from './geometry/Geometry'; +export { default as ViewableBuffer } from './geometry/ViewableBuffer'; diff --git a/bundles/pixi.js-legacy/package.json b/bundles/pixi.js-legacy/package.json index 1565ef3..97abd4a 100644 --- a/bundles/pixi.js-legacy/package.json +++ b/bundles/pixi.js-legacy/package.json @@ -40,6 +40,7 @@ "@pixi/canvas-renderer": "^5.0.4", "@pixi/canvas-sprite": "^5.0.4", "@pixi/canvas-sprite-tiling": "^5.0.4", + "@pixi/canvas-text": "^5.0.4", "pixi.js": "^5.0.4" } } diff --git a/bundles/pixi.js-legacy/src/index.js b/bundles/pixi.js-legacy/src/index.js index 956019c..f1598a1 100644 --- a/bundles/pixi.js-legacy/src/index.js +++ b/bundles/pixi.js-legacy/src/index.js @@ -8,6 +8,7 @@ import '@pixi/canvas-sprite-tiling'; import '@pixi/canvas-particles'; import '@pixi/canvas-display'; +import '@pixi/canvas-text'; CanvasRenderer.registerPlugin('accessibility', accessibility.AccessibilityManager); CanvasRenderer.registerPlugin('extract', canvasExtract.CanvasExtract); diff --git a/packages/canvas/canvas-graphics/src/CanvasGraphicsRenderer.js b/packages/canvas/canvas-graphics/src/CanvasGraphicsRenderer.js index b7b7a7e..cabe8e2 100644 --- a/packages/canvas/canvas-graphics/src/CanvasGraphicsRenderer.js +++ b/packages/canvas/canvas-graphics/src/CanvasGraphicsRenderer.js @@ -55,7 +55,7 @@ if (graphics.canvasTintDirty !== graphics.dirty || graphics._prevTint !== graphics.tint) { - // this.updateGraphicsTint(graphics); + this.updateGraphicsTint(graphics); } renderer.setBlendMode(graphics.blendMode); @@ -69,8 +69,8 @@ const fillStyle = data.fillStyle; const lineStyle = data.lineStyle; - const fillColor = fillStyle.color;// data._fillTint; - const lineColor = lineStyle.color;// data._lineTint; + const fillColor = data._fillTint; + const lineColor = data._lineTint; context.lineWidth = lineStyle.width; @@ -298,13 +298,14 @@ const tintR = ((graphics.tint >> 16) & 0xFF) / 255; const tintG = ((graphics.tint >> 8) & 0xFF) / 255; const tintB = (graphics.tint & 0xFF) / 255; + const graphicsData = graphics.geometry.graphicsData; - for (let i = 0; i < graphics.graphicsData.length; ++i) + for (let i = 0; i < graphicsData.length; ++i) { - const data = graphics.graphicsData[i]; + const data = graphicsData[i]; - const fillColor = data.fillColor | 0; - const lineColor = data.lineColor | 0; + const fillColor = data.fillStyle.color | 0; + const lineColor = data.lineStyle.color | 0; // super inline, cos optimization :) data._fillTint = ( diff --git a/packages/canvas/canvas-mesh/src/NineSlicePlane.js b/packages/canvas/canvas-mesh/src/NineSlicePlane.js index d5ce07f..dccfd79 100644 --- a/packages/canvas/canvas-mesh/src/NineSlicePlane.js +++ b/packages/canvas/canvas-mesh/src/NineSlicePlane.js @@ -39,7 +39,7 @@ const transform = this.worldTransform; const res = renderer.resolution; const isTinted = this.tint !== 0xFFFFFF; - const texture = this._texture; + const texture = this.texture; // Work out tinting if (isTinted) diff --git a/packages/canvas/canvas-renderer/src/CanvasTinter.js b/packages/canvas/canvas-renderer/src/CanvasTinter.js index 6ea164b..7abf0f3 100644 --- a/packages/canvas/canvas-renderer/src/CanvasTinter.js +++ b/packages/canvas/canvas-renderer/src/CanvasTinter.js @@ -21,7 +21,7 @@ */ getTintedCanvas: (sprite, color) => { - const texture = sprite._texture; + const texture = sprite.texture; color = CanvasTinter.roundColor(color); diff --git a/packages/canvas/canvas-text/LICENSE b/packages/canvas/canvas-text/LICENSE new file mode 100644 index 0000000..148e3eb --- /dev/null +++ b/packages/canvas/canvas-text/LICENSE @@ -0,0 +1,21 @@ +The MIT License + +Copyright (c) 2013-2018 Mathew Groves, Chad Engler + +Permission is hereby granted, free of charge, to any person obtaining a copy +of this software and associated documentation files (the "Software"), to deal +in the Software without restriction, including without limitation the rights +to use, copy, modify, merge, publish, distribute, sublicense, and/or sell +copies of the Software, and to permit persons to whom the Software is +furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in +all copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, +FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE +AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER +LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, +OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN +THE SOFTWARE. \ No newline at end of file diff --git a/packages/canvas/canvas-text/README.md b/packages/canvas/canvas-text/README.md new file mode 100644 index 0000000..d6d3b4c --- /dev/null +++ b/packages/canvas/canvas-text/README.md @@ -0,0 +1,13 @@ +# @pixi/canvas-text + +## Installation + +```bash +npm install @pixi/canvas-text +``` + +## Usage + +```js +import '@pixi/canvas-text'; +``` \ No newline at end of file diff --git a/packages/canvas/canvas-text/package.json b/packages/canvas/canvas-text/package.json new file mode 100644 index 0000000..7d3ba59 --- /dev/null +++ b/packages/canvas/canvas-text/package.json @@ -0,0 +1,28 @@ +{ + "name": "@pixi/canvas-text", + "version": "5.0.4", + "main": "lib/canvas-text.js", + "module": "lib/canvas-text.es.js", + "bundle": "dist/canvas-text.js", + "bundleNoExports": true, + "description": "Canvas mixin for the text package", + "author": "Dave Moore", + "homepage": "http://pixijs.com/", + "bugs": "https://github.com/pixijs/pixi.js/issues", + "license": "MIT", + "repository": { + "type": "git", + "url": "https://github.com/pixijs/pixi.js.git" + }, + "publishConfig": { + "access": "public" + }, + "files": [ + "lib", + "dist" + ], + "dependencies": { + "@pixi/sprite": "^5.0.4", + "@pixi/text": "^5.0.4" + } +} diff --git a/packages/canvas/canvas-text/src/Text.js b/packages/canvas/canvas-text/src/Text.js new file mode 100644 index 0000000..0e0f9f5 --- /dev/null +++ b/packages/canvas/canvas-text/src/Text.js @@ -0,0 +1,23 @@ +import { Text } from '@pixi/text'; +import { Sprite } from '@pixi/sprite'; + +/** + * Renders the object using the Canvas renderer + * + * @method _renderCanvas + * @memberof PIXI.Text# + * @private + * @param {PIXI.CanvasRenderer} renderer - The renderer + */ +Text.prototype._renderCanvas = function _renderCanvas(renderer) +{ + if (this._autoResolution && this._resolution !== renderer.resolution) + { + this._resolution = renderer.resolution; + this.dirty = true; + } + + this.updateText(true); + + Sprite.prototype._renderCanvas.call(this, renderer); +}; diff --git a/packages/canvas/canvas-text/src/index.js b/packages/canvas/canvas-text/src/index.js new file mode 100644 index 0000000..7bdb7ed --- /dev/null +++ b/packages/canvas/canvas-text/src/index.js @@ -0,0 +1 @@ +import './Text'; diff --git a/packages/core/src/batch/BatchBuffer.js b/packages/core/src/batch/BatchBuffer.js deleted file mode 100644 index b80bc7e..0000000 --- a/packages/core/src/batch/BatchBuffer.js +++ /dev/null @@ -1,41 +0,0 @@ -/** - * Used by the BatchRenderer - * - * @class - * @memberof PIXI - */ -export default class BatchBuffer -{ - /** - * @param {number} size - The size of the buffer in bytes. - */ - constructor(size) - { - this.vertices = new ArrayBuffer(size); - - /** - * View on the vertices as a Float32Array for positions - * - * @member {Float32Array} - */ - this.float32View = new Float32Array(this.vertices); - - /** - * View on the vertices as a Uint32Array for uvs - * - * @member {Float32Array} - */ - this.uint32View = new Uint32Array(this.vertices); - } - - /** - * Destroys the buffer. - * - */ - destroy() - { - this.vertices = null; - this.float32View = null; - this.uint32View = null; - } -} diff --git a/packages/core/src/batch/BatchRenderer.js b/packages/core/src/batch/BatchRenderer.js index e15f6c5..d75a35d 100644 --- a/packages/core/src/batch/BatchRenderer.js +++ b/packages/core/src/batch/BatchRenderer.js @@ -1,11 +1,13 @@ import BatchDrawCall from './BatchDrawCall'; import BaseTexture from '../textures/BaseTexture'; -import State from '../state/State'; import ObjectRenderer from './ObjectRenderer'; +import State from '../state/State'; +import ViewableBuffer from '../geometry/ViewableBuffer'; + import checkMaxIfStatementsInShader from '../shader/utils/checkMaxIfStatementsInShader'; + import { settings } from '@pixi/settings'; import { premultiplyBlendMode, premultiplyTint, nextPow2, log2 } from '@pixi/utils'; -import BatchBuffer from './BatchBuffer'; import { ENV } from '@pixi/constants'; /** @@ -195,7 +197,7 @@ } /** - * Pool of `BatchBuffer` objects that are sorted in + * Pool of `ViewableBuffer` objects that are sorted in * order of increasing size. The flush method uses * the buffer with the least size above the amount * it requires. These are used for passing attributes. @@ -203,7 +205,7 @@ * The first buffer has a size of 8; each subsequent * buffer has double capacity of its previous. * - * @member {PIXI.BatchBuffer} + * @member {PIXI.ViewableBuffer} * @private * @see PIXI.BatchRenderer#getAttributeBuffer */ @@ -312,8 +314,7 @@ } /** - * Renders the content and empties the current batch. - * + * Renders the content _now_ and empties the current batch. */ flush() { @@ -322,52 +323,48 @@ return; } - const gl = this.renderer.gl; - const MAX_TEXTURES = this.MAX_TEXTURES; - const vertSize = this.vertexSize; - - const buffer = this.getAttributeBuffer(this._vertexCount); + const attributeBuffer = this.getAttributeBuffer(this._vertexCount); const indexBuffer = this.getIndexBuffer(this._indexCount); + const gl = this.renderer.gl; - const elements = this._bufferedElements; - const _drawCalls = this._drawCalls; - - const float32View = buffer.float32View; - const uint32View = buffer.uint32View; + const { + _bufferedElements: elements, + _drawCalls: drawCalls, + MAX_TEXTURES, + _packedGeometries: packedGeometries, + vertexSize, + } = this; const touch = this.renderer.textureGC.count; let index = 0; let _indexCount = 0; + let nextTexture; let currentTexture; + let textureCount = 0; + + let currentGroup = drawCalls[0]; let groupCount = 0; - let textureCount = 0; - let currentGroup = _drawCalls[0]; - - let blendMode = -1;// premultiplyBlendMode[elements[0]._texture.baseTexture.premultiplyAlpha ? 0 : ][elements[0].blendMode]; + let blendMode = -1;// blend-mode of previous element/sprite/object! currentGroup.textureCount = 0; currentGroup.start = 0; currentGroup.blend = blendMode; let TICK = ++BaseTexture._globalBatch; - let i; for (i = 0; i < this._bufferSize; ++i) { - // upload the sprite elements... - // they have all ready been calculated so we just need to push them into the buffer. - const sprite = elements[i]; elements[i] = null; - nextTexture = sprite._texture.baseTexture; - const spriteBlendMode = premultiplyBlendMode[nextTexture.premultiplyAlpha ? 1 : 0][sprite.blendMode]; + const spriteBlendMode = premultiplyBlendMode[ + nextTexture.premultiplyAlpha ? 1 : 0][sprite.blendMode]; if (blendMode !== spriteBlendMode) { @@ -393,7 +390,7 @@ currentGroup.size = _indexCount - currentGroup.start; - currentGroup = _drawCalls[groupCount++]; + currentGroup = drawCalls[groupCount++]; currentGroup.textureCount = 0; currentGroup.blend = blendMode; currentGroup.start = _indexCount; @@ -408,63 +405,49 @@ } } - this.packInterleavedGeometry(sprite, float32View, uint32View, indexBuffer, index, _indexCount);// argb, nextTexture._id, float32View, uint32View, indexBuffer, index, _indexCount); + this.packInterleavedGeometry(sprite, attributeBuffer, + indexBuffer, index, _indexCount); // push a graphics.. - index += (sprite.vertexData.length / 2) * vertSize; + index += (sprite.vertexData.length / 2) * vertexSize; _indexCount += sprite.indices.length; } BaseTexture._globalBatch = TICK; - currentGroup.size = _indexCount - currentGroup.start; if (!settings.CAN_UPLOAD_SAME_BUFFER) - { - // this is still needed for IOS performance.. - // it really does not like uploading to the same buffer in a single frame! + { /* Usually on iOS devices, where the browser doesn't + like uploads to the same buffer in a single frame. */ if (this._packedGeometryPoolSize <= this._flushId) { this._packedGeometryPoolSize++; - /* eslint-disable max-len */ - this._packedGeometries[this._flushId] = new (this.geometryClass)(); + packedGeometries[this._flushId] = new (this.geometryClass)(); } - this._packedGeometries[this._flushId]._buffer.update(buffer.vertices, 0); - this._packedGeometries[this._flushId]._indexBuffer.update(indexBuffer, 0); + packedGeometries[this._flushId]._buffer.update(attributeBuffer.rawBinaryData, 0); + packedGeometries[this._flushId]._indexBuffer.update(indexBuffer, 0); - // this.vertexBuffers[this._flushId].update(buffer.vertices, 0); - this.renderer.geometry.bind(this._packedGeometries[this._flushId]); - + this.renderer.geometry.bind(packedGeometries[this._flushId]); this.renderer.geometry.updateBuffers(); - this._flushId++; } else { // lets use the faster option, always use buffer number 0 - this._packedGeometries[this._flushId]._buffer.update(buffer.vertices, 0); - this._packedGeometries[this._flushId]._indexBuffer.update(indexBuffer, 0); - - // if (true)// this.spriteOnly) - // { - // this._packedGeometries[this._flushId].indexBuffer = this.defualtSpriteIndexBuffer; - // this._packedGeometries[this._flushId].buffers[1] = this.defualtSpriteIndexBuffer; - // } + packedGeometries[this._flushId]._buffer.update(attributeBuffer.rawBinaryData, 0); + packedGeometries[this._flushId]._indexBuffer.update(indexBuffer, 0); this.renderer.geometry.updateBuffers(); } - // this.renderer.state.set(this.state); - const textureSystem = this.renderer.texture; const stateSystem = this.renderer.state; - // e.log(groupCount); - // / render the _drawCalls.. + // Upload textures and do the draw calls for (i = 0; i < groupCount; i++) { - const group = _drawCalls[i]; + const group = drawCalls[i]; const groupTextureCount = group.textureCount; for (let j = 0; j < groupTextureCount; j++) @@ -473,13 +456,7 @@ group.textures[j] = null; } - // this.state.blendMode = group.blend; - // this.state.blend = true; - - // this.renderer.state.setState(this.state); - // set the blend mode.. stateSystem.setBlendMode(group.blend); - gl.drawElements(group.type, group.size, gl.UNSIGNED_SHORT, group.start * 2); } @@ -507,7 +484,6 @@ /** * Stops and flushes the current batch. - * */ stop() { @@ -548,7 +524,7 @@ * can hold atleast `size` floats. * * @param {number} size - minimum capacity required - * @return {BatchBuffer} - buffer than can hold atleast `size` floats + * @return {ViewableBuffer} - buffer than can hold atleast `size` floats * @private */ getAttributeBuffer(size) @@ -567,7 +543,7 @@ if (!buffer) { - this._aBuffers[roundedSize] = buffer = new BatchBuffer(roundedSize * this.vertexSize * 4); + this._aBuffers[roundedSize] = buffer = new ViewableBuffer(roundedSize * this.vertexSize * 4); } return buffer; @@ -613,16 +589,19 @@ * present. * * @param {PIXI.Sprite} element - element being rendered - * @param {Float32Array} float32View - float32-view of the attribute buffer - * @param {Uint32Array} uint32View - uint32-view of the attribute buffer + * @param {PIXI.ViewableBuffer} attributeBuffer - attribute buffer. * @param {Uint16Array} indexBuffer - index buffer * @param {number} aIndex - number of floats already in the attribute buffer * @param {number} iIndex - number of indices already in `indexBuffer` */ - packInterleavedGeometry(element, - float32View, uint32View, indexBuffer, aIndex, iIndex) + packInterleavedGeometry(element, attributeBuffer, indexBuffer, aIndex, iIndex) { - const p = aIndex / this.vertexSize; + const { + uint32View, + float32View, + } = attributeBuffer; + + const packedVertices = aIndex / this.vertexSize; const uvs = element.uvs; const indicies = element.indices; const vertexData = element.vertexData; @@ -647,7 +626,7 @@ for (let i = 0; i < indicies.length; i++) { - indexBuffer[iIndex++] = p + indicies[i]; + indexBuffer[iIndex++] = packedVertices + indicies[i]; } } } diff --git a/packages/core/src/batch/ObjectRenderer.js b/packages/core/src/batch/ObjectRenderer.js index 0c851a9..1776347 100644 --- a/packages/core/src/batch/ObjectRenderer.js +++ b/packages/core/src/batch/ObjectRenderer.js @@ -1,35 +1,29 @@ -import System from '../System'; - /** - * Base for a common object renderer that can be used as a system renderer plugin. + * Base for a common object renderer that can be used as a + * system renderer plugin. * * @class * @extends PIXI.System * @memberof PIXI */ -export default class ObjectRenderer extends System +export default class ObjectRenderer { /** - * Starts the renderer and sets the shader - * + * @param {PIXI.Renderer} renderer - The renderer this manager works for. */ - start() + constructor(renderer) { - // set the shader.. + /** + * The renderer this manager works for. + * + * @member {PIXI.Renderer} + */ + this.renderer = renderer; } /** - * Stops the renderer - * - */ - stop() - { - this.flush(); - } - - /** - * Stub method for rendering content and emptying the current batch. - * + * Stub method that should be used to empty the current + * batch by rendering objects now. */ flush() { @@ -37,7 +31,37 @@ } /** - * Renders an object + * Generic destruction method that frees all resources. This + * should be called by subclasses. + */ + destroy() + { + this.renderer = null; + } + + /** + * Stub method that initializes any state required before + * rendering starts. It is different from the `prerender` + * signal, which occurs every frame, in that it is called + * whenever an object requests _this_ renderer specifically. + */ + start() + { + // set the shader.. + } + + /** + * Stops the renderer. It should free up any state and + * become dormant. + */ + stop() + { + this.flush(); + } + + /** + * Keeps the object to render. It doesn't have to be + * rendered immediately. * * @param {PIXI.DisplayObject} object - The object to render. */ diff --git a/packages/core/src/context/ContextSystem.js b/packages/core/src/context/ContextSystem.js index 1b90abb..77a03ad 100644 --- a/packages/core/src/context/ContextSystem.js +++ b/packages/core/src/context/ContextSystem.js @@ -65,6 +65,8 @@ contextChange(gl) { this.gl = gl; + this.renderer.gl = gl; + this.renderer.CONTEXT_UID = CONTEXT_UID++; // restore a context if it was previously lost if (gl.isContextLost() && gl.getExtension('WEBGL_lose_context')) diff --git a/packages/core/src/geometry/ViewableBuffer.js b/packages/core/src/geometry/ViewableBuffer.js new file mode 100644 index 0000000..fb4b52f --- /dev/null +++ b/packages/core/src/geometry/ViewableBuffer.js @@ -0,0 +1,159 @@ +/** + * Flexible wrapper around `ArrayBuffer` that also provides + * typed array views on demand. + * + * @class + * @memberof PIXI + */ +export default class ViewableBuffer +{ + /** + * @param {number} size - The size of the buffer in bytes. + */ + constructor(size) + { + /** + * Underlying `ArrayBuffer` that holds all the data + * and is of capacity `size`. + * + * @member {ArrayBuffer} + */ + this.rawBinaryData = new ArrayBuffer(size); + + /** + * View on the raw binary data as a `Uint32Array`. + * + * @member {Uint32Array} + */ + this.uint32View = new Uint32Array(this.rawBinaryData); + + /** + * View on the raw binary data as a `Float32Array`. + * + * @member {Float32Array} + */ + this.float32View = new Float32Array(this.rawBinaryData); + } + + /** + * View on the raw binary data as a `Int8Array`. + * + * @member {Int8Array} + */ + get int8View() + { + if (!this._int8View) + { + this._int8View = new Int8Array(this.rawBinaryData); + } + + return this._int8View; + } + + /** + * View on the raw binary data as a `Uint8Array`. + * + * @member {Uint8Array} + */ + get uint8View() + { + if (!this._uint8View) + { + this._uint8View = new Uint8Array(this.rawBinaryData); + } + + return this._uint8View; + } + + /** + * View on the raw binary data as a `Int16Array`. + * + * @member {Int16Array} + */ + get int16View() + { + if (!this._int16View) + { + this._int16View = new Int16Array(this.rawBinaryData); + } + + return this._int16View; + } + + /** + * View on the raw binary data as a `Uint16Array`. + * + * @member {Uint16Array} + */ + get uint16View() + { + if (!this._uint16View) + { + this._uint16View = new Uint16Array(this.rawBinaryData); + } + + return this._uint16View; + } + + /** + * View on the raw binary data as a `Int32Array`. + * + * @member {Int32Array} + */ + get int32View() + { + if (!this._int32View) + { + this._int32View = new Int32Array(this.rawBinaryData); + } + + return this._int32View; + } + + /** + * Returns the view of the given type. + * + * @param {string} type - One of `int8`, `uint8`, `int16`, + * `uint16`, `int32`, `uint32`, and `float32`. + * @return typed array of given type + */ + view(type) + { + return this[`${type}View`]; + } + + /** + * Destroys all buffer references. Do not use after calling + * this. + */ + destroy() + { + this.rawBinaryData = null; + this._int8View = null; + this._uint8View = null; + this._int16View = null; + this._uint16View = null; + this._int32View = null; + this.uint32View = null; + this.float32View = null; + } + + static sizeOf(type) + { + switch (type) + { + case 'int8': + case 'uint8': + return 1; + case 'int16': + case 'uint16': + return 2; + case 'int32': + case 'uint32': + case 'float32': + return 4; + default: + throw new Error(`${type} isn't a valid view type`); + } + } +} diff --git a/packages/core/src/index.js b/packages/core/src/index.js index 47d6883..55a092b 100644 --- a/packages/core/src/index.js +++ b/packages/core/src/index.js @@ -39,3 +39,4 @@ export { default as Attribute } from './geometry/Attribute'; export { default as Buffer } from './geometry/Buffer'; export { default as Geometry } from './geometry/Geometry'; +export { default as ViewableBuffer } from './geometry/ViewableBuffer'; diff --git a/packages/core/src/shader/ShaderSystem.js b/packages/core/src/shader/ShaderSystem.js index d555d2f..f8324a4 100644 --- a/packages/core/src/shader/ShaderSystem.js +++ b/packages/core/src/shader/ShaderSystem.js @@ -64,6 +64,7 @@ contextChange(gl) { this.gl = gl; + this.reset(); } /** diff --git a/bundles/pixi.js-legacy/package.json b/bundles/pixi.js-legacy/package.json index 1565ef3..97abd4a 100644 --- a/bundles/pixi.js-legacy/package.json +++ b/bundles/pixi.js-legacy/package.json @@ -40,6 +40,7 @@ "@pixi/canvas-renderer": "^5.0.4", "@pixi/canvas-sprite": "^5.0.4", "@pixi/canvas-sprite-tiling": "^5.0.4", + "@pixi/canvas-text": "^5.0.4", "pixi.js": "^5.0.4" } } diff --git a/bundles/pixi.js-legacy/src/index.js b/bundles/pixi.js-legacy/src/index.js index 956019c..f1598a1 100644 --- a/bundles/pixi.js-legacy/src/index.js +++ b/bundles/pixi.js-legacy/src/index.js @@ -8,6 +8,7 @@ import '@pixi/canvas-sprite-tiling'; import '@pixi/canvas-particles'; import '@pixi/canvas-display'; +import '@pixi/canvas-text'; CanvasRenderer.registerPlugin('accessibility', accessibility.AccessibilityManager); CanvasRenderer.registerPlugin('extract', canvasExtract.CanvasExtract); diff --git a/packages/canvas/canvas-graphics/src/CanvasGraphicsRenderer.js b/packages/canvas/canvas-graphics/src/CanvasGraphicsRenderer.js index b7b7a7e..cabe8e2 100644 --- a/packages/canvas/canvas-graphics/src/CanvasGraphicsRenderer.js +++ b/packages/canvas/canvas-graphics/src/CanvasGraphicsRenderer.js @@ -55,7 +55,7 @@ if (graphics.canvasTintDirty !== graphics.dirty || graphics._prevTint !== graphics.tint) { - // this.updateGraphicsTint(graphics); + this.updateGraphicsTint(graphics); } renderer.setBlendMode(graphics.blendMode); @@ -69,8 +69,8 @@ const fillStyle = data.fillStyle; const lineStyle = data.lineStyle; - const fillColor = fillStyle.color;// data._fillTint; - const lineColor = lineStyle.color;// data._lineTint; + const fillColor = data._fillTint; + const lineColor = data._lineTint; context.lineWidth = lineStyle.width; @@ -298,13 +298,14 @@ const tintR = ((graphics.tint >> 16) & 0xFF) / 255; const tintG = ((graphics.tint >> 8) & 0xFF) / 255; const tintB = (graphics.tint & 0xFF) / 255; + const graphicsData = graphics.geometry.graphicsData; - for (let i = 0; i < graphics.graphicsData.length; ++i) + for (let i = 0; i < graphicsData.length; ++i) { - const data = graphics.graphicsData[i]; + const data = graphicsData[i]; - const fillColor = data.fillColor | 0; - const lineColor = data.lineColor | 0; + const fillColor = data.fillStyle.color | 0; + const lineColor = data.lineStyle.color | 0; // super inline, cos optimization :) data._fillTint = ( diff --git a/packages/canvas/canvas-mesh/src/NineSlicePlane.js b/packages/canvas/canvas-mesh/src/NineSlicePlane.js index d5ce07f..dccfd79 100644 --- a/packages/canvas/canvas-mesh/src/NineSlicePlane.js +++ b/packages/canvas/canvas-mesh/src/NineSlicePlane.js @@ -39,7 +39,7 @@ const transform = this.worldTransform; const res = renderer.resolution; const isTinted = this.tint !== 0xFFFFFF; - const texture = this._texture; + const texture = this.texture; // Work out tinting if (isTinted) diff --git a/packages/canvas/canvas-renderer/src/CanvasTinter.js b/packages/canvas/canvas-renderer/src/CanvasTinter.js index 6ea164b..7abf0f3 100644 --- a/packages/canvas/canvas-renderer/src/CanvasTinter.js +++ b/packages/canvas/canvas-renderer/src/CanvasTinter.js @@ -21,7 +21,7 @@ */ getTintedCanvas: (sprite, color) => { - const texture = sprite._texture; + const texture = sprite.texture; color = CanvasTinter.roundColor(color); diff --git a/packages/canvas/canvas-text/LICENSE b/packages/canvas/canvas-text/LICENSE new file mode 100644 index 0000000..148e3eb --- /dev/null +++ b/packages/canvas/canvas-text/LICENSE @@ -0,0 +1,21 @@ +The MIT License + +Copyright (c) 2013-2018 Mathew Groves, Chad Engler + +Permission is hereby granted, free of charge, to any person obtaining a copy +of this software and associated documentation files (the "Software"), to deal +in the Software without restriction, including without limitation the rights +to use, copy, modify, merge, publish, distribute, sublicense, and/or sell +copies of the Software, and to permit persons to whom the Software is +furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in +all copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, +FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE +AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER +LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, +OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN +THE SOFTWARE. \ No newline at end of file diff --git a/packages/canvas/canvas-text/README.md b/packages/canvas/canvas-text/README.md new file mode 100644 index 0000000..d6d3b4c --- /dev/null +++ b/packages/canvas/canvas-text/README.md @@ -0,0 +1,13 @@ +# @pixi/canvas-text + +## Installation + +```bash +npm install @pixi/canvas-text +``` + +## Usage + +```js +import '@pixi/canvas-text'; +``` \ No newline at end of file diff --git a/packages/canvas/canvas-text/package.json b/packages/canvas/canvas-text/package.json new file mode 100644 index 0000000..7d3ba59 --- /dev/null +++ b/packages/canvas/canvas-text/package.json @@ -0,0 +1,28 @@ +{ + "name": "@pixi/canvas-text", + "version": "5.0.4", + "main": "lib/canvas-text.js", + "module": "lib/canvas-text.es.js", + "bundle": "dist/canvas-text.js", + "bundleNoExports": true, + "description": "Canvas mixin for the text package", + "author": "Dave Moore", + "homepage": "http://pixijs.com/", + "bugs": "https://github.com/pixijs/pixi.js/issues", + "license": "MIT", + "repository": { + "type": "git", + "url": "https://github.com/pixijs/pixi.js.git" + }, + "publishConfig": { + "access": "public" + }, + "files": [ + "lib", + "dist" + ], + "dependencies": { + "@pixi/sprite": "^5.0.4", + "@pixi/text": "^5.0.4" + } +} diff --git a/packages/canvas/canvas-text/src/Text.js b/packages/canvas/canvas-text/src/Text.js new file mode 100644 index 0000000..0e0f9f5 --- /dev/null +++ b/packages/canvas/canvas-text/src/Text.js @@ -0,0 +1,23 @@ +import { Text } from '@pixi/text'; +import { Sprite } from '@pixi/sprite'; + +/** + * Renders the object using the Canvas renderer + * + * @method _renderCanvas + * @memberof PIXI.Text# + * @private + * @param {PIXI.CanvasRenderer} renderer - The renderer + */ +Text.prototype._renderCanvas = function _renderCanvas(renderer) +{ + if (this._autoResolution && this._resolution !== renderer.resolution) + { + this._resolution = renderer.resolution; + this.dirty = true; + } + + this.updateText(true); + + Sprite.prototype._renderCanvas.call(this, renderer); +}; diff --git a/packages/canvas/canvas-text/src/index.js b/packages/canvas/canvas-text/src/index.js new file mode 100644 index 0000000..7bdb7ed --- /dev/null +++ b/packages/canvas/canvas-text/src/index.js @@ -0,0 +1 @@ +import './Text'; diff --git a/packages/core/src/batch/BatchBuffer.js b/packages/core/src/batch/BatchBuffer.js deleted file mode 100644 index b80bc7e..0000000 --- a/packages/core/src/batch/BatchBuffer.js +++ /dev/null @@ -1,41 +0,0 @@ -/** - * Used by the BatchRenderer - * - * @class - * @memberof PIXI - */ -export default class BatchBuffer -{ - /** - * @param {number} size - The size of the buffer in bytes. - */ - constructor(size) - { - this.vertices = new ArrayBuffer(size); - - /** - * View on the vertices as a Float32Array for positions - * - * @member {Float32Array} - */ - this.float32View = new Float32Array(this.vertices); - - /** - * View on the vertices as a Uint32Array for uvs - * - * @member {Float32Array} - */ - this.uint32View = new Uint32Array(this.vertices); - } - - /** - * Destroys the buffer. - * - */ - destroy() - { - this.vertices = null; - this.float32View = null; - this.uint32View = null; - } -} diff --git a/packages/core/src/batch/BatchRenderer.js b/packages/core/src/batch/BatchRenderer.js index e15f6c5..d75a35d 100644 --- a/packages/core/src/batch/BatchRenderer.js +++ b/packages/core/src/batch/BatchRenderer.js @@ -1,11 +1,13 @@ import BatchDrawCall from './BatchDrawCall'; import BaseTexture from '../textures/BaseTexture'; -import State from '../state/State'; import ObjectRenderer from './ObjectRenderer'; +import State from '../state/State'; +import ViewableBuffer from '../geometry/ViewableBuffer'; + import checkMaxIfStatementsInShader from '../shader/utils/checkMaxIfStatementsInShader'; + import { settings } from '@pixi/settings'; import { premultiplyBlendMode, premultiplyTint, nextPow2, log2 } from '@pixi/utils'; -import BatchBuffer from './BatchBuffer'; import { ENV } from '@pixi/constants'; /** @@ -195,7 +197,7 @@ } /** - * Pool of `BatchBuffer` objects that are sorted in + * Pool of `ViewableBuffer` objects that are sorted in * order of increasing size. The flush method uses * the buffer with the least size above the amount * it requires. These are used for passing attributes. @@ -203,7 +205,7 @@ * The first buffer has a size of 8; each subsequent * buffer has double capacity of its previous. * - * @member {PIXI.BatchBuffer} + * @member {PIXI.ViewableBuffer} * @private * @see PIXI.BatchRenderer#getAttributeBuffer */ @@ -312,8 +314,7 @@ } /** - * Renders the content and empties the current batch. - * + * Renders the content _now_ and empties the current batch. */ flush() { @@ -322,52 +323,48 @@ return; } - const gl = this.renderer.gl; - const MAX_TEXTURES = this.MAX_TEXTURES; - const vertSize = this.vertexSize; - - const buffer = this.getAttributeBuffer(this._vertexCount); + const attributeBuffer = this.getAttributeBuffer(this._vertexCount); const indexBuffer = this.getIndexBuffer(this._indexCount); + const gl = this.renderer.gl; - const elements = this._bufferedElements; - const _drawCalls = this._drawCalls; - - const float32View = buffer.float32View; - const uint32View = buffer.uint32View; + const { + _bufferedElements: elements, + _drawCalls: drawCalls, + MAX_TEXTURES, + _packedGeometries: packedGeometries, + vertexSize, + } = this; const touch = this.renderer.textureGC.count; let index = 0; let _indexCount = 0; + let nextTexture; let currentTexture; + let textureCount = 0; + + let currentGroup = drawCalls[0]; let groupCount = 0; - let textureCount = 0; - let currentGroup = _drawCalls[0]; - - let blendMode = -1;// premultiplyBlendMode[elements[0]._texture.baseTexture.premultiplyAlpha ? 0 : ][elements[0].blendMode]; + let blendMode = -1;// blend-mode of previous element/sprite/object! currentGroup.textureCount = 0; currentGroup.start = 0; currentGroup.blend = blendMode; let TICK = ++BaseTexture._globalBatch; - let i; for (i = 0; i < this._bufferSize; ++i) { - // upload the sprite elements... - // they have all ready been calculated so we just need to push them into the buffer. - const sprite = elements[i]; elements[i] = null; - nextTexture = sprite._texture.baseTexture; - const spriteBlendMode = premultiplyBlendMode[nextTexture.premultiplyAlpha ? 1 : 0][sprite.blendMode]; + const spriteBlendMode = premultiplyBlendMode[ + nextTexture.premultiplyAlpha ? 1 : 0][sprite.blendMode]; if (blendMode !== spriteBlendMode) { @@ -393,7 +390,7 @@ currentGroup.size = _indexCount - currentGroup.start; - currentGroup = _drawCalls[groupCount++]; + currentGroup = drawCalls[groupCount++]; currentGroup.textureCount = 0; currentGroup.blend = blendMode; currentGroup.start = _indexCount; @@ -408,63 +405,49 @@ } } - this.packInterleavedGeometry(sprite, float32View, uint32View, indexBuffer, index, _indexCount);// argb, nextTexture._id, float32View, uint32View, indexBuffer, index, _indexCount); + this.packInterleavedGeometry(sprite, attributeBuffer, + indexBuffer, index, _indexCount); // push a graphics.. - index += (sprite.vertexData.length / 2) * vertSize; + index += (sprite.vertexData.length / 2) * vertexSize; _indexCount += sprite.indices.length; } BaseTexture._globalBatch = TICK; - currentGroup.size = _indexCount - currentGroup.start; if (!settings.CAN_UPLOAD_SAME_BUFFER) - { - // this is still needed for IOS performance.. - // it really does not like uploading to the same buffer in a single frame! + { /* Usually on iOS devices, where the browser doesn't + like uploads to the same buffer in a single frame. */ if (this._packedGeometryPoolSize <= this._flushId) { this._packedGeometryPoolSize++; - /* eslint-disable max-len */ - this._packedGeometries[this._flushId] = new (this.geometryClass)(); + packedGeometries[this._flushId] = new (this.geometryClass)(); } - this._packedGeometries[this._flushId]._buffer.update(buffer.vertices, 0); - this._packedGeometries[this._flushId]._indexBuffer.update(indexBuffer, 0); + packedGeometries[this._flushId]._buffer.update(attributeBuffer.rawBinaryData, 0); + packedGeometries[this._flushId]._indexBuffer.update(indexBuffer, 0); - // this.vertexBuffers[this._flushId].update(buffer.vertices, 0); - this.renderer.geometry.bind(this._packedGeometries[this._flushId]); - + this.renderer.geometry.bind(packedGeometries[this._flushId]); this.renderer.geometry.updateBuffers(); - this._flushId++; } else { // lets use the faster option, always use buffer number 0 - this._packedGeometries[this._flushId]._buffer.update(buffer.vertices, 0); - this._packedGeometries[this._flushId]._indexBuffer.update(indexBuffer, 0); - - // if (true)// this.spriteOnly) - // { - // this._packedGeometries[this._flushId].indexBuffer = this.defualtSpriteIndexBuffer; - // this._packedGeometries[this._flushId].buffers[1] = this.defualtSpriteIndexBuffer; - // } + packedGeometries[this._flushId]._buffer.update(attributeBuffer.rawBinaryData, 0); + packedGeometries[this._flushId]._indexBuffer.update(indexBuffer, 0); this.renderer.geometry.updateBuffers(); } - // this.renderer.state.set(this.state); - const textureSystem = this.renderer.texture; const stateSystem = this.renderer.state; - // e.log(groupCount); - // / render the _drawCalls.. + // Upload textures and do the draw calls for (i = 0; i < groupCount; i++) { - const group = _drawCalls[i]; + const group = drawCalls[i]; const groupTextureCount = group.textureCount; for (let j = 0; j < groupTextureCount; j++) @@ -473,13 +456,7 @@ group.textures[j] = null; } - // this.state.blendMode = group.blend; - // this.state.blend = true; - - // this.renderer.state.setState(this.state); - // set the blend mode.. stateSystem.setBlendMode(group.blend); - gl.drawElements(group.type, group.size, gl.UNSIGNED_SHORT, group.start * 2); } @@ -507,7 +484,6 @@ /** * Stops and flushes the current batch. - * */ stop() { @@ -548,7 +524,7 @@ * can hold atleast `size` floats. * * @param {number} size - minimum capacity required - * @return {BatchBuffer} - buffer than can hold atleast `size` floats + * @return {ViewableBuffer} - buffer than can hold atleast `size` floats * @private */ getAttributeBuffer(size) @@ -567,7 +543,7 @@ if (!buffer) { - this._aBuffers[roundedSize] = buffer = new BatchBuffer(roundedSize * this.vertexSize * 4); + this._aBuffers[roundedSize] = buffer = new ViewableBuffer(roundedSize * this.vertexSize * 4); } return buffer; @@ -613,16 +589,19 @@ * present. * * @param {PIXI.Sprite} element - element being rendered - * @param {Float32Array} float32View - float32-view of the attribute buffer - * @param {Uint32Array} uint32View - uint32-view of the attribute buffer + * @param {PIXI.ViewableBuffer} attributeBuffer - attribute buffer. * @param {Uint16Array} indexBuffer - index buffer * @param {number} aIndex - number of floats already in the attribute buffer * @param {number} iIndex - number of indices already in `indexBuffer` */ - packInterleavedGeometry(element, - float32View, uint32View, indexBuffer, aIndex, iIndex) + packInterleavedGeometry(element, attributeBuffer, indexBuffer, aIndex, iIndex) { - const p = aIndex / this.vertexSize; + const { + uint32View, + float32View, + } = attributeBuffer; + + const packedVertices = aIndex / this.vertexSize; const uvs = element.uvs; const indicies = element.indices; const vertexData = element.vertexData; @@ -647,7 +626,7 @@ for (let i = 0; i < indicies.length; i++) { - indexBuffer[iIndex++] = p + indicies[i]; + indexBuffer[iIndex++] = packedVertices + indicies[i]; } } } diff --git a/packages/core/src/batch/ObjectRenderer.js b/packages/core/src/batch/ObjectRenderer.js index 0c851a9..1776347 100644 --- a/packages/core/src/batch/ObjectRenderer.js +++ b/packages/core/src/batch/ObjectRenderer.js @@ -1,35 +1,29 @@ -import System from '../System'; - /** - * Base for a common object renderer that can be used as a system renderer plugin. + * Base for a common object renderer that can be used as a + * system renderer plugin. * * @class * @extends PIXI.System * @memberof PIXI */ -export default class ObjectRenderer extends System +export default class ObjectRenderer { /** - * Starts the renderer and sets the shader - * + * @param {PIXI.Renderer} renderer - The renderer this manager works for. */ - start() + constructor(renderer) { - // set the shader.. + /** + * The renderer this manager works for. + * + * @member {PIXI.Renderer} + */ + this.renderer = renderer; } /** - * Stops the renderer - * - */ - stop() - { - this.flush(); - } - - /** - * Stub method for rendering content and emptying the current batch. - * + * Stub method that should be used to empty the current + * batch by rendering objects now. */ flush() { @@ -37,7 +31,37 @@ } /** - * Renders an object + * Generic destruction method that frees all resources. This + * should be called by subclasses. + */ + destroy() + { + this.renderer = null; + } + + /** + * Stub method that initializes any state required before + * rendering starts. It is different from the `prerender` + * signal, which occurs every frame, in that it is called + * whenever an object requests _this_ renderer specifically. + */ + start() + { + // set the shader.. + } + + /** + * Stops the renderer. It should free up any state and + * become dormant. + */ + stop() + { + this.flush(); + } + + /** + * Keeps the object to render. It doesn't have to be + * rendered immediately. * * @param {PIXI.DisplayObject} object - The object to render. */ diff --git a/packages/core/src/context/ContextSystem.js b/packages/core/src/context/ContextSystem.js index 1b90abb..77a03ad 100644 --- a/packages/core/src/context/ContextSystem.js +++ b/packages/core/src/context/ContextSystem.js @@ -65,6 +65,8 @@ contextChange(gl) { this.gl = gl; + this.renderer.gl = gl; + this.renderer.CONTEXT_UID = CONTEXT_UID++; // restore a context if it was previously lost if (gl.isContextLost() && gl.getExtension('WEBGL_lose_context')) diff --git a/packages/core/src/geometry/ViewableBuffer.js b/packages/core/src/geometry/ViewableBuffer.js new file mode 100644 index 0000000..fb4b52f --- /dev/null +++ b/packages/core/src/geometry/ViewableBuffer.js @@ -0,0 +1,159 @@ +/** + * Flexible wrapper around `ArrayBuffer` that also provides + * typed array views on demand. + * + * @class + * @memberof PIXI + */ +export default class ViewableBuffer +{ + /** + * @param {number} size - The size of the buffer in bytes. + */ + constructor(size) + { + /** + * Underlying `ArrayBuffer` that holds all the data + * and is of capacity `size`. + * + * @member {ArrayBuffer} + */ + this.rawBinaryData = new ArrayBuffer(size); + + /** + * View on the raw binary data as a `Uint32Array`. + * + * @member {Uint32Array} + */ + this.uint32View = new Uint32Array(this.rawBinaryData); + + /** + * View on the raw binary data as a `Float32Array`. + * + * @member {Float32Array} + */ + this.float32View = new Float32Array(this.rawBinaryData); + } + + /** + * View on the raw binary data as a `Int8Array`. + * + * @member {Int8Array} + */ + get int8View() + { + if (!this._int8View) + { + this._int8View = new Int8Array(this.rawBinaryData); + } + + return this._int8View; + } + + /** + * View on the raw binary data as a `Uint8Array`. + * + * @member {Uint8Array} + */ + get uint8View() + { + if (!this._uint8View) + { + this._uint8View = new Uint8Array(this.rawBinaryData); + } + + return this._uint8View; + } + + /** + * View on the raw binary data as a `Int16Array`. + * + * @member {Int16Array} + */ + get int16View() + { + if (!this._int16View) + { + this._int16View = new Int16Array(this.rawBinaryData); + } + + return this._int16View; + } + + /** + * View on the raw binary data as a `Uint16Array`. + * + * @member {Uint16Array} + */ + get uint16View() + { + if (!this._uint16View) + { + this._uint16View = new Uint16Array(this.rawBinaryData); + } + + return this._uint16View; + } + + /** + * View on the raw binary data as a `Int32Array`. + * + * @member {Int32Array} + */ + get int32View() + { + if (!this._int32View) + { + this._int32View = new Int32Array(this.rawBinaryData); + } + + return this._int32View; + } + + /** + * Returns the view of the given type. + * + * @param {string} type - One of `int8`, `uint8`, `int16`, + * `uint16`, `int32`, `uint32`, and `float32`. + * @return typed array of given type + */ + view(type) + { + return this[`${type}View`]; + } + + /** + * Destroys all buffer references. Do not use after calling + * this. + */ + destroy() + { + this.rawBinaryData = null; + this._int8View = null; + this._uint8View = null; + this._int16View = null; + this._uint16View = null; + this._int32View = null; + this.uint32View = null; + this.float32View = null; + } + + static sizeOf(type) + { + switch (type) + { + case 'int8': + case 'uint8': + return 1; + case 'int16': + case 'uint16': + return 2; + case 'int32': + case 'uint32': + case 'float32': + return 4; + default: + throw new Error(`${type} isn't a valid view type`); + } + } +} diff --git a/packages/core/src/index.js b/packages/core/src/index.js index 47d6883..55a092b 100644 --- a/packages/core/src/index.js +++ b/packages/core/src/index.js @@ -39,3 +39,4 @@ export { default as Attribute } from './geometry/Attribute'; export { default as Buffer } from './geometry/Buffer'; export { default as Geometry } from './geometry/Geometry'; +export { default as ViewableBuffer } from './geometry/ViewableBuffer'; diff --git a/packages/core/src/shader/ShaderSystem.js b/packages/core/src/shader/ShaderSystem.js index d555d2f..f8324a4 100644 --- a/packages/core/src/shader/ShaderSystem.js +++ b/packages/core/src/shader/ShaderSystem.js @@ -64,6 +64,7 @@ contextChange(gl) { this.gl = gl; + this.reset(); } /** diff --git a/packages/graphics/src/Graphics.js b/packages/graphics/src/Graphics.js index e807104..596a872 100644 --- a/packages/graphics/src/Graphics.js +++ b/packages/graphics/src/Graphics.js @@ -158,6 +158,14 @@ this._transformID = -1; this.batchDirty = -1; + /** + * Renderer plugin for batching + * + * @member {string} + * @default 'batch' + */ + this.pluginName = 'batch'; + // Set default this.tint = 0xFFFFFF; this.blendMode = BLEND_MODES.NORMAL; @@ -239,7 +247,7 @@ * @param {number} [width=0] - width of the line to draw, will update the objects stored style * @param {number} [color=0] - color of the line to draw, will update the objects stored style * @param {number} [alpha=1] - alpha of the line to draw, will update the objects stored style - * @param {number} [alignment=1] - alignment of the line to draw, (0 = inner, 0.5 = middle, 1 = outter) + * @param {number} [alignment=0.5] - alignment of the line to draw, (0 = inner, 0.5 = middle, 1 = outter) * @param {boolean} [native=false] - If true the lines will be draw using LINES instead of TRIANGLE_STRIP * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ @@ -864,7 +872,7 @@ } } - renderer.batch.setObjectRenderer(renderer.plugins.batch); + renderer.batch.setObjectRenderer(renderer.plugins[this.pluginName]); if (this.batches.length) { @@ -877,7 +885,7 @@ batch.worldAlpha = this.worldAlpha * batch.alpha; - renderer.plugins.batch.render(batch); + renderer.plugins[this.pluginName].render(batch); } } } diff --git a/bundles/pixi.js-legacy/package.json b/bundles/pixi.js-legacy/package.json index 1565ef3..97abd4a 100644 --- a/bundles/pixi.js-legacy/package.json +++ b/bundles/pixi.js-legacy/package.json @@ -40,6 +40,7 @@ "@pixi/canvas-renderer": "^5.0.4", "@pixi/canvas-sprite": "^5.0.4", "@pixi/canvas-sprite-tiling": "^5.0.4", + "@pixi/canvas-text": "^5.0.4", "pixi.js": "^5.0.4" } } diff --git a/bundles/pixi.js-legacy/src/index.js b/bundles/pixi.js-legacy/src/index.js index 956019c..f1598a1 100644 --- a/bundles/pixi.js-legacy/src/index.js +++ b/bundles/pixi.js-legacy/src/index.js @@ -8,6 +8,7 @@ import '@pixi/canvas-sprite-tiling'; import '@pixi/canvas-particles'; import '@pixi/canvas-display'; +import '@pixi/canvas-text'; CanvasRenderer.registerPlugin('accessibility', accessibility.AccessibilityManager); CanvasRenderer.registerPlugin('extract', canvasExtract.CanvasExtract); diff --git a/packages/canvas/canvas-graphics/src/CanvasGraphicsRenderer.js b/packages/canvas/canvas-graphics/src/CanvasGraphicsRenderer.js index b7b7a7e..cabe8e2 100644 --- a/packages/canvas/canvas-graphics/src/CanvasGraphicsRenderer.js +++ b/packages/canvas/canvas-graphics/src/CanvasGraphicsRenderer.js @@ -55,7 +55,7 @@ if (graphics.canvasTintDirty !== graphics.dirty || graphics._prevTint !== graphics.tint) { - // this.updateGraphicsTint(graphics); + this.updateGraphicsTint(graphics); } renderer.setBlendMode(graphics.blendMode); @@ -69,8 +69,8 @@ const fillStyle = data.fillStyle; const lineStyle = data.lineStyle; - const fillColor = fillStyle.color;// data._fillTint; - const lineColor = lineStyle.color;// data._lineTint; + const fillColor = data._fillTint; + const lineColor = data._lineTint; context.lineWidth = lineStyle.width; @@ -298,13 +298,14 @@ const tintR = ((graphics.tint >> 16) & 0xFF) / 255; const tintG = ((graphics.tint >> 8) & 0xFF) / 255; const tintB = (graphics.tint & 0xFF) / 255; + const graphicsData = graphics.geometry.graphicsData; - for (let i = 0; i < graphics.graphicsData.length; ++i) + for (let i = 0; i < graphicsData.length; ++i) { - const data = graphics.graphicsData[i]; + const data = graphicsData[i]; - const fillColor = data.fillColor | 0; - const lineColor = data.lineColor | 0; + const fillColor = data.fillStyle.color | 0; + const lineColor = data.lineStyle.color | 0; // super inline, cos optimization :) data._fillTint = ( diff --git a/packages/canvas/canvas-mesh/src/NineSlicePlane.js b/packages/canvas/canvas-mesh/src/NineSlicePlane.js index d5ce07f..dccfd79 100644 --- a/packages/canvas/canvas-mesh/src/NineSlicePlane.js +++ b/packages/canvas/canvas-mesh/src/NineSlicePlane.js @@ -39,7 +39,7 @@ const transform = this.worldTransform; const res = renderer.resolution; const isTinted = this.tint !== 0xFFFFFF; - const texture = this._texture; + const texture = this.texture; // Work out tinting if (isTinted) diff --git a/packages/canvas/canvas-renderer/src/CanvasTinter.js b/packages/canvas/canvas-renderer/src/CanvasTinter.js index 6ea164b..7abf0f3 100644 --- a/packages/canvas/canvas-renderer/src/CanvasTinter.js +++ b/packages/canvas/canvas-renderer/src/CanvasTinter.js @@ -21,7 +21,7 @@ */ getTintedCanvas: (sprite, color) => { - const texture = sprite._texture; + const texture = sprite.texture; color = CanvasTinter.roundColor(color); diff --git a/packages/canvas/canvas-text/LICENSE b/packages/canvas/canvas-text/LICENSE new file mode 100644 index 0000000..148e3eb --- /dev/null +++ b/packages/canvas/canvas-text/LICENSE @@ -0,0 +1,21 @@ +The MIT License + +Copyright (c) 2013-2018 Mathew Groves, Chad Engler + +Permission is hereby granted, free of charge, to any person obtaining a copy +of this software and associated documentation files (the "Software"), to deal +in the Software without restriction, including without limitation the rights +to use, copy, modify, merge, publish, distribute, sublicense, and/or sell +copies of the Software, and to permit persons to whom the Software is +furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in +all copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, +FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE +AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER +LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, +OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN +THE SOFTWARE. \ No newline at end of file diff --git a/packages/canvas/canvas-text/README.md b/packages/canvas/canvas-text/README.md new file mode 100644 index 0000000..d6d3b4c --- /dev/null +++ b/packages/canvas/canvas-text/README.md @@ -0,0 +1,13 @@ +# @pixi/canvas-text + +## Installation + +```bash +npm install @pixi/canvas-text +``` + +## Usage + +```js +import '@pixi/canvas-text'; +``` \ No newline at end of file diff --git a/packages/canvas/canvas-text/package.json b/packages/canvas/canvas-text/package.json new file mode 100644 index 0000000..7d3ba59 --- /dev/null +++ b/packages/canvas/canvas-text/package.json @@ -0,0 +1,28 @@ +{ + "name": "@pixi/canvas-text", + "version": "5.0.4", + "main": "lib/canvas-text.js", + "module": "lib/canvas-text.es.js", + "bundle": "dist/canvas-text.js", + "bundleNoExports": true, + "description": "Canvas mixin for the text package", + "author": "Dave Moore", + "homepage": "http://pixijs.com/", + "bugs": "https://github.com/pixijs/pixi.js/issues", + "license": "MIT", + "repository": { + "type": "git", + "url": "https://github.com/pixijs/pixi.js.git" + }, + "publishConfig": { + "access": "public" + }, + "files": [ + "lib", + "dist" + ], + "dependencies": { + "@pixi/sprite": "^5.0.4", + "@pixi/text": "^5.0.4" + } +} diff --git a/packages/canvas/canvas-text/src/Text.js b/packages/canvas/canvas-text/src/Text.js new file mode 100644 index 0000000..0e0f9f5 --- /dev/null +++ b/packages/canvas/canvas-text/src/Text.js @@ -0,0 +1,23 @@ +import { Text } from '@pixi/text'; +import { Sprite } from '@pixi/sprite'; + +/** + * Renders the object using the Canvas renderer + * + * @method _renderCanvas + * @memberof PIXI.Text# + * @private + * @param {PIXI.CanvasRenderer} renderer - The renderer + */ +Text.prototype._renderCanvas = function _renderCanvas(renderer) +{ + if (this._autoResolution && this._resolution !== renderer.resolution) + { + this._resolution = renderer.resolution; + this.dirty = true; + } + + this.updateText(true); + + Sprite.prototype._renderCanvas.call(this, renderer); +}; diff --git a/packages/canvas/canvas-text/src/index.js b/packages/canvas/canvas-text/src/index.js new file mode 100644 index 0000000..7bdb7ed --- /dev/null +++ b/packages/canvas/canvas-text/src/index.js @@ -0,0 +1 @@ +import './Text'; diff --git a/packages/core/src/batch/BatchBuffer.js b/packages/core/src/batch/BatchBuffer.js deleted file mode 100644 index b80bc7e..0000000 --- a/packages/core/src/batch/BatchBuffer.js +++ /dev/null @@ -1,41 +0,0 @@ -/** - * Used by the BatchRenderer - * - * @class - * @memberof PIXI - */ -export default class BatchBuffer -{ - /** - * @param {number} size - The size of the buffer in bytes. - */ - constructor(size) - { - this.vertices = new ArrayBuffer(size); - - /** - * View on the vertices as a Float32Array for positions - * - * @member {Float32Array} - */ - this.float32View = new Float32Array(this.vertices); - - /** - * View on the vertices as a Uint32Array for uvs - * - * @member {Float32Array} - */ - this.uint32View = new Uint32Array(this.vertices); - } - - /** - * Destroys the buffer. - * - */ - destroy() - { - this.vertices = null; - this.float32View = null; - this.uint32View = null; - } -} diff --git a/packages/core/src/batch/BatchRenderer.js b/packages/core/src/batch/BatchRenderer.js index e15f6c5..d75a35d 100644 --- a/packages/core/src/batch/BatchRenderer.js +++ b/packages/core/src/batch/BatchRenderer.js @@ -1,11 +1,13 @@ import BatchDrawCall from './BatchDrawCall'; import BaseTexture from '../textures/BaseTexture'; -import State from '../state/State'; import ObjectRenderer from './ObjectRenderer'; +import State from '../state/State'; +import ViewableBuffer from '../geometry/ViewableBuffer'; + import checkMaxIfStatementsInShader from '../shader/utils/checkMaxIfStatementsInShader'; + import { settings } from '@pixi/settings'; import { premultiplyBlendMode, premultiplyTint, nextPow2, log2 } from '@pixi/utils'; -import BatchBuffer from './BatchBuffer'; import { ENV } from '@pixi/constants'; /** @@ -195,7 +197,7 @@ } /** - * Pool of `BatchBuffer` objects that are sorted in + * Pool of `ViewableBuffer` objects that are sorted in * order of increasing size. The flush method uses * the buffer with the least size above the amount * it requires. These are used for passing attributes. @@ -203,7 +205,7 @@ * The first buffer has a size of 8; each subsequent * buffer has double capacity of its previous. * - * @member {PIXI.BatchBuffer} + * @member {PIXI.ViewableBuffer} * @private * @see PIXI.BatchRenderer#getAttributeBuffer */ @@ -312,8 +314,7 @@ } /** - * Renders the content and empties the current batch. - * + * Renders the content _now_ and empties the current batch. */ flush() { @@ -322,52 +323,48 @@ return; } - const gl = this.renderer.gl; - const MAX_TEXTURES = this.MAX_TEXTURES; - const vertSize = this.vertexSize; - - const buffer = this.getAttributeBuffer(this._vertexCount); + const attributeBuffer = this.getAttributeBuffer(this._vertexCount); const indexBuffer = this.getIndexBuffer(this._indexCount); + const gl = this.renderer.gl; - const elements = this._bufferedElements; - const _drawCalls = this._drawCalls; - - const float32View = buffer.float32View; - const uint32View = buffer.uint32View; + const { + _bufferedElements: elements, + _drawCalls: drawCalls, + MAX_TEXTURES, + _packedGeometries: packedGeometries, + vertexSize, + } = this; const touch = this.renderer.textureGC.count; let index = 0; let _indexCount = 0; + let nextTexture; let currentTexture; + let textureCount = 0; + + let currentGroup = drawCalls[0]; let groupCount = 0; - let textureCount = 0; - let currentGroup = _drawCalls[0]; - - let blendMode = -1;// premultiplyBlendMode[elements[0]._texture.baseTexture.premultiplyAlpha ? 0 : ][elements[0].blendMode]; + let blendMode = -1;// blend-mode of previous element/sprite/object! currentGroup.textureCount = 0; currentGroup.start = 0; currentGroup.blend = blendMode; let TICK = ++BaseTexture._globalBatch; - let i; for (i = 0; i < this._bufferSize; ++i) { - // upload the sprite elements... - // they have all ready been calculated so we just need to push them into the buffer. - const sprite = elements[i]; elements[i] = null; - nextTexture = sprite._texture.baseTexture; - const spriteBlendMode = premultiplyBlendMode[nextTexture.premultiplyAlpha ? 1 : 0][sprite.blendMode]; + const spriteBlendMode = premultiplyBlendMode[ + nextTexture.premultiplyAlpha ? 1 : 0][sprite.blendMode]; if (blendMode !== spriteBlendMode) { @@ -393,7 +390,7 @@ currentGroup.size = _indexCount - currentGroup.start; - currentGroup = _drawCalls[groupCount++]; + currentGroup = drawCalls[groupCount++]; currentGroup.textureCount = 0; currentGroup.blend = blendMode; currentGroup.start = _indexCount; @@ -408,63 +405,49 @@ } } - this.packInterleavedGeometry(sprite, float32View, uint32View, indexBuffer, index, _indexCount);// argb, nextTexture._id, float32View, uint32View, indexBuffer, index, _indexCount); + this.packInterleavedGeometry(sprite, attributeBuffer, + indexBuffer, index, _indexCount); // push a graphics.. - index += (sprite.vertexData.length / 2) * vertSize; + index += (sprite.vertexData.length / 2) * vertexSize; _indexCount += sprite.indices.length; } BaseTexture._globalBatch = TICK; - currentGroup.size = _indexCount - currentGroup.start; if (!settings.CAN_UPLOAD_SAME_BUFFER) - { - // this is still needed for IOS performance.. - // it really does not like uploading to the same buffer in a single frame! + { /* Usually on iOS devices, where the browser doesn't + like uploads to the same buffer in a single frame. */ if (this._packedGeometryPoolSize <= this._flushId) { this._packedGeometryPoolSize++; - /* eslint-disable max-len */ - this._packedGeometries[this._flushId] = new (this.geometryClass)(); + packedGeometries[this._flushId] = new (this.geometryClass)(); } - this._packedGeometries[this._flushId]._buffer.update(buffer.vertices, 0); - this._packedGeometries[this._flushId]._indexBuffer.update(indexBuffer, 0); + packedGeometries[this._flushId]._buffer.update(attributeBuffer.rawBinaryData, 0); + packedGeometries[this._flushId]._indexBuffer.update(indexBuffer, 0); - // this.vertexBuffers[this._flushId].update(buffer.vertices, 0); - this.renderer.geometry.bind(this._packedGeometries[this._flushId]); - + this.renderer.geometry.bind(packedGeometries[this._flushId]); this.renderer.geometry.updateBuffers(); - this._flushId++; } else { // lets use the faster option, always use buffer number 0 - this._packedGeometries[this._flushId]._buffer.update(buffer.vertices, 0); - this._packedGeometries[this._flushId]._indexBuffer.update(indexBuffer, 0); - - // if (true)// this.spriteOnly) - // { - // this._packedGeometries[this._flushId].indexBuffer = this.defualtSpriteIndexBuffer; - // this._packedGeometries[this._flushId].buffers[1] = this.defualtSpriteIndexBuffer; - // } + packedGeometries[this._flushId]._buffer.update(attributeBuffer.rawBinaryData, 0); + packedGeometries[this._flushId]._indexBuffer.update(indexBuffer, 0); this.renderer.geometry.updateBuffers(); } - // this.renderer.state.set(this.state); - const textureSystem = this.renderer.texture; const stateSystem = this.renderer.state; - // e.log(groupCount); - // / render the _drawCalls.. + // Upload textures and do the draw calls for (i = 0; i < groupCount; i++) { - const group = _drawCalls[i]; + const group = drawCalls[i]; const groupTextureCount = group.textureCount; for (let j = 0; j < groupTextureCount; j++) @@ -473,13 +456,7 @@ group.textures[j] = null; } - // this.state.blendMode = group.blend; - // this.state.blend = true; - - // this.renderer.state.setState(this.state); - // set the blend mode.. stateSystem.setBlendMode(group.blend); - gl.drawElements(group.type, group.size, gl.UNSIGNED_SHORT, group.start * 2); } @@ -507,7 +484,6 @@ /** * Stops and flushes the current batch. - * */ stop() { @@ -548,7 +524,7 @@ * can hold atleast `size` floats. * * @param {number} size - minimum capacity required - * @return {BatchBuffer} - buffer than can hold atleast `size` floats + * @return {ViewableBuffer} - buffer than can hold atleast `size` floats * @private */ getAttributeBuffer(size) @@ -567,7 +543,7 @@ if (!buffer) { - this._aBuffers[roundedSize] = buffer = new BatchBuffer(roundedSize * this.vertexSize * 4); + this._aBuffers[roundedSize] = buffer = new ViewableBuffer(roundedSize * this.vertexSize * 4); } return buffer; @@ -613,16 +589,19 @@ * present. * * @param {PIXI.Sprite} element - element being rendered - * @param {Float32Array} float32View - float32-view of the attribute buffer - * @param {Uint32Array} uint32View - uint32-view of the attribute buffer + * @param {PIXI.ViewableBuffer} attributeBuffer - attribute buffer. * @param {Uint16Array} indexBuffer - index buffer * @param {number} aIndex - number of floats already in the attribute buffer * @param {number} iIndex - number of indices already in `indexBuffer` */ - packInterleavedGeometry(element, - float32View, uint32View, indexBuffer, aIndex, iIndex) + packInterleavedGeometry(element, attributeBuffer, indexBuffer, aIndex, iIndex) { - const p = aIndex / this.vertexSize; + const { + uint32View, + float32View, + } = attributeBuffer; + + const packedVertices = aIndex / this.vertexSize; const uvs = element.uvs; const indicies = element.indices; const vertexData = element.vertexData; @@ -647,7 +626,7 @@ for (let i = 0; i < indicies.length; i++) { - indexBuffer[iIndex++] = p + indicies[i]; + indexBuffer[iIndex++] = packedVertices + indicies[i]; } } } diff --git a/packages/core/src/batch/ObjectRenderer.js b/packages/core/src/batch/ObjectRenderer.js index 0c851a9..1776347 100644 --- a/packages/core/src/batch/ObjectRenderer.js +++ b/packages/core/src/batch/ObjectRenderer.js @@ -1,35 +1,29 @@ -import System from '../System'; - /** - * Base for a common object renderer that can be used as a system renderer plugin. + * Base for a common object renderer that can be used as a + * system renderer plugin. * * @class * @extends PIXI.System * @memberof PIXI */ -export default class ObjectRenderer extends System +export default class ObjectRenderer { /** - * Starts the renderer and sets the shader - * + * @param {PIXI.Renderer} renderer - The renderer this manager works for. */ - start() + constructor(renderer) { - // set the shader.. + /** + * The renderer this manager works for. + * + * @member {PIXI.Renderer} + */ + this.renderer = renderer; } /** - * Stops the renderer - * - */ - stop() - { - this.flush(); - } - - /** - * Stub method for rendering content and emptying the current batch. - * + * Stub method that should be used to empty the current + * batch by rendering objects now. */ flush() { @@ -37,7 +31,37 @@ } /** - * Renders an object + * Generic destruction method that frees all resources. This + * should be called by subclasses. + */ + destroy() + { + this.renderer = null; + } + + /** + * Stub method that initializes any state required before + * rendering starts. It is different from the `prerender` + * signal, which occurs every frame, in that it is called + * whenever an object requests _this_ renderer specifically. + */ + start() + { + // set the shader.. + } + + /** + * Stops the renderer. It should free up any state and + * become dormant. + */ + stop() + { + this.flush(); + } + + /** + * Keeps the object to render. It doesn't have to be + * rendered immediately. * * @param {PIXI.DisplayObject} object - The object to render. */ diff --git a/packages/core/src/context/ContextSystem.js b/packages/core/src/context/ContextSystem.js index 1b90abb..77a03ad 100644 --- a/packages/core/src/context/ContextSystem.js +++ b/packages/core/src/context/ContextSystem.js @@ -65,6 +65,8 @@ contextChange(gl) { this.gl = gl; + this.renderer.gl = gl; + this.renderer.CONTEXT_UID = CONTEXT_UID++; // restore a context if it was previously lost if (gl.isContextLost() && gl.getExtension('WEBGL_lose_context')) diff --git a/packages/core/src/geometry/ViewableBuffer.js b/packages/core/src/geometry/ViewableBuffer.js new file mode 100644 index 0000000..fb4b52f --- /dev/null +++ b/packages/core/src/geometry/ViewableBuffer.js @@ -0,0 +1,159 @@ +/** + * Flexible wrapper around `ArrayBuffer` that also provides + * typed array views on demand. + * + * @class + * @memberof PIXI + */ +export default class ViewableBuffer +{ + /** + * @param {number} size - The size of the buffer in bytes. + */ + constructor(size) + { + /** + * Underlying `ArrayBuffer` that holds all the data + * and is of capacity `size`. + * + * @member {ArrayBuffer} + */ + this.rawBinaryData = new ArrayBuffer(size); + + /** + * View on the raw binary data as a `Uint32Array`. + * + * @member {Uint32Array} + */ + this.uint32View = new Uint32Array(this.rawBinaryData); + + /** + * View on the raw binary data as a `Float32Array`. + * + * @member {Float32Array} + */ + this.float32View = new Float32Array(this.rawBinaryData); + } + + /** + * View on the raw binary data as a `Int8Array`. + * + * @member {Int8Array} + */ + get int8View() + { + if (!this._int8View) + { + this._int8View = new Int8Array(this.rawBinaryData); + } + + return this._int8View; + } + + /** + * View on the raw binary data as a `Uint8Array`. + * + * @member {Uint8Array} + */ + get uint8View() + { + if (!this._uint8View) + { + this._uint8View = new Uint8Array(this.rawBinaryData); + } + + return this._uint8View; + } + + /** + * View on the raw binary data as a `Int16Array`. + * + * @member {Int16Array} + */ + get int16View() + { + if (!this._int16View) + { + this._int16View = new Int16Array(this.rawBinaryData); + } + + return this._int16View; + } + + /** + * View on the raw binary data as a `Uint16Array`. + * + * @member {Uint16Array} + */ + get uint16View() + { + if (!this._uint16View) + { + this._uint16View = new Uint16Array(this.rawBinaryData); + } + + return this._uint16View; + } + + /** + * View on the raw binary data as a `Int32Array`. + * + * @member {Int32Array} + */ + get int32View() + { + if (!this._int32View) + { + this._int32View = new Int32Array(this.rawBinaryData); + } + + return this._int32View; + } + + /** + * Returns the view of the given type. + * + * @param {string} type - One of `int8`, `uint8`, `int16`, + * `uint16`, `int32`, `uint32`, and `float32`. + * @return typed array of given type + */ + view(type) + { + return this[`${type}View`]; + } + + /** + * Destroys all buffer references. Do not use after calling + * this. + */ + destroy() + { + this.rawBinaryData = null; + this._int8View = null; + this._uint8View = null; + this._int16View = null; + this._uint16View = null; + this._int32View = null; + this.uint32View = null; + this.float32View = null; + } + + static sizeOf(type) + { + switch (type) + { + case 'int8': + case 'uint8': + return 1; + case 'int16': + case 'uint16': + return 2; + case 'int32': + case 'uint32': + case 'float32': + return 4; + default: + throw new Error(`${type} isn't a valid view type`); + } + } +} diff --git a/packages/core/src/index.js b/packages/core/src/index.js index 47d6883..55a092b 100644 --- a/packages/core/src/index.js +++ b/packages/core/src/index.js @@ -39,3 +39,4 @@ export { default as Attribute } from './geometry/Attribute'; export { default as Buffer } from './geometry/Buffer'; export { default as Geometry } from './geometry/Geometry'; +export { default as ViewableBuffer } from './geometry/ViewableBuffer'; diff --git a/packages/core/src/shader/ShaderSystem.js b/packages/core/src/shader/ShaderSystem.js index d555d2f..f8324a4 100644 --- a/packages/core/src/shader/ShaderSystem.js +++ b/packages/core/src/shader/ShaderSystem.js @@ -64,6 +64,7 @@ contextChange(gl) { this.gl = gl; + this.reset(); } /** diff --git a/packages/graphics/src/Graphics.js b/packages/graphics/src/Graphics.js index e807104..596a872 100644 --- a/packages/graphics/src/Graphics.js +++ b/packages/graphics/src/Graphics.js @@ -158,6 +158,14 @@ this._transformID = -1; this.batchDirty = -1; + /** + * Renderer plugin for batching + * + * @member {string} + * @default 'batch' + */ + this.pluginName = 'batch'; + // Set default this.tint = 0xFFFFFF; this.blendMode = BLEND_MODES.NORMAL; @@ -239,7 +247,7 @@ * @param {number} [width=0] - width of the line to draw, will update the objects stored style * @param {number} [color=0] - color of the line to draw, will update the objects stored style * @param {number} [alpha=1] - alpha of the line to draw, will update the objects stored style - * @param {number} [alignment=1] - alignment of the line to draw, (0 = inner, 0.5 = middle, 1 = outter) + * @param {number} [alignment=0.5] - alignment of the line to draw, (0 = inner, 0.5 = middle, 1 = outter) * @param {boolean} [native=false] - If true the lines will be draw using LINES instead of TRIANGLE_STRIP * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ @@ -864,7 +872,7 @@ } } - renderer.batch.setObjectRenderer(renderer.plugins.batch); + renderer.batch.setObjectRenderer(renderer.plugins[this.pluginName]); if (this.batches.length) { @@ -877,7 +885,7 @@ batch.worldAlpha = this.worldAlpha * batch.alpha; - renderer.plugins.batch.render(batch); + renderer.plugins[this.pluginName].render(batch); } } } diff --git a/packages/interaction/src/InteractionManager.js b/packages/interaction/src/InteractionManager.js index 0df6545..f4664af 100644 --- a/packages/interaction/src/InteractionManager.js +++ b/packages/interaction/src/InteractionManager.js @@ -682,7 +682,7 @@ * other DOM elements on top of the renderers Canvas element. With this you'll be bale to delegate * another DOM element to receive those events. * - * @param {HTMLCanvasElement} element - the DOM element which will receive mouse and touch events. + * @param {HTMLElement} 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). */ setTargetElement(element, resolution = 1) @@ -875,8 +875,6 @@ } this.setCursorMode(this.cursor); - - // TODO } /** @@ -1467,14 +1465,8 @@ interactionEvent.data.originalEvent = originalEvent; - const interactive = event.pointerType === 'touch' ? this.moveWhenInside : true; + this.processInteractive(interactionEvent, this.renderer._lastObjectRendered, this.processPointerMove, true); - this.processInteractive( - interactionEvent, - this.renderer._lastObjectRendered, - this.processPointerMove, - interactive - ); this.emit('pointermove', interactionEvent); if (event.pointerType === 'touch') this.emit('touchmove', interactionEvent); if (event.pointerType === 'mouse' || event.pointerType === 'pen') this.emit('mousemove', interactionEvent); diff --git a/bundles/pixi.js-legacy/package.json b/bundles/pixi.js-legacy/package.json index 1565ef3..97abd4a 100644 --- a/bundles/pixi.js-legacy/package.json +++ b/bundles/pixi.js-legacy/package.json @@ -40,6 +40,7 @@ "@pixi/canvas-renderer": "^5.0.4", "@pixi/canvas-sprite": "^5.0.4", "@pixi/canvas-sprite-tiling": "^5.0.4", + "@pixi/canvas-text": "^5.0.4", "pixi.js": "^5.0.4" } } diff --git a/bundles/pixi.js-legacy/src/index.js b/bundles/pixi.js-legacy/src/index.js index 956019c..f1598a1 100644 --- a/bundles/pixi.js-legacy/src/index.js +++ b/bundles/pixi.js-legacy/src/index.js @@ -8,6 +8,7 @@ import '@pixi/canvas-sprite-tiling'; import '@pixi/canvas-particles'; import '@pixi/canvas-display'; +import '@pixi/canvas-text'; CanvasRenderer.registerPlugin('accessibility', accessibility.AccessibilityManager); CanvasRenderer.registerPlugin('extract', canvasExtract.CanvasExtract); diff --git a/packages/canvas/canvas-graphics/src/CanvasGraphicsRenderer.js b/packages/canvas/canvas-graphics/src/CanvasGraphicsRenderer.js index b7b7a7e..cabe8e2 100644 --- a/packages/canvas/canvas-graphics/src/CanvasGraphicsRenderer.js +++ b/packages/canvas/canvas-graphics/src/CanvasGraphicsRenderer.js @@ -55,7 +55,7 @@ if (graphics.canvasTintDirty !== graphics.dirty || graphics._prevTint !== graphics.tint) { - // this.updateGraphicsTint(graphics); + this.updateGraphicsTint(graphics); } renderer.setBlendMode(graphics.blendMode); @@ -69,8 +69,8 @@ const fillStyle = data.fillStyle; const lineStyle = data.lineStyle; - const fillColor = fillStyle.color;// data._fillTint; - const lineColor = lineStyle.color;// data._lineTint; + const fillColor = data._fillTint; + const lineColor = data._lineTint; context.lineWidth = lineStyle.width; @@ -298,13 +298,14 @@ const tintR = ((graphics.tint >> 16) & 0xFF) / 255; const tintG = ((graphics.tint >> 8) & 0xFF) / 255; const tintB = (graphics.tint & 0xFF) / 255; + const graphicsData = graphics.geometry.graphicsData; - for (let i = 0; i < graphics.graphicsData.length; ++i) + for (let i = 0; i < graphicsData.length; ++i) { - const data = graphics.graphicsData[i]; + const data = graphicsData[i]; - const fillColor = data.fillColor | 0; - const lineColor = data.lineColor | 0; + const fillColor = data.fillStyle.color | 0; + const lineColor = data.lineStyle.color | 0; // super inline, cos optimization :) data._fillTint = ( diff --git a/packages/canvas/canvas-mesh/src/NineSlicePlane.js b/packages/canvas/canvas-mesh/src/NineSlicePlane.js index d5ce07f..dccfd79 100644 --- a/packages/canvas/canvas-mesh/src/NineSlicePlane.js +++ b/packages/canvas/canvas-mesh/src/NineSlicePlane.js @@ -39,7 +39,7 @@ const transform = this.worldTransform; const res = renderer.resolution; const isTinted = this.tint !== 0xFFFFFF; - const texture = this._texture; + const texture = this.texture; // Work out tinting if (isTinted) diff --git a/packages/canvas/canvas-renderer/src/CanvasTinter.js b/packages/canvas/canvas-renderer/src/CanvasTinter.js index 6ea164b..7abf0f3 100644 --- a/packages/canvas/canvas-renderer/src/CanvasTinter.js +++ b/packages/canvas/canvas-renderer/src/CanvasTinter.js @@ -21,7 +21,7 @@ */ getTintedCanvas: (sprite, color) => { - const texture = sprite._texture; + const texture = sprite.texture; color = CanvasTinter.roundColor(color); diff --git a/packages/canvas/canvas-text/LICENSE b/packages/canvas/canvas-text/LICENSE new file mode 100644 index 0000000..148e3eb --- /dev/null +++ b/packages/canvas/canvas-text/LICENSE @@ -0,0 +1,21 @@ +The MIT License + +Copyright (c) 2013-2018 Mathew Groves, Chad Engler + +Permission is hereby granted, free of charge, to any person obtaining a copy +of this software and associated documentation files (the "Software"), to deal +in the Software without restriction, including without limitation the rights +to use, copy, modify, merge, publish, distribute, sublicense, and/or sell +copies of the Software, and to permit persons to whom the Software is +furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in +all copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, +FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE +AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER +LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, +OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN +THE SOFTWARE. \ No newline at end of file diff --git a/packages/canvas/canvas-text/README.md b/packages/canvas/canvas-text/README.md new file mode 100644 index 0000000..d6d3b4c --- /dev/null +++ b/packages/canvas/canvas-text/README.md @@ -0,0 +1,13 @@ +# @pixi/canvas-text + +## Installation + +```bash +npm install @pixi/canvas-text +``` + +## Usage + +```js +import '@pixi/canvas-text'; +``` \ No newline at end of file diff --git a/packages/canvas/canvas-text/package.json b/packages/canvas/canvas-text/package.json new file mode 100644 index 0000000..7d3ba59 --- /dev/null +++ b/packages/canvas/canvas-text/package.json @@ -0,0 +1,28 @@ +{ + "name": "@pixi/canvas-text", + "version": "5.0.4", + "main": "lib/canvas-text.js", + "module": "lib/canvas-text.es.js", + "bundle": "dist/canvas-text.js", + "bundleNoExports": true, + "description": "Canvas mixin for the text package", + "author": "Dave Moore", + "homepage": "http://pixijs.com/", + "bugs": "https://github.com/pixijs/pixi.js/issues", + "license": "MIT", + "repository": { + "type": "git", + "url": "https://github.com/pixijs/pixi.js.git" + }, + "publishConfig": { + "access": "public" + }, + "files": [ + "lib", + "dist" + ], + "dependencies": { + "@pixi/sprite": "^5.0.4", + "@pixi/text": "^5.0.4" + } +} diff --git a/packages/canvas/canvas-text/src/Text.js b/packages/canvas/canvas-text/src/Text.js new file mode 100644 index 0000000..0e0f9f5 --- /dev/null +++ b/packages/canvas/canvas-text/src/Text.js @@ -0,0 +1,23 @@ +import { Text } from '@pixi/text'; +import { Sprite } from '@pixi/sprite'; + +/** + * Renders the object using the Canvas renderer + * + * @method _renderCanvas + * @memberof PIXI.Text# + * @private + * @param {PIXI.CanvasRenderer} renderer - The renderer + */ +Text.prototype._renderCanvas = function _renderCanvas(renderer) +{ + if (this._autoResolution && this._resolution !== renderer.resolution) + { + this._resolution = renderer.resolution; + this.dirty = true; + } + + this.updateText(true); + + Sprite.prototype._renderCanvas.call(this, renderer); +}; diff --git a/packages/canvas/canvas-text/src/index.js b/packages/canvas/canvas-text/src/index.js new file mode 100644 index 0000000..7bdb7ed --- /dev/null +++ b/packages/canvas/canvas-text/src/index.js @@ -0,0 +1 @@ +import './Text'; diff --git a/packages/core/src/batch/BatchBuffer.js b/packages/core/src/batch/BatchBuffer.js deleted file mode 100644 index b80bc7e..0000000 --- a/packages/core/src/batch/BatchBuffer.js +++ /dev/null @@ -1,41 +0,0 @@ -/** - * Used by the BatchRenderer - * - * @class - * @memberof PIXI - */ -export default class BatchBuffer -{ - /** - * @param {number} size - The size of the buffer in bytes. - */ - constructor(size) - { - this.vertices = new ArrayBuffer(size); - - /** - * View on the vertices as a Float32Array for positions - * - * @member {Float32Array} - */ - this.float32View = new Float32Array(this.vertices); - - /** - * View on the vertices as a Uint32Array for uvs - * - * @member {Float32Array} - */ - this.uint32View = new Uint32Array(this.vertices); - } - - /** - * Destroys the buffer. - * - */ - destroy() - { - this.vertices = null; - this.float32View = null; - this.uint32View = null; - } -} diff --git a/packages/core/src/batch/BatchRenderer.js b/packages/core/src/batch/BatchRenderer.js index e15f6c5..d75a35d 100644 --- a/packages/core/src/batch/BatchRenderer.js +++ b/packages/core/src/batch/BatchRenderer.js @@ -1,11 +1,13 @@ import BatchDrawCall from './BatchDrawCall'; import BaseTexture from '../textures/BaseTexture'; -import State from '../state/State'; import ObjectRenderer from './ObjectRenderer'; +import State from '../state/State'; +import ViewableBuffer from '../geometry/ViewableBuffer'; + import checkMaxIfStatementsInShader from '../shader/utils/checkMaxIfStatementsInShader'; + import { settings } from '@pixi/settings'; import { premultiplyBlendMode, premultiplyTint, nextPow2, log2 } from '@pixi/utils'; -import BatchBuffer from './BatchBuffer'; import { ENV } from '@pixi/constants'; /** @@ -195,7 +197,7 @@ } /** - * Pool of `BatchBuffer` objects that are sorted in + * Pool of `ViewableBuffer` objects that are sorted in * order of increasing size. The flush method uses * the buffer with the least size above the amount * it requires. These are used for passing attributes. @@ -203,7 +205,7 @@ * The first buffer has a size of 8; each subsequent * buffer has double capacity of its previous. * - * @member {PIXI.BatchBuffer} + * @member {PIXI.ViewableBuffer} * @private * @see PIXI.BatchRenderer#getAttributeBuffer */ @@ -312,8 +314,7 @@ } /** - * Renders the content and empties the current batch. - * + * Renders the content _now_ and empties the current batch. */ flush() { @@ -322,52 +323,48 @@ return; } - const gl = this.renderer.gl; - const MAX_TEXTURES = this.MAX_TEXTURES; - const vertSize = this.vertexSize; - - const buffer = this.getAttributeBuffer(this._vertexCount); + const attributeBuffer = this.getAttributeBuffer(this._vertexCount); const indexBuffer = this.getIndexBuffer(this._indexCount); + const gl = this.renderer.gl; - const elements = this._bufferedElements; - const _drawCalls = this._drawCalls; - - const float32View = buffer.float32View; - const uint32View = buffer.uint32View; + const { + _bufferedElements: elements, + _drawCalls: drawCalls, + MAX_TEXTURES, + _packedGeometries: packedGeometries, + vertexSize, + } = this; const touch = this.renderer.textureGC.count; let index = 0; let _indexCount = 0; + let nextTexture; let currentTexture; + let textureCount = 0; + + let currentGroup = drawCalls[0]; let groupCount = 0; - let textureCount = 0; - let currentGroup = _drawCalls[0]; - - let blendMode = -1;// premultiplyBlendMode[elements[0]._texture.baseTexture.premultiplyAlpha ? 0 : ][elements[0].blendMode]; + let blendMode = -1;// blend-mode of previous element/sprite/object! currentGroup.textureCount = 0; currentGroup.start = 0; currentGroup.blend = blendMode; let TICK = ++BaseTexture._globalBatch; - let i; for (i = 0; i < this._bufferSize; ++i) { - // upload the sprite elements... - // they have all ready been calculated so we just need to push them into the buffer. - const sprite = elements[i]; elements[i] = null; - nextTexture = sprite._texture.baseTexture; - const spriteBlendMode = premultiplyBlendMode[nextTexture.premultiplyAlpha ? 1 : 0][sprite.blendMode]; + const spriteBlendMode = premultiplyBlendMode[ + nextTexture.premultiplyAlpha ? 1 : 0][sprite.blendMode]; if (blendMode !== spriteBlendMode) { @@ -393,7 +390,7 @@ currentGroup.size = _indexCount - currentGroup.start; - currentGroup = _drawCalls[groupCount++]; + currentGroup = drawCalls[groupCount++]; currentGroup.textureCount = 0; currentGroup.blend = blendMode; currentGroup.start = _indexCount; @@ -408,63 +405,49 @@ } } - this.packInterleavedGeometry(sprite, float32View, uint32View, indexBuffer, index, _indexCount);// argb, nextTexture._id, float32View, uint32View, indexBuffer, index, _indexCount); + this.packInterleavedGeometry(sprite, attributeBuffer, + indexBuffer, index, _indexCount); // push a graphics.. - index += (sprite.vertexData.length / 2) * vertSize; + index += (sprite.vertexData.length / 2) * vertexSize; _indexCount += sprite.indices.length; } BaseTexture._globalBatch = TICK; - currentGroup.size = _indexCount - currentGroup.start; if (!settings.CAN_UPLOAD_SAME_BUFFER) - { - // this is still needed for IOS performance.. - // it really does not like uploading to the same buffer in a single frame! + { /* Usually on iOS devices, where the browser doesn't + like uploads to the same buffer in a single frame. */ if (this._packedGeometryPoolSize <= this._flushId) { this._packedGeometryPoolSize++; - /* eslint-disable max-len */ - this._packedGeometries[this._flushId] = new (this.geometryClass)(); + packedGeometries[this._flushId] = new (this.geometryClass)(); } - this._packedGeometries[this._flushId]._buffer.update(buffer.vertices, 0); - this._packedGeometries[this._flushId]._indexBuffer.update(indexBuffer, 0); + packedGeometries[this._flushId]._buffer.update(attributeBuffer.rawBinaryData, 0); + packedGeometries[this._flushId]._indexBuffer.update(indexBuffer, 0); - // this.vertexBuffers[this._flushId].update(buffer.vertices, 0); - this.renderer.geometry.bind(this._packedGeometries[this._flushId]); - + this.renderer.geometry.bind(packedGeometries[this._flushId]); this.renderer.geometry.updateBuffers(); - this._flushId++; } else { // lets use the faster option, always use buffer number 0 - this._packedGeometries[this._flushId]._buffer.update(buffer.vertices, 0); - this._packedGeometries[this._flushId]._indexBuffer.update(indexBuffer, 0); - - // if (true)// this.spriteOnly) - // { - // this._packedGeometries[this._flushId].indexBuffer = this.defualtSpriteIndexBuffer; - // this._packedGeometries[this._flushId].buffers[1] = this.defualtSpriteIndexBuffer; - // } + packedGeometries[this._flushId]._buffer.update(attributeBuffer.rawBinaryData, 0); + packedGeometries[this._flushId]._indexBuffer.update(indexBuffer, 0); this.renderer.geometry.updateBuffers(); } - // this.renderer.state.set(this.state); - const textureSystem = this.renderer.texture; const stateSystem = this.renderer.state; - // e.log(groupCount); - // / render the _drawCalls.. + // Upload textures and do the draw calls for (i = 0; i < groupCount; i++) { - const group = _drawCalls[i]; + const group = drawCalls[i]; const groupTextureCount = group.textureCount; for (let j = 0; j < groupTextureCount; j++) @@ -473,13 +456,7 @@ group.textures[j] = null; } - // this.state.blendMode = group.blend; - // this.state.blend = true; - - // this.renderer.state.setState(this.state); - // set the blend mode.. stateSystem.setBlendMode(group.blend); - gl.drawElements(group.type, group.size, gl.UNSIGNED_SHORT, group.start * 2); } @@ -507,7 +484,6 @@ /** * Stops and flushes the current batch. - * */ stop() { @@ -548,7 +524,7 @@ * can hold atleast `size` floats. * * @param {number} size - minimum capacity required - * @return {BatchBuffer} - buffer than can hold atleast `size` floats + * @return {ViewableBuffer} - buffer than can hold atleast `size` floats * @private */ getAttributeBuffer(size) @@ -567,7 +543,7 @@ if (!buffer) { - this._aBuffers[roundedSize] = buffer = new BatchBuffer(roundedSize * this.vertexSize * 4); + this._aBuffers[roundedSize] = buffer = new ViewableBuffer(roundedSize * this.vertexSize * 4); } return buffer; @@ -613,16 +589,19 @@ * present. * * @param {PIXI.Sprite} element - element being rendered - * @param {Float32Array} float32View - float32-view of the attribute buffer - * @param {Uint32Array} uint32View - uint32-view of the attribute buffer + * @param {PIXI.ViewableBuffer} attributeBuffer - attribute buffer. * @param {Uint16Array} indexBuffer - index buffer * @param {number} aIndex - number of floats already in the attribute buffer * @param {number} iIndex - number of indices already in `indexBuffer` */ - packInterleavedGeometry(element, - float32View, uint32View, indexBuffer, aIndex, iIndex) + packInterleavedGeometry(element, attributeBuffer, indexBuffer, aIndex, iIndex) { - const p = aIndex / this.vertexSize; + const { + uint32View, + float32View, + } = attributeBuffer; + + const packedVertices = aIndex / this.vertexSize; const uvs = element.uvs; const indicies = element.indices; const vertexData = element.vertexData; @@ -647,7 +626,7 @@ for (let i = 0; i < indicies.length; i++) { - indexBuffer[iIndex++] = p + indicies[i]; + indexBuffer[iIndex++] = packedVertices + indicies[i]; } } } diff --git a/packages/core/src/batch/ObjectRenderer.js b/packages/core/src/batch/ObjectRenderer.js index 0c851a9..1776347 100644 --- a/packages/core/src/batch/ObjectRenderer.js +++ b/packages/core/src/batch/ObjectRenderer.js @@ -1,35 +1,29 @@ -import System from '../System'; - /** - * Base for a common object renderer that can be used as a system renderer plugin. + * Base for a common object renderer that can be used as a + * system renderer plugin. * * @class * @extends PIXI.System * @memberof PIXI */ -export default class ObjectRenderer extends System +export default class ObjectRenderer { /** - * Starts the renderer and sets the shader - * + * @param {PIXI.Renderer} renderer - The renderer this manager works for. */ - start() + constructor(renderer) { - // set the shader.. + /** + * The renderer this manager works for. + * + * @member {PIXI.Renderer} + */ + this.renderer = renderer; } /** - * Stops the renderer - * - */ - stop() - { - this.flush(); - } - - /** - * Stub method for rendering content and emptying the current batch. - * + * Stub method that should be used to empty the current + * batch by rendering objects now. */ flush() { @@ -37,7 +31,37 @@ } /** - * Renders an object + * Generic destruction method that frees all resources. This + * should be called by subclasses. + */ + destroy() + { + this.renderer = null; + } + + /** + * Stub method that initializes any state required before + * rendering starts. It is different from the `prerender` + * signal, which occurs every frame, in that it is called + * whenever an object requests _this_ renderer specifically. + */ + start() + { + // set the shader.. + } + + /** + * Stops the renderer. It should free up any state and + * become dormant. + */ + stop() + { + this.flush(); + } + + /** + * Keeps the object to render. It doesn't have to be + * rendered immediately. * * @param {PIXI.DisplayObject} object - The object to render. */ diff --git a/packages/core/src/context/ContextSystem.js b/packages/core/src/context/ContextSystem.js index 1b90abb..77a03ad 100644 --- a/packages/core/src/context/ContextSystem.js +++ b/packages/core/src/context/ContextSystem.js @@ -65,6 +65,8 @@ contextChange(gl) { this.gl = gl; + this.renderer.gl = gl; + this.renderer.CONTEXT_UID = CONTEXT_UID++; // restore a context if it was previously lost if (gl.isContextLost() && gl.getExtension('WEBGL_lose_context')) diff --git a/packages/core/src/geometry/ViewableBuffer.js b/packages/core/src/geometry/ViewableBuffer.js new file mode 100644 index 0000000..fb4b52f --- /dev/null +++ b/packages/core/src/geometry/ViewableBuffer.js @@ -0,0 +1,159 @@ +/** + * Flexible wrapper around `ArrayBuffer` that also provides + * typed array views on demand. + * + * @class + * @memberof PIXI + */ +export default class ViewableBuffer +{ + /** + * @param {number} size - The size of the buffer in bytes. + */ + constructor(size) + { + /** + * Underlying `ArrayBuffer` that holds all the data + * and is of capacity `size`. + * + * @member {ArrayBuffer} + */ + this.rawBinaryData = new ArrayBuffer(size); + + /** + * View on the raw binary data as a `Uint32Array`. + * + * @member {Uint32Array} + */ + this.uint32View = new Uint32Array(this.rawBinaryData); + + /** + * View on the raw binary data as a `Float32Array`. + * + * @member {Float32Array} + */ + this.float32View = new Float32Array(this.rawBinaryData); + } + + /** + * View on the raw binary data as a `Int8Array`. + * + * @member {Int8Array} + */ + get int8View() + { + if (!this._int8View) + { + this._int8View = new Int8Array(this.rawBinaryData); + } + + return this._int8View; + } + + /** + * View on the raw binary data as a `Uint8Array`. + * + * @member {Uint8Array} + */ + get uint8View() + { + if (!this._uint8View) + { + this._uint8View = new Uint8Array(this.rawBinaryData); + } + + return this._uint8View; + } + + /** + * View on the raw binary data as a `Int16Array`. + * + * @member {Int16Array} + */ + get int16View() + { + if (!this._int16View) + { + this._int16View = new Int16Array(this.rawBinaryData); + } + + return this._int16View; + } + + /** + * View on the raw binary data as a `Uint16Array`. + * + * @member {Uint16Array} + */ + get uint16View() + { + if (!this._uint16View) + { + this._uint16View = new Uint16Array(this.rawBinaryData); + } + + return this._uint16View; + } + + /** + * View on the raw binary data as a `Int32Array`. + * + * @member {Int32Array} + */ + get int32View() + { + if (!this._int32View) + { + this._int32View = new Int32Array(this.rawBinaryData); + } + + return this._int32View; + } + + /** + * Returns the view of the given type. + * + * @param {string} type - One of `int8`, `uint8`, `int16`, + * `uint16`, `int32`, `uint32`, and `float32`. + * @return typed array of given type + */ + view(type) + { + return this[`${type}View`]; + } + + /** + * Destroys all buffer references. Do not use after calling + * this. + */ + destroy() + { + this.rawBinaryData = null; + this._int8View = null; + this._uint8View = null; + this._int16View = null; + this._uint16View = null; + this._int32View = null; + this.uint32View = null; + this.float32View = null; + } + + static sizeOf(type) + { + switch (type) + { + case 'int8': + case 'uint8': + return 1; + case 'int16': + case 'uint16': + return 2; + case 'int32': + case 'uint32': + case 'float32': + return 4; + default: + throw new Error(`${type} isn't a valid view type`); + } + } +} diff --git a/packages/core/src/index.js b/packages/core/src/index.js index 47d6883..55a092b 100644 --- a/packages/core/src/index.js +++ b/packages/core/src/index.js @@ -39,3 +39,4 @@ export { default as Attribute } from './geometry/Attribute'; export { default as Buffer } from './geometry/Buffer'; export { default as Geometry } from './geometry/Geometry'; +export { default as ViewableBuffer } from './geometry/ViewableBuffer'; diff --git a/packages/core/src/shader/ShaderSystem.js b/packages/core/src/shader/ShaderSystem.js index d555d2f..f8324a4 100644 --- a/packages/core/src/shader/ShaderSystem.js +++ b/packages/core/src/shader/ShaderSystem.js @@ -64,6 +64,7 @@ contextChange(gl) { this.gl = gl; + this.reset(); } /** diff --git a/packages/graphics/src/Graphics.js b/packages/graphics/src/Graphics.js index e807104..596a872 100644 --- a/packages/graphics/src/Graphics.js +++ b/packages/graphics/src/Graphics.js @@ -158,6 +158,14 @@ this._transformID = -1; this.batchDirty = -1; + /** + * Renderer plugin for batching + * + * @member {string} + * @default 'batch' + */ + this.pluginName = 'batch'; + // Set default this.tint = 0xFFFFFF; this.blendMode = BLEND_MODES.NORMAL; @@ -239,7 +247,7 @@ * @param {number} [width=0] - width of the line to draw, will update the objects stored style * @param {number} [color=0] - color of the line to draw, will update the objects stored style * @param {number} [alpha=1] - alpha of the line to draw, will update the objects stored style - * @param {number} [alignment=1] - alignment of the line to draw, (0 = inner, 0.5 = middle, 1 = outter) + * @param {number} [alignment=0.5] - alignment of the line to draw, (0 = inner, 0.5 = middle, 1 = outter) * @param {boolean} [native=false] - If true the lines will be draw using LINES instead of TRIANGLE_STRIP * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ @@ -864,7 +872,7 @@ } } - renderer.batch.setObjectRenderer(renderer.plugins.batch); + renderer.batch.setObjectRenderer(renderer.plugins[this.pluginName]); if (this.batches.length) { @@ -877,7 +885,7 @@ batch.worldAlpha = this.worldAlpha * batch.alpha; - renderer.plugins.batch.render(batch); + renderer.plugins[this.pluginName].render(batch); } } } diff --git a/packages/interaction/src/InteractionManager.js b/packages/interaction/src/InteractionManager.js index 0df6545..f4664af 100644 --- a/packages/interaction/src/InteractionManager.js +++ b/packages/interaction/src/InteractionManager.js @@ -682,7 +682,7 @@ * other DOM elements on top of the renderers Canvas element. With this you'll be bale to delegate * another DOM element to receive those events. * - * @param {HTMLCanvasElement} element - the DOM element which will receive mouse and touch events. + * @param {HTMLElement} 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). */ setTargetElement(element, resolution = 1) @@ -875,8 +875,6 @@ } this.setCursorMode(this.cursor); - - // TODO } /** @@ -1467,14 +1465,8 @@ interactionEvent.data.originalEvent = originalEvent; - const interactive = event.pointerType === 'touch' ? this.moveWhenInside : true; + this.processInteractive(interactionEvent, this.renderer._lastObjectRendered, this.processPointerMove, true); - this.processInteractive( - interactionEvent, - this.renderer._lastObjectRendered, - this.processPointerMove, - interactive - ); this.emit('pointermove', interactionEvent); if (event.pointerType === 'touch') this.emit('touchmove', interactionEvent); if (event.pointerType === 'mouse' || event.pointerType === 'pen') this.emit('mousemove', interactionEvent); diff --git a/packages/prepare/src/Prepare.js b/packages/prepare/src/Prepare.js index b7f2819..ba6ed92 100644 --- a/packages/prepare/src/Prepare.js +++ b/packages/prepare/src/Prepare.js @@ -45,7 +45,7 @@ // reuploads the texture without need for preparing it again if (!item._glTextures[renderer.CONTEXT_UID]) { - renderer.texture.updateTexture(item); + renderer.texture.bind(item); } return true; diff --git a/bundles/pixi.js-legacy/package.json b/bundles/pixi.js-legacy/package.json index 1565ef3..97abd4a 100644 --- a/bundles/pixi.js-legacy/package.json +++ b/bundles/pixi.js-legacy/package.json @@ -40,6 +40,7 @@ "@pixi/canvas-renderer": "^5.0.4", "@pixi/canvas-sprite": "^5.0.4", "@pixi/canvas-sprite-tiling": "^5.0.4", + "@pixi/canvas-text": "^5.0.4", "pixi.js": "^5.0.4" } } diff --git a/bundles/pixi.js-legacy/src/index.js b/bundles/pixi.js-legacy/src/index.js index 956019c..f1598a1 100644 --- a/bundles/pixi.js-legacy/src/index.js +++ b/bundles/pixi.js-legacy/src/index.js @@ -8,6 +8,7 @@ import '@pixi/canvas-sprite-tiling'; import '@pixi/canvas-particles'; import '@pixi/canvas-display'; +import '@pixi/canvas-text'; CanvasRenderer.registerPlugin('accessibility', accessibility.AccessibilityManager); CanvasRenderer.registerPlugin('extract', canvasExtract.CanvasExtract); diff --git a/packages/canvas/canvas-graphics/src/CanvasGraphicsRenderer.js b/packages/canvas/canvas-graphics/src/CanvasGraphicsRenderer.js index b7b7a7e..cabe8e2 100644 --- a/packages/canvas/canvas-graphics/src/CanvasGraphicsRenderer.js +++ b/packages/canvas/canvas-graphics/src/CanvasGraphicsRenderer.js @@ -55,7 +55,7 @@ if (graphics.canvasTintDirty !== graphics.dirty || graphics._prevTint !== graphics.tint) { - // this.updateGraphicsTint(graphics); + this.updateGraphicsTint(graphics); } renderer.setBlendMode(graphics.blendMode); @@ -69,8 +69,8 @@ const fillStyle = data.fillStyle; const lineStyle = data.lineStyle; - const fillColor = fillStyle.color;// data._fillTint; - const lineColor = lineStyle.color;// data._lineTint; + const fillColor = data._fillTint; + const lineColor = data._lineTint; context.lineWidth = lineStyle.width; @@ -298,13 +298,14 @@ const tintR = ((graphics.tint >> 16) & 0xFF) / 255; const tintG = ((graphics.tint >> 8) & 0xFF) / 255; const tintB = (graphics.tint & 0xFF) / 255; + const graphicsData = graphics.geometry.graphicsData; - for (let i = 0; i < graphics.graphicsData.length; ++i) + for (let i = 0; i < graphicsData.length; ++i) { - const data = graphics.graphicsData[i]; + const data = graphicsData[i]; - const fillColor = data.fillColor | 0; - const lineColor = data.lineColor | 0; + const fillColor = data.fillStyle.color | 0; + const lineColor = data.lineStyle.color | 0; // super inline, cos optimization :) data._fillTint = ( diff --git a/packages/canvas/canvas-mesh/src/NineSlicePlane.js b/packages/canvas/canvas-mesh/src/NineSlicePlane.js index d5ce07f..dccfd79 100644 --- a/packages/canvas/canvas-mesh/src/NineSlicePlane.js +++ b/packages/canvas/canvas-mesh/src/NineSlicePlane.js @@ -39,7 +39,7 @@ const transform = this.worldTransform; const res = renderer.resolution; const isTinted = this.tint !== 0xFFFFFF; - const texture = this._texture; + const texture = this.texture; // Work out tinting if (isTinted) diff --git a/packages/canvas/canvas-renderer/src/CanvasTinter.js b/packages/canvas/canvas-renderer/src/CanvasTinter.js index 6ea164b..7abf0f3 100644 --- a/packages/canvas/canvas-renderer/src/CanvasTinter.js +++ b/packages/canvas/canvas-renderer/src/CanvasTinter.js @@ -21,7 +21,7 @@ */ getTintedCanvas: (sprite, color) => { - const texture = sprite._texture; + const texture = sprite.texture; color = CanvasTinter.roundColor(color); diff --git a/packages/canvas/canvas-text/LICENSE b/packages/canvas/canvas-text/LICENSE new file mode 100644 index 0000000..148e3eb --- /dev/null +++ b/packages/canvas/canvas-text/LICENSE @@ -0,0 +1,21 @@ +The MIT License + +Copyright (c) 2013-2018 Mathew Groves, Chad Engler + +Permission is hereby granted, free of charge, to any person obtaining a copy +of this software and associated documentation files (the "Software"), to deal +in the Software without restriction, including without limitation the rights +to use, copy, modify, merge, publish, distribute, sublicense, and/or sell +copies of the Software, and to permit persons to whom the Software is +furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in +all copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, +FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE +AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER +LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, +OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN +THE SOFTWARE. \ No newline at end of file diff --git a/packages/canvas/canvas-text/README.md b/packages/canvas/canvas-text/README.md new file mode 100644 index 0000000..d6d3b4c --- /dev/null +++ b/packages/canvas/canvas-text/README.md @@ -0,0 +1,13 @@ +# @pixi/canvas-text + +## Installation + +```bash +npm install @pixi/canvas-text +``` + +## Usage + +```js +import '@pixi/canvas-text'; +``` \ No newline at end of file diff --git a/packages/canvas/canvas-text/package.json b/packages/canvas/canvas-text/package.json new file mode 100644 index 0000000..7d3ba59 --- /dev/null +++ b/packages/canvas/canvas-text/package.json @@ -0,0 +1,28 @@ +{ + "name": "@pixi/canvas-text", + "version": "5.0.4", + "main": "lib/canvas-text.js", + "module": "lib/canvas-text.es.js", + "bundle": "dist/canvas-text.js", + "bundleNoExports": true, + "description": "Canvas mixin for the text package", + "author": "Dave Moore", + "homepage": "http://pixijs.com/", + "bugs": "https://github.com/pixijs/pixi.js/issues", + "license": "MIT", + "repository": { + "type": "git", + "url": "https://github.com/pixijs/pixi.js.git" + }, + "publishConfig": { + "access": "public" + }, + "files": [ + "lib", + "dist" + ], + "dependencies": { + "@pixi/sprite": "^5.0.4", + "@pixi/text": "^5.0.4" + } +} diff --git a/packages/canvas/canvas-text/src/Text.js b/packages/canvas/canvas-text/src/Text.js new file mode 100644 index 0000000..0e0f9f5 --- /dev/null +++ b/packages/canvas/canvas-text/src/Text.js @@ -0,0 +1,23 @@ +import { Text } from '@pixi/text'; +import { Sprite } from '@pixi/sprite'; + +/** + * Renders the object using the Canvas renderer + * + * @method _renderCanvas + * @memberof PIXI.Text# + * @private + * @param {PIXI.CanvasRenderer} renderer - The renderer + */ +Text.prototype._renderCanvas = function _renderCanvas(renderer) +{ + if (this._autoResolution && this._resolution !== renderer.resolution) + { + this._resolution = renderer.resolution; + this.dirty = true; + } + + this.updateText(true); + + Sprite.prototype._renderCanvas.call(this, renderer); +}; diff --git a/packages/canvas/canvas-text/src/index.js b/packages/canvas/canvas-text/src/index.js new file mode 100644 index 0000000..7bdb7ed --- /dev/null +++ b/packages/canvas/canvas-text/src/index.js @@ -0,0 +1 @@ +import './Text'; diff --git a/packages/core/src/batch/BatchBuffer.js b/packages/core/src/batch/BatchBuffer.js deleted file mode 100644 index b80bc7e..0000000 --- a/packages/core/src/batch/BatchBuffer.js +++ /dev/null @@ -1,41 +0,0 @@ -/** - * Used by the BatchRenderer - * - * @class - * @memberof PIXI - */ -export default class BatchBuffer -{ - /** - * @param {number} size - The size of the buffer in bytes. - */ - constructor(size) - { - this.vertices = new ArrayBuffer(size); - - /** - * View on the vertices as a Float32Array for positions - * - * @member {Float32Array} - */ - this.float32View = new Float32Array(this.vertices); - - /** - * View on the vertices as a Uint32Array for uvs - * - * @member {Float32Array} - */ - this.uint32View = new Uint32Array(this.vertices); - } - - /** - * Destroys the buffer. - * - */ - destroy() - { - this.vertices = null; - this.float32View = null; - this.uint32View = null; - } -} diff --git a/packages/core/src/batch/BatchRenderer.js b/packages/core/src/batch/BatchRenderer.js index e15f6c5..d75a35d 100644 --- a/packages/core/src/batch/BatchRenderer.js +++ b/packages/core/src/batch/BatchRenderer.js @@ -1,11 +1,13 @@ import BatchDrawCall from './BatchDrawCall'; import BaseTexture from '../textures/BaseTexture'; -import State from '../state/State'; import ObjectRenderer from './ObjectRenderer'; +import State from '../state/State'; +import ViewableBuffer from '../geometry/ViewableBuffer'; + import checkMaxIfStatementsInShader from '../shader/utils/checkMaxIfStatementsInShader'; + import { settings } from '@pixi/settings'; import { premultiplyBlendMode, premultiplyTint, nextPow2, log2 } from '@pixi/utils'; -import BatchBuffer from './BatchBuffer'; import { ENV } from '@pixi/constants'; /** @@ -195,7 +197,7 @@ } /** - * Pool of `BatchBuffer` objects that are sorted in + * Pool of `ViewableBuffer` objects that are sorted in * order of increasing size. The flush method uses * the buffer with the least size above the amount * it requires. These are used for passing attributes. @@ -203,7 +205,7 @@ * The first buffer has a size of 8; each subsequent * buffer has double capacity of its previous. * - * @member {PIXI.BatchBuffer} + * @member {PIXI.ViewableBuffer} * @private * @see PIXI.BatchRenderer#getAttributeBuffer */ @@ -312,8 +314,7 @@ } /** - * Renders the content and empties the current batch. - * + * Renders the content _now_ and empties the current batch. */ flush() { @@ -322,52 +323,48 @@ return; } - const gl = this.renderer.gl; - const MAX_TEXTURES = this.MAX_TEXTURES; - const vertSize = this.vertexSize; - - const buffer = this.getAttributeBuffer(this._vertexCount); + const attributeBuffer = this.getAttributeBuffer(this._vertexCount); const indexBuffer = this.getIndexBuffer(this._indexCount); + const gl = this.renderer.gl; - const elements = this._bufferedElements; - const _drawCalls = this._drawCalls; - - const float32View = buffer.float32View; - const uint32View = buffer.uint32View; + const { + _bufferedElements: elements, + _drawCalls: drawCalls, + MAX_TEXTURES, + _packedGeometries: packedGeometries, + vertexSize, + } = this; const touch = this.renderer.textureGC.count; let index = 0; let _indexCount = 0; + let nextTexture; let currentTexture; + let textureCount = 0; + + let currentGroup = drawCalls[0]; let groupCount = 0; - let textureCount = 0; - let currentGroup = _drawCalls[0]; - - let blendMode = -1;// premultiplyBlendMode[elements[0]._texture.baseTexture.premultiplyAlpha ? 0 : ][elements[0].blendMode]; + let blendMode = -1;// blend-mode of previous element/sprite/object! currentGroup.textureCount = 0; currentGroup.start = 0; currentGroup.blend = blendMode; let TICK = ++BaseTexture._globalBatch; - let i; for (i = 0; i < this._bufferSize; ++i) { - // upload the sprite elements... - // they have all ready been calculated so we just need to push them into the buffer. - const sprite = elements[i]; elements[i] = null; - nextTexture = sprite._texture.baseTexture; - const spriteBlendMode = premultiplyBlendMode[nextTexture.premultiplyAlpha ? 1 : 0][sprite.blendMode]; + const spriteBlendMode = premultiplyBlendMode[ + nextTexture.premultiplyAlpha ? 1 : 0][sprite.blendMode]; if (blendMode !== spriteBlendMode) { @@ -393,7 +390,7 @@ currentGroup.size = _indexCount - currentGroup.start; - currentGroup = _drawCalls[groupCount++]; + currentGroup = drawCalls[groupCount++]; currentGroup.textureCount = 0; currentGroup.blend = blendMode; currentGroup.start = _indexCount; @@ -408,63 +405,49 @@ } } - this.packInterleavedGeometry(sprite, float32View, uint32View, indexBuffer, index, _indexCount);// argb, nextTexture._id, float32View, uint32View, indexBuffer, index, _indexCount); + this.packInterleavedGeometry(sprite, attributeBuffer, + indexBuffer, index, _indexCount); // push a graphics.. - index += (sprite.vertexData.length / 2) * vertSize; + index += (sprite.vertexData.length / 2) * vertexSize; _indexCount += sprite.indices.length; } BaseTexture._globalBatch = TICK; - currentGroup.size = _indexCount - currentGroup.start; if (!settings.CAN_UPLOAD_SAME_BUFFER) - { - // this is still needed for IOS performance.. - // it really does not like uploading to the same buffer in a single frame! + { /* Usually on iOS devices, where the browser doesn't + like uploads to the same buffer in a single frame. */ if (this._packedGeometryPoolSize <= this._flushId) { this._packedGeometryPoolSize++; - /* eslint-disable max-len */ - this._packedGeometries[this._flushId] = new (this.geometryClass)(); + packedGeometries[this._flushId] = new (this.geometryClass)(); } - this._packedGeometries[this._flushId]._buffer.update(buffer.vertices, 0); - this._packedGeometries[this._flushId]._indexBuffer.update(indexBuffer, 0); + packedGeometries[this._flushId]._buffer.update(attributeBuffer.rawBinaryData, 0); + packedGeometries[this._flushId]._indexBuffer.update(indexBuffer, 0); - // this.vertexBuffers[this._flushId].update(buffer.vertices, 0); - this.renderer.geometry.bind(this._packedGeometries[this._flushId]); - + this.renderer.geometry.bind(packedGeometries[this._flushId]); this.renderer.geometry.updateBuffers(); - this._flushId++; } else { // lets use the faster option, always use buffer number 0 - this._packedGeometries[this._flushId]._buffer.update(buffer.vertices, 0); - this._packedGeometries[this._flushId]._indexBuffer.update(indexBuffer, 0); - - // if (true)// this.spriteOnly) - // { - // this._packedGeometries[this._flushId].indexBuffer = this.defualtSpriteIndexBuffer; - // this._packedGeometries[this._flushId].buffers[1] = this.defualtSpriteIndexBuffer; - // } + packedGeometries[this._flushId]._buffer.update(attributeBuffer.rawBinaryData, 0); + packedGeometries[this._flushId]._indexBuffer.update(indexBuffer, 0); this.renderer.geometry.updateBuffers(); } - // this.renderer.state.set(this.state); - const textureSystem = this.renderer.texture; const stateSystem = this.renderer.state; - // e.log(groupCount); - // / render the _drawCalls.. + // Upload textures and do the draw calls for (i = 0; i < groupCount; i++) { - const group = _drawCalls[i]; + const group = drawCalls[i]; const groupTextureCount = group.textureCount; for (let j = 0; j < groupTextureCount; j++) @@ -473,13 +456,7 @@ group.textures[j] = null; } - // this.state.blendMode = group.blend; - // this.state.blend = true; - - // this.renderer.state.setState(this.state); - // set the blend mode.. stateSystem.setBlendMode(group.blend); - gl.drawElements(group.type, group.size, gl.UNSIGNED_SHORT, group.start * 2); } @@ -507,7 +484,6 @@ /** * Stops and flushes the current batch. - * */ stop() { @@ -548,7 +524,7 @@ * can hold atleast `size` floats. * * @param {number} size - minimum capacity required - * @return {BatchBuffer} - buffer than can hold atleast `size` floats + * @return {ViewableBuffer} - buffer than can hold atleast `size` floats * @private */ getAttributeBuffer(size) @@ -567,7 +543,7 @@ if (!buffer) { - this._aBuffers[roundedSize] = buffer = new BatchBuffer(roundedSize * this.vertexSize * 4); + this._aBuffers[roundedSize] = buffer = new ViewableBuffer(roundedSize * this.vertexSize * 4); } return buffer; @@ -613,16 +589,19 @@ * present. * * @param {PIXI.Sprite} element - element being rendered - * @param {Float32Array} float32View - float32-view of the attribute buffer - * @param {Uint32Array} uint32View - uint32-view of the attribute buffer + * @param {PIXI.ViewableBuffer} attributeBuffer - attribute buffer. * @param {Uint16Array} indexBuffer - index buffer * @param {number} aIndex - number of floats already in the attribute buffer * @param {number} iIndex - number of indices already in `indexBuffer` */ - packInterleavedGeometry(element, - float32View, uint32View, indexBuffer, aIndex, iIndex) + packInterleavedGeometry(element, attributeBuffer, indexBuffer, aIndex, iIndex) { - const p = aIndex / this.vertexSize; + const { + uint32View, + float32View, + } = attributeBuffer; + + const packedVertices = aIndex / this.vertexSize; const uvs = element.uvs; const indicies = element.indices; const vertexData = element.vertexData; @@ -647,7 +626,7 @@ for (let i = 0; i < indicies.length; i++) { - indexBuffer[iIndex++] = p + indicies[i]; + indexBuffer[iIndex++] = packedVertices + indicies[i]; } } } diff --git a/packages/core/src/batch/ObjectRenderer.js b/packages/core/src/batch/ObjectRenderer.js index 0c851a9..1776347 100644 --- a/packages/core/src/batch/ObjectRenderer.js +++ b/packages/core/src/batch/ObjectRenderer.js @@ -1,35 +1,29 @@ -import System from '../System'; - /** - * Base for a common object renderer that can be used as a system renderer plugin. + * Base for a common object renderer that can be used as a + * system renderer plugin. * * @class * @extends PIXI.System * @memberof PIXI */ -export default class ObjectRenderer extends System +export default class ObjectRenderer { /** - * Starts the renderer and sets the shader - * + * @param {PIXI.Renderer} renderer - The renderer this manager works for. */ - start() + constructor(renderer) { - // set the shader.. + /** + * The renderer this manager works for. + * + * @member {PIXI.Renderer} + */ + this.renderer = renderer; } /** - * Stops the renderer - * - */ - stop() - { - this.flush(); - } - - /** - * Stub method for rendering content and emptying the current batch. - * + * Stub method that should be used to empty the current + * batch by rendering objects now. */ flush() { @@ -37,7 +31,37 @@ } /** - * Renders an object + * Generic destruction method that frees all resources. This + * should be called by subclasses. + */ + destroy() + { + this.renderer = null; + } + + /** + * Stub method that initializes any state required before + * rendering starts. It is different from the `prerender` + * signal, which occurs every frame, in that it is called + * whenever an object requests _this_ renderer specifically. + */ + start() + { + // set the shader.. + } + + /** + * Stops the renderer. It should free up any state and + * become dormant. + */ + stop() + { + this.flush(); + } + + /** + * Keeps the object to render. It doesn't have to be + * rendered immediately. * * @param {PIXI.DisplayObject} object - The object to render. */ diff --git a/packages/core/src/context/ContextSystem.js b/packages/core/src/context/ContextSystem.js index 1b90abb..77a03ad 100644 --- a/packages/core/src/context/ContextSystem.js +++ b/packages/core/src/context/ContextSystem.js @@ -65,6 +65,8 @@ contextChange(gl) { this.gl = gl; + this.renderer.gl = gl; + this.renderer.CONTEXT_UID = CONTEXT_UID++; // restore a context if it was previously lost if (gl.isContextLost() && gl.getExtension('WEBGL_lose_context')) diff --git a/packages/core/src/geometry/ViewableBuffer.js b/packages/core/src/geometry/ViewableBuffer.js new file mode 100644 index 0000000..fb4b52f --- /dev/null +++ b/packages/core/src/geometry/ViewableBuffer.js @@ -0,0 +1,159 @@ +/** + * Flexible wrapper around `ArrayBuffer` that also provides + * typed array views on demand. + * + * @class + * @memberof PIXI + */ +export default class ViewableBuffer +{ + /** + * @param {number} size - The size of the buffer in bytes. + */ + constructor(size) + { + /** + * Underlying `ArrayBuffer` that holds all the data + * and is of capacity `size`. + * + * @member {ArrayBuffer} + */ + this.rawBinaryData = new ArrayBuffer(size); + + /** + * View on the raw binary data as a `Uint32Array`. + * + * @member {Uint32Array} + */ + this.uint32View = new Uint32Array(this.rawBinaryData); + + /** + * View on the raw binary data as a `Float32Array`. + * + * @member {Float32Array} + */ + this.float32View = new Float32Array(this.rawBinaryData); + } + + /** + * View on the raw binary data as a `Int8Array`. + * + * @member {Int8Array} + */ + get int8View() + { + if (!this._int8View) + { + this._int8View = new Int8Array(this.rawBinaryData); + } + + return this._int8View; + } + + /** + * View on the raw binary data as a `Uint8Array`. + * + * @member {Uint8Array} + */ + get uint8View() + { + if (!this._uint8View) + { + this._uint8View = new Uint8Array(this.rawBinaryData); + } + + return this._uint8View; + } + + /** + * View on the raw binary data as a `Int16Array`. + * + * @member {Int16Array} + */ + get int16View() + { + if (!this._int16View) + { + this._int16View = new Int16Array(this.rawBinaryData); + } + + return this._int16View; + } + + /** + * View on the raw binary data as a `Uint16Array`. + * + * @member {Uint16Array} + */ + get uint16View() + { + if (!this._uint16View) + { + this._uint16View = new Uint16Array(this.rawBinaryData); + } + + return this._uint16View; + } + + /** + * View on the raw binary data as a `Int32Array`. + * + * @member {Int32Array} + */ + get int32View() + { + if (!this._int32View) + { + this._int32View = new Int32Array(this.rawBinaryData); + } + + return this._int32View; + } + + /** + * Returns the view of the given type. + * + * @param {string} type - One of `int8`, `uint8`, `int16`, + * `uint16`, `int32`, `uint32`, and `float32`. + * @return typed array of given type + */ + view(type) + { + return this[`${type}View`]; + } + + /** + * Destroys all buffer references. Do not use after calling + * this. + */ + destroy() + { + this.rawBinaryData = null; + this._int8View = null; + this._uint8View = null; + this._int16View = null; + this._uint16View = null; + this._int32View = null; + this.uint32View = null; + this.float32View = null; + } + + static sizeOf(type) + { + switch (type) + { + case 'int8': + case 'uint8': + return 1; + case 'int16': + case 'uint16': + return 2; + case 'int32': + case 'uint32': + case 'float32': + return 4; + default: + throw new Error(`${type} isn't a valid view type`); + } + } +} diff --git a/packages/core/src/index.js b/packages/core/src/index.js index 47d6883..55a092b 100644 --- a/packages/core/src/index.js +++ b/packages/core/src/index.js @@ -39,3 +39,4 @@ export { default as Attribute } from './geometry/Attribute'; export { default as Buffer } from './geometry/Buffer'; export { default as Geometry } from './geometry/Geometry'; +export { default as ViewableBuffer } from './geometry/ViewableBuffer'; diff --git a/packages/core/src/shader/ShaderSystem.js b/packages/core/src/shader/ShaderSystem.js index d555d2f..f8324a4 100644 --- a/packages/core/src/shader/ShaderSystem.js +++ b/packages/core/src/shader/ShaderSystem.js @@ -64,6 +64,7 @@ contextChange(gl) { this.gl = gl; + this.reset(); } /** diff --git a/packages/graphics/src/Graphics.js b/packages/graphics/src/Graphics.js index e807104..596a872 100644 --- a/packages/graphics/src/Graphics.js +++ b/packages/graphics/src/Graphics.js @@ -158,6 +158,14 @@ this._transformID = -1; this.batchDirty = -1; + /** + * Renderer plugin for batching + * + * @member {string} + * @default 'batch' + */ + this.pluginName = 'batch'; + // Set default this.tint = 0xFFFFFF; this.blendMode = BLEND_MODES.NORMAL; @@ -239,7 +247,7 @@ * @param {number} [width=0] - width of the line to draw, will update the objects stored style * @param {number} [color=0] - color of the line to draw, will update the objects stored style * @param {number} [alpha=1] - alpha of the line to draw, will update the objects stored style - * @param {number} [alignment=1] - alignment of the line to draw, (0 = inner, 0.5 = middle, 1 = outter) + * @param {number} [alignment=0.5] - alignment of the line to draw, (0 = inner, 0.5 = middle, 1 = outter) * @param {boolean} [native=false] - If true the lines will be draw using LINES instead of TRIANGLE_STRIP * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ @@ -864,7 +872,7 @@ } } - renderer.batch.setObjectRenderer(renderer.plugins.batch); + renderer.batch.setObjectRenderer(renderer.plugins[this.pluginName]); if (this.batches.length) { @@ -877,7 +885,7 @@ batch.worldAlpha = this.worldAlpha * batch.alpha; - renderer.plugins.batch.render(batch); + renderer.plugins[this.pluginName].render(batch); } } } diff --git a/packages/interaction/src/InteractionManager.js b/packages/interaction/src/InteractionManager.js index 0df6545..f4664af 100644 --- a/packages/interaction/src/InteractionManager.js +++ b/packages/interaction/src/InteractionManager.js @@ -682,7 +682,7 @@ * other DOM elements on top of the renderers Canvas element. With this you'll be bale to delegate * another DOM element to receive those events. * - * @param {HTMLCanvasElement} element - the DOM element which will receive mouse and touch events. + * @param {HTMLElement} 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). */ setTargetElement(element, resolution = 1) @@ -875,8 +875,6 @@ } this.setCursorMode(this.cursor); - - // TODO } /** @@ -1467,14 +1465,8 @@ interactionEvent.data.originalEvent = originalEvent; - const interactive = event.pointerType === 'touch' ? this.moveWhenInside : true; + this.processInteractive(interactionEvent, this.renderer._lastObjectRendered, this.processPointerMove, true); - this.processInteractive( - interactionEvent, - this.renderer._lastObjectRendered, - this.processPointerMove, - interactive - ); this.emit('pointermove', interactionEvent); if (event.pointerType === 'touch') this.emit('touchmove', interactionEvent); if (event.pointerType === 'mouse' || event.pointerType === 'pen') this.emit('mousemove', interactionEvent); diff --git a/packages/prepare/src/Prepare.js b/packages/prepare/src/Prepare.js index b7f2819..ba6ed92 100644 --- a/packages/prepare/src/Prepare.js +++ b/packages/prepare/src/Prepare.js @@ -45,7 +45,7 @@ // reuploads the texture without need for preparing it again if (!item._glTextures[renderer.CONTEXT_UID]) { - renderer.texture.updateTexture(item); + renderer.texture.bind(item); } return true; diff --git a/packages/text/src/Text.js b/packages/text/src/Text.js index e702d74..b1625d0 100644 --- a/packages/text/src/Text.js +++ b/packages/text/src/Text.js @@ -330,9 +330,10 @@ /** * Renders the object using the WebGL renderer * + * @private * @param {PIXI.Renderer} renderer - The renderer */ - render(renderer) + _render(renderer) { if (this._autoResolution && this._resolution !== renderer.resolution) { @@ -342,26 +343,7 @@ this.updateText(true); - super.render(renderer); - } - - /** - * Renders the object using the Canvas renderer - * - * @private - * @param {PIXI.CanvasRenderer} renderer - The renderer - */ - _renderCanvas(renderer) - { - if (this._autoResolution && this._resolution !== renderer.resolution) - { - this._resolution = renderer.resolution; - this.dirty = true; - } - - this.updateText(true); - - super._renderCanvas(renderer); + super._render(renderer); } /** diff --git a/bundles/pixi.js-legacy/package.json b/bundles/pixi.js-legacy/package.json index 1565ef3..97abd4a 100644 --- a/bundles/pixi.js-legacy/package.json +++ b/bundles/pixi.js-legacy/package.json @@ -40,6 +40,7 @@ "@pixi/canvas-renderer": "^5.0.4", "@pixi/canvas-sprite": "^5.0.4", "@pixi/canvas-sprite-tiling": "^5.0.4", + "@pixi/canvas-text": "^5.0.4", "pixi.js": "^5.0.4" } } diff --git a/bundles/pixi.js-legacy/src/index.js b/bundles/pixi.js-legacy/src/index.js index 956019c..f1598a1 100644 --- a/bundles/pixi.js-legacy/src/index.js +++ b/bundles/pixi.js-legacy/src/index.js @@ -8,6 +8,7 @@ import '@pixi/canvas-sprite-tiling'; import '@pixi/canvas-particles'; import '@pixi/canvas-display'; +import '@pixi/canvas-text'; CanvasRenderer.registerPlugin('accessibility', accessibility.AccessibilityManager); CanvasRenderer.registerPlugin('extract', canvasExtract.CanvasExtract); diff --git a/packages/canvas/canvas-graphics/src/CanvasGraphicsRenderer.js b/packages/canvas/canvas-graphics/src/CanvasGraphicsRenderer.js index b7b7a7e..cabe8e2 100644 --- a/packages/canvas/canvas-graphics/src/CanvasGraphicsRenderer.js +++ b/packages/canvas/canvas-graphics/src/CanvasGraphicsRenderer.js @@ -55,7 +55,7 @@ if (graphics.canvasTintDirty !== graphics.dirty || graphics._prevTint !== graphics.tint) { - // this.updateGraphicsTint(graphics); + this.updateGraphicsTint(graphics); } renderer.setBlendMode(graphics.blendMode); @@ -69,8 +69,8 @@ const fillStyle = data.fillStyle; const lineStyle = data.lineStyle; - const fillColor = fillStyle.color;// data._fillTint; - const lineColor = lineStyle.color;// data._lineTint; + const fillColor = data._fillTint; + const lineColor = data._lineTint; context.lineWidth = lineStyle.width; @@ -298,13 +298,14 @@ const tintR = ((graphics.tint >> 16) & 0xFF) / 255; const tintG = ((graphics.tint >> 8) & 0xFF) / 255; const tintB = (graphics.tint & 0xFF) / 255; + const graphicsData = graphics.geometry.graphicsData; - for (let i = 0; i < graphics.graphicsData.length; ++i) + for (let i = 0; i < graphicsData.length; ++i) { - const data = graphics.graphicsData[i]; + const data = graphicsData[i]; - const fillColor = data.fillColor | 0; - const lineColor = data.lineColor | 0; + const fillColor = data.fillStyle.color | 0; + const lineColor = data.lineStyle.color | 0; // super inline, cos optimization :) data._fillTint = ( diff --git a/packages/canvas/canvas-mesh/src/NineSlicePlane.js b/packages/canvas/canvas-mesh/src/NineSlicePlane.js index d5ce07f..dccfd79 100644 --- a/packages/canvas/canvas-mesh/src/NineSlicePlane.js +++ b/packages/canvas/canvas-mesh/src/NineSlicePlane.js @@ -39,7 +39,7 @@ const transform = this.worldTransform; const res = renderer.resolution; const isTinted = this.tint !== 0xFFFFFF; - const texture = this._texture; + const texture = this.texture; // Work out tinting if (isTinted) diff --git a/packages/canvas/canvas-renderer/src/CanvasTinter.js b/packages/canvas/canvas-renderer/src/CanvasTinter.js index 6ea164b..7abf0f3 100644 --- a/packages/canvas/canvas-renderer/src/CanvasTinter.js +++ b/packages/canvas/canvas-renderer/src/CanvasTinter.js @@ -21,7 +21,7 @@ */ getTintedCanvas: (sprite, color) => { - const texture = sprite._texture; + const texture = sprite.texture; color = CanvasTinter.roundColor(color); diff --git a/packages/canvas/canvas-text/LICENSE b/packages/canvas/canvas-text/LICENSE new file mode 100644 index 0000000..148e3eb --- /dev/null +++ b/packages/canvas/canvas-text/LICENSE @@ -0,0 +1,21 @@ +The MIT License + +Copyright (c) 2013-2018 Mathew Groves, Chad Engler + +Permission is hereby granted, free of charge, to any person obtaining a copy +of this software and associated documentation files (the "Software"), to deal +in the Software without restriction, including without limitation the rights +to use, copy, modify, merge, publish, distribute, sublicense, and/or sell +copies of the Software, and to permit persons to whom the Software is +furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in +all copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, +FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE +AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER +LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, +OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN +THE SOFTWARE. \ No newline at end of file diff --git a/packages/canvas/canvas-text/README.md b/packages/canvas/canvas-text/README.md new file mode 100644 index 0000000..d6d3b4c --- /dev/null +++ b/packages/canvas/canvas-text/README.md @@ -0,0 +1,13 @@ +# @pixi/canvas-text + +## Installation + +```bash +npm install @pixi/canvas-text +``` + +## Usage + +```js +import '@pixi/canvas-text'; +``` \ No newline at end of file diff --git a/packages/canvas/canvas-text/package.json b/packages/canvas/canvas-text/package.json new file mode 100644 index 0000000..7d3ba59 --- /dev/null +++ b/packages/canvas/canvas-text/package.json @@ -0,0 +1,28 @@ +{ + "name": "@pixi/canvas-text", + "version": "5.0.4", + "main": "lib/canvas-text.js", + "module": "lib/canvas-text.es.js", + "bundle": "dist/canvas-text.js", + "bundleNoExports": true, + "description": "Canvas mixin for the text package", + "author": "Dave Moore", + "homepage": "http://pixijs.com/", + "bugs": "https://github.com/pixijs/pixi.js/issues", + "license": "MIT", + "repository": { + "type": "git", + "url": "https://github.com/pixijs/pixi.js.git" + }, + "publishConfig": { + "access": "public" + }, + "files": [ + "lib", + "dist" + ], + "dependencies": { + "@pixi/sprite": "^5.0.4", + "@pixi/text": "^5.0.4" + } +} diff --git a/packages/canvas/canvas-text/src/Text.js b/packages/canvas/canvas-text/src/Text.js new file mode 100644 index 0000000..0e0f9f5 --- /dev/null +++ b/packages/canvas/canvas-text/src/Text.js @@ -0,0 +1,23 @@ +import { Text } from '@pixi/text'; +import { Sprite } from '@pixi/sprite'; + +/** + * Renders the object using the Canvas renderer + * + * @method _renderCanvas + * @memberof PIXI.Text# + * @private + * @param {PIXI.CanvasRenderer} renderer - The renderer + */ +Text.prototype._renderCanvas = function _renderCanvas(renderer) +{ + if (this._autoResolution && this._resolution !== renderer.resolution) + { + this._resolution = renderer.resolution; + this.dirty = true; + } + + this.updateText(true); + + Sprite.prototype._renderCanvas.call(this, renderer); +}; diff --git a/packages/canvas/canvas-text/src/index.js b/packages/canvas/canvas-text/src/index.js new file mode 100644 index 0000000..7bdb7ed --- /dev/null +++ b/packages/canvas/canvas-text/src/index.js @@ -0,0 +1 @@ +import './Text'; diff --git a/packages/core/src/batch/BatchBuffer.js b/packages/core/src/batch/BatchBuffer.js deleted file mode 100644 index b80bc7e..0000000 --- a/packages/core/src/batch/BatchBuffer.js +++ /dev/null @@ -1,41 +0,0 @@ -/** - * Used by the BatchRenderer - * - * @class - * @memberof PIXI - */ -export default class BatchBuffer -{ - /** - * @param {number} size - The size of the buffer in bytes. - */ - constructor(size) - { - this.vertices = new ArrayBuffer(size); - - /** - * View on the vertices as a Float32Array for positions - * - * @member {Float32Array} - */ - this.float32View = new Float32Array(this.vertices); - - /** - * View on the vertices as a Uint32Array for uvs - * - * @member {Float32Array} - */ - this.uint32View = new Uint32Array(this.vertices); - } - - /** - * Destroys the buffer. - * - */ - destroy() - { - this.vertices = null; - this.float32View = null; - this.uint32View = null; - } -} diff --git a/packages/core/src/batch/BatchRenderer.js b/packages/core/src/batch/BatchRenderer.js index e15f6c5..d75a35d 100644 --- a/packages/core/src/batch/BatchRenderer.js +++ b/packages/core/src/batch/BatchRenderer.js @@ -1,11 +1,13 @@ import BatchDrawCall from './BatchDrawCall'; import BaseTexture from '../textures/BaseTexture'; -import State from '../state/State'; import ObjectRenderer from './ObjectRenderer'; +import State from '../state/State'; +import ViewableBuffer from '../geometry/ViewableBuffer'; + import checkMaxIfStatementsInShader from '../shader/utils/checkMaxIfStatementsInShader'; + import { settings } from '@pixi/settings'; import { premultiplyBlendMode, premultiplyTint, nextPow2, log2 } from '@pixi/utils'; -import BatchBuffer from './BatchBuffer'; import { ENV } from '@pixi/constants'; /** @@ -195,7 +197,7 @@ } /** - * Pool of `BatchBuffer` objects that are sorted in + * Pool of `ViewableBuffer` objects that are sorted in * order of increasing size. The flush method uses * the buffer with the least size above the amount * it requires. These are used for passing attributes. @@ -203,7 +205,7 @@ * The first buffer has a size of 8; each subsequent * buffer has double capacity of its previous. * - * @member {PIXI.BatchBuffer} + * @member {PIXI.ViewableBuffer} * @private * @see PIXI.BatchRenderer#getAttributeBuffer */ @@ -312,8 +314,7 @@ } /** - * Renders the content and empties the current batch. - * + * Renders the content _now_ and empties the current batch. */ flush() { @@ -322,52 +323,48 @@ return; } - const gl = this.renderer.gl; - const MAX_TEXTURES = this.MAX_TEXTURES; - const vertSize = this.vertexSize; - - const buffer = this.getAttributeBuffer(this._vertexCount); + const attributeBuffer = this.getAttributeBuffer(this._vertexCount); const indexBuffer = this.getIndexBuffer(this._indexCount); + const gl = this.renderer.gl; - const elements = this._bufferedElements; - const _drawCalls = this._drawCalls; - - const float32View = buffer.float32View; - const uint32View = buffer.uint32View; + const { + _bufferedElements: elements, + _drawCalls: drawCalls, + MAX_TEXTURES, + _packedGeometries: packedGeometries, + vertexSize, + } = this; const touch = this.renderer.textureGC.count; let index = 0; let _indexCount = 0; + let nextTexture; let currentTexture; + let textureCount = 0; + + let currentGroup = drawCalls[0]; let groupCount = 0; - let textureCount = 0; - let currentGroup = _drawCalls[0]; - - let blendMode = -1;// premultiplyBlendMode[elements[0]._texture.baseTexture.premultiplyAlpha ? 0 : ][elements[0].blendMode]; + let blendMode = -1;// blend-mode of previous element/sprite/object! currentGroup.textureCount = 0; currentGroup.start = 0; currentGroup.blend = blendMode; let TICK = ++BaseTexture._globalBatch; - let i; for (i = 0; i < this._bufferSize; ++i) { - // upload the sprite elements... - // they have all ready been calculated so we just need to push them into the buffer. - const sprite = elements[i]; elements[i] = null; - nextTexture = sprite._texture.baseTexture; - const spriteBlendMode = premultiplyBlendMode[nextTexture.premultiplyAlpha ? 1 : 0][sprite.blendMode]; + const spriteBlendMode = premultiplyBlendMode[ + nextTexture.premultiplyAlpha ? 1 : 0][sprite.blendMode]; if (blendMode !== spriteBlendMode) { @@ -393,7 +390,7 @@ currentGroup.size = _indexCount - currentGroup.start; - currentGroup = _drawCalls[groupCount++]; + currentGroup = drawCalls[groupCount++]; currentGroup.textureCount = 0; currentGroup.blend = blendMode; currentGroup.start = _indexCount; @@ -408,63 +405,49 @@ } } - this.packInterleavedGeometry(sprite, float32View, uint32View, indexBuffer, index, _indexCount);// argb, nextTexture._id, float32View, uint32View, indexBuffer, index, _indexCount); + this.packInterleavedGeometry(sprite, attributeBuffer, + indexBuffer, index, _indexCount); // push a graphics.. - index += (sprite.vertexData.length / 2) * vertSize; + index += (sprite.vertexData.length / 2) * vertexSize; _indexCount += sprite.indices.length; } BaseTexture._globalBatch = TICK; - currentGroup.size = _indexCount - currentGroup.start; if (!settings.CAN_UPLOAD_SAME_BUFFER) - { - // this is still needed for IOS performance.. - // it really does not like uploading to the same buffer in a single frame! + { /* Usually on iOS devices, where the browser doesn't + like uploads to the same buffer in a single frame. */ if (this._packedGeometryPoolSize <= this._flushId) { this._packedGeometryPoolSize++; - /* eslint-disable max-len */ - this._packedGeometries[this._flushId] = new (this.geometryClass)(); + packedGeometries[this._flushId] = new (this.geometryClass)(); } - this._packedGeometries[this._flushId]._buffer.update(buffer.vertices, 0); - this._packedGeometries[this._flushId]._indexBuffer.update(indexBuffer, 0); + packedGeometries[this._flushId]._buffer.update(attributeBuffer.rawBinaryData, 0); + packedGeometries[this._flushId]._indexBuffer.update(indexBuffer, 0); - // this.vertexBuffers[this._flushId].update(buffer.vertices, 0); - this.renderer.geometry.bind(this._packedGeometries[this._flushId]); - + this.renderer.geometry.bind(packedGeometries[this._flushId]); this.renderer.geometry.updateBuffers(); - this._flushId++; } else { // lets use the faster option, always use buffer number 0 - this._packedGeometries[this._flushId]._buffer.update(buffer.vertices, 0); - this._packedGeometries[this._flushId]._indexBuffer.update(indexBuffer, 0); - - // if (true)// this.spriteOnly) - // { - // this._packedGeometries[this._flushId].indexBuffer = this.defualtSpriteIndexBuffer; - // this._packedGeometries[this._flushId].buffers[1] = this.defualtSpriteIndexBuffer; - // } + packedGeometries[this._flushId]._buffer.update(attributeBuffer.rawBinaryData, 0); + packedGeometries[this._flushId]._indexBuffer.update(indexBuffer, 0); this.renderer.geometry.updateBuffers(); } - // this.renderer.state.set(this.state); - const textureSystem = this.renderer.texture; const stateSystem = this.renderer.state; - // e.log(groupCount); - // / render the _drawCalls.. + // Upload textures and do the draw calls for (i = 0; i < groupCount; i++) { - const group = _drawCalls[i]; + const group = drawCalls[i]; const groupTextureCount = group.textureCount; for (let j = 0; j < groupTextureCount; j++) @@ -473,13 +456,7 @@ group.textures[j] = null; } - // this.state.blendMode = group.blend; - // this.state.blend = true; - - // this.renderer.state.setState(this.state); - // set the blend mode.. stateSystem.setBlendMode(group.blend); - gl.drawElements(group.type, group.size, gl.UNSIGNED_SHORT, group.start * 2); } @@ -507,7 +484,6 @@ /** * Stops and flushes the current batch. - * */ stop() { @@ -548,7 +524,7 @@ * can hold atleast `size` floats. * * @param {number} size - minimum capacity required - * @return {BatchBuffer} - buffer than can hold atleast `size` floats + * @return {ViewableBuffer} - buffer than can hold atleast `size` floats * @private */ getAttributeBuffer(size) @@ -567,7 +543,7 @@ if (!buffer) { - this._aBuffers[roundedSize] = buffer = new BatchBuffer(roundedSize * this.vertexSize * 4); + this._aBuffers[roundedSize] = buffer = new ViewableBuffer(roundedSize * this.vertexSize * 4); } return buffer; @@ -613,16 +589,19 @@ * present. * * @param {PIXI.Sprite} element - element being rendered - * @param {Float32Array} float32View - float32-view of the attribute buffer - * @param {Uint32Array} uint32View - uint32-view of the attribute buffer + * @param {PIXI.ViewableBuffer} attributeBuffer - attribute buffer. * @param {Uint16Array} indexBuffer - index buffer * @param {number} aIndex - number of floats already in the attribute buffer * @param {number} iIndex - number of indices already in `indexBuffer` */ - packInterleavedGeometry(element, - float32View, uint32View, indexBuffer, aIndex, iIndex) + packInterleavedGeometry(element, attributeBuffer, indexBuffer, aIndex, iIndex) { - const p = aIndex / this.vertexSize; + const { + uint32View, + float32View, + } = attributeBuffer; + + const packedVertices = aIndex / this.vertexSize; const uvs = element.uvs; const indicies = element.indices; const vertexData = element.vertexData; @@ -647,7 +626,7 @@ for (let i = 0; i < indicies.length; i++) { - indexBuffer[iIndex++] = p + indicies[i]; + indexBuffer[iIndex++] = packedVertices + indicies[i]; } } } diff --git a/packages/core/src/batch/ObjectRenderer.js b/packages/core/src/batch/ObjectRenderer.js index 0c851a9..1776347 100644 --- a/packages/core/src/batch/ObjectRenderer.js +++ b/packages/core/src/batch/ObjectRenderer.js @@ -1,35 +1,29 @@ -import System from '../System'; - /** - * Base for a common object renderer that can be used as a system renderer plugin. + * Base for a common object renderer that can be used as a + * system renderer plugin. * * @class * @extends PIXI.System * @memberof PIXI */ -export default class ObjectRenderer extends System +export default class ObjectRenderer { /** - * Starts the renderer and sets the shader - * + * @param {PIXI.Renderer} renderer - The renderer this manager works for. */ - start() + constructor(renderer) { - // set the shader.. + /** + * The renderer this manager works for. + * + * @member {PIXI.Renderer} + */ + this.renderer = renderer; } /** - * Stops the renderer - * - */ - stop() - { - this.flush(); - } - - /** - * Stub method for rendering content and emptying the current batch. - * + * Stub method that should be used to empty the current + * batch by rendering objects now. */ flush() { @@ -37,7 +31,37 @@ } /** - * Renders an object + * Generic destruction method that frees all resources. This + * should be called by subclasses. + */ + destroy() + { + this.renderer = null; + } + + /** + * Stub method that initializes any state required before + * rendering starts. It is different from the `prerender` + * signal, which occurs every frame, in that it is called + * whenever an object requests _this_ renderer specifically. + */ + start() + { + // set the shader.. + } + + /** + * Stops the renderer. It should free up any state and + * become dormant. + */ + stop() + { + this.flush(); + } + + /** + * Keeps the object to render. It doesn't have to be + * rendered immediately. * * @param {PIXI.DisplayObject} object - The object to render. */ diff --git a/packages/core/src/context/ContextSystem.js b/packages/core/src/context/ContextSystem.js index 1b90abb..77a03ad 100644 --- a/packages/core/src/context/ContextSystem.js +++ b/packages/core/src/context/ContextSystem.js @@ -65,6 +65,8 @@ contextChange(gl) { this.gl = gl; + this.renderer.gl = gl; + this.renderer.CONTEXT_UID = CONTEXT_UID++; // restore a context if it was previously lost if (gl.isContextLost() && gl.getExtension('WEBGL_lose_context')) diff --git a/packages/core/src/geometry/ViewableBuffer.js b/packages/core/src/geometry/ViewableBuffer.js new file mode 100644 index 0000000..fb4b52f --- /dev/null +++ b/packages/core/src/geometry/ViewableBuffer.js @@ -0,0 +1,159 @@ +/** + * Flexible wrapper around `ArrayBuffer` that also provides + * typed array views on demand. + * + * @class + * @memberof PIXI + */ +export default class ViewableBuffer +{ + /** + * @param {number} size - The size of the buffer in bytes. + */ + constructor(size) + { + /** + * Underlying `ArrayBuffer` that holds all the data + * and is of capacity `size`. + * + * @member {ArrayBuffer} + */ + this.rawBinaryData = new ArrayBuffer(size); + + /** + * View on the raw binary data as a `Uint32Array`. + * + * @member {Uint32Array} + */ + this.uint32View = new Uint32Array(this.rawBinaryData); + + /** + * View on the raw binary data as a `Float32Array`. + * + * @member {Float32Array} + */ + this.float32View = new Float32Array(this.rawBinaryData); + } + + /** + * View on the raw binary data as a `Int8Array`. + * + * @member {Int8Array} + */ + get int8View() + { + if (!this._int8View) + { + this._int8View = new Int8Array(this.rawBinaryData); + } + + return this._int8View; + } + + /** + * View on the raw binary data as a `Uint8Array`. + * + * @member {Uint8Array} + */ + get uint8View() + { + if (!this._uint8View) + { + this._uint8View = new Uint8Array(this.rawBinaryData); + } + + return this._uint8View; + } + + /** + * View on the raw binary data as a `Int16Array`. + * + * @member {Int16Array} + */ + get int16View() + { + if (!this._int16View) + { + this._int16View = new Int16Array(this.rawBinaryData); + } + + return this._int16View; + } + + /** + * View on the raw binary data as a `Uint16Array`. + * + * @member {Uint16Array} + */ + get uint16View() + { + if (!this._uint16View) + { + this._uint16View = new Uint16Array(this.rawBinaryData); + } + + return this._uint16View; + } + + /** + * View on the raw binary data as a `Int32Array`. + * + * @member {Int32Array} + */ + get int32View() + { + if (!this._int32View) + { + this._int32View = new Int32Array(this.rawBinaryData); + } + + return this._int32View; + } + + /** + * Returns the view of the given type. + * + * @param {string} type - One of `int8`, `uint8`, `int16`, + * `uint16`, `int32`, `uint32`, and `float32`. + * @return typed array of given type + */ + view(type) + { + return this[`${type}View`]; + } + + /** + * Destroys all buffer references. Do not use after calling + * this. + */ + destroy() + { + this.rawBinaryData = null; + this._int8View = null; + this._uint8View = null; + this._int16View = null; + this._uint16View = null; + this._int32View = null; + this.uint32View = null; + this.float32View = null; + } + + static sizeOf(type) + { + switch (type) + { + case 'int8': + case 'uint8': + return 1; + case 'int16': + case 'uint16': + return 2; + case 'int32': + case 'uint32': + case 'float32': + return 4; + default: + throw new Error(`${type} isn't a valid view type`); + } + } +} diff --git a/packages/core/src/index.js b/packages/core/src/index.js index 47d6883..55a092b 100644 --- a/packages/core/src/index.js +++ b/packages/core/src/index.js @@ -39,3 +39,4 @@ export { default as Attribute } from './geometry/Attribute'; export { default as Buffer } from './geometry/Buffer'; export { default as Geometry } from './geometry/Geometry'; +export { default as ViewableBuffer } from './geometry/ViewableBuffer'; diff --git a/packages/core/src/shader/ShaderSystem.js b/packages/core/src/shader/ShaderSystem.js index d555d2f..f8324a4 100644 --- a/packages/core/src/shader/ShaderSystem.js +++ b/packages/core/src/shader/ShaderSystem.js @@ -64,6 +64,7 @@ contextChange(gl) { this.gl = gl; + this.reset(); } /** diff --git a/packages/graphics/src/Graphics.js b/packages/graphics/src/Graphics.js index e807104..596a872 100644 --- a/packages/graphics/src/Graphics.js +++ b/packages/graphics/src/Graphics.js @@ -158,6 +158,14 @@ this._transformID = -1; this.batchDirty = -1; + /** + * Renderer plugin for batching + * + * @member {string} + * @default 'batch' + */ + this.pluginName = 'batch'; + // Set default this.tint = 0xFFFFFF; this.blendMode = BLEND_MODES.NORMAL; @@ -239,7 +247,7 @@ * @param {number} [width=0] - width of the line to draw, will update the objects stored style * @param {number} [color=0] - color of the line to draw, will update the objects stored style * @param {number} [alpha=1] - alpha of the line to draw, will update the objects stored style - * @param {number} [alignment=1] - alignment of the line to draw, (0 = inner, 0.5 = middle, 1 = outter) + * @param {number} [alignment=0.5] - alignment of the line to draw, (0 = inner, 0.5 = middle, 1 = outter) * @param {boolean} [native=false] - If true the lines will be draw using LINES instead of TRIANGLE_STRIP * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ @@ -864,7 +872,7 @@ } } - renderer.batch.setObjectRenderer(renderer.plugins.batch); + renderer.batch.setObjectRenderer(renderer.plugins[this.pluginName]); if (this.batches.length) { @@ -877,7 +885,7 @@ batch.worldAlpha = this.worldAlpha * batch.alpha; - renderer.plugins.batch.render(batch); + renderer.plugins[this.pluginName].render(batch); } } } diff --git a/packages/interaction/src/InteractionManager.js b/packages/interaction/src/InteractionManager.js index 0df6545..f4664af 100644 --- a/packages/interaction/src/InteractionManager.js +++ b/packages/interaction/src/InteractionManager.js @@ -682,7 +682,7 @@ * other DOM elements on top of the renderers Canvas element. With this you'll be bale to delegate * another DOM element to receive those events. * - * @param {HTMLCanvasElement} element - the DOM element which will receive mouse and touch events. + * @param {HTMLElement} 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). */ setTargetElement(element, resolution = 1) @@ -875,8 +875,6 @@ } this.setCursorMode(this.cursor); - - // TODO } /** @@ -1467,14 +1465,8 @@ interactionEvent.data.originalEvent = originalEvent; - const interactive = event.pointerType === 'touch' ? this.moveWhenInside : true; + this.processInteractive(interactionEvent, this.renderer._lastObjectRendered, this.processPointerMove, true); - this.processInteractive( - interactionEvent, - this.renderer._lastObjectRendered, - this.processPointerMove, - interactive - ); this.emit('pointermove', interactionEvent); if (event.pointerType === 'touch') this.emit('touchmove', interactionEvent); if (event.pointerType === 'mouse' || event.pointerType === 'pen') this.emit('mousemove', interactionEvent); diff --git a/packages/prepare/src/Prepare.js b/packages/prepare/src/Prepare.js index b7f2819..ba6ed92 100644 --- a/packages/prepare/src/Prepare.js +++ b/packages/prepare/src/Prepare.js @@ -45,7 +45,7 @@ // reuploads the texture without need for preparing it again if (!item._glTextures[renderer.CONTEXT_UID]) { - renderer.texture.updateTexture(item); + renderer.texture.bind(item); } return true; diff --git a/packages/text/src/Text.js b/packages/text/src/Text.js index e702d74..b1625d0 100644 --- a/packages/text/src/Text.js +++ b/packages/text/src/Text.js @@ -330,9 +330,10 @@ /** * Renders the object using the WebGL renderer * + * @private * @param {PIXI.Renderer} renderer - The renderer */ - render(renderer) + _render(renderer) { if (this._autoResolution && this._resolution !== renderer.resolution) { @@ -342,26 +343,7 @@ this.updateText(true); - super.render(renderer); - } - - /** - * Renders the object using the Canvas renderer - * - * @private - * @param {PIXI.CanvasRenderer} renderer - The renderer - */ - _renderCanvas(renderer) - { - if (this._autoResolution && this._resolution !== renderer.resolution) - { - this._resolution = renderer.resolution; - this.dirty = true; - } - - this.updateText(true); - - super._renderCanvas(renderer); + super._render(renderer); } /** diff --git a/packages/utils/src/browser/hello.js b/packages/utils/src/browser/hello.js index cf1a105..081efd3 100644 --- a/packages/utils/src/browser/hello.js +++ b/packages/utils/src/browser/hello.js @@ -15,7 +15,7 @@ /** * Logs out the version and renderer information for this running instance of PIXI. * If you don't want to see this message you can run `PIXI.utils.skipHello()` before - * creating your renderer. Keep in mind that doing that will forever makes you a jerk face. + * creating your renderer. Keep in mind that doing that will forever make you a jerk face. * * @static * @function sayHello diff --git a/bundles/pixi.js-legacy/package.json b/bundles/pixi.js-legacy/package.json index 1565ef3..97abd4a 100644 --- a/bundles/pixi.js-legacy/package.json +++ b/bundles/pixi.js-legacy/package.json @@ -40,6 +40,7 @@ "@pixi/canvas-renderer": "^5.0.4", "@pixi/canvas-sprite": "^5.0.4", "@pixi/canvas-sprite-tiling": "^5.0.4", + "@pixi/canvas-text": "^5.0.4", "pixi.js": "^5.0.4" } } diff --git a/bundles/pixi.js-legacy/src/index.js b/bundles/pixi.js-legacy/src/index.js index 956019c..f1598a1 100644 --- a/bundles/pixi.js-legacy/src/index.js +++ b/bundles/pixi.js-legacy/src/index.js @@ -8,6 +8,7 @@ import '@pixi/canvas-sprite-tiling'; import '@pixi/canvas-particles'; import '@pixi/canvas-display'; +import '@pixi/canvas-text'; CanvasRenderer.registerPlugin('accessibility', accessibility.AccessibilityManager); CanvasRenderer.registerPlugin('extract', canvasExtract.CanvasExtract); diff --git a/packages/canvas/canvas-graphics/src/CanvasGraphicsRenderer.js b/packages/canvas/canvas-graphics/src/CanvasGraphicsRenderer.js index b7b7a7e..cabe8e2 100644 --- a/packages/canvas/canvas-graphics/src/CanvasGraphicsRenderer.js +++ b/packages/canvas/canvas-graphics/src/CanvasGraphicsRenderer.js @@ -55,7 +55,7 @@ if (graphics.canvasTintDirty !== graphics.dirty || graphics._prevTint !== graphics.tint) { - // this.updateGraphicsTint(graphics); + this.updateGraphicsTint(graphics); } renderer.setBlendMode(graphics.blendMode); @@ -69,8 +69,8 @@ const fillStyle = data.fillStyle; const lineStyle = data.lineStyle; - const fillColor = fillStyle.color;// data._fillTint; - const lineColor = lineStyle.color;// data._lineTint; + const fillColor = data._fillTint; + const lineColor = data._lineTint; context.lineWidth = lineStyle.width; @@ -298,13 +298,14 @@ const tintR = ((graphics.tint >> 16) & 0xFF) / 255; const tintG = ((graphics.tint >> 8) & 0xFF) / 255; const tintB = (graphics.tint & 0xFF) / 255; + const graphicsData = graphics.geometry.graphicsData; - for (let i = 0; i < graphics.graphicsData.length; ++i) + for (let i = 0; i < graphicsData.length; ++i) { - const data = graphics.graphicsData[i]; + const data = graphicsData[i]; - const fillColor = data.fillColor | 0; - const lineColor = data.lineColor | 0; + const fillColor = data.fillStyle.color | 0; + const lineColor = data.lineStyle.color | 0; // super inline, cos optimization :) data._fillTint = ( diff --git a/packages/canvas/canvas-mesh/src/NineSlicePlane.js b/packages/canvas/canvas-mesh/src/NineSlicePlane.js index d5ce07f..dccfd79 100644 --- a/packages/canvas/canvas-mesh/src/NineSlicePlane.js +++ b/packages/canvas/canvas-mesh/src/NineSlicePlane.js @@ -39,7 +39,7 @@ const transform = this.worldTransform; const res = renderer.resolution; const isTinted = this.tint !== 0xFFFFFF; - const texture = this._texture; + const texture = this.texture; // Work out tinting if (isTinted) diff --git a/packages/canvas/canvas-renderer/src/CanvasTinter.js b/packages/canvas/canvas-renderer/src/CanvasTinter.js index 6ea164b..7abf0f3 100644 --- a/packages/canvas/canvas-renderer/src/CanvasTinter.js +++ b/packages/canvas/canvas-renderer/src/CanvasTinter.js @@ -21,7 +21,7 @@ */ getTintedCanvas: (sprite, color) => { - const texture = sprite._texture; + const texture = sprite.texture; color = CanvasTinter.roundColor(color); diff --git a/packages/canvas/canvas-text/LICENSE b/packages/canvas/canvas-text/LICENSE new file mode 100644 index 0000000..148e3eb --- /dev/null +++ b/packages/canvas/canvas-text/LICENSE @@ -0,0 +1,21 @@ +The MIT License + +Copyright (c) 2013-2018 Mathew Groves, Chad Engler + +Permission is hereby granted, free of charge, to any person obtaining a copy +of this software and associated documentation files (the "Software"), to deal +in the Software without restriction, including without limitation the rights +to use, copy, modify, merge, publish, distribute, sublicense, and/or sell +copies of the Software, and to permit persons to whom the Software is +furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in +all copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, +FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE +AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER +LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, +OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN +THE SOFTWARE. \ No newline at end of file diff --git a/packages/canvas/canvas-text/README.md b/packages/canvas/canvas-text/README.md new file mode 100644 index 0000000..d6d3b4c --- /dev/null +++ b/packages/canvas/canvas-text/README.md @@ -0,0 +1,13 @@ +# @pixi/canvas-text + +## Installation + +```bash +npm install @pixi/canvas-text +``` + +## Usage + +```js +import '@pixi/canvas-text'; +``` \ No newline at end of file diff --git a/packages/canvas/canvas-text/package.json b/packages/canvas/canvas-text/package.json new file mode 100644 index 0000000..7d3ba59 --- /dev/null +++ b/packages/canvas/canvas-text/package.json @@ -0,0 +1,28 @@ +{ + "name": "@pixi/canvas-text", + "version": "5.0.4", + "main": "lib/canvas-text.js", + "module": "lib/canvas-text.es.js", + "bundle": "dist/canvas-text.js", + "bundleNoExports": true, + "description": "Canvas mixin for the text package", + "author": "Dave Moore", + "homepage": "http://pixijs.com/", + "bugs": "https://github.com/pixijs/pixi.js/issues", + "license": "MIT", + "repository": { + "type": "git", + "url": "https://github.com/pixijs/pixi.js.git" + }, + "publishConfig": { + "access": "public" + }, + "files": [ + "lib", + "dist" + ], + "dependencies": { + "@pixi/sprite": "^5.0.4", + "@pixi/text": "^5.0.4" + } +} diff --git a/packages/canvas/canvas-text/src/Text.js b/packages/canvas/canvas-text/src/Text.js new file mode 100644 index 0000000..0e0f9f5 --- /dev/null +++ b/packages/canvas/canvas-text/src/Text.js @@ -0,0 +1,23 @@ +import { Text } from '@pixi/text'; +import { Sprite } from '@pixi/sprite'; + +/** + * Renders the object using the Canvas renderer + * + * @method _renderCanvas + * @memberof PIXI.Text# + * @private + * @param {PIXI.CanvasRenderer} renderer - The renderer + */ +Text.prototype._renderCanvas = function _renderCanvas(renderer) +{ + if (this._autoResolution && this._resolution !== renderer.resolution) + { + this._resolution = renderer.resolution; + this.dirty = true; + } + + this.updateText(true); + + Sprite.prototype._renderCanvas.call(this, renderer); +}; diff --git a/packages/canvas/canvas-text/src/index.js b/packages/canvas/canvas-text/src/index.js new file mode 100644 index 0000000..7bdb7ed --- /dev/null +++ b/packages/canvas/canvas-text/src/index.js @@ -0,0 +1 @@ +import './Text'; diff --git a/packages/core/src/batch/BatchBuffer.js b/packages/core/src/batch/BatchBuffer.js deleted file mode 100644 index b80bc7e..0000000 --- a/packages/core/src/batch/BatchBuffer.js +++ /dev/null @@ -1,41 +0,0 @@ -/** - * Used by the BatchRenderer - * - * @class - * @memberof PIXI - */ -export default class BatchBuffer -{ - /** - * @param {number} size - The size of the buffer in bytes. - */ - constructor(size) - { - this.vertices = new ArrayBuffer(size); - - /** - * View on the vertices as a Float32Array for positions - * - * @member {Float32Array} - */ - this.float32View = new Float32Array(this.vertices); - - /** - * View on the vertices as a Uint32Array for uvs - * - * @member {Float32Array} - */ - this.uint32View = new Uint32Array(this.vertices); - } - - /** - * Destroys the buffer. - * - */ - destroy() - { - this.vertices = null; - this.float32View = null; - this.uint32View = null; - } -} diff --git a/packages/core/src/batch/BatchRenderer.js b/packages/core/src/batch/BatchRenderer.js index e15f6c5..d75a35d 100644 --- a/packages/core/src/batch/BatchRenderer.js +++ b/packages/core/src/batch/BatchRenderer.js @@ -1,11 +1,13 @@ import BatchDrawCall from './BatchDrawCall'; import BaseTexture from '../textures/BaseTexture'; -import State from '../state/State'; import ObjectRenderer from './ObjectRenderer'; +import State from '../state/State'; +import ViewableBuffer from '../geometry/ViewableBuffer'; + import checkMaxIfStatementsInShader from '../shader/utils/checkMaxIfStatementsInShader'; + import { settings } from '@pixi/settings'; import { premultiplyBlendMode, premultiplyTint, nextPow2, log2 } from '@pixi/utils'; -import BatchBuffer from './BatchBuffer'; import { ENV } from '@pixi/constants'; /** @@ -195,7 +197,7 @@ } /** - * Pool of `BatchBuffer` objects that are sorted in + * Pool of `ViewableBuffer` objects that are sorted in * order of increasing size. The flush method uses * the buffer with the least size above the amount * it requires. These are used for passing attributes. @@ -203,7 +205,7 @@ * The first buffer has a size of 8; each subsequent * buffer has double capacity of its previous. * - * @member {PIXI.BatchBuffer} + * @member {PIXI.ViewableBuffer} * @private * @see PIXI.BatchRenderer#getAttributeBuffer */ @@ -312,8 +314,7 @@ } /** - * Renders the content and empties the current batch. - * + * Renders the content _now_ and empties the current batch. */ flush() { @@ -322,52 +323,48 @@ return; } - const gl = this.renderer.gl; - const MAX_TEXTURES = this.MAX_TEXTURES; - const vertSize = this.vertexSize; - - const buffer = this.getAttributeBuffer(this._vertexCount); + const attributeBuffer = this.getAttributeBuffer(this._vertexCount); const indexBuffer = this.getIndexBuffer(this._indexCount); + const gl = this.renderer.gl; - const elements = this._bufferedElements; - const _drawCalls = this._drawCalls; - - const float32View = buffer.float32View; - const uint32View = buffer.uint32View; + const { + _bufferedElements: elements, + _drawCalls: drawCalls, + MAX_TEXTURES, + _packedGeometries: packedGeometries, + vertexSize, + } = this; const touch = this.renderer.textureGC.count; let index = 0; let _indexCount = 0; + let nextTexture; let currentTexture; + let textureCount = 0; + + let currentGroup = drawCalls[0]; let groupCount = 0; - let textureCount = 0; - let currentGroup = _drawCalls[0]; - - let blendMode = -1;// premultiplyBlendMode[elements[0]._texture.baseTexture.premultiplyAlpha ? 0 : ][elements[0].blendMode]; + let blendMode = -1;// blend-mode of previous element/sprite/object! currentGroup.textureCount = 0; currentGroup.start = 0; currentGroup.blend = blendMode; let TICK = ++BaseTexture._globalBatch; - let i; for (i = 0; i < this._bufferSize; ++i) { - // upload the sprite elements... - // they have all ready been calculated so we just need to push them into the buffer. - const sprite = elements[i]; elements[i] = null; - nextTexture = sprite._texture.baseTexture; - const spriteBlendMode = premultiplyBlendMode[nextTexture.premultiplyAlpha ? 1 : 0][sprite.blendMode]; + const spriteBlendMode = premultiplyBlendMode[ + nextTexture.premultiplyAlpha ? 1 : 0][sprite.blendMode]; if (blendMode !== spriteBlendMode) { @@ -393,7 +390,7 @@ currentGroup.size = _indexCount - currentGroup.start; - currentGroup = _drawCalls[groupCount++]; + currentGroup = drawCalls[groupCount++]; currentGroup.textureCount = 0; currentGroup.blend = blendMode; currentGroup.start = _indexCount; @@ -408,63 +405,49 @@ } } - this.packInterleavedGeometry(sprite, float32View, uint32View, indexBuffer, index, _indexCount);// argb, nextTexture._id, float32View, uint32View, indexBuffer, index, _indexCount); + this.packInterleavedGeometry(sprite, attributeBuffer, + indexBuffer, index, _indexCount); // push a graphics.. - index += (sprite.vertexData.length / 2) * vertSize; + index += (sprite.vertexData.length / 2) * vertexSize; _indexCount += sprite.indices.length; } BaseTexture._globalBatch = TICK; - currentGroup.size = _indexCount - currentGroup.start; if (!settings.CAN_UPLOAD_SAME_BUFFER) - { - // this is still needed for IOS performance.. - // it really does not like uploading to the same buffer in a single frame! + { /* Usually on iOS devices, where the browser doesn't + like uploads to the same buffer in a single frame. */ if (this._packedGeometryPoolSize <= this._flushId) { this._packedGeometryPoolSize++; - /* eslint-disable max-len */ - this._packedGeometries[this._flushId] = new (this.geometryClass)(); + packedGeometries[this._flushId] = new (this.geometryClass)(); } - this._packedGeometries[this._flushId]._buffer.update(buffer.vertices, 0); - this._packedGeometries[this._flushId]._indexBuffer.update(indexBuffer, 0); + packedGeometries[this._flushId]._buffer.update(attributeBuffer.rawBinaryData, 0); + packedGeometries[this._flushId]._indexBuffer.update(indexBuffer, 0); - // this.vertexBuffers[this._flushId].update(buffer.vertices, 0); - this.renderer.geometry.bind(this._packedGeometries[this._flushId]); - + this.renderer.geometry.bind(packedGeometries[this._flushId]); this.renderer.geometry.updateBuffers(); - this._flushId++; } else { // lets use the faster option, always use buffer number 0 - this._packedGeometries[this._flushId]._buffer.update(buffer.vertices, 0); - this._packedGeometries[this._flushId]._indexBuffer.update(indexBuffer, 0); - - // if (true)// this.spriteOnly) - // { - // this._packedGeometries[this._flushId].indexBuffer = this.defualtSpriteIndexBuffer; - // this._packedGeometries[this._flushId].buffers[1] = this.defualtSpriteIndexBuffer; - // } + packedGeometries[this._flushId]._buffer.update(attributeBuffer.rawBinaryData, 0); + packedGeometries[this._flushId]._indexBuffer.update(indexBuffer, 0); this.renderer.geometry.updateBuffers(); } - // this.renderer.state.set(this.state); - const textureSystem = this.renderer.texture; const stateSystem = this.renderer.state; - // e.log(groupCount); - // / render the _drawCalls.. + // Upload textures and do the draw calls for (i = 0; i < groupCount; i++) { - const group = _drawCalls[i]; + const group = drawCalls[i]; const groupTextureCount = group.textureCount; for (let j = 0; j < groupTextureCount; j++) @@ -473,13 +456,7 @@ group.textures[j] = null; } - // this.state.blendMode = group.blend; - // this.state.blend = true; - - // this.renderer.state.setState(this.state); - // set the blend mode.. stateSystem.setBlendMode(group.blend); - gl.drawElements(group.type, group.size, gl.UNSIGNED_SHORT, group.start * 2); } @@ -507,7 +484,6 @@ /** * Stops and flushes the current batch. - * */ stop() { @@ -548,7 +524,7 @@ * can hold atleast `size` floats. * * @param {number} size - minimum capacity required - * @return {BatchBuffer} - buffer than can hold atleast `size` floats + * @return {ViewableBuffer} - buffer than can hold atleast `size` floats * @private */ getAttributeBuffer(size) @@ -567,7 +543,7 @@ if (!buffer) { - this._aBuffers[roundedSize] = buffer = new BatchBuffer(roundedSize * this.vertexSize * 4); + this._aBuffers[roundedSize] = buffer = new ViewableBuffer(roundedSize * this.vertexSize * 4); } return buffer; @@ -613,16 +589,19 @@ * present. * * @param {PIXI.Sprite} element - element being rendered - * @param {Float32Array} float32View - float32-view of the attribute buffer - * @param {Uint32Array} uint32View - uint32-view of the attribute buffer + * @param {PIXI.ViewableBuffer} attributeBuffer - attribute buffer. * @param {Uint16Array} indexBuffer - index buffer * @param {number} aIndex - number of floats already in the attribute buffer * @param {number} iIndex - number of indices already in `indexBuffer` */ - packInterleavedGeometry(element, - float32View, uint32View, indexBuffer, aIndex, iIndex) + packInterleavedGeometry(element, attributeBuffer, indexBuffer, aIndex, iIndex) { - const p = aIndex / this.vertexSize; + const { + uint32View, + float32View, + } = attributeBuffer; + + const packedVertices = aIndex / this.vertexSize; const uvs = element.uvs; const indicies = element.indices; const vertexData = element.vertexData; @@ -647,7 +626,7 @@ for (let i = 0; i < indicies.length; i++) { - indexBuffer[iIndex++] = p + indicies[i]; + indexBuffer[iIndex++] = packedVertices + indicies[i]; } } } diff --git a/packages/core/src/batch/ObjectRenderer.js b/packages/core/src/batch/ObjectRenderer.js index 0c851a9..1776347 100644 --- a/packages/core/src/batch/ObjectRenderer.js +++ b/packages/core/src/batch/ObjectRenderer.js @@ -1,35 +1,29 @@ -import System from '../System'; - /** - * Base for a common object renderer that can be used as a system renderer plugin. + * Base for a common object renderer that can be used as a + * system renderer plugin. * * @class * @extends PIXI.System * @memberof PIXI */ -export default class ObjectRenderer extends System +export default class ObjectRenderer { /** - * Starts the renderer and sets the shader - * + * @param {PIXI.Renderer} renderer - The renderer this manager works for. */ - start() + constructor(renderer) { - // set the shader.. + /** + * The renderer this manager works for. + * + * @member {PIXI.Renderer} + */ + this.renderer = renderer; } /** - * Stops the renderer - * - */ - stop() - { - this.flush(); - } - - /** - * Stub method for rendering content and emptying the current batch. - * + * Stub method that should be used to empty the current + * batch by rendering objects now. */ flush() { @@ -37,7 +31,37 @@ } /** - * Renders an object + * Generic destruction method that frees all resources. This + * should be called by subclasses. + */ + destroy() + { + this.renderer = null; + } + + /** + * Stub method that initializes any state required before + * rendering starts. It is different from the `prerender` + * signal, which occurs every frame, in that it is called + * whenever an object requests _this_ renderer specifically. + */ + start() + { + // set the shader.. + } + + /** + * Stops the renderer. It should free up any state and + * become dormant. + */ + stop() + { + this.flush(); + } + + /** + * Keeps the object to render. It doesn't have to be + * rendered immediately. * * @param {PIXI.DisplayObject} object - The object to render. */ diff --git a/packages/core/src/context/ContextSystem.js b/packages/core/src/context/ContextSystem.js index 1b90abb..77a03ad 100644 --- a/packages/core/src/context/ContextSystem.js +++ b/packages/core/src/context/ContextSystem.js @@ -65,6 +65,8 @@ contextChange(gl) { this.gl = gl; + this.renderer.gl = gl; + this.renderer.CONTEXT_UID = CONTEXT_UID++; // restore a context if it was previously lost if (gl.isContextLost() && gl.getExtension('WEBGL_lose_context')) diff --git a/packages/core/src/geometry/ViewableBuffer.js b/packages/core/src/geometry/ViewableBuffer.js new file mode 100644 index 0000000..fb4b52f --- /dev/null +++ b/packages/core/src/geometry/ViewableBuffer.js @@ -0,0 +1,159 @@ +/** + * Flexible wrapper around `ArrayBuffer` that also provides + * typed array views on demand. + * + * @class + * @memberof PIXI + */ +export default class ViewableBuffer +{ + /** + * @param {number} size - The size of the buffer in bytes. + */ + constructor(size) + { + /** + * Underlying `ArrayBuffer` that holds all the data + * and is of capacity `size`. + * + * @member {ArrayBuffer} + */ + this.rawBinaryData = new ArrayBuffer(size); + + /** + * View on the raw binary data as a `Uint32Array`. + * + * @member {Uint32Array} + */ + this.uint32View = new Uint32Array(this.rawBinaryData); + + /** + * View on the raw binary data as a `Float32Array`. + * + * @member {Float32Array} + */ + this.float32View = new Float32Array(this.rawBinaryData); + } + + /** + * View on the raw binary data as a `Int8Array`. + * + * @member {Int8Array} + */ + get int8View() + { + if (!this._int8View) + { + this._int8View = new Int8Array(this.rawBinaryData); + } + + return this._int8View; + } + + /** + * View on the raw binary data as a `Uint8Array`. + * + * @member {Uint8Array} + */ + get uint8View() + { + if (!this._uint8View) + { + this._uint8View = new Uint8Array(this.rawBinaryData); + } + + return this._uint8View; + } + + /** + * View on the raw binary data as a `Int16Array`. + * + * @member {Int16Array} + */ + get int16View() + { + if (!this._int16View) + { + this._int16View = new Int16Array(this.rawBinaryData); + } + + return this._int16View; + } + + /** + * View on the raw binary data as a `Uint16Array`. + * + * @member {Uint16Array} + */ + get uint16View() + { + if (!this._uint16View) + { + this._uint16View = new Uint16Array(this.rawBinaryData); + } + + return this._uint16View; + } + + /** + * View on the raw binary data as a `Int32Array`. + * + * @member {Int32Array} + */ + get int32View() + { + if (!this._int32View) + { + this._int32View = new Int32Array(this.rawBinaryData); + } + + return this._int32View; + } + + /** + * Returns the view of the given type. + * + * @param {string} type - One of `int8`, `uint8`, `int16`, + * `uint16`, `int32`, `uint32`, and `float32`. + * @return typed array of given type + */ + view(type) + { + return this[`${type}View`]; + } + + /** + * Destroys all buffer references. Do not use after calling + * this. + */ + destroy() + { + this.rawBinaryData = null; + this._int8View = null; + this._uint8View = null; + this._int16View = null; + this._uint16View = null; + this._int32View = null; + this.uint32View = null; + this.float32View = null; + } + + static sizeOf(type) + { + switch (type) + { + case 'int8': + case 'uint8': + return 1; + case 'int16': + case 'uint16': + return 2; + case 'int32': + case 'uint32': + case 'float32': + return 4; + default: + throw new Error(`${type} isn't a valid view type`); + } + } +} diff --git a/packages/core/src/index.js b/packages/core/src/index.js index 47d6883..55a092b 100644 --- a/packages/core/src/index.js +++ b/packages/core/src/index.js @@ -39,3 +39,4 @@ export { default as Attribute } from './geometry/Attribute'; export { default as Buffer } from './geometry/Buffer'; export { default as Geometry } from './geometry/Geometry'; +export { default as ViewableBuffer } from './geometry/ViewableBuffer'; diff --git a/packages/core/src/shader/ShaderSystem.js b/packages/core/src/shader/ShaderSystem.js index d555d2f..f8324a4 100644 --- a/packages/core/src/shader/ShaderSystem.js +++ b/packages/core/src/shader/ShaderSystem.js @@ -64,6 +64,7 @@ contextChange(gl) { this.gl = gl; + this.reset(); } /** diff --git a/packages/graphics/src/Graphics.js b/packages/graphics/src/Graphics.js index e807104..596a872 100644 --- a/packages/graphics/src/Graphics.js +++ b/packages/graphics/src/Graphics.js @@ -158,6 +158,14 @@ this._transformID = -1; this.batchDirty = -1; + /** + * Renderer plugin for batching + * + * @member {string} + * @default 'batch' + */ + this.pluginName = 'batch'; + // Set default this.tint = 0xFFFFFF; this.blendMode = BLEND_MODES.NORMAL; @@ -239,7 +247,7 @@ * @param {number} [width=0] - width of the line to draw, will update the objects stored style * @param {number} [color=0] - color of the line to draw, will update the objects stored style * @param {number} [alpha=1] - alpha of the line to draw, will update the objects stored style - * @param {number} [alignment=1] - alignment of the line to draw, (0 = inner, 0.5 = middle, 1 = outter) + * @param {number} [alignment=0.5] - alignment of the line to draw, (0 = inner, 0.5 = middle, 1 = outter) * @param {boolean} [native=false] - If true the lines will be draw using LINES instead of TRIANGLE_STRIP * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ @@ -864,7 +872,7 @@ } } - renderer.batch.setObjectRenderer(renderer.plugins.batch); + renderer.batch.setObjectRenderer(renderer.plugins[this.pluginName]); if (this.batches.length) { @@ -877,7 +885,7 @@ batch.worldAlpha = this.worldAlpha * batch.alpha; - renderer.plugins.batch.render(batch); + renderer.plugins[this.pluginName].render(batch); } } } diff --git a/packages/interaction/src/InteractionManager.js b/packages/interaction/src/InteractionManager.js index 0df6545..f4664af 100644 --- a/packages/interaction/src/InteractionManager.js +++ b/packages/interaction/src/InteractionManager.js @@ -682,7 +682,7 @@ * other DOM elements on top of the renderers Canvas element. With this you'll be bale to delegate * another DOM element to receive those events. * - * @param {HTMLCanvasElement} element - the DOM element which will receive mouse and touch events. + * @param {HTMLElement} 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). */ setTargetElement(element, resolution = 1) @@ -875,8 +875,6 @@ } this.setCursorMode(this.cursor); - - // TODO } /** @@ -1467,14 +1465,8 @@ interactionEvent.data.originalEvent = originalEvent; - const interactive = event.pointerType === 'touch' ? this.moveWhenInside : true; + this.processInteractive(interactionEvent, this.renderer._lastObjectRendered, this.processPointerMove, true); - this.processInteractive( - interactionEvent, - this.renderer._lastObjectRendered, - this.processPointerMove, - interactive - ); this.emit('pointermove', interactionEvent); if (event.pointerType === 'touch') this.emit('touchmove', interactionEvent); if (event.pointerType === 'mouse' || event.pointerType === 'pen') this.emit('mousemove', interactionEvent); diff --git a/packages/prepare/src/Prepare.js b/packages/prepare/src/Prepare.js index b7f2819..ba6ed92 100644 --- a/packages/prepare/src/Prepare.js +++ b/packages/prepare/src/Prepare.js @@ -45,7 +45,7 @@ // reuploads the texture without need for preparing it again if (!item._glTextures[renderer.CONTEXT_UID]) { - renderer.texture.updateTexture(item); + renderer.texture.bind(item); } return true; diff --git a/packages/text/src/Text.js b/packages/text/src/Text.js index e702d74..b1625d0 100644 --- a/packages/text/src/Text.js +++ b/packages/text/src/Text.js @@ -330,9 +330,10 @@ /** * Renders the object using the WebGL renderer * + * @private * @param {PIXI.Renderer} renderer - The renderer */ - render(renderer) + _render(renderer) { if (this._autoResolution && this._resolution !== renderer.resolution) { @@ -342,26 +343,7 @@ this.updateText(true); - super.render(renderer); - } - - /** - * Renders the object using the Canvas renderer - * - * @private - * @param {PIXI.CanvasRenderer} renderer - The renderer - */ - _renderCanvas(renderer) - { - if (this._autoResolution && this._resolution !== renderer.resolution) - { - this._resolution = renderer.resolution; - this.dirty = true; - } - - this.updateText(true); - - super._renderCanvas(renderer); + super._render(renderer); } /** diff --git a/packages/utils/src/browser/hello.js b/packages/utils/src/browser/hello.js index cf1a105..081efd3 100644 --- a/packages/utils/src/browser/hello.js +++ b/packages/utils/src/browser/hello.js @@ -15,7 +15,7 @@ /** * Logs out the version and renderer information for this running instance of PIXI. * If you don't want to see this message you can run `PIXI.utils.skipHello()` before - * creating your renderer. Keep in mind that doing that will forever makes you a jerk face. + * creating your renderer. Keep in mind that doing that will forever make you a jerk face. * * @static * @function sayHello diff --git a/tools/integration-tests/package.json b/tools/integration-tests/package.json index d8fbbfa..3ad5fea 100644 --- a/tools/integration-tests/package.json +++ b/tools/integration-tests/package.json @@ -9,6 +9,7 @@ "@pixi/canvas-mesh": "^5.0.4", "@pixi/canvas-renderer": "^5.0.4", "@pixi/canvas-sprite": "^5.0.4", + "@pixi/canvas-text": "^5.0.4", "@pixi/core": "^5.0.4", "@pixi/display": "^5.0.4", "@pixi/graphics": "^5.0.4", diff --git a/bundles/pixi.js-legacy/package.json b/bundles/pixi.js-legacy/package.json index 1565ef3..97abd4a 100644 --- a/bundles/pixi.js-legacy/package.json +++ b/bundles/pixi.js-legacy/package.json @@ -40,6 +40,7 @@ "@pixi/canvas-renderer": "^5.0.4", "@pixi/canvas-sprite": "^5.0.4", "@pixi/canvas-sprite-tiling": "^5.0.4", + "@pixi/canvas-text": "^5.0.4", "pixi.js": "^5.0.4" } } diff --git a/bundles/pixi.js-legacy/src/index.js b/bundles/pixi.js-legacy/src/index.js index 956019c..f1598a1 100644 --- a/bundles/pixi.js-legacy/src/index.js +++ b/bundles/pixi.js-legacy/src/index.js @@ -8,6 +8,7 @@ import '@pixi/canvas-sprite-tiling'; import '@pixi/canvas-particles'; import '@pixi/canvas-display'; +import '@pixi/canvas-text'; CanvasRenderer.registerPlugin('accessibility', accessibility.AccessibilityManager); CanvasRenderer.registerPlugin('extract', canvasExtract.CanvasExtract); diff --git a/packages/canvas/canvas-graphics/src/CanvasGraphicsRenderer.js b/packages/canvas/canvas-graphics/src/CanvasGraphicsRenderer.js index b7b7a7e..cabe8e2 100644 --- a/packages/canvas/canvas-graphics/src/CanvasGraphicsRenderer.js +++ b/packages/canvas/canvas-graphics/src/CanvasGraphicsRenderer.js @@ -55,7 +55,7 @@ if (graphics.canvasTintDirty !== graphics.dirty || graphics._prevTint !== graphics.tint) { - // this.updateGraphicsTint(graphics); + this.updateGraphicsTint(graphics); } renderer.setBlendMode(graphics.blendMode); @@ -69,8 +69,8 @@ const fillStyle = data.fillStyle; const lineStyle = data.lineStyle; - const fillColor = fillStyle.color;// data._fillTint; - const lineColor = lineStyle.color;// data._lineTint; + const fillColor = data._fillTint; + const lineColor = data._lineTint; context.lineWidth = lineStyle.width; @@ -298,13 +298,14 @@ const tintR = ((graphics.tint >> 16) & 0xFF) / 255; const tintG = ((graphics.tint >> 8) & 0xFF) / 255; const tintB = (graphics.tint & 0xFF) / 255; + const graphicsData = graphics.geometry.graphicsData; - for (let i = 0; i < graphics.graphicsData.length; ++i) + for (let i = 0; i < graphicsData.length; ++i) { - const data = graphics.graphicsData[i]; + const data = graphicsData[i]; - const fillColor = data.fillColor | 0; - const lineColor = data.lineColor | 0; + const fillColor = data.fillStyle.color | 0; + const lineColor = data.lineStyle.color | 0; // super inline, cos optimization :) data._fillTint = ( diff --git a/packages/canvas/canvas-mesh/src/NineSlicePlane.js b/packages/canvas/canvas-mesh/src/NineSlicePlane.js index d5ce07f..dccfd79 100644 --- a/packages/canvas/canvas-mesh/src/NineSlicePlane.js +++ b/packages/canvas/canvas-mesh/src/NineSlicePlane.js @@ -39,7 +39,7 @@ const transform = this.worldTransform; const res = renderer.resolution; const isTinted = this.tint !== 0xFFFFFF; - const texture = this._texture; + const texture = this.texture; // Work out tinting if (isTinted) diff --git a/packages/canvas/canvas-renderer/src/CanvasTinter.js b/packages/canvas/canvas-renderer/src/CanvasTinter.js index 6ea164b..7abf0f3 100644 --- a/packages/canvas/canvas-renderer/src/CanvasTinter.js +++ b/packages/canvas/canvas-renderer/src/CanvasTinter.js @@ -21,7 +21,7 @@ */ getTintedCanvas: (sprite, color) => { - const texture = sprite._texture; + const texture = sprite.texture; color = CanvasTinter.roundColor(color); diff --git a/packages/canvas/canvas-text/LICENSE b/packages/canvas/canvas-text/LICENSE new file mode 100644 index 0000000..148e3eb --- /dev/null +++ b/packages/canvas/canvas-text/LICENSE @@ -0,0 +1,21 @@ +The MIT License + +Copyright (c) 2013-2018 Mathew Groves, Chad Engler + +Permission is hereby granted, free of charge, to any person obtaining a copy +of this software and associated documentation files (the "Software"), to deal +in the Software without restriction, including without limitation the rights +to use, copy, modify, merge, publish, distribute, sublicense, and/or sell +copies of the Software, and to permit persons to whom the Software is +furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in +all copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, +FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE +AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER +LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, +OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN +THE SOFTWARE. \ No newline at end of file diff --git a/packages/canvas/canvas-text/README.md b/packages/canvas/canvas-text/README.md new file mode 100644 index 0000000..d6d3b4c --- /dev/null +++ b/packages/canvas/canvas-text/README.md @@ -0,0 +1,13 @@ +# @pixi/canvas-text + +## Installation + +```bash +npm install @pixi/canvas-text +``` + +## Usage + +```js +import '@pixi/canvas-text'; +``` \ No newline at end of file diff --git a/packages/canvas/canvas-text/package.json b/packages/canvas/canvas-text/package.json new file mode 100644 index 0000000..7d3ba59 --- /dev/null +++ b/packages/canvas/canvas-text/package.json @@ -0,0 +1,28 @@ +{ + "name": "@pixi/canvas-text", + "version": "5.0.4", + "main": "lib/canvas-text.js", + "module": "lib/canvas-text.es.js", + "bundle": "dist/canvas-text.js", + "bundleNoExports": true, + "description": "Canvas mixin for the text package", + "author": "Dave Moore", + "homepage": "http://pixijs.com/", + "bugs": "https://github.com/pixijs/pixi.js/issues", + "license": "MIT", + "repository": { + "type": "git", + "url": "https://github.com/pixijs/pixi.js.git" + }, + "publishConfig": { + "access": "public" + }, + "files": [ + "lib", + "dist" + ], + "dependencies": { + "@pixi/sprite": "^5.0.4", + "@pixi/text": "^5.0.4" + } +} diff --git a/packages/canvas/canvas-text/src/Text.js b/packages/canvas/canvas-text/src/Text.js new file mode 100644 index 0000000..0e0f9f5 --- /dev/null +++ b/packages/canvas/canvas-text/src/Text.js @@ -0,0 +1,23 @@ +import { Text } from '@pixi/text'; +import { Sprite } from '@pixi/sprite'; + +/** + * Renders the object using the Canvas renderer + * + * @method _renderCanvas + * @memberof PIXI.Text# + * @private + * @param {PIXI.CanvasRenderer} renderer - The renderer + */ +Text.prototype._renderCanvas = function _renderCanvas(renderer) +{ + if (this._autoResolution && this._resolution !== renderer.resolution) + { + this._resolution = renderer.resolution; + this.dirty = true; + } + + this.updateText(true); + + Sprite.prototype._renderCanvas.call(this, renderer); +}; diff --git a/packages/canvas/canvas-text/src/index.js b/packages/canvas/canvas-text/src/index.js new file mode 100644 index 0000000..7bdb7ed --- /dev/null +++ b/packages/canvas/canvas-text/src/index.js @@ -0,0 +1 @@ +import './Text'; diff --git a/packages/core/src/batch/BatchBuffer.js b/packages/core/src/batch/BatchBuffer.js deleted file mode 100644 index b80bc7e..0000000 --- a/packages/core/src/batch/BatchBuffer.js +++ /dev/null @@ -1,41 +0,0 @@ -/** - * Used by the BatchRenderer - * - * @class - * @memberof PIXI - */ -export default class BatchBuffer -{ - /** - * @param {number} size - The size of the buffer in bytes. - */ - constructor(size) - { - this.vertices = new ArrayBuffer(size); - - /** - * View on the vertices as a Float32Array for positions - * - * @member {Float32Array} - */ - this.float32View = new Float32Array(this.vertices); - - /** - * View on the vertices as a Uint32Array for uvs - * - * @member {Float32Array} - */ - this.uint32View = new Uint32Array(this.vertices); - } - - /** - * Destroys the buffer. - * - */ - destroy() - { - this.vertices = null; - this.float32View = null; - this.uint32View = null; - } -} diff --git a/packages/core/src/batch/BatchRenderer.js b/packages/core/src/batch/BatchRenderer.js index e15f6c5..d75a35d 100644 --- a/packages/core/src/batch/BatchRenderer.js +++ b/packages/core/src/batch/BatchRenderer.js @@ -1,11 +1,13 @@ import BatchDrawCall from './BatchDrawCall'; import BaseTexture from '../textures/BaseTexture'; -import State from '../state/State'; import ObjectRenderer from './ObjectRenderer'; +import State from '../state/State'; +import ViewableBuffer from '../geometry/ViewableBuffer'; + import checkMaxIfStatementsInShader from '../shader/utils/checkMaxIfStatementsInShader'; + import { settings } from '@pixi/settings'; import { premultiplyBlendMode, premultiplyTint, nextPow2, log2 } from '@pixi/utils'; -import BatchBuffer from './BatchBuffer'; import { ENV } from '@pixi/constants'; /** @@ -195,7 +197,7 @@ } /** - * Pool of `BatchBuffer` objects that are sorted in + * Pool of `ViewableBuffer` objects that are sorted in * order of increasing size. The flush method uses * the buffer with the least size above the amount * it requires. These are used for passing attributes. @@ -203,7 +205,7 @@ * The first buffer has a size of 8; each subsequent * buffer has double capacity of its previous. * - * @member {PIXI.BatchBuffer} + * @member {PIXI.ViewableBuffer} * @private * @see PIXI.BatchRenderer#getAttributeBuffer */ @@ -312,8 +314,7 @@ } /** - * Renders the content and empties the current batch. - * + * Renders the content _now_ and empties the current batch. */ flush() { @@ -322,52 +323,48 @@ return; } - const gl = this.renderer.gl; - const MAX_TEXTURES = this.MAX_TEXTURES; - const vertSize = this.vertexSize; - - const buffer = this.getAttributeBuffer(this._vertexCount); + const attributeBuffer = this.getAttributeBuffer(this._vertexCount); const indexBuffer = this.getIndexBuffer(this._indexCount); + const gl = this.renderer.gl; - const elements = this._bufferedElements; - const _drawCalls = this._drawCalls; - - const float32View = buffer.float32View; - const uint32View = buffer.uint32View; + const { + _bufferedElements: elements, + _drawCalls: drawCalls, + MAX_TEXTURES, + _packedGeometries: packedGeometries, + vertexSize, + } = this; const touch = this.renderer.textureGC.count; let index = 0; let _indexCount = 0; + let nextTexture; let currentTexture; + let textureCount = 0; + + let currentGroup = drawCalls[0]; let groupCount = 0; - let textureCount = 0; - let currentGroup = _drawCalls[0]; - - let blendMode = -1;// premultiplyBlendMode[elements[0]._texture.baseTexture.premultiplyAlpha ? 0 : ][elements[0].blendMode]; + let blendMode = -1;// blend-mode of previous element/sprite/object! currentGroup.textureCount = 0; currentGroup.start = 0; currentGroup.blend = blendMode; let TICK = ++BaseTexture._globalBatch; - let i; for (i = 0; i < this._bufferSize; ++i) { - // upload the sprite elements... - // they have all ready been calculated so we just need to push them into the buffer. - const sprite = elements[i]; elements[i] = null; - nextTexture = sprite._texture.baseTexture; - const spriteBlendMode = premultiplyBlendMode[nextTexture.premultiplyAlpha ? 1 : 0][sprite.blendMode]; + const spriteBlendMode = premultiplyBlendMode[ + nextTexture.premultiplyAlpha ? 1 : 0][sprite.blendMode]; if (blendMode !== spriteBlendMode) { @@ -393,7 +390,7 @@ currentGroup.size = _indexCount - currentGroup.start; - currentGroup = _drawCalls[groupCount++]; + currentGroup = drawCalls[groupCount++]; currentGroup.textureCount = 0; currentGroup.blend = blendMode; currentGroup.start = _indexCount; @@ -408,63 +405,49 @@ } } - this.packInterleavedGeometry(sprite, float32View, uint32View, indexBuffer, index, _indexCount);// argb, nextTexture._id, float32View, uint32View, indexBuffer, index, _indexCount); + this.packInterleavedGeometry(sprite, attributeBuffer, + indexBuffer, index, _indexCount); // push a graphics.. - index += (sprite.vertexData.length / 2) * vertSize; + index += (sprite.vertexData.length / 2) * vertexSize; _indexCount += sprite.indices.length; } BaseTexture._globalBatch = TICK; - currentGroup.size = _indexCount - currentGroup.start; if (!settings.CAN_UPLOAD_SAME_BUFFER) - { - // this is still needed for IOS performance.. - // it really does not like uploading to the same buffer in a single frame! + { /* Usually on iOS devices, where the browser doesn't + like uploads to the same buffer in a single frame. */ if (this._packedGeometryPoolSize <= this._flushId) { this._packedGeometryPoolSize++; - /* eslint-disable max-len */ - this._packedGeometries[this._flushId] = new (this.geometryClass)(); + packedGeometries[this._flushId] = new (this.geometryClass)(); } - this._packedGeometries[this._flushId]._buffer.update(buffer.vertices, 0); - this._packedGeometries[this._flushId]._indexBuffer.update(indexBuffer, 0); + packedGeometries[this._flushId]._buffer.update(attributeBuffer.rawBinaryData, 0); + packedGeometries[this._flushId]._indexBuffer.update(indexBuffer, 0); - // this.vertexBuffers[this._flushId].update(buffer.vertices, 0); - this.renderer.geometry.bind(this._packedGeometries[this._flushId]); - + this.renderer.geometry.bind(packedGeometries[this._flushId]); this.renderer.geometry.updateBuffers(); - this._flushId++; } else { // lets use the faster option, always use buffer number 0 - this._packedGeometries[this._flushId]._buffer.update(buffer.vertices, 0); - this._packedGeometries[this._flushId]._indexBuffer.update(indexBuffer, 0); - - // if (true)// this.spriteOnly) - // { - // this._packedGeometries[this._flushId].indexBuffer = this.defualtSpriteIndexBuffer; - // this._packedGeometries[this._flushId].buffers[1] = this.defualtSpriteIndexBuffer; - // } + packedGeometries[this._flushId]._buffer.update(attributeBuffer.rawBinaryData, 0); + packedGeometries[this._flushId]._indexBuffer.update(indexBuffer, 0); this.renderer.geometry.updateBuffers(); } - // this.renderer.state.set(this.state); - const textureSystem = this.renderer.texture; const stateSystem = this.renderer.state; - // e.log(groupCount); - // / render the _drawCalls.. + // Upload textures and do the draw calls for (i = 0; i < groupCount; i++) { - const group = _drawCalls[i]; + const group = drawCalls[i]; const groupTextureCount = group.textureCount; for (let j = 0; j < groupTextureCount; j++) @@ -473,13 +456,7 @@ group.textures[j] = null; } - // this.state.blendMode = group.blend; - // this.state.blend = true; - - // this.renderer.state.setState(this.state); - // set the blend mode.. stateSystem.setBlendMode(group.blend); - gl.drawElements(group.type, group.size, gl.UNSIGNED_SHORT, group.start * 2); } @@ -507,7 +484,6 @@ /** * Stops and flushes the current batch. - * */ stop() { @@ -548,7 +524,7 @@ * can hold atleast `size` floats. * * @param {number} size - minimum capacity required - * @return {BatchBuffer} - buffer than can hold atleast `size` floats + * @return {ViewableBuffer} - buffer than can hold atleast `size` floats * @private */ getAttributeBuffer(size) @@ -567,7 +543,7 @@ if (!buffer) { - this._aBuffers[roundedSize] = buffer = new BatchBuffer(roundedSize * this.vertexSize * 4); + this._aBuffers[roundedSize] = buffer = new ViewableBuffer(roundedSize * this.vertexSize * 4); } return buffer; @@ -613,16 +589,19 @@ * present. * * @param {PIXI.Sprite} element - element being rendered - * @param {Float32Array} float32View - float32-view of the attribute buffer - * @param {Uint32Array} uint32View - uint32-view of the attribute buffer + * @param {PIXI.ViewableBuffer} attributeBuffer - attribute buffer. * @param {Uint16Array} indexBuffer - index buffer * @param {number} aIndex - number of floats already in the attribute buffer * @param {number} iIndex - number of indices already in `indexBuffer` */ - packInterleavedGeometry(element, - float32View, uint32View, indexBuffer, aIndex, iIndex) + packInterleavedGeometry(element, attributeBuffer, indexBuffer, aIndex, iIndex) { - const p = aIndex / this.vertexSize; + const { + uint32View, + float32View, + } = attributeBuffer; + + const packedVertices = aIndex / this.vertexSize; const uvs = element.uvs; const indicies = element.indices; const vertexData = element.vertexData; @@ -647,7 +626,7 @@ for (let i = 0; i < indicies.length; i++) { - indexBuffer[iIndex++] = p + indicies[i]; + indexBuffer[iIndex++] = packedVertices + indicies[i]; } } } diff --git a/packages/core/src/batch/ObjectRenderer.js b/packages/core/src/batch/ObjectRenderer.js index 0c851a9..1776347 100644 --- a/packages/core/src/batch/ObjectRenderer.js +++ b/packages/core/src/batch/ObjectRenderer.js @@ -1,35 +1,29 @@ -import System from '../System'; - /** - * Base for a common object renderer that can be used as a system renderer plugin. + * Base for a common object renderer that can be used as a + * system renderer plugin. * * @class * @extends PIXI.System * @memberof PIXI */ -export default class ObjectRenderer extends System +export default class ObjectRenderer { /** - * Starts the renderer and sets the shader - * + * @param {PIXI.Renderer} renderer - The renderer this manager works for. */ - start() + constructor(renderer) { - // set the shader.. + /** + * The renderer this manager works for. + * + * @member {PIXI.Renderer} + */ + this.renderer = renderer; } /** - * Stops the renderer - * - */ - stop() - { - this.flush(); - } - - /** - * Stub method for rendering content and emptying the current batch. - * + * Stub method that should be used to empty the current + * batch by rendering objects now. */ flush() { @@ -37,7 +31,37 @@ } /** - * Renders an object + * Generic destruction method that frees all resources. This + * should be called by subclasses. + */ + destroy() + { + this.renderer = null; + } + + /** + * Stub method that initializes any state required before + * rendering starts. It is different from the `prerender` + * signal, which occurs every frame, in that it is called + * whenever an object requests _this_ renderer specifically. + */ + start() + { + // set the shader.. + } + + /** + * Stops the renderer. It should free up any state and + * become dormant. + */ + stop() + { + this.flush(); + } + + /** + * Keeps the object to render. It doesn't have to be + * rendered immediately. * * @param {PIXI.DisplayObject} object - The object to render. */ diff --git a/packages/core/src/context/ContextSystem.js b/packages/core/src/context/ContextSystem.js index 1b90abb..77a03ad 100644 --- a/packages/core/src/context/ContextSystem.js +++ b/packages/core/src/context/ContextSystem.js @@ -65,6 +65,8 @@ contextChange(gl) { this.gl = gl; + this.renderer.gl = gl; + this.renderer.CONTEXT_UID = CONTEXT_UID++; // restore a context if it was previously lost if (gl.isContextLost() && gl.getExtension('WEBGL_lose_context')) diff --git a/packages/core/src/geometry/ViewableBuffer.js b/packages/core/src/geometry/ViewableBuffer.js new file mode 100644 index 0000000..fb4b52f --- /dev/null +++ b/packages/core/src/geometry/ViewableBuffer.js @@ -0,0 +1,159 @@ +/** + * Flexible wrapper around `ArrayBuffer` that also provides + * typed array views on demand. + * + * @class + * @memberof PIXI + */ +export default class ViewableBuffer +{ + /** + * @param {number} size - The size of the buffer in bytes. + */ + constructor(size) + { + /** + * Underlying `ArrayBuffer` that holds all the data + * and is of capacity `size`. + * + * @member {ArrayBuffer} + */ + this.rawBinaryData = new ArrayBuffer(size); + + /** + * View on the raw binary data as a `Uint32Array`. + * + * @member {Uint32Array} + */ + this.uint32View = new Uint32Array(this.rawBinaryData); + + /** + * View on the raw binary data as a `Float32Array`. + * + * @member {Float32Array} + */ + this.float32View = new Float32Array(this.rawBinaryData); + } + + /** + * View on the raw binary data as a `Int8Array`. + * + * @member {Int8Array} + */ + get int8View() + { + if (!this._int8View) + { + this._int8View = new Int8Array(this.rawBinaryData); + } + + return this._int8View; + } + + /** + * View on the raw binary data as a `Uint8Array`. + * + * @member {Uint8Array} + */ + get uint8View() + { + if (!this._uint8View) + { + this._uint8View = new Uint8Array(this.rawBinaryData); + } + + return this._uint8View; + } + + /** + * View on the raw binary data as a `Int16Array`. + * + * @member {Int16Array} + */ + get int16View() + { + if (!this._int16View) + { + this._int16View = new Int16Array(this.rawBinaryData); + } + + return this._int16View; + } + + /** + * View on the raw binary data as a `Uint16Array`. + * + * @member {Uint16Array} + */ + get uint16View() + { + if (!this._uint16View) + { + this._uint16View = new Uint16Array(this.rawBinaryData); + } + + return this._uint16View; + } + + /** + * View on the raw binary data as a `Int32Array`. + * + * @member {Int32Array} + */ + get int32View() + { + if (!this._int32View) + { + this._int32View = new Int32Array(this.rawBinaryData); + } + + return this._int32View; + } + + /** + * Returns the view of the given type. + * + * @param {string} type - One of `int8`, `uint8`, `int16`, + * `uint16`, `int32`, `uint32`, and `float32`. + * @return typed array of given type + */ + view(type) + { + return this[`${type}View`]; + } + + /** + * Destroys all buffer references. Do not use after calling + * this. + */ + destroy() + { + this.rawBinaryData = null; + this._int8View = null; + this._uint8View = null; + this._int16View = null; + this._uint16View = null; + this._int32View = null; + this.uint32View = null; + this.float32View = null; + } + + static sizeOf(type) + { + switch (type) + { + case 'int8': + case 'uint8': + return 1; + case 'int16': + case 'uint16': + return 2; + case 'int32': + case 'uint32': + case 'float32': + return 4; + default: + throw new Error(`${type} isn't a valid view type`); + } + } +} diff --git a/packages/core/src/index.js b/packages/core/src/index.js index 47d6883..55a092b 100644 --- a/packages/core/src/index.js +++ b/packages/core/src/index.js @@ -39,3 +39,4 @@ export { default as Attribute } from './geometry/Attribute'; export { default as Buffer } from './geometry/Buffer'; export { default as Geometry } from './geometry/Geometry'; +export { default as ViewableBuffer } from './geometry/ViewableBuffer'; diff --git a/packages/core/src/shader/ShaderSystem.js b/packages/core/src/shader/ShaderSystem.js index d555d2f..f8324a4 100644 --- a/packages/core/src/shader/ShaderSystem.js +++ b/packages/core/src/shader/ShaderSystem.js @@ -64,6 +64,7 @@ contextChange(gl) { this.gl = gl; + this.reset(); } /** diff --git a/packages/graphics/src/Graphics.js b/packages/graphics/src/Graphics.js index e807104..596a872 100644 --- a/packages/graphics/src/Graphics.js +++ b/packages/graphics/src/Graphics.js @@ -158,6 +158,14 @@ this._transformID = -1; this.batchDirty = -1; + /** + * Renderer plugin for batching + * + * @member {string} + * @default 'batch' + */ + this.pluginName = 'batch'; + // Set default this.tint = 0xFFFFFF; this.blendMode = BLEND_MODES.NORMAL; @@ -239,7 +247,7 @@ * @param {number} [width=0] - width of the line to draw, will update the objects stored style * @param {number} [color=0] - color of the line to draw, will update the objects stored style * @param {number} [alpha=1] - alpha of the line to draw, will update the objects stored style - * @param {number} [alignment=1] - alignment of the line to draw, (0 = inner, 0.5 = middle, 1 = outter) + * @param {number} [alignment=0.5] - alignment of the line to draw, (0 = inner, 0.5 = middle, 1 = outter) * @param {boolean} [native=false] - If true the lines will be draw using LINES instead of TRIANGLE_STRIP * @return {PIXI.Graphics} This Graphics object. Good for chaining method calls */ @@ -864,7 +872,7 @@ } } - renderer.batch.setObjectRenderer(renderer.plugins.batch); + renderer.batch.setObjectRenderer(renderer.plugins[this.pluginName]); if (this.batches.length) { @@ -877,7 +885,7 @@ batch.worldAlpha = this.worldAlpha * batch.alpha; - renderer.plugins.batch.render(batch); + renderer.plugins[this.pluginName].render(batch); } } } diff --git a/packages/interaction/src/InteractionManager.js b/packages/interaction/src/InteractionManager.js index 0df6545..f4664af 100644 --- a/packages/interaction/src/InteractionManager.js +++ b/packages/interaction/src/InteractionManager.js @@ -682,7 +682,7 @@ * other DOM elements on top of the renderers Canvas element. With this you'll be bale to delegate * another DOM element to receive those events. * - * @param {HTMLCanvasElement} element - the DOM element which will receive mouse and touch events. + * @param {HTMLElement} 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). */ setTargetElement(element, resolution = 1) @@ -875,8 +875,6 @@ } this.setCursorMode(this.cursor); - - // TODO } /** @@ -1467,14 +1465,8 @@ interactionEvent.data.originalEvent = originalEvent; - const interactive = event.pointerType === 'touch' ? this.moveWhenInside : true; + this.processInteractive(interactionEvent, this.renderer._lastObjectRendered, this.processPointerMove, true); - this.processInteractive( - interactionEvent, - this.renderer._lastObjectRendered, - this.processPointerMove, - interactive - ); this.emit('pointermove', interactionEvent); if (event.pointerType === 'touch') this.emit('touchmove', interactionEvent); if (event.pointerType === 'mouse' || event.pointerType === 'pen') this.emit('mousemove', interactionEvent); diff --git a/packages/prepare/src/Prepare.js b/packages/prepare/src/Prepare.js index b7f2819..ba6ed92 100644 --- a/packages/prepare/src/Prepare.js +++ b/packages/prepare/src/Prepare.js @@ -45,7 +45,7 @@ // reuploads the texture without need for preparing it again if (!item._glTextures[renderer.CONTEXT_UID]) { - renderer.texture.updateTexture(item); + renderer.texture.bind(item); } return true; diff --git a/packages/text/src/Text.js b/packages/text/src/Text.js index e702d74..b1625d0 100644 --- a/packages/text/src/Text.js +++ b/packages/text/src/Text.js @@ -330,9 +330,10 @@ /** * Renders the object using the WebGL renderer * + * @private * @param {PIXI.Renderer} renderer - The renderer */ - render(renderer) + _render(renderer) { if (this._autoResolution && this._resolution !== renderer.resolution) { @@ -342,26 +343,7 @@ this.updateText(true); - super.render(renderer); - } - - /** - * Renders the object using the Canvas renderer - * - * @private - * @param {PIXI.CanvasRenderer} renderer - The renderer - */ - _renderCanvas(renderer) - { - if (this._autoResolution && this._resolution !== renderer.resolution) - { - this._resolution = renderer.resolution; - this.dirty = true; - } - - this.updateText(true); - - super._renderCanvas(renderer); + super._render(renderer); } /** diff --git a/packages/utils/src/browser/hello.js b/packages/utils/src/browser/hello.js index cf1a105..081efd3 100644 --- a/packages/utils/src/browser/hello.js +++ b/packages/utils/src/browser/hello.js @@ -15,7 +15,7 @@ /** * Logs out the version and renderer information for this running instance of PIXI. * If you don't want to see this message you can run `PIXI.utils.skipHello()` before - * creating your renderer. Keep in mind that doing that will forever makes you a jerk face. + * creating your renderer. Keep in mind that doing that will forever make you a jerk face. * * @static * @function sayHello diff --git a/tools/integration-tests/package.json b/tools/integration-tests/package.json index d8fbbfa..3ad5fea 100644 --- a/tools/integration-tests/package.json +++ b/tools/integration-tests/package.json @@ -9,6 +9,7 @@ "@pixi/canvas-mesh": "^5.0.4", "@pixi/canvas-renderer": "^5.0.4", "@pixi/canvas-sprite": "^5.0.4", + "@pixi/canvas-text": "^5.0.4", "@pixi/core": "^5.0.4", "@pixi/display": "^5.0.4", "@pixi/graphics": "^5.0.4", diff --git a/tools/integration-tests/test/display/getLocalBounds.js b/tools/integration-tests/test/display/getLocalBounds.js index ae99ee3..28efe81 100644 --- a/tools/integration-tests/test/display/getLocalBounds.js +++ b/tools/integration-tests/test/display/getLocalBounds.js @@ -10,6 +10,7 @@ const { CanvasMeshRenderer } = require('@pixi/canvas-mesh'); require('@pixi/canvas-display'); +require('@pixi/canvas-text'); CanvasRenderer.registerPlugin('sprite', CanvasSpriteRenderer); CanvasRenderer.registerPlugin('graphics', CanvasGraphicsRenderer);