导读：用放大镜或缩放工具。mc画图软件图形缩小的尺寸无法看到，此时可以使用放大镜或缩放工具将图纸放大，或者使用恢复默认缩放比例功能将图纸还原到默认大小。mc画图软件是一个非常好用的绘画软件，可以轻松的画出像素图，可以用于外观开发和材质包中的外观绘
用放大镜或缩放工具。mc画图软件图形缩小的尺寸无法看到，此时可以使用放大镜或缩放工具将图纸放大，或者使用恢复默认缩放比例功能将图纸还原到默认大小。mc画图软件是一个非常好用的绘画软件，可以轻松的画出像素图，可以用于外观开发和材质包中的外观绘制。
码农家园
导航
用CSS绘制《我的世界》暮色森林中的遗迹石方块纹理
css
拾穗者
原文地址：https://segmentfaultcom/a/1190000022984416
作者：Fw恶龙
本文首发于：思否
前言：在前端项目开发过程中有时候会遇到一些背景是通过一些规则图形进行简单变化（如：平移、旋转）得到的，通常的做法是裁剪一块可重复的，设置为背景图即可，随着CSS3的普及，linear-gradient和radial-gradient属性已经得到了较好的支持，通过这两个属性可以很好的模拟许多背景纹理，如：条纹、圆点、方格。于是尝试着用这两个属性来绘制一些可以替代的场景。在绘制过程中突然想到我的世界里的迷宫方块纹理，当时打牛头人时一直觉得这个纹理很好看（下图），于是尝试下用CSS来绘制这个纹理。
dz1png
一、分析纹理
可以发现这个纹理的最小单元是下图，通过旋转三次可以得到一个地砖纹理。
dz4gif
二、绘制纹理单元
dz5jpg
如果细分的话其实可以把这个单元继续拆分一半，旋转180度也可以得到目前的最小单元，就不搞这么复杂了。目前的最小单元是88的单元格，先考虑绘制第一行。
1
<div class="item"></div>
由于定位地址有较多计算，以下用到stylus预处理器，也方便纹理颜色调整。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
bp($w)
$s = ''
for i in (18)
if(i != 8)
$s = $s + '0' + ' ' + p2r(0125 (i - 1) $w) + ','
else
$s = $s + '0' + ' ' + p2r(0125 (i - 1) $w)
return unquote($s)
item
$c1 = #738073
background-color $c1
$c2 = #747475
$w = 100px
width $w
height $w
background-image linear-gradient(90deg, $c2 375%, $c1 375%, $c1 50%, $c2 50%, $c2 625%, $c1 625%, $c1 75%, $c2 75%, $c2 875%, $c1 875%, $c1 100%)
background-size $w 0125$w
background-position bp($w)
background-repeat no-repeat
剩下的7行同理可得：
1
2
3
4
5
6
7
8
background-image linear-gradient(90deg, $c2 375%, $c1 375%, $c1 50%, $c2 50%, $c2 625%, $c1 625%, $c1 75%, $c2 75%, $c2 875%, $c1 875%, $c1 100%),
linear-gradient(90deg, $c2 375%, $c1 375%, $c1 50%, $c2 50%, $c2 625%, $c1 625%, $c1 75%, $c2 75%, $c2 100%),
linear-gradient(90deg, $c2 25%, $c1 25%, $c1 375%, $c2 375%, $c2 625%, $c1 625%),
linear-gradient(90deg, $c1 25%, $c2 25%, $c2 50%, $c1 50%, $c1 625%, $c2 625%),
linear-gradient(90deg, $c2 375%, $c1 375%, $c1 50%, $c2 50%, $c2 75%, $c1 75%),
linear-gradient(90deg, $c1 375%, $c2 375%, $c2 625%, $c1 625%, $c1 75%, $c2 75%),
linear-gradient(90deg, $c2 25%, $c1 25%, $c1 375%, $c2 375%, $c2 50%, $c1 50%, $c1 625%, $c2 625%, $c2 100%),
linear-gradient(90deg, $c1 125%, $c2 125%, $c2 25%, $c1 25%, $c1 375%, $c2 375%, $c2 50%, $c1 50%, $c1 625%, $c2 625%)
以上只贴了关键代码，具体代码细节可以查看
codePen
三、其他纹理，下图为iOS与安卓上的效果截图（不完全测试）
iospng
androidjpg
四、绘制图像的另一种思路
可以使用box-shadow属性绘制出像素图
codePen|去吧！皮神
五、相关链接
CSS3 Patterns Gallery
我的世界|遗迹石方块
Copyright © 码农家园 联系：ddyu2x@gmailcom
这种方法可以不下mod，因为创世神涉及到很多英文指令，如果你打字不好+英文不好+对命令知识不了解，这儿有种笨办法：
进入你电脑的“开始”界面（就是你按键盘上窗户键会出现的界面）->所有程序->附件->画图->大小调最大，直到你看到很多小方格，然后点菜单栏里的圆形，拖动鼠标在屏幕上画圆，你就会看到像素化过的圆，在回到我的世界里照着建就是了。
目录方法1：获得纹理文件1、在开始菜单的搜索栏内输入“%appdata%” 。2、点击“Roaming”（漫游）。3、进入"Minecraft"文件夹。4、打开bin文件夹。5、使用WinRar ，打开Minecraft 的jar文件。6、把需要的文件拷到新文件夹里。7、把jar文件关闭，进入新文件夹中。方法2：设计纹理1、想要设计什么纹理？先构思一下要设计的内容。2、用你选择的编辑软件来编辑。3、自制纹理。原有的Minecraft看上去太乏味了，想要个新的吗？在网上找不到合适的，你可以做什么呢？当然是自己做一个纹理包了！下面教你一些制作纹理包的基础方法。
方法1：获得纹理文件
1、在开始菜单的搜索栏内输入“%appdata%” 。
2、点击“Roaming”（漫游）。
3、进入"Minecraft"文件夹。
4、打开bin文件夹。
5、使用WinRar ，打开Minecraft 的jar文件。 这个文件看起来类似Minecraftjar 这样的，或者直接就一个Minecraft的名字（鼠标移上去，看看是否是jar文件），你可以在任何和WinRar类似的解压缩程序内，把这个文件打开，查看内部的压缩文件。
6、把需要的文件拷到新文件夹里。把这个文件夹放在好记的地方，取个好记的名字（即新纹理包的名字）。把所有的文件夹，包括其他的必要文件（png 、 txt、particlespng 以及 terrainpng）移动到新文件夹内。
7、把jar文件关闭，进入新文件夹中。现在你可以查看所有Minecraft的纹理文件了。看看想要编辑哪些文件。右键点击，选择“打开方式”，选择想要用的编辑软件来编辑。
方法2：设计纹理
1、想要设计什么纹理？先构思一下要设计的内容。你可以想想游戏中房子的设计，也可以看看网上别人怎么设计的，找点灵感。
2、用你选择的编辑软件来编辑。你可以直接用微软画图软件，一般的标准Windows系统都有，里面可以编辑游戏的各个像素。你也可以轻松更改画面纹理，比如加上新颜色等。
3、自制纹理。用更好的设计软件，或者多花点时间，多点决心，你可以从零开始，做好自己的纹理包。这和上一步一样，也是编辑工作，但是你需要给画面做更重大的改变，甚至做个完全的大翻修。你需要多花时间和技巧才能做好，所以没有准备好前，先不要涉足自制纹理哦。
