Рендеринг множества спрайтов с шестигранной формой из изображения с использованием pixijs - PullRequest
Новая
       77

Рендеринг множества спрайтов с шестигранной формой из изображения с использованием pixijs

0 голосов
/ 11 февраля 2019

Я пытаюсь создать гексагональную карту со списком типов местности.На данный момент у меня есть карта, нарисованная из спрайтов, которая использует в качестве базовой текстуры графику в форме шестиугольника.Мне нужно наложить на них разные изображения, но я не могу найти решение, как это сделать.

Вот демонстрация того, что у меня есть: 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

В принципе, мне нужно заменить эти белые шестиугольникис некоторыми текстурами.Как я могу получить это?

1 Ответ

0 голосов
/ 12 февраля 2019

как насчет этого: 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 прекрасно рисовать шестиугольник, а скрипка просто показывает основной метод рисования шестиугольникаплитки, если часть должна быть заменена получением правильного изображения для плитки в карте тайлов, если вы используете один

...