Skip to content

Commit 00fb20f

Browse files
photonstormphotonstorm
committed
And ScrollRegions work too :)
1 parent 332f715 commit 00fb20f

11 files changed

Lines changed: 244 additions & 99 deletions

File tree

‎Phaser/gameobjects/ScrollRegion.ts‎

Lines changed: 41 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -15,16 +15,13 @@ module Phaser {
1515
constructor(x: number, y: number, width: number, height: number, speedX:number, speedY:number) {
1616

1717
// Our seamless scrolling quads
18-
this._A = new Quad(0, 0, width, height);
19-
this._B = new Quad();
20-
this._C = new Quad();
21-
this._D = new Quad();
22-
18+
this._A = new Quad(x, y, width, height);
19+
this._B = new Quad(x, y, width, height);
20+
this._C = new Quad(x, y, width, height);
21+
this._D = new Quad(x, y, width, height);
2322
this._scroll = new MicroPoint();
24-
this._offset = new MicroPoint(x, y);
25-
23+
this._bounds = new Quad(x, y, width, height);
2624
this.scrollSpeed = new MicroPoint(speedX, speedY);
27-
this.bounds = new Quad(0, 0, width, height);
2825

2926
}
3027

@@ -33,59 +30,58 @@ module Phaser {
3330
private _C: Quad;
3431
private _D: Quad;
3532

33+
private _bounds: Quad;
3634
private _scroll: MicroPoint;
37-
private _offset: MicroPoint;
3835

3936
private _anchorWidth: number = 0;
4037
private _anchorHeight: number = 0;
4138
private _inverseWidth: number = 0;
4239
private _inverseHeight: number = 0;
4340

44-
public bounds: Quad;
4541
public visible: bool = true;
4642
public scrollSpeed: MicroPoint;
4743

4844
public update(delta: number) {
4945

50-
this._scroll.x = Math.round(this._scroll.x + (this.scrollSpeed.x));
51-
this._scroll.y = Math.round(this._scroll.y + (this.scrollSpeed.y));
46+
this._scroll.x += this.scrollSpeed.x;
47+
this._scroll.y += this.scrollSpeed.y;
5248

53-
if (this._scroll.x > this._offset.x + this.bounds.width)
49+
if (this._scroll.x > this._bounds.right)
5450
{
55-
this._scroll.x = this._offset.x;
51+
this._scroll.x = this._bounds.x;
5652
}
5753

58-
if (this._scroll.x < this._offset.x)
54+
if (this._scroll.x < this._bounds.x)
5955
{
60-
this._scroll.x = this._offset.x + this.bounds.width;
56+
this._scroll.x = this._bounds.right;
6157
}
6258

63-
if (this._scroll.y > this._offset.y + this.bounds.height)
59+
if (this._scroll.y > this._bounds.bottom)
6460
{
65-
this._scroll.y = this._offset.y;
61+
this._scroll.y = this._bounds.y;
6662
}
6763

68-
if (this._scroll.y < this._offset.y)
64+
if (this._scroll.y < this._bounds.y)
6965
{
70-
this._scroll.y = this._offset.y + this.bounds.height;
66+
this._scroll.y = this._bounds.bottom;
7167
}
7268

7369
// Anchor Dimensions
74-
this._anchorWidth = this.bounds.width - this._scroll.x;
75-
this._anchorHeight = this.bounds.height - this._scroll.y;
70+
this._anchorWidth = (this._bounds.width - this._scroll.x) + this._bounds.x;
71+
this._anchorHeight = (this._bounds.height - this._scroll.y) + this._bounds.y;
7672

77-
if (this._anchorWidth > this.bounds.width)
73+
if (this._anchorWidth > this._bounds.width)
7874
{
79-
this._anchorWidth = this.bounds.width;
75+
this._anchorWidth = this._bounds.width;
8076
}
8177

82-
if (this._anchorHeight > this.bounds.height)
78+
if (this._anchorHeight > this._bounds.height)
8379
{
84-
this._anchorHeight = this.bounds.height;
80+
this._anchorHeight = this._bounds.height;
8581
}
8682

87-
this._inverseWidth = this.bounds.width - this._anchorWidth;
88-
this._inverseHeight = this.bounds.height - this._anchorHeight;
83+
this._inverseWidth = this._bounds.width - this._anchorWidth;
84+
this._inverseHeight = this._bounds.height - this._anchorHeight;
8985

9086
// Quad A
9187
this._A.setTo(this._scroll.x, this._scroll.y, this._anchorWidth, this._anchorHeight);
@@ -113,11 +109,21 @@ module Phaser {
113109
return;
114110
}
115111

112+
// dx/dy are the world coordinates to render the FULL ScrollZone into.
113+
// This ScrollRegion may be smaller than that and offset from the dx/dy coordinates.
114+
116115
this.crop(context, texture, this._A.x, this._A.y, this._A.width, this._A.height, dx, dy, dw, dh, 0, 0);
117116
this.crop(context, texture, this._B.x, this._B.y, this._B.width, this._B.height, dx, dy, dw, dh, this._A.width, 0);
118117
this.crop(context, texture, this._C.x, this._C.y, this._C.width, this._C.height, dx, dy, dw, dh, 0, this._A.height);
119118
this.crop(context, texture, this._D.x, this._D.y, this._D.width, this._D.height, dx, dy, dw, dh, this._C.width, this._A.height);
120119

120+
//context.fillStyle = 'rgb(255,255,255)';
121+
//context.font = '18px Arial';
122+
//context.fillText('QuadA: ' + this._A.toString(), 32, 450);
123+
//context.fillText('QuadB: ' + this._B.toString(), 32, 480);
124+
//context.fillText('QuadC: ' + this._C.toString(), 32, 510);
125+
//context.fillText('QuadD: ' + this._D.toString(), 32, 540);
126+
121127
}
122128

123129
private crop(context, texture, srcX, srcY, srcW, srcH, destX, destY, destW, destH, offsetX, offsetY) {
@@ -135,6 +141,13 @@ module Phaser {
135141
srcH = (destY + destH) - offsetY;
136142
}
137143

144+
srcX = Math.floor(srcX);
145+
srcY = Math.floor(srcY);
146+
srcW = Math.floor(srcW);
147+
srcH = Math.floor(srcH);
148+
offsetX = Math.floor(offsetX + this._bounds.x);
149+
offsetY = Math.floor(offsetY + this._bounds.y);
150+
138151
if (srcW > 0 && srcH > 0)
139152
{
140153
context.drawImage(texture, srcX, srcY, srcW, srcH, offsetX, offsetY, srcW, srcH);

‎Phaser/gameobjects/ScrollZone.ts‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -64,6 +64,12 @@ module Phaser {
6464

6565
public addRegion(x: number, y: number, width: number, height: number, speedX?:number = 0, speedY?:number = 0):ScrollRegion {
6666

67+
if (x > this.width || y > this.height || x < 0 || y < 0 || (x + width) > this.width || (y + height) > this.height)
68+
{
69+
throw Error('Invalid ScrollRegion defined. Cannot be larger than parent ScrollZone');
70+
return;
71+
}
72+
6773
this.currentRegion = new ScrollRegion(x, y, width, height, speedX, speedY);
6874

6975
this.regions.push(this.currentRegion);
@@ -79,6 +85,8 @@ module Phaser {
7985
this.currentRegion.scrollSpeed.setTo(x, y);
8086
}
8187

88+
return this;
89+
8290
}
8391

8492
public update() {

‎Phaser/geom/Quad.ts‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -82,6 +82,17 @@ module Phaser {
8282

8383
}
8484

85+
/**
86+
* Returns a string representation of this object.
87+
* @method toString
88+
* @return {string} a string representation of the object.
89+
**/
90+
public toString(): string {
91+
92+
return "[{Quad (x=" + this.x + " y=" + this.y + " width=" + this.width + " height=" + this.height + ")}]";
93+
94+
}
95+
8596
}
8697

8798
}

‎Tests/Tests.csproj‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -111,6 +111,10 @@
111111
<DependentUpon>parallax.ts</DependentUpon>
112112
</Content>
113113
<TypeScriptCompile Include="scrollzones\scroll window.ts" />
114+
<TypeScriptCompile Include="scrollzones\region demo.ts" />
115+
<Content Include="scrollzones\region demo.js">
116+
<DependentUpon>region demo.ts</DependentUpon>
117+
</Content>
114118
<Content Include="scrollzones\scroll window.js">
115119
<DependentUpon>scroll window.ts</DependentUpon>
116120
</Content>

‎Tests/assets/pics/game14_angel_dawn.png‎

6.19 KB
Loading

‎Tests/phaser.js‎

Lines changed: 51 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -11581,6 +11581,14 @@ var Phaser;
1158111581
if (typeof t === "undefined") { t = 0; }
1158211582
return !(q.left > this.right + t || q.right < this.left - t || q.top > this.bottom + t || q.bottom < this.top - t);
1158311583
};
11584+
Quad.prototype.toString = /**
11585+
* Returns a string representation of this object.
11586+
* @method toString
11587+
* @return {string} a string representation of the object.
11588+
**/
11589+
function () {
11590+
return "[{Quad (x=" + this.x + " y=" + this.y + " width=" + this.width + " height=" + this.height + ")}]";
11591+
};
1158411592
return Quad;
1158511593
})();
1158611594
Phaser.Quad = Quad;
@@ -11603,41 +11611,40 @@ var Phaser;
1160311611
this._inverseHeight = 0;
1160411612
this.visible = true;
1160511613
// Our seamless scrolling quads
11606-
this._A = new Phaser.Quad(0, 0, width, height);
11607-
this._B = new Phaser.Quad();
11608-
this._C = new Phaser.Quad();
11609-
this._D = new Phaser.Quad();
11614+
this._A = new Phaser.Quad(x, y, width, height);
11615+
this._B = new Phaser.Quad(x, y, width, height);
11616+
this._C = new Phaser.Quad(x, y, width, height);
11617+
this._D = new Phaser.Quad(x, y, width, height);
1161011618
this._scroll = new Phaser.MicroPoint();
11611-
this._offset = new Phaser.MicroPoint(x, y);
11619+
this._bounds = new Phaser.Quad(x, y, width, height);
1161211620
this.scrollSpeed = new Phaser.MicroPoint(speedX, speedY);
11613-
this.bounds = new Phaser.Quad(0, 0, width, height);
1161411621
}
1161511622
ScrollRegion.prototype.update = function (delta) {
11616-
this._scroll.x = Math.round(this._scroll.x + (this.scrollSpeed.x));
11617-
this._scroll.y = Math.round(this._scroll.y + (this.scrollSpeed.y));
11618-
if(this._scroll.x > this._offset.x + this.bounds.width) {
11619-
this._scroll.x = this._offset.x;
11623+
this._scroll.x += this.scrollSpeed.x;
11624+
this._scroll.y += this.scrollSpeed.y;
11625+
if(this._scroll.x > this._bounds.right) {
11626+
this._scroll.x = this._bounds.x;
1162011627
}
11621-
if(this._scroll.x < this._offset.x) {
11622-
this._scroll.x = this._offset.x + this.bounds.width;
11628+
if(this._scroll.x < this._bounds.x) {
11629+
this._scroll.x = this._bounds.right;
1162311630
}
11624-
if(this._scroll.y > this._offset.y + this.bounds.height) {
11625-
this._scroll.y = this._offset.y;
11631+
if(this._scroll.y > this._bounds.bottom) {
11632+
this._scroll.y = this._bounds.y;
1162611633
}
11627-
if(this._scroll.y < this._offset.y) {
11628-
this._scroll.y = this._offset.y + this.bounds.height;
11634+
if(this._scroll.y < this._bounds.y) {
11635+
this._scroll.y = this._bounds.bottom;
1162911636
}
1163011637
// Anchor Dimensions
11631-
this._anchorWidth = this.bounds.width - this._scroll.x;
11632-
this._anchorHeight = this.bounds.height - this._scroll.y;
11633-
if(this._anchorWidth > this.bounds.width) {
11634-
this._anchorWidth = this.bounds.width;
11638+
this._anchorWidth = (this._bounds.width - this._scroll.x) + this._bounds.x;
11639+
this._anchorHeight = (this._bounds.height - this._scroll.y) + this._bounds.y;
11640+
if(this._anchorWidth > this._bounds.width) {
11641+
this._anchorWidth = this._bounds.width;
1163511642
}
11636-
if(this._anchorHeight > this.bounds.height) {
11637-
this._anchorHeight = this.bounds.height;
11643+
if(this._anchorHeight > this._bounds.height) {
11644+
this._anchorHeight = this._bounds.height;
1163811645
}
11639-
this._inverseWidth = this.bounds.width - this._anchorWidth;
11640-
this._inverseHeight = this.bounds.height - this._anchorHeight;
11646+
this._inverseWidth = this._bounds.width - this._anchorWidth;
11647+
this._inverseHeight = this._bounds.height - this._anchorHeight;
1164111648
// Quad A
1164211649
this._A.setTo(this._scroll.x, this._scroll.y, this._anchorWidth, this._anchorHeight);
1164311650
// Quad B
@@ -11656,11 +11663,19 @@ var Phaser;
1165611663
if(this.visible == false) {
1165711664
return;
1165811665
}
11666+
// dx/dy are the world coordinates to render the FULL ScrollZone into.
11667+
// This ScrollRegion may be smaller than that and offset from the dx/dy coordinates.
1165911668
this.crop(context, texture, this._A.x, this._A.y, this._A.width, this._A.height, dx, dy, dw, dh, 0, 0);
1166011669
this.crop(context, texture, this._B.x, this._B.y, this._B.width, this._B.height, dx, dy, dw, dh, this._A.width, 0);
1166111670
this.crop(context, texture, this._C.x, this._C.y, this._C.width, this._C.height, dx, dy, dw, dh, 0, this._A.height);
1166211671
this.crop(context, texture, this._D.x, this._D.y, this._D.width, this._D.height, dx, dy, dw, dh, this._C.width, this._A.height);
11663-
};
11672+
//context.fillStyle = 'rgb(255,255,255)';
11673+
//context.font = '18px Arial';
11674+
//context.fillText('QuadA: ' + this._A.toString(), 32, 450);
11675+
//context.fillText('QuadB: ' + this._B.toString(), 32, 480);
11676+
//context.fillText('QuadC: ' + this._C.toString(), 32, 510);
11677+
//context.fillText('QuadD: ' + this._D.toString(), 32, 540);
11678+
};
1166411679
ScrollRegion.prototype.crop = function (context, texture, srcX, srcY, srcW, srcH, destX, destY, destW, destH, offsetX, offsetY) {
1166511680
offsetX += destX;
1166611681
offsetY += destY;
@@ -11670,6 +11685,12 @@ var Phaser;
1167011685
if(srcH > (destY + destH) - offsetY) {
1167111686
srcH = (destY + destH) - offsetY;
1167211687
}
11688+
srcX = Math.floor(srcX);
11689+
srcY = Math.floor(srcY);
11690+
srcW = Math.floor(srcW);
11691+
srcH = Math.floor(srcH);
11692+
offsetX = Math.floor(offsetX + this._bounds.x);
11693+
offsetY = Math.floor(offsetY + this._bounds.y);
1167311694
if(srcW > 0 && srcH > 0) {
1167411695
context.drawImage(texture, srcX, srcY, srcW, srcH, offsetX, offsetY, srcW, srcH);
1167511696
}
@@ -11729,6 +11750,10 @@ var Phaser;
1172911750
ScrollZone.prototype.addRegion = function (x, y, width, height, speedX, speedY) {
1173011751
if (typeof speedX === "undefined") { speedX = 0; }
1173111752
if (typeof speedY === "undefined") { speedY = 0; }
11753+
if(x > this.width || y > this.height || x < 0 || y < 0 || (x + width) > this.width || (y + height) > this.height) {
11754+
throw Error('Invalid ScrollRegion defined. Cannot be larger than parent ScrollZone');
11755+
return;
11756+
}
1173211757
this.currentRegion = new Phaser.ScrollRegion(x, y, width, height, speedX, speedY);
1173311758
this.regions.push(this.currentRegion);
1173411759
return this.currentRegion;
@@ -11737,6 +11762,7 @@ var Phaser;
1173711762
if(this.currentRegion) {
1173811763
this.currentRegion.scrollSpeed.setTo(x, y);
1173911764
}
11765+
return this;
1174011766
};
1174111767
ScrollZone.prototype.update = function () {
1174211768
for(var i = 0; i < this.regions.length; i++) {

‎Tests/scrollzones/parallax.js‎

Lines changed: 9 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -7,22 +7,21 @@
77
myGame.loader.load();
88
}
99
function create() {
10-
// In this example we're creating a whole bunch of ScrollZones working on the same image
1110
var zone = myGame.createScrollZone('starray');
12-
var y = 10;
13-
var speed = 6;
14-
speed -= 0.3;
11+
zone.currentRegion.visible = false;
12+
var y = 0;
13+
var speed = 16;
1514
// The image consists of 10px high scrolling layers, this creates them quickly (top = fastest, getting slower as we move down)
16-
for(var z = 0; z < 31; z++) {
15+
for(var z = 0; z < 32; z++) {
1716
zone.addRegion(0, y, 640, 10, speed);
18-
if(z <= 14) {
19-
speed -= 0.3;
17+
if(z <= 15) {
18+
speed -= 1;
2019
} else {
21-
speed += 0.3;
20+
speed += 1;
2221
}
23-
if(z == 14) {
22+
if(z == 15) {
2423
y = 240;
25-
speed += 0.3;
24+
speed += 1;
2625
} else {
2726
y += 10;
2827
}

‎Tests/scrollzones/parallax.ts‎

Lines changed: 10 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -15,32 +15,31 @@
1515

1616
function create() {
1717

18-
// In this example we're creating a whole bunch of ScrollZones working on the same image
1918
var zone: Phaser.ScrollZone = myGame.createScrollZone('starray');
2019

21-
var y:number = 10;
22-
var speed:number = 6;
23-
24-
speed -= 0.3;
20+
zone.currentRegion.visible = false;
21+
22+
var y:number = 0;
23+
var speed:number = 16;
2524

2625
// The image consists of 10px high scrolling layers, this creates them quickly (top = fastest, getting slower as we move down)
27-
for (var z:number = 0; z < 31; z++)
26+
for (var z:number = 0; z < 32; z++)
2827
{
2928
zone.addRegion(0, y, 640, 10, speed);
3029

31-
if (z <= 14)
30+
if (z <= 15)
3231
{
33-
speed -= 0.3;
32+
speed -= 1;
3433
}
3534
else
3635
{
37-
speed += 0.3;
36+
speed += 1;
3837
}
3938

40-
if (z == 14)
39+
if (z == 15)
4140
{
4241
y = 240;
43-
speed += 0.3;
42+
speed += 1;
4443
}
4544
else
4645
{

0 commit comments

Comments
 (0)