From d7205992a53e0aed12df83f3c638619ef8d43491 Mon Sep 17 00:00:00 2001 From: Richard Davey Date: Wed, 7 Aug 2013 00:00:12 +0100 Subject: [PATCH] Fixed some issues in dragging sprites with snap-to-center and world coordinates. --- Phaser/cameras/Camera.ts | 21 -- Phaser/gameobjects/Sprite.ts | 1 + Phaser/gameobjects/TransformManager.ts | 26 +- Phaser/input/InputHandler.ts | 426 ++++++++++++------------- Phaser/input/InputManager.ts | 16 - Phaser/input/Pointer.ts | 45 --- Phaser/sound/Sound.ts | 27 -- Phaser/tilemap/TilemapLayer.ts | 12 - Phaser/utils/DebugUtils.ts | 219 ++++++++++++- README.md | 8 +- Tests/Tests.csproj | 8 + Tests/audio/audio sprites 1.js | 2 +- Tests/audio/audio sprites 1.ts | 2 +- Tests/audio/play sound 1.js | 2 +- Tests/audio/play sound 1.ts | 2 +- Tests/cameras/basic camera 1.js | 2 +- Tests/cameras/basic camera 1.ts | 2 +- Tests/cameras/scrollfactor 1.js | 2 +- Tests/cameras/scrollfactor 1.ts | 2 +- Tests/cameras/scrollfactor 2.js | 2 +- Tests/cameras/scrollfactor 2.ts | 2 +- Tests/cameras/world sprite.js | 2 +- Tests/cameras/world sprite.ts | 2 +- Tests/groups/bring to top 1.js | 2 +- Tests/groups/bring to top 1.ts | 2 +- Tests/input/bring to top.js | 2 +- Tests/input/bring to top.ts | 2 +- Tests/input/drag sprite 1.js | 5 +- Tests/input/drag sprite 1.ts | 5 +- Tests/input/drag sprite 2.js | 4 +- Tests/input/drag sprite 2.ts | 4 +- Tests/input/drag sprite 3.js | 21 ++ Tests/input/drag sprite 3.ts | 38 +++ Tests/input/game scale 1.js | 2 +- Tests/input/game scale 1.ts | 2 +- Tests/input/motion lock 2.js | 4 +- Tests/input/motion lock 2.ts | 4 +- Tests/input/motion lock.js | 4 +- Tests/input/motion lock.ts | 4 +- Tests/input/multitouch.js | 8 +- Tests/input/multitouch.ts | 8 +- Tests/input/over sprite 1.js | 4 +- Tests/input/over sprite 1.ts | 4 +- Tests/input/over sprite 2.js | 2 +- Tests/input/over sprite 2.ts | 2 +- Tests/input/point in rotated sprite.js | 2 +- Tests/input/point in rotated sprite.ts | 2 +- Tests/input/rotated sprites.js | 2 +- Tests/input/rotated sprites.ts | 2 +- Tests/input/snap 1.js | 2 +- Tests/input/snap 1.ts | 2 +- Tests/input/touch priority.js | 2 +- Tests/input/touch priority.ts | 2 +- Tests/input/world coordinates.js | 29 ++ Tests/input/world coordinates.ts | 54 ++++ Tests/input/world drag.js | 11 +- Tests/input/world drag.ts | 17 +- Tests/phaser.js | 314 ++++++++++-------- build/phaser.d.ts | 89 ++++-- build/phaser.js | 314 ++++++++++-------- 60 files changed, 1080 insertions(+), 730 deletions(-) create mode 100644 Tests/input/drag sprite 3.js create mode 100644 Tests/input/drag sprite 3.ts create mode 100644 Tests/input/world coordinates.js create mode 100644 Tests/input/world coordinates.ts diff --git a/Phaser/cameras/Camera.ts b/Phaser/cameras/Camera.ts index 2d7e32a8..c4375c39 100644 --- a/Phaser/cameras/Camera.ts +++ b/Phaser/cameras/Camera.ts @@ -406,27 +406,6 @@ module Phaser { } - /** - * Render debug infos. (including id, position, rotation, scrolling factor, worldBounds and some other properties) - * @param x {number} X position of the debug info to be rendered. - * @param y {number} Y position of the debug info to be rendered. - * @param [color] {number} color of the debug info to be rendered. (format is css color string) - */ - public renderDebugInfo(x: number, y: number, color?: string = 'rgb(255,255,255)') { - - this.game.stage.context.fillStyle = color; - this.game.stage.context.fillText('Camera ID: ' + this.ID + ' (' + this.screenView.width + ' x ' + this.screenView.height + ')', x, y); - this.game.stage.context.fillText('X: ' + this.screenView.x + ' Y: ' + this.screenView.y + ' rotation: ' + this.transform.rotation, x, y + 14); - this.game.stage.context.fillText('World X: ' + this.worldView.x + ' World Y: ' + this.worldView.y + ' W: ' + this.worldView.width + ' H: ' + this.worldView.height + ' R: ' + this.worldView.right + ' B: ' + this.worldView.bottom, x, y + 28); - this.game.stage.context.fillText('ScreenView X: ' + this.screenView.x + ' Y: ' + this.screenView.y + ' W: ' + this.screenView.width + ' H: ' + this.screenView.height, x, y + 42); - - if (this.worldBounds) - { - this.game.stage.context.fillText('Bounds: ' + this.worldBounds.width + ' x ' + this.worldBounds.height, x, y + 56); - } - - } - /** * Destroys this camera, associated FX and removes itself from the CameraManager. */ diff --git a/Phaser/gameobjects/Sprite.ts b/Phaser/gameobjects/Sprite.ts index e2d56c60..dd1f82da 100644 --- a/Phaser/gameobjects/Sprite.ts +++ b/Phaser/gameobjects/Sprite.ts @@ -250,6 +250,7 @@ module Phaser { /** * The crop rectangle allows you to control which part of the sprite texture is rendered without distorting it. * Set to null to disable, set to a Phaser.Rectangle object to control the region that will be rendered, anything outside the rectangle is ignored. + * This is a reference to Sprite.texture.crop * @type {Phaser.Rectangle} */ public crop: Phaser.Rectangle; diff --git a/Phaser/gameobjects/TransformManager.ts b/Phaser/gameobjects/TransformManager.ts index 8915011a..dab1972e 100644 --- a/Phaser/gameobjects/TransformManager.ts +++ b/Phaser/gameobjects/TransformManager.ts @@ -45,6 +45,8 @@ module Phaser.Components { private _rotation: number; + private _dirty: bool = false; + // Cache vars private _pos: Phaser.Point; private _scale: Phaser.Point; @@ -146,7 +148,8 @@ module Phaser.Components { } /** - * The offset on the X axis of the origin + * The offset on the X axis of the origin That is the difference between the top left of the Sprite and the origin.x. + * So if the origin.x is 0 the offsetX will be 0. If the origin.x is 0.5 then offsetX will be sprite width / 2, and so on. */ public get offsetX(): number { return this._offset.x; @@ -187,6 +190,19 @@ module Phaser.Components { return this._sc.y; } + /** + * Moves the sprite so its center is located on the given x and y coordinates. + * Doesn't change the origin of the sprite. + */ + public centerOn(x: number, y: number) { + + this.parent.x = x + (this.parent.x - this.center.x); + this.parent.y = y + (this.parent.y - this.center.y); + + this.setCache(); + + } + /** * Populates the transform cache. Called by the parent object on creation. */ @@ -240,7 +256,7 @@ module Phaser.Components { public update() { // Check cache - var dirty: bool = false; + this._dirty = false; // 1) Height or Width change (also triggered by a change in scale) or an Origin change if (this.parent.width !== this._size.x || this.parent.height !== this._size.y || this.origin.x !== this._origin.x|| this.origin.y !== this._origin.y) @@ -256,7 +272,7 @@ module Phaser.Components { this._size.y = this.parent.height; this._origin.x = this.origin.x; this._origin.y = this.origin.y; - dirty = true; + this._dirty = true; } // 2) Rotation change @@ -280,11 +296,11 @@ module Phaser.Components { // Store this._prevRotation = this.rotation; - dirty = true; + this._dirty = true; } // If it has moved, update the edges and center - if (dirty || this.parent.x != this._pos.x || this.parent.y != this._pos.y) + if (this._dirty || this.parent.x != this._pos.x || this.parent.y != this._pos.y) { this.center.x = this.parent.x + this._distance * this._scA.y; this.center.y = this.parent.y + this._distance * this._scA.x; diff --git a/Phaser/input/InputHandler.ts b/Phaser/input/InputHandler.ts index 5029066d..8f3235c5 100644 --- a/Phaser/input/InputHandler.ts +++ b/Phaser/input/InputHandler.ts @@ -45,20 +45,20 @@ module Phaser.Components { /** * The PriorityID controls which Sprite receives an Input event first if they should overlap. */ - public priorityID:number = 0; + public priorityID: number = 0; /** * The index of this Input component entry in the Game.Input manager. */ - public indexID:number = 0; + public indexID: number = 0; private _dragPoint: Point; private _draggedPointerID: number; public dragOffset: Point; public isDragged: bool = false; public dragFromCenter: bool; - public dragPixelPerfect:bool = false; - public dragPixelPerfectAlpha:number; + public dragPixelPerfect: bool = false; + public dragPixelPerfectAlpha: number; public allowHorizontalDrag: bool = true; public allowVerticalDrag: bool = true; @@ -208,11 +208,11 @@ module Phaser.Components { return this._pointerData[pointer].isDragged; } - public start(priority:number = 0, checkBody?:bool = false, useHandCursor?:bool = false): Phaser.Sprite { + public start(priority: number = 0, checkBody?: bool = false, useHandCursor?: bool = false): Phaser.Sprite { - // Turning on - if (this.enabled == false) - { + // Turning on + if (this.enabled == false) + { // Register, etc this.checkBody = checkBody; this.useHandCursor = useHandCursor; @@ -226,81 +226,81 @@ module Phaser.Components { } this.snapOffset = new Point; - this.enabled = true; + this.enabled = true; - this.game.input.addGameObject(this._parent); + this.game.input.addGameObject(this._parent); // Create the signals the Input component will emit - if (this._parent.events.onInputOver == null) - { - this._parent.events.onInputOver = new Phaser.Signal; - this._parent.events.onInputOut = new Phaser.Signal; - this._parent.events.onInputDown = new Phaser.Signal; - this._parent.events.onInputUp = new Phaser.Signal; - this._parent.events.onDragStart = new Phaser.Signal; - this._parent.events.onDragStop = new Phaser.Signal; - } - } + if (this._parent.events.onInputOver == null) + { + this._parent.events.onInputOver = new Phaser.Signal; + this._parent.events.onInputOut = new Phaser.Signal; + this._parent.events.onInputDown = new Phaser.Signal; + this._parent.events.onInputUp = new Phaser.Signal; + this._parent.events.onDragStart = new Phaser.Signal; + this._parent.events.onDragStop = new Phaser.Signal; + } + } return this._parent; - } + } - public reset() { + public reset() { - this.enabled = false; + this.enabled = false; for (var i = 0; i < 10; i++) { this._pointerData[i] = { id: i, x: 0, y: 0, isDown: false, isUp: false, isOver: false, isOut: false, timeOver: 0, timeOut: 0, timeDown: 0, timeUp: 0, downDuration: 0, isDragged: false }; } - } + } - public stop() { + public stop() { - // Turning off - if (this.enabled == false) - { - return; - } - else - { + // Turning off + if (this.enabled == false) + { + return; + } + else + { // De-register, etc - this.enabled = false; - this.game.input.removeGameObject(this.indexID); - } + this.enabled = false; + this.game.input.removeGameObject(this.indexID); + } - } + } /** * Clean up memory. */ public destroy() { - if (this.enabled) - { - this.enabled = false; - this.game.input.removeGameObject(this.indexID); - } + if (this.enabled) + { + this.enabled = false; + this.game.input.removeGameObject(this.indexID); + } } /** * Checks if the given pointer is over this Sprite. All checks are done in world coordinates. */ - public checkPointerOver(pointer: Phaser.Pointer): bool { + public checkPointerOver(pointer: Phaser.Pointer): bool { - if (this.enabled == false || this._parent.visible == false) - { - return false; - } - else - { + if (this.enabled == false || this._parent.visible == false) + { + return false; + } + else + { return SpriteUtils.overlapsXY(this._parent, pointer.worldX(), pointer.worldY()); - } + } - } + } /** * Update @@ -437,45 +437,45 @@ module Phaser.Components { } - /** + /** * Updates the Pointer drag on this Sprite. */ - private updateDrag(pointer: Pointer):bool - { - if (pointer.isUp) - { - this.stopDrag(pointer); - return false; - } + private updateDrag(pointer: Pointer): bool { - if (this.allowHorizontalDrag) - { - this._parent.x = pointer.x + this._dragPoint.x + this.dragOffset.x; - } - - if (this.allowVerticalDrag) - { - this._parent.y = pointer.y + this._dragPoint.y + this.dragOffset.y; - } - - if (this.boundsRect) - { - this.checkBoundsRect(); - } + if (pointer.isUp) + { + this.stopDrag(pointer); + return false; + } - if (this.boundsSprite) - { - this.checkBoundsSprite(); - } - - if (this.snapOnDrag) - { - this._parent.x = Math.floor(this._parent.x / this.snapX) * this.snapX; - this._parent.y = Math.floor(this._parent.y / this.snapY) * this.snapY; - } + if (this.allowHorizontalDrag) + { + this._parent.x = pointer.x + this._dragPoint.x + this.dragOffset.x; + } - return true; - } + if (this.allowVerticalDrag) + { + this._parent.y = pointer.y + this._dragPoint.y + this.dragOffset.y; + } + + if (this.boundsRect) + { + this.checkBoundsRect(); + } + + if (this.boundsSprite) + { + this.checkBoundsSprite(); + } + + if (this.snapOnDrag) + { + this._parent.x = Math.floor(this._parent.x / this.snapX) * this.snapX; + this._parent.y = Math.floor(this._parent.y / this.snapY) * this.snapY; + } + + return true; + } /** * Returns true if the pointer has entered the Sprite within the specified delay time (defaults to 500ms, half a second) @@ -543,7 +543,7 @@ module Phaser.Components { } - /** + /** * Make this Sprite draggable by the mouse. You can also optionally set mouseStartDragCallback and mouseStopDragCallback * * @param lockCenter If false the Sprite will drag from where you click it minus the dragOffset. If true it will center itself to the tip of the mouse pointer. @@ -553,61 +553,59 @@ module Phaser.Components { * @param boundsRect If you want to restrict the drag of this sprite to a specific FlxRect, pass the FlxRect here, otherwise it's free to drag anywhere * @param boundsSprite If you want to restrict the drag of this sprite to within the bounding box of another sprite, pass it here */ - public enableDrag(lockCenter:bool = false, bringToTop:bool = false, pixelPerfect:bool = false, alphaThreshold:number = 255, boundsRect:Rectangle = null, boundsSprite:Phaser.Sprite = null):void - { + public enableDrag(lockCenter: bool = false, bringToTop: bool = false, pixelPerfect: bool = false, alphaThreshold: number = 255, boundsRect: Rectangle = null, boundsSprite: Phaser.Sprite = null): void { this._dragPoint = new Point; - this.draggable = true; - this.bringToTop = bringToTop; - + this.draggable = true; + this.bringToTop = bringToTop; + this.dragOffset = new Point; - this.dragFromCenter = lockCenter; - this.dragPixelPerfect = pixelPerfect; - this.dragPixelPerfectAlpha = alphaThreshold; - - if (boundsRect) - { - this.boundsRect = boundsRect; - } - - if (boundsSprite) - { - this.boundsSprite = boundsSprite; - } - } - - /** + this.dragFromCenter = lockCenter; + this.dragPixelPerfect = pixelPerfect; + this.dragPixelPerfectAlpha = alphaThreshold; + + if (boundsRect) + { + this.boundsRect = boundsRect; + } + + if (boundsSprite) + { + this.boundsSprite = boundsSprite; + } + } + + /** * Stops this sprite from being able to be dragged. If it is currently the target of an active drag it will be stopped immediately. Also disables any set callbacks. */ - public disableDrag():void - { - if (this._pointerData) - { - for (var i = 0; i < 10; i++) - { - this._pointerData[i].isDragged = false; - } - } + public disableDrag(): void { - this.draggable = false; - this.isDragged = false; - this._draggedPointerID = -1; - } + if (this._pointerData) + { + for (var i = 0; i < 10; i++) + { + this._pointerData[i].isDragged = false; + } + } - /** + this.draggable = false; + this.isDragged = false; + this._draggedPointerID = -1; + + } + + /** * Called by Pointer when drag starts on this Sprite. Should not usually be called directly. */ - public startDrag(pointer: Pointer):void - { - this.isDragged = true; - this._draggedPointerID = pointer.id; + public startDrag(pointer: Pointer): void { + + this.isDragged = true; + this._draggedPointerID = pointer.id; this._pointerData[pointer.id].isDragged = true; - + if (this.dragFromCenter) { - // Move the sprite to the middle of the pointer - //this._dragPoint.setTo(-this._parent.worldView.halfWidth, -this._parent.worldView.halfHeight); - //this._dragPoint.setTo(this._parent.transform.center.x, this._parent.transform.center.y); + this._parent.transform.centerOn(pointer.worldX(), pointer.worldY()); this._dragPoint.setTo(this._parent.x - pointer.x, this._parent.y - pointer.y); } else @@ -624,40 +622,40 @@ module Phaser.Components { this._parent.events.onDragStart.dispatch(this._parent, pointer); - } + } - /** + /** * Called by Pointer when drag is stopped on this Sprite. Should not usually be called directly. */ - public stopDrag(pointer: Pointer):void - { - this.isDragged = false; - this._draggedPointerID = -1; + public stopDrag(pointer: Pointer): void { + + this.isDragged = false; + this._draggedPointerID = -1; this._pointerData[pointer.id].isDragged = false; - - if (this.snapOnRelease) - { - this._parent.x = Math.floor(this._parent.x / this.snapX) * this.snapX; - this._parent.y = Math.floor(this._parent.y / this.snapY) * this.snapY; - } + + if (this.snapOnRelease) + { + this._parent.x = Math.floor(this._parent.x / this.snapX) * this.snapX; + this._parent.y = Math.floor(this._parent.y / this.snapY) * this.snapY; + } this._parent.events.onDragStop.dispatch(this._parent, pointer); this._parent.events.onInputUp.dispatch(this._parent, pointer); - } - /** + } + + /** * Restricts this sprite to drag movement only on the given axis. Note: If both are set to false the sprite will never move! * * @param allowHorizontal To enable the sprite to be dragged horizontally set to true, otherwise false * @param allowVertical To enable the sprite to be dragged vertically set to true, otherwise false */ - public setDragLock(allowHorizontal:bool = true, allowVertical:bool = true):void - { - this.allowHorizontalDrag = allowHorizontal; - this.allowVerticalDrag = allowVertical; - } + public setDragLock(allowHorizontal: bool = true, allowVertical: bool = true): void { + this.allowHorizontalDrag = allowHorizontal; + this.allowVerticalDrag = allowVertical; + } - /** + /** * Make this Sprite snap to the given grid either during drag or when it's released. * For example 16x16 as the snapX and snapY would make the sprite snap to every 16 pixels. * @@ -666,87 +664,65 @@ module Phaser.Components { * @param onDrag If true the sprite will snap to the grid while being dragged * @param onRelease If true the sprite will snap to the grid when released */ - public enableSnap(snapX:number , snapY:number, onDrag:bool = true, onRelease:bool = false):void - { - this.snapOnDrag = onDrag; - this.snapOnRelease = onRelease; - this.snapX = snapX; - this.snapY = snapY; - } - - /** - * Stops the sprite from snapping to a grid during drag or release. - */ - public disableSnap():void - { - this.snapOnDrag = false; - this.snapOnRelease = false; - } - - /** - * Bounds Rect check for the sprite drag - */ - private checkBoundsRect():void - { - if (this._parent.x < this.boundsRect.left) - { - this._parent.x = this.boundsRect.x; - } - else if ((this._parent.x + this._parent.width) > this.boundsRect.right) - { - this._parent.x = this.boundsRect.right - this._parent.width; - } - - if (this._parent.y < this.boundsRect.top) - { - this._parent.y = this.boundsRect.top; - } - else if ((this._parent.y + this._parent.height) > this.boundsRect.bottom) - { - this._parent.y = this.boundsRect.bottom - this._parent.height; - } - } - - /** - * Parent Sprite Bounds check for the sprite drag - */ - private checkBoundsSprite():void - { - if (this._parent.x < this.boundsSprite.x) - { - this._parent.x = this.boundsSprite.x; - } - else if ((this._parent.x + this._parent.width) > (this.boundsSprite.x + this.boundsSprite.width)) - { - this._parent.x = (this.boundsSprite.x + this.boundsSprite.width) - this._parent.width; - } - - if (this._parent.y < this.boundsSprite.y) - { - this._parent.y = this.boundsSprite.y; - } - else if ((this._parent.y + this._parent.height) > (this.boundsSprite.y + this.boundsSprite.height)) - { - this._parent.y = (this.boundsSprite.y + this.boundsSprite.height) - this._parent.height; - } - } + public enableSnap(snapX: number, snapY: number, onDrag: bool = true, onRelease: bool = false): void { + this.snapOnDrag = onDrag; + this.snapOnRelease = onRelease; + this.snapX = snapX; + this.snapY = snapY; + } /** - * Render debug infos. (including name, bounds info, position and some other properties) - * @param x {number} X position of the debug info to be rendered. - * @param y {number} Y position of the debug info to be rendered. - * @param [color] {number} color of the debug info to be rendered. (format is css color string) - */ - public renderDebugInfo(x: number, y: number, color?: string = 'rgb(255,255,255)') { + * Stops the sprite from snapping to a grid during drag or release. + */ + public disableSnap(): void { + this.snapOnDrag = false; + this.snapOnRelease = false; + } - this._parent.texture.context.font = '14px Courier'; - this._parent.texture.context.fillStyle = color; - this._parent.texture.context.fillText('Sprite Input: (' + this._parent.worldView.width + ' x ' + this._parent.worldView.height + ')', x, y); - this._parent.texture.context.fillText('x: ' + this.pointerX().toFixed(1) + ' y: ' + this.pointerY().toFixed(1), x, y + 14); - this._parent.texture.context.fillText('over: ' + this.pointerOver() + ' duration: ' + this.overDuration().toFixed(0), x, y + 28); - this._parent.texture.context.fillText('down: ' + this.pointerDown() + ' duration: ' + this.downDuration().toFixed(0), x, y + 42); - this._parent.texture.context.fillText('just over: ' + this.justOver() + ' just out: ' + this.justOut(), x, y + 56); + /** + * Bounds Rect check for the sprite drag + */ + private checkBoundsRect(): void { + if (this._parent.x < this.boundsRect.left) + { + this._parent.x = this.boundsRect.x; + } + else if ((this._parent.x + this._parent.width) > this.boundsRect.right) + { + this._parent.x = this.boundsRect.right - this._parent.width; + } + if (this._parent.y < this.boundsRect.top) + { + this._parent.y = this.boundsRect.top; + } + else if ((this._parent.y + this._parent.height) > this.boundsRect.bottom) + { + this._parent.y = this.boundsRect.bottom - this._parent.height; + } + } + + /** + * Parent Sprite Bounds check for the sprite drag + */ + private checkBoundsSprite(): void { + if (this._parent.x < this.boundsSprite.x) + { + this._parent.x = this.boundsSprite.x; + } + else if ((this._parent.x + this._parent.width) > (this.boundsSprite.x + this.boundsSprite.width)) + { + this._parent.x = (this.boundsSprite.x + this.boundsSprite.width) - this._parent.width; + } + + if (this._parent.y < this.boundsSprite.y) + { + this._parent.y = this.boundsSprite.y; + } + else if ((this._parent.y + this._parent.height) > (this.boundsSprite.y + this.boundsSprite.height)) + { + this._parent.y = (this.boundsSprite.y + this.boundsSprite.height) - this._parent.height; + } } } diff --git a/Phaser/input/InputManager.ts b/Phaser/input/InputManager.ts index 5de7208c..57bc9bb9 100644 --- a/Phaser/input/InputManager.ts +++ b/Phaser/input/InputManager.ts @@ -950,22 +950,6 @@ module Phaser { return camera.worldView.y + this.y; } - /** - * @param {Number} x - * @param {Number} y - * @param {String} [color] - */ - public renderDebugInfo(x: number, y: number, color?: string = 'rgb(255,255,255)') { - - this.game.stage.context.fillStyle = color; - this.game.stage.context.fillText('Input', x, y); - this.game.stage.context.fillText('X: ' + this.x + ' Y: ' + this.y, x, y + 14); - this.game.stage.context.fillText('World X: ' + this.getWorldX() + ' World Y: ' + this.getWorldY(), x, y + 28); - this.game.stage.context.fillText('Scale X: ' + this.scale.x.toFixed(1) + ' Scale Y: ' + this.scale.x.toFixed(1), x, y + 42); - this.game.stage.context.fillText('Screen X: ' + this.activePointer.screenX + ' Screen Y: ' + this.activePointer.screenY, x, y + 56); - - } - /** * Get the distance between two Pointer objects * @method getDistance diff --git a/Phaser/input/Pointer.ts b/Phaser/input/Pointer.ts index b2668f49..47dfea58 100644 --- a/Phaser/input/Pointer.ts +++ b/Phaser/input/Pointer.ts @@ -655,51 +655,6 @@ module Phaser { } - /** - * Renders the Pointer.circle object onto the stage in green if down or red if up. - * @method renderDebug - */ - public renderDebug(hideIfUp: bool = false) { - - if (hideIfUp == true && this.isUp == true) - { - return; - } - - this.game.stage.context.beginPath(); - this.game.stage.context.arc(this.x, this.y, this.circle.radius, 0, Math.PI * 2); - - if (this.active) - { - this.game.stage.context.fillStyle = 'rgba(0,255,0,0.5)'; - this.game.stage.context.strokeStyle = 'rgb(0,255,0)'; - } - else - { - this.game.stage.context.fillStyle = 'rgba(255,0,0,0.5)'; - this.game.stage.context.strokeStyle = 'rgb(100,0,0)'; - } - - this.game.stage.context.fill(); - this.game.stage.context.closePath(); - - // Render the points - this.game.stage.context.beginPath(); - this.game.stage.context.moveTo(this.positionDown.x, this.positionDown.y); - this.game.stage.context.lineTo(this.position.x, this.position.y); - this.game.stage.context.lineWidth = 2; - this.game.stage.context.stroke(); - this.game.stage.context.closePath(); - - // Render the text - this.game.stage.context.fillStyle = 'rgb(255,255,255)'; - this.game.stage.context.font = 'Arial 16px'; - this.game.stage.context.fillText('ID: ' + this.id + " Active: " + this.active, this.x, this.y - 100); - this.game.stage.context.fillText('Screen X: ' + this.x + " Screen Y: " + this.y, this.x, this.y - 80); - this.game.stage.context.fillText('Duration: ' + this.duration + " ms", this.x, this.y - 60); - - } - /** * Returns a string representation of this object. * @method toString diff --git a/Phaser/sound/Sound.ts b/Phaser/sound/Sound.ts index 51915a43..063d0d0f 100644 --- a/Phaser/sound/Sound.ts +++ b/Phaser/sound/Sound.ts @@ -427,7 +427,6 @@ module Phaser { public resume() { - //if (this.isPlaying == false && this._sound) if (this.paused && this._sound) { if (this.usingWebAudio) @@ -459,8 +458,6 @@ module Phaser { */ public stop() { - //console.log('Sound.stop', this.currentMarker); - if (this.isPlaying && this._sound) { if (this.usingWebAudio) @@ -552,30 +549,6 @@ module Phaser { return this._volume; } - /** - * Renders the Pointer.circle object onto the stage in green if down or red if up. - * @method renderDebug - */ - public renderDebug(x: number, y: number) { - - this.game.stage.context.fillStyle = 'rgb(255,255,255)'; - this.game.stage.context.font = '16px Courier'; - this.game.stage.context.fillText('Sound: ' + this.key + ' Locked: ' + this.game.sound.touchLocked + ' Pending Playback: ' + this.pendingPlayback, x, y); - this.game.stage.context.fillText('Decoded: ' + this.isDecoded + ' Decoding: ' + this.isDecoding, x, y + 20); - this.game.stage.context.fillText('Total Duration: ' + this.totalDuration + ' Playing: ' + this.isPlaying, x, y + 40); - this.game.stage.context.fillText('Time: ' + this.currentTime, x, y + 60); - this.game.stage.context.fillText('Volume: ' + this.volume + ' Muted: ' + this.mute, x, y + 80); - this.game.stage.context.fillText('WebAudio: ' + this.usingWebAudio + ' Audio: ' + this.usingAudioTag, x, y + 100); - - if (this.currentMarker !== '') - { - this.game.stage.context.fillText('Marker: ' + this.currentMarker + ' Duration: ' + this.duration, x, y + 120); - this.game.stage.context.fillText('Start: ' + this.markers[this.currentMarker].start + ' Stop: ' + this.markers[this.currentMarker].stop, x, y + 140); - this.game.stage.context.fillText('Position: ' + this.position, x, y + 160); - } - - } - } } \ No newline at end of file diff --git a/Phaser/tilemap/TilemapLayer.ts b/Phaser/tilemap/TilemapLayer.ts index a40d7ccc..28beb84a 100644 --- a/Phaser/tilemap/TilemapLayer.ts +++ b/Phaser/tilemap/TilemapLayer.ts @@ -540,17 +540,5 @@ module Phaser { } - /* - public renderDebugInfo(x: number, y: number, color?: string = 'rgb(255,255,255)') { - - this.context.fillStyle = color; - this.context.fillText('TilemapLayer: ' + this.name, x, y); - this.context.fillText('startX: ' + this._startX + ' endX: ' + this._maxX, x, y + 14); - this.context.fillText('startY: ' + this._startY + ' endY: ' + this._maxY, x, y + 28); - this.context.fillText('dx: ' + this._dx + ' dy: ' + this._dy, x, y + 42); - - } - */ - } } \ No newline at end of file diff --git a/Phaser/utils/DebugUtils.ts b/Phaser/utils/DebugUtils.ts index 27edfeb9..fc5d38af 100644 --- a/Phaser/utils/DebugUtils.ts +++ b/Phaser/utils/DebugUtils.ts @@ -18,11 +18,192 @@ module Phaser { static game: Game; /** - * Render context of stage's canvas. + * The context to which the render debug info will be drawn. + * Defaults to the Game.Stage.context, but can be redirected anywhere. * @type {CanvasRenderingContext2D} */ static context: CanvasRenderingContext2D; + static currentX: number; + static currentY: number; + static font: string = '14px Courier'; + static lineHeight: number = 16; + static currentColor: string; + static renderShadow: bool = true; + + static start(x: number, y: number, color?: string = 'rgb(255,255,255)') { + + currentX = x; + currentY = y; + currentColor = color; + + DebugUtils.context.fillStyle = color; + DebugUtils.context.font = font; + + } + + static line(text: string, x?:number = null, y?:number = null) { + + if (x !== null) + { + currentX = x; + } + + if (y !== null) + { + currentY = y; + } + + if (renderShadow) + { + DebugUtils.context.fillStyle = 'rgb(0,0,0)'; + DebugUtils.context.fillText(text, currentX + 1, currentY + 1); + DebugUtils.context.fillStyle = currentColor; + } + + DebugUtils.context.fillText(text, currentX, currentY); + + currentY += lineHeight; + + } + + static renderSpriteCorners(sprite: Sprite, color?: string = 'rgb(255,0,255)') { + + start(0, 0, color); + + line('x: ' + Math.floor(sprite.transform.upperLeft.x) + ' y: ' + Math.floor(sprite.transform.upperLeft.y), sprite.transform.upperLeft.x, sprite.transform.upperLeft.y); + line('x: ' + Math.floor(sprite.transform.upperRight.x) + ' y: ' + Math.floor(sprite.transform.upperRight.y), sprite.transform.upperRight.x, sprite.transform.upperRight.y); + line('x: ' + Math.floor(sprite.transform.bottomLeft.x) + ' y: ' + Math.floor(sprite.transform.bottomLeft.y), sprite.transform.bottomLeft.x, sprite.transform.bottomLeft.y); + line('x: ' + Math.floor(sprite.transform.bottomRight.x) + ' y: ' + Math.floor(sprite.transform.bottomRight.y), sprite.transform.bottomRight.x, sprite.transform.bottomRight.y); + + } + + /** + * Render debug infos. (including id, position, rotation, scrolling factor, worldBounds and some other properties) + * @param x {number} X position of the debug info to be rendered. + * @param y {number} Y position of the debug info to be rendered. + * @param [color] {number} color of the debug info to be rendered. (format is css color string) + */ + static renderSoundInfo(sound: Sound, x: number, y: number, color?: string = 'rgb(255,255,255)') { + + start(x, y, color); + + line('Sound: ' + sound.key + ' Locked: ' + sound.game.sound.touchLocked + ' Pending Playback: ' + sound.pendingPlayback); + line('Decoded: ' + sound.isDecoded + ' Decoding: ' + sound.isDecoding); + line('Total Duration: ' + sound.totalDuration + ' Playing: ' + sound.isPlaying); + line('Time: ' + sound.currentTime); + line('Volume: ' + sound.volume + ' Muted: ' + sound.mute); + line('WebAudio: ' + sound.usingWebAudio + ' Audio: ' + sound.usingAudioTag); + + if (sound.currentMarker !== '') + { + line('Marker: ' + sound.currentMarker + ' Duration: ' + sound.duration); + line('Start: ' + sound.markers[sound.currentMarker].start + ' Stop: ' + sound.markers[sound.currentMarker].stop); + line('Position: ' + sound.position); + } + + } + + /** + * Render debug infos. (including id, position, rotation, scrolling factor, worldBounds and some other properties) + * @param x {number} X position of the debug info to be rendered. + * @param y {number} Y position of the debug info to be rendered. + * @param [color] {number} color of the debug info to be rendered. (format is css color string) + */ + static renderCameraInfo(camera: Camera, x: number, y: number, color?: string = 'rgb(255,255,255)') { + + start(x, y, color); + line('Camera ID: ' + camera.ID + ' (' + camera.screenView.width + ' x ' + camera.screenView.height + ')'); + line('X: ' + camera.screenView.x + ' Y: ' + camera.screenView.y + ' rotation: ' + camera.transform.rotation); + line('World X: ' + camera.worldView.x + ' World Y: ' + camera.worldView.y + ' W: ' + camera.worldView.width + ' H: ' + camera.worldView.height + ' R: ' + camera.worldView.right + ' B: ' + camera.worldView.bottom); + line('ScreenView X: ' + camera.screenView.x + ' Y: ' + camera.screenView.y + ' W: ' + camera.screenView.width + ' H: ' + camera.screenView.height); + + if (camera.worldBounds) + { + line('Bounds: ' + camera.worldBounds.width + ' x ' + camera.worldBounds.height); + } + + } + + /** + * Renders the Pointer.circle object onto the stage in green if down or red if up. + * @method renderDebug + */ + static renderPointer(pointer: Pointer, hideIfUp: bool = false, downColor?: string = 'rgba(0,255,0,0.5)', upColor?: string = 'rgba(255,0,0,0.5)', color?: string = 'rgb(255,255,255)') { + + if (hideIfUp == true && pointer.isUp == true) + { + return; + } + + DebugUtils.context.beginPath(); + DebugUtils.context.arc(pointer.x, pointer.y, pointer.circle.radius, 0, Math.PI * 2); + + if (pointer.active) + { + DebugUtils.context.fillStyle = downColor; + } + else + { + DebugUtils.context.fillStyle = upColor; + } + + DebugUtils.context.fill(); + DebugUtils.context.closePath(); + + // Render the points + DebugUtils.context.beginPath(); + DebugUtils.context.moveTo(pointer.positionDown.x, pointer.positionDown.y); + DebugUtils.context.lineTo(pointer.position.x, pointer.position.y); + DebugUtils.context.lineWidth = 2; + DebugUtils.context.stroke(); + DebugUtils.context.closePath(); + + // Render the text + start(pointer.x, pointer.y - 100, color); + + line('ID: ' + pointer.id + " Active: " + pointer.active); + line('World X: ' + pointer.worldX() + " World Y: " + pointer.worldY()); + line('Screen X: ' + pointer.x + " Screen Y: " + pointer.y); + line('Duration: ' + pointer.duration + " ms"); + + } + + /** + * Render Sprite Input Debug information + * @param x {number} X position of the debug info to be rendered. + * @param y {number} Y position of the debug info to be rendered. + * @param [color] {number} color of the debug info to be rendered. (format is css color string) + */ + static renderSpriteInputInfo(sprite: Sprite, x: number, y: number, color?: string = 'rgb(255,255,255)') { + + start(x, y, color); + + line('Sprite Input: (' + sprite.width + ' x ' + sprite.height + ')'); + line('x: ' + sprite.input.pointerX().toFixed(1) + ' y: ' + sprite.input.pointerY().toFixed(1)); + line('over: ' + sprite.input.pointerOver() + ' duration: ' + sprite.input.overDuration().toFixed(0)); + line('down: ' + sprite.input.pointerDown() + ' duration: ' + sprite.input.downDuration().toFixed(0)); + line('just over: ' + sprite.input.justOver() + ' just out: ' + sprite.input.justOut()); + + } + + /** + * Render debug information about the Input object. + * @param x {number} X position of the debug info to be rendered. + * @param y {number} Y position of the debug info to be rendered. + * @param [color] {number} color of the debug info to be rendered. (format is css color string) + */ + static renderInputInfo(x: number, y: number, color?: string = 'rgb(255,255,255)') { + + start(x, y, color); + line('Input'); + line('X: ' + game.input.x + ' Y: ' + game.input.y); + line('World X: ' + game.input.getWorldX() + ' World Y: ' + game.input.getWorldY()); + line('Scale X: ' + game.input.scale.x.toFixed(1) + ' Scale Y: ' + game.input.scale.x.toFixed(1)); + line('Screen X: ' + game.input.activePointer.screenX + ' Screen Y: ' + game.input.activePointer.screenY); + + } + /** * Render debug infos. (including name, bounds info, position and some other properties) * @param x {number} X position of the debug info to be rendered. @@ -31,14 +212,16 @@ module Phaser { */ static renderSpriteInfo(sprite: Sprite, x: number, y: number, color?: string = 'rgb(255,255,255)') { - DebugUtils.context.fillStyle = color; - DebugUtils.context.fillText('Sprite: ' + ' (' + sprite.width + ' x ' + sprite.height + ') origin: ' + sprite.transform.origin.x + ' x ' + sprite.transform.origin.y, x, y); - DebugUtils.context.fillText('x: ' + sprite.x.toFixed(1) + ' y: ' + sprite.y.toFixed(1) + ' rotation: ' + sprite.rotation.toFixed(1), x, y + 14); - DebugUtils.context.fillText('wx: ' + sprite.worldView.x + ' wy: ' + sprite.worldView.y + ' ww: ' + sprite.worldView.width.toFixed(1) + ' wh: ' + sprite.worldView.height.toFixed(1) + ' wb: ' + sprite.worldView.bottom + ' wr: ' + sprite.worldView.right, x, y + 28); - DebugUtils.context.fillText('sx: ' + sprite.transform.scale.x.toFixed(1) + ' sy: ' + sprite.transform.scale.y.toFixed(1), x, y + 42); - DebugUtils.context.fillText('tx: ' + sprite.texture.width.toFixed(1) + ' ty: ' + sprite.texture.height.toFixed(1), x, y + 56); - DebugUtils.context.fillText('cx: ' + sprite.cameraView.x + ' cy: ' + sprite.cameraView.y + ' cw: ' + sprite.cameraView.width + ' ch: ' + sprite.cameraView.height + ' cb: ' + sprite.cameraView.bottom + ' cr: ' + sprite.cameraView.right, x, y + 70); - DebugUtils.context.fillText('inCamera: ' + DebugUtils.game.renderer.inCamera(DebugUtils.game.camera, sprite), x, y + 84); + start(x, y, color); + line('Sprite: ' + ' (' + sprite.width + ' x ' + sprite.height + ') origin: ' + sprite.transform.origin.x + ' x ' + sprite.transform.origin.y); + line('x: ' + sprite.x.toFixed(1) + ' y: ' + sprite.y.toFixed(1) + ' rotation: ' + sprite.rotation.toFixed(1)); + line('wx: ' + sprite.worldView.x + ' wy: ' + sprite.worldView.y + ' ww: ' + sprite.worldView.width.toFixed(1) + ' wh: ' + sprite.worldView.height.toFixed(1) + ' wb: ' + sprite.worldView.bottom + ' wr: ' + sprite.worldView.right); + line('sx: ' + sprite.transform.scale.x.toFixed(1) + ' sy: ' + sprite.transform.scale.y.toFixed(1)); + line('tx: ' + sprite.texture.width.toFixed(1) + ' ty: ' + sprite.texture.height.toFixed(1)); + line('center x: ' + sprite.transform.center.x + ' y: ' + sprite.transform.center.y); + //line('cameraView x: ' + sprite.cameraView.x + ' y: ' + sprite.cameraView.y + ' width: ' + sprite.cameraView.width + ' height: ' + sprite.cameraView.height + ' bottom: ' + sprite.cameraView.bottom + ' right: ' + sprite.cameraView.right); + line('cameraView x: ' + sprite.cameraView.x + ' y: ' + sprite.cameraView.y + ' width: ' + sprite.cameraView.width + ' height: ' + sprite.cameraView.height); + line('inCamera: ' + DebugUtils.game.renderer.inCamera(DebugUtils.game.camera, sprite)); } @@ -57,6 +240,20 @@ module Phaser { } + static renderPixel(x: number, y: number, fillStyle: string = 'rgba(0,255,0,1)') { + + DebugUtils.context.fillStyle = fillStyle; + DebugUtils.context.fillRect(x, y, 1, 1); + + } + + static renderPoint(point: Phaser.Point, fillStyle: string = 'rgba(0,255,0,1)') { + + DebugUtils.context.fillStyle = fillStyle; + DebugUtils.context.fillRect(point.x, point.y, 1, 1); + + } + static renderRectangle(rect: Phaser.Rectangle, fillStyle: string = 'rgba(0,255,0,0.3)') { DebugUtils.context.fillStyle = fillStyle; @@ -78,9 +275,9 @@ module Phaser { * @param y {number} Y position of the debug info to be rendered. * @param [color] {number} color of the debug info to be rendered. (format is css color string) */ - static renderText(text: string, x: number, y: number, color?: string = 'rgb(255,255,255)') { + static renderText(text: string, x: number, y: number, color?: string = 'rgb(255,255,255)', font?: string = '16px Courier') { - DebugUtils.context.font = '16px Courier'; + DebugUtils.context.font = font; DebugUtils.context.fillStyle = color; DebugUtils.context.fillText(text, x, y); diff --git a/README.md b/README.md index 1dfcf315..d597d276 100644 --- a/README.md +++ b/README.md @@ -1,7 +1,7 @@ Phaser ====== -Version: 1.0.0 - Released: In Progress +Version: 1.0.0 - Released: August 12th 2013 By Richard Davey, [Photon Storm](http://www.photonstorm.com) @@ -30,24 +30,19 @@ TODO: * Update tests that use arrow keys and include touch/mouse support (FlxControlHandler style) * Pointer.getWorldX(camera) needs to take camera scale into consideration * Add clip support + shape options to Texture Component. -* Drag Sprite with "snap to center" uses local coords not world, so fails on scrolling world (no center lock works fine) * Need to be able to set the current tilemap layer, then the getTileXY default layer uses that one if no other given -* Pointer worldX/Y don't appear to be correct for some reason * Sprite collision events -* Move all of the renderDebugInfo methods to the DebugUtils class * Check bounds/edge points when sprite is only 1x1 sized :) * QuadTree.physics.checkHullIntersection * Add visible toggle if tween property is alpha <> 01 * Camera.isHidden uses an array and length check, faster to swap for a single counter, also try to remove indexOf check * Tilemap.render - move layers length to var -* Camera control method (touch/keyboard) * Tilemap.destroy needs doing * Sprite.transform.bottomRight/Left doesn't seem to take origin into account * Stage.opaqueBackground = 'rgb()' or null, alpha, blendMode, filters, mask, rotation+XYZ,scaleXYZ,visible * Stage CSS3 Transforms? * Ability to layer another DOM object and have it controlled by the game somehow. Can then do stacked canvas effects. * Stage lost to mute -* Need to limit touch priority of items in groups? * Bitmap Font support * Basic Window component (maybe a propogating Group?) * Put ArcadePhysics back in @@ -160,6 +155,7 @@ V1.0.0 * Added references to all the event listener functions so they can be cleanly destroyed. * Fixed interesting Firefox issue when an audio track ended it fired another 'canplaythrough' event, confusing the Loader. * Added the new PluginManager. Moved all the Camera FX over to plugins. Everything will be a plugin from now on. +* Added Sprite.transform.centerOn(x,y) to quickly center a sprite on a coordinate without messing with the sprite origin and regardless of rotation. V0.9.6 diff --git a/Tests/Tests.csproj b/Tests/Tests.csproj index f7e1358a..ed534820 100644 --- a/Tests/Tests.csproj +++ b/Tests/Tests.csproj @@ -165,6 +165,10 @@ + + + drag sprite 3.ts + game scale 1.ts @@ -205,6 +209,10 @@ touch priority.ts + + + world coordinates.ts + world drag.ts diff --git a/Tests/audio/audio sprites 1.js b/Tests/audio/audio sprites 1.js index dc709a62..475fbf4c 100644 --- a/Tests/audio/audio sprites 1.js +++ b/Tests/audio/audio sprites 1.js @@ -32,7 +32,7 @@ Phaser.UI.Button this.audioSprite.play('help'); } function render() { - this.audioSprite.renderDebug(32, 32); + Phaser.DebugUtils.renderSoundInfo(this.audioSprite, 32, 32); } function togglePause() { if(this.music.paused) { diff --git a/Tests/audio/audio sprites 1.ts b/Tests/audio/audio sprites 1.ts index e39e0343..bd6b6e33 100644 --- a/Tests/audio/audio sprites 1.ts +++ b/Tests/audio/audio sprites 1.ts @@ -38,7 +38,7 @@ } function render() { - this.audioSprite.renderDebug(32, 32); + Phaser.DebugUtils.renderSoundInfo(this.audioSprite, 32, 32); } function togglePause() { diff --git a/Tests/audio/play sound 1.js b/Tests/audio/play sound 1.js index 85620627..0b289bf3 100644 --- a/Tests/audio/play sound 1.js +++ b/Tests/audio/play sound 1.js @@ -30,7 +30,7 @@ Phaser.UI.Button //this.pause = game.add.button(200, 200, 'button', togglePause, this, 2, 1, 0); } function render() { - this.music.renderDebug(0, 300); + Phaser.DebugUtils.renderSoundInfo(this.music, 0, 300); } function togglePause() { if(this.music.paused) { diff --git a/Tests/audio/play sound 1.ts b/Tests/audio/play sound 1.ts index b4a28aa8..d7035395 100644 --- a/Tests/audio/play sound 1.ts +++ b/Tests/audio/play sound 1.ts @@ -35,7 +35,7 @@ } function render() { - this.music.renderDebug(0, 300); + Phaser.DebugUtils.renderSoundInfo(this.music, 0, 300); } function togglePause() { diff --git a/Tests/cameras/basic camera 1.js b/Tests/cameras/basic camera 1.js index 6bdbd0f1..98299658 100644 --- a/Tests/cameras/basic camera 1.js +++ b/Tests/cameras/basic camera 1.js @@ -26,6 +26,6 @@ } } function render() { - game.camera.renderDebugInfo(32, 32); + Phaser.DebugUtils.renderCameraInfo(game.camera, 32, 32); } })(); diff --git a/Tests/cameras/basic camera 1.ts b/Tests/cameras/basic camera 1.ts index 2d908496..5c81129a 100644 --- a/Tests/cameras/basic camera 1.ts +++ b/Tests/cameras/basic camera 1.ts @@ -50,7 +50,7 @@ function render() { - game.camera.renderDebugInfo(32, 32); + Phaser.DebugUtils.renderCameraInfo(game.camera, 32, 32); } diff --git a/Tests/cameras/scrollfactor 1.js b/Tests/cameras/scrollfactor 1.js index 73dd64a2..bf8a7986 100644 --- a/Tests/cameras/scrollfactor 1.js +++ b/Tests/cameras/scrollfactor 1.js @@ -27,6 +27,6 @@ } } function render() { - game.camera.renderDebugInfo(32, 32); + Phaser.DebugUtils.renderCameraInfo(game.camera, 32, 32); } })(); diff --git a/Tests/cameras/scrollfactor 1.ts b/Tests/cameras/scrollfactor 1.ts index edb1771f..c9921c76 100644 --- a/Tests/cameras/scrollfactor 1.ts +++ b/Tests/cameras/scrollfactor 1.ts @@ -51,7 +51,7 @@ function render() { - game.camera.renderDebugInfo(32, 32); + Phaser.DebugUtils.renderCameraInfo(game.camera, 32, 32); } diff --git a/Tests/cameras/scrollfactor 2.js b/Tests/cameras/scrollfactor 2.js index 36930136..b8c96a72 100644 --- a/Tests/cameras/scrollfactor 2.js +++ b/Tests/cameras/scrollfactor 2.js @@ -25,6 +25,6 @@ } } function render() { - game.camera.renderDebugInfo(32, 32); + Phaser.DebugUtils.renderCameraInfo(game.camera, 32, 32); } })(); diff --git a/Tests/cameras/scrollfactor 2.ts b/Tests/cameras/scrollfactor 2.ts index 6a0ba486..b0f40d13 100644 --- a/Tests/cameras/scrollfactor 2.ts +++ b/Tests/cameras/scrollfactor 2.ts @@ -48,7 +48,7 @@ function render() { - game.camera.renderDebugInfo(32, 32); + Phaser.DebugUtils.renderCameraInfo(game.camera, 32, 32); } diff --git a/Tests/cameras/world sprite.js b/Tests/cameras/world sprite.js index 93ac9c22..699efb8e 100644 --- a/Tests/cameras/world sprite.js +++ b/Tests/cameras/world sprite.js @@ -51,7 +51,7 @@ } } function render() { - game.camera.renderDebugInfo(32, 32); + Phaser.DebugUtils.renderCameraInfo(game.camera, 32, 32); Phaser.DebugUtils.renderSpriteInfo(ball, 32, 200); } })(); diff --git a/Tests/cameras/world sprite.ts b/Tests/cameras/world sprite.ts index 62d4ecd6..5036638f 100644 --- a/Tests/cameras/world sprite.ts +++ b/Tests/cameras/world sprite.ts @@ -77,7 +77,7 @@ function render() { - game.camera.renderDebugInfo(32, 32); + Phaser.DebugUtils.renderCameraInfo(game.camera, 32, 32); Phaser.DebugUtils.renderSpriteInfo(ball, 32, 200); } diff --git a/Tests/groups/bring to top 1.js b/Tests/groups/bring to top 1.js index 8f8d5e7b..475bd977 100644 --- a/Tests/groups/bring to top 1.js +++ b/Tests/groups/bring to top 1.js @@ -57,6 +57,6 @@ } } function render() { - game.input.renderDebugInfo(32, 32); + Phaser.DebugUtils.renderInputInfo(32, 32); } })(); diff --git a/Tests/groups/bring to top 1.ts b/Tests/groups/bring to top 1.ts index 27f9b746..fa9e7743 100644 --- a/Tests/groups/bring to top 1.ts +++ b/Tests/groups/bring to top 1.ts @@ -86,7 +86,7 @@ } function render() { - game.input.renderDebugInfo(32, 32); + Phaser.DebugUtils.renderInputInfo(32, 32); } })(); diff --git a/Tests/input/bring to top.js b/Tests/input/bring to top.js index 4052a34f..b1ae4393 100644 --- a/Tests/input/bring to top.js +++ b/Tests/input/bring to top.js @@ -23,6 +23,6 @@ } } function render() { - game.input.renderDebugInfo(32, 32); + Phaser.DebugUtils.renderInputInfo(32, 32); } })(); diff --git a/Tests/input/bring to top.ts b/Tests/input/bring to top.ts index 4c647472..8157ea94 100644 --- a/Tests/input/bring to top.ts +++ b/Tests/input/bring to top.ts @@ -34,7 +34,7 @@ } function render() { - game.input.renderDebugInfo(32, 32); + Phaser.DebugUtils.renderInputInfo(32, 32); } })(); diff --git a/Tests/input/drag sprite 1.js b/Tests/input/drag sprite 1.js index 08624934..ed426113 100644 --- a/Tests/input/drag sprite 1.js +++ b/Tests/input/drag sprite 1.js @@ -17,8 +17,7 @@ sprite.input.enableDrag(true); } function render() { - game.input.renderDebugInfo(32, 32); - //game.input.mousePointer.renderDebug(32, 32); - sprite.input.renderDebugInfo(300, 32); + Phaser.DebugUtils.renderInputInfo(32, 32); + Phaser.DebugUtils.renderSpriteInputInfo(sprite, 300, 32); } })(); diff --git a/Tests/input/drag sprite 1.ts b/Tests/input/drag sprite 1.ts index 6df65a62..2c0b2f07 100644 --- a/Tests/input/drag sprite 1.ts +++ b/Tests/input/drag sprite 1.ts @@ -30,9 +30,8 @@ function render() { - game.input.renderDebugInfo(32, 32); - //game.input.mousePointer.renderDebug(32, 32); - sprite.input.renderDebugInfo(300, 32); + Phaser.DebugUtils.renderInputInfo(32, 32); + Phaser.DebugUtils.renderSpriteInputInfo(sprite, 300, 32); } diff --git a/Tests/input/drag sprite 2.js b/Tests/input/drag sprite 2.js index 033c487d..fca1ea5a 100644 --- a/Tests/input/drag sprite 2.js +++ b/Tests/input/drag sprite 2.js @@ -16,7 +16,7 @@ sprite.input.dragOffset.y = -100; } function render() { - game.input.renderDebugInfo(32, 32); - sprite.input.renderDebugInfo(300, 32); + Phaser.DebugUtils.renderInputInfo(32, 32); + Phaser.DebugUtils.renderSpriteInputInfo(sprite, 300, 32); } })(); diff --git a/Tests/input/drag sprite 2.ts b/Tests/input/drag sprite 2.ts index 1b006435..fe38a089 100644 --- a/Tests/input/drag sprite 2.ts +++ b/Tests/input/drag sprite 2.ts @@ -30,8 +30,8 @@ function render() { - game.input.renderDebugInfo(32, 32); - sprite.input.renderDebugInfo(300, 32); + Phaser.DebugUtils.renderInputInfo(32, 32); + Phaser.DebugUtils.renderSpriteInputInfo(sprite, 300, 32); } diff --git a/Tests/input/drag sprite 3.js b/Tests/input/drag sprite 3.js new file mode 100644 index 00000000..92287e76 --- /dev/null +++ b/Tests/input/drag sprite 3.js @@ -0,0 +1,21 @@ +/// +(function () { + var game = new Phaser.Game(this, 'game', 800, 600, init, create, null, render); + function init() { + // Using Phasers asset loader we load up a PNG from the assets folder + game.load.image('sprite', 'assets/sprites/atari800.png'); + game.load.start(); + } + var sprite; + function create() { + sprite = game.add.sprite(500, 300, 'sprite'); + sprite.input.start(0, false, true); + // This will ensure the sprite is dragged from its center + sprite.input.enableDrag(true); + } + function render() { + Phaser.DebugUtils.renderSpriteCorners(sprite); + Phaser.DebugUtils.renderInputInfo(32, 32); + Phaser.DebugUtils.renderSpriteInfo(sprite, 32, 200); + } +})(); diff --git a/Tests/input/drag sprite 3.ts b/Tests/input/drag sprite 3.ts new file mode 100644 index 00000000..c8f2c27c --- /dev/null +++ b/Tests/input/drag sprite 3.ts @@ -0,0 +1,38 @@ +/// + +(function () { + + var game = new Phaser.Game(this, 'game', 800, 600, init, create, null, render); + + function init() { + + // Using Phasers asset loader we load up a PNG from the assets folder + game.load.image('sprite', 'assets/sprites/atari800.png'); + game.load.start(); + + } + + var sprite: Phaser.Sprite; + + function create() { + + sprite = game.add.sprite(500, 300, 'sprite'); + + sprite.input.start(0, false, true); + + // This will ensure the sprite is dragged from its center + sprite.input.enableDrag(true); + + } + + function render() { + + Phaser.DebugUtils.renderSpriteCorners(sprite); + + Phaser.DebugUtils.renderInputInfo(32, 32); + + Phaser.DebugUtils.renderSpriteInfo(sprite, 32, 200); + + } + +})(); diff --git a/Tests/input/game scale 1.js b/Tests/input/game scale 1.js index 1c00f49a..46a460a3 100644 --- a/Tests/input/game scale 1.js +++ b/Tests/input/game scale 1.js @@ -30,6 +30,6 @@ } } function render() { - game.input.renderDebugInfo(16, 16); + Phaser.DebugUtils.renderInputInfo(16, 16); } })(); diff --git a/Tests/input/game scale 1.ts b/Tests/input/game scale 1.ts index 01448f7d..47ffd3fc 100644 --- a/Tests/input/game scale 1.ts +++ b/Tests/input/game scale 1.ts @@ -55,7 +55,7 @@ function render() { - game.input.renderDebugInfo(16, 16); + Phaser.DebugUtils.renderInputInfo(16, 16); } diff --git a/Tests/input/motion lock 2.js b/Tests/input/motion lock 2.js index 025e5181..2cd1e516 100644 --- a/Tests/input/motion lock 2.js +++ b/Tests/input/motion lock 2.js @@ -20,7 +20,7 @@ sprite.input.allowHorizontalDrag = false; } function render() { - game.input.renderDebugInfo(32, 32); - sprite.input.renderDebugInfo(300, 32); + Phaser.DebugUtils.renderInputInfo(32, 32); + Phaser.DebugUtils.renderSpriteInputInfo(sprite, 300, 32); } })(); diff --git a/Tests/input/motion lock 2.ts b/Tests/input/motion lock 2.ts index bdf10536..a573dbe1 100644 --- a/Tests/input/motion lock 2.ts +++ b/Tests/input/motion lock 2.ts @@ -35,8 +35,8 @@ function render() { - game.input.renderDebugInfo(32, 32); - sprite.input.renderDebugInfo(300, 32); + Phaser.DebugUtils.renderInputInfo(32, 32); + Phaser.DebugUtils.renderSpriteInputInfo(sprite, 300, 32); } diff --git a/Tests/input/motion lock.js b/Tests/input/motion lock.js index 44ee232d..7d3d71c9 100644 --- a/Tests/input/motion lock.js +++ b/Tests/input/motion lock.js @@ -20,7 +20,7 @@ sprite.input.allowVerticalDrag = false; } function render() { - game.input.renderDebugInfo(32, 32); - sprite.input.renderDebugInfo(300, 32); + Phaser.DebugUtils.renderInputInfo(32, 32); + Phaser.DebugUtils.renderSpriteInputInfo(sprite, 300, 32); } })(); diff --git a/Tests/input/motion lock.ts b/Tests/input/motion lock.ts index bd294541..833f51b6 100644 --- a/Tests/input/motion lock.ts +++ b/Tests/input/motion lock.ts @@ -35,8 +35,8 @@ function render() { - game.input.renderDebugInfo(32, 32); - sprite.input.renderDebugInfo(300, 32); + Phaser.DebugUtils.renderInputInfo(32, 32); + Phaser.DebugUtils.renderSpriteInputInfo(sprite, 300, 32); } diff --git a/Tests/input/multitouch.js b/Tests/input/multitouch.js index e0f2c4d4..583ba9d5 100644 --- a/Tests/input/multitouch.js +++ b/Tests/input/multitouch.js @@ -2,9 +2,9 @@ (function () { var game = new Phaser.Game(this, 'game', 800, 600, null, null, null, render); function render() { - game.input.pointer1.renderDebug(); - game.input.pointer2.renderDebug(); - game.input.pointer3.renderDebug(); - game.input.pointer4.renderDebug(); + Phaser.DebugUtils.renderPointer(game.input.pointer1); + Phaser.DebugUtils.renderPointer(game.input.pointer2); + Phaser.DebugUtils.renderPointer(game.input.pointer3); + Phaser.DebugUtils.renderPointer(game.input.pointer4); } })(); diff --git a/Tests/input/multitouch.ts b/Tests/input/multitouch.ts index f38ffa72..1f236a33 100644 --- a/Tests/input/multitouch.ts +++ b/Tests/input/multitouch.ts @@ -6,10 +6,10 @@ function render() { - game.input.pointer1.renderDebug(); - game.input.pointer2.renderDebug(); - game.input.pointer3.renderDebug(); - game.input.pointer4.renderDebug(); + Phaser.DebugUtils.renderPointer(game.input.pointer1); + Phaser.DebugUtils.renderPointer(game.input.pointer2); + Phaser.DebugUtils.renderPointer(game.input.pointer3); + Phaser.DebugUtils.renderPointer(game.input.pointer4); } diff --git a/Tests/input/over sprite 1.js b/Tests/input/over sprite 1.js index b3f1083f..f2330cb2 100644 --- a/Tests/input/over sprite 1.js +++ b/Tests/input/over sprite 1.js @@ -13,7 +13,7 @@ sprite.input.start(0, false, true); } function render() { - game.input.renderDebugInfo(32, 32); - sprite.input.renderDebugInfo(300, 32); + Phaser.DebugUtils.renderInputInfo(32, 32); + Phaser.DebugUtils.renderSpriteInputInfo(sprite, 300, 32); } })(); diff --git a/Tests/input/over sprite 1.ts b/Tests/input/over sprite 1.ts index efa97ceb..5b7e7c2d 100644 --- a/Tests/input/over sprite 1.ts +++ b/Tests/input/over sprite 1.ts @@ -25,8 +25,8 @@ function render() { - game.input.renderDebugInfo(32, 32); - sprite.input.renderDebugInfo(300, 32); + Phaser.DebugUtils.renderInputInfo(32, 32); + Phaser.DebugUtils.renderSpriteInputInfo(sprite, 300, 32); } diff --git a/Tests/input/over sprite 2.js b/Tests/input/over sprite 2.js index f73e906b..95f94bb9 100644 --- a/Tests/input/over sprite 2.js +++ b/Tests/input/over sprite 2.js @@ -20,6 +20,6 @@ sprite.input.enabled = false; } function render() { - game.input.renderDebugInfo(32, 32); + Phaser.DebugUtils.renderInputInfo(32, 32); } })(); diff --git a/Tests/input/over sprite 2.ts b/Tests/input/over sprite 2.ts index fbaf704a..0939cbd9 100644 --- a/Tests/input/over sprite 2.ts +++ b/Tests/input/over sprite 2.ts @@ -35,7 +35,7 @@ function render() { - game.input.renderDebugInfo(32, 32); + Phaser.DebugUtils.renderInputInfo(32, 32); } diff --git a/Tests/input/point in rotated sprite.js b/Tests/input/point in rotated sprite.js index 70fb46e0..b187ef3b 100644 --- a/Tests/input/point in rotated sprite.js +++ b/Tests/input/point in rotated sprite.js @@ -32,7 +32,7 @@ game.stage.context.fillText('x: ' + Math.round(sprite.transform.upperRight.x) + ' y: ' + Math.round(sprite.transform.upperRight.y), sprite.transform.upperRight.x, sprite.transform.upperRight.y); game.stage.context.fillText('x: ' + Math.round(sprite.transform.bottomLeft.x) + ' y: ' + Math.round(sprite.transform.bottomLeft.y), sprite.transform.bottomLeft.x, sprite.transform.bottomLeft.y); game.stage.context.fillText('x: ' + Math.round(sprite.transform.bottomRight.x) + ' y: ' + Math.round(sprite.transform.bottomRight.y), sprite.transform.bottomRight.x, sprite.transform.bottomRight.y); - game.input.renderDebugInfo(32, 32); + Phaser.DebugUtils.renderInputInfo(32, 32); game.stage.context.fillText('in: ' + inPoint, 300, 32); game.stage.context.restore(); } diff --git a/Tests/input/point in rotated sprite.ts b/Tests/input/point in rotated sprite.ts index d3d1792f..bdba6743 100644 --- a/Tests/input/point in rotated sprite.ts +++ b/Tests/input/point in rotated sprite.ts @@ -49,7 +49,7 @@ game.stage.context.fillText('x: ' + Math.round(sprite.transform.bottomLeft.x) + ' y: ' + Math.round(sprite.transform.bottomLeft.y), sprite.transform.bottomLeft.x, sprite.transform.bottomLeft.y); game.stage.context.fillText('x: ' + Math.round(sprite.transform.bottomRight.x) + ' y: ' + Math.round(sprite.transform.bottomRight.y), sprite.transform.bottomRight.x, sprite.transform.bottomRight.y); - game.input.renderDebugInfo(32, 32); + Phaser.DebugUtils.renderInputInfo(32, 32); game.stage.context.fillText('in: ' + inPoint, 300, 32); diff --git a/Tests/input/rotated sprites.js b/Tests/input/rotated sprites.js index 48d927e6..9dd56737 100644 --- a/Tests/input/rotated sprites.js +++ b/Tests/input/rotated sprites.js @@ -28,6 +28,6 @@ sonic.input.enableDrag(); } function render() { - game.input.renderDebugInfo(32, 32); + Phaser.DebugUtils.renderInputInfo(32, 32); } })(); diff --git a/Tests/input/rotated sprites.ts b/Tests/input/rotated sprites.ts index d965dbe8..c31a5da0 100644 --- a/Tests/input/rotated sprites.ts +++ b/Tests/input/rotated sprites.ts @@ -43,7 +43,7 @@ } function render() { - game.input.renderDebugInfo(32, 32); + Phaser.DebugUtils.renderInputInfo(32, 32); } })(); diff --git a/Tests/input/snap 1.js b/Tests/input/snap 1.js index 068c7529..8d47761b 100644 --- a/Tests/input/snap 1.js +++ b/Tests/input/snap 1.js @@ -28,6 +28,6 @@ atari2.input.enableSnap(32, 32, false, true); } function render() { - game.input.renderDebugInfo(32, 32); + Phaser.DebugUtils.renderInputInfo(32, 32); } })(); diff --git a/Tests/input/snap 1.ts b/Tests/input/snap 1.ts index f6773add..268c1856 100644 --- a/Tests/input/snap 1.ts +++ b/Tests/input/snap 1.ts @@ -43,7 +43,7 @@ } function render() { - game.input.renderDebugInfo(32, 32); + Phaser.DebugUtils.renderInputInfo(32, 32); } })(); diff --git a/Tests/input/touch priority.js b/Tests/input/touch priority.js index 0bbaa601..59cf1103 100644 --- a/Tests/input/touch priority.js +++ b/Tests/input/touch priority.js @@ -23,6 +23,6 @@ sonic.input.enableDrag(); } function render() { - game.input.renderDebugInfo(32, 32); + Phaser.DebugUtils.renderInputInfo(32, 32); } })(); diff --git a/Tests/input/touch priority.ts b/Tests/input/touch priority.ts index 0284dd21..3747c15d 100644 --- a/Tests/input/touch priority.ts +++ b/Tests/input/touch priority.ts @@ -35,7 +35,7 @@ } function render() { - game.input.renderDebugInfo(32, 32); + Phaser.DebugUtils.renderInputInfo(32, 32); } })(); diff --git a/Tests/input/world coordinates.js b/Tests/input/world coordinates.js new file mode 100644 index 00000000..f8a4daa0 --- /dev/null +++ b/Tests/input/world coordinates.js @@ -0,0 +1,29 @@ +/// +(function () { + var game = new Phaser.Game(this, 'game', 800, 600, init, create, update, render); + function init() { + game.world.setSize(1920, 1200, true); + game.load.image('backdrop', 'assets/pics/remember-me.jpg'); + game.load.start(); + } + var test; + function create() { + game.add.sprite(0, 0, 'backdrop'); + } + function update() { + if(game.input.keyboard.isDown(Phaser.Keyboard.LEFT)) { + game.camera.x -= 4; + } else if(game.input.keyboard.isDown(Phaser.Keyboard.RIGHT)) { + game.camera.x += 4; + } + if(game.input.keyboard.isDown(Phaser.Keyboard.UP)) { + game.camera.y -= 4; + } else if(game.input.keyboard.isDown(Phaser.Keyboard.DOWN)) { + game.camera.y += 4; + } + } + function render() { + Phaser.DebugUtils.renderInputInfo(32, 32); + Phaser.DebugUtils.renderPointer(game.input.activePointer); + } +})(); diff --git a/Tests/input/world coordinates.ts b/Tests/input/world coordinates.ts new file mode 100644 index 00000000..26466333 --- /dev/null +++ b/Tests/input/world coordinates.ts @@ -0,0 +1,54 @@ +/// + +(function () { + + var game = new Phaser.Game(this, 'game', 800, 600, init, create, update, render); + + function init() { + + game.world.setSize(1920, 1200, true); + + game.load.image('backdrop', 'assets/pics/remember-me.jpg'); + + game.load.start(); + + } + + var test: Phaser.Sprite; + + function create() { + + game.add.sprite(0, 0, 'backdrop'); + + } + + function update() { + + if (game.input.keyboard.isDown(Phaser.Keyboard.LEFT)) + { + game.camera.x -= 4; + } + else if (game.input.keyboard.isDown(Phaser.Keyboard.RIGHT)) + { + game.camera.x += 4; + } + + if (game.input.keyboard.isDown(Phaser.Keyboard.UP)) + { + game.camera.y -= 4; + } + else if (game.input.keyboard.isDown(Phaser.Keyboard.DOWN)) + { + game.camera.y += 4; + } + + } + + function render() { + + Phaser.DebugUtils.renderInputInfo(32, 32); + Phaser.DebugUtils.renderPointer(game.input.activePointer); + + } + +})(); diff --git a/Tests/input/world drag.js b/Tests/input/world drag.js index 77c6cbee..cbc10fce 100644 --- a/Tests/input/world drag.js +++ b/Tests/input/world drag.js @@ -13,7 +13,12 @@ for(var i = 0; i < 50; i++) { var sprite = game.add.sprite(game.world.randomX, game.world.randomY, 'diamond'); sprite.input.start(i, false, true); - sprite.input.enableDrag(); + if(i < 25) { + sprite.input.enableDrag(false); + } else { + sprite.input.enableDrag(true); + sprite.alpha = 0.5; + } } } function update() { @@ -29,7 +34,7 @@ } } function render() { - game.camera.renderDebugInfo(32, 32); - game.input.renderDebugInfo(300, 200); + Phaser.DebugUtils.renderCameraInfo(game.camera, 16, 32); + Phaser.DebugUtils.renderInputInfo(16, 200); } })(); diff --git a/Tests/input/world drag.ts b/Tests/input/world drag.ts index 75ec1768..93444859 100644 --- a/Tests/input/world drag.ts +++ b/Tests/input/world drag.ts @@ -25,7 +25,17 @@ { var sprite: Phaser.Sprite = game.add.sprite(game.world.randomX, game.world.randomY, 'diamond'); sprite.input.start(i, false, true); - sprite.input.enableDrag(); + + if (i < 25) + { + sprite.input.enableDrag(false); + } + else + { + sprite.input.enableDrag(true); + sprite.alpha = 0.5; + } + } } @@ -54,9 +64,8 @@ function render() { - game.camera.renderDebugInfo(32, 32); - - game.input.renderDebugInfo(300, 200); + Phaser.DebugUtils.renderCameraInfo(game.camera, 16, 32); + Phaser.DebugUtils.renderInputInfo(16, 200); } diff --git a/Tests/phaser.js b/Tests/phaser.js index 5b1a3f07..4f6bf951 100644 --- a/Tests/phaser.js +++ b/Tests/phaser.js @@ -2492,9 +2492,8 @@ var Phaser; this._draggedPointerID = pointer.id; this._pointerData[pointer.id].isDragged = true; if(this.dragFromCenter) { - // Move the sprite to the middle of the pointer - //this._dragPoint.setTo(-this._parent.worldView.halfWidth, -this._parent.worldView.halfHeight); - //this._dragPoint.setTo(this._parent.transform.center.x, this._parent.transform.center.y); + this._parent.transform.centerOn(pointer.worldX(), pointer.worldY()); + //this._dragPoint.setTo(this._parent.x - this._parent.transform.center.x, this._parent.y - this._parent.transform.center.y); this._dragPoint.setTo(this._parent.x - pointer.x, this._parent.y - pointer.y); } else { this._dragPoint.setTo(this._parent.x - pointer.x, this._parent.y - pointer.y); @@ -2585,22 +2584,6 @@ var Phaser; this._parent.y = (this.boundsSprite.y + this.boundsSprite.height) - this._parent.height; } }; - InputHandler.prototype.renderDebugInfo = /** - * Render debug infos. (including name, bounds info, position and some other properties) - * @param x {number} X position of the debug info to be rendered. - * @param y {number} Y position of the debug info to be rendered. - * @param [color] {number} color of the debug info to be rendered. (format is css color string) - */ - function (x, y, color) { - if (typeof color === "undefined") { color = 'rgb(255,255,255)'; } - this._parent.texture.context.font = '14px Courier'; - this._parent.texture.context.fillStyle = color; - this._parent.texture.context.fillText('Sprite Input: (' + this._parent.worldView.width + ' x ' + this._parent.worldView.height + ')', x, y); - this._parent.texture.context.fillText('x: ' + this.pointerX().toFixed(1) + ' y: ' + this.pointerY().toFixed(1), x, y + 14); - this._parent.texture.context.fillText('over: ' + this.pointerOver() + ' duration: ' + this.overDuration().toFixed(0), x, y + 28); - this._parent.texture.context.fillText('down: ' + this.pointerDown() + ' duration: ' + this.downDuration().toFixed(0), x, y + 42); - this._parent.texture.context.fillText('just over: ' + this.justOver() + ' just out: ' + this.justOut(), x, y + 56); - }; return InputHandler; })(); Components.InputHandler = InputHandler; @@ -2875,6 +2858,7 @@ var Phaser; * @param parent The game object using this transform */ function TransformManager(parent) { + this._dirty = false; /** * This value is added to the rotation of the object. * For example if you had a texture drawn facing straight up then you could set @@ -2929,7 +2913,8 @@ var Phaser; }); Object.defineProperty(TransformManager.prototype, "offsetX", { get: /** - * The offset on the X axis of the origin + * The offset on the X axis of the origin That is the difference between the top left of the Sprite and the origin.x. + * So if the origin.x is 0 the offsetX will be 0. If the origin.x is 0.5 then offsetX will be sprite width / 2, and so on. */ function () { return this._offset.x; @@ -2987,6 +2972,16 @@ var Phaser; enumerable: true, configurable: true }); + TransformManager.prototype.centerOn = /** + * Moves the sprite so its center is located on the given x and y coordinates. + * Doesn't change the origin of the sprite. + */ + function (x, y) { + console.log('centerOn', x, y); + this.parent.x = x + (this.parent.x - this.center.x); + this.parent.y = y + (this.parent.y - this.center.y); + this.setCache(); + }; TransformManager.prototype.setCache = /** * Populates the transform cache. Called by the parent object on creation. */ @@ -3029,7 +3024,7 @@ var Phaser; */ function () { // Check cache - var dirty = false; + this._dirty = false; // 1) Height or Width change (also triggered by a change in scale) or an Origin change if(this.parent.width !== this._size.x || this.parent.height !== this._size.y || this.origin.x !== this._origin.x || this.origin.y !== this._origin.y) { this._halfSize.x = this.parent.width / 2; @@ -3043,7 +3038,7 @@ var Phaser; this._size.y = this.parent.height; this._origin.x = this.origin.x; this._origin.y = this.origin.y; - dirty = true; + this._dirty = true; } // 2) Rotation change if(this.rotation != this._prevRotation) { @@ -3060,10 +3055,10 @@ var Phaser; } // Store this._prevRotation = this.rotation; - dirty = true; + this._dirty = true; } // If it has moved, update the edges and center - if(dirty || this.parent.x != this._pos.x || this.parent.y != this._pos.y) { + if(this._dirty || this.parent.x != this._pos.x || this.parent.y != this._pos.y) { this.center.x = this.parent.x + this._distance * this._scA.y; this.center.y = this.parent.y + this._distance * this._scA.x; this.upperLeft.setTo(this.center.x - this._halfSize.x * this._sc.y + this._halfSize.y * this._sc.x, this.center.y - this._halfSize.y * this._sc.y - this._halfSize.x * this._sc.x); @@ -9801,23 +9796,6 @@ var Phaser; } this.plugins.postUpdate(); }; - Camera.prototype.renderDebugInfo = /** - * Render debug infos. (including id, position, rotation, scrolling factor, worldBounds and some other properties) - * @param x {number} X position of the debug info to be rendered. - * @param y {number} Y position of the debug info to be rendered. - * @param [color] {number} color of the debug info to be rendered. (format is css color string) - */ - function (x, y, color) { - if (typeof color === "undefined") { color = 'rgb(255,255,255)'; } - this.game.stage.context.fillStyle = color; - this.game.stage.context.fillText('Camera ID: ' + this.ID + ' (' + this.screenView.width + ' x ' + this.screenView.height + ')', x, y); - this.game.stage.context.fillText('X: ' + this.screenView.x + ' Y: ' + this.screenView.y + ' rotation: ' + this.transform.rotation, x, y + 14); - this.game.stage.context.fillText('World X: ' + this.worldView.x + ' World Y: ' + this.worldView.y + ' W: ' + this.worldView.width + ' H: ' + this.worldView.height + ' R: ' + this.worldView.right + ' B: ' + this.worldView.bottom, x, y + 28); - this.game.stage.context.fillText('ScreenView X: ' + this.screenView.x + ' Y: ' + this.screenView.y + ' W: ' + this.screenView.width + ' H: ' + this.screenView.height, x, y + 42); - if(this.worldBounds) { - this.game.stage.context.fillText('Bounds: ' + this.worldBounds.width + ' x ' + this.worldBounds.height, x, y + 56); - } - }; Camera.prototype.destroy = /** * Destroys this camera, associated FX and removes itself from the CameraManager. */ @@ -11845,18 +11823,7 @@ var Phaser; return TilemapLayer; })(); Phaser.TilemapLayer = TilemapLayer; - /* - public renderDebugInfo(x: number, y: number, color?: string = 'rgb(255,255,255)') { - - this.context.fillStyle = color; - this.context.fillText('TilemapLayer: ' + this.name, x, y); - this.context.fillText('startX: ' + this._startX + ' endX: ' + this._maxX, x, y + 14); - this.context.fillText('startY: ' + this._startY + ' endY: ' + this._maxY, x, y + 28); - this.context.fillText('dx: ' + this._dx + ' dy: ' + this._dy, x, y + 42); - - } - */ - })(Phaser || (Phaser = {})); +})(Phaser || (Phaser = {})); /// /** * Phaser - Tile @@ -12873,7 +12840,6 @@ var Phaser; } }; Sound.prototype.resume = function () { - //if (this.isPlaying == false && this._sound) if(this.paused && this._sound) { if(this.usingWebAudio) { if(typeof this._sound.start === 'undefined') { @@ -12894,7 +12860,6 @@ var Phaser; * Stop playing this sound. */ function () { - //console.log('Sound.stop', this.currentMarker); if(this.isPlaying && this._sound) { if(this.usingWebAudio) { if(typeof this._sound.stop === 'undefined') { @@ -12957,25 +12922,6 @@ var Phaser; enumerable: true, configurable: true }); - Sound.prototype.renderDebug = /** - * Renders the Pointer.circle object onto the stage in green if down or red if up. - * @method renderDebug - */ - function (x, y) { - this.game.stage.context.fillStyle = 'rgb(255,255,255)'; - this.game.stage.context.font = '16px Courier'; - this.game.stage.context.fillText('Sound: ' + this.key + ' Locked: ' + this.game.sound.touchLocked + ' Pending Playback: ' + this.pendingPlayback, x, y); - this.game.stage.context.fillText('Decoded: ' + this.isDecoded + ' Decoding: ' + this.isDecoding, x, y + 20); - this.game.stage.context.fillText('Total Duration: ' + this.totalDuration + ' Playing: ' + this.isPlaying, x, y + 40); - this.game.stage.context.fillText('Time: ' + this.currentTime, x, y + 60); - this.game.stage.context.fillText('Volume: ' + this.volume + ' Muted: ' + this.mute, x, y + 80); - this.game.stage.context.fillText('WebAudio: ' + this.usingWebAudio + ' Audio: ' + this.usingAudioTag, x, y + 100); - if(this.currentMarker !== '') { - this.game.stage.context.fillText('Marker: ' + this.currentMarker + ' Duration: ' + this.duration, x, y + 120); - this.game.stage.context.fillText('Start: ' + this.markers[this.currentMarker].start + ' Stop: ' + this.markers[this.currentMarker].stop, x, y + 140); - this.game.stage.context.fillText('Position: ' + this.position, x, y + 160); - } - }; return Sound; })(); Phaser.Sound = Sound; @@ -15977,40 +15923,6 @@ var Phaser; } this.targetObject = null; }; - Pointer.prototype.renderDebug = /** - * Renders the Pointer.circle object onto the stage in green if down or red if up. - * @method renderDebug - */ - function (hideIfUp) { - if (typeof hideIfUp === "undefined") { hideIfUp = false; } - if(hideIfUp == true && this.isUp == true) { - return; - } - this.game.stage.context.beginPath(); - this.game.stage.context.arc(this.x, this.y, this.circle.radius, 0, Math.PI * 2); - if(this.active) { - this.game.stage.context.fillStyle = 'rgba(0,255,0,0.5)'; - this.game.stage.context.strokeStyle = 'rgb(0,255,0)'; - } else { - this.game.stage.context.fillStyle = 'rgba(255,0,0,0.5)'; - this.game.stage.context.strokeStyle = 'rgb(100,0,0)'; - } - this.game.stage.context.fill(); - this.game.stage.context.closePath(); - // Render the points - this.game.stage.context.beginPath(); - this.game.stage.context.moveTo(this.positionDown.x, this.positionDown.y); - this.game.stage.context.lineTo(this.position.x, this.position.y); - this.game.stage.context.lineWidth = 2; - this.game.stage.context.stroke(); - this.game.stage.context.closePath(); - // Render the text - this.game.stage.context.fillStyle = 'rgb(255,255,255)'; - this.game.stage.context.font = 'Arial 16px'; - this.game.stage.context.fillText('ID: ' + this.id + " Active: " + this.active, this.x, this.y - 100); - this.game.stage.context.fillText('Screen X: ' + this.x + " Screen Y: " + this.y, this.x, this.y - 80); - this.game.stage.context.fillText('Duration: ' + this.duration + " ms", this.x, this.y - 60); - }; Pointer.prototype.toString = /** * Returns a string representation of this object. * @method toString @@ -17322,20 +17234,6 @@ var Phaser; if (typeof camera === "undefined") { camera = this.game.camera; } return camera.worldView.y + this.y; }; - InputManager.prototype.renderDebugInfo = /** - * @param {Number} x - * @param {Number} y - * @param {String} [color] - */ - function (x, y, color) { - if (typeof color === "undefined") { color = 'rgb(255,255,255)'; } - this.game.stage.context.fillStyle = color; - this.game.stage.context.fillText('Input', x, y); - this.game.stage.context.fillText('X: ' + this.x + ' Y: ' + this.y, x, y + 14); - this.game.stage.context.fillText('World X: ' + this.getWorldX() + ' World Y: ' + this.getWorldY(), x, y + 28); - this.game.stage.context.fillText('Scale X: ' + this.scale.x.toFixed(1) + ' Scale Y: ' + this.scale.x.toFixed(1), x, y + 42); - this.game.stage.context.fillText('Screen X: ' + this.activePointer.screenX + ' Screen Y: ' + this.activePointer.screenY, x, y + 56); - }; InputManager.prototype.getDistance = /** * Get the distance between two Pointer objects * @method getDistance @@ -18002,6 +17900,145 @@ var Phaser; (function (Phaser) { var DebugUtils = (function () { function DebugUtils() { } + DebugUtils.font = '14px Courier'; + DebugUtils.lineHeight = 16; + DebugUtils.renderShadow = true; + DebugUtils.start = function start(x, y, color) { + if (typeof color === "undefined") { color = 'rgb(255,255,255)'; } + DebugUtils.currentX = x; + DebugUtils.currentY = y; + DebugUtils.currentColor = color; + DebugUtils.context.fillStyle = color; + DebugUtils.context.font = DebugUtils.font; + }; + DebugUtils.line = function line(text, x, y) { + if (typeof x === "undefined") { x = null; } + if (typeof y === "undefined") { y = null; } + if(x !== null) { + DebugUtils.currentX = x; + } + if(y !== null) { + DebugUtils.currentY = y; + } + if(DebugUtils.renderShadow) { + DebugUtils.context.fillStyle = 'rgb(0,0,0)'; + DebugUtils.context.fillText(text, DebugUtils.currentX + 1, DebugUtils.currentY + 1); + DebugUtils.context.fillStyle = DebugUtils.currentColor; + } + DebugUtils.context.fillText(text, DebugUtils.currentX, DebugUtils.currentY); + DebugUtils.currentY += DebugUtils.lineHeight; + }; + DebugUtils.renderSpriteCorners = function renderSpriteCorners(sprite, color) { + if (typeof color === "undefined") { color = 'rgb(255,0,255)'; } + DebugUtils.start(0, 0, color); + DebugUtils.line('x: ' + Math.floor(sprite.transform.upperLeft.x) + ' y: ' + Math.floor(sprite.transform.upperLeft.y), sprite.transform.upperLeft.x, sprite.transform.upperLeft.y); + DebugUtils.line('x: ' + Math.floor(sprite.transform.upperRight.x) + ' y: ' + Math.floor(sprite.transform.upperRight.y), sprite.transform.upperRight.x, sprite.transform.upperRight.y); + DebugUtils.line('x: ' + Math.floor(sprite.transform.bottomLeft.x) + ' y: ' + Math.floor(sprite.transform.bottomLeft.y), sprite.transform.bottomLeft.x, sprite.transform.bottomLeft.y); + DebugUtils.line('x: ' + Math.floor(sprite.transform.bottomRight.x) + ' y: ' + Math.floor(sprite.transform.bottomRight.y), sprite.transform.bottomRight.x, sprite.transform.bottomRight.y); + }; + DebugUtils.renderSoundInfo = /** + * Render debug infos. (including id, position, rotation, scrolling factor, worldBounds and some other properties) + * @param x {number} X position of the debug info to be rendered. + * @param y {number} Y position of the debug info to be rendered. + * @param [color] {number} color of the debug info to be rendered. (format is css color string) + */ + function renderSoundInfo(sound, x, y, color) { + if (typeof color === "undefined") { color = 'rgb(255,255,255)'; } + DebugUtils.start(x, y, color); + DebugUtils.line('Sound: ' + sound.key + ' Locked: ' + sound.game.sound.touchLocked + ' Pending Playback: ' + sound.pendingPlayback); + DebugUtils.line('Decoded: ' + sound.isDecoded + ' Decoding: ' + sound.isDecoding); + DebugUtils.line('Total Duration: ' + sound.totalDuration + ' Playing: ' + sound.isPlaying); + DebugUtils.line('Time: ' + sound.currentTime); + DebugUtils.line('Volume: ' + sound.volume + ' Muted: ' + sound.mute); + DebugUtils.line('WebAudio: ' + sound.usingWebAudio + ' Audio: ' + sound.usingAudioTag); + if(sound.currentMarker !== '') { + DebugUtils.line('Marker: ' + sound.currentMarker + ' Duration: ' + sound.duration); + DebugUtils.line('Start: ' + sound.markers[sound.currentMarker].start + ' Stop: ' + sound.markers[sound.currentMarker].stop); + DebugUtils.line('Position: ' + sound.position); + } + }; + DebugUtils.renderCameraInfo = /** + * Render debug infos. (including id, position, rotation, scrolling factor, worldBounds and some other properties) + * @param x {number} X position of the debug info to be rendered. + * @param y {number} Y position of the debug info to be rendered. + * @param [color] {number} color of the debug info to be rendered. (format is css color string) + */ + function renderCameraInfo(camera, x, y, color) { + if (typeof color === "undefined") { color = 'rgb(255,255,255)'; } + DebugUtils.start(x, y, color); + DebugUtils.line('Camera ID: ' + camera.ID + ' (' + camera.screenView.width + ' x ' + camera.screenView.height + ')'); + DebugUtils.line('X: ' + camera.screenView.x + ' Y: ' + camera.screenView.y + ' rotation: ' + camera.transform.rotation); + DebugUtils.line('World X: ' + camera.worldView.x + ' World Y: ' + camera.worldView.y + ' W: ' + camera.worldView.width + ' H: ' + camera.worldView.height + ' R: ' + camera.worldView.right + ' B: ' + camera.worldView.bottom); + DebugUtils.line('ScreenView X: ' + camera.screenView.x + ' Y: ' + camera.screenView.y + ' W: ' + camera.screenView.width + ' H: ' + camera.screenView.height); + if(camera.worldBounds) { + DebugUtils.line('Bounds: ' + camera.worldBounds.width + ' x ' + camera.worldBounds.height); + } + }; + DebugUtils.renderPointer = /** + * Renders the Pointer.circle object onto the stage in green if down or red if up. + * @method renderDebug + */ + function renderPointer(pointer, hideIfUp, downColor, upColor, color) { + if (typeof hideIfUp === "undefined") { hideIfUp = false; } + if (typeof downColor === "undefined") { downColor = 'rgba(0,255,0,0.5)'; } + if (typeof upColor === "undefined") { upColor = 'rgba(255,0,0,0.5)'; } + if (typeof color === "undefined") { color = 'rgb(255,255,255)'; } + if(hideIfUp == true && pointer.isUp == true) { + return; + } + DebugUtils.context.beginPath(); + DebugUtils.context.arc(pointer.x, pointer.y, pointer.circle.radius, 0, Math.PI * 2); + if(pointer.active) { + DebugUtils.context.fillStyle = downColor; + } else { + DebugUtils.context.fillStyle = upColor; + } + DebugUtils.context.fill(); + DebugUtils.context.closePath(); + // Render the points + DebugUtils.context.beginPath(); + DebugUtils.context.moveTo(pointer.positionDown.x, pointer.positionDown.y); + DebugUtils.context.lineTo(pointer.position.x, pointer.position.y); + DebugUtils.context.lineWidth = 2; + DebugUtils.context.stroke(); + DebugUtils.context.closePath(); + // Render the text + DebugUtils.start(pointer.x, pointer.y - 100, color); + DebugUtils.line('ID: ' + pointer.id + " Active: " + pointer.active); + DebugUtils.line('World X: ' + pointer.worldX() + " World Y: " + pointer.worldY()); + DebugUtils.line('Screen X: ' + pointer.x + " Screen Y: " + pointer.y); + DebugUtils.line('Duration: ' + pointer.duration + " ms"); + }; + DebugUtils.renderSpriteInputInfo = /** + * Render Sprite Input Debug information + * @param x {number} X position of the debug info to be rendered. + * @param y {number} Y position of the debug info to be rendered. + * @param [color] {number} color of the debug info to be rendered. (format is css color string) + */ + function renderSpriteInputInfo(sprite, x, y, color) { + if (typeof color === "undefined") { color = 'rgb(255,255,255)'; } + DebugUtils.start(x, y, color); + DebugUtils.line('Sprite Input: (' + sprite.width + ' x ' + sprite.height + ')'); + DebugUtils.line('x: ' + sprite.input.pointerX().toFixed(1) + ' y: ' + sprite.input.pointerY().toFixed(1)); + DebugUtils.line('over: ' + sprite.input.pointerOver() + ' duration: ' + sprite.input.overDuration().toFixed(0)); + DebugUtils.line('down: ' + sprite.input.pointerDown() + ' duration: ' + sprite.input.downDuration().toFixed(0)); + DebugUtils.line('just over: ' + sprite.input.justOver() + ' just out: ' + sprite.input.justOut()); + }; + DebugUtils.renderInputInfo = /** + * Render debug information about the Input object. + * @param x {number} X position of the debug info to be rendered. + * @param y {number} Y position of the debug info to be rendered. + * @param [color] {number} color of the debug info to be rendered. (format is css color string) + */ + function renderInputInfo(x, y, color) { + if (typeof color === "undefined") { color = 'rgb(255,255,255)'; } + DebugUtils.start(x, y, color); + DebugUtils.line('Input'); + DebugUtils.line('X: ' + DebugUtils.game.input.x + ' Y: ' + DebugUtils.game.input.y); + DebugUtils.line('World X: ' + DebugUtils.game.input.getWorldX() + ' World Y: ' + DebugUtils.game.input.getWorldY()); + DebugUtils.line('Scale X: ' + DebugUtils.game.input.scale.x.toFixed(1) + ' Scale Y: ' + DebugUtils.game.input.scale.x.toFixed(1)); + DebugUtils.line('Screen X: ' + DebugUtils.game.input.activePointer.screenX + ' Screen Y: ' + DebugUtils.game.input.activePointer.screenY); + }; DebugUtils.renderSpriteInfo = /** * Render debug infos. (including name, bounds info, position and some other properties) * @param x {number} X position of the debug info to be rendered. @@ -18010,14 +18047,16 @@ var Phaser; */ function renderSpriteInfo(sprite, x, y, color) { if (typeof color === "undefined") { color = 'rgb(255,255,255)'; } - DebugUtils.context.fillStyle = color; - DebugUtils.context.fillText('Sprite: ' + ' (' + sprite.width + ' x ' + sprite.height + ') origin: ' + sprite.transform.origin.x + ' x ' + sprite.transform.origin.y, x, y); - DebugUtils.context.fillText('x: ' + sprite.x.toFixed(1) + ' y: ' + sprite.y.toFixed(1) + ' rotation: ' + sprite.rotation.toFixed(1), x, y + 14); - DebugUtils.context.fillText('wx: ' + sprite.worldView.x + ' wy: ' + sprite.worldView.y + ' ww: ' + sprite.worldView.width.toFixed(1) + ' wh: ' + sprite.worldView.height.toFixed(1) + ' wb: ' + sprite.worldView.bottom + ' wr: ' + sprite.worldView.right, x, y + 28); - DebugUtils.context.fillText('sx: ' + sprite.transform.scale.x.toFixed(1) + ' sy: ' + sprite.transform.scale.y.toFixed(1), x, y + 42); - DebugUtils.context.fillText('tx: ' + sprite.texture.width.toFixed(1) + ' ty: ' + sprite.texture.height.toFixed(1), x, y + 56); - DebugUtils.context.fillText('cx: ' + sprite.cameraView.x + ' cy: ' + sprite.cameraView.y + ' cw: ' + sprite.cameraView.width + ' ch: ' + sprite.cameraView.height + ' cb: ' + sprite.cameraView.bottom + ' cr: ' + sprite.cameraView.right, x, y + 70); - DebugUtils.context.fillText('inCamera: ' + DebugUtils.game.renderer.inCamera(DebugUtils.game.camera, sprite), x, y + 84); + DebugUtils.start(x, y, color); + DebugUtils.line('Sprite: ' + ' (' + sprite.width + ' x ' + sprite.height + ') origin: ' + sprite.transform.origin.x + ' x ' + sprite.transform.origin.y); + DebugUtils.line('x: ' + sprite.x.toFixed(1) + ' y: ' + sprite.y.toFixed(1) + ' rotation: ' + sprite.rotation.toFixed(1)); + DebugUtils.line('wx: ' + sprite.worldView.x + ' wy: ' + sprite.worldView.y + ' ww: ' + sprite.worldView.width.toFixed(1) + ' wh: ' + sprite.worldView.height.toFixed(1) + ' wb: ' + sprite.worldView.bottom + ' wr: ' + sprite.worldView.right); + DebugUtils.line('sx: ' + sprite.transform.scale.x.toFixed(1) + ' sy: ' + sprite.transform.scale.y.toFixed(1)); + DebugUtils.line('tx: ' + sprite.texture.width.toFixed(1) + ' ty: ' + sprite.texture.height.toFixed(1)); + DebugUtils.line('center x: ' + sprite.transform.center.x + ' y: ' + sprite.transform.center.y); + //line('cameraView x: ' + sprite.cameraView.x + ' y: ' + sprite.cameraView.y + ' width: ' + sprite.cameraView.width + ' height: ' + sprite.cameraView.height + ' bottom: ' + sprite.cameraView.bottom + ' right: ' + sprite.cameraView.right); + DebugUtils.line('cameraView x: ' + sprite.cameraView.x + ' y: ' + sprite.cameraView.y + ' width: ' + sprite.cameraView.width + ' height: ' + sprite.cameraView.height); + DebugUtils.line('inCamera: ' + DebugUtils.game.renderer.inCamera(DebugUtils.game.camera, sprite)); }; DebugUtils.renderSpriteBounds = function renderSpriteBounds(sprite, camera, color) { if (typeof camera === "undefined") { camera = null; } @@ -18030,6 +18069,16 @@ var Phaser; DebugUtils.context.fillStyle = color; DebugUtils.context.fillRect(dx, dy, sprite.width, sprite.height); }; + DebugUtils.renderPixel = function renderPixel(x, y, fillStyle) { + if (typeof fillStyle === "undefined") { fillStyle = 'rgba(0,255,0,1)'; } + DebugUtils.context.fillStyle = fillStyle; + DebugUtils.context.fillRect(x, y, 1, 1); + }; + DebugUtils.renderPoint = function renderPoint(point, fillStyle) { + if (typeof fillStyle === "undefined") { fillStyle = 'rgba(0,255,0,1)'; } + DebugUtils.context.fillStyle = fillStyle; + DebugUtils.context.fillRect(point.x, point.y, 1, 1); + }; DebugUtils.renderRectangle = function renderRectangle(rect, fillStyle) { if (typeof fillStyle === "undefined") { fillStyle = 'rgba(0,255,0,0.3)'; } DebugUtils.context.fillStyle = fillStyle; @@ -18047,9 +18096,10 @@ var Phaser; * @param y {number} Y position of the debug info to be rendered. * @param [color] {number} color of the debug info to be rendered. (format is css color string) */ - function renderText(text, x, y, color) { + function renderText(text, x, y, color, font) { if (typeof color === "undefined") { color = 'rgb(255,255,255)'; } - DebugUtils.context.font = '16px Courier'; + if (typeof font === "undefined") { font = '16px Courier'; } + DebugUtils.context.font = font; DebugUtils.context.fillStyle = color; DebugUtils.context.fillText(text, x, y); }; diff --git a/build/phaser.d.ts b/build/phaser.d.ts index d18e0bb5..c9426c2f 100644 --- a/build/phaser.d.ts +++ b/build/phaser.d.ts @@ -1605,13 +1605,6 @@ module Phaser.Components { * Parent Sprite Bounds check for the sprite drag */ private checkBoundsSprite(); - /** - * Render debug infos. (including name, bounds info, position and some other properties) - * @param x {number} X position of the debug info to be rendered. - * @param y {number} Y position of the debug info to be rendered. - * @param [color] {number} color of the debug info to be rendered. (format is css color string) - */ - public renderDebugInfo(x: number, y: number, color?: string): void; } } /** @@ -1707,6 +1700,7 @@ module Phaser.Components { */ constructor(parent); private _rotation; + private _dirty; private _pos; private _scale; private _size; @@ -1786,7 +1780,8 @@ module Phaser.Components { */ public angleToCenter : number; /** - * The offset on the X axis of the origin + * The offset on the X axis of the origin That is the difference between the top left of the Sprite and the origin.x. + * So if the origin.x is 0 the offsetX will be 0. If the origin.x is 0.5 then offsetX will be sprite width / 2, and so on. */ public offsetX : number; /** @@ -1810,6 +1805,11 @@ module Phaser.Components { */ public cos : number; /** + * Moves the sprite so its center is located on the given x and y coordinates. + * Doesn't change the origin of the sprite. + */ + public centerOn(x: number, y: number): void; + /** * Populates the transform cache. Called by the parent object on creation. */ public setCache(): void; @@ -2507,6 +2507,7 @@ module Phaser { /** * The crop rectangle allows you to control which part of the sprite texture is rendered without distorting it. * Set to null to disable, set to a Phaser.Rectangle object to control the region that will be rendered, anything outside the rectangle is ignored. + * This is a reference to Sprite.texture.crop * @type {Phaser.Rectangle} */ public crop: Rectangle; @@ -5023,13 +5024,6 @@ module Phaser { */ public postUpdate(): void; /** - * Render debug infos. (including id, position, rotation, scrolling factor, worldBounds and some other properties) - * @param x {number} X position of the debug info to be rendered. - * @param y {number} Y position of the debug info to be rendered. - * @param [color] {number} color of the debug info to be rendered. (format is css color string) - */ - public renderDebugInfo(x: number, y: number, color?: string): void; - /** * Destroys this camera, associated FX and removes itself from the CameraManager. */ public destroy(): void; @@ -6655,11 +6649,6 @@ module Phaser { */ public mute : bool; public volume : number; - /** - * Renders the Pointer.circle object onto the stage in green if down or red if up. - * @method renderDebug - */ - public renderDebug(x: number, y: number): void; } } /** @@ -8323,11 +8312,6 @@ module Phaser { */ public reset(): void; /** - * Renders the Pointer.circle object onto the stage in green if down or red if up. - * @method renderDebug - */ - public renderDebug(hideIfUp?: bool): void; - /** * Returns a string representation of this object. * @method toString * @return {String} a string representation of the instance. @@ -9151,12 +9135,6 @@ module Phaser { */ public getWorldY(camera?: Camera): number; /** - * @param {Number} x - * @param {Number} y - * @param {String} [color] - */ - public renderDebugInfo(x: number, y: number, color?: string): void; - /** * Get the distance between two Pointer objects * @method getDistance * @param {Pointer} pointer1 @@ -9277,10 +9255,53 @@ module Phaser { class DebugUtils { static game: Game; /** - * Render context of stage's canvas. + * The context to which the render debug info will be drawn. + * Defaults to the Game.Stage.context, but can be redirected anywhere. * @type {CanvasRenderingContext2D} */ static context: CanvasRenderingContext2D; + static currentX: number; + static currentY: number; + static font: string; + static lineHeight: number; + static currentColor: string; + static renderShadow: bool; + static start(x: number, y: number, color?: string): void; + static line(text: string, x?: number, y?: number): void; + static renderSpriteCorners(sprite: Sprite, color?: string): void; + /** + * Render debug infos. (including id, position, rotation, scrolling factor, worldBounds and some other properties) + * @param x {number} X position of the debug info to be rendered. + * @param y {number} Y position of the debug info to be rendered. + * @param [color] {number} color of the debug info to be rendered. (format is css color string) + */ + static renderSoundInfo(sound: Sound, x: number, y: number, color?: string): void; + /** + * Render debug infos. (including id, position, rotation, scrolling factor, worldBounds and some other properties) + * @param x {number} X position of the debug info to be rendered. + * @param y {number} Y position of the debug info to be rendered. + * @param [color] {number} color of the debug info to be rendered. (format is css color string) + */ + static renderCameraInfo(camera: Camera, x: number, y: number, color?: string): void; + /** + * Renders the Pointer.circle object onto the stage in green if down or red if up. + * @method renderDebug + */ + static renderPointer(pointer: Pointer, hideIfUp?: bool, downColor?: string, upColor?: string, color?: string): void; + /** + * Render Sprite Input Debug information + * @param x {number} X position of the debug info to be rendered. + * @param y {number} Y position of the debug info to be rendered. + * @param [color] {number} color of the debug info to be rendered. (format is css color string) + */ + static renderSpriteInputInfo(sprite: Sprite, x: number, y: number, color?: string): void; + /** + * Render debug information about the Input object. + * @param x {number} X position of the debug info to be rendered. + * @param y {number} Y position of the debug info to be rendered. + * @param [color] {number} color of the debug info to be rendered. (format is css color string) + */ + static renderInputInfo(x: number, y: number, color?: string): void; /** * Render debug infos. (including name, bounds info, position and some other properties) * @param x {number} X position of the debug info to be rendered. @@ -9289,6 +9310,8 @@ module Phaser { */ static renderSpriteInfo(sprite: Sprite, x: number, y: number, color?: string): void; static renderSpriteBounds(sprite: Sprite, camera?: Camera, color?: string): void; + static renderPixel(x: number, y: number, fillStyle?: string): void; + static renderPoint(point: Point, fillStyle?: string): void; static renderRectangle(rect: Rectangle, fillStyle?: string): void; static renderCircle(circle: Circle, fillStyle?: string): void; /** @@ -9297,7 +9320,7 @@ module Phaser { * @param y {number} Y position of the debug info to be rendered. * @param [color] {number} color of the debug info to be rendered. (format is css color string) */ - static renderText(text: string, x: number, y: number, color?: string): void; + static renderText(text: string, x: number, y: number, color?: string, font?: string): void; } } /** diff --git a/build/phaser.js b/build/phaser.js index 5b1a3f07..4f6bf951 100644 --- a/build/phaser.js +++ b/build/phaser.js @@ -2492,9 +2492,8 @@ var Phaser; this._draggedPointerID = pointer.id; this._pointerData[pointer.id].isDragged = true; if(this.dragFromCenter) { - // Move the sprite to the middle of the pointer - //this._dragPoint.setTo(-this._parent.worldView.halfWidth, -this._parent.worldView.halfHeight); - //this._dragPoint.setTo(this._parent.transform.center.x, this._parent.transform.center.y); + this._parent.transform.centerOn(pointer.worldX(), pointer.worldY()); + //this._dragPoint.setTo(this._parent.x - this._parent.transform.center.x, this._parent.y - this._parent.transform.center.y); this._dragPoint.setTo(this._parent.x - pointer.x, this._parent.y - pointer.y); } else { this._dragPoint.setTo(this._parent.x - pointer.x, this._parent.y - pointer.y); @@ -2585,22 +2584,6 @@ var Phaser; this._parent.y = (this.boundsSprite.y + this.boundsSprite.height) - this._parent.height; } }; - InputHandler.prototype.renderDebugInfo = /** - * Render debug infos. (including name, bounds info, position and some other properties) - * @param x {number} X position of the debug info to be rendered. - * @param y {number} Y position of the debug info to be rendered. - * @param [color] {number} color of the debug info to be rendered. (format is css color string) - */ - function (x, y, color) { - if (typeof color === "undefined") { color = 'rgb(255,255,255)'; } - this._parent.texture.context.font = '14px Courier'; - this._parent.texture.context.fillStyle = color; - this._parent.texture.context.fillText('Sprite Input: (' + this._parent.worldView.width + ' x ' + this._parent.worldView.height + ')', x, y); - this._parent.texture.context.fillText('x: ' + this.pointerX().toFixed(1) + ' y: ' + this.pointerY().toFixed(1), x, y + 14); - this._parent.texture.context.fillText('over: ' + this.pointerOver() + ' duration: ' + this.overDuration().toFixed(0), x, y + 28); - this._parent.texture.context.fillText('down: ' + this.pointerDown() + ' duration: ' + this.downDuration().toFixed(0), x, y + 42); - this._parent.texture.context.fillText('just over: ' + this.justOver() + ' just out: ' + this.justOut(), x, y + 56); - }; return InputHandler; })(); Components.InputHandler = InputHandler; @@ -2875,6 +2858,7 @@ var Phaser; * @param parent The game object using this transform */ function TransformManager(parent) { + this._dirty = false; /** * This value is added to the rotation of the object. * For example if you had a texture drawn facing straight up then you could set @@ -2929,7 +2913,8 @@ var Phaser; }); Object.defineProperty(TransformManager.prototype, "offsetX", { get: /** - * The offset on the X axis of the origin + * The offset on the X axis of the origin That is the difference between the top left of the Sprite and the origin.x. + * So if the origin.x is 0 the offsetX will be 0. If the origin.x is 0.5 then offsetX will be sprite width / 2, and so on. */ function () { return this._offset.x; @@ -2987,6 +2972,16 @@ var Phaser; enumerable: true, configurable: true }); + TransformManager.prototype.centerOn = /** + * Moves the sprite so its center is located on the given x and y coordinates. + * Doesn't change the origin of the sprite. + */ + function (x, y) { + console.log('centerOn', x, y); + this.parent.x = x + (this.parent.x - this.center.x); + this.parent.y = y + (this.parent.y - this.center.y); + this.setCache(); + }; TransformManager.prototype.setCache = /** * Populates the transform cache. Called by the parent object on creation. */ @@ -3029,7 +3024,7 @@ var Phaser; */ function () { // Check cache - var dirty = false; + this._dirty = false; // 1) Height or Width change (also triggered by a change in scale) or an Origin change if(this.parent.width !== this._size.x || this.parent.height !== this._size.y || this.origin.x !== this._origin.x || this.origin.y !== this._origin.y) { this._halfSize.x = this.parent.width / 2; @@ -3043,7 +3038,7 @@ var Phaser; this._size.y = this.parent.height; this._origin.x = this.origin.x; this._origin.y = this.origin.y; - dirty = true; + this._dirty = true; } // 2) Rotation change if(this.rotation != this._prevRotation) { @@ -3060,10 +3055,10 @@ var Phaser; } // Store this._prevRotation = this.rotation; - dirty = true; + this._dirty = true; } // If it has moved, update the edges and center - if(dirty || this.parent.x != this._pos.x || this.parent.y != this._pos.y) { + if(this._dirty || this.parent.x != this._pos.x || this.parent.y != this._pos.y) { this.center.x = this.parent.x + this._distance * this._scA.y; this.center.y = this.parent.y + this._distance * this._scA.x; this.upperLeft.setTo(this.center.x - this._halfSize.x * this._sc.y + this._halfSize.y * this._sc.x, this.center.y - this._halfSize.y * this._sc.y - this._halfSize.x * this._sc.x); @@ -9801,23 +9796,6 @@ var Phaser; } this.plugins.postUpdate(); }; - Camera.prototype.renderDebugInfo = /** - * Render debug infos. (including id, position, rotation, scrolling factor, worldBounds and some other properties) - * @param x {number} X position of the debug info to be rendered. - * @param y {number} Y position of the debug info to be rendered. - * @param [color] {number} color of the debug info to be rendered. (format is css color string) - */ - function (x, y, color) { - if (typeof color === "undefined") { color = 'rgb(255,255,255)'; } - this.game.stage.context.fillStyle = color; - this.game.stage.context.fillText('Camera ID: ' + this.ID + ' (' + this.screenView.width + ' x ' + this.screenView.height + ')', x, y); - this.game.stage.context.fillText('X: ' + this.screenView.x + ' Y: ' + this.screenView.y + ' rotation: ' + this.transform.rotation, x, y + 14); - this.game.stage.context.fillText('World X: ' + this.worldView.x + ' World Y: ' + this.worldView.y + ' W: ' + this.worldView.width + ' H: ' + this.worldView.height + ' R: ' + this.worldView.right + ' B: ' + this.worldView.bottom, x, y + 28); - this.game.stage.context.fillText('ScreenView X: ' + this.screenView.x + ' Y: ' + this.screenView.y + ' W: ' + this.screenView.width + ' H: ' + this.screenView.height, x, y + 42); - if(this.worldBounds) { - this.game.stage.context.fillText('Bounds: ' + this.worldBounds.width + ' x ' + this.worldBounds.height, x, y + 56); - } - }; Camera.prototype.destroy = /** * Destroys this camera, associated FX and removes itself from the CameraManager. */ @@ -11845,18 +11823,7 @@ var Phaser; return TilemapLayer; })(); Phaser.TilemapLayer = TilemapLayer; - /* - public renderDebugInfo(x: number, y: number, color?: string = 'rgb(255,255,255)') { - - this.context.fillStyle = color; - this.context.fillText('TilemapLayer: ' + this.name, x, y); - this.context.fillText('startX: ' + this._startX + ' endX: ' + this._maxX, x, y + 14); - this.context.fillText('startY: ' + this._startY + ' endY: ' + this._maxY, x, y + 28); - this.context.fillText('dx: ' + this._dx + ' dy: ' + this._dy, x, y + 42); - - } - */ - })(Phaser || (Phaser = {})); +})(Phaser || (Phaser = {})); /// /** * Phaser - Tile @@ -12873,7 +12840,6 @@ var Phaser; } }; Sound.prototype.resume = function () { - //if (this.isPlaying == false && this._sound) if(this.paused && this._sound) { if(this.usingWebAudio) { if(typeof this._sound.start === 'undefined') { @@ -12894,7 +12860,6 @@ var Phaser; * Stop playing this sound. */ function () { - //console.log('Sound.stop', this.currentMarker); if(this.isPlaying && this._sound) { if(this.usingWebAudio) { if(typeof this._sound.stop === 'undefined') { @@ -12957,25 +12922,6 @@ var Phaser; enumerable: true, configurable: true }); - Sound.prototype.renderDebug = /** - * Renders the Pointer.circle object onto the stage in green if down or red if up. - * @method renderDebug - */ - function (x, y) { - this.game.stage.context.fillStyle = 'rgb(255,255,255)'; - this.game.stage.context.font = '16px Courier'; - this.game.stage.context.fillText('Sound: ' + this.key + ' Locked: ' + this.game.sound.touchLocked + ' Pending Playback: ' + this.pendingPlayback, x, y); - this.game.stage.context.fillText('Decoded: ' + this.isDecoded + ' Decoding: ' + this.isDecoding, x, y + 20); - this.game.stage.context.fillText('Total Duration: ' + this.totalDuration + ' Playing: ' + this.isPlaying, x, y + 40); - this.game.stage.context.fillText('Time: ' + this.currentTime, x, y + 60); - this.game.stage.context.fillText('Volume: ' + this.volume + ' Muted: ' + this.mute, x, y + 80); - this.game.stage.context.fillText('WebAudio: ' + this.usingWebAudio + ' Audio: ' + this.usingAudioTag, x, y + 100); - if(this.currentMarker !== '') { - this.game.stage.context.fillText('Marker: ' + this.currentMarker + ' Duration: ' + this.duration, x, y + 120); - this.game.stage.context.fillText('Start: ' + this.markers[this.currentMarker].start + ' Stop: ' + this.markers[this.currentMarker].stop, x, y + 140); - this.game.stage.context.fillText('Position: ' + this.position, x, y + 160); - } - }; return Sound; })(); Phaser.Sound = Sound; @@ -15977,40 +15923,6 @@ var Phaser; } this.targetObject = null; }; - Pointer.prototype.renderDebug = /** - * Renders the Pointer.circle object onto the stage in green if down or red if up. - * @method renderDebug - */ - function (hideIfUp) { - if (typeof hideIfUp === "undefined") { hideIfUp = false; } - if(hideIfUp == true && this.isUp == true) { - return; - } - this.game.stage.context.beginPath(); - this.game.stage.context.arc(this.x, this.y, this.circle.radius, 0, Math.PI * 2); - if(this.active) { - this.game.stage.context.fillStyle = 'rgba(0,255,0,0.5)'; - this.game.stage.context.strokeStyle = 'rgb(0,255,0)'; - } else { - this.game.stage.context.fillStyle = 'rgba(255,0,0,0.5)'; - this.game.stage.context.strokeStyle = 'rgb(100,0,0)'; - } - this.game.stage.context.fill(); - this.game.stage.context.closePath(); - // Render the points - this.game.stage.context.beginPath(); - this.game.stage.context.moveTo(this.positionDown.x, this.positionDown.y); - this.game.stage.context.lineTo(this.position.x, this.position.y); - this.game.stage.context.lineWidth = 2; - this.game.stage.context.stroke(); - this.game.stage.context.closePath(); - // Render the text - this.game.stage.context.fillStyle = 'rgb(255,255,255)'; - this.game.stage.context.font = 'Arial 16px'; - this.game.stage.context.fillText('ID: ' + this.id + " Active: " + this.active, this.x, this.y - 100); - this.game.stage.context.fillText('Screen X: ' + this.x + " Screen Y: " + this.y, this.x, this.y - 80); - this.game.stage.context.fillText('Duration: ' + this.duration + " ms", this.x, this.y - 60); - }; Pointer.prototype.toString = /** * Returns a string representation of this object. * @method toString @@ -17322,20 +17234,6 @@ var Phaser; if (typeof camera === "undefined") { camera = this.game.camera; } return camera.worldView.y + this.y; }; - InputManager.prototype.renderDebugInfo = /** - * @param {Number} x - * @param {Number} y - * @param {String} [color] - */ - function (x, y, color) { - if (typeof color === "undefined") { color = 'rgb(255,255,255)'; } - this.game.stage.context.fillStyle = color; - this.game.stage.context.fillText('Input', x, y); - this.game.stage.context.fillText('X: ' + this.x + ' Y: ' + this.y, x, y + 14); - this.game.stage.context.fillText('World X: ' + this.getWorldX() + ' World Y: ' + this.getWorldY(), x, y + 28); - this.game.stage.context.fillText('Scale X: ' + this.scale.x.toFixed(1) + ' Scale Y: ' + this.scale.x.toFixed(1), x, y + 42); - this.game.stage.context.fillText('Screen X: ' + this.activePointer.screenX + ' Screen Y: ' + this.activePointer.screenY, x, y + 56); - }; InputManager.prototype.getDistance = /** * Get the distance between two Pointer objects * @method getDistance @@ -18002,6 +17900,145 @@ var Phaser; (function (Phaser) { var DebugUtils = (function () { function DebugUtils() { } + DebugUtils.font = '14px Courier'; + DebugUtils.lineHeight = 16; + DebugUtils.renderShadow = true; + DebugUtils.start = function start(x, y, color) { + if (typeof color === "undefined") { color = 'rgb(255,255,255)'; } + DebugUtils.currentX = x; + DebugUtils.currentY = y; + DebugUtils.currentColor = color; + DebugUtils.context.fillStyle = color; + DebugUtils.context.font = DebugUtils.font; + }; + DebugUtils.line = function line(text, x, y) { + if (typeof x === "undefined") { x = null; } + if (typeof y === "undefined") { y = null; } + if(x !== null) { + DebugUtils.currentX = x; + } + if(y !== null) { + DebugUtils.currentY = y; + } + if(DebugUtils.renderShadow) { + DebugUtils.context.fillStyle = 'rgb(0,0,0)'; + DebugUtils.context.fillText(text, DebugUtils.currentX + 1, DebugUtils.currentY + 1); + DebugUtils.context.fillStyle = DebugUtils.currentColor; + } + DebugUtils.context.fillText(text, DebugUtils.currentX, DebugUtils.currentY); + DebugUtils.currentY += DebugUtils.lineHeight; + }; + DebugUtils.renderSpriteCorners = function renderSpriteCorners(sprite, color) { + if (typeof color === "undefined") { color = 'rgb(255,0,255)'; } + DebugUtils.start(0, 0, color); + DebugUtils.line('x: ' + Math.floor(sprite.transform.upperLeft.x) + ' y: ' + Math.floor(sprite.transform.upperLeft.y), sprite.transform.upperLeft.x, sprite.transform.upperLeft.y); + DebugUtils.line('x: ' + Math.floor(sprite.transform.upperRight.x) + ' y: ' + Math.floor(sprite.transform.upperRight.y), sprite.transform.upperRight.x, sprite.transform.upperRight.y); + DebugUtils.line('x: ' + Math.floor(sprite.transform.bottomLeft.x) + ' y: ' + Math.floor(sprite.transform.bottomLeft.y), sprite.transform.bottomLeft.x, sprite.transform.bottomLeft.y); + DebugUtils.line('x: ' + Math.floor(sprite.transform.bottomRight.x) + ' y: ' + Math.floor(sprite.transform.bottomRight.y), sprite.transform.bottomRight.x, sprite.transform.bottomRight.y); + }; + DebugUtils.renderSoundInfo = /** + * Render debug infos. (including id, position, rotation, scrolling factor, worldBounds and some other properties) + * @param x {number} X position of the debug info to be rendered. + * @param y {number} Y position of the debug info to be rendered. + * @param [color] {number} color of the debug info to be rendered. (format is css color string) + */ + function renderSoundInfo(sound, x, y, color) { + if (typeof color === "undefined") { color = 'rgb(255,255,255)'; } + DebugUtils.start(x, y, color); + DebugUtils.line('Sound: ' + sound.key + ' Locked: ' + sound.game.sound.touchLocked + ' Pending Playback: ' + sound.pendingPlayback); + DebugUtils.line('Decoded: ' + sound.isDecoded + ' Decoding: ' + sound.isDecoding); + DebugUtils.line('Total Duration: ' + sound.totalDuration + ' Playing: ' + sound.isPlaying); + DebugUtils.line('Time: ' + sound.currentTime); + DebugUtils.line('Volume: ' + sound.volume + ' Muted: ' + sound.mute); + DebugUtils.line('WebAudio: ' + sound.usingWebAudio + ' Audio: ' + sound.usingAudioTag); + if(sound.currentMarker !== '') { + DebugUtils.line('Marker: ' + sound.currentMarker + ' Duration: ' + sound.duration); + DebugUtils.line('Start: ' + sound.markers[sound.currentMarker].start + ' Stop: ' + sound.markers[sound.currentMarker].stop); + DebugUtils.line('Position: ' + sound.position); + } + }; + DebugUtils.renderCameraInfo = /** + * Render debug infos. (including id, position, rotation, scrolling factor, worldBounds and some other properties) + * @param x {number} X position of the debug info to be rendered. + * @param y {number} Y position of the debug info to be rendered. + * @param [color] {number} color of the debug info to be rendered. (format is css color string) + */ + function renderCameraInfo(camera, x, y, color) { + if (typeof color === "undefined") { color = 'rgb(255,255,255)'; } + DebugUtils.start(x, y, color); + DebugUtils.line('Camera ID: ' + camera.ID + ' (' + camera.screenView.width + ' x ' + camera.screenView.height + ')'); + DebugUtils.line('X: ' + camera.screenView.x + ' Y: ' + camera.screenView.y + ' rotation: ' + camera.transform.rotation); + DebugUtils.line('World X: ' + camera.worldView.x + ' World Y: ' + camera.worldView.y + ' W: ' + camera.worldView.width + ' H: ' + camera.worldView.height + ' R: ' + camera.worldView.right + ' B: ' + camera.worldView.bottom); + DebugUtils.line('ScreenView X: ' + camera.screenView.x + ' Y: ' + camera.screenView.y + ' W: ' + camera.screenView.width + ' H: ' + camera.screenView.height); + if(camera.worldBounds) { + DebugUtils.line('Bounds: ' + camera.worldBounds.width + ' x ' + camera.worldBounds.height); + } + }; + DebugUtils.renderPointer = /** + * Renders the Pointer.circle object onto the stage in green if down or red if up. + * @method renderDebug + */ + function renderPointer(pointer, hideIfUp, downColor, upColor, color) { + if (typeof hideIfUp === "undefined") { hideIfUp = false; } + if (typeof downColor === "undefined") { downColor = 'rgba(0,255,0,0.5)'; } + if (typeof upColor === "undefined") { upColor = 'rgba(255,0,0,0.5)'; } + if (typeof color === "undefined") { color = 'rgb(255,255,255)'; } + if(hideIfUp == true && pointer.isUp == true) { + return; + } + DebugUtils.context.beginPath(); + DebugUtils.context.arc(pointer.x, pointer.y, pointer.circle.radius, 0, Math.PI * 2); + if(pointer.active) { + DebugUtils.context.fillStyle = downColor; + } else { + DebugUtils.context.fillStyle = upColor; + } + DebugUtils.context.fill(); + DebugUtils.context.closePath(); + // Render the points + DebugUtils.context.beginPath(); + DebugUtils.context.moveTo(pointer.positionDown.x, pointer.positionDown.y); + DebugUtils.context.lineTo(pointer.position.x, pointer.position.y); + DebugUtils.context.lineWidth = 2; + DebugUtils.context.stroke(); + DebugUtils.context.closePath(); + // Render the text + DebugUtils.start(pointer.x, pointer.y - 100, color); + DebugUtils.line('ID: ' + pointer.id + " Active: " + pointer.active); + DebugUtils.line('World X: ' + pointer.worldX() + " World Y: " + pointer.worldY()); + DebugUtils.line('Screen X: ' + pointer.x + " Screen Y: " + pointer.y); + DebugUtils.line('Duration: ' + pointer.duration + " ms"); + }; + DebugUtils.renderSpriteInputInfo = /** + * Render Sprite Input Debug information + * @param x {number} X position of the debug info to be rendered. + * @param y {number} Y position of the debug info to be rendered. + * @param [color] {number} color of the debug info to be rendered. (format is css color string) + */ + function renderSpriteInputInfo(sprite, x, y, color) { + if (typeof color === "undefined") { color = 'rgb(255,255,255)'; } + DebugUtils.start(x, y, color); + DebugUtils.line('Sprite Input: (' + sprite.width + ' x ' + sprite.height + ')'); + DebugUtils.line('x: ' + sprite.input.pointerX().toFixed(1) + ' y: ' + sprite.input.pointerY().toFixed(1)); + DebugUtils.line('over: ' + sprite.input.pointerOver() + ' duration: ' + sprite.input.overDuration().toFixed(0)); + DebugUtils.line('down: ' + sprite.input.pointerDown() + ' duration: ' + sprite.input.downDuration().toFixed(0)); + DebugUtils.line('just over: ' + sprite.input.justOver() + ' just out: ' + sprite.input.justOut()); + }; + DebugUtils.renderInputInfo = /** + * Render debug information about the Input object. + * @param x {number} X position of the debug info to be rendered. + * @param y {number} Y position of the debug info to be rendered. + * @param [color] {number} color of the debug info to be rendered. (format is css color string) + */ + function renderInputInfo(x, y, color) { + if (typeof color === "undefined") { color = 'rgb(255,255,255)'; } + DebugUtils.start(x, y, color); + DebugUtils.line('Input'); + DebugUtils.line('X: ' + DebugUtils.game.input.x + ' Y: ' + DebugUtils.game.input.y); + DebugUtils.line('World X: ' + DebugUtils.game.input.getWorldX() + ' World Y: ' + DebugUtils.game.input.getWorldY()); + DebugUtils.line('Scale X: ' + DebugUtils.game.input.scale.x.toFixed(1) + ' Scale Y: ' + DebugUtils.game.input.scale.x.toFixed(1)); + DebugUtils.line('Screen X: ' + DebugUtils.game.input.activePointer.screenX + ' Screen Y: ' + DebugUtils.game.input.activePointer.screenY); + }; DebugUtils.renderSpriteInfo = /** * Render debug infos. (including name, bounds info, position and some other properties) * @param x {number} X position of the debug info to be rendered. @@ -18010,14 +18047,16 @@ var Phaser; */ function renderSpriteInfo(sprite, x, y, color) { if (typeof color === "undefined") { color = 'rgb(255,255,255)'; } - DebugUtils.context.fillStyle = color; - DebugUtils.context.fillText('Sprite: ' + ' (' + sprite.width + ' x ' + sprite.height + ') origin: ' + sprite.transform.origin.x + ' x ' + sprite.transform.origin.y, x, y); - DebugUtils.context.fillText('x: ' + sprite.x.toFixed(1) + ' y: ' + sprite.y.toFixed(1) + ' rotation: ' + sprite.rotation.toFixed(1), x, y + 14); - DebugUtils.context.fillText('wx: ' + sprite.worldView.x + ' wy: ' + sprite.worldView.y + ' ww: ' + sprite.worldView.width.toFixed(1) + ' wh: ' + sprite.worldView.height.toFixed(1) + ' wb: ' + sprite.worldView.bottom + ' wr: ' + sprite.worldView.right, x, y + 28); - DebugUtils.context.fillText('sx: ' + sprite.transform.scale.x.toFixed(1) + ' sy: ' + sprite.transform.scale.y.toFixed(1), x, y + 42); - DebugUtils.context.fillText('tx: ' + sprite.texture.width.toFixed(1) + ' ty: ' + sprite.texture.height.toFixed(1), x, y + 56); - DebugUtils.context.fillText('cx: ' + sprite.cameraView.x + ' cy: ' + sprite.cameraView.y + ' cw: ' + sprite.cameraView.width + ' ch: ' + sprite.cameraView.height + ' cb: ' + sprite.cameraView.bottom + ' cr: ' + sprite.cameraView.right, x, y + 70); - DebugUtils.context.fillText('inCamera: ' + DebugUtils.game.renderer.inCamera(DebugUtils.game.camera, sprite), x, y + 84); + DebugUtils.start(x, y, color); + DebugUtils.line('Sprite: ' + ' (' + sprite.width + ' x ' + sprite.height + ') origin: ' + sprite.transform.origin.x + ' x ' + sprite.transform.origin.y); + DebugUtils.line('x: ' + sprite.x.toFixed(1) + ' y: ' + sprite.y.toFixed(1) + ' rotation: ' + sprite.rotation.toFixed(1)); + DebugUtils.line('wx: ' + sprite.worldView.x + ' wy: ' + sprite.worldView.y + ' ww: ' + sprite.worldView.width.toFixed(1) + ' wh: ' + sprite.worldView.height.toFixed(1) + ' wb: ' + sprite.worldView.bottom + ' wr: ' + sprite.worldView.right); + DebugUtils.line('sx: ' + sprite.transform.scale.x.toFixed(1) + ' sy: ' + sprite.transform.scale.y.toFixed(1)); + DebugUtils.line('tx: ' + sprite.texture.width.toFixed(1) + ' ty: ' + sprite.texture.height.toFixed(1)); + DebugUtils.line('center x: ' + sprite.transform.center.x + ' y: ' + sprite.transform.center.y); + //line('cameraView x: ' + sprite.cameraView.x + ' y: ' + sprite.cameraView.y + ' width: ' + sprite.cameraView.width + ' height: ' + sprite.cameraView.height + ' bottom: ' + sprite.cameraView.bottom + ' right: ' + sprite.cameraView.right); + DebugUtils.line('cameraView x: ' + sprite.cameraView.x + ' y: ' + sprite.cameraView.y + ' width: ' + sprite.cameraView.width + ' height: ' + sprite.cameraView.height); + DebugUtils.line('inCamera: ' + DebugUtils.game.renderer.inCamera(DebugUtils.game.camera, sprite)); }; DebugUtils.renderSpriteBounds = function renderSpriteBounds(sprite, camera, color) { if (typeof camera === "undefined") { camera = null; } @@ -18030,6 +18069,16 @@ var Phaser; DebugUtils.context.fillStyle = color; DebugUtils.context.fillRect(dx, dy, sprite.width, sprite.height); }; + DebugUtils.renderPixel = function renderPixel(x, y, fillStyle) { + if (typeof fillStyle === "undefined") { fillStyle = 'rgba(0,255,0,1)'; } + DebugUtils.context.fillStyle = fillStyle; + DebugUtils.context.fillRect(x, y, 1, 1); + }; + DebugUtils.renderPoint = function renderPoint(point, fillStyle) { + if (typeof fillStyle === "undefined") { fillStyle = 'rgba(0,255,0,1)'; } + DebugUtils.context.fillStyle = fillStyle; + DebugUtils.context.fillRect(point.x, point.y, 1, 1); + }; DebugUtils.renderRectangle = function renderRectangle(rect, fillStyle) { if (typeof fillStyle === "undefined") { fillStyle = 'rgba(0,255,0,0.3)'; } DebugUtils.context.fillStyle = fillStyle; @@ -18047,9 +18096,10 @@ var Phaser; * @param y {number} Y position of the debug info to be rendered. * @param [color] {number} color of the debug info to be rendered. (format is css color string) */ - function renderText(text, x, y, color) { + function renderText(text, x, y, color, font) { if (typeof color === "undefined") { color = 'rgb(255,255,255)'; } - DebugUtils.context.font = '16px Courier'; + if (typeof font === "undefined") { font = '16px Courier'; } + DebugUtils.context.font = font; DebugUtils.context.fillStyle = color; DebugUtils.context.fillText(text, x, y); };