/// /** * Phaser - ScrollZone * * Creates a scrolling region of the given width and height from an image in the cache. * The ScrollZone can be positioned anywhere in-world like a normal game object, re-act to physics, collision, etc. * The image within it is scrolled via ScrollRegions and their scrollSpeed.x/y properties. * If you create a scroll zone larger than the given source image it will create a DynamicTexture and fill it with a pattern of the source image. */ module Phaser { export class ScrollZone extends Sprite { /** * ScrollZone constructor * Create a new ScrollZone. * * @param game {Phaser.Game} Current game instance. * @param key {string} Asset key for image texture of this object. * @param x {number} X position in world coordinate. * @param y {number} Y position in world coordinate. * @param [width] {number} width of this object. * @param [height] {number} height of this object. */ constructor(game: Game, key:string, x: number = 0, y: number = 0, width: number = 0, height: number = 0) { super(game, x, y, key); this.type = Phaser.Types.SCROLLZONE; this.regions = []; if (this.texture.loaded) { if (width > this.width || height > this.height) { // Create our repeating texture (as the source image wasn't large enough for the requested size) this.createRepeatingTexture(width, height); this.width = width; this.height = height; } // Create a default ScrollRegion at the requested size this.addRegion(0, 0, this.width, this.height); // If the zone is smaller than the image itself then shrink the bounds if ((width < this.width || height < this.height) && width !== 0 && height !== 0) { this.width = width; this.height = height; } } } /** * Current region this zone is scrolling. * @type {ScrollRegion} */ public currentRegion: Phaser.ScrollRegion; /** * Array contains all added regions. * @type {ScrollRegion[]} */ public regions: Phaser.ScrollRegion[]; /** * Add a new region to this zone. * @param x {number} X position of the new region. * @param y {number} Y position of the new region. * @param width {number} Width of the new region. * @param height {number} Height of the new region. * @param [speedX] {number} x-axis scrolling speed. * @param [speedY] {number} y-axis scrolling speed. * @return {ScrollRegion} The newly added region. */ public addRegion(x: number, y: number, width: number, height: number, speedX: number = 0, speedY: number = 0): Phaser.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 null; } this.currentRegion = new Phaser.ScrollRegion(x, y, width, height, speedX, speedY); this.regions.push(this.currentRegion); return this.currentRegion; } /** * Set scrolling speed of current region. * @param x {number} X speed of current region. * @param y {number} Y speed of current region. */ public setSpeed(x: number, y: number) { if (this.currentRegion) { this.currentRegion.scrollSpeed.setTo(x, y); } return this; } /** * Update regions. */ public update() { for (var i = 0; i < this.regions.length; i++) { this.regions[i].update(this.game.time.delta); } } /** * Create repeating texture with _texture, and store it into the _dynamicTexture. * Used to create texture when texture image is small than size of the zone. */ private createRepeatingTexture(regionWidth: number, regionHeight: number) { // Work out how many we'll need of the source image to make it tile properly var tileWidth = Math.ceil(this.width / regionWidth) * regionWidth; var tileHeight = Math.ceil(this.height / regionHeight) * regionHeight; var dt: Phaser.Display.DynamicTexture = new Phaser.Display.DynamicTexture(this.game, tileWidth, tileHeight); dt.context.rect(0, 0, tileWidth, tileHeight); dt.context.fillStyle = dt.context.createPattern(this.texture.imageTexture, "repeat"); dt.context.fill(); this.texture.loadDynamicTexture(dt); } } }