Added debug canvas and webgl render canvas, added viewcontroller

client.js

@@ -4,7 +4,7 @@ requirejs.config({
 
 var inspector = {};
 
-requirejs(["Client/Networker", "SocketIO"], function(Networker, SocketIO) {
+requirejs(["Client/Networker", "Vendor/SocketIO"], function(Networker, SocketIO) {
 	var socket = SocketIO.connect(location.href);
 	var networker = new Networker(socket);
 

lib/Chuck/Physics/Engine.js

@@ -1,4 +1,4 @@
-define(["Chuck/Settings", "Vendor/Box2D", "Chuck/Collision/Detector"], function(Settings, Box2D, CollisionDetector){
+define(["Chuck/Settings", "Client/Dom", "Vendor/Box2D", "Chuck/Collision/Detector"], function(Settings, Dom, Box2D, CollisionDetector){
 
 	function Engine () {
 	    this.world;
@@ -8,7 +8,7 @@ define(["Chuck/Settings", "Vendor/Box2D", "Chuck/Collision/Detector"], function(
 	Engine.prototype.init = function() {
 	    this.world = new Box2D.Dynamics.b2World(new Box2D.Common.Math.b2Vec2(0, Settings.BOX2D_GRAVITY), Settings.BOX2D_ALLOW_SLEEP);
 
-	    if(Settings.IS_BROWSER_ENVIRONMENT) {
+	    if(Settings.IS_BROWSER_ENVIRONMENT && Settings.DEBUG_MODE) {
 	    	this.setupDebugDraw();
 	    }
 	}
@@ -25,7 +25,7 @@ define(["Chuck/Settings", "Vendor/Box2D", "Chuck/Collision/Detector"], function(
 
 	Engine.prototype.setupDebugDraw = function() {
 	    //var debugSprite = Settings.DEBUG_DRAW_CANVAS_SPRITE;
-		var debugSprite = document.getElementById("canvas").getContext("2d");
+		var debugSprite = Dom.getDebugCanvas().getContext("2d");
 
 	    // set debug draw
 	    var debugDraw = new Box2D.Dynamics.b2DebugDraw();

lib/Chuck/Processor.js

@@ -1,4 +1,5 @@
 var requires = [
+	"Chuck/View/ViewController", 
 	"Chuck/Physics/Engine", 
 	"Chuck/Player", 
 	"Chuck/Control/InputControlUnit", 
@@ -8,47 +9,32 @@ var requires = [
 	"RequestAnimationFrame"
 ];
 
-define(requires, function(PhysicsEngine, Player, InputControlUnit, Settings, Box2D, Level, requestAnimFrame){
+define(requires, function(ViewController, PhysicsEngine, Player, InputControlUnit, Settings, Box2D, Level, requestAnimFrame){
 
 	function Processor () {
-	    this._me;
-	    this._physicsEngine;
-	    this._camera;
-	    this._repository;
-	    this._inputControlUnit;
-	    this._keyboardInput;
-
-	    this._bodyDef;
-
-	    this.level;
-
-	    this.init();
+		if(Settings.IS_BROWSER_ENVIRONMENT) {
+			this.initClient();
+		} else {
+			this.initServer();
+		}
 	};
 
-	Processor.prototype.init = function() {
+	Processor.prototype.initClient = function() {
+		this.viewController = new ViewController();
+	    this.physicsEngine = new PhysicsEngine();
+		this.me = new Player(this.physicsEngine, null);
+		this.me.spawn(100, 0);
+	    this.inputControlUnit = new InputControlUnit(this.me);
+  	    this.physicsEngine.setCollisionDetector(this.me);
 
-	    this._physicsEngine = new PhysicsEngine();
-	    //this._makeBox();
-	    
-		if(Settings.IS_BROWSER_ENVIRONMENT) {
+	    this.update();
+	}
 
-			this._me = new Player(this._physicsEngine, null);
-			this._me.spawn(100, 0);
-		    
-	  	    this._inputControlUnit = new InputControlUnit(this._me);
-	  	    //this._camera = Camera.getInstance()
-	  	    //this._camera.follow(this._me);
-	  	    //this._repository = Repository.getInstance();
-	  	    this._physicsEngine.setCollisionDetector(this._me);
-		}
-	    
-	
+	Processor.prototype.initServer = function() {
+	    this.physicsEngine = new PhysicsEngine();
+  	    //this.physicsEngine.setCollisionDetector(players);
 
-	    //new Chuck.Loader.Level(this._physicsEngine);u
-	    //new Items();
-
-	    //setInterval(this._update, 1000/60, this);
-	    this._update();
+	    this.update();
 	}
 
 	Processor.prototype.loadLevel = function(path) {
@@ -56,69 +42,33 @@ define(requires, function(PhysicsEngine, Player, InputControlUnit, Settings, Box
 			this.level.unload();
 		}
 
-		this.level = new Level(path, this._physicsEngine);
+		this.level = new Level(path, this.physicsEngine);
 		this.level.loadLevelInToEngine();
 	}
 
-	Processor.prototype._makeBox = function() {
-		var world = this._physicsEngine.getWorld();
-
-		var fixDef = new Box2D.Dynamics.b2FixtureDef;
-		fixDef.density = 1.0;
-		fixDef.friction = 0.99;
-		fixDef.restitution = .51;
-		var bodyDef = new Box2D.Dynamics.b2BodyDef;
-			 
-		// create ground
-		bodyDef.type = Box2D.Dynamics.b2Body.b2_staticBody;
-		fixDef.shape = new Box2D.Collision.Shapes.b2PolygonShape;
-		fixDef.shape.SetAsBox(20, 2);
-		bodyDef.position.Set(10, 400 / 30 + 1.8);
-		world.CreateBody(bodyDef).CreateFixture(fixDef);
-		bodyDef.position.Set(10, -1.8);
-		world.CreateBody(bodyDef).CreateFixture(fixDef);
-		fixDef.shape.SetAsBox(2, 14);
-		bodyDef.position.Set(-1.8, 13);
-		world.CreateBody(bodyDef).CreateFixture(fixDef);
-		bodyDef.position.Set(21.8, 13);
-		world.CreateBody(bodyDef).CreateFixture(fixDef);
-
-		// create object
-		bodyDef.type = Box2D.Dynamics.b2Body.b2_dynamicBody;
-		fixDef.shape = new Box2D.Collision.Shapes.b2PolygonShape;
-		fixDef.shape.SetAsBox(0.4, 0.4);
-		bodyDef.position.x = 10;
-		bodyDef.position.y = 2;
-		bodyDef.userData = {
-			'bodyId': 1 + '' 
-		};
-
-		world.CreateBody(bodyDef).CreateFixture(fixDef);
-		this._bodyDef = bodyDef;
-	}
-
 	Processor.prototype.getPhysicsEngine = function() {
-	    return this._physicsEngine;
+	    return this.physicsEngine;
 	}
 
 	Processor.prototype.getMe = function() {
-	    return this._me;
+	    return this.me;
 	}
 
-	Processor.prototype._update  = function() {
+	Processor.prototype.update  = function() {
 
 
-		requestAnimFrame(this._update.bind(this));
+		requestAnimFrame(this.update.bind(this));
 
-		//console.log(self._physicsEngine.getWorld().GetBodyList().GetPosition());
+		//console.log(self.physicsEngine.getWorld().GetBodyList().GetPosition());
 
-	    this._physicsEngine.update();
+	    this.physicsEngine.update();
 	    
 	    if(Settings.IS_BROWSER_ENVIRONMENT) {
-	    	this._inputControlUnit.update();	
-	    	this._me.update();
-	    	//self._camera.update();
-	    	//self._repository.update();
+	    	this.viewController.update();
+	    	this.inputControlUnit.update();	
+	    	this.me.update();
+	    	//self.camera.update();
+	    	//self.repository.update();
 	    }
 	}
 

lib/Chuck/Settings.js

@@ -42,9 +42,10 @@ define(function() {
 	    ITEM_FRICTION: 0.99,
 	    ITEM_RESTITUTION: 0.02,
 
-	    // debug draw
-	    DEBUG_DRAW_CANVAS_SPRITE: null,//isBrowserEnvironment() ? document.getElementById("canvas").getContext("2d") : undefined,
-	    IS_BROWSER_ENVIRONMENT: isBrowserEnvironment()
+	    CANVAS_DOM_ID: 'canvasContainer',
+	    IS_BROWSER_ENVIRONMENT: isBrowserEnvironment(),
+
+	    DEBUG_MODE: true
 	};
 
 	function isBrowserEnvironment(){

lib/Chuck/View/CameraController.js

@@ -1,30 +1,47 @@
 define(['Vendor/Three', 'Chuck/Settings'], function(Three, Settings) {
 
-	function CameraController() {
-		/*
-		this.camera = new Three.OrthographicCamera(
-			-Settings.STAGE_WIDTH/2, 
-			Settings.STAGE_WIDTH/2, 
-			Settings.STAGE_HEIGHT/2, 
-			-Settings.STAGE_HEIGHT/2, 
-			-2000, 
-			1000 
-		);*/
+	function CameraController(isOrthographic) {
 
-		this.camera = new Three.OrthographicCamera( 600 / - 2, 600 / 2, 400 / 2, 400 / - 2, - 2000, 1000 );
+		isOrthographic = typeof isOrthographic == 'undefined' 
+			? true 
+			: isOrthographic;
 
-		//this.camera = new Three.PerspectiveCamera(45, 600 / 400, 1, 1000);
 
-		//this.camera.position.z = 481;
+		if(isOrthographic) {
+			
+			this.camera = new Three.OrthographicCamera(
+				-Settings.STAGE_WIDTH/2, 
+				Settings.STAGE_WIDTH/2, 
+				Settings.STAGE_HEIGHT/2, 
+				-Settings.STAGE_HEIGHT/2, 
+				-2000, 
+				1000 
+			);
+
+		} else {
+
+			this.camera = new Three.PerspectiveCamera(
+				45, 
+				Settings.STAGE_WIDTH / Settings.STAGE_HEIGHT, 
+				-2000, 
+				1000
+			);
+		}
+
+		this.camera.position.z = 481;
 	}
 
 	CameraController.prototype.getCamera = function(){
 	    return this.camera;
 	}
 
-	CameraController.prototype.setPosition = function(x, y, z){
+	CameraController.prototype.setPosition = function(x, y){
 		this.camera.position.x = x;
 		this.camera.position.y = y;
+	}
+
+
+	CameraController.prototype.setZoom = function(z){
 		this.camera.position.z = z;
 	}
 

lib/Chuck/View/ViewController.js

@@ -0,0 +1,94 @@
+define(["Client/Dom", "Vendor/Three", "Chuck/Settings", "Chuck/View/CameraController"], function(Dom, Three, Settings, CameraController){
+	
+	function ViewController(){
+
+		this.mesh = null;
+		this.scene = null;
+		this.renderer = null;
+		this.cameraController = new CameraController();
+
+		this.init();
+	}
+
+	ViewController.prototype.init = function(){
+
+		var self = this;
+
+		this.renderer = new Three.WebGLRenderer({
+			//antialias: true,
+			preserveDrawingBuffer: true
+		});
+
+		//this.renderer = new THREE.CanvasRenderer();
+
+		this.renderer.setClearColorHex(0x333333, 1);
+	    this.renderer.setSize(Settings.STAGE_WIDTH, Settings.STAGE_HEIGHT);
+
+	    Dom.setCanvas(this.renderer.domElement);
+
+	    if(Settings.DEBUG_MODE){
+	    	Dom.createDebugCanvas();
+	    }
+
+	    this.scene = new Three.Scene();
+	 	this.scene.add(this.cameraController.getCamera());
+
+
+	 	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.createMesh(50, 50, 200, 100, 'static/img/100.png', function(mesh){
+        	self.scene.add(mesh);
+        });
+*/
+
+        //this.animate(this);
+	}
+
+	ViewController.prototype.update = function() {
+
+		if(this.mesh) {
+			this.mesh.rotation.z += .01;
+	        this.mesh.position.z += 1;
+	        this.mesh.position.x += .4;
+	        this.mesh.position.y += .4;
+        }
+
+		this.render();
+	}
+
+	ViewController.prototype.render = function() {
+
+		this.renderer.render(this.scene, this.cameraController.getCamera());
+	}
+
+	ViewController.prototype.createMesh = function(width, height, x, y, imgPath, callback) {
+		var textureImg = new Image();
+        textureImg.onload = function(){
+	        var material = new Three.MeshLambertMaterial({
+	            map: Three.ImageUtils.loadTexture(imgPath)
+	        });
+
+	        var mesh = new Three.Mesh(new Three.PlaneGeometry(width, height), material);
+	        mesh.overdraw = true;/*
+	        mesh.position.z = 0;
+	        mesh.position.x = x;
+	        mesh.position.y = y;
+	        */
+	        callback(mesh);
+        };
+        textureImg.src = imgPath;
+	}
+
+	return ViewController;
+});

lib/Client/Dom.js

@@ -0,0 +1,53 @@
+define(['Chuck/Settings'], function(Settings) {
+
+	var Dom = {
+		canvas: null,
+		debugCanvas: null
+	};
+
+	Dom.getCanvasContainer = function(){
+		var container = document.getElementById(Settings.CANVAS_DOM_ID);
+
+		if(container) {
+			return container;
+		} else {
+			throw 'Canvas Container missing: #' + Settings.CANVAS_DOM_ID;
+		}
+	}
+
+	Dom.getCanvas = function(){
+		return Dom.canvas;
+	}
+
+	Dom.setCanvas = function(canvas){
+		
+		var container = Dom.getCanvasContainer();
+		if(Dom.canvas){
+			container.removeChild(Dom.canvas);
+		}
+
+		Dom.canvas = canvas;
+		container.appendChild(canvas);
+	}
+
+	Dom.getDebugCanvas = function(){
+		return Dom.debugCanvas;
+	}
+
+	Dom.createDebugCanvas = function(){
+		
+		var container = Dom.getCanvasContainer();
+		if(Dom.debugCanvas){
+			container.removeChild(Dom.debugCanvas);
+		}
+
+		var canvas = document.createElement('canvas');
+		canvas.width = Settings.STAGE_WIDTH;
+		canvas.height = Settings.STAGE_HEIGHT;
+		Dom.debugCanvas = canvas;
+		container.appendChild(canvas);
+	}
+
+	return Dom;
+	
+});

lib/Vendor/Box2D.js

@@ -1,3 +1,3 @@
-define(["Vendor/Box2D/Box2D.js"], function() {
+define(["Vendor/Box2D/Box2D"], function() {
     return Box2D;
 })

static/html/index.html

@@ -3,7 +3,7 @@
     <head>
         <title>Chuck</title>
         <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
-        <script data-main="client" src="require.js"></script>
+        
         <style>
 	        html, body { 
 			    margin: 0; 
@@ -13,7 +13,7 @@
 			    height: 100%;
 			    background: #000;
 			}
-			#container { 
+			#canvasContainer { 
 			    text-align: center; 
 			    display: table-cell; 
 			    vertical-align: middle; 
@@ -21,13 +21,13 @@
 			}
 			canvas { 
 			    background: #333;  
+			    margin: 10px;
 			}
         </style>
     </head>
     <body>
-        <div id="container">
-            hello chuck<br>
-            <canvas id="canvas" width="600" height="400"></canvas>
+        <div id="canvasContainer">
         </div>
+        <script data-main="client" src="require.js"></script>
     </body>
 </html>