Mirrors/phaser
2
0
Fork 0
mirror of https://github.com/photonstorm/phaser synced 2024-11-21 20:23:19 +00:00
Code Issues Projects Releases Packages Wiki Activity

And ScrollRegions work too :)

Browse source
This commit is contained in:
Richard Davey 2013-04-23 19:24:16 +01:00
parent 332f715943
commit 00fb20f8c2
11 changed files with 244 additions and 99 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

69
Phaser/gameobjects/ScrollRegion.ts
View file

@ -15,16 +15,13 @@ module Phaser {
constructor(x: number, y: number, width: number, height: number, speedX:number, speedY:number) {
// Our seamless scrolling quads
this._A = new Quad(0, 0, width, height);
this._B = new Quad();
this._C = new Quad();
this._D = new Quad();
this._A = new Quad(x, y, width, height);
this._B = new Quad(x, y, width, height);
this._C = new Quad(x, y, width, height);
this._D = new Quad(x, y, width, height);
this._scroll = new MicroPoint();
this._offset = new MicroPoint(x, y);
this._bounds = new Quad(x, y, width, height);
this.scrollSpeed = new MicroPoint(speedX, speedY);
this.bounds = new Quad(0, 0, width, height);
}
@ -33,59 +30,58 @@ module Phaser {
private _C: Quad;
private _D: Quad;
private _bounds: Quad;
private _scroll: MicroPoint;
private _offset: MicroPoint;
private _anchorWidth: number = 0;
private _anchorHeight: number = 0;
private _inverseWidth: number = 0;
private _inverseHeight: number = 0;
public bounds: Quad;
public visible: bool = true;
public scrollSpeed: MicroPoint;
public update(delta: number) {
this._scroll.x = Math.round(this._scroll.x + (this.scrollSpeed.x));
this._scroll.y = Math.round(this._scroll.y + (this.scrollSpeed.y));
this._scroll.x += this.scrollSpeed.x;
this._scroll.y += this.scrollSpeed.y;
if (this._scroll.x > this._offset.x + this.bounds.width)
if (this._scroll.x > this._bounds.right)
{
this._scroll.x = this._offset.x;
this._scroll.x = this._bounds.x;
}
if (this._scroll.x < this._offset.x)
if (this._scroll.x < this._bounds.x)
{
this._scroll.x = this._offset.x + this.bounds.width;
this._scroll.x = this._bounds.right;
}
if (this._scroll.y > this._offset.y + this.bounds.height)
if (this._scroll.y > this._bounds.bottom)
{
this._scroll.y = this._offset.y;
this._scroll.y = this._bounds.y;
}
if (this._scroll.y < this._offset.y)
if (this._scroll.y < this._bounds.y)
{
this._scroll.y = this._offset.y + this.bounds.height;
this._scroll.y = this._bounds.bottom;
}
// Anchor Dimensions
this._anchorWidth = this.bounds.width - this._scroll.x;
this._anchorHeight = this.bounds.height - this._scroll.y;
this._anchorWidth = (this._bounds.width - this._scroll.x) + this._bounds.x;
this._anchorHeight = (this._bounds.height - this._scroll.y) + this._bounds.y;
if (this._anchorWidth > this.bounds.width)
if (this._anchorWidth > this._bounds.width)
{
this._anchorWidth = this.bounds.width;
this._anchorWidth = this._bounds.width;
}
if (this._anchorHeight > this.bounds.height)
if (this._anchorHeight > this._bounds.height)
{
this._anchorHeight = this.bounds.height;
this._anchorHeight = this._bounds.height;
}
this._inverseWidth = this.bounds.width - this._anchorWidth;
this._inverseHeight = this.bounds.height - this._anchorHeight;
this._inverseWidth = this._bounds.width - this._anchorWidth;
this._inverseHeight = this._bounds.height - this._anchorHeight;
// Quad A
this._A.setTo(this._scroll.x, this._scroll.y, this._anchorWidth, this._anchorHeight);
@ -113,11 +109,21 @@ module Phaser {
return;
}
// dx/dy are the world coordinates to render the FULL ScrollZone into.
// This ScrollRegion may be smaller than that and offset from the dx/dy coordinates.
this.crop(context, texture, this._A.x, this._A.y, this._A.width, this._A.height, dx, dy, dw, dh, 0, 0);
this.crop(context, texture, this._B.x, this._B.y, this._B.width, this._B.height, dx, dy, dw, dh, this._A.width, 0);
this.crop(context, texture, this._C.x, this._C.y, this._C.width, this._C.height, dx, dy, dw, dh, 0, this._A.height);
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);
//context.fillStyle = 'rgb(255,255,255)';
//context.font = '18px Arial';
//context.fillText('QuadA: ' + this._A.toString(), 32, 450);
//context.fillText('QuadB: ' + this._B.toString(), 32, 480);
//context.fillText('QuadC: ' + this._C.toString(), 32, 510);
//context.fillText('QuadD: ' + this._D.toString(), 32, 540);
}
private crop(context, texture, srcX, srcY, srcW, srcH, destX, destY, destW, destH, offsetX, offsetY) {
@ -135,6 +141,13 @@ module Phaser {
srcH = (destY + destH) - offsetY;
}
srcX = Math.floor(srcX);
srcY = Math.floor(srcY);
srcW = Math.floor(srcW);
srcH = Math.floor(srcH);
offsetX = Math.floor(offsetX + this._bounds.x);
offsetY = Math.floor(offsetY + this._bounds.y);
if (srcW > 0 && srcH > 0)
{
context.drawImage(texture, srcX, srcY, srcW, srcH, offsetX, offsetY, srcW, srcH);

8
Phaser/gameobjects/ScrollZone.ts
View file

@ -64,6 +64,12 @@ module Phaser {
public addRegion(x: number, y: number, width: number, height: number, speedX?:number = 0, speedY?:number = 0):ScrollRegion {
if (x > this.width || y > this.height || x < 0 || y < 0 || (x + width) > this.width || (y + height) > this.height)
{
throw Error('Invalid ScrollRegion defined. Cannot be larger than parent ScrollZone');
return;
}
this.currentRegion = new ScrollRegion(x, y, width, height, speedX, speedY);
this.regions.push(this.currentRegion);
@ -79,6 +85,8 @@ module Phaser {
this.currentRegion.scrollSpeed.setTo(x, y);
}
return this;
}
public update() {

11
Phaser/geom/Quad.ts
View file

@ -82,6 +82,17 @@ module Phaser {
}
/**
* Returns a string representation of this object.
* @method toString
* @return {string} a string representation of the object.
**/
public toString(): string {
return "[{Quad (x=" + this.x + " y=" + this.y + " width=" + this.width + " height=" + this.height + ")}]";
}
}
}

4
Tests/Tests.csproj
View file

@ -111,6 +111,10 @@
<DependentUpon>parallax.ts</DependentUpon>
</Content>
<TypeScriptCompile Include="scrollzones\scroll window.ts" />
<TypeScriptCompile Include="scrollzones\region demo.ts" />
<Content Include="scrollzones\region demo.js">
<DependentUpon>region demo.ts</DependentUpon>
</Content>
<Content Include="scrollzones\scroll window.js">
<DependentUpon>scroll window.ts</DependentUpon>
</Content>

BIN
Tests/assets/pics/game14_angel_dawn.png
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 41 KiB

After

Width:  |  Height:  |  Size: 48 KiB

76
Tests/phaser.js
View file

@ -11581,6 +11581,14 @@ var Phaser;
if (typeof t === "undefined") { t = 0; }
return !(q.left > this.right + t || q.right < this.left - t || q.top > this.bottom + t || q.bottom < this.top - t);
};
Quad.prototype.toString = /**
* Returns a string representation of this object.
* @method toString
* @return {string} a string representation of the object.
**/
function () {
return "[{Quad (x=" + this.x + " y=" + this.y + " width=" + this.width + " height=" + this.height + ")}]";
};
return Quad;
})();
Phaser.Quad = Quad;
@ -11603,41 +11611,40 @@ var Phaser;
this._inverseHeight = 0;
this.visible = true;
// Our seamless scrolling quads
this._A = new Phaser.Quad(0, 0, width, height);
this._B = new Phaser.Quad();
this._C = new Phaser.Quad();
this._D = new Phaser.Quad();
this._A = new Phaser.Quad(x, y, width, height);
this._B = new Phaser.Quad(x, y, width, height);
this._C = new Phaser.Quad(x, y, width, height);
this._D = new Phaser.Quad(x, y, width, height);
this._scroll = new Phaser.MicroPoint();
this._offset = new Phaser.MicroPoint(x, y);
this._bounds = new Phaser.Quad(x, y, width, height);
this.scrollSpeed = new Phaser.MicroPoint(speedX, speedY);
this.bounds = new Phaser.Quad(0, 0, width, height);
}
ScrollRegion.prototype.update = function (delta) {
this._scroll.x = Math.round(this._scroll.x + (this.scrollSpeed.x));
this._scroll.y = Math.round(this._scroll.y + (this.scrollSpeed.y));
if(this._scroll.x > this._offset.x + this.bounds.width) {
this._scroll.x = this._offset.x;
this._scroll.x += this.scrollSpeed.x;
this._scroll.y += this.scrollSpeed.y;
if(this._scroll.x > this._bounds.right) {
this._scroll.x = this._bounds.x;
}
if(this._scroll.x < this._offset.x) {
this._scroll.x = this._offset.x + this.bounds.width;
if(this._scroll.x < this._bounds.x) {
this._scroll.x = this._bounds.right;
}
if(this._scroll.y > this._offset.y + this.bounds.height) {
this._scroll.y = this._offset.y;
if(this._scroll.y > this._bounds.bottom) {
this._scroll.y = this._bounds.y;
}
if(this._scroll.y < this._offset.y) {
this._scroll.y = this._offset.y + this.bounds.height;
if(this._scroll.y < this._bounds.y) {
this._scroll.y = this._bounds.bottom;
}
// Anchor Dimensions
this._anchorWidth = this.bounds.width - this._scroll.x;
this._anchorHeight = this.bounds.height - this._scroll.y;
if(this._anchorWidth > this.bounds.width) {
this._anchorWidth = this.bounds.width;
this._anchorWidth = (this._bounds.width - this._scroll.x) + this._bounds.x;
this._anchorHeight = (this._bounds.height - this._scroll.y) + this._bounds.y;
if(this._anchorWidth > this._bounds.width) {
this._anchorWidth = this._bounds.width;
}
if(this._anchorHeight > this.bounds.height) {
this._anchorHeight = this.bounds.height;
if(this._anchorHeight > this._bounds.height) {
this._anchorHeight = this._bounds.height;
}
this._inverseWidth = this.bounds.width - this._anchorWidth;
this._inverseHeight = this.bounds.height - this._anchorHeight;
this._inverseWidth = this._bounds.width - this._anchorWidth;
this._inverseHeight = this._bounds.height - this._anchorHeight;
// Quad A
this._A.setTo(this._scroll.x, this._scroll.y, this._anchorWidth, this._anchorHeight);
// Quad B
@ -11656,11 +11663,19 @@ var Phaser;
if(this.visible == false) {
return;
}
// dx/dy are the world coordinates to render the FULL ScrollZone into.
// This ScrollRegion may be smaller than that and offset from the dx/dy coordinates.
this.crop(context, texture, this._A.x, this._A.y, this._A.width, this._A.height, dx, dy, dw, dh, 0, 0);
this.crop(context, texture, this._B.x, this._B.y, this._B.width, this._B.height, dx, dy, dw, dh, this._A.width, 0);
this.crop(context, texture, this._C.x, this._C.y, this._C.width, this._C.height, dx, dy, dw, dh, 0, this._A.height);
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);
};
//context.fillStyle = 'rgb(255,255,255)';
//context.font = '18px Arial';
//context.fillText('QuadA: ' + this._A.toString(), 32, 450);
//context.fillText('QuadB: ' + this._B.toString(), 32, 480);
//context.fillText('QuadC: ' + this._C.toString(), 32, 510);
//context.fillText('QuadD: ' + this._D.toString(), 32, 540);
};
ScrollRegion.prototype.crop = function (context, texture, srcX, srcY, srcW, srcH, destX, destY, destW, destH, offsetX, offsetY) {
offsetX += destX;
offsetY += destY;
@ -11670,6 +11685,12 @@ var Phaser;
if(srcH > (destY + destH) - offsetY) {
srcH = (destY + destH) - offsetY;
}
srcX = Math.floor(srcX);
srcY = Math.floor(srcY);
srcW = Math.floor(srcW);
srcH = Math.floor(srcH);
offsetX = Math.floor(offsetX + this._bounds.x);
offsetY = Math.floor(offsetY + this._bounds.y);
if(srcW > 0 && srcH > 0) {
context.drawImage(texture, srcX, srcY, srcW, srcH, offsetX, offsetY, srcW, srcH);
}
@ -11729,6 +11750,10 @@ var Phaser;
ScrollZone.prototype.addRegion = function (x, y, width, height, speedX, speedY) {
if (typeof speedX === "undefined") { speedX = 0; }
if (typeof speedY === "undefined") { speedY = 0; }
if(x > this.width || y > this.height || x < 0 || y < 0 || (x + width) > this.width || (y + height) > this.height) {
throw Error('Invalid ScrollRegion defined. Cannot be larger than parent ScrollZone');
return;
}
this.currentRegion = new Phaser.ScrollRegion(x, y, width, height, speedX, speedY);
this.regions.push(this.currentRegion);
return this.currentRegion;
@ -11737,6 +11762,7 @@ var Phaser;
if(this.currentRegion) {
this.currentRegion.scrollSpeed.setTo(x, y);
}
return this;
};
ScrollZone.prototype.update = function () {
for(var i = 0; i < this.regions.length; i++) {

19
Tests/scrollzones/parallax.js
View file

@ -7,22 +7,21 @@
myGame.loader.load();
}
function create() {
// In this example we're creating a whole bunch of ScrollZones working on the same image
var zone = myGame.createScrollZone('starray');
var y = 10;
var speed = 6;
speed -= 0.3;
zone.currentRegion.visible = false;
var y = 0;
var speed = 16;
// The image consists of 10px high scrolling layers, this creates them quickly (top = fastest, getting slower as we move down)
for(var z = 0; z < 31; z++) {
for(var z = 0; z < 32; z++) {
zone.addRegion(0, y, 640, 10, speed);
if(z <= 14) {
speed -= 0.3;
if(z <= 15) {
speed -= 1;
} else {
speed += 0.3;
speed += 1;
}
if(z == 14) {
if(z == 15) {
y = 240;
speed += 0.3;
speed += 1;
} else {
y += 10;
}

21
Tests/scrollzones/parallax.ts
View file

@ -15,32 +15,31 @@
function create() {
// In this example we're creating a whole bunch of ScrollZones working on the same image
var zone: Phaser.ScrollZone = myGame.createScrollZone('starray');
var y:number = 10;
var speed:number = 6;
speed -= 0.3;
zone.currentRegion.visible = false;
var y:number = 0;
var speed:number = 16;
// The image consists of 10px high scrolling layers, this creates them quickly (top = fastest, getting slower as we move down)
for (var z:number = 0; z < 31; z++)
for (var z:number = 0; z < 32; z++)
{
zone.addRegion(0, y, 640, 10, speed);
if (z <= 14)
if (z <= 15)
{
speed -= 0.3;
speed -= 1;
}
else
{
speed += 0.3;
speed += 1;
}
if (z == 14)
if (z == 15)
{
y = 240;
speed += 0.3;
speed += 1;
}
else
{

22
Tests/scrollzones/region demo.js Normal file
View file

@ -0,0 +1,22 @@
/// <reference path="../../Phaser/Game.ts" />
/// <reference path="../../Phaser/gameobjects/ScrollZone.ts" />
(function () {
var myGame = new Phaser.Game(this, 'game', 800, 600, init, create);
function init() {
myGame.loader.addImageFile('angelDawn', 'assets/pics/game14_angel_dawn.png');
myGame.loader.load();
}
var scroller;
function create() {
// This creates our ScrollZone centered in the middle of the stage.
scroller = myGame.createScrollZone('angelDawn', myGame.stage.centerX - 320, 100);
// By default we won't scroll the full image, but we will create 3 ScrollRegions within it:
// This creates a ScrollRegion which can be thought of as a rectangle within the ScrollZone that can be scrolled
// independantly - this one scrolls the image of the spacemans head
scroller.addRegion(32, 32, 352, 240, 0, 2);
// The head in the top right
scroller.addRegion(480, 30, 96, 96, 4, 0);
// The small piece of text
scroller.addRegion(466, 160, 122, 14, 0, -0.5);
}
})();

37
Tests/scrollzones/region demo.ts Normal file
View file

@ -0,0 +1,37 @@
/// <reference path="../../Phaser/Game.ts" />
/// <reference path="../../Phaser/gameobjects/ScrollZone.ts" />
(function () {
var myGame = new Phaser.Game(this, 'game', 800, 600, init, create);
function init() {
myGame.loader.addImageFile('angelDawn', 'assets/pics/game14_angel_dawn.png');
myGame.loader.load();
}
var scroller: Phaser.ScrollZone;
function create() {
// This creates our ScrollZone centered in the middle of the stage.
scroller = myGame.createScrollZone('angelDawn', myGame.stage.centerX - 320, 100);
// By default we won't scroll the full image, but we will create 3 ScrollRegions within it:
// This creates a ScrollRegion which can be thought of as a rectangle within the ScrollZone that can be scrolled
// independantly - this one scrolls the image of the spacemans head
scroller.addRegion(32, 32, 352, 240, 0, 2);
// The head in the top right
scroller.addRegion(480, 30, 96, 96, 4, 0);
// The small piece of text
scroller.addRegion(466, 160, 122, 14, 0, -0.5);
}
})();

76
build/phaser.js
View file

@ -11581,6 +11581,14 @@ var Phaser;
if (typeof t === "undefined") { t = 0; }
return !(q.left > this.right + t || q.right < this.left - t || q.top > this.bottom + t || q.bottom < this.top - t);
};
Quad.prototype.toString = /**
* Returns a string representation of this object.
* @method toString
* @return {string} a string representation of the object.
**/
function () {
return "[{Quad (x=" + this.x + " y=" + this.y + " width=" + this.width + " height=" + this.height + ")}]";
};
return Quad;
})();
Phaser.Quad = Quad;
@ -11603,41 +11611,40 @@ var Phaser;
this._inverseHeight = 0;
this.visible = true;
// Our seamless scrolling quads
this._A = new Phaser.Quad(0, 0, width, height);
this._B = new Phaser.Quad();
this._C = new Phaser.Quad();
this._D = new Phaser.Quad();
this._A = new Phaser.Quad(x, y, width, height);
this._B = new Phaser.Quad(x, y, width, height);
this._C = new Phaser.Quad(x, y, width, height);
this._D = new Phaser.Quad(x, y, width, height);
this._scroll = new Phaser.MicroPoint();
this._offset = new Phaser.MicroPoint(x, y);
this._bounds = new Phaser.Quad(x, y, width, height);
this.scrollSpeed = new Phaser.MicroPoint(speedX, speedY);
this.bounds = new Phaser.Quad(0, 0, width, height);
}
ScrollRegion.prototype.update = function (delta) {
this._scroll.x = Math.round(this._scroll.x + (this.scrollSpeed.x));
this._scroll.y = Math.round(this._scroll.y + (this.scrollSpeed.y));
if(this._scroll.x > this._offset.x + this.bounds.width) {
this._scroll.x = this._offset.x;
this._scroll.x += this.scrollSpeed.x;
this._scroll.y += this.scrollSpeed.y;
if(this._scroll.x > this._bounds.right) {
this._scroll.x = this._bounds.x;
}
if(this._scroll.x < this._offset.x) {
this._scroll.x = this._offset.x + this.bounds.width;
if(this._scroll.x < this._bounds.x) {
this._scroll.x = this._bounds.right;
}
if(this._scroll.y > this._offset.y + this.bounds.height) {
this._scroll.y = this._offset.y;
if(this._scroll.y > this._bounds.bottom) {
this._scroll.y = this._bounds.y;
}
if(this._scroll.y < this._offset.y) {
this._scroll.y = this._offset.y + this.bounds.height;
if(this._scroll.y < this._bounds.y) {
this._scroll.y = this._bounds.bottom;
}
// Anchor Dimensions
this._anchorWidth = this.bounds.width - this._scroll.x;
this._anchorHeight = this.bounds.height - this._scroll.y;
if(this._anchorWidth > this.bounds.width) {
this._anchorWidth = this.bounds.width;
this._anchorWidth = (this._bounds.width - this._scroll.x) + this._bounds.x;
this._anchorHeight = (this._bounds.height - this._scroll.y) + this._bounds.y;
if(this._anchorWidth > this._bounds.width) {
this._anchorWidth = this._bounds.width;
}
if(this._anchorHeight > this.bounds.height) {
this._anchorHeight = this.bounds.height;
if(this._anchorHeight > this._bounds.height) {
this._anchorHeight = this._bounds.height;
}
this._inverseWidth = this.bounds.width - this._anchorWidth;
this._inverseHeight = this.bounds.height - this._anchorHeight;
this._inverseWidth = this._bounds.width - this._anchorWidth;
this._inverseHeight = this._bounds.height - this._anchorHeight;
// Quad A
this._A.setTo(this._scroll.x, this._scroll.y, this._anchorWidth, this._anchorHeight);
// Quad B
@ -11656,11 +11663,19 @@ var Phaser;
if(this.visible == false) {
return;
}
// dx/dy are the world coordinates to render the FULL ScrollZone into.
// This ScrollRegion may be smaller than that and offset from the dx/dy coordinates.
this.crop(context, texture, this._A.x, this._A.y, this._A.width, this._A.height, dx, dy, dw, dh, 0, 0);
this.crop(context, texture, this._B.x, this._B.y, this._B.width, this._B.height, dx, dy, dw, dh, this._A.width, 0);
this.crop(context, texture, this._C.x, this._C.y, this._C.width, this._C.height, dx, dy, dw, dh, 0, this._A.height);
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);
};
//context.fillStyle = 'rgb(255,255,255)';
//context.font = '18px Arial';
//context.fillText('QuadA: ' + this._A.toString(), 32, 450);
//context.fillText('QuadB: ' + this._B.toString(), 32, 480);
//context.fillText('QuadC: ' + this._C.toString(), 32, 510);
//context.fillText('QuadD: ' + this._D.toString(), 32, 540);
};
ScrollRegion.prototype.crop = function (context, texture, srcX, srcY, srcW, srcH, destX, destY, destW, destH, offsetX, offsetY) {
offsetX += destX;
offsetY += destY;
@ -11670,6 +11685,12 @@ var Phaser;
if(srcH > (destY + destH) - offsetY) {
srcH = (destY + destH) - offsetY;
}
srcX = Math.floor(srcX);
srcY = Math.floor(srcY);
srcW = Math.floor(srcW);
srcH = Math.floor(srcH);
offsetX = Math.floor(offsetX + this._bounds.x);
offsetY = Math.floor(offsetY + this._bounds.y);
if(srcW > 0 && srcH > 0) {
context.drawImage(texture, srcX, srcY, srcW, srcH, offsetX, offsetY, srcW, srcH);
}
@ -11729,6 +11750,10 @@ var Phaser;
ScrollZone.prototype.addRegion = function (x, y, width, height, speedX, speedY) {
if (typeof speedX === "undefined") { speedX = 0; }
if (typeof speedY === "undefined") { speedY = 0; }
if(x > this.width || y > this.height || x < 0 || y < 0 || (x + width) > this.width || (y + height) > this.height) {
throw Error('Invalid ScrollRegion defined. Cannot be larger than parent ScrollZone');
return;
}
this.currentRegion = new Phaser.ScrollRegion(x, y, width, height, speedX, speedY);
this.regions.push(this.currentRegion);
return this.currentRegion;
@ -11737,6 +11762,7 @@ var Phaser;
if(this.currentRegion) {
this.currentRegion.scrollSpeed.setTo(x, y);
}
return this;
};
ScrollZone.prototype.update = function () {
for(var i = 0; i < this.regions.length; i++) {