mirror of
https://github.com/photonstorm/phaser
synced 2024-11-23 21:24:09 +00:00
Removed global scene graph. New system works with camera system
This commit is contained in:
parent
08da842e4b
commit
efdc4898f3
13 changed files with 323 additions and 185 deletions
|
@ -1,4 +1,4 @@
|
|||
var Transform = require('../components/Transform');
|
||||
var Transform2DMatrix = require('../components/Transform2DMatrix').Transform2DMatrix;
|
||||
|
||||
var Camera = function (x, y, width, height)
|
||||
{
|
||||
|
@ -7,13 +7,11 @@ var Camera = function (x, y, width, height)
|
|||
this.width = width;
|
||||
this.height = height;
|
||||
|
||||
this.state = null;
|
||||
this.statePositionX = 0.0;
|
||||
this.statePositionY = 0.0;
|
||||
this.scrollX = 0.0;
|
||||
this.scrollY = 0.0;
|
||||
this.zoom = 1.0;
|
||||
this.rotation = 0.0;
|
||||
this.matrix = new Transform2DMatrix(1, 0, 0, 1, 0, 0);
|
||||
|
||||
// shake
|
||||
this._shakeDuration = 0.0;
|
||||
|
@ -165,24 +163,10 @@ Camera.prototype = {
|
|||
|
||||
preRender: function ()
|
||||
{
|
||||
var state = this.state;
|
||||
var stateTransform = state.sys.transform;
|
||||
|
||||
this.statePositionX = stateTransform.positionX;
|
||||
this.statePositionY = stateTransform.positionY;
|
||||
|
||||
stateTransform.positionX = this.statePositionX + this.x;
|
||||
stateTransform.positionY = this.statePositionY + this.y;
|
||||
|
||||
Transform.updateRoot(stateTransform, -this.scrollX + this._shakeOffsetX, -this.scrollY + this._shakeOffsetY, this.zoom, this.rotation);
|
||||
},
|
||||
|
||||
postRender: function ()
|
||||
{
|
||||
var stateTransform = this.state.sys.transform;
|
||||
|
||||
stateTransform.positionX = this.statePositionX;
|
||||
stateTransform.positionY = this.statePositionY;
|
||||
this.matrix.loadIdentity().
|
||||
translate(this.x + this._shakeOffsetX, this.y + this._shakeOffsetY).
|
||||
rotate(this.rotation).
|
||||
scale(this.zoom, this.zoom);
|
||||
},
|
||||
|
||||
destroy: function ()
|
||||
|
|
|
@ -262,4 +262,4 @@ Object.defineProperties(Transform.prototype,{
|
|||
}
|
||||
});
|
||||
|
||||
module.exports = Transform;
|
||||
//module.exports = Transform;
|
||||
|
|
186
v3/src/components/Transform2DMatrix.js
Normal file
186
v3/src/components/Transform2DMatrix.js
Normal file
|
@ -0,0 +1,186 @@
|
|||
var mathCos = Math.cos;
|
||||
var mathSin = Math.sin;
|
||||
var mathSqrt = Math.sqrt;
|
||||
var mathAcos = Math.acos;
|
||||
var mathAtan = Math.atan;
|
||||
|
||||
var Transform2DMatrix = function (a, b, c, d, tx, ty)
|
||||
{
|
||||
a = typeof a === 'number' ? a : 1;
|
||||
b = typeof b === 'number' ? b : 0;
|
||||
c = typeof c === 'number' ? c : 0;
|
||||
d = typeof d === 'number' ? d : 1;
|
||||
tx = typeof tx === 'number' ? tx : 0;
|
||||
ty = typeof ty === 'number' ? ty : 0;
|
||||
|
||||
this.matrix = new Float32Array([a, b, c, d, tx, ty]);
|
||||
this.decomposedMatrix = {
|
||||
translateX: 0,
|
||||
translateY: 0,
|
||||
scaleX: 1,
|
||||
scaleY: 1,
|
||||
rotation: 0
|
||||
};
|
||||
};
|
||||
|
||||
Transform2DMatrix.prototype.loadIdentity = function ()
|
||||
{
|
||||
var matrix = this.matrix;
|
||||
|
||||
matrix[0] = 1;
|
||||
matrix[1] = 0;
|
||||
matrix[2] = 0;
|
||||
matrix[3] = 1;
|
||||
matrix[4] = 0;
|
||||
matrix[5] = 0;
|
||||
|
||||
return this;
|
||||
};
|
||||
|
||||
Transform2DMatrix.prototype.translate = function (x, y)
|
||||
{
|
||||
var matrix = this.matrix;
|
||||
|
||||
matrix[4] = matrix[0] * x + matrix[2] * y + matrix[4];
|
||||
matrix[5] = matrix[1] * x + matrix[3] * y + matrix[5];
|
||||
|
||||
return this;
|
||||
};
|
||||
|
||||
Transform2DMatrix.prototype.scale = function (x, y)
|
||||
{
|
||||
var matrix = this.matrix;
|
||||
|
||||
matrix[0] = matrix[0] * x;
|
||||
matrix[1] = matrix[1] * x;
|
||||
matrix[2] = matrix[2] * y;
|
||||
matrix[3] = matrix[3] * y;
|
||||
|
||||
return this;
|
||||
};
|
||||
|
||||
Transform2DMatrix.prototype.rotate = function (radian)
|
||||
{
|
||||
var matrix = this.matrix;
|
||||
var a = matrix[0];
|
||||
var b = matrix[1];
|
||||
var c = matrix[2];
|
||||
var d = matrix[3];
|
||||
var sr = mathSin(radian);
|
||||
var cr = mathCos(radian);
|
||||
|
||||
matrix[0] = a * cr + c * sr;
|
||||
matrix[1] = b * cr + d * sr;
|
||||
matrix[2] = a * -sr + c * cr;
|
||||
matrix[3] = b * -sr + d * cr;
|
||||
|
||||
return this;
|
||||
};
|
||||
|
||||
Transform2DMatrix.prototype.multiply = function (otherMatrix)
|
||||
{
|
||||
var matrix = this.matrix;
|
||||
var a0 = matrix[0];
|
||||
var b0 = matrix[1];
|
||||
var c0 = matrix[2];
|
||||
var d0 = matrix[3];
|
||||
var tx0 = matrix[4];
|
||||
var ty0 = matrix[5];
|
||||
var a1 = otherMatrix[0];
|
||||
var b1 = otherMatrix[1];
|
||||
var c1 = otherMatrix[2];
|
||||
var d1 = otherMatrix[3];
|
||||
var tx1 = otherMatrix[4];
|
||||
var ty1 = otherMatrix[5];
|
||||
|
||||
matrix[0] = a1 * a0 + b1 * c0;
|
||||
matrix[1] = a1 * b0 + b1 * d0;
|
||||
matrix[2] = c1 * a0 + d1 * c0;
|
||||
matrix[3] = c1 * b0 + d1 * d0;
|
||||
matrix[4] = tx1 * a0 + ty1 * c0 + tx0;
|
||||
matrix[5] = tx1 * b0 + ty1 * d0 + ty0;
|
||||
|
||||
return this;
|
||||
};
|
||||
|
||||
Transform2DMatrix.prototype.transform = function (a, b, c, d, tx, ty)
|
||||
{
|
||||
var matrix = this.matrix;
|
||||
var a0 = matrix[0];
|
||||
var b0 = matrix[1];
|
||||
var c0 = matrix[2];
|
||||
var d0 = matrix[3];
|
||||
var tx0 = matrix[4];
|
||||
var ty0 = matrix[5];
|
||||
|
||||
matrix[0] = a * a0 + b * c0;
|
||||
matrix[1] = a * b0 + b * d0;
|
||||
matrix[2] = c * a0 + d * c0;
|
||||
matrix[3] = c * b0 + d * d0;
|
||||
matrix[4] = tx * a0 + ty * c0 + tx0;
|
||||
matrix[5] = tx * b0 + ty * d0 + ty0;
|
||||
|
||||
return this;
|
||||
};
|
||||
|
||||
Transform2DMatrix.prototype.setTransform = function (a, b, c, d, tx, ty)
|
||||
{
|
||||
var matrix = this.matrix;
|
||||
|
||||
matrix[0] = a;
|
||||
matrix[1] = b;
|
||||
matrix[2] = c;
|
||||
matrix[3] = d;
|
||||
matrix[4] = tx;
|
||||
matrix[5] = ty;
|
||||
|
||||
return this;
|
||||
};
|
||||
|
||||
Transform2DMatrix.prototype.decomposeMatrix = function ()
|
||||
{
|
||||
var decomposedMatrix = this.decomposedMatrix;
|
||||
var matrix = this.matrix;
|
||||
var a = matrix[0];
|
||||
var b = matrix[1];
|
||||
var c = matrix[2];
|
||||
var d = matrix[3];
|
||||
var a2 = a * a;
|
||||
var b2 = b * b;
|
||||
var c2 = c * c;
|
||||
var d2 = d * d;
|
||||
var sx = mathSqrt(a2 + c2);
|
||||
var sy = mathSqrt(b2 + d2);
|
||||
|
||||
decomposedMatrix.translateX = matrix[4];
|
||||
decomposedMatrix.translateY = matrix[5];
|
||||
decomposedMatrix.scaleX = sx;
|
||||
decomposedMatrix.scaleY = sy;
|
||||
decomposedMatrix.rotation = mathAcos(a / sx) * (mathAtan(-c / a) < 0 ? -1 : 1);
|
||||
|
||||
return decomposedMatrix;
|
||||
};
|
||||
|
||||
Transform2DMatrix.prototype.fromTransform2D = function (transform2D)
|
||||
{
|
||||
this.loadIdentity().
|
||||
translate(transform2D.x, transform2D.y).
|
||||
rotate(transform2D.angle).
|
||||
scale(transform2D.scaleX, transform2D.scaleY);
|
||||
|
||||
return this;
|
||||
};
|
||||
|
||||
var Transform2D = function (x, y)
|
||||
{
|
||||
this.x = x;
|
||||
this.y = y;
|
||||
this.scaleX = 1;
|
||||
this.scaleY = 1;
|
||||
this.angle = 0;
|
||||
};
|
||||
|
||||
module.exports = {
|
||||
Transform2DMatrix: Transform2DMatrix,
|
||||
Transform2D: Transform2D
|
||||
};
|
|
@ -5,6 +5,8 @@ module.exports = {
|
|||
Children: require('./Children'),
|
||||
Color: require('./Color'),
|
||||
Data: require('./Data'),
|
||||
Transform: require('./Transform')
|
||||
//Transform: require('./Transform')
|
||||
Transform2D: require('./Transform2DMatrix').Transform2D,
|
||||
Transform2DMatrix: require('./Transform2DMatrix').Transform2DMatrix
|
||||
|
||||
};
|
||||
|
|
|
@ -171,7 +171,7 @@ function init ()
|
|||
return false;
|
||||
};
|
||||
|
||||
Features.webGL = testWebGL();
|
||||
Features.webGL = true;//testWebGL();
|
||||
|
||||
Features.worker = !!window['Worker'];
|
||||
|
||||
|
|
|
@ -39,9 +39,7 @@ var GameObject = function (state, x, y, texture, frame, parent)
|
|||
this.frame = frame;
|
||||
|
||||
// All GameObjects have the following components, always:
|
||||
this.transform = new Component.Transform(this, this.state.sys.transform);
|
||||
this.transform.positionX = x;
|
||||
this.transform.positionY = y;
|
||||
this.transform = new Component.Transform2D(x, y);
|
||||
|
||||
this.anchor = new Component.Anchor();
|
||||
|
||||
|
@ -112,13 +110,12 @@ Object.defineProperties(GameObject.prototype, {
|
|||
|
||||
get: function ()
|
||||
{
|
||||
return this.transform.positionX;
|
||||
return this.transform.x;
|
||||
},
|
||||
|
||||
set: function (value)
|
||||
{
|
||||
this.transform.positionX = value;
|
||||
this.transform.dirtyLocal = true;
|
||||
this.transform.x = value;
|
||||
}
|
||||
|
||||
},
|
||||
|
@ -129,13 +126,12 @@ Object.defineProperties(GameObject.prototype, {
|
|||
|
||||
get: function ()
|
||||
{
|
||||
return this.transform.positionY;
|
||||
return this.transform.y;
|
||||
},
|
||||
|
||||
set: function (value)
|
||||
{
|
||||
this.transform.positionY = value;
|
||||
this.transform.dirtyLocal = true;
|
||||
this.transform.y = value;
|
||||
}
|
||||
|
||||
},
|
||||
|
@ -153,7 +149,6 @@ Object.defineProperties(GameObject.prototype, {
|
|||
{
|
||||
this.transform.scaleX = value;
|
||||
this.transform.scaleY = value;
|
||||
this.transform.dirtyLocal = true;
|
||||
}
|
||||
|
||||
},
|
||||
|
@ -170,7 +165,6 @@ Object.defineProperties(GameObject.prototype, {
|
|||
set: function (value)
|
||||
{
|
||||
this.transform.scaleX = value;
|
||||
this.transform.dirtyLocal = true;
|
||||
}
|
||||
|
||||
},
|
||||
|
@ -187,7 +181,6 @@ Object.defineProperties(GameObject.prototype, {
|
|||
set: function (value)
|
||||
{
|
||||
this.transform.scaleY = value;
|
||||
this.transform.dirtyLocal = true;
|
||||
}
|
||||
|
||||
},
|
||||
|
@ -198,13 +191,12 @@ Object.defineProperties(GameObject.prototype, {
|
|||
|
||||
get: function ()
|
||||
{
|
||||
return this.transform.rotation;
|
||||
return this.transform.angle;
|
||||
},
|
||||
|
||||
set: function (value)
|
||||
{
|
||||
this.transform.rotation = value;
|
||||
this.transform.dirtyLocal = true;
|
||||
this.transform.angle = value;
|
||||
}
|
||||
|
||||
},
|
||||
|
@ -215,14 +207,13 @@ Object.defineProperties(GameObject.prototype, {
|
|||
|
||||
get: function ()
|
||||
{
|
||||
return WrapAngle(this.transform.rotation * MATH_CONST.RAD_TO_DEG);
|
||||
return WrapAngle(this.transform.angle * MATH_CONST.RAD_TO_DEG);
|
||||
},
|
||||
|
||||
set: function (value)
|
||||
{
|
||||
// value is in degrees
|
||||
this.transform.rotation = WrapAngle(value * MATH_CONST.DEG_TO_RAD);
|
||||
this.transform.dirtyLocal = true;
|
||||
this.transform.angle = WrapAngle(value * MATH_CONST.DEG_TO_RAD);
|
||||
}
|
||||
|
||||
},
|
||||
|
|
|
@ -1,109 +1,84 @@
|
|||
|
||||
var ImageWebGLRenderer = function (renderer, src, interpolationPercentage)
|
||||
var ImageWebGLRenderer = function (renderer, src, interpolationPercentage, camera)
|
||||
{
|
||||
var frame = src.frame;
|
||||
// var alpha = src.color.worldAlpha * 255 << 24;
|
||||
|
||||
var alpha = 16777216;
|
||||
|
||||
// Skip rendering?
|
||||
|
||||
// if (src.skipRender || !src.visible || alpha === 0 || !frame.cutWidth || !frame.cutHeight)
|
||||
// {
|
||||
// return;
|
||||
// }
|
||||
|
||||
// var verts = src.transform.getVertexData(interpolationPercentage, renderer);
|
||||
// var index = src.frame.source.glTextureIndex;
|
||||
// var tint = src.color._glTint;
|
||||
// var bg = src.color._glBg;
|
||||
// renderer.batch.add(frame.source, src.blendMode, verts, frame.uvs, index, alpha, tint, bg);
|
||||
|
||||
// Not inlined
|
||||
//renderer.setBlendMode(src.color._blendMode);
|
||||
//renderer.spriteBatch.add(
|
||||
// src.frame,
|
||||
// src.anchorX, src.anchorY,
|
||||
// transform.worldMatrix.matrix,
|
||||
// src.color._glTint
|
||||
//);
|
||||
|
||||
/*******************/
|
||||
|
||||
// Inline spriteBatch.add gives a huge boost
|
||||
var transform = src.transform;
|
||||
var transform2D = src.transform;
|
||||
var spriteBatch = renderer.spriteBatch;
|
||||
var anchorX = src.anchorX;
|
||||
var anchorY = src.anchorY;
|
||||
var matrix = transform.worldMatrix;
|
||||
var vertexColor = src.color._glTint;
|
||||
|
||||
//renderer.setBlendMode(src.color._blendMode);
|
||||
renderer.setBatch(spriteBatch, frame.texture.source[frame.sourceIndex].glTexture);
|
||||
// The user must check if the buffers are full before flushing
|
||||
// this is to give freedom of when should the renderer flush. var vertexDataBuffer = this.vertexDataBuffer;
|
||||
var vertexDataBuffer = spriteBatch.vertexDataBuffer;
|
||||
var vertexBufferF32 = vertexDataBuffer.floatView;
|
||||
var vertexBufferU32 = vertexDataBuffer.uintView;
|
||||
var vertexOffset = vertexDataBuffer.allocate(44);
|
||||
var vertexOffset = vertexDataBuffer.allocate(40);
|
||||
var uvs = frame.uvs;
|
||||
var width = frame.width;
|
||||
var height = frame.height;
|
||||
var translateX = transform2D.x - camera.scrollX;
|
||||
var translateY = transform2D.y - camera.scrollY;
|
||||
var scaleX = transform2D.scaleX;
|
||||
var scaleY = transform2D.scaleY;
|
||||
var rotation = transform2D.angle;
|
||||
var cameraMatrix = camera.matrix.matrix;
|
||||
var a = cameraMatrix[0];
|
||||
var b = cameraMatrix[1];
|
||||
var c = cameraMatrix[2];
|
||||
var d = cameraMatrix[3];
|
||||
var e = cameraMatrix[4];
|
||||
var f = cameraMatrix[5];
|
||||
var x = width * -anchorX + frame.x;
|
||||
var y = height * -anchorY + frame.y;
|
||||
var a = matrix[0];
|
||||
var b = matrix[1];
|
||||
var c = matrix[2];
|
||||
var d = matrix[3];
|
||||
var tx = matrix[4];
|
||||
var ty = matrix[5];
|
||||
var xw = x + width;
|
||||
var yh = y + height;
|
||||
|
||||
vertexBufferF32[vertexOffset++] = x;
|
||||
vertexBufferF32[vertexOffset++] = y;
|
||||
var tx = x * a + y * c + e;
|
||||
var ty = x * b + y * d + f;
|
||||
var txw = xw * a + yh * c + e;
|
||||
var tyh = xw * b + yh * d + f;
|
||||
|
||||
renderer.setBatch(spriteBatch, frame.texture.source[frame.sourceIndex].glTexture);
|
||||
|
||||
vertexBufferF32[vertexOffset++] = tx;
|
||||
vertexBufferF32[vertexOffset++] = ty;
|
||||
vertexBufferF32[vertexOffset++] = uvs.x0;
|
||||
vertexBufferF32[vertexOffset++] = uvs.y0;
|
||||
vertexBufferF32[vertexOffset++] = a;
|
||||
vertexBufferF32[vertexOffset++] = b;
|
||||
vertexBufferF32[vertexOffset++] = c;
|
||||
vertexBufferF32[vertexOffset++] = d;
|
||||
vertexBufferF32[vertexOffset++] = tx;
|
||||
vertexBufferF32[vertexOffset++] = ty;
|
||||
vertexBufferF32[vertexOffset++] = translateX;
|
||||
vertexBufferF32[vertexOffset++] = translateY;
|
||||
vertexBufferF32[vertexOffset++] = scaleX;
|
||||
vertexBufferF32[vertexOffset++] = scaleY;
|
||||
vertexBufferF32[vertexOffset++] = rotation;
|
||||
vertexBufferU32[vertexOffset++] = vertexColor.topLeft;
|
||||
vertexBufferF32[vertexOffset++] = x;
|
||||
vertexBufferF32[vertexOffset++] = yh;
|
||||
vertexBufferF32[vertexOffset++] = tx;
|
||||
vertexBufferF32[vertexOffset++] = tyh;
|
||||
vertexBufferF32[vertexOffset++] = uvs.x1;
|
||||
vertexBufferF32[vertexOffset++] = uvs.y1;
|
||||
vertexBufferF32[vertexOffset++] = a;
|
||||
vertexBufferF32[vertexOffset++] = b;
|
||||
vertexBufferF32[vertexOffset++] = c;
|
||||
vertexBufferF32[vertexOffset++] = d;
|
||||
vertexBufferF32[vertexOffset++] = tx;
|
||||
vertexBufferF32[vertexOffset++] = ty;
|
||||
vertexBufferF32[vertexOffset++] = translateX;
|
||||
vertexBufferF32[vertexOffset++] = translateY;
|
||||
vertexBufferF32[vertexOffset++] = scaleX;
|
||||
vertexBufferF32[vertexOffset++] = scaleY;
|
||||
vertexBufferF32[vertexOffset++] = rotation;
|
||||
vertexBufferU32[vertexOffset++] = vertexColor.bottomLeft;
|
||||
vertexBufferF32[vertexOffset++] = xw;
|
||||
vertexBufferF32[vertexOffset++] = yh;
|
||||
vertexBufferF32[vertexOffset++] = txw;
|
||||
vertexBufferF32[vertexOffset++] = tyh;
|
||||
vertexBufferF32[vertexOffset++] = uvs.x2;
|
||||
vertexBufferF32[vertexOffset++] = uvs.y2;
|
||||
vertexBufferF32[vertexOffset++] = a;
|
||||
vertexBufferF32[vertexOffset++] = b;
|
||||
vertexBufferF32[vertexOffset++] = c;
|
||||
vertexBufferF32[vertexOffset++] = d;
|
||||
vertexBufferF32[vertexOffset++] = tx;
|
||||
vertexBufferF32[vertexOffset++] = ty;
|
||||
vertexBufferF32[vertexOffset++] = translateX;
|
||||
vertexBufferF32[vertexOffset++] = translateY;
|
||||
vertexBufferF32[vertexOffset++] = scaleX;
|
||||
vertexBufferF32[vertexOffset++] = scaleY;
|
||||
vertexBufferF32[vertexOffset++] = rotation;
|
||||
vertexBufferU32[vertexOffset++] = vertexColor.bottomRight;
|
||||
vertexBufferF32[vertexOffset++] = xw;
|
||||
vertexBufferF32[vertexOffset++] = y;
|
||||
vertexBufferF32[vertexOffset++] = txw;
|
||||
vertexBufferF32[vertexOffset++] = ty;
|
||||
vertexBufferF32[vertexOffset++] = uvs.x3;
|
||||
vertexBufferF32[vertexOffset++] = uvs.y3;
|
||||
vertexBufferF32[vertexOffset++] = a;
|
||||
vertexBufferF32[vertexOffset++] = b;
|
||||
vertexBufferF32[vertexOffset++] = c;
|
||||
vertexBufferF32[vertexOffset++] = d;
|
||||
vertexBufferF32[vertexOffset++] = tx;
|
||||
vertexBufferF32[vertexOffset++] = ty;
|
||||
vertexBufferF32[vertexOffset++] = translateX;
|
||||
vertexBufferF32[vertexOffset++] = translateY;
|
||||
vertexBufferF32[vertexOffset++] = scaleX;
|
||||
vertexBufferF32[vertexOffset++] = scaleY;
|
||||
vertexBufferF32[vertexOffset++] = rotation;
|
||||
vertexBufferU32[vertexOffset++] = vertexColor.topRight;
|
||||
|
||||
spriteBatch.elementCount += 6;
|
||||
};
|
||||
|
||||
|
|
|
@ -12,7 +12,6 @@ var BlitterBatch = require('./batches/blitter/BlitterBatch');
|
|||
var AAQuadBatch = require('./batches/aaquad/AAQuadBatch');
|
||||
var SpriteBatch = require('./batches/sprite/SpriteBatch');
|
||||
var BlendModes = require('../BlendModes');
|
||||
var Transform = require('../../components/Transform');
|
||||
|
||||
var WebGLRenderer = function (game)
|
||||
{
|
||||
|
@ -207,7 +206,7 @@ WebGLRenderer.prototype = {
|
|||
* by the amount of time that will be simulated the next time update()
|
||||
* runs. Useful for interpolating frames.
|
||||
*/
|
||||
render: function (state, flatRenderArray, interpolationPercentage, camera)
|
||||
render: function (state, children, interpolationPercentage, camera)
|
||||
{
|
||||
// Could move to the State Systems or MainLoop
|
||||
var gl = this.gl;
|
||||
|
@ -248,7 +247,7 @@ WebGLRenderer.prototype = {
|
|||
this.blendMode = newBlendMode;
|
||||
}
|
||||
// drawing child
|
||||
child.renderWebGL(this, child, interpolationPercentage);
|
||||
child.renderWebGL(this, child, interpolationPercentage, camera);
|
||||
batch = this.batch;
|
||||
if (batch && batch.isFull())
|
||||
{
|
||||
|
|
|
@ -69,12 +69,10 @@ SpriteBatch.prototype = {
|
|||
var attribArray = [
|
||||
CreateAttribDesc(gl, program, 'a_position', 2, gl.FLOAT, false, CONST.VERTEX_SIZE, 0),
|
||||
CreateAttribDesc(gl, program, 'a_tex_coord', 2, gl.FLOAT, false, CONST.VERTEX_SIZE, 8),
|
||||
CreateAttribDesc(gl, program, 'transform_a', 1, gl.FLOAT, false, CONST.VERTEX_SIZE, 16),
|
||||
CreateAttribDesc(gl, program, 'transform_b', 1, gl.FLOAT, false, CONST.VERTEX_SIZE, 20),
|
||||
CreateAttribDesc(gl, program, 'transform_c', 1, gl.FLOAT, false, CONST.VERTEX_SIZE, 24),
|
||||
CreateAttribDesc(gl, program, 'transform_d', 1, gl.FLOAT, false, CONST.VERTEX_SIZE, 28),
|
||||
CreateAttribDesc(gl, program, 'transform_t', 2, gl.FLOAT, false, CONST.VERTEX_SIZE, 32),
|
||||
CreateAttribDesc(gl, program, 'a_color', 3, gl.UNSIGNED_BYTE, true, CONST.VERTEX_SIZE, 40)
|
||||
CreateAttribDesc(gl, program, 'a_translate', 2, gl.FLOAT, false, CONST.VERTEX_SIZE, 16),
|
||||
CreateAttribDesc(gl, program, 'a_scale', 2, gl.FLOAT, false, CONST.VERTEX_SIZE, 24),
|
||||
CreateAttribDesc(gl, program, 'a_rotation', 1, gl.FLOAT, false, CONST.VERTEX_SIZE, 32),
|
||||
CreateAttribDesc(gl, program, 'a_color', 3, gl.UNSIGNED_BYTE, true, CONST.VERTEX_SIZE, 36)
|
||||
];
|
||||
var vertexArray = new VertexArray(CreateBuffer(gl, gl.ARRAY_BUFFER, gl.STREAM_DRAW, null, vertexDataBuffer.getByteCapacity()), attribArray);
|
||||
var viewMatrixLocation = gl.getUniformLocation(program, 'u_view_matrix');
|
||||
|
@ -114,7 +112,7 @@ SpriteBatch.prototype = {
|
|||
return (this.vertexDataBuffer.getByteLength() >= this.vertexDataBuffer.getByteCapacity());
|
||||
},
|
||||
|
||||
add: function (frame, anchorX, anchorY, matrix, vertexColor)
|
||||
add: function (frame, anchorX, anchorY, transform2D, vertexColor, camera)
|
||||
{
|
||||
this.manager.setBatch(this, frame.texture.source[frame.sourceIndex].glTexture);
|
||||
|
||||
|
@ -127,61 +125,68 @@ SpriteBatch.prototype = {
|
|||
var uvs = frame.uvs;
|
||||
var width = frame.width;
|
||||
var height = frame.height;
|
||||
var translateX = transform2D.x - camera.scrollX;
|
||||
var translateY = transform2D.y - camera.scrollY;
|
||||
var scaleX = transform2D.scaleX;
|
||||
var scaleY = transform2D.scaleY;
|
||||
var rotation = transform2D.angle;
|
||||
var a = cameraMatrix[0];
|
||||
var b = cameraMatrix[1];
|
||||
var c = cameraMatrix[2];
|
||||
var d = cameraMatrix[3];
|
||||
var e = cameraMatrix[4];
|
||||
var f = cameraMatrix[5];
|
||||
var x = width * -anchorX + frame.x;
|
||||
var y = height * -anchorY + frame.y;
|
||||
var a = matrix[0];
|
||||
var b = matrix[1];
|
||||
var c = matrix[2];
|
||||
var d = matrix[3];
|
||||
var tx = matrix[4];
|
||||
var ty = matrix[5];
|
||||
var xw = x + width;
|
||||
var yh = y + height;
|
||||
var tx = x * a + y * c + e;
|
||||
var ty = x * b + y * d + f;
|
||||
var txw = xw * a + yh * c + e;
|
||||
var tyh = xw * b + yh * d + f;
|
||||
|
||||
vertexBufferF32[vertexOffset++] = x;
|
||||
vertexBufferF32[vertexOffset++] = y;
|
||||
vertexBufferF32[vertexOffset++] = tx;
|
||||
vertexBufferF32[vertexOffset++] = ty;
|
||||
vertexBufferF32[vertexOffset++] = uvs.x0;
|
||||
vertexBufferF32[vertexOffset++] = uvs.y0;
|
||||
vertexBufferF32[vertexOffset++] = a;
|
||||
vertexBufferF32[vertexOffset++] = b;
|
||||
vertexBufferF32[vertexOffset++] = c;
|
||||
vertexBufferF32[vertexOffset++] = d;
|
||||
vertexBufferF32[vertexOffset++] = tx;
|
||||
vertexBufferF32[vertexOffset++] = ty;
|
||||
vertexBufferF32[vertexOffset++] = translateX;
|
||||
vertexBufferF32[vertexOffset++] = translateY;
|
||||
vertexBufferF32[vertexOffset++] = scaleX;
|
||||
vertexBufferF32[vertexOffset++] = scaleY;
|
||||
vertexBufferF32[vertexOffset++] = rotation;
|
||||
vertexBufferU32[vertexOffset++] = vertexColor.topLeft;
|
||||
|
||||
vertexBufferF32[vertexOffset++] = x;
|
||||
vertexBufferF32[vertexOffset++] = y + height;
|
||||
vertexBufferF32[vertexOffset++] = tx;
|
||||
vertexBufferF32[vertexOffset++] = tyh;
|
||||
vertexBufferF32[vertexOffset++] = uvs.x1;
|
||||
vertexBufferF32[vertexOffset++] = uvs.y1;
|
||||
vertexBufferF32[vertexOffset++] = a;
|
||||
vertexBufferF32[vertexOffset++] = b;
|
||||
vertexBufferF32[vertexOffset++] = c;
|
||||
vertexBufferF32[vertexOffset++] = d;
|
||||
vertexBufferF32[vertexOffset++] = tx;
|
||||
vertexBufferF32[vertexOffset++] = ty;
|
||||
vertexBufferF32[vertexOffset++] = translateX;
|
||||
vertexBufferF32[vertexOffset++] = translateY;
|
||||
vertexBufferF32[vertexOffset++] = scaleX;
|
||||
vertexBufferF32[vertexOffset++] = scaleY;
|
||||
vertexBufferF32[vertexOffset++] = rotation;
|
||||
vertexBufferU32[vertexOffset++] = vertexColor.bottomLeft;
|
||||
|
||||
vertexBufferF32[vertexOffset++] = x + width;
|
||||
vertexBufferF32[vertexOffset++] = y + height;
|
||||
vertexBufferF32[vertexOffset++] = txw;
|
||||
vertexBufferF32[vertexOffset++] = tyh;
|
||||
vertexBufferF32[vertexOffset++] = uvs.x2;
|
||||
vertexBufferF32[vertexOffset++] = uvs.y2;
|
||||
vertexBufferF32[vertexOffset++] = a;
|
||||
vertexBufferF32[vertexOffset++] = b;
|
||||
vertexBufferF32[vertexOffset++] = c;
|
||||
vertexBufferF32[vertexOffset++] = d;
|
||||
vertexBufferF32[vertexOffset++] = tx;
|
||||
vertexBufferF32[vertexOffset++] = ty;
|
||||
vertexBufferF32[vertexOffset++] = translateX;
|
||||
vertexBufferF32[vertexOffset++] = translateY;
|
||||
vertexBufferF32[vertexOffset++] = scaleX;
|
||||
vertexBufferF32[vertexOffset++] = scaleY;
|
||||
vertexBufferF32[vertexOffset++] = rotation;
|
||||
vertexBufferU32[vertexOffset++] = vertexColor.bottomRight;
|
||||
|
||||
vertexBufferF32[vertexOffset++] = x + width;
|
||||
vertexBufferF32[vertexOffset++] = y;
|
||||
vertexBufferF32[vertexOffset++] = txw;
|
||||
vertexBufferF32[vertexOffset++] = ty;
|
||||
vertexBufferF32[vertexOffset++] = uvs.x3;
|
||||
vertexBufferF32[vertexOffset++] = uvs.y3;
|
||||
vertexBufferF32[vertexOffset++] = a;
|
||||
vertexBufferF32[vertexOffset++] = b;
|
||||
vertexBufferF32[vertexOffset++] = c;
|
||||
vertexBufferF32[vertexOffset++] = d;
|
||||
vertexBufferF32[vertexOffset++] = tx;
|
||||
vertexBufferF32[vertexOffset++] = ty;
|
||||
vertexBufferF32[vertexOffset++] = translateX;
|
||||
vertexBufferF32[vertexOffset++] = translateY;
|
||||
vertexBufferF32[vertexOffset++] = scaleX;
|
||||
vertexBufferF32[vertexOffset++] = scaleY;
|
||||
vertexBufferF32[vertexOffset++] = rotation;
|
||||
vertexBufferU32[vertexOffset++] = vertexColor.topRight;
|
||||
|
||||
this.elementCount += CONST.SPRITE_INDEX_COUNT;
|
||||
|
|
|
@ -2,19 +2,17 @@ module.exports = [
|
|||
'uniform mat4 u_view_matrix;',
|
||||
'attribute vec2 a_position;',
|
||||
'attribute vec2 a_tex_coord;',
|
||||
'attribute float transform_a;',
|
||||
'attribute float transform_b;',
|
||||
'attribute float transform_c;',
|
||||
'attribute float transform_d;',
|
||||
'attribute vec2 transform_t;',
|
||||
'attribute vec2 a_translate;',
|
||||
'attribute vec2 a_scale;',
|
||||
'attribute float a_rotation;',
|
||||
'attribute vec3 a_color;',
|
||||
'varying vec2 v_tex_coord;',
|
||||
'varying vec3 v_color;',
|
||||
'void main () {',
|
||||
' vec2 t_position;',
|
||||
' t_position.x = a_position.x * transform_a + a_position.y * transform_c;',
|
||||
' t_position.y = a_position.x * transform_b + a_position.y * transform_d;',
|
||||
' gl_Position = u_view_matrix * vec4(t_position + transform_t, 1.0, 1.0);',
|
||||
' float c = cos(a_rotation);',
|
||||
' float s = sin(a_rotation);',
|
||||
' vec2 t_position = vec2(a_position.x * c - a_position.y * s, a_position.x * s + a_position.y * c);',
|
||||
' gl_Position = u_view_matrix * vec4(t_position * a_scale + a_translate, 1.0, 1.0);',
|
||||
' v_tex_coord = a_tex_coord;',
|
||||
' v_color = a_color;',
|
||||
'}'
|
||||
|
|
|
@ -4,13 +4,13 @@ var VertexShader = require('./VertexShader');
|
|||
var CONST = {
|
||||
|
||||
// VERTEX_SIZE = (sizeof(vec2) * 4) + (sizeof(float) + sizeof(uint32))
|
||||
VERTEX_SIZE: 44,
|
||||
VERTEX_SIZE: 40,
|
||||
INDEX_SIZE: 2,
|
||||
SPRITE_VERTEX_COUNT: 4,
|
||||
SPRITE_INDEX_COUNT: 6,
|
||||
|
||||
// How many 32-bit components does the vertex have.
|
||||
SPRITE_VERTEX_COMPONENT_COUNT: 11,
|
||||
SPRITE_VERTEX_COMPONENT_COUNT: 10,
|
||||
|
||||
// Can't be bigger since index are 16-bit
|
||||
MAX_SPRITES: 2000,
|
||||
|
|
|
@ -92,7 +92,7 @@ Systems.prototype = {
|
|||
this.children = new Component.Children(this.state);
|
||||
this.color = new Component.Color(this.state);
|
||||
this.data = new Component.Data(this.state);
|
||||
this.transform = new Component.Transform(this.state);
|
||||
//this.transform = new Component.Transform(this.state);
|
||||
|
||||
this.inject();
|
||||
},
|
||||
|
@ -113,7 +113,7 @@ Systems.prototype = {
|
|||
this.state.state = this.stateManager;
|
||||
|
||||
this.state.cameras = this.cameras;
|
||||
this.state.transform = this.transform;
|
||||
//this.state.transform = this.transform;
|
||||
|
||||
this.state.cache = this.game.cache;
|
||||
this.state.textures = this.game.textures;
|
||||
|
@ -139,7 +139,7 @@ Systems.prototype = {
|
|||
return;
|
||||
}
|
||||
|
||||
this.cameras.render(renderer, this.transform.flatRenderArray, interpolation);
|
||||
this.cameras.render(renderer, this.children, interpolation);
|
||||
}
|
||||
};
|
||||
|
||||
|
|
|
@ -84,7 +84,7 @@ CameraManager.prototype = {
|
|||
}
|
||||
},
|
||||
|
||||
render: function (renderer, flatRenderArray, interpolation)
|
||||
render: function (renderer, children, interpolation)
|
||||
{
|
||||
var cameras = this.cameras;
|
||||
|
||||
|
@ -94,9 +94,7 @@ CameraManager.prototype = {
|
|||
|
||||
camera.preRender();
|
||||
|
||||
renderer.render(this.state, flatRenderArray, interpolation, camera);
|
||||
|
||||
camera.postRender();
|
||||
renderer.render(this.state, children, interpolation, camera);
|
||||
}
|
||||
|
||||
},
|
||||
|
|
Loading…
Reference in a new issue