From ac27da1e31da5da48257182c5d2e398c2fde604e Mon Sep 17 00:00:00 2001 From: logsol Date: Mon, 7 Jul 2014 23:32:11 +0200 Subject: [PATCH] added zooming with +, - and 0 --- app/Game/Client/Control/KeyboardInput.js | 1 + app/Game/Client/Control/PlayerController.js | 22 ++++++++++- app/Game/Client/View/Views/AbstractView.js | 18 ++++++++- app/Game/Client/View/Views/PixiView.js | 43 +++++++++++++++++---- app/Game/Config/Settings.js | 3 ++ app/Lib/Utilities/NotificationCenter.js | 5 ++- package.json | 2 +- 7 files changed, 82 insertions(+), 12 deletions(-) diff --git a/app/Game/Client/Control/KeyboardInput.js b/app/Game/Client/Control/KeyboardInput.js index 665d1aa..3c57758 100755 --- a/app/Game/Client/Control/KeyboardInput.js +++ b/app/Game/Client/Control/KeyboardInput.js @@ -30,6 +30,7 @@ function (Key) { } KeyboardInput.prototype._onKeyDown = function (e) { + console.log(e.keyCode) var key = this._getKeyByKeyCode(e.keyCode); if (key && !key.getActive()) { diff --git a/app/Game/Client/Control/PlayerController.js b/app/Game/Client/Control/PlayerController.js index 2125dfa..33dbb48 100755 --- a/app/Game/Client/Control/PlayerController.js +++ b/app/Game/Client/Control/PlayerController.js @@ -38,7 +38,11 @@ function (Parent, KeyboardInput, MouseInput, Nc, GamepadInput) { space: 32, - tab: 9 + tab: 9, + + plus: 187, + minus: 189, + zero: 48 } this.init(keys); @@ -63,6 +67,10 @@ function (Parent, KeyboardInput, MouseInput, Nc, GamepadInput) { this.keyboardInput.registerKey(keys.up, 'jump', 'jumpStop'); this.keyboardInput.registerKey(keys.space, 'jump', 'jumpStop'); + this.keyboardInput.registerKey(keys.plus, 'zoomIn'); + this.keyboardInput.registerKey(keys.minus, 'zoomOut'); + this.keyboardInput.registerKey(keys.zero, 'zoomReset'); + this.keyboardInput.registerKey(keys.tab, 'showInfo', 'hideInfo'); this.keyboardInput.registerKey(keys.f, 'handActionLeft'); @@ -127,6 +135,18 @@ function (Parent, KeyboardInput, MouseInput, Nc, GamepadInput) { Nc.trigger(Nc.ns.client.game.gameInfo.toggle, false); }; + PlayerController.prototype.zoomIn = function() { + Nc.trigger(Nc.ns.client.game.zoomIn, true); + }; + + PlayerController.prototype.zoomOut = function() { + Nc.trigger(Nc.ns.client.game.zoomOut, false); + }; + + PlayerController.prototype.zoomReset = function() { + Nc.trigger(Nc.ns.client.game.zoomReset, false); + }; + PlayerController.prototype.destroy = function() { Nc.offAll(this.ncTokens); Parent.prototype.destroy.call(this); diff --git a/app/Game/Client/View/Views/AbstractView.js b/app/Game/Client/View/Views/AbstractView.js index 8afb1ba..b4a2bde 100755 --- a/app/Game/Client/View/Views/AbstractView.js +++ b/app/Game/Client/View/Views/AbstractView.js @@ -26,6 +26,10 @@ function (DomController, Settings, Exception, Nc) { Nc.on(Nc.ns.client.view.playerInfo.update, this.onUpdatePlayerInfo, this), Nc.on(Nc.ns.client.view.playerInfo.remove, this.onRemovePlayerInfo, this), + Nc.on(Nc.ns.client.game.zoomIn, this.onZoomIn, this), + Nc.on(Nc.ns.client.game.zoomOut, this.onZoomOut, this), + Nc.on(Nc.ns.client.game.zoomReset, this.onZoomReset, this), + Nc.on(Nc.ns.client.view.preloadBar.update, this.onUpdateLoader, this), ]; @@ -111,7 +115,19 @@ function (DomController, Settings, Exception, Nc) { }; AbstractView.prototype.setCameraZoom = function (z) { - throw new Exception('Abstract Function setCameraZoom not overwritten'); + throw new Exception('Abstract Function setCameraZoom not overwritten'); + }; + + AbstractView.prototype.onZoomIn = function () { + throw new Exception('Abstract Function onZoomIn not overwritten'); + }; + + AbstractView.prototype.onZoomOut = function () { + throw new Exception('Abstract Function onZoomOut not overwritten'); + }; + + AbstractView.prototype.onZoomReset = function () { + throw new Exception('Abstract Function onZoomReset not overwritten'); }; AbstractView.prototype.onFullscreenChange = function(isFullScreen) { diff --git a/app/Game/Client/View/Views/PixiView.js b/app/Game/Client/View/Views/PixiView.js index d35b18a..b236c4e 100755 --- a/app/Game/Client/View/Views/PixiView.js +++ b/app/Game/Client/View/Views/PixiView.js @@ -21,6 +21,7 @@ function (Parent, DomController, PIXI, Settings, Nc) { this.loader = null; this.init(); this.pixi = PIXI; + this.currentZoom = Settings.ZOOM_DEFAULT; PIXI.scaleModes.DEFAULT = PIXI.scaleModes.NEAREST; } @@ -121,11 +122,17 @@ function (Parent, DomController, PIXI, Settings, Nc) { } PixiView.prototype.calculateCameraPosition = function() { - var zoom = this.container.scale.x; + var targetZoom = this.currentZoom; + + var oldZoom = (this.container.scale.x + this.container.scale.y) / 2; + var newZoom = (targetZoom -oldZoom) * Settings.CAMERA_GLIDE / 100; + + this.container.scale.x += newZoom; + this.container.scale.y += newZoom; var target = this.me.getHeadPosition(); - target.x *= -Settings.RATIO * zoom; - target.y *= -Settings.RATIO * zoom; + target.x *= -Settings.RATIO * targetZoom; + target.y *= -Settings.RATIO * targetZoom; target.x -= this.me.playerController.xyInput.x * Settings.STAGE_WIDTH / 4; target.y += this.me.playerController.xyInput.y * Settings.STAGE_HEIGHT / 4; @@ -154,10 +161,13 @@ function (Parent, DomController, PIXI, Settings, Nc) { return pos; }; - PixiView.prototype.setCameraZoom = function (z) { - this.container.scale.x = z; - this.container.scale.y = z; + PixiView.prototype.setCameraZoom = function (zoom) { +/* + var oldZoom = this.container.scale.x; + this.container.scale.x += (zoom -oldZoom) * Settings.CAMERA_GLIDE / 100; + this.container.scale.y += (zoom -oldZoom) * Settings.CAMERA_GLIDE / 100; +*/ }; PixiView.prototype.onFullscreenChange = function(isFullScreen) { @@ -165,10 +175,11 @@ function (Parent, DomController, PIXI, Settings, Nc) { if(isFullScreen) { this.renderer.resize(window.innerWidth, window.innerHeight); - this.setCameraZoom(window.innerWidth / 600); + this.currentZoom = window.innerWidth / Settings.STAGE_WIDTH; + console.log(); } else { this.renderer.resize(600, 400); - this.setCameraZoom(1); + this.currentZoom = 1; } }; @@ -305,6 +316,22 @@ function (Parent, DomController, PIXI, Settings, Nc) { this.loader.visible = progress < 100; }; + PixiView.prototype.onZoomIn = function() { + if(this.currentZoom + Settings.ZOOM_FACTOR <= Settings.ZOOM_MAX) { + this.currentZoom += Settings.ZOOM_FACTOR; + } + }; + + PixiView.prototype.onZoomOut = function() { + if(this.currentZoom - Settings.ZOOM_FACTOR > 0) { + this.currentZoom -= Settings.ZOOM_FACTOR; + } + }; + + PixiView.prototype.onZoomReset = function() { + this.currentZoom = Settings.ZOOM_DEFAULT; + }; + PixiView.prototype.destroy = function() { for (var i = 0; i < this.stage.children.length; i++) { diff --git a/app/Game/Config/Settings.js b/app/Game/Config/Settings.js index d95d271..2201b88 100755 --- a/app/Game/Config/Settings.js +++ b/app/Game/Config/Settings.js @@ -3,6 +3,9 @@ define(function() { var Settings = { STAGE_WIDTH: 600, STAGE_HEIGHT: 400, + ZOOM_FACTOR: 0.8, + ZOOM_DEFAULT: 1, + ZOOM_MAX: 10, // BOX2D INITIALATORS BOX2D_WORLD_AABB_SIZE: 3000, diff --git a/app/Lib/Utilities/NotificationCenter.js b/app/Lib/Utilities/NotificationCenter.js index 6536eee..c2fea3d 100755 --- a/app/Lib/Utilities/NotificationCenter.js +++ b/app/Lib/Utilities/NotificationCenter.js @@ -63,7 +63,10 @@ function (Exception) { game: { gameInfo: { toggle: null - } + }, + zoomIn: null, + zoomOut: null, + zoomReset: null }, to: { server: { diff --git a/package.json b/package.json index 21de95a..2da0672 100755 --- a/package.json +++ b/package.json @@ -15,7 +15,7 @@ }, "main": "", "dependencies": { - "socket.io": ">= 0.9.6", + "socket.io": "= 0.9.6", "node-static": ">= 0.6.0", "requirejs": "= 2.0.4", "node-fork": ">= 0.4.2",