From 067114eaf5bc6a1671486d2b28831915518e35e4 Mon Sep 17 00:00:00 2001 From: logsol Date: Wed, 18 Dec 2013 01:09:12 +0100 Subject: [PATCH] improved the view management --- app/Game/Client/GameController.js | 6 +- app/Game/Client/View/CameraController.js | 70 ------------ app/Game/Client/View/DomController.js | 2 +- app/Game/Client/View/ViewController.js | 78 ------------- app/Game/Client/View/ViewManager.js | 32 ++++-- app/Game/Client/View/Views/AbstractView.js | 69 +++++++++++ app/Game/Client/View/Views/ThreeView.js | 126 +++++++++++++-------- app/Game/Config/Settings.js | 2 +- 8 files changed, 174 insertions(+), 211 deletions(-) delete mode 100755 app/Game/Client/View/CameraController.js delete mode 100755 app/Game/Client/View/ViewController.js create mode 100644 app/Game/Client/View/Views/AbstractView.js diff --git a/app/Game/Client/GameController.js b/app/Game/Client/GameController.js index 5ed800c..1d0e016 100755 --- a/app/Game/Client/GameController.js +++ b/app/Game/Client/GameController.js @@ -13,10 +13,10 @@ define([ function (Parent, Box2D, PhysicsEngine, ViewManager, PlayerController, NotificationCenter, requestAnimFrame, Settings, Stats) { function GameController () { - this.viewController = ViewManager.prototype.createView(); - + this.viewController = ViewManager.createView(); + Parent.call(this, new PhysicsEngine()); - + this.physicsEngine.setCollisionDetector(); this.me = null; diff --git a/app/Game/Client/View/CameraController.js b/app/Game/Client/View/CameraController.js deleted file mode 100755 index 1cd88b3..0000000 --- a/app/Game/Client/View/CameraController.js +++ /dev/null @@ -1,70 +0,0 @@ -define([ - 'Lib/Vendor/Three', - 'Game/Config/Settings' -], - -function (Three, Settings) { - - function CameraController () { - this.zoom = 1; - - this.camera = new Three.OrthographicCamera( - -Settings.STAGE_WIDTH/2, - Settings.STAGE_WIDTH/2, - Settings.STAGE_HEIGHT/2, - -Settings.STAGE_HEIGHT/2, - 0, - 1000 - ); - - this.camera.position.z = 1; - - this.setPosition(Settings.STAGE_WIDTH / 2, -Settings.STAGE_HEIGHT / 2); - - this.initWheel(); - } - - CameraController.prototype.initWheel = function() { - var callback = this.handleWheel.bind(this); - if(window.addEventListener) - window.addEventListener("DOMMouseScroll", callback, false); - else - window.onmousewheel = document.onmousewheel = callback; - }; - - CameraController.prototype.handleWheel = function(event) { - var delta = 0; - if(!event) event = window.event; // IE - if(event.wheelDelta) delta = event.wheelDelta/120; - else if(event.detail) delta = -event.detail/3; - if(delta) { - this.setZoom(this.zoom + (delta / 30)); - } - if(event.preventDefault) event.preventDefault(); - event.returnValue = false; - }; - - CameraController.prototype.getCamera = function () { - return this.camera; - } - - CameraController.prototype.setPosition = function (x, y) { - this.camera.position.x = x; - this.camera.position.y = y; - } - - - CameraController.prototype.setZoom = function (z) { - this.zoom = z; - z *= 2; - console.log(this.zoom) - this.camera.left = - Settings.STAGE_WIDTH / z; - this.camera.right = Settings.STAGE_WIDTH / z; - this.camera.top = Settings.STAGE_HEIGHT / z; - this.camera.bottom = - Settings.STAGE_HEIGHT / z; - this.camera.updateProjectionMatrix(); - } - - return CameraController; - -}); \ No newline at end of file diff --git a/app/Game/Client/View/DomController.js b/app/Game/Client/View/DomController.js index 23cf65c..a0a97cc 100755 --- a/app/Game/Client/View/DomController.js +++ b/app/Game/Client/View/DomController.js @@ -39,7 +39,7 @@ function (Settings) { } DomController.createDebugCanvas = function () { - + console.log('setHERE') var container = DomController.getCanvasContainer(); if(DomController.debugCanvas) { container.removeChild(DomController.debugCanvas); diff --git a/app/Game/Client/View/ViewController.js b/app/Game/Client/View/ViewController.js deleted file mode 100755 index 38e9461..0000000 --- a/app/Game/Client/View/ViewController.js +++ /dev/null @@ -1,78 +0,0 @@ -define([ - "Game/Client/View/DomController", - "Game/Config/Settings", - "Game/Client/View/CameraController" -], - -function (DomController, Settings, CameraController) { - - function ViewController () { - - this.mesh = null; - this.scene = null; - this.renderer = null; - this.cameraController = new CameraController(); - this.movableObjects = []; - - this.init(); - } - - ViewController.prototype.isWebGlEnabled = function () { - try { - return !! window.WebGLRenderingContext && !! document.createElement( 'canvas' ).getContext( 'experimental-webgl' ); - } catch(e) { - return false; - } - } - - ViewController.prototype.init = function () { - - var self = this; - - DomController.setCanvas(this.renderer.domElement); - - if(Settings.DEBUG_MODE) { - DomController.createDebugCanvas(); - } - - } - - ViewController.prototype.loadPlayerMesh = function(player) { - - }; - - ViewController.prototype.loadMeshes = function(objects) { - - }; - - ViewController.prototype.tileAtPositionExists = function(objects, x, y) { - - for (var i = 0; i < objects.length; i++) { - var o = objects[i]; - if(o.x == x && o.y == y) return true; - } - return false; - }; - - ViewController.prototype.render = function () { - - } - - ViewController.prototype.createMesh = function (width, height, x, y, imgPath, callback) { - - } - - ViewController.prototype.setMe = function(player) { - this.me = player; - }; - - ViewController.prototype.addPlayer = function(player) { - - }; - - ViewController.prototype.removPlayer = function(player) { - - }; - - return ViewController; -}); \ No newline at end of file diff --git a/app/Game/Client/View/ViewManager.js b/app/Game/Client/View/ViewManager.js index 3e5014a..eb49d22 100644 --- a/app/Game/Client/View/ViewManager.js +++ b/app/Game/Client/View/ViewManager.js @@ -1,25 +1,41 @@ define([ "Game/Config/Settings", + "Lib/Utilities/Exception", + "Game/Client/View/Views/AbstractView", "Game/Client/View/Views/ThreeView", "Game/Client/View/Views/PixiView", ], -function (Settings, ThreeView, PixiView) { +function (Settings, Exception, AbstractView, ThreeView, PixiView) { - function ViewManager() { - } - - ViewManager.prototype.createView = function(arguments) { + var ViewManager = {}; + + ViewManager.createView = function() { + var view = null switch(Settings.VIEW_CONTROLLER) { case 'Three': - return new ThreeView(); + view = new ThreeView(); break; case 'Pixi': - return new PixiView(); + view = new PixiView(); break; default: - return false; + throw new Exception("A view called", Settings.VIEW_CONTROLLER, "has not been (fully) implemented."); } +/* + if(!(view instanceof AbstractView)) { + throw new Exception("The view", Settings.VIEW_CONTROLLER + 'View', "must extend AbstractView!"); + } + + if(!view.canvas) { + throw new Exception("In the view", Settings.VIEW_CONTROLLER + 'View', "the method 'this.setCanvas(canvas)' has not been called"); + } + + if(!(view.canvas instanceof HTMLCanvasElement)) { + throw new Exception("In the view", Settings.VIEW_CONTROLLER + 'View', "this.setCanvas(canvas) has not been called with a valid HTMLCanvasElement!"); + } +*/ + return view; } return ViewManager; diff --git a/app/Game/Client/View/Views/AbstractView.js b/app/Game/Client/View/Views/AbstractView.js new file mode 100644 index 0000000..f249687 --- /dev/null +++ b/app/Game/Client/View/Views/AbstractView.js @@ -0,0 +1,69 @@ +define([ + "Game/Client/View/DomController", + "Game/Config/Settings" +], + +function (DomController, Settings) { + + function AbstractView () { + this.me = null; + this.canvas = null; + } + + AbstractView.prototype.isWebGlEnabled = function () { + try { + return !! window.WebGLRenderingContext && !! document.createElement( 'canvas' ).getContext( 'experimental-webgl' ); + } catch(e) { + return false; + } + } + + AbstractView.prototype.setCanvas = function (canvas) { + + this.canvas = canvas; + DomController.setCanvas(canvas); + + if(Settings.DEBUG_MODE) { + DomController.createDebugCanvas(); + } + } + + AbstractView.prototype.loadPlayerMesh = function(player) { + throw new Exception('Abstract Function not overwritten ' + arguments.callee.toString()); + }; + + AbstractView.prototype.loadMeshes = function(objects) { + throw new Exception('Abstract Function not overwritten ' + arguments.callee.toString()); + }; + + AbstractView.prototype.render = function () { + throw new Exception('Abstract Function not overwritten ' + arguments.callee.toString()); + } + + AbstractView.prototype.createMesh = function (width, height, x, y, imgPath, callback) { + throw new Exception('Abstract Function not overwritten ' + arguments.callee.toString()); + } + + AbstractView.prototype.setMe = function(player) { + this.me = player; + }; + + AbstractView.prototype.addPlayer = function(player) { + throw new Exception('Abstract Function not overwritten ' + arguments.callee.toString()); + }; + + AbstractView.prototype.removPlayer = function(player) { + throw new Exception('Abstract Function not overwritten ' + arguments.callee.toString()); + }; + + AbstractView.prototype.setCameraPosition = function (x, y) { + throw new Exception('Abstract Function not overwritten ' + arguments.callee.toString()); + } + + AbstractView.prototype.setCameraZoom = function (z) { + throw new Exception('Abstract Function not overwritten ' + arguments.callee.toString()); + } + + + return AbstractView; +}); \ No newline at end of file diff --git a/app/Game/Client/View/Views/ThreeView.js b/app/Game/Client/View/Views/ThreeView.js index 5a38b01..93d52e3 100755 --- a/app/Game/Client/View/Views/ThreeView.js +++ b/app/Game/Client/View/Views/ThreeView.js @@ -1,26 +1,28 @@ define([ - "Game/Client/View/ViewController", + "Game/Client/View/Views/AbstractView", "Game/Client/View/DomController", "Lib/Vendor/Three", - "Game/Config/Settings", - "Game/Client/View/CameraController" + "Game/Config/Settings" ], -function (Parent, DomController, Three, Settings, CameraController) { +function (Parent, DomController, Three, Settings) { function ThreeView () { - Parent.call(this); + + this.mesh = null; + this.scene = null; + this.renderer = null; + this.movableObjects = []; + this.camera = null; + + this.init(); } ThreeView.prototype = Object.create(Parent.prototype); ThreeView.prototype.init = function () { - //Parent.prototype.init.call(this); - - var self = this; - var rendererOptions = { antialias: false, preserveDrawingBuffer: true @@ -35,36 +37,17 @@ function (Parent, DomController, Three, Settings, CameraController) { this.renderer.setClearColor("#333333", 1); this.renderer.setSize(Settings.STAGE_WIDTH, Settings.STAGE_HEIGHT); - DomController.setCanvas(this.renderer.domElement); - - if(Settings.DEBUG_MODE) { - DomController.createDebugCanvas(); - } + this.initCamera(); this.scene = new Three.Scene(); - this.scene.add(this.cameraController.getCamera()); + this.scene.add(this.camera); - - var ambientLight = new Three.AmbientLight(0xffaaaa); + var ambientLight = new Three.AmbientLight(0xffffff); this.scene.add(ambientLight); - - - //var directionalLight = new Three.DirectionalLight(0xffffff); - //directionalLight.position.set(1, 0, 10).normalize(); - //this.scene.add(directionalLight); - - - //this.createMesh(100, 100, 100, 100, 'static/img/100.png', function (mesh) { - // self.mesh = mesh; - // self.scene.add(mesh); - //}); + this.setCanvas(this.renderer.domElement); } - ThreeView.prototype.loadPlayerMesh = function(player) { - - }; - ThreeView.prototype.loadMeshes = function(objects) { var self = this; for (var i = 0; i < objects.length; i++) { @@ -86,26 +69,11 @@ function (Parent, DomController, Three, Settings, CameraController) { }; }; - ThreeView.prototype.tileAtPositionExists = function(objects, x, y) { - - for (var i = 0; i < objects.length; i++) { - var o = objects[i]; - if(o.x == x && o.y == y) return true; - } - return false; - }; - ThreeView.prototype.render = function () { if(this.me) { - var pos = this.me.getPosition(); - var x = pos.x * Settings.RATIO; - var y = -(pos.y * Settings.RATIO); - - x += this.me.playerController.xyInput.x * Settings.STAGE_WIDTH / 4; - y += this.me.playerController.xyInput.y * Settings.STAGE_HEIGHT / 4; - - this.cameraController.setPosition(x, y); + var pos = this.calculateCameraPosition(); + this.setCameraPosition(pos.x, pos.y); } for (var i = 0; i < this.movableObjects.length; i++) { @@ -115,7 +83,7 @@ function (Parent, DomController, Three, Settings, CameraController) { obj.mesh.position.y = -pos.y * Settings.RATIO + 21; } - this.renderer.render(this.scene, this.cameraController.getCamera()); + this.renderer.render(this.scene, this.camera); } ThreeView.prototype.createMesh = function (width, height, x, y, imgPath, callback) { @@ -161,5 +129,63 @@ function (Parent, DomController, Three, Settings, CameraController) { }; }; + ThreeView.prototype.initCamera = function () { + this.zoom = 1; + + this.camera = new Three.OrthographicCamera( + -Settings.STAGE_WIDTH/2, + Settings.STAGE_WIDTH/2, + Settings.STAGE_HEIGHT/2, + -Settings.STAGE_HEIGHT/2, + 0, + 1000 + ); + + this.camera.position.z = 1; + this.setCameraPosition(Settings.STAGE_WIDTH / 2, -Settings.STAGE_HEIGHT / 2); + } + + ThreeView.prototype.calculateCameraPosition = function() { + var reference = this.me.getPosition(); + var pos = {}; + + pos.x = reference.x; + pos.y = reference.y; + + pos.x = pos.x * Settings.RATIO; + pos.y = -(pos.y * Settings.RATIO); + + pos.x += this.me.playerController.xyInput.x * Settings.STAGE_WIDTH / 4; + pos.y += this.me.playerController.xyInput.y * Settings.STAGE_HEIGHT / 4; + + return pos; + }; + + ThreeView.prototype.setCameraPosition = function (x, y) { + this.camera.position.x = x; + this.camera.position.y = y; + }; + + ThreeView.prototype.setCameraZoom = function (z) { + this.zoom = z; + z *= 2; + console.log(this.zoom) + this.camera.left = - Settings.STAGE_WIDTH / z; + this.camera.right = Settings.STAGE_WIDTH / z; + this.camera.top = Settings.STAGE_HEIGHT / z; + this.camera.bottom = - Settings.STAGE_HEIGHT / z; + this.camera.updateProjectionMatrix(); + }; + + + ThreeView.prototype.tileAtPositionExists = function(objects, x, y) { + + for (var i = 0; i < objects.length; i++) { + var o = objects[i]; + if(o.x == x && o.y == y) return true; + } + return false; + }; + return ThreeView; }); \ No newline at end of file diff --git a/app/Game/Config/Settings.js b/app/Game/Config/Settings.js index 88246b2..4b2c75c 100755 --- a/app/Game/Config/Settings.js +++ b/app/Game/Config/Settings.js @@ -46,7 +46,7 @@ define({ IS_BROWSER_ENVIRONMENT: typeof window !== 'undefined', USE_WEGBL: true, - DEBUG_MODE: false, + DEBUG_MODE: 0, // NETWORKING WORLD_UPDATE_BROADCAST_INTERVAL: 70,