使用 pixijs 从图像中渲染大量具有六边形形状的精灵答案

【问题标题】：Rendering lots of sprites with hexagon shape from image using pixijs使用 pixijs 从图像中渲染大量具有六边形形状的精灵
【发布时间】：2019-10-02 23:18:18
【问题描述】：

我正在尝试使用地形类型列表创建六边形地图。目前我有一张从精灵绘制的地图，它使用六边形图形作为基础纹理。我需要在它们上面放置不同的图像，但找不到解决方案。

这是我所拥有的演示：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

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

【问题讨论】：

标签： javascript canvas html5-canvas pixi.js

【解决方案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 中获取合适的图块图像来替换 if 部分

【讨论】：

感谢您提供的示例，但这不符合需要，以及在 pixi 中代替剪辑方法使用掩码。甚至使用由精灵制成的蒙版也会导致巨大的性能限制。目前通过使用已经具有六边形形状的精灵解决了这个问题
当考虑性能时，您不能只渲染一次字段并将画布结果保存到缓冲区，然后每帧都绘制该缓冲区吗？