implement isometric blocks in hotbar

src/js/net/minecraft/client/gui/Gui.js

@@ -40,24 +40,66 @@ window.Gui = class {
     }
 
     renderBlock(stack, texture, block, x, y) {
+        let scale = 0.18;
+
+        let blockWidth = 32 * scale;
+
+        let sideY = 16 * scale;
+        let sideHeight = 40 * scale;
+        let middleTopHeight = 32 * scale;
+        let middleBottomHeight = 40 * scale;
+
+        let topTip = new Point(0, -middleTopHeight);
+        let center = new Point(0, 0);
+        let bottomTip = new Point(0, middleBottomHeight);
+
+        let topLeft = new Point(-blockWidth, -middleTopHeight + sideY);
+        let bottomLeft = new Point(-blockWidth, -middleTopHeight + sideY + sideHeight);
+
+        let topRight = new Point(blockWidth, -middleTopHeight + sideY);
+        let bottomRight = new Point(blockWidth, -middleTopHeight + sideY + sideHeight);
+
+        let trianglesLeft = IsometricRenderer.createTriangles(
+            texture,
+            topLeft,
+            center,
+            bottomTip,
+            bottomLeft
+        );
+
+        let trianglesRight = IsometricRenderer.createTriangles(
+            texture,
+            center,
+            topRight,
+            bottomRight,
+            bottomTip
+        );
+
+        let trianglesTop = IsometricRenderer.createTriangles(
+            texture,
+            topLeft,
+            topTip,
+            topRight,
+            center
+        );
+
         stack.save();
-        stack.translate(x + 3, y + 3);
+        stack.translate(x + 0.5, y + 0.5);
-        this.renderBlockFace(stack, texture, block, EnumBlockFace.NORTH);
+        stack.imageSmoothingEnabled = true;
+        this.renderBlockFace(stack, texture, block, trianglesLeft, EnumBlockFace.NORTH);
+        this.renderBlockFace(stack, texture, block, trianglesRight, EnumBlockFace.EAST);
+        this.renderBlockFace(stack, texture, block, trianglesTop, EnumBlockFace.TOP);
         stack.restore();
     }
 
-    renderBlockFace(stack, texture, block, face) {
+    renderBlockFace(stack, texture, block, triangles, face) {
         // UV Mapping
         let textureIndex = block.getTextureForFace(face);
         let minU = (textureIndex % 16) / 16.0;
         let minV = Math.floor(textureIndex / 16) / 16.0;
 
         stack.save();
-        this.drawSprite(stack, texture, minU * 256, minV, 16, 16, 0, 0, 16, 16)
+        IsometricRenderer.render(stack, triangles, _ => this.drawSprite(stack, texture, minU * 256, minV, 16, 16, 0, 0, 256, 256));
-
-       // let triangles = IsometricRenderer.createTriangles(new Point(0, 0), new Point(1, 0), new Point(0, 1), new Point(1, 1));
-      //  IsometricRenderer.render(stack, texture, triangles);
-
         stack.restore();
     }
 

src/js/net/minecraft/client/gui/IngameOverlay.js

@@ -41,8 +41,8 @@ window.IngameOverlay = class extends Gui {
                 this.renderBlock(
                     stack,
                     this.textureTerrain, Block.getById(typeId),
-                    x + i * 20,
+                    x + i * 20 + 11,
-                    y
+                    y + 9
                 );
             }
         }

src/js/net/minecraft/client/render/isometric/IsometricRenderer.js

@@ -2,20 +2,22 @@ window.IsometricRenderer = class {
 
     // http://jsfiddle.net/xzL58dha/3/
 
-    static render(stack, texture, triangle) {
+    static render(stack, triangles, callback) {
-        IsometricRenderer.drawTriangle(
+        for (let triangle of triangles) {
-            stack,
+            IsometricRenderer.drawTriangle(
-            texture,
+                stack,
-            triangle.p0.x, triangle.p0.y,
+                triangle.p0.x, triangle.p0.y,
-            triangle.p1.x, triangle.p1.y,
+                triangle.p1.x, triangle.p1.y,
-            triangle.p2.x, triangle.p2.y,
+                triangle.p2.x, triangle.p2.y,
-            triangle.t0.u, triangle.t0.v,
+                triangle.t0.u, triangle.t0.v,
-            triangle.t1.u, triangle.t1.v,
+                triangle.t1.u, triangle.t1.v,
-            triangle.t2.u, triangle.t2.v
+                triangle.t2.u, triangle.t2.v,
-        );
+                callback
+            );
+        }
     }
 
-    static createTriangles(p1, p2, p3, p4) {
+    static createTriangles(texture, p1, p2, p3, p4) {
         // clear triangles out
         let triangles = [];
 
@@ -28,8 +30,8 @@ window.IsometricRenderer = class {
         let dx2 = p3.x - p2.x;
         let dy2 = p3.y - p2.y;
 
-        let imgW = image.naturalWidth;
+        let imgW = texture.naturalWidth;
-        let imgH = image.naturalHeight;
+        let imgH = texture.naturalHeight;
 
         for (let sub = 0; sub < subs; ++sub) {
             let curRow = sub / subs;
@@ -100,7 +102,7 @@ window.IsometricRenderer = class {
     }
 
 
-    static drawTriangle(stack, image, x0, y0, x1, y1, x2, y2, sx0, sy0, sx1, sy1, sx2, sy2) {
+    static drawTriangle(stack, x0, y0, x1, y1, x2, y2, sx0, sy0, sx1, sy1, sx2, sy2, callback) {
         stack.save();
 
         // Clip the output to the on-screen triangle boundaries.
@@ -114,40 +116,40 @@ window.IsometricRenderer = class {
 
         /*
         ctx.transform(m11, m12, m21, m22, dx, dy) sets the context transform matrix.
-    
+
         The context matrix is:
-    
+
         [ m11 m21 dx ]
         [ m12 m22 dy ]
         [  0   0   1 ]
-    
+
         Coords are column vectors with a 1 in the z coord, so the transform is:
         x_out = m11 * x + m21 * y + dx;
         y_out = m12 * x + m22 * y + dy;
-    
+
         From Maxima, these are the transform values that map the source
         coords to the dest coords:
-    
+
         sy0 (x2 - x1) - sy1 x2 + sy2 x1 + (sy1 - sy2) x0
         [m11 = - -----------------------------------------------------,
         sx0 (sy2 - sy1) - sx1 sy2 + sx2 sy1 + (sx1 - sx2) sy0
-    
+
         sy1 y2 + sy0 (y1 - y2) - sy2 y1 + (sy2 - sy1) y0
         m12 = -----------------------------------------------------,
         sx0 (sy2 - sy1) - sx1 sy2 + sx2 sy1 + (sx1 - sx2) sy0
-    
+
         sx0 (x2 - x1) - sx1 x2 + sx2 x1 + (sx1 - sx2) x0
         m21 = -----------------------------------------------------,
         sx0 (sy2 - sy1) - sx1 sy2 + sx2 sy1 + (sx1 - sx2) sy0
-    
+
         sx1 y2 + sx0 (y1 - y2) - sx2 y1 + (sx2 - sx1) y0
         m22 = - -----------------------------------------------------,
         sx0 (sy2 - sy1) - sx1 sy2 + sx2 sy1 + (sx1 - sx2) sy0
-    
+
         sx0 (sy2 x1 - sy1 x2) + sy0 (sx1 x2 - sx2 x1) + (sx2 sy1 - sx1 sy2) x0
         dx = ----------------------------------------------------------------------,
         sx0 (sy2 - sy1) - sx1 sy2 + sx2 sy1 + (sx1 - sx2) sy0
-    
+
         sx0 (sy2 y1 - sy1 y2) + sy0 (sx1 y2 - sx2 y1) + (sx2 sy1 - sx1 sy2) y0
         dy = ----------------------------------------------------------------------]
         sx0 (sy2 - sy1) - sx1 sy2 + sx2 sy1 + (sx1 - sx2) sy0
@@ -172,7 +174,7 @@ window.IsometricRenderer = class {
         //
         // TODO: figure out if drawImage goes faster if we specify the rectangle that
         // bounds the source coords.
-        stack.drawImage(image, 0, 0);
+        callback();
         stack.restore();
     };
 }

src/start.js

@@ -85,6 +85,10 @@ loadScripts([
     "src/js/net/minecraft/client/entity/Player.js",
     "src/js/net/minecraft/client/inventory/Inventory.js",
     "src/js/net/minecraft/client/Minecraft.js",
+    "src/js/net/minecraft/client/render/isometric/IsometricRenderer.js",
+    "src/js/net/minecraft/client/render/isometric/Point.js",
+    "src/js/net/minecraft/client/render/isometric/TextCoord.js",
+    "src/js/net/minecraft/client/render/isometric/Triangle.js",
     "src/js/net/minecraft/client/render/FontRenderer.js",
     "src/js/net/minecraft/client/render/Tessellator.js",
     "src/js/net/minecraft/client/render/WorldRenderer.js",