Skip to content

Commit 7e783ca

Browse files
photonstormphotonstorm
committed
Spine now rendering in WebGL
1 parent 864913c commit 7e783ca

4 files changed

Lines changed: 246 additions & 6 deletions

File tree

‎plugins/spine/src/SpineCanvasPlugin.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ var runtime;
1212

1313
/**
1414
* @classdesc
15-
* TODO
15+
* Just the Canvas Runtime.
1616
*
1717
* @class SpinePlugin
1818
* @extends Phaser.Plugins.ScenePlugin

‎plugins/spine/src/SpinePlugin.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ var runtime;
1313

1414
/**
1515
* @classdesc
16-
* TODO
16+
* Both Canvas and WebGL Runtimes together in a single plugin.
1717
*
1818
* @class SpinePlugin
1919
* @extends Phaser.Plugins.ScenePlugin

‎plugins/spine/src/SpineWebGLPlugin.js‎

Lines changed: 122 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,122 @@
1+
/**
2+
* @author Richard Davey <rich@photonstorm.com>
3+
* @copyright 2018 Photon Storm Ltd.
4+
* @license {@link https://github.com/photonstorm/phaser/blob/master/license.txt|MIT License}
5+
*/
6+
7+
var Class = require('../../../src/utils/Class');
8+
var BaseSpinePlugin = require('./BaseSpinePlugin');
9+
var SpineWebGL = require('SpineWebGL');
10+
11+
var runtime;
12+
13+
/**
14+
* @classdesc
15+
* Just the WebGL Runtime.
16+
*
17+
* @class SpinePlugin
18+
* @extends Phaser.Plugins.ScenePlugin
19+
* @constructor
20+
* @since 3.16.0
21+
*
22+
* @param {Phaser.Scene} scene - A reference to the Scene that has installed this plugin.
23+
* @param {Phaser.Plugins.PluginManager} pluginManager - A reference to the Phaser Plugin Manager.
24+
*/
25+
var SpineWebGLPlugin = new Class({
26+
27+
Extends: BaseSpinePlugin,
28+
29+
initialize:
30+
31+
function SpineWebGLPlugin (scene, pluginManager)
32+
{
33+
console.log('SpineWebGLPlugin created');
34+
35+
BaseSpinePlugin.call(this, scene, pluginManager);
36+
37+
runtime = SpineWebGL;
38+
},
39+
40+
boot: function ()
41+
{
42+
var gl = this.game.renderer.gl;
43+
44+
this.gl = gl;
45+
46+
this.mvp = new SpineWebGL.webgl.Matrix4();
47+
48+
// Create a simple shader, mesh, model-view-projection matrix and SkeletonRenderer.
49+
this.shader = SpineWebGL.webgl.Shader.newTwoColoredTextured(gl);
50+
this.batcher = new SpineWebGL.webgl.PolygonBatcher(gl);
51+
this.mvp.ortho2d(0, 0, this.game.renderer.width - 1, this.game.renderer.height - 1);
52+
53+
this.skeletonRenderer = new SpineWebGL.webgl.SkeletonRenderer(gl);
54+
55+
this.shapes = new SpineWebGL.webgl.ShapeRenderer(gl);
56+
57+
// debugRenderer = new spine.webgl.SkeletonDebugRenderer(gl);
58+
// debugRenderer.drawRegionAttachments = true;
59+
// debugRenderer.drawBoundingBoxes = true;
60+
// debugRenderer.drawMeshHull = true;
61+
// debugRenderer.drawMeshTriangles = true;
62+
// debugRenderer.drawPaths = true;
63+
// debugShader = spine.webgl.Shader.newColored(gl);
64+
},
65+
66+
getRuntime: function ()
67+
{
68+
return runtime;
69+
},
70+
71+
createSkeleton: function (key)
72+
{
73+
var atlasData = this.cache.get(key);
74+
75+
if (!atlasData)
76+
{
77+
console.warn('No skeleton data for: ' + key);
78+
return;
79+
}
80+
81+
var textures = this.textures;
82+
83+
var gl = this.game.renderer.gl;
84+
85+
var atlas = new SpineWebGL.TextureAtlas(atlasData, function (path)
86+
{
87+
return new SpineWebGL.webgl.GLTexture(gl, textures.get(path).getSourceImage());
88+
});
89+
90+
var atlasLoader = new SpineWebGL.AtlasAttachmentLoader(atlas);
91+
92+
var skeletonJson = new SpineWebGL.SkeletonJson(atlasLoader);
93+
94+
var skeletonData = skeletonJson.readSkeletonData(this.json.get(key));
95+
96+
var skeleton = new SpineWebGL.Skeleton(skeletonData);
97+
98+
return { skeletonData: skeletonData, skeleton: skeleton };
99+
},
100+
101+
getBounds: function (skeleton)
102+
{
103+
var offset = new SpineWebGL.Vector2();
104+
var size = new SpineWebGL.Vector2();
105+
106+
skeleton.getBounds(offset, size, []);
107+
108+
return { offset: offset, size: size };
109+
},
110+
111+
createAnimationState: function (skeleton)
112+
{
113+
var stateData = new SpineWebGL.AnimationStateData(skeleton.data);
114+
115+
var state = new SpineWebGL.AnimationState(stateData);
116+
117+
return { stateData: stateData, state: state };
118+
}
119+
120+
});
121+
122+
module.exports = SpineWebGLPlugin;

