Проблема с движущимися масками в Phaser 3 - PullRequest
Новая
       14

Проблема с движущимися масками в Phaser 3

2 голосов
/ 07 февраля 2020

У меня проблема с пониманием поведения маски. У меня есть круговое изображение внутри контейнера, а затем помещаю другое немного более маленькое изображение сверху, чтобы создать своего рода границу вокруг него. Чтобы убедиться, что я могу использовать различные изображения, я применил созданную мной круговую маску из графической фигуры к меньшему изображению, чтобы оно всегда соответствовало, даже если его прямоугольник angular. Я также добавил форму к контейнеру. 

Container
- biggerImage
- graphics shape
- smallerImage with mask

Теперь я хочу начать перемещать контейнер, и изображения, и маска перемещаются относительно контейнера. Моя проблема в том, что я не могу заставить маску двигаться. Изучив документацию, я понимаю, что для изменения положения маски необходимо переместить форму, из которой она была создана, вместо фактической маски. Перемещая контейнер, я теоретически тоже перемещаю фигуру, но, поскольку фактическое положение фигуры никогда не меняется (это 0,0 - относительно контейнера, в котором она находится), маска не перемещается ни на дюйм. Он просто сидит в начале сцены (0,0) в левом верхнем углу моего холста.

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

//create draggable container to move everything around
let container = this.add.container(200, 200).setInteractive({hitArea: new Phaser.Geom.Circle(0, 0, 20), hitAreaCallback: Phaser.Geom.Circle.Contains, draggable: true});

//create big circle image and add it to container
let biggerImage = this.add.image(0, 0, 'circleImage').setDisplaySize(40, 40).setTintFill(0xFFFFFF);
container.add(biggerImage);

//create smaller circle to use as a mask
let shape = this.make.graphics().fillCircle(0, 0, 15);
container.add(shape);

//create small rectangular image, apply mask and add it to container
let smallerImage = this.add.image(0, 0, 'rectImage').setMask(shape.createGeometryMask());
container.add(smallerImage);

Это - это то, что я хочу, чтобы он выглядел. Обратите внимание на то, как маска меньшего размера влияет на маску, а розовый кружок позади нее - нет. Это работает, потому что я установил положение графической фигуры в положение контейнера, в котором она находится. Маска теперь всегда будет оставаться в этой позиции, а не в 0,0, но она по-прежнему не двигается.

...