diff --git a/CHANGELOG.md b/CHANGELOG.md index ffea94642..494573464 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -18,11 +18,13 @@ This project adheres to [Semantic Versioning](http://semver.org/). - Added `PointerWheel` event type for the `wheel` browser event, Excalibur now supports scroll wheel ([#808](https://github.com/excaliburjs/Excalibur/issues/808/)) ### Changed +- Camera zoom over time now returns a promise that resolves on completion ([#800](https://github.com/excaliburjs/Excalibur/issues/800)) - Edge builds have more descriptive versions now containing build number and Git commit hash (e.g. `0.10.0-alpha.105#commit`) ([#777](https://github.com/excaliburjs/Excalibur/issues/777)) ### Deprecated ### Removed ### Fixed +- Fixed camera zoom over time, before it did not work at all ([#800](https://github.com/excaliburjs/Excalibur/issues/800)) - Fixed semi-colon key not being detected on Firefox and Opera. ([#789](https://github.com/excaliburjs/Excalibur/issues/789)) diff --git a/sandbox/index.html b/sandbox/index.html index 382a63e75..e410d663b 100644 --- a/sandbox/index.html +++ b/sandbox/index.html @@ -21,6 +21,7 @@
  • DisplayMode Position
  • Camera Zoom
  • Camera Lerp
    • +
  • Camera Zoom over time
  • Groups
  • Audio
  • Audio: Long-running sound muting
    • diff --git a/sandbox/tests/camera/zoom.html b/sandbox/tests/camera/zoom.html new file mode 100644 index 000000000..ff32bf95b --- /dev/null +++ b/sandbox/tests/camera/zoom.html @@ -0,0 +1,12 @@ + + + + Camera Zooom + + + + + +

    Click to zoom in and out over time

    + + \ No newline at end of file diff --git a/sandbox/tests/camera/zoom.ts b/sandbox/tests/camera/zoom.ts new file mode 100644 index 000000000..b9d6bb23a --- /dev/null +++ b/sandbox/tests/camera/zoom.ts @@ -0,0 +1,32 @@ +/// + +var game = new ex.Engine({ + width: 500, + height: 500 +}); + +game.backgroundColor = ex.Color.Blue; + + +var actor = new ex.Actor(); + +actor.pos.x = 250; +actor.setWidth(10); +actor.pos.y = 250; +actor.setHeight(10); +actor.color = ex.Color.Red; + +game.add(actor); + +var zoomedIn = false; +game.input.pointers.primary.on('down', (evt: ex.Input.PointerEvent) => { + if (!zoomedIn) { + zoomedIn = true; + game.currentScene.camera.zoom(5, 1000); + } else { + zoomedIn = false; + game.currentScene.camera.zoom(.2, 1000); + } +}); + +game.start(); \ No newline at end of file diff --git a/src/engine/Camera.ts b/src/engine/Camera.ts index 1ce65f620..f10026f9f 100644 --- a/src/engine/Camera.ts +++ b/src/engine/Camera.ts @@ -50,9 +50,9 @@ export class BaseCamera { private _yShake: number = 0; protected _isZooming: boolean = false; - private _currentZoomScale: number = 1; private _maxZoomScale: number = 1; private _zoomDuration: number = 0; + private _zoomPromise: Promise; private _zoomIncrement: number = 0.01; private _easing: EasingFunction = EasingFunctions.EaseInOutCubic; @@ -158,27 +158,22 @@ export class BaseCamera { * @param scale The scale of the zoom * @param duration The duration of the zoom in milliseconds */ - public zoom(scale: number, duration: number = 0) { - this._isZooming = true; - this._maxZoomScale = scale; - this._zoomDuration = duration; + public zoom(scale: number, duration: number = 0): Promise { + this._zoomPromise = new Promise(); + if (duration) { - this._zoomIncrement = Math.abs(this._maxZoomScale - this._currentZoomScale) / duration * 1000; - } - - if (this._maxZoomScale < 1) { - if (duration) { - this._zoomIncrement = -1 * this._zoomIncrement; - } else { - this._isZooming = false; - this._setCurrentZoomScale(this._maxZoomScale); - } + this._isZooming = true; + this._maxZoomScale = scale; + this._zoomDuration = duration; + this._zoomIncrement = (scale - this.z) / duration; } else { - if (!duration) { - this._isZooming = false; - this._setCurrentZoomScale(this._maxZoomScale); - } + this._isZooming = false; + this.z = scale; + this._zoomPromise.resolve(true); + } + + return this._zoomPromise; } /** @@ -188,10 +183,6 @@ export class BaseCamera { return this.z; } - private _setCurrentZoomScale(zoomScale: number) { - this.z = zoomScale; - } - public update(_engine: Engine, delta: number) { // Update placements based on linear algebra this._x += this.dx * delta / 1000; @@ -204,6 +195,25 @@ export class BaseCamera { this.rotation += this.rx * delta / 1000; + if (this._isZooming) { + var newZoom = this.z + this._zoomIncrement * delta; + this.z = newZoom; + if (this._zoomIncrement > 0) { + + if (newZoom >= this._maxZoomScale) { + this._isZooming = false; + this.z = this._maxZoomScale; + this._zoomPromise.resolve(true); + } + } else { + if (newZoom <= this._maxZoomScale) { + this._isZooming = false; + this.z = this._maxZoomScale; + this._zoomPromise.resolve(true); + } + } + } + if (this._cameraMoving) { if (this._currentLerpTime < this._lerpDuration) { diff --git a/src/spec/CameraSpec.ts b/src/spec/CameraSpec.ts index c94c3075e..bcb6df57c 100644 --- a/src/spec/CameraSpec.ts +++ b/src/spec/CameraSpec.ts @@ -13,22 +13,36 @@ describe('A camera', () => { var mock = new Mocks.Mocker(); beforeEach(() => { + jasmine.addMatchers(imagediff.jasmine); actor = new ex.Actor(); // mock engine - engine = mock.engine(500, 500); + engine = TestUtils.engine({ + width: 500, + height: 500 + }); + + engine.setAntialiasing(false); + + engine.backgroundColor = ex.Color.Blue; actor.pos.x = 250; actor.setWidth(10); actor.pos.y = 250; actor.setHeight(10); + actor.color = ex.Color.Red; scene = new ex.Scene(engine); + scene.add(actor); engine.currentScene = scene; sideCamera = new ex.SideCamera(); lockedCamera = new ex.LockedCamera(); baseCamera = new ex.BaseCamera(); }); + + afterEach(() => { + engine.stop(); + }); it('can follow an actor if it is a lockedCamera', () => { engine.currentScene.camera = lockedCamera; @@ -147,4 +161,20 @@ describe('A camera', () => { }); + xit('can zoom in over time', (done) => { + engine.start().then(() => { + engine.currentScene.camera.zoom(5, 1000).then(() => { + imagediff.expectCanvasImageMatches('CameraSpec/zoomin.png', engine.canvas, done); + }); + }); + }); + + xit('can zoom out over time', (done) => { + engine.start().then(() => { + engine.currentScene.camera.zoom(.2, 1000).then(() => { + imagediff.expectCanvasImageMatches('CameraSpec/zoomout.png', engine.canvas, done); + }); + }); + }); + }); diff --git a/src/spec/images/CameraSpec/zoomin.png b/src/spec/images/CameraSpec/zoomin.png new file mode 100644 index 000000000..a42a00176 Binary files /dev/null and b/src/spec/images/CameraSpec/zoomin.png differ diff --git a/src/spec/images/CameraSpec/zoomout.png b/src/spec/images/CameraSpec/zoomout.png new file mode 100644 index 000000000..509be0c2e Binary files /dev/null and b/src/spec/images/CameraSpec/zoomout.png differ diff --git a/src/spec/support/js-imagediff.js b/src/spec/support/js-imagediff.js index a2e577903..3766c56e9 100644 --- a/src/spec/support/js-imagediff.js +++ b/src/spec/support/js-imagediff.js @@ -302,7 +302,7 @@ var result = {}; var diff = imagediff.diff(actual, expected); - result.pass = imagediff.equal(actual, expected, 0); + result.pass = imagediff.equal(actual, expected, 70); can.height = diff.height; can.width = diff.width;