‎plugins/spine/src/gameobject/SpineGameObjectWebGLRenderer.js‎

Lines changed: 122 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -4,8 +4,6 @@
44
* @license {@link https://github.com/photonstorm/phaser/blob/master/license.txt|MIT License}
55
*/
66

7-
var SetTransform = require('../../../../src/renderer/canvas/utils/SetTransform');
8-
97
/**
108
* Renders this Game Object with the Canvas Renderer to the given Camera.
119
* The object will not render if any of its renderFlags are set or it is being actively filtered out by the Camera.
@@ -23,12 +21,132 @@ var SetTransform = require('../../../../src/renderer/canvas/utils/SetTransform')
2321
*/
2422
var SpineGameObjectWebGLRenderer = function (renderer, src, interpolationPercentage, camera, parentMatrix)
2523
{
26-
src.plugin.skeletonRenderer.ctx = context;
24+
var plugin = src.plugin;
25+
var mvp = plugin.mvp;
26+
var shader = plugin.shader;
27+
var batcher = plugin.batcher;
28+
var runtime = src.runtime;
29+
var skeletonRenderer = plugin.skeletonRenderer;
30+
31+
// spriteMatrix.applyITRS(sprite.x, sprite.y, sprite.rotation, sprite.scaleX, sprite.scaleY);
32+
33+
src.mvp.identity();
34+
35+
src.mvp.ortho(0, 0 + 800, 0, 0 + 600, 0, 1);
36+
37+
src.mvp.translate({ x: src.x, y: 600 - src.y, z: 0 });
38+
39+
src.mvp.rotateX(src.rotation);
40+
41+
src.mvp.scale({ x: src.scaleX, y: src.scaleY, z: 1 });
42+
43+
// mvp.translate(-src.x, src.y, 0);
44+
// mvp.ortho2d(-250, 0, 800, 600);
45+
46+
// var camMatrix = renderer._tempMatrix1;
47+
// var spriteMatrix = renderer._tempMatrix2;
48+
// var calcMatrix = renderer._tempMatrix3;
49+
50+
// spriteMatrix.applyITRS(src.x, src.y, src.rotation, src.scaleX, src.scaleY);
51+
52+
// mvp.values[0] = spriteMatrix[0];
53+
// mvp.values[1] = spriteMatrix[1];
54+
// mvp.values[2] = spriteMatrix[2];
55+
// mvp.values[4] = spriteMatrix[3];
56+
// mvp.values[5] = spriteMatrix[4];
57+
// mvp.values[6] = spriteMatrix[5];
58+
// mvp.values[8] = spriteMatrix[6];
59+
// mvp.values[9] = spriteMatrix[7];
60+
// mvp.values[10] = spriteMatrix[8];
61+
62+
// Const = Array Index = Identity
63+
// M00 = 0 = 1
64+
// M01 = 4 = 0
65+
// M02 = 8 = 0
66+
// M03 = 12 = 0
67+
// M10 = 1 = 0
68+
// M11 = 5 = 1
69+
// M12 = 9 = 0
70+
// M13 = 13 = 0
71+
// M20 = 2 = 0
72+
// M21 = 6 = 0
73+
// M22 = 10 = 1
74+
// M23 = 14 = 0
75+
// M30 = 3 = 0
76+
// M31 = 7 = 0
77+
// M32 = 11 = 0
78+
// M33 = 15 = 1
79+
80+
mvp.values[0] = src.mvp.val[0];
81+
mvp.values[1] = src.mvp.val[1];
82+
mvp.values[2] = src.mvp.val[2];
83+
mvp.values[3] = src.mvp.val[3];
84+
mvp.values[4] = src.mvp.val[4];
85+
mvp.values[5] = src.mvp.val[5];
86+
mvp.values[6] = src.mvp.val[6];
87+
mvp.values[7] = src.mvp.val[7];
88+
mvp.values[8] = src.mvp.val[8];
89+
mvp.values[9] = src.mvp.val[9];
90+
mvp.values[10] = src.mvp.val[10];
91+
mvp.values[11] = src.mvp.val[11];
92+
mvp.values[12] = src.mvp.val[12];
93+
mvp.values[13] = src.mvp.val[13];
94+
mvp.values[14] = src.mvp.val[14];
95+
mvp.values[15] = src.mvp.val[15];
96+
97+
// Array Order - Index
98+
// M00 = 0
99+
// M10 = 1
100+
// M20 = 2
101+
// M30 = 3
102+
// M01 = 4
103+
// M11 = 5
104+
// M21 = 6
105+
// M31 = 7
106+
// M02 = 8
107+
// M12 = 9
108+
// M22 = 10
109+
// M32 = 11
110+
// M03 = 12
111+
// M13 = 13
112+
// M23 = 14
113+
// M33 = 15
114+
115+
116+
// mvp.ortho(-250, -250 + 1600, 0, 0 + 1200, 0, 1);
27117

28118
src.skeleton.updateWorldTransform();
29119

30-
src.plugin.skeletonRenderer.draw(src.skeleton);
120+
// Bind the shader and set the texture and model-view-projection matrix.
121+
122+
shader.bind();
123+
shader.setUniformi(runtime.webgl.Shader.SAMPLER, 0);
124+
shader.setUniform4x4f(runtime.webgl.Shader.MVP_MATRIX, mvp.values);
125+
126+
// Start the batch and tell the SkeletonRenderer to render the active skeleton.
127+
batcher.begin(shader);
128+
129+
plugin.skeletonRenderer.vertexEffect = null;
130+
131+
skeletonRenderer.premultipliedAlpha = true;
132+
133+
skeletonRenderer.draw(batcher, src.skeleton);
134+
135+
batcher.end();
136+
137+
shader.unbind();
31138

139+
/*
140+
if (debug) {
141+
debugShader.bind();
142+
debugShader.setUniform4x4f(spine.webgl.Shader.MVP_MATRIX, mvp.values);
143+
debugRenderer.premultipliedAlpha = premultipliedAlpha;
144+
shapes.begin(debugShader);
145+
debugRenderer.draw(shapes, skeleton);
146+
shapes.end();
147+
debugShader.unbind();
148+
}
149+
*/
32150
};
33151

34152
module.exports = SpineGameObjectWebGLRenderer;

0 commit comments

Comments
 (0)