Skip to content

Commit 7a35f68

Browse files
photonstormphotonstorm
committed
MainLoop rendering interpolation done.
1 parent 961997a commit 7a35f68

8 files changed

Lines changed: 168 additions & 59 deletions

File tree

‎src/components/Transform.js‎

Lines changed: 127 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -33,12 +33,16 @@ Phaser.Component.Transform = function (gameObject, x, y, scaleX, scaleY)
3333
// World Transform
3434
this.world = { a: scaleX, b: 0, c: 0, d: scaleY, tx: x, ty: y };
3535

36+
this.old = { a: scaleX, b: 0, c: 0, d: scaleY, tx: x, ty: y };
37+
3638
// Cached Transform Calculations
3739
this.cache = { a: 1, b: 0, c: 0, d: 1, sr: 0, cr: 0 };
3840

3941
// GL Vertex Data
4042
this.glVertextData = { x0: 0, y0: 0, x1: 0, y1: 0, x2: 0, y2: 0, x3: 0, y3: 0 };
4143

44+
this.interpolate = false;
45+
4246
this.hasLocalRotation = false;
4347

4448
// Private value holders, accessed via the getters and setters
@@ -52,11 +56,18 @@ Phaser.Component.Transform = function (gameObject, x, y, scaleX, scaleY)
5256
this._anchorX = 0;
5357
this._anchorY = 0;
5458

59+
this._oldPosX = x;
60+
this._oldPosY = y;
61+
this._oldScaleX = scaleX;
62+
this._oldScaleY = scaleY;
63+
this._oldRotation = 0;
64+
5565
this._worldRotation = 0;
5666
this._worldScaleX = scaleX;
5767
this._worldScaleY = scaleY;
5868

5969
this._dirty = true;
70+
this._dirtyVertex = true;
6071

6172
this.state.sys.updates.add(this);
6273

