jeena/chuck.js
1
0
Fork 0
mirror of https://github.com/logsol/chuck.js.git synced 2026-05-11 10:37:34 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

improved the view management

Browse source
This commit is contained in:
logsol 2013-12-18 01:09:12 +01:00
parent 3d1e729650
commit 067114eaf5
8 changed files with 174 additions and 211 deletions
Download patch file Download diff file Expand all files Collapse all files

6
app/Game/Client/GameController.js
View file

@ -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;

70
app/Game/Client/View/CameraController.js
View file

@ -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;
});

2
app/Game/Client/View/DomController.js
View file

@ -39,7 +39,7 @@ function (Settings) {
}
DomController.createDebugCanvas = function () {
console.log('setHERE')
var container = DomController.getCanvasContainer();
if(DomController.debugCanvas) {
container.removeChild(DomController.debugCanvas);

78
app/Game/Client/View/ViewController.js
View file

@ -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;
});

32
app/Game/Client/View/ViewManager.js
View file

@ -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;

69
app/Game/Client/View/Views/AbstractView.js Normal file
View file

@ -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;
});

126
app/Game/Client/View/Views/ThreeView.js
View file

@ -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;
});

2
app/Game/Config/Settings.js
View file

@ -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,