From dbafd9a70cb7df462c135f7ace9e85e079f3f6ed Mon Sep 17 00:00:00 2001 From: Felipe Alfonso Date: Wed, 18 Apr 2018 18:15:43 -0300 Subject: [PATCH] Fixed order of matrix transformation on: -emitter -blitter -sprite -mesh -bitmap text --- .../webgl/pipelines/TextureTintPipeline.js | 178 +++++++++++------- 1 file changed, 111 insertions(+), 67 deletions(-) diff --git a/src/renderer/webgl/pipelines/TextureTintPipeline.js b/src/renderer/webgl/pipelines/TextureTintPipeline.js index 2bf3246bb..33066d42c 100644 --- a/src/renderer/webgl/pipelines/TextureTintPipeline.js +++ b/src/renderer/webgl/pipelines/TextureTintPipeline.js @@ -401,29 +401,16 @@ var TextureTintPipeline = new Class({ var vertexCapacity = this.vertexCapacity; var texture = emitterManager.defaultFrame.source.glTexture; var pca, pcb, pcc, pcd, pce, pcf; + var pma, pmb, pmc, pmd, pme, pmf; if (parentMatrix) { - var pma = parentMatrix[0]; - var pmb = parentMatrix[1]; - var pmc = parentMatrix[2]; - var pmd = parentMatrix[3]; - var pme = parentMatrix[4]; - var pmf = parentMatrix[5]; - - pca = cma * pma + cmb * pmc; - pcb = cma * pmb + cmb * pmd; - pcc = cmc * pma + cmd * pmc; - pcd = cmc * pmb + cmd * pmd; - pce = cme * pma + cmf * pmc + pme; - pcf = cme * pmb + cmf * pmd + pmf; - - cma = pca; - cmb = pcb; - cmc = pcc; - cmd = pcd; - cme = pce; - cmf = pcf; + pma = parentMatrix[0]; + pmb = parentMatrix[1]; + pmc = parentMatrix[2]; + pmd = parentMatrix[3]; + pme = parentMatrix[4]; + pmf = parentMatrix[5]; } this.setTexture2D(texture, 0); @@ -438,6 +425,31 @@ var TextureTintPipeline = new Class({ var scrollX = cameraScrollX * emitter.scrollFactorX; var scrollY = cameraScrollY * emitter.scrollFactorY; + if (parentMatrix) + { + var cse = -scrollX; + var csf = -scrollY; + var pse = cse * cma + csf * cmc + cme; + var psf = cse * cmb + csf * cmd + cmf; + var pca = pma * cma + pmb * cmc; + var pcb = pma * cmb + pmb * cmd; + var pcc = pmc * cma + pmd * cmc; + var pcd = pmc * cmb + pmd * cmd; + var pce = pme * cma + pmf * cmc + pse; + var pcf = pme * cmb + pmf * cmd + psf; + + cma = pca; + cmb = pcb; + cmc = pcc; + cmd = pcd; + cme = pce; + cmf = pcf; + + scrollX = 0.0; + scrollY = 0.0; + } + + if (!emitter.visible || aliveLength === 0) { continue; @@ -474,11 +486,11 @@ var TextureTintPipeline = new Class({ var sr = sin(particle.rotation); var cr = cos(particle.rotation); var sra = cr * particle.scaleX; - var srb = -sr * particle.scaleX; - var src = sr * particle.scaleY; + var srb = sr * particle.scaleX; + var src = -sr * particle.scaleY; var srd = cr * particle.scaleY; - var sre = particle.x - scrollX * particle.scrollFactorX; - var srf = particle.y - scrollY * particle.scrollFactorY; + var sre = particle.x - scrollX; + var srf = particle.y - scrollY; var mva = sra * cma + srb * cmc; var mvb = sra * cmb + srb * cmd; var mvc = src * cma + srd * cmc; @@ -600,8 +612,6 @@ var TextureTintPipeline = new Class({ var cameraScrollY = camera.scrollY * blitter.scrollFactorY; var batchCount = Math.ceil(length / this.maxQuads); var batchOffset = 0; - var blitterX = blitter.x - cameraScrollX; - var blitterY = blitter.y - cameraScrollY; if (parentMatrix) { @@ -611,12 +621,16 @@ var TextureTintPipeline = new Class({ var pmd = parentMatrix[3]; var pme = parentMatrix[4]; var pmf = parentMatrix[5]; - var pca = a * pma + b * pmc; - var pcb = a * pmb + b * pmd; - var pcc = c * pma + d * pmc; - var pcd = c * pmb + d * pmd; - var pce = e * pma + f * pmc + pme; - var pcf = e * pmb + f * pmd + pmf; + var cse = -cameraScrollX; + var csf = -cameraScrollY; + var pse = cse * cma + csf * cmc + cme; + var psf = cse * cmb + csf * cmd + cmf; + var pca = pma * cma + pmb * cmc; + var pcb = pma * cmb + pmb * cmd; + var pcc = pmc * cma + pmd * cmc; + var pcd = pmc * cmb + pmd * cmd; + var pce = pme * cma + pmf * cmc + pse; + var pcf = pme * cmb + pmf * cmd + psf; a = pca; b = pcb; @@ -624,8 +638,14 @@ var TextureTintPipeline = new Class({ d = pcd; e = pce; f = pcf; + + cameraScrollX = 0.0; + cameraScrollY = 0.0; } + var blitterX = blitter.x - cameraScrollX; + var blitterY = blitter.y - cameraScrollY; + for (var batchIndex = 0; batchIndex < batchCount; ++batchIndex) { var batchSize = Math.min(length, this.maxQuads); @@ -757,11 +777,11 @@ var TextureTintPipeline = new Class({ var y = -sprite.displayOriginY + frame.y + ((frame.height) * (flipY ? 1.0 : 0.0)); var xw = (roundPixels ? (x|0) : x) + width; var yh = (roundPixels ? (y|0) : y) + height; - var translateX = sprite.x - camera.scrollX * sprite.scrollFactorX; - var translateY = sprite.y - camera.scrollY * sprite.scrollFactorY; + var translateX = sprite.x; + var translateY = sprite.y; var scaleX = sprite.scaleX; var scaleY = sprite.scaleY; - var rotation = -sprite.rotation; + var rotation = sprite.rotation; var alphaTL = sprite._alphaTL; var alphaTR = sprite._alphaTR; var alphaBL = sprite._alphaBL; @@ -773,11 +793,11 @@ var TextureTintPipeline = new Class({ var sr = Math.sin(rotation); var cr = Math.cos(rotation); var sra = cr * scaleX; - var srb = -sr * scaleX; - var src = sr * scaleY; + var srb = sr * scaleX; + var src = -sr * scaleY; var srd = cr * scaleY; - var sre = translateX; - var srf = translateY; + var sre = sprite.x; + var srf = sprite.y; var cma = cameraMatrix[0]; var cmb = cameraMatrix[1]; var cmc = cameraMatrix[2]; @@ -794,12 +814,17 @@ var TextureTintPipeline = new Class({ var pmd = parentMatrix[3]; var pme = parentMatrix[4]; var pmf = parentMatrix[5]; - var pca = cma * pma + cmb * pmc; - var pcb = cma * pmb + cmb * pmd; - var pcc = cmc * pma + cmd * pmc; - var pcd = cmc * pmb + cmd * pmd; - var pce = cme * pma + cmf * pmc + pme; - var pcf = cme * pmb + cmf * pmd + pmf; + var cse = -camera.scrollX * sprite.scrollFactorX; + var csf = -camera.scrollY * sprite.scrollFactorY; + var pse = cse * cma + csf * cmc + cme; + var psf = cse * cmb + csf * cmd + cmf; + var pca = pma * cma + pmb * cmc; + var pcb = pma * cmb + pmb * cmd; + var pcc = pmc * cma + pmd * cmc; + var pcd = pmc * cmb + pmd * cmd; + var pce = pme * cma + pmf * cmc + pse; + var pcf = pme * cmb + pmf * cmd + psf; + mva = sra * pca + srb * pcc; mvb = sra * pcb + srb * pcd; mvc = src * pca + srd * pcc; @@ -809,6 +834,9 @@ var TextureTintPipeline = new Class({ } else { + sre -= camera.scrollX * sprite.scrollFactorX; + srf -= camera.scrollY * sprite.scrollFactorY; + mva = sra * cma + srb * cmc; mvb = sra * cmb + srb * cmd; mvc = src * cma + srd * cmc; @@ -921,16 +949,16 @@ var TextureTintPipeline = new Class({ var cameraMatrix = camera.matrix.matrix; var frame = mesh.frame; var texture = mesh.texture.source[frame.sourceIndex].glTexture; - var translateX = mesh.x - camera.scrollX * mesh.scrollFactorX; - var translateY = mesh.y - camera.scrollY * mesh.scrollFactorY; + var translateX = mesh.x; + var translateY = mesh.y; var scaleX = mesh.scaleX; var scaleY = mesh.scaleY; - var rotation = -mesh.rotation; + var rotation = mesh.rotation; var sr = Math.sin(rotation); var cr = Math.cos(rotation); var sra = cr * scaleX; - var srb = -sr * scaleX; - var src = sr * scaleY; + var srb = sr * scaleX; + var src = -sr * scaleY; var srd = cr * scaleY; var sre = translateX; var srf = translateY; @@ -951,12 +979,17 @@ var TextureTintPipeline = new Class({ var pmd = parentMatrix[3]; var pme = parentMatrix[4]; var pmf = parentMatrix[5]; - var pca = cma * pma + cmb * pmc; - var pcb = cma * pmb + cmb * pmd; - var pcc = cmc * pma + cmd * pmc; - var pcd = cmc * pmb + cmd * pmd; - var pce = cme * pma + cmf * pmc + pme; - var pcf = cme * pmb + cmf * pmd + pmf; + var cse = -camera.scrollX * mesh.scrollFactorX; + var csf = -camera.scrollY * mesh.scrollFactorY; + var pse = cse * cma + csf * cmc + cme; + var psf = cse * cmb + csf * cmd + cmf; + var pca = pma * cma + pmb * cmc; + var pcb = pma * cmb + pmb * cmd; + var pcc = pmc * cma + pmd * cmc; + var pcd = pmc * cmb + pmd * cmd; + var pce = pme * cma + pmf * cmc + pse; + var pcf = pme * cmb + pmf * cmd + psf; + mva = sra * pca + srb * pcc; mvb = sra * pcb + srb * pcd; mvc = src * pca + srd * pcc; @@ -966,6 +999,9 @@ var TextureTintPipeline = new Class({ } else { + sre -= camera.scrollX * mesh.scrollFactorX; + srf -= camera.scrollY * mesh.scrollFactorY; + mva = sra * cma + srb * cmc; mvb = sra * cmb + srb * cmd; mvc = src * cma + srd * cmc; @@ -1090,17 +1126,17 @@ var TextureTintPipeline = new Class({ var vmax = 0; var lastGlyph = null; var lastCharCode = 0; - var translateX = (srcX - cameraScrollX) + frame.x; - var translateY = (srcY - cameraScrollY) + frame.y; - var rotation = -bitmapText.rotation; + var translateX = srcX + frame.x; + var translateY = srcY + frame.y; + var rotation = bitmapText.rotation; var scaleX = bitmapText.scaleX; var scaleY = bitmapText.scaleY; var letterSpacing = bitmapText.letterSpacing; var sr = Math.sin(rotation); var cr = Math.cos(rotation); var sra = cr * scaleX; - var srb = -sr * scaleX; - var src = sr * scaleY; + var srb = sr * scaleX; + var src = -sr * scaleY; var srd = cr * scaleY; var sre = translateX; var srf = translateY; @@ -1121,12 +1157,17 @@ var TextureTintPipeline = new Class({ var pmd = parentMatrix[3]; var pme = parentMatrix[4]; var pmf = parentMatrix[5]; - var pca = cma * pma + cmb * pmc; - var pcb = cma * pmb + cmb * pmd; - var pcc = cmc * pma + cmd * pmc; - var pcd = cmc * pmb + cmd * pmd; - var pce = cme * pma + cmf * pmc + pme; - var pcf = cme * pmb + cmf * pmd + pmf; + var cse = -cameraScrollX; + var csf = -cameraScrollY; + var pse = cse * cma + csf * cmc + cme; + var psf = cse * cmb + csf * cmd + cmf; + var pca = pma * cma + pmb * cmc; + var pcb = pma * cmb + pmb * cmd; + var pcc = pmc * cma + pmd * cmc; + var pcd = pmc * cmb + pmd * cmd; + var pce = pme * cma + pmf * cmc + pse; + var pcf = pme * cmb + pmf * cmd + psf; + mva = sra * pca + srb * pcc; mvb = sra * pcb + srb * pcd; mvc = src * pca + srd * pcc; @@ -1136,6 +1177,9 @@ var TextureTintPipeline = new Class({ } else { + sre -= cameraScrollX; + srf -= cameraScrollY; + mva = sra * cma + srb * cmc; mvb = sra * cmb + srb * cmd; mvc = src * cma + srd * cmc;