猫史档案馆

链接在这里↓

www.yxtnt.cn/boxTE/terrainEditor.html

(注意，只支持256x256的地形！)

使用说明：

>一开始的时候请点击右侧的新建项目，创建一个新的地形。

>接下来是要填入的三个数据：

1.项目名，也就是地形数据导出后的名字

2.地形基准高度，也就是初始化的时候地形的高度

3.水平面基准高度，决定了你的地图的水的高度

>然后是绘制阶段！

1.使用鼠标配合W或S按键在画布上进行绘制（W是提升地面高度，S降低）。切勿在一点上停留太久，否则你的地形将十分的突兀！或者如果你想做一些惊险的地形的话，也可以这么做。

2.按F或G键调整画笔的大小。F减小，G放大。

>画好了，接下来：

1.确认地形都绘制完毕，按右侧的”导出项目(box3)“按钮导出一个txt文件。

2.先使用下方代码将原地图的地形削平：

(async function(){
for(let i=0;i<257;i++){
    for(let j=0;j<257;j++){
        for(let k=1;k<=8;k++){
            voxels.setVoxel(i,k,j,0)
        }
        voxels.setVoxel(i,0,j,"dirt");
        await sleep(0.1);
    }
    
}
})()

3.再打开生成的文件然后ctrl+a全选复制到岛三的控制台即可运行。（注意，不要复制到代码区！）

>美化

如果你还想给你的地图中点树的话，请运行以下代码：

function tree(x,y,z){
    if(voxels.getVoxel(x,y,z)!=voxels.id("water")){
       var rand=1;
    for(let i=y+rand;i<y+4+rand;i++){
            voxels.setVoxel(x,i,z,"acacia");
        }
    for(let i=3+rand;i<5+rand;i++){
        for(let j=-2;j<3;j++){
            for(let k=-2;k<3;k++){
                voxels.setVoxel(x+j,y+i,z+k,"green_leaf");
            }
        }
    }
    for(let j=-1;j<2;j++){
        for(let k=-1;k<2;k++){
            voxels.setVoxel(x+j,y+5+rand,z+k,"green_leaf");
        }
    }
    voxels.setVoxel(x-1,y+6+rand,z,"green_leaf");
    voxels.setVoxel(x,y+6+rand,z,"green_leaf");
    voxels.setVoxel(x+1,y+6+rand,z,"green_leaf");
    voxels.setVoxel(x,y+6+rand,z-1,"green_leaf");
    voxels.setVoxel(x,y+6+rand,z+1,"green_leaf");
    }
    
};
(async function(){
for(let i=0;i<257;i++){
    for(let j=0;j<257;j++){
        for(let k=0;k<50;k++){
            if(voxels.getVoxel(i,k,j)==voxels.id("grass")){
                if(Math.random()*200<=1){
                    tree(i,k,j);
                }
            }
        }
    }
    await sleep(10);
}

})();

>效果

这就是这次帖子的所有内容了，谢谢大家阅览！望大家可以做出好看的地图发在评论区里！

BSS梅者如西

看了尹子的源代码……发现这水平是我一辈子达到不了的高度。。。

const sleep = (timeountMS) => new Promise((resolve) => {
    setTimeout(resolve, timeountMS);
  });


var canvas=document.getElementById("canvas");
var pen=canvas.getContext("2d");
/*types of data */
function xy(x,y){//鍧愭爣绯荤被鍨�
	this.x=x;this.y=y;
}
function vec(a,n){//鍚戦噺绫诲瀷
	this.a=a;this.n=n;
}
function angle(s,e){
    var x=e.x-s.x;
    var y=e.y-s.y;
    return Math.atan2(y,x);
}
function distance(s,e){
    var x=e.x-s.x;
    var y=e.y-s.y;
    return Math.sqrt(y*y+x*x);
}
function vtd(v,a){
    return new xy(
        Math.cos(a)*v,
        Math.sin(a)*v
    )
}
function fake_click(obj) {
    var ev = document.createEvent("MouseEvents");
    ev.initMouseEvent(
        "click", true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null
    );
    obj.dispatchEvent(ev);
}
function download(name, data) {
    var urlObject = window.URL || window.webkitURL || window;

    var downloadData = new Blob([data]);

    var save_link = document.createElementNS("http://www.w3.org/1999/xhtml", "a")
    save_link.href = urlObject.createObjectURL(downloadData);
    save_link.download = name;
    fake_click(save_link);
}

