implement isometric blocks in hotbar

This commit is contained in:
LabyStudio
2022-02-04 16:09:19 +01:00
parent 058d9b86cd
commit 04e38ff7c3
4 changed files with 84 additions and 36 deletions
+50 -8
View File
@@ -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();
}
@@ -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
);
}
}
@@ -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();
};
}
+4
View File
@@ -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",