From 04e38ff7c36c13749fdd67532b36d228518a0249 Mon Sep 17 00:00:00 2001 From: LabyStudio Date: Fri, 4 Feb 2022 16:09:19 +0100 Subject: [PATCH] implement isometric blocks in hotbar --- src/js/net/minecraft/client/gui/Gui.js | 58 ++++++++++++++++--- .../net/minecraft/client/gui/IngameOverlay.js | 4 +- .../render/isometric/IsometricRenderer.js | 54 ++++++++--------- src/start.js | 4 ++ 4 files changed, 84 insertions(+), 36 deletions(-) diff --git a/src/js/net/minecraft/client/gui/Gui.js b/src/js/net/minecraft/client/gui/Gui.js index 6ee6645..b3b0e7f 100644 --- a/src/js/net/minecraft/client/gui/Gui.js +++ b/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); - this.renderBlockFace(stack, texture, block, EnumBlockFace.NORTH); + stack.translate(x + 0.5, y + 0.5); + 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) - - // 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); - + IsometricRenderer.render(stack, triangles, _ => this.drawSprite(stack, texture, minU * 256, minV, 16, 16, 0, 0, 256, 256)); stack.restore(); } diff --git a/src/js/net/minecraft/client/gui/IngameOverlay.js b/src/js/net/minecraft/client/gui/IngameOverlay.js index 281b06c..cbe17fb 100644 --- a/src/js/net/minecraft/client/gui/IngameOverlay.js +++ b/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, - y + x + i * 20 + 11, + y + 9 ); } } diff --git a/src/js/net/minecraft/client/render/isometric/IsometricRenderer.js b/src/js/net/minecraft/client/render/isometric/IsometricRenderer.js index f9e6a57..f3eb1f7 100644 --- a/src/js/net/minecraft/client/render/isometric/IsometricRenderer.js +++ b/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) { - IsometricRenderer.drawTriangle( - stack, - texture, - triangle.p0.x, triangle.p0.y, - triangle.p1.x, triangle.p1.y, - triangle.p2.x, triangle.p2.y, - triangle.t0.u, triangle.t0.v, - triangle.t1.u, triangle.t1.v, - triangle.t2.u, triangle.t2.v - ); + static render(stack, triangles, callback) { + for (let triangle of triangles) { + IsometricRenderer.drawTriangle( + stack, + triangle.p0.x, triangle.p0.y, + triangle.p1.x, triangle.p1.y, + triangle.p2.x, triangle.p2.y, + triangle.t0.u, triangle.t0.v, + triangle.t1.u, triangle.t1.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 imgH = image.naturalHeight; + let imgW = texture.naturalWidth; + 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(); }; } \ No newline at end of file diff --git a/src/start.js b/src/start.js index b1f83b1..5d1d6ee 100644 --- a/src/start.js +++ b/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",