mirror of
https://github.com/photonstorm/phaser
synced 2024-11-21 20:23:19 +00:00
Oh pixelStorei you tricky little beast!
This commit is contained in:
Richard Davey
parent
0c87eef039
commit
eda554bd1d
3 changed files with 523 additions and 49 deletions
541
plugins/spine/dist/SpinePlugin.js
vendored
541
plugins/spine/dist/SpinePlugin.js
vendored
|
|
@ -9876,6 +9876,96 @@ module.exports = {
|
|||
};
|
||||
|
||||
|
||||
/***/ }),
|
||||
|
||||
/***/ "../../../src/renderer/canvas/utils/SetTransform.js":
|
||||
/*!********************************************************************!*\
|
||||
!*** D:/wamp/www/phaser/src/renderer/canvas/utils/SetTransform.js ***!
|
||||
\********************************************************************/
|
||||
/*! no static exports found */
|
||||
/***/ (function(module, exports) {
|
||||
|
||||
/**
|
||||
* @author Richard Davey <rich@photonstorm.com>
|
||||
* @copyright 2019 Photon Storm Ltd.
|
||||
* @license {@link https://opensource.org/licenses/MIT|MIT License}
|
||||
*/
|
||||
|
||||
/**
|
||||
* Takes a reference to the Canvas Renderer, a Canvas Rendering Context, a Game Object, a Camera and a parent matrix
|
||||
* and then performs the following steps:
|
||||
*
|
||||
* 1. Checks the alpha of the source combined with the Camera alpha. If 0 or less it aborts.
|
||||
* 2. Takes the Camera and Game Object matrix and multiplies them, combined with the parent matrix if given.
|
||||
* 3. Sets the blend mode of the context to be that used by the Game Object.
|
||||
* 4. Sets the alpha value of the context to be that used by the Game Object combined with the Camera.
|
||||
* 5. Saves the context state.
|
||||
* 6. Sets the final matrix values into the context via setTransform.
|
||||
*
|
||||
* This function is only meant to be used internally. Most of the Canvas Renderer classes use it.
|
||||
*
|
||||
* @function Phaser.Renderer.Canvas.SetTransform
|
||||
* @since 3.12.0
|
||||
*
|
||||
* @param {Phaser.Renderer.Canvas.CanvasRenderer} renderer - A reference to the current active Canvas renderer.
|
||||
* @param {CanvasRenderingContext2D} ctx - The canvas context to set the transform on.
|
||||
* @param {Phaser.GameObjects.GameObject} src - The Game Object being rendered. Can be any type that extends the base class.
|
||||
* @param {Phaser.Cameras.Scene2D.Camera} camera - The Camera that is rendering the Game Object.
|
||||
* @param {Phaser.GameObjects.Components.TransformMatrix} [parentMatrix] - A parent transform matrix to apply to the Game Object before rendering.
|
||||
*
|
||||
* @return {boolean} `true` if the Game Object context was set, otherwise `false`.
|
||||
*/
|
||||
var SetTransform = function (renderer, ctx, src, camera, parentMatrix)
|
||||
{
|
||||
var alpha = camera.alpha * src.alpha;
|
||||
|
||||
if (alpha <= 0)
|
||||
{
|
||||
// Nothing to see, so don't waste time calculating stuff
|
||||
return false;
|
||||
}
|
||||
|
||||
var camMatrix = renderer._tempMatrix1.copyFromArray(camera.matrix.matrix);
|
||||
var gameObjectMatrix = renderer._tempMatrix2.applyITRS(src.x, src.y, src.rotation, src.scaleX, src.scaleY);
|
||||
var calcMatrix = renderer._tempMatrix3;
|
||||
|
||||
if (parentMatrix)
|
||||
{
|
||||
// Multiply the camera by the parent matrix
|
||||
camMatrix.multiplyWithOffset(parentMatrix, -camera.scrollX * src.scrollFactorX, -camera.scrollY * src.scrollFactorY);
|
||||
|
||||
// Undo the camera scroll
|
||||
gameObjectMatrix.e = src.x;
|
||||
gameObjectMatrix.f = src.y;
|
||||
|
||||
// Multiply by the Sprite matrix, store result in calcMatrix
|
||||
camMatrix.multiply(gameObjectMatrix, calcMatrix);
|
||||
}
|
||||
else
|
||||
{
|
||||
gameObjectMatrix.e -= camera.scrollX * src.scrollFactorX;
|
||||
gameObjectMatrix.f -= camera.scrollY * src.scrollFactorY;
|
||||
|
||||
// Multiply by the Sprite matrix, store result in calcMatrix
|
||||
camMatrix.multiply(gameObjectMatrix, calcMatrix);
|
||||
}
|
||||
|
||||
// Blend Mode
|
||||
ctx.globalCompositeOperation = renderer.blendModes[src.blendMode];
|
||||
|
||||
// Alpha
|
||||
ctx.globalAlpha = alpha;
|
||||
|
||||
ctx.save();
|
||||
|
||||
calcMatrix.setToContext(ctx);
|
||||
|
||||
return true;
|
||||
};
|
||||
|
||||
module.exports = SetTransform;
|
||||
|
||||
|
||||
/***/ }),
|
||||
|
||||
/***/ "../../../src/scene/events/BOOT_EVENT.js":
|
||||
|
|
@ -11480,7 +11570,7 @@ var Class = __webpack_require__(/*! ../../../src/utils/Class */ "../../../src/ut
|
|||
var GetValue = __webpack_require__(/*! ../../../src/utils/object/GetValue */ "../../../src/utils/object/GetValue.js");
|
||||
var ScenePlugin = __webpack_require__(/*! ../../../src/plugins/ScenePlugin */ "../../../src/plugins/ScenePlugin.js");
|
||||
var SpineFile = __webpack_require__(/*! ./SpineFile */ "./SpineFile.js");
|
||||
var Spine = __webpack_require__(/*! Spine */ "./runtimes/spine-webgl.js");
|
||||
var Spine = __webpack_require__(/*! Spine */ "./runtimes/spine-both.js");
|
||||
var SpineGameObject = __webpack_require__(/*! ./gameobject/SpineGameObject */ "./gameobject/SpineGameObject.js");
|
||||
var Matrix4 = __webpack_require__(/*! ../../../src/math/Matrix4 */ "../../../src/math/Matrix4.js");
|
||||
|
||||
|
|
@ -11524,6 +11614,10 @@ var SpinePlugin = new Class({
|
|||
this.drawDebug = false;
|
||||
|
||||
this.gl;
|
||||
this.renderer;
|
||||
|
||||
this.sceneRenderer;
|
||||
|
||||
this.mvp;
|
||||
this.shader;
|
||||
this.batcher;
|
||||
|
|
@ -11536,6 +11630,7 @@ var SpinePlugin = new Class({
|
|||
{
|
||||
this.runtime = Spine.webgl;
|
||||
|
||||
this.renderer = game.renderer;
|
||||
this.gl = game.renderer.gl;
|
||||
|
||||
this.getAtlas = this.getAtlasWebGL;
|
||||
|
|
@ -11544,6 +11639,8 @@ var SpinePlugin = new Class({
|
|||
{
|
||||
this.runtime = Spine.canvas;
|
||||
|
||||
this.renderer = game.renderer;
|
||||
|
||||
this.getAtlas = this.getAtlasCanvas;
|
||||
}
|
||||
|
||||
|
|
@ -11615,20 +11712,24 @@ var SpinePlugin = new Class({
|
|||
|
||||
bootWebGL: function ()
|
||||
{
|
||||
var gl = this.gl;
|
||||
var runtime = this.runtime;
|
||||
// var gl = this.gl;
|
||||
// var runtime = this.runtime;
|
||||
|
||||
this.mvp = new Matrix4();
|
||||
// console.log(this.renderer.canvas, (this.renderer.canvas instanceof HTMLCanvasElement));
|
||||
|
||||
this.sceneRenderer = new Spine.webgl.SceneRenderer(this.renderer.canvas, this.gl, true);
|
||||
|
||||
// this.mvp = new Matrix4();
|
||||
|
||||
// Create a simple shader, mesh, model-view-projection matrix and SkeletonRenderer.
|
||||
|
||||
this.shader = runtime.Shader.newTwoColoredTextured(gl);
|
||||
// this.shader = runtime.Shader.newTwoColoredTextured(gl);
|
||||
|
||||
this.batcher = new runtime.PolygonBatcher(gl, true);
|
||||
// this.batcher = new runtime.PolygonBatcher(gl, true);
|
||||
|
||||
this.skeletonRenderer = new runtime.SkeletonRenderer(gl, true);
|
||||
// this.skeletonRenderer = new runtime.SkeletonRenderer(gl, true);
|
||||
|
||||
this.skeletonRenderer.premultipliedAlpha = true;
|
||||
// this.skeletonRenderer.premultipliedAlpha = true;
|
||||
|
||||
// this.shapes = new runtime.ShapeRenderer(gl);
|
||||
// this.debugRenderer = new runtime.SkeletonDebugRenderer(gl);
|
||||
|
|
@ -11659,7 +11760,9 @@ var SpinePlugin = new Class({
|
|||
{
|
||||
var textures = this.textures;
|
||||
|
||||
var gl = this.gl;
|
||||
var gl = this.sceneRenderer.context.gl;
|
||||
|
||||
gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, false);
|
||||
|
||||
atlas = new Spine.TextureAtlas(atlasData, function (path)
|
||||
{
|
||||
|
|
@ -12200,6 +12303,74 @@ var SpineGameObject = new Class({
|
|||
module.exports = SpineGameObject;
|
||||
|
||||
|
||||
/***/ }),
|
||||
|
||||
/***/ "./gameobject/SpineGameObjectCanvasRenderer.js":
|
||||
/*!*****************************************************!*\
|
||||
!*** ./gameobject/SpineGameObjectCanvasRenderer.js ***!
|
||||
\*****************************************************/
|
||||
/*! no static exports found */
|
||||
/***/ (function(module, exports, __webpack_require__) {
|
||||
|
||||
/**
|
||||
* @author Richard Davey <rich@photonstorm.com>
|
||||
* @copyright 2018 Photon Storm Ltd.
|
||||
* @license {@link https://github.com/photonstorm/phaser/blob/master/license.txt|MIT License}
|
||||
*/
|
||||
|
||||
var SetTransform = __webpack_require__(/*! ../../../../src/renderer/canvas/utils/SetTransform */ "../../../src/renderer/canvas/utils/SetTransform.js");
|
||||
|
||||
/**
|
||||
* Renders this Game Object with the Canvas Renderer to the given Camera.
|
||||
* The object will not render if any of its renderFlags are set or it is being actively filtered out by the Camera.
|
||||
* This method should not be called directly. It is a utility function of the Render module.
|
||||
*
|
||||
* @method Phaser.GameObjects.SpineGameObject#renderCanvas
|
||||
* @since 3.16.0
|
||||
* @private
|
||||
*
|
||||
* @param {Phaser.Renderer.Canvas.CanvasRenderer} renderer - A reference to the current active Canvas renderer.
|
||||
* @param {Phaser.GameObjects.SpineGameObject} src - The Game Object being rendered in this call.
|
||||
* @param {number} interpolationPercentage - Reserved for future use and custom pipelines.
|
||||
* @param {Phaser.Cameras.Scene2D.Camera} camera - The Camera that is rendering the Game Object.
|
||||
* @param {Phaser.GameObjects.Components.TransformMatrix} parentMatrix - This transform matrix is defined if the game object is nested
|
||||
*/
|
||||
var SpineGameObjectCanvasRenderer = function (renderer, src, interpolationPercentage, camera, parentMatrix)
|
||||
{
|
||||
var context = renderer.currentContext;
|
||||
|
||||
var plugin = src.plugin;
|
||||
var skeleton = src.skeleton;
|
||||
var skeletonRenderer = plugin.skeletonRenderer;
|
||||
|
||||
if (!skeleton || !SetTransform(renderer, context, src, camera, parentMatrix))
|
||||
{
|
||||
return;
|
||||
}
|
||||
|
||||
skeletonRenderer.ctx = context;
|
||||
|
||||
context.save();
|
||||
|
||||
skeletonRenderer.draw(skeleton);
|
||||
|
||||
if (plugin.drawDebug || src.drawDebug)
|
||||
{
|
||||
context.strokeStyle = '#00ff00';
|
||||
context.beginPath();
|
||||
context.moveTo(-1000, 0);
|
||||
context.lineTo(1000, 0);
|
||||
context.moveTo(0, -1000);
|
||||
context.lineTo(0, 1000);
|
||||
context.stroke();
|
||||
}
|
||||
|
||||
context.restore();
|
||||
};
|
||||
|
||||
module.exports = SpineGameObjectCanvasRenderer;
|
||||
|
||||
|
||||
/***/ }),
|
||||
|
||||
/***/ "./gameobject/SpineGameObjectRender.js":
|
||||
|
|
@ -12223,8 +12394,10 @@ if (true)
|
|||
renderWebGL = __webpack_require__(/*! ./SpineGameObjectWebGLRenderer */ "./gameobject/SpineGameObjectWebGLRenderer.js");
|
||||
}
|
||||
|
||||
if (false)
|
||||
{}
|
||||
if (true)
|
||||
{
|
||||
renderCanvas = __webpack_require__(/*! ./SpineGameObjectCanvasRenderer */ "./gameobject/SpineGameObjectCanvasRenderer.js");
|
||||
}
|
||||
|
||||
module.exports = {
|
||||
|
||||
|
|
@ -12270,13 +12443,18 @@ var RadToDeg = __webpack_require__(/*! ../../../../src/math/RadToDeg */ "../../.
|
|||
var SpineGameObjectWebGLRenderer = function (renderer, src, interpolationPercentage, camera, parentMatrix)
|
||||
{
|
||||
var plugin = src.plugin;
|
||||
var mvp = plugin.mvp;
|
||||
|
||||
var shader = plugin.shader;
|
||||
var batcher = plugin.batcher;
|
||||
var runtime = plugin.runtime;
|
||||
// var mvp = plugin.mvp;
|
||||
|
||||
// var shader = plugin.shader;
|
||||
// var batcher = plugin.batcher;
|
||||
// var runtime = plugin.runtime;
|
||||
|
||||
var skeleton = src.skeleton;
|
||||
var skeletonRenderer = plugin.skeletonRenderer;
|
||||
|
||||
var sceneRenderer = plugin.sceneRenderer;
|
||||
|
||||
// var skeletonRenderer = plugin.skeletonRenderer;
|
||||
|
||||
if (!skeleton)
|
||||
{
|
||||
|
|
@ -12318,8 +12496,8 @@ var SpineGameObjectWebGLRenderer = function (renderer, src, interpolationPercent
|
|||
camMatrix.multiply(spriteMatrix, calcMatrix);
|
||||
}
|
||||
|
||||
var width = renderer.width;
|
||||
var height = renderer.height;
|
||||
var viewportWidth = renderer.width;
|
||||
var viewportHeight = renderer.height;
|
||||
|
||||
skeleton.x = calcMatrix.tx;
|
||||
skeleton.scaleX = calcMatrix.scaleX;
|
||||
|
|
@ -12331,44 +12509,61 @@ var SpineGameObjectWebGLRenderer = function (renderer, src, interpolationPercent
|
|||
}
|
||||
else
|
||||
{
|
||||
skeleton.y = height - calcMatrix.ty;
|
||||
skeleton.y = viewportHeight - calcMatrix.ty;
|
||||
skeleton.scaleY = calcMatrix.scaleY;
|
||||
}
|
||||
|
||||
src.root.rotation = RadToDeg(CounterClockwise(calcMatrix.rotation));
|
||||
|
||||
sceneRenderer.camera.position.x = viewportWidth / 2;
|
||||
sceneRenderer.camera.position.y = viewportHeight / 2;
|
||||
sceneRenderer.camera.viewportWidth = viewportWidth;
|
||||
sceneRenderer.camera.viewportHeight = viewportHeight;
|
||||
|
||||
// Add autoUpdate option
|
||||
skeleton.updateWorldTransform();
|
||||
|
||||
if (renderer.newType)
|
||||
{
|
||||
mvp.ortho(0, width, 0, height, 0, 1);
|
||||
sceneRenderer.begin();
|
||||
|
||||
shader.bind();
|
||||
shader.setUniformi(runtime.Shader.SAMPLER, 0);
|
||||
shader.setUniform4x4f(runtime.Shader.MVP_MATRIX, mvp.val);
|
||||
// mvp.ortho(0, width, 0, height, 0, 1);
|
||||
|
||||
skeletonRenderer.premultipliedAlpha = true;
|
||||
// shader.bind();
|
||||
// shader.setUniformi(runtime.Shader.SAMPLER, 0);
|
||||
// shader.setUniform4x4f(runtime.Shader.MVP_MATRIX, mvp.val);
|
||||
|
||||
batcher.begin(shader);
|
||||
// skeletonRenderer.premultipliedAlpha = true;
|
||||
|
||||
// batcher.setBlendMode(renderer.gl.ONE, renderer.gl.ONE_MINUS_SRC_ALPHA);
|
||||
// batcher.begin(shader);
|
||||
}
|
||||
|
||||
if (renderer.nextTypeMatch)
|
||||
{
|
||||
// batcher.isDrawing = false;
|
||||
// sceneRenderer.batcher.isDrawing = false;
|
||||
}
|
||||
|
||||
// Draw the current skeleton
|
||||
skeletonRenderer.draw(batcher, skeleton);
|
||||
|
||||
sceneRenderer.drawSkeleton(skeleton, true);
|
||||
|
||||
// sceneRenderer.drawSkeletonDebug(skeleton, true);
|
||||
|
||||
// skeletonRenderer.premultipliedAlpha = true;
|
||||
// skeletonRenderer.draw(batcher, skeleton);
|
||||
|
||||
if (!renderer.nextTypeMatch)
|
||||
{
|
||||
// The next object in the display list is not a Spine object, so we end the batch
|
||||
batcher.isDrawing = true;
|
||||
// batcher.isDrawing = true;
|
||||
// sceneRenderer.batcher.isDrawing = true;
|
||||
|
||||
batcher.end();
|
||||
// batcher.end();
|
||||
|
||||
shader.unbind();
|
||||
// shader.unbind();
|
||||
|
||||
sceneRenderer.end();
|
||||
|
||||
renderer.rebindPipeline(renderer.pipelines.TextureTintPipeline);
|
||||
}
|
||||
|
|
@ -12401,10 +12596,10 @@ module.exports = SpineGameObjectWebGLRenderer;
|
|||
|
||||
/***/ }),
|
||||
|
||||
/***/ "./runtimes/spine-webgl.js":
|
||||
/*!*********************************!*\
|
||||
!*** ./runtimes/spine-webgl.js ***!
|
||||
\*********************************/
|
||||
/***/ "./runtimes/spine-both.js":
|
||||
/*!********************************!*\
|
||||
!*** ./runtimes/spine-both.js ***!
|
||||
\********************************/
|
||||
/*! no static exports found */
|
||||
/***/ (function(module, exports) {
|
||||
|
||||
|
|
@ -19262,6 +19457,272 @@ var spine;
|
|||
spine.SwirlEffect = SwirlEffect;
|
||||
})(spine || (spine = {}));
|
||||
var spine;
|
||||
(function (spine) {
|
||||
var canvas;
|
||||
(function (canvas) {
|
||||
var AssetManager = (function (_super) {
|
||||
__extends(AssetManager, _super);
|
||||
function AssetManager(pathPrefix) {
|
||||
if (pathPrefix === void 0) { pathPrefix = ""; }
|
||||
return _super.call(this, function (image) { return new spine.canvas.CanvasTexture(image); }, pathPrefix) || this;
|
||||
}
|
||||
return AssetManager;
|
||||
}(spine.AssetManager));
|
||||
canvas.AssetManager = AssetManager;
|
||||
})(canvas = spine.canvas || (spine.canvas = {}));
|
||||
})(spine || (spine = {}));
|
||||
var spine;
|
||||
(function (spine) {
|
||||
var canvas;
|
||||
(function (canvas) {
|
||||
var CanvasTexture = (function (_super) {
|
||||
__extends(CanvasTexture, _super);
|
||||
function CanvasTexture(image) {
|
||||
return _super.call(this, image) || this;
|
||||
}
|
||||
CanvasTexture.prototype.setFilters = function (minFilter, magFilter) { };
|
||||
CanvasTexture.prototype.setWraps = function (uWrap, vWrap) { };
|
||||
CanvasTexture.prototype.dispose = function () { };
|
||||
return CanvasTexture;
|
||||
}(spine.Texture));
|
||||
canvas.CanvasTexture = CanvasTexture;
|
||||
})(canvas = spine.canvas || (spine.canvas = {}));
|
||||
})(spine || (spine = {}));
|
||||
var spine;
|
||||
(function (spine) {
|
||||
var canvas;
|
||||
(function (canvas) {
|
||||
var SkeletonRenderer = (function () {
|
||||
function SkeletonRenderer(context) {
|
||||
this.triangleRendering = false;
|
||||
this.debugRendering = false;
|
||||
this.vertices = spine.Utils.newFloatArray(8 * 1024);
|
||||
this.tempColor = new spine.Color();
|
||||
this.ctx = context;
|
||||
}
|
||||
SkeletonRenderer.prototype.draw = function (skeleton) {
|
||||
if (this.triangleRendering)
|
||||
this.drawTriangles(skeleton);
|
||||
else
|
||||
this.drawImages(skeleton);
|
||||
};
|
||||
SkeletonRenderer.prototype.drawImages = function (skeleton) {
|
||||
var ctx = this.ctx;
|
||||
var drawOrder = skeleton.drawOrder;
|
||||
if (this.debugRendering)
|
||||
ctx.strokeStyle = "green";
|
||||
ctx.save();
|
||||
for (var i = 0, n = drawOrder.length; i < n; i++) {
|
||||
var slot = drawOrder[i];
|
||||
var attachment = slot.getAttachment();
|
||||
var regionAttachment = null;
|
||||
var region = null;
|
||||
var image = null;
|
||||
if (attachment instanceof spine.RegionAttachment) {
|
||||
regionAttachment = attachment;
|
||||
region = regionAttachment.region;
|
||||
image = region.texture.getImage();
|
||||
}
|
||||
else
|
||||
continue;
|
||||
var skeleton_1 = slot.bone.skeleton;
|
||||
var skeletonColor = skeleton_1.color;
|
||||
var slotColor = slot.color;
|
||||
var regionColor = regionAttachment.color;
|
||||
var alpha = skeletonColor.a * slotColor.a * regionColor.a;
|
||||
var color = this.tempColor;
|
||||
color.set(skeletonColor.r * slotColor.r * regionColor.r, skeletonColor.g * slotColor.g * regionColor.g, skeletonColor.b * slotColor.b * regionColor.b, alpha);
|
||||
var att = attachment;
|
||||
var bone = slot.bone;
|
||||
var w = region.width;
|
||||
var h = region.height;
|
||||
ctx.save();
|
||||
ctx.transform(bone.a, bone.c, bone.b, bone.d, bone.worldX, bone.worldY);
|
||||
ctx.translate(attachment.offset[0], attachment.offset[1]);
|
||||
ctx.rotate(attachment.rotation * Math.PI / 180);
|
||||
var atlasScale = att.width / w;
|
||||
ctx.scale(atlasScale * attachment.scaleX, atlasScale * attachment.scaleY);
|
||||
ctx.translate(w / 2, h / 2);
|
||||
if (attachment.region.rotate) {
|
||||
var t = w;
|
||||
w = h;
|
||||
h = t;
|
||||
ctx.rotate(-Math.PI / 2);
|
||||
}
|
||||
ctx.scale(1, -1);
|
||||
ctx.translate(-w / 2, -h / 2);
|
||||
if (color.r != 1 || color.g != 1 || color.b != 1 || color.a != 1) {
|
||||
ctx.globalAlpha = color.a;
|
||||
}
|
||||
ctx.drawImage(image, region.x, region.y, w, h, 0, 0, w, h);
|
||||
if (this.debugRendering)
|
||||
ctx.strokeRect(0, 0, w, h);
|
||||
ctx.restore();
|
||||
}
|
||||
ctx.restore();
|
||||
};
|
||||
SkeletonRenderer.prototype.drawTriangles = function (skeleton) {
|
||||
var blendMode = null;
|
||||
var vertices = this.vertices;
|
||||
var triangles = null;
|
||||
var drawOrder = skeleton.drawOrder;
|
||||
for (var i = 0, n = drawOrder.length; i < n; i++) {
|
||||
var slot = drawOrder[i];
|
||||
var attachment = slot.getAttachment();
|
||||
var texture = null;
|
||||
var region = null;
|
||||
if (attachment instanceof spine.RegionAttachment) {
|
||||
var regionAttachment = attachment;
|
||||
vertices = this.computeRegionVertices(slot, regionAttachment, false);
|
||||
triangles = SkeletonRenderer.QUAD_TRIANGLES;
|
||||
region = regionAttachment.region;
|
||||
texture = region.texture.getImage();
|
||||
}
|
||||
else if (attachment instanceof spine.MeshAttachment) {
|
||||
var mesh = attachment;
|
||||
vertices = this.computeMeshVertices(slot, mesh, false);
|
||||
triangles = mesh.triangles;
|
||||
texture = mesh.region.renderObject.texture.getImage();
|
||||
}
|
||||
else
|
||||
continue;
|
||||
if (texture != null) {
|
||||
var slotBlendMode = slot.data.blendMode;
|
||||
if (slotBlendMode != blendMode) {
|
||||
blendMode = slotBlendMode;
|
||||
}
|
||||
var skeleton_2 = slot.bone.skeleton;
|
||||
var skeletonColor = skeleton_2.color;
|
||||
var slotColor = slot.color;
|
||||
var attachmentColor = attachment.color;
|
||||
var alpha = skeletonColor.a * slotColor.a * attachmentColor.a;
|
||||
var color = this.tempColor;
|
||||
color.set(skeletonColor.r * slotColor.r * attachmentColor.r, skeletonColor.g * slotColor.g * attachmentColor.g, skeletonColor.b * slotColor.b * attachmentColor.b, alpha);
|
||||
var ctx = this.ctx;
|
||||
if (color.r != 1 || color.g != 1 || color.b != 1 || color.a != 1) {
|
||||
ctx.globalAlpha = color.a;
|
||||
}
|
||||
for (var j = 0; j < triangles.length; j += 3) {
|
||||
var t1 = triangles[j] * 8, t2 = triangles[j + 1] * 8, t3 = triangles[j + 2] * 8;
|
||||
var x0 = vertices[t1], y0 = vertices[t1 + 1], u0 = vertices[t1 + 6], v0 = vertices[t1 + 7];
|
||||
var x1 = vertices[t2], y1 = vertices[t2 + 1], u1 = vertices[t2 + 6], v1 = vertices[t2 + 7];
|
||||
var x2 = vertices[t3], y2 = vertices[t3 + 1], u2 = vertices[t3 + 6], v2 = vertices[t3 + 7];
|
||||
this.drawTriangle(texture, x0, y0, u0, v0, x1, y1, u1, v1, x2, y2, u2, v2);
|
||||
if (this.debugRendering) {
|
||||
ctx.strokeStyle = "green";
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(x0, y0);
|
||||
ctx.lineTo(x1, y1);
|
||||
ctx.lineTo(x2, y2);
|
||||
ctx.lineTo(x0, y0);
|
||||
ctx.stroke();
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
this.ctx.globalAlpha = 1;
|
||||
};
|
||||
SkeletonRenderer.prototype.drawTriangle = function (img, x0, y0, u0, v0, x1, y1, u1, v1, x2, y2, u2, v2) {
|
||||
var ctx = this.ctx;
|
||||
u0 *= img.width;
|
||||
v0 *= img.height;
|
||||
u1 *= img.width;
|
||||
v1 *= img.height;
|
||||
u2 *= img.width;
|
||||
v2 *= img.height;
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(x0, y0);
|
||||
ctx.lineTo(x1, y1);
|
||||
ctx.lineTo(x2, y2);
|
||||
ctx.closePath();
|
||||
x1 -= x0;
|
||||
y1 -= y0;
|
||||
x2 -= x0;
|
||||
y2 -= y0;
|
||||
u1 -= u0;
|
||||
v1 -= v0;
|
||||
u2 -= u0;
|
||||
v2 -= v0;
|
||||
var det = 1 / (u1 * v2 - u2 * v1), a = (v2 * x1 - v1 * x2) * det, b = (v2 * y1 - v1 * y2) * det, c = (u1 * x2 - u2 * x1) * det, d = (u1 * y2 - u2 * y1) * det, e = x0 - a * u0 - c * v0, f = y0 - b * u0 - d * v0;
|
||||
ctx.save();
|
||||
ctx.transform(a, b, c, d, e, f);
|
||||
ctx.clip();
|
||||
ctx.drawImage(img, 0, 0);
|
||||
ctx.restore();
|
||||
};
|
||||
SkeletonRenderer.prototype.computeRegionVertices = function (slot, region, pma) {
|
||||
var skeleton = slot.bone.skeleton;
|
||||
var skeletonColor = skeleton.color;
|
||||
var slotColor = slot.color;
|
||||
var regionColor = region.color;
|
||||
var alpha = skeletonColor.a * slotColor.a * regionColor.a;
|
||||
var multiplier = pma ? alpha : 1;
|
||||
var color = this.tempColor;
|
||||
color.set(skeletonColor.r * slotColor.r * regionColor.r * multiplier, skeletonColor.g * slotColor.g * regionColor.g * multiplier, skeletonColor.b * slotColor.b * regionColor.b * multiplier, alpha);
|
||||
region.computeWorldVertices(slot.bone, this.vertices, 0, SkeletonRenderer.VERTEX_SIZE);
|
||||
var vertices = this.vertices;
|
||||
var uvs = region.uvs;
|
||||
vertices[spine.RegionAttachment.C1R] = color.r;
|
||||
vertices[spine.RegionAttachment.C1G] = color.g;
|
||||
vertices[spine.RegionAttachment.C1B] = color.b;
|
||||
vertices[spine.RegionAttachment.C1A] = color.a;
|
||||
vertices[spine.RegionAttachment.U1] = uvs[0];
|
||||
vertices[spine.RegionAttachment.V1] = uvs[1];
|
||||
vertices[spine.RegionAttachment.C2R] = color.r;
|
||||
vertices[spine.RegionAttachment.C2G] = color.g;
|
||||
vertices[spine.RegionAttachment.C2B] = color.b;
|
||||
vertices[spine.RegionAttachment.C2A] = color.a;
|
||||
vertices[spine.RegionAttachment.U2] = uvs[2];
|
||||
vertices[spine.RegionAttachment.V2] = uvs[3];
|
||||
vertices[spine.RegionAttachment.C3R] = color.r;
|
||||
vertices[spine.RegionAttachment.C3G] = color.g;
|
||||
vertices[spine.RegionAttachment.C3B] = color.b;
|
||||
vertices[spine.RegionAttachment.C3A] = color.a;
|
||||
vertices[spine.RegionAttachment.U3] = uvs[4];
|
||||
vertices[spine.RegionAttachment.V3] = uvs[5];
|
||||
vertices[spine.RegionAttachment.C4R] = color.r;
|
||||
vertices[spine.RegionAttachment.C4G] = color.g;
|
||||
vertices[spine.RegionAttachment.C4B] = color.b;
|
||||
vertices[spine.RegionAttachment.C4A] = color.a;
|
||||
vertices[spine.RegionAttachment.U4] = uvs[6];
|
||||
vertices[spine.RegionAttachment.V4] = uvs[7];
|
||||
return vertices;
|
||||
};
|
||||
SkeletonRenderer.prototype.computeMeshVertices = function (slot, mesh, pma) {
|
||||
var skeleton = slot.bone.skeleton;
|
||||
var skeletonColor = skeleton.color;
|
||||
var slotColor = slot.color;
|
||||
var regionColor = mesh.color;
|
||||
var alpha = skeletonColor.a * slotColor.a * regionColor.a;
|
||||
var multiplier = pma ? alpha : 1;
|
||||
var color = this.tempColor;
|
||||
color.set(skeletonColor.r * slotColor.r * regionColor.r * multiplier, skeletonColor.g * slotColor.g * regionColor.g * multiplier, skeletonColor.b * slotColor.b * regionColor.b * multiplier, alpha);
|
||||
var numVertices = mesh.worldVerticesLength / 2;
|
||||
if (this.vertices.length < mesh.worldVerticesLength) {
|
||||
this.vertices = spine.Utils.newFloatArray(mesh.worldVerticesLength);
|
||||
}
|
||||
var vertices = this.vertices;
|
||||
mesh.computeWorldVertices(slot, 0, mesh.worldVerticesLength, vertices, 0, SkeletonRenderer.VERTEX_SIZE);
|
||||
var uvs = mesh.uvs;
|
||||
for (var i = 0, n = numVertices, u = 0, v = 2; i < n; i++) {
|
||||
vertices[v++] = color.r;
|
||||
vertices[v++] = color.g;
|
||||
vertices[v++] = color.b;
|
||||
vertices[v++] = color.a;
|
||||
vertices[v++] = uvs[u++];
|
||||
vertices[v++] = uvs[u++];
|
||||
v += 2;
|
||||
}
|
||||
return vertices;
|
||||
};
|
||||
SkeletonRenderer.QUAD_TRIANGLES = [0, 1, 2, 2, 3, 0];
|
||||
SkeletonRenderer.VERTEX_SIZE = 2 + 2 + 4;
|
||||
return SkeletonRenderer;
|
||||
}());
|
||||
canvas.SkeletonRenderer = SkeletonRenderer;
|
||||
})(canvas = spine.canvas || (spine.canvas = {}));
|
||||
})(spine || (spine = {}));
|
||||
var spine;
|
||||
(function (spine) {
|
||||
var webgl;
|
||||
(function (webgl) {
|
||||
|
|
@ -21794,16 +22255,16 @@ var spine;
|
|||
var _this = this;
|
||||
this.restorables = new Array();
|
||||
if (canvasOrContext instanceof HTMLCanvasElement) {
|
||||
var canvas = canvasOrContext;
|
||||
this.gl = (canvas.getContext("webgl", contextConfig) || canvas.getContext("experimental-webgl", contextConfig));
|
||||
this.canvas = canvas;
|
||||
canvas.addEventListener("webglcontextlost", function (e) {
|
||||
var canvas_1 = canvasOrContext;
|
||||
this.gl = (canvas_1.getContext("webgl", contextConfig) || canvas_1.getContext("experimental-webgl", contextConfig));
|
||||
this.canvas = canvas_1;
|
||||
canvas_1.addEventListener("webglcontextlost", function (e) {
|
||||
var event = e;
|
||||
if (e) {
|
||||
e.preventDefault();
|
||||
}
|
||||
});
|
||||
canvas.addEventListener("webglcontextrestored", function (e) {
|
||||
canvas_1.addEventListener("webglcontextrestored", function (e) {
|
||||
for (var i = 0, n = _this.restorables.length; i < n; i++) {
|
||||
_this.restorables[i].restore();
|
||||
}
|
||||
|
|
@ -21861,7 +22322,7 @@ var spine;
|
|||
webgl.WebGLBlendModeConverter = WebGLBlendModeConverter;
|
||||
})(webgl = spine.webgl || (spine.webgl = {}));
|
||||
})(spine || (spine = {}));
|
||||
//# sourceMappingURL=spine-webgl.js.map
|
||||
|
||||
|
||||
/*** EXPORTS FROM exports-loader ***/
|
||||
module.exports = spine;
|
||||
|
|
|
|||
2
plugins/spine/dist/SpinePlugin.js.map
vendored
2
plugins/spine/dist/SpinePlugin.js.map
vendored
File diff suppressed because one or more lines are too long
|
|
@ -52,6 +52,10 @@ var SpinePlugin = new Class({
|
|||
this.drawDebug = false;
|
||||
|
||||
this.gl;
|
||||
this.renderer;
|
||||
|
||||
this.sceneRenderer;
|
||||
|
||||
this.mvp;
|
||||
this.shader;
|
||||
this.batcher;
|
||||
|
|
@ -64,6 +68,7 @@ var SpinePlugin = new Class({
|
|||
{
|
||||
this.runtime = Spine.webgl;
|
||||
|
||||
this.renderer = game.renderer;
|
||||
this.gl = game.renderer.gl;
|
||||
|
||||
this.getAtlas = this.getAtlasWebGL;
|
||||
|
|
@ -72,6 +77,8 @@ var SpinePlugin = new Class({
|
|||
{
|
||||
this.runtime = Spine.canvas;
|
||||
|
||||
this.renderer = game.renderer;
|
||||
|
||||
this.getAtlas = this.getAtlasCanvas;
|
||||
}
|
||||
|
||||
|
|
@ -143,20 +150,24 @@ var SpinePlugin = new Class({
|
|||
|
||||
bootWebGL: function ()
|
||||
{
|
||||
var gl = this.gl;
|
||||
var runtime = this.runtime;
|
||||
// var gl = this.gl;
|
||||
// var runtime = this.runtime;
|
||||
|
||||
this.mvp = new Matrix4();
|
||||
// console.log(this.renderer.canvas, (this.renderer.canvas instanceof HTMLCanvasElement));
|
||||
|
||||
this.sceneRenderer = new Spine.webgl.SceneRenderer(this.renderer.canvas, this.gl, true);
|
||||
|
||||
// this.mvp = new Matrix4();
|
||||
|
||||
// Create a simple shader, mesh, model-view-projection matrix and SkeletonRenderer.
|
||||
|
||||
this.shader = runtime.Shader.newTwoColoredTextured(gl);
|
||||
// this.shader = runtime.Shader.newTwoColoredTextured(gl);
|
||||
|
||||
this.batcher = new runtime.PolygonBatcher(gl, true);
|
||||
// this.batcher = new runtime.PolygonBatcher(gl, true);
|
||||
|
||||
this.skeletonRenderer = new runtime.SkeletonRenderer(gl, true);
|
||||
// this.skeletonRenderer = new runtime.SkeletonRenderer(gl, true);
|
||||
|
||||
this.skeletonRenderer.premultipliedAlpha = true;
|
||||
// this.skeletonRenderer.premultipliedAlpha = true;
|
||||
|
||||
// this.shapes = new runtime.ShapeRenderer(gl);
|
||||
// this.debugRenderer = new runtime.SkeletonDebugRenderer(gl);
|
||||
|
|
@ -187,7 +198,9 @@ var SpinePlugin = new Class({
|
|||
{
|
||||
var textures = this.textures;
|
||||
|
||||
var gl = this.gl;
|
||||
var gl = this.sceneRenderer.context.gl;
|
||||
|
||||
gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, false);
|
||||
|
||||
atlas = new Spine.TextureAtlas(atlasData, function (path)
|
||||
{
|
||||
|
|
|
|||
Loading…
Reference in a new issue