implement isometric blocks in hotbar
This commit is contained in:
@@ -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();
|
||||
};
|
||||
}
|
||||
@@ -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",
|
||||
|
||||
Reference in New Issue
Block a user