@@ -138,19 +149,29 @@ Phaser.Component.Transform.prototype = {
138149
{
139150
if (y === undefined) { y = x; }
140151

152+
this._oldPosX = this._posX;
153+
this._oldPosY = this._posY;
154+
141155
this._posX = x;
142156
this._posY = y;
143157

158+
this._dirtyVertex = true;
159+
144160
return this.update();
145161
},
146162

147163
setScale: function (x, y)
148164
{
149165
if (y === undefined) { y = x; }
150166

167+
this._oldScaleX = this._scaleX;
168+
this._oldScaleY = this._scaleY;
169+
151170
this._scaleX = x;
152171
this._scaleY = y;
153172

173+
this._dirtyVertex = true;
174+
154175
this.updateCache();
155176

156177
return this.update();
@@ -178,38 +199,57 @@ Phaser.Component.Transform.prototype = {
178199

179200
setRotation: function (rotation)
180201
{
202+
this._oldRotation = this.rotation;
203+
181204
this.rotation = rotation;
182205

206+
this._dirtyVertex = true;
207+
183208
return this.update();
184209
},
185210

186211
// Updates the Transform.world object, ready for rendering
187212
// Assuming this Transform is a root node (i.e. no transform parent)
188213
updateFromRoot: function ()
189214
{
215+
var old = this.old;
216+
var world = this.world;
217+
218+
if (window.bob > 200 && window.bob < 300)
219+
{
220+
console.log('updateFromRoot');
221+
}
222+
223+
old.a = world.a;
224+
old.b = world.b;
225+
old.c = world.c;
226+
old.d = world.d;
227+
old.tx = world.tx;
228+
old.ty = world.ty;
229+
190230
if (this.hasLocalRotation)
191231
{
192232
// console.log(this.name, 'Transform.updateFromRoot');
193233

194-
this.world.a = this.cache.a;
195-
this.world.b = this.cache.b;
196-
this.world.c = this.cache.c;
197-
this.world.d = this.cache.d;
198-
this.world.tx = this._posX - ((this._pivotX * this.cache.a) + (this._pivotY * this.cache.c));
199-
this.world.ty = this._posY - ((this._pivotX * this.cache.b) + (this._pivotY * this.cache.d));
234+
world.a = this.cache.a;
235+
world.b = this.cache.b;
236+
world.c = this.cache.c;
237+
world.d = this.cache.d;
238+
world.tx = this._posX - ((this._pivotX * this.cache.a) + (this._pivotY * this.cache.c));
239+
world.ty = this._posY - ((this._pivotX * this.cache.b) + (this._pivotY * this.cache.d));
200240

201241
this._worldRotation = Math.atan2(-this.cache.c, this.cache.d);
202242
}
203243
else
204244
{
205245
// console.log(this.name, 'Transform.updateFromRoot FAST');
206246

207-
this.world.a = this._scaleX;
208-
this.world.b = 0;
209-
this.world.c = 0;
210-
this.world.d = this._scaleY;
211-
this.world.tx = this._posX - (this._pivotX * this._scaleX);
212-
this.world.ty = this._posY - (this._pivotY * this._scaleY);
247+
world.a = this._scaleX;
248+
world.b = 0;
249+
world.c = 0;
250+
world.d = this._scaleY;
251+
world.tx = this._posX - (this._pivotX * this._scaleX);
252+
world.ty = this._posY - (this._pivotY * this._scaleY);
213253

214254
this._worldRotation = 0;
215255
}
@@ -222,6 +262,21 @@ Phaser.Component.Transform.prototype = {
222262

223263
updateFromParent: function ()
224264
{
265+
var old = this.old;
266+
var world = this.world;
267+
268+
if (window.bob > 200 && window.bob < 300)
269+
{
270+
console.log('updateFromParent');
271+
}
272+
273+
old.a = world.a;
274+
old.b = world.b;
275+
old.c = world.c;
276+
old.d = world.d;
277+
old.tx = world.tx;
278+
old.ty = world.ty;
279+
225280
var parent = this.parent.world;
226281
var tx = 0;
227282
var ty = 0;
@@ -238,10 +293,10 @@ Phaser.Component.Transform.prototype = {
238293
tx = this._posX - ((this._pivotX * a) + (this._pivotY * c));
239294
ty = this._posY - ((this._pivotX * b) + (this._pivotY * d));
240295

241-
this.world.a = (a * parent.a) + (b * parent.c);
242-
this.world.b = (a * parent.b) + (b * parent.d);
243-
this.world.c = (c * parent.a) + (d * parent.c);
244-
this.world.d = (c * parent.b) + (d * parent.d);
296+
world.a = (a * parent.a) + (b * parent.c);
297+
world.b = (a * parent.b) + (b * parent.d);
298+
world.c = (c * parent.a) + (d * parent.c);
299+
world.d = (c * parent.b) + (d * parent.d);
245300
}
246301
else
247302
{
@@ -250,19 +305,19 @@ Phaser.Component.Transform.prototype = {
250305
tx = this._posX - (this._pivotX * this._scaleX);
251306
ty = this._posY - (this._pivotY * this._scaleY);
252307

253-
this.world.a = this._scaleX * parent.a;
254-
this.world.b = this._scaleX * parent.b;
255-
this.world.c = this._scaleY * parent.c;
256-
this.world.d = this._scaleY * parent.d;
308+
world.a = this._scaleX * parent.a;
309+
world.b = this._scaleX * parent.b;
310+
world.c = this._scaleY * parent.c;
311+
world.d = this._scaleY * parent.d;
257312
}
258313

259314
this._worldRotation = Math.atan2(-this.world.c, this.world.d);
260315

261-
this.world.tx = (tx * parent.a) + (ty * parent.c) + parent.tx;
262-
this.world.ty = (tx * parent.b) + (ty * parent.d) + parent.ty;
316+
world.tx = (tx * parent.a) + (ty * parent.c) + parent.tx;
317+
world.ty = (tx * parent.b) + (ty * parent.d) + parent.ty;
263318

264-
this._worldScaleX = this._scaleX * Math.sqrt((this.world.a * this.world.a) + (this.world.c * this.world.c));
265-
this._worldScaleY = this._scaleY * Math.sqrt((this.world.b * this.world.b) + (this.world.d * this.world.d));
319+
this._worldScaleX = this._scaleX * Math.sqrt((world.a * world.a) + (world.c * world.c));
320+
this._worldScaleY = this._scaleY * Math.sqrt((world.b * world.b) + (world.d * world.d));
266321

267322
return this;
268323
},
@@ -395,14 +450,8 @@ Phaser.Component.Transform.prototype = {
395450
}
396451
}
397452

398-
if (this.gameObject.frame)
399-
{
400-
// console.log(this.name, 'updateVertexData');
401-
402-
this.updateVertexData();
403-
}
404-
405453
this._dirty = false;
454+
this._dirtyVertex = true;
406455
},
407456

408457
updateCache: function ()
@@ -413,8 +462,13 @@ Phaser.Component.Transform.prototype = {
413462
this.cache.d = this.cache.cr * this._scaleY;
414463
},
415464

416-
updateVertexData: function ()
465+
updateVertexData: function (interpolationPercentage)
417466
{
467+
if (!this.gameObject.frame || !this._dirtyVertex)
468+
{
469+
return;
470+
}
471+
418472
var frame = this.gameObject.frame;
419473

420474
var w0;
@@ -457,6 +511,24 @@ Phaser.Component.Transform.prototype = {
457511
var tx = wt.tx;
458512
var ty = wt.ty;
459513

514+
if (this.interpolate)
515+
{
516+
var old = this.old;
517+
518+
// Interpolate with the last position to reduce stuttering.
519+
a = old.a + (a - old.a) * interpolationPercentage;
520+
b = old.b + (b - old.b) * interpolationPercentage;
521+
c = old.c + (c - old.c) * interpolationPercentage;
522+
d = old.d + (d - old.d) * interpolationPercentage;
523+
tx = old.tx + (tx - old.tx) * interpolationPercentage;
524+
ty = old.ty + (ty - old.ty) * interpolationPercentage;
525+
526+
if (window.bob > 200 && window.bob < 300)
527+
{
528+
console.log('updateVertexData', interpolationPercentage);
529+
}
530+
}
531+
460532
if (frame.rotated)
461533
{
462534
// var cw = frame.cutWidth;
@@ -514,11 +586,19 @@ Phaser.Component.Transform.prototype = {
514586

515587
// console.log('Vertex Data for', this.name);
516588
// console.log(vert);
517-
589+
590+
return vert;
518591
},
519592

520593
getVertexData: function (interpolationPercentage)
521594
{
595+
if (this.interpolate || this._dirtyVertex)
596+
{
597+
this.updateVertexData(interpolationPercentage);
598+
599+
this._dirtyVertex = false;
600+
}
601+
522602
return this.glVertextData;
523603
},
524604

@@ -555,7 +635,9 @@ Object.defineProperties(Phaser.Component.Transform.prototype, {
555635

556636
set: function (value)
557637
{
638+
this._oldPosX = this._posX;
558639
this._posX = value;
640+
559641
this.dirty = true;
560642
}
561643

@@ -572,7 +654,9 @@ Object.defineProperties(Phaser.Component.Transform.prototype, {
572654

573655
set: function (value)
574656
{
657+
this._oldPosY = this._posY;
575658
this._posY = value;
659+
576660
this.dirty = true;
577661
}
578662

@@ -589,8 +673,12 @@ Object.defineProperties(Phaser.Component.Transform.prototype, {
589673

590674
set: function (value)
591675
{
676+
this._oldScaleX = this._scaleX;
677+
this._oldScaleY = this._scaleY;
678+
592679
this._scaleX = value;
593680
this._scaleY = value;
681+
594682
this.dirty = true;
595683
this.updateCache();
596684
}
@@ -609,6 +697,8 @@ Object.defineProperties(Phaser.Component.Transform.prototype, {
609697
set: function (value)
610698
{
611699
this._scaleX = value;
700+
this._oldScaleX = this._scaleX;
701+
612702
this.dirty = true;
613703
this.updateCache();
614704
}
@@ -626,7 +716,9 @@ Object.defineProperties(Phaser.Component.Transform.prototype, {
626716

627717
set: function (value)
628718
{
719+
this._oldScaleY = this._scaleY;
629720
this._scaleY = value;
721+
630722
this.dirty = true;
631723
this.updateCache();
632724
}
@@ -751,6 +843,7 @@ Object.defineProperties(Phaser.Component.Transform.prototype, {
751843
return;
752844
}
753845

846+
this._oldRotation = this._rotation;
754847
this._rotation = value;
755848
this.dirty = true;
756849

@@ -789,6 +882,7 @@ Object.defineProperties(Phaser.Component.Transform.prototype, {
789882
}
790883

791884
this._dirty = true;
885+
this._dirtyVertex = true;
792886
}
793887
else
794888
{

‎src/gameobjects/image/ImageWebGLRenderer.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ Phaser.Renderer.WebGL.GameObjects.Image = {
1616
return;
1717
}
1818

19-
var verts = src.transform.glVertextData;
19+
var verts = src.transform.getVertexData(interpolationPercentage);
2020
var index = src.frame.source.glTextureIndex;
2121
var tint = src.color._glTint;
2222
var bg = src.color._glBg;

0 commit comments

Comments
 (0)