//consts
console.clear()
var cvs=new xy(canvas.width,canvas.height);
var data=new Array(cvs.x);
var projectName="鏂扮殑鍦板舰";
var level=0;
var mousePos=new xy();
//funcs
function cld(p,n){
    if(p.x>=0&&p.y>=0)
    data[p.x][p.y]+=n;
    return;
}
//data initialization
var angl=0,anglx=0,angly=0;
var waterLevel=10;
var zm=512/cvs.x
function getMousePos(e){
    mousePos=new xy(Math.round(e.offsetX/zm),Math.round(e.offsetY/zm));
    document.getElementById("shower").innerH喵L=`鍧愭爣:${mousePos.x},${mousePos.y}&nbsp;楂樺害:${Math.round(data[mousePos.x][mousePos.y])}&nbsp;<br>鐢荤瑪澶у皬:${rte}&nbsp;鍧″害:${angl}`
}
function exp(type){
    var e=`[`;
    for(let i=0;i<cvs.x;i++){
        e+="[";
        for(let j=0;j<cvs.y;j++){
            if(data[i][j]<=0){data[i][j]=0;}
            e+=`${Math.round(data[i][j])}`;
            if(j!=cvs.y-1){e+=",";}
        }
        e+="]";if(i!=cvs.y-1){e+=",";}
    }
    e+="]";
    if(type=="basic"){
        download(projectName+".txt",e);
        window.alert("瀵煎嚭鎴愬姛锛�")
    }else if(type=="box3"){
        var result=`
        (async function(){var data=${e};var sl=${waterLevel};
            for(let i=0;i<data.length;i++){
                for(let j=0;j<data[i].length;j++){
                    var 喵s="grass";
                    var d=data[i][j];
                    if(d<sl){喵s="dirt";}else if(d==sl||d==sl+1){喵s="sand";}else if(d>sl){喵s="grass";}
                    for(let k=0;k<d;k++){voxels.setVoxel(i,k,j,"dirt");}
                    voxels.setVoxel(i,d,j,喵s);
                }
                await sleep(10);
            }
            await sleep(100);
            world.say("water filling...");
            for(let i=0;i<data.length;i++){for(let j=0;j<data.length;j++){for(let k=0;k<=sl;k++){
                if(voxels.getVoxel(i,k,j)==0){voxels.setVoxel(i,k,j,"water");}
            }}
                await sleep(2);
            }
            })()
        `
        console.log(result);
        //璋冪敤鏂规硶
        download(projectName+".txt",result);
        window.alert("瀵煎嚭鎴愬姛锛�")
    }
}
function searchC(height){
    if(height<waterLevel-20){
        return "#003371";
    }else if(height<waterLevel-15){
        return "#0073ff";
    }else if(height<waterLevel-10){
        return "#00aeff";
    }else if(height<waterLevel-5){
        return "#44c1f6";
    }else if(height<waterLevel){
        return "#44cef6";
    }else if(height<waterLevel+5){
        return "#00bc12";
    }else if(height<waterLevel+10){
        return "#9ed900";
    }else if(height<waterLevel+20){
        return "#c9dd22";
    }else if(height<waterLevel+30){
        return "#fff143";
    }else if(height<waterLevel+40){
        return "#ffbb00";
    }else if(height<=waterLevel+50){
        return "#ffa400";
    }else{
        return "purple";
    }
}
var renderer={};

renderer.render=async function(){
    // pen.clearRect(0,0,canvas.width,canvas.height);
    // for(let i=0;i<renderer.renderData.length;i++){
        
    //     var d=renderer.renderData[i];
    //     var color=searchC(data[d.x][d.y]);
    //     pen.fillStyle=color;
    //     pen.strokeStyle=color;
    //     pen.moveTo(d.x,d.y);
    //     pen.beginPath();
    //     pen.fillRect(d.x,d.y,d.x+1,d.y+1);
    //     pen.stroke();
    //     if(i%5000==0)
    //     await sleep(1);
    // }
    // renderer.renderData=[];
    for(let i=0;i<cvs.x;i++){
        for(let j=0;j<cvs.y;j++){
            var color=searchC(data[i][j]);
            pen.fillStyle=color;
            pen.strokeStyle=color;
            pen.moveTo(i,j);
            pen.beginPath();
            pen.fillRect(i,j,i+1,j+1);
            pen.stroke();

        }
        if(i%500==0)
        await sleep(1);
    }
    // requestAnimationFrame(renderer.render);
}

function intitalize(){
    projectName=prompt("鏂板缓椤圭洰锛氭枃浠跺悕锛�");
    level=prompt("鍦板舰鍩哄噯楂樺害?");
    waterLevel=prompt("姘村钩闈㈠熀鍑嗛珮搴�?")*1;
    for(let i=0;i<data.length;i++){
        data[i]=new Array(cvs.y);
        for(let j=0;j<data[i].length;j++){
            data[i][j]=level*1;
        }
    }
    renderer.render();
    // requestAnimationFrame(renderer.render);
}
function load(){
    // var dat=prompt("璇疯緭鍏ユ暟鎹�");
    // eval("data=dat");
    // waterLevel=10;  
    // renderer.render();
    alert("鏆傛湭寮€鏀�")
}

var rte=10;
document.onkeydown=function(event){
    document.getElementById("shower").innerH喵L=`鍧愭爣:${mousePos.x},${mousePos.y}&nbsp;楂樺害:${Math.round(data[mousePos.x][mousePos.y])}&nbsp;<br>鐢荤瑪澶у皬:${rte}&nbsp;鍧″害:${angl}`
    var e = event || window.event || arguments.callee.caller.arguments[0];
    if(e && e.keyCode==87){ // 鎸� W 
        if(mousePos.x!=undefined){
            var rt=rte+5
            for(let i=-rt;i<=rt;i++){
                for(let j=-rt;j<rt;j++){
                    var d=distance(new xy(0,0),new xy(i,j))
                    if(d<=rte){
                        cld(new xy(mousePos.x+i,mousePos.y+j),Math.round(Math.cos(d*Math.PI/rt/2)*10)/30);
                        
                    }
                }
            }
        }
    }
    if(e && e.keyCode==83){ // 鎸� S
        if(mousePos.x!=undefined){
            var rt=rte+5
            for(let i=-rt;i<=rt;i++){
                for(let j=-rt;j<rt;j++){
                    var d=distance(new xy(0,0),new xy(i,j))
                    if(d<=rte){
                        cld(new xy(mousePos.x+i,mousePos.y+j),-Math.round(Math.cos(d*Math.PI/rt/2)*10)/30);
                        
                    }
                }
            }
        }
    }
    if(e && e.keyCode==68){//鎸� D
        renderer.render();
    }
    if(e && e.keyCode==70){//鎸� F
        if(rte>=1)rte--;
    }if(e && e.keyCode==71){//鎸� G
        rte++;
    }
};
document.onkeyup=function(event){
    document.getElementById("shower").innerH喵L=`鍧愭爣:${mousePos.x},${mousePos.y}&nbsp;楂樺害:${data[mousePos.x][mousePos.y]}&nbsp;鐢荤瑪澶у皬:${rte}`
    var e = event || window.event || arguments.callee.caller.arguments[0];
    if(e && e.keyCode==87){ // 鎸� W 
        renderer.render();
    }
    if(e && e.keyCode==83){ // 鎸� S
        renderer.render();
    }
    
};


setInterval(()=>{
    anglx=Math.abs(Math.round(angle(new xy(0,data[mousePos.x][mousePos.y]),new xy(2,data[mousePos.x+2][mousePos.y+2]))*180/Math.PI))
    angly=Math.abs(Math.round(angle(new xy(0,data[mousePos.x][mousePos.y]),new xy(2,data[mousePos.x+2][mousePos.y+2]))*180/Math.PI))
    angl=(anglx+angly)/2
},50)

猫史档案馆

【box3】自制地形编辑器对外开放啦！

回复