Convert to voxel terrain: stable tiles, animated heights only
This commit is contained in:
Richard Zink committed
1 parent
7a3142ddd1
commit
273fcc2390
1 file changed
+90
-57
+90
-57
@@ -3,7 +3,7 @@
|
|||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
<title>Isometric Tiles</title>
|
<title>Isometric Voxel Terrain</title>
|
||||||
<style>
|
<style>
|
||||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||||
body { overflow: hidden; background: #000; }
|
body { overflow: hidden; background: #000; }
|
||||||
@@ -17,6 +17,7 @@
|
|||||||
var ctx = c.getContext('2d');
|
var ctx = c.getContext('2d');
|
||||||
var W, H;
|
var W, H;
|
||||||
var TILE = 32;
|
var TILE = 32;
|
||||||
|
var HEIGHT_UNIT = 6;
|
||||||
|
|
||||||
function resize() {
|
function resize() {
|
||||||
W = c.width = window.innerWidth;
|
W = c.width = window.innerWidth;
|
||||||
@@ -25,45 +26,45 @@
|
|||||||
window.addEventListener('resize', resize);
|
window.addEventListener('resize', resize);
|
||||||
resize();
|
resize();
|
||||||
|
|
||||||
var offX = 0, offY = 0;
|
|
||||||
var speedX = 0, speedY = 0;
|
|
||||||
var targetSpeedX = 0, targetSpeedY = 2;
|
|
||||||
|
|
||||||
var angle = Math.PI / 6;
|
var angle = Math.PI / 6;
|
||||||
|
var cosA = Math.cos(angle);
|
||||||
|
var sinA = Math.sin(angle);
|
||||||
|
|
||||||
function project(x, y, z) {
|
function project(x, y, z) {
|
||||||
var fov = 600;
|
var scale = 1;
|
||||||
var scale = fov / (600 + z);
|
var isoX = (x - y) * cosA * scale;
|
||||||
var cosA = Math.cos(angle);
|
var isoY = ((x + y) * sinA - z) * scale;
|
||||||
var sinA = Math.sin(angle);
|
var sx = isoX + W / 2;
|
||||||
var isoX = x * cosA - y * cosA;
|
var sy = isoY + H / 2;
|
||||||
var isoY = x * sinA + y * sinA - z;
|
return [sx, sy];
|
||||||
var sx = isoX * scale + W / 2;
|
|
||||||
var sy = isoY * scale + H / 2;
|
|
||||||
return [sx, sy, scale];
|
|
||||||
}
|
}
|
||||||
|
|
||||||
function getHeight(x, y) {
|
function getHeight(x, y, time) {
|
||||||
var h = 0;
|
var h = 0;
|
||||||
h += Math.sin(x * 0.02) * 4;
|
h += Math.sin(x * 0.03 + time * 0.5) * 3;
|
||||||
h += Math.cos(y * 0.02) * 4;
|
h += Math.cos(y * 0.03 + time * 0.4) * 3;
|
||||||
h += Math.sin(x * 0.04 + y * 0.02) * 2;
|
h += Math.sin(x * 0.05 + y * 0.03 + time * 0.3) * 1.5;
|
||||||
h += Math.cos(y * 0.04 - x * 0.02) * 1.5;
|
h += Math.cos(y * 0.05 - x * 0.03 + time * 0.6) * 1;
|
||||||
return h;
|
return Math.round(h);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function isWater(h) {
|
||||||
|
return h <= -2;
|
||||||
|
}
|
||||||
|
|
||||||
|
var time = 0;
|
||||||
var tiles = [];
|
var tiles = [];
|
||||||
|
|
||||||
function generateTiles() {
|
function generateTiles() {
|
||||||
tiles = [];
|
tiles = [];
|
||||||
var rangeX = Math.ceil(W / TILE) + 4;
|
var rangeX = Math.ceil(W / (TILE * cosA * 2)) + 2;
|
||||||
var rangeY = Math.ceil(H / TILE) + 4;
|
var rangeY = Math.ceil(H / (TILE * sinA * 2)) + 2;
|
||||||
|
|
||||||
for (var x = -rangeX; x <= rangeX; x++) {
|
for (var x = -rangeX; x <= rangeX; x++) {
|
||||||
for (var y = -rangeY; y <= rangeY; y++) {
|
for (var y = -rangeY; y <= rangeY; y++) {
|
||||||
var wx = x * TILE + offX;
|
var wx = x * TILE;
|
||||||
var wy = y * TILE + offY;
|
var wy = y * TILE;
|
||||||
var h = getHeight(wx, wy);
|
var h = getHeight(wx, wy, time);
|
||||||
tiles.push({ x: wx, y: wy, h: h });
|
tiles.push({ x: wx, y: wy, h: h });
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -78,52 +79,84 @@
|
|||||||
var t = tiles[i];
|
var t = tiles[i];
|
||||||
var wx = t.x, wy = t.y, h = t.h;
|
var wx = t.x, wy = t.y, h = t.h;
|
||||||
|
|
||||||
var x1 = wx, y1 = wy + TILE, z1 = h;
|
var water = isWater(h);
|
||||||
var x2 = wx + TILE, y2 = wy + TILE, z2 = getHeight(wx + TILE, wy + TILE);
|
var topColor = water ? '#2299dd' : '#33aa33';
|
||||||
var x3 = wx + TILE, y3 = wy, z3 = getHeight(wx + TILE, wy);
|
var leftColor = water ? '#1166aa' : '#226622';
|
||||||
var x4 = wx, y4 = wy, z4 = h;
|
var rightColor = water ? '#0d4477' : '#114411';
|
||||||
|
|
||||||
var p1 = project(x1, y1, z1);
|
if (h > 0) {
|
||||||
var p2 = project(x2, y2, z2);
|
var lighting = 0.5 + Math.max(0, sinA * 0.3 + 0.2);
|
||||||
var p3 = project(x3, y3, z3);
|
topColor = applyLighting(topColor, lighting);
|
||||||
var p4 = project(x4, y4, z4);
|
leftColor = applyLighting(leftColor, lighting * 0.7);
|
||||||
|
rightColor = applyLighting(rightColor, lighting * 0.5);
|
||||||
|
} else if (water) {
|
||||||
|
topColor = '#2299dd';
|
||||||
|
leftColor = '#1166aa';
|
||||||
|
rightColor = '#0d4477';
|
||||||
|
}
|
||||||
|
|
||||||
if (p1[1] < -100 || p1[1] > H + 100) continue;
|
var top1 = project(wx, wy + TILE, h * HEIGHT_UNIT);
|
||||||
if (p4[1] < -100 || p4[1] > H + 100) continue;
|
var top2 = project(wx + TILE, wy + TILE, h * HEIGHT_UNIT);
|
||||||
|
var top3 = project(wx + TILE, wy, h * HEIGHT_UNIT);
|
||||||
|
var top4 = project(wx, wy, h * HEIGHT_UNIT);
|
||||||
|
|
||||||
var water = h < 2;
|
ctx.fillStyle = topColor;
|
||||||
var baseR = water ? 0 : 0;
|
|
||||||
var baseG = water ? 80 : 140;
|
|
||||||
var baseB = water ? 180 : 0;
|
|
||||||
|
|
||||||
var lighting = 0.4 + Math.max(0, Math.sin(angle) * 0.5 + 0.3);
|
|
||||||
var r = Math.floor(baseR * lighting);
|
|
||||||
var g = Math.floor(baseG * lighting);
|
|
||||||
var b = Math.floor(baseB * lighting);
|
|
||||||
|
|
||||||
ctx.fillStyle = 'rgb(' + r + ',' + g + ',' + b + ')';
|
|
||||||
ctx.beginPath();
|
ctx.beginPath();
|
||||||
ctx.moveTo(p1[0], p1[1]);
|
ctx.moveTo(top1[0], top1[1]);
|
||||||
ctx.lineTo(p2[0], p2[1]);
|
ctx.lineTo(top2[0], top2[1]);
|
||||||
ctx.lineTo(p3[0], p3[1]);
|
ctx.lineTo(top3[0], top3[1]);
|
||||||
ctx.lineTo(p4[0], p4[1]);
|
ctx.lineTo(top4[0], top4[1]);
|
||||||
ctx.closePath();
|
ctx.closePath();
|
||||||
ctx.fill();
|
ctx.fill();
|
||||||
|
|
||||||
ctx.strokeStyle = water ? 'rgba(0, 200, 255, 0.5)' : 'rgba(0, 255, 100, 0.5)';
|
if (h !== 0 || water) {
|
||||||
ctx.lineWidth = 0.5;
|
var bot1 = project(wx, wy + TILE, 0);
|
||||||
ctx.stroke();
|
var bot2 = project(wx + TILE, wy + TILE, 0);
|
||||||
|
var bot3 = project(wx + TILE, wy, 0);
|
||||||
|
var bot4 = project(wx, wy, 0);
|
||||||
|
|
||||||
|
ctx.fillStyle = leftColor;
|
||||||
|
ctx.beginPath();
|
||||||
|
ctx.moveTo(bot4[0], bot4[1]);
|
||||||
|
ctx.lineTo(top4[0], top4[1]);
|
||||||
|
ctx.lineTo(top1[0], top1[1]);
|
||||||
|
ctx.lineTo(bot1[0], bot1[1]);
|
||||||
|
ctx.closePath();
|
||||||
|
ctx.fill();
|
||||||
|
|
||||||
|
ctx.fillStyle = rightColor;
|
||||||
|
ctx.beginPath();
|
||||||
|
ctx.moveTo(bot3[0], bot3[1]);
|
||||||
|
ctx.lineTo(top3[0], top3[1]);
|
||||||
|
ctx.lineTo(top4[0], top4[1]);
|
||||||
|
ctx.lineTo(bot4[0], bot4[1]);
|
||||||
|
ctx.closePath();
|
||||||
|
ctx.fill();
|
||||||
|
}
|
||||||
|
|
||||||
|
if (h > 0) {
|
||||||
|
ctx.strokeStyle = 'rgba(0, 0, 0, 0.4)';
|
||||||
|
ctx.lineWidth = 1;
|
||||||
|
ctx.strokeRect(top1[0], top1[1], top3[0] - top1[0], top3[1] - top1[1]);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function applyLighting(color, factor) {
|
||||||
|
var r = parseInt(color.substr(1, 2), 16);
|
||||||
|
var g = parseInt(color.substr(3, 2), 16);
|
||||||
|
var b = parseInt(color.substr(5, 2), 16);
|
||||||
|
r = Math.floor(r * factor);
|
||||||
|
g = Math.floor(g * factor);
|
||||||
|
b = Math.floor(b * factor);
|
||||||
|
return 'rgb(' + r + ',' + g + ',' + b + ')';
|
||||||
|
}
|
||||||
|
|
||||||
function frame() {
|
function frame() {
|
||||||
ctx.fillStyle = '#001020';
|
ctx.fillStyle = '#001020';
|
||||||
ctx.fillRect(0, 0, W, H);
|
ctx.fillRect(0, 0, W, H);
|
||||||
|
|
||||||
speedX += (targetSpeedX - speedX) * 0.05;
|
time += 0.02;
|
||||||
speedY += (targetSpeedY - speedY) * 0.05;
|
|
||||||
offX += speedX;
|
|
||||||
offY += speedY;
|
|
||||||
|
|
||||||
generateTiles();
|
generateTiles();
|
||||||
drawTiles();
|
drawTiles();
|
||||||
|
|||||||
Reference in new issue
Block a user