added images and texture for gl renderer

app/Game/Client/GameController.js

@@ -124,5 +124,11 @@ function (Box2D, Parent, PhysicsEngine, ViewController, PlayerController, Notifi
         player.spawn(x, y);
     }
 
+    GameController.prototype.loadLevel = function (path) {
+        Parent.prototype.loadLevel.call(this, path);
+        var tiles = this.level.levelObject.tiles;
+        this.viewController.loadMeshes(tiles);
+    }
+
     return GameController;
 });

app/Game/Client/View/CameraController.js

@@ -6,7 +6,6 @@ define(['Lib/Vendor/Three', 'Game/Config/Settings'], function (Three, Settings)
             ? true 
             : isOrthographic;
 
-
         if(isOrthographic) {
             
             this.camera = new Three.OrthographicCamera(
@@ -29,6 +28,7 @@ define(['Lib/Vendor/Three', 'Game/Config/Settings'], function (Three, Settings)
         }
 
         this.camera.position.z = 481;
+        this.setPosition(0,0);
     }
 
     CameraController.prototype.getCamera = function () {
@@ -36,8 +36,8 @@ define(['Lib/Vendor/Three', 'Game/Config/Settings'], function (Three, Settings)
     }
 
     CameraController.prototype.setPosition = function (x, y) {
-        this.camera.position.x = x;
-        this.camera.position.y = y;
+        this.camera.position.x = x + Settings.STAGE_WIDTH / 2;
+        this.camera.position.y = y - Settings.STAGE_HEIGHT / 2;
     }
 
 

app/Game/Client/View/ViewController.js

@@ -34,11 +34,11 @@ define(requires, function (DomController, Three, Settings, CameraController) {
             preserveDrawingBuffer: true
         };
 
-        if(isWebGlEnabled()) {
+        //if(isWebGlEnabled()) {
             this.renderer = new Three.WebGLRenderer(rendererOptions);
-        } else {
-            this.renderer = new Three.CanvasRenderer(rendererOptions);
-        }
+        //} else {
+            //this.renderer = new Three.CanvasRenderer(rendererOptions);
+        //}
         
         this.renderer.setClearColorHex(0x333333, 1);
         this.renderer.setSize(Settings.STAGE_WIDTH, Settings.STAGE_HEIGHT);
@@ -56,9 +56,9 @@ define(requires, function (DomController, Three, Settings, CameraController) {
         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);
+        //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) {
@@ -74,15 +74,36 @@ define(requires, function (DomController, Three, Settings, CameraController) {
         //this.animate(this);
     }
 
-    ViewController.prototype.update = function () {
+    ViewController.prototype.loadMeshes = function(objects) {
+        var self = this;
+        for (var i = 0; i < objects.length; i++) {
+            (function() {
+                var o = objects[i];
+                var x = o.x * Settings.TILE_SIZE;
+                var y = (-o.y) * Settings.TILE_SIZE;
+                var r = o.r ? o.r : 0;
+                var rad = 0.5 * Math.PI * -r;
 
-        if(this.mesh) {
-            this.mesh.rotation.z += .01;
-            this.mesh.position.z += 1;
-            this.mesh.position.x += .4;
-            this.mesh.position.y += .4;
+                var material = self.tileAtPositionExists(objects, o.x, o.y -1) ? "Soil" : "GrassSoil";
+                
+                self.createMesh(Settings.TILE_SIZE, Settings.TILE_SIZE, x, y, 'static/img/Tiles/' + material + '/' + o.s + '' + o.r + '.gif', function(mesh) {
+                    self.scene.add(mesh);
+                    //mesh.rotation.z = rad;
+                });
+            })();
+        };
+    };
+
+    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.update = function () {
         this.render();
     }
 
@@ -93,17 +114,18 @@ define(requires, function (DomController, Three, Settings, CameraController) {
 
     ViewController.prototype.createMesh = function (width, height, x, y, imgPath, callback) {
         var textureImg = new Image();
-        textureImg.onload = function () {
+        textureImg.onload = function () { // FIXME: perhaps not needed to load double?
             var material = new Three.MeshLambertMaterial({
-                map: Three.ImageUtils.loadTexture(imgPath)
+                map: Three.ImageUtils.loadTexture(imgPath),
+                transparent: true
             });
 
             var mesh = new Three.Mesh(new Three.PlaneGeometry(width, height), material);
-            mesh.overdraw = true;/*
-            mesh.position.z = 0;
+            mesh.overdraw = true;
+            //mesh.position.z = 1;
             mesh.position.x = x;
             mesh.position.y = y;
-            */
+            
             callback(mesh);
         };
         textureImg.src = imgPath;

app/Game/Config/Settings.js

@@ -3,7 +3,6 @@ define({
     STAGE_HEIGHT: 400,
 
     // BOX2D INITIALATORS
-    RATIO: 35,
     BOX2D_WORLD_AABB_SIZE: 3000,
     BOX2D_ALLOW_SLEEP: true,
     BOX2D_GRAVITY: 16,
@@ -16,6 +15,7 @@ define({
     GRAPHICS_SUBPATH_ITEMS: 'items/',
     GRAPHICS_SUBPATH_CHARACTERS: 'characters/',
 
+    RATIO: 35,
     TILE_SIZE: 15,
 
     // GAME PLAY 

app/Game/Core/Loader/Level.js

@@ -1,4 +1,8 @@
-define(["Game/Config/Settings", "Lib/Vendor/Box2D", "Game/Core/Collision/Detector"], function (Settings, Box2D, CollisionDetector) {
+define([
+    "Game/Config/Settings", 
+    "Lib/Vendor/Box2D", 
+    "Game/Core/Collision/Detector"
+], function (Settings, Box2D, CollisionDetector) {
     
     // Public
     function Level (path, engine) {
@@ -179,6 +183,7 @@ define(["Game/Config/Settings", "Lib/Vendor/Box2D", "Game/Core/Collision/Detecto
 
         this.levelObject = {
             tiles: [
+{s:1, x:1, y:1, r:0},
 {s:1, x:3, y:18},
 {s:1, x:37, y:27},
 {s:1, x:20, y:24},

static/html/index.html

@@ -22,7 +22,7 @@
                 margin: 10px;
             }
             #canvasContainer canvas:first-child {
-                display: none;
+                
             }
         </style>
     </head>