diff --git a/packages/graphics/src/GraphicsGeometry.js b/packages/graphics/src/GraphicsGeometry.js index 1cdb69b..97a1178 100644 --- a/packages/graphics/src/GraphicsGeometry.js +++ b/packages/graphics/src/GraphicsGeometry.js @@ -1,7 +1,7 @@ import { SHAPES } from '@pixi/math'; import { Bounds } from '@pixi/display'; import { BatchGeometry, BatchDrawCall, BaseTexture } from '@pixi/core'; -import { DRAW_MODES } from '@pixi/constants'; +import { DRAW_MODES, WRAP_MODES } from '@pixi/constants'; import GraphicsData from './GraphicsData'; import buildCircle from './utils/buildCircle'; @@ -63,9 +63,9 @@ super(); /** - * An array of points to draw + * An array of points to draw, 2 numbers per point * - * @member {PIXI.Point[]} + * @member {number[]} * @protected */ this.points = []; @@ -425,20 +425,22 @@ const uvs = this.uvs; - let batchPart = this.batches.pop() - || BATCH_POOL.pop() - || new BatchPart(); + let batchPart = null; + let currentTexture = null; + let currentColor = 0; + let currentNative = false; - batchPart.style = batchPart.style - || this.graphicsData[0].fillStyle - || this.graphicsData[0].lineStyle; + if (this.batches.length > 0) + { + batchPart = this.batches[this.batches.length - 1]; - let currentTexture = batchPart.style.texture.baseTexture; - let currentColor = batchPart.style.color + batchPart.style.alpha; + const style = batchPart.style; - this.batches.push(batchPart); + currentTexture = style.texture.baseTexture; + currentColor = style.color + style.alpha; + currentNative = style.native; + } - // TODO - this can be simplified for (let i = this.shapeIndex; i < this.graphicsData.length; i++) { this.shapeIndex++; @@ -465,31 +467,36 @@ const nextTexture = style.texture.baseTexture; - if (currentTexture !== nextTexture || (style.color + style.alpha) !== currentColor) + const index = this.indices.length; + const attribIndex = this.points.length / 2; + + // close batch if style is different + if (batchPart + && (currentTexture !== nextTexture + || currentColor !== (style.color + style.alpha) + || currentNative !== style.native)) { - // TODO use a const - nextTexture.wrapMode = 10497; - currentTexture = nextTexture; - currentColor = style.color + style.alpha; - - const index = this.indices.length; - const attribIndex = this.points.length / 2; - batchPart.size = index - batchPart.start; batchPart.attribSize = attribIndex - batchPart.attribStart; if (batchPart.size > 0) { - batchPart = BATCH_POOL.pop() || new BatchPart(); - - this.batches.push(batchPart); + batchPart = null; } + } + // spawn new batch if its first batch or previous was closed + if (!batchPart) + { + batchPart = BATCH_POOL.pop() || new BatchPart(); + this.batches.push(batchPart); + nextTexture.wrapMode = WRAP_MODES.REPEAT; + currentTexture = nextTexture; + currentColor = style.color + style.alpha; + currentNative = style.native; batchPart.style = style; batchPart.start = index; batchPart.attribStart = attribIndex; - - // TODO add this to the render part.. } const start = this.points.length / 2; diff --git a/packages/graphics/src/GraphicsGeometry.js b/packages/graphics/src/GraphicsGeometry.js index 1cdb69b..97a1178 100644 --- a/packages/graphics/src/GraphicsGeometry.js +++ b/packages/graphics/src/GraphicsGeometry.js @@ -1,7 +1,7 @@ import { SHAPES } from '@pixi/math'; import { Bounds } from '@pixi/display'; import { BatchGeometry, BatchDrawCall, BaseTexture } from '@pixi/core'; -import { DRAW_MODES } from '@pixi/constants'; +import { DRAW_MODES, WRAP_MODES } from '@pixi/constants'; import GraphicsData from './GraphicsData'; import buildCircle from './utils/buildCircle'; @@ -63,9 +63,9 @@ super(); /** - * An array of points to draw + * An array of points to draw, 2 numbers per point * - * @member {PIXI.Point[]} + * @member {number[]} * @protected */ this.points = []; @@ -425,20 +425,22 @@ const uvs = this.uvs; - let batchPart = this.batches.pop() - || BATCH_POOL.pop() - || new BatchPart(); + let batchPart = null; + let currentTexture = null; + let currentColor = 0; + let currentNative = false; - batchPart.style = batchPart.style - || this.graphicsData[0].fillStyle - || this.graphicsData[0].lineStyle; + if (this.batches.length > 0) + { + batchPart = this.batches[this.batches.length - 1]; - let currentTexture = batchPart.style.texture.baseTexture; - let currentColor = batchPart.style.color + batchPart.style.alpha; + const style = batchPart.style; - this.batches.push(batchPart); + currentTexture = style.texture.baseTexture; + currentColor = style.color + style.alpha; + currentNative = style.native; + } - // TODO - this can be simplified for (let i = this.shapeIndex; i < this.graphicsData.length; i++) { this.shapeIndex++; @@ -465,31 +467,36 @@ const nextTexture = style.texture.baseTexture; - if (currentTexture !== nextTexture || (style.color + style.alpha) !== currentColor) + const index = this.indices.length; + const attribIndex = this.points.length / 2; + + // close batch if style is different + if (batchPart + && (currentTexture !== nextTexture + || currentColor !== (style.color + style.alpha) + || currentNative !== style.native)) { - // TODO use a const - nextTexture.wrapMode = 10497; - currentTexture = nextTexture; - currentColor = style.color + style.alpha; - - const index = this.indices.length; - const attribIndex = this.points.length / 2; - batchPart.size = index - batchPart.start; batchPart.attribSize = attribIndex - batchPart.attribStart; if (batchPart.size > 0) { - batchPart = BATCH_POOL.pop() || new BatchPart(); - - this.batches.push(batchPart); + batchPart = null; } + } + // spawn new batch if its first batch or previous was closed + if (!batchPart) + { + batchPart = BATCH_POOL.pop() || new BatchPart(); + this.batches.push(batchPart); + nextTexture.wrapMode = WRAP_MODES.REPEAT; + currentTexture = nextTexture; + currentColor = style.color + style.alpha; + currentNative = style.native; batchPart.style = style; batchPart.start = index; batchPart.attribStart = attribIndex; - - // TODO add this to the render part.. } const start = this.points.length / 2; diff --git a/packages/graphics/src/utils/buildLine.js b/packages/graphics/src/utils/buildLine.js index ebddf05..f194a39 100644 --- a/packages/graphics/src/utils/buildLine.js +++ b/packages/graphics/src/utils/buildLine.js @@ -250,7 +250,9 @@ { let i = 0; - const points = graphicsData.points || graphicsData.shape.points; + const shape = graphicsData.shape; + const points = graphicsData.points || shape.points; + const closedShape = shape.type !== SHAPES.POLY || shape.closeStroke; if (points.length === 0) return; @@ -258,21 +260,21 @@ const indices = graphicsGeometry.indices; const length = points.length / 2; - let indexStart = verts.length / 2; - // sort color + const startIndex = verts.length / 2; + let currentIndex = startIndex; + + verts.push(points[0], points[1]); for (i = 1; i < length; i++) { - const p1x = points[(i - 1) * 2]; - const p1y = points[((i - 1) * 2) + 1]; + verts.push(points[i * 2], points[(i * 2) + 1]); + indices.push(currentIndex - 1, currentIndex); - const p2x = points[i * 2]; - const p2y = points[(i * 2) + 1]; + currentIndex++; + } - verts.push(p1x, p1y); - - verts.push(p2x, p2y); - - indices.push(indexStart++, indexStart++); + if (closedShape) + { + indices.push(currentIndex - 1, startIndex); } }