Question

我正在尝试使用地形类型列表创建一个六边形地图。现在，我有了从精灵绘制的地图，该精灵使用具有六边形形状的图形作为基本纹理。我需要在它们上放置不同的图像，但是找不到解决方法。

这是我所拥有的演示：https://codepen.io/cuddlemeister/pen/rPvwZw

我试图通过这种方式做到这一点：

const texture = PIXI.Texture.fromImage(img);
const s = new PIXI.Sprite(texture);
s.mask = graphics;

但是我只得到一个蒙版要应用的六角形。如果将图形循环放置，则会出现性能问题。也许我应该只剪切图像以获得六边形，然后简单地绘制由这些图像制成的精灵？

这是我要实现的目标：http://i.imgur.com/xXLTK.jpg

基本上，我需要用一些纹理替换该白色六边形。我怎么能得到这个？

Answer 1

那呢： https://jsfiddle.net/vxt5eqk4/ 对于每个图块，您都使用剪贴蒙版

var scale = 8;
for (y = 0; y < 10; y++) {
  for (x = 0; x < 10; x++) {
var offsetx = (y%2)*5 + x*10 - 6;
var offsety = y * 9 -3;
ctx.save();
  ctx.beginPath();
    ctx.moveTo(scale*(offsetx+5),scale*(offsety));
    ctx.lineTo(scale*(offsetx+10),scale*(offsety+3));
    ctx.lineTo(scale*(offsetx+10),scale*(offsety+9));
    ctx.lineTo(scale*(offsetx+5),scale*(offsety+12));
    ctx.lineTo(scale*offsetx,scale*(offsety+9));
    ctx.lineTo(scale*offsetx,scale*(offsety+3));
  ctx.closePath();
  ctx.clip();
  if((y%2 !== 0 || x%2 !== 0) && (y%2 === 0 || x%2 === 0)){
      ctx.drawImage(img, scale*offsetx, scale*offsety, 10*scale,  12*scale);
    }else{
      ctx.drawImage(img2, scale*offsetx, scale*offsety, 10*scale,  12*scale);
    }
  ctx.restore();
}

10x12的网格对我来说画六角形似乎还不错小提琴只是显示了绘制六边形瓷砖的基本方法，如果您要使用的话，应该通过在tilemap中获取瓷砖的正确图像来替换部分。

使用pixijs从图像渲染许多六角形的精灵

1 个答案: