5
地图平铺算法
地图 我使用Perlin噪声高度图使用Javascript创建基于图块的RPG，然后根据噪声的高度分配图块类型。 地图最终看起来像这样（在小地图视图中）。 我有一个相当简单的算法，它从图像上的每个像素中提取颜色值，并将其转换为整数（0-5），具体取决于其在（0-255）之间的位置，该位置对应于tile字典中的tile。然后将此200x200数组传递给客户端。 然后，引擎根据数组中的值确定切片并将其绘制到画布上。因此，我最终得到了具有逼真的外观的有趣世界：山脉，海洋等。 现在，我想做的下一件事是应用某种混合算法，如果邻居不是同一类型，它将导致瓦片无缝混合到其邻居中。上面的示例地图是玩家在小地图中看到的。在屏幕上，他们看到了用白色矩形标记的部分的渲染版本。其中图块是用其图像而不是单色像素渲染的。 这是用户在地图上看到的示例，但与上面的视口显示的位置不同！ 我希望这种转变能够发生。 算法 我想出了一个简单的算法，该算法可以遍历视口中的地图，并在每个图块的顶部渲染另一个图像，前提是该图块位于不同类型的图块旁边。（不更改地图！仅渲染一些额外的图像。）该算法的想法是对当前图块的邻居进行剖析： 这是引擎可能必须渲染的示例场景，当前图块是标有X的图块。 创建了一个3x3数组，并读取了周围的值。因此，在本示例中，数组看起来像。 [ [1,2,2] [1,2,2] [1,1,2] ]; 然后，我的想法是针对可能的图块配置制定一系列案例。在非常简单的水平上： if(profile[0][1] != profile[1][1]){ //draw a tile which is half sand and half transparent //Over the current tile -> profile[1][1] ... } 得到以下结果： 这是从[0][1]到的过渡[1][1]，但不是从[1][1]到的过渡[2][1]，这里仍然存在硬性边缘。因此，我认为在那种情况下必须使用角砖。我创建了两个3x3的Sprite工作表，以为可以容纳所有可能需要的图块组合。然后，我为游戏中的所有图块复制了此图（白色区域是透明的）。每种类型的图块最终为16个图块（不使用每个Spritesheet上的中心图块。） 理想结果 因此，有了这些新的图块和正确的算法，示例部分将如下所示： 但是我所做的每一次尝试都失败了，算法中总是存在一些缺陷，并且模式最终变得很奇怪。我似乎无法正确处理所有情况，总的来说，这似乎是一种糟糕的做法。 一个办法？ 因此，如果任何人都可以提供关于我如何创建此效果的替代解决方案，或者提供什么方向来编写分析算法，那么我将不胜